اول خطوة في البرمجة

محرر الاكواد البرمجية - IDE code editor

يمكن كتابة الاكواد في أي برنامج محرر نصوص (  Text Editor  ) مثل برنامج (  Notepad  ) الذي يأتي مع الويندوز ولكنه محرر نصوص عادي لا يصلح لتحرير الاكواد البرمجية ولذلك يجب ان نبحث عن محرر خاص بالأكواد البرمجية .

محرر الاكواد البرمجية (   IDE   )

التعريف: - IDE = Integrated Development Environment وهو برنامج لكتابة ال Code ويحتوي على بيئة عمل فيها الأدوات البرمجية التي تحتاجها كلها وكل IDE مختلف عن الآخر وهذا ما يميزه عن أي Text Editor عادي يحتاج لإضافة Extensions إضافية للحصول على هذه المميزات والمميزات تختلف من IDE للآخر.

المميزات: -

Compiler	Interpreter	Version Control	Intelligent Code Completion	Error Check & Debugging
FTP Client	Refactoring	Database Management	Class and Object	Library Dependencies
		Linting	Multiple Language Support

Compiler

يمكن أن نقول عليه المحول البرمجي أو مترجم ال Codes وهو المسؤول عن تحويل ال Source Code وهو ال Code الذي تقوم بكتابته إلى Code يفهمه ال Computer مباشرة لأن ال Code الذي تقوم بكتابته بلغة من لغات ال High Level Programming Languages مثلا يكون Code قريب للإنسان ومفهوم وغير مكتوب بلغة ال Computer ولذلك لابد من وجود ال Compiler لعمل هذا التحويل من لغة البرمجة التي تكتب بها الى Machine Code.

Interpreter

هو المترجم الذي يقوم بتشغيل الكود البرمجي مباشرة بدون تحويله للغة الكمبيوتر ويمكن أن يكون ال IDE يحتوي على Compiler أو Interpreter أو الإثنين معا.

Version Control

هو نظام التحكم في الإصدارات الخاصة بالتطبيق البرمجي الذي تقوم بعمله وهذه ميزة لا غنى عنها حيث يمكنك الرجوع لأي إصدار في التطبيق والرجوع لأي ملف قديم وكل شيء يكون محمي وهناك نسخة منه حتى لا تحدث أي مشاكل أثناء البرمجة ومن أهم المواقع التي تقدم هذه الخدمة موقع مثل Github, Gitlab.

Intelligent Code Completion

وهو النظام الذكي لإكمال ال Code حيث أنه هناك الكثير من البرامج التي تساعدك في إكمال ال Code وليس هذا فقط بل تكتب لك جميع دوال اللغة Functions بما فيها المدخلات الموجودة داخل الدالة ويكون فيها مرجع كامل للغة وليس فقط إكمال للكود Code بل يمكن أن تكتب Function معينة وتجد تعريف كامل بها وماذا تقبل وكل ما يخصها بالتفصيل.

Error Check & Debugging

وهو ميزة التنبيه على وجود خطأ معين أثناء الكتابة وليس هذا فقط بل يكتب لك Report كامل عن المشكلة وفي أي سطر ويختلف هذا التقرير من محرر للآخر حسب مميزاته لكن الميزة موجودة وأيضا ميزة ال Debugging وهي التي تجعلك تضع Breaks داخل ال Code وتجعل البرنامج يمشي عليها خطوة خطوة وترى النتائج لتعرف أين المشكلة وما هي ال Function أو ال Code المسبب لهذه المشكلة حتى تتعقبه وتصل للحل.

FTP Client

وهو البرنامج المسؤول عن رفع الملفات لموقعك وكلمة FTP إختصار ل File Transfer Protocol وهو ال Protocol المسؤول عن رفع الملفات تنزيلها والتعديل عليها في موقعك أو ال Server الخاص به وهو ليس الوسيلة الوحيدة يمكنك رفع الملفات مباشرة من خلال لوحة تحكم الموقع cPanel مثلا لكن ميزة وجود هذه الطريقة في ال IDE هي أنه عند التعديل على أي ملف وعمل حفظ يقوم برفعه مباشرة للموقع بدلا من إستعمال برنامج خارجي بعد الإنتهاء وهي ميزة مهمة جدا جدا لمن يعمل على ملفات موقعه Online مباشرة ولا يعمل على ال Localhost

Refactoring

وهي ميزة إعادة هيكلة ال Code البرمجي وليس السلوك الخاص بالبرنامج بمعنى تغيير المسميات لتكون أكثر منطقية وسهولة وأكثر تنظيما وهي تستخدم لتقليل التعقيد ولا تقوم بتغيير مميزات التطبيق البرمجي فمثلا لو كان عندك Function تستعمل في كل مكان اسمها make() في حالة تم التعامل معها من أي مبرمج في الفريق لن يفهم معناها ويمكن أن تكون أكثر تعقيدا لو كان اسمها mk() ولذلك تقوم بعمل Refactor كامل لتغيير المسميات الخاصة بها لاسم مناسب للفهم ولتقليل التعقيد makeLetterCapital() مثلا فهنا قمنا بتغيير الاسم في كل مكان لكن لم نقوم بتغيير سمات وسلوك البرنامج نفسه ولن يتغير شيء في التنفيذ. وطبعا ال Refactor ليس فقط تغيير التسمية بل البنية الخاصة بال Code والتعاليم البرمجية فمثلا يمكن أن يكون لديك Function تقوم بعمل مهمة بشكل طويل ومعقد وقابل لظهور مشاكل يمكنك تغييرها لتقوم بعمل نفس المهمة ولكن بسطور اقل وبطريقة سهل عمل صيانة لها وسهل الكشف عن الأخطاء فيها لكن لم نقوم بتغيير سلوك وسمات التطبيق البرمجي. وفي بعض الحالات يمكن أن تقوم بعمل تغييرات طفيفة لحل مشكلة ما أثناء ال Refactor

Database Management

وهي ميزة جميلة ومهمة جدا في التعامل مع قاعدة البيانات مباشرة من تعديل وإنشاء جداول والتعامل مع البيانات جميعها من حذف وتعديل وكتابة استعلامات وكل شيء.

Class and Object

الكثير من المحررات تمكنك من تصفح ال Classes وال Objects الخاصة بك وليس هذا فقط بل يمكنها عمل رسم بياني للبنية الخاصة بالتطبيق الذي تقوم بعمله وتساعدك كثيرا لتنفيذ فكرتك. وهذا مهم جدا لمن يعمل بأي لغة تستعمل ال Object Oriented Programming حتى لا يحدث مشاكل في تنظيم ال Objects وال Classes وهذه ميزة مهمة جدا وفعالة جدا.

Library Dependencies

يحتوي المحرر على كل ما تريده من مكتبات مرتبطة باللغة فمثلا لو كنت تعمل على لغة PHP وتستعمل إطار عمل مثل Laravel أو YII سوف تجد المحرر يحتوى على كل ما يلزمك لإنشاء مشروع بأطر العمل هذه. وفي مجال التصميم تخيل معي أنك تريد عمل مشروع جديد وتستعمل اطار عمل مثل Bootstrap فمجرد إختيارك لمشروع جديد وتختار اطار العمل يقوم بإنشاء المشروع ويستدعي ملفات اطار العمل كلها في مكانها السليم مثلا bootstrap.css و bootstrap.js وال Directory الخاص بال Fonts وهكذا ويسهل عليك الامور كلها.

Linting

وهي ميزة فحص اذا كان ال Code متوافق مع معايير اللغة أم لا وهي طريقة تجعلك تكتب ال Code بطريقة تتماشى مع معايير اللغة عن طريق Pattern معين فعلى سبيل المثال دعنا نأخذ مثال على لغة JavaScript فيمكنك أن تكتب Function معينة وتعمل بشكل سليم ولا يوجد بها أي مشكلة لكن يظهر لك مشكلة أو تنبيه ليخبرك أن ال Statement داخل ال Function لا تحتوي على Semi Colon في نهاية السطر رغم ان ال Code يعمل بنجاح لكن هنا يجعلك تمشي على Pattern معين ليكون ال Code متوافق مع المعايير ويمكنك أن ترى مثال هنا لتفهم الفكرة شاهد الصورة قبل وبعد لترى رغم ان ال Code في الحالتين سوف يخرج نفس النتيجة ولكن في الحالة الأولى أخرج لك أخطاء تنبيهات ال Linter وفي المثال بعده قمنا بتفادي التنبيهات والأخطاء.

Multiple Language Support

وهي الميزة المهمة التي تجعلك تعمل على IDE واحد ولا تحتاج لتنزيل أكثر من برنامج لكتابة ال Code وهي توفير الدعم لأكثر من لغة فتخيل معي لو كنت تعمل ك Full Stack Developer وتحتاج لأن تعمل على لغة مثل PHP أو Python وتحتاج في نفس الوقت لعمل الجزء الخاص بال Front-End بواسطة Html, Css, JavaScript وهي ميزة جميلة لدعم اللغات كلها في نفس البرنامج.

بعض الميزات الأخرى التي يمكنك القراءة عنها: -

Build Automation                                          Code Sniffing                                      Code Highlight

أشهر برامج (IDEs) التي يمكنك التعامل معها

Visual Studio              ATOM              Notepad++     Netbeans        PHP Storm     Aptana Studio

Komodo IDE               Coda                Eclipse            Sublime Text              TextMate        Brackets

        Vim    TextWrangler             CoffeeCup       Espresso         UltraEdit         BBEdit

في الحقيقة انا افضل التعامل مع (Visual Studio) و (ATOM) و (Notepad++)  حيث انني بدأت ب (Notepad++)   وانتهيت ب (Visual Studio) وهذا يعتمد على مدى الارتياح للمحرر الذي تفضل التعامل معه ولكن الأفضل والاقوى من وجهة نظري (Visual Studio) لما يتميز به من مميزات كثيرة وهنا سأركز فقط على مميزات هذا المحرر ويمكنك البحث في الانترنت على مميزات المحررات الأخرى وتقرر أي محرر ستختار التعامل معه.

ماذا يمكنك أن تفعل مع Visual Studio؟

باستخدام Visual Studio، يمكنك إنشاء أي تطبيق أو لعبة أو إضافة باستخدام أي لغة من اختيارك. تعرف على الميزات التي ستعزز إنتاجيتك وتحسن جودة الكود البرمجي وتضيف إلى مرونة التعاون مع فريق العمل.

• ·         تطوير الكود البرمجي

التنقل والكتابة وإصلاح التعليمات البرمجية الخاصة بك بسرعة

• ·         تصحيح الكود البرمجي

التصحيح والتشخيص بسهولة

• ·         اختبار الكود البرمجي

اكتب كودًا عالي الجودة باستخدام أدوات اختبار شاملة

• ·         التعاون مع فريق العمل

استخدم التحكم في الإصدار، وكن مرنًا ، وتعاون بكفاءة

• ·         الإضافات

اختر من بين آلاف الملحقات لتخصيص IDE الخاص بك

• ·         قواعد البيانات

تطوير ونشر قواعد بيانات SQL Server وAzure SQL بسهولة

• ·         تصميم التطبيقات

أنشئ تطبيقات أصلية أو مختلطة تستهدف Android وiOS وWindows

• ·         تصميم الالعاب

قم بتصميم ألعاب الكود وتصحيحها باستخدام أحدث الرسومات وأدوات البرمجة النصية

• ·         تطبيقات الويب

طوّر تطبيقات ويب حديثة بمرونة وأدوات مفتوحة المصدر وقوية

أهم إضافات Visual Studio Code

Open-In-Browser

VSCode لا يتوفر على خاصية فتح الملفات مباشرة على المتصفح، فهذه الإضافة Open In Browser ستتيح لك فتح الملفات على المتصفح الافتراضي من المحرر، أو اختيار المتصفح بشكل يدوي عبر سطر الأوامر الخاص بالمحرر.

Quokka

إضافة Quokka تساعدك لعمل Debugging بشكل سهل ومباشر على الكود الذي تكتبه. فهي تُظهر لك نتيجة المتغيرات وخرج الدوال. فهذه الإضافة سهلت الإعدادات وتشتغل مع JSX و TypeScript.

Faker

Faker أداة تتيح لك إضافة بيانات تجريبية –وهمية- بشكل سريع، فهي تستطيع توليد الأسماء، العناوين، الصور، أرقام الهواتف، وكذلك جمل إنشائية بشكل عشوائي. وتحتوي على تصنيفات متعددة مع إمكانية التحكم في البيانات حسب الحاجة.

CSS Peek

مع هذه الإضافة سيصبح إنتقالك بين تعريفات CSS سهل جداً، يكفي أن تحدد ID أو Class التي تريد مشاهدة CSS خاصته واختيار الذهاب إلى التعريف وسيتم توجيهك إلى تعريف CSS بشكل مباشر.

HTML Boilerplate

إضافة HTML Boilerplate ستختصر الوقت أثناء كتابة وسم head و body، فبعد تثبيت هذه الإضافة يكفيك كتابة html والضغط على زر Tab وسيتم توليد هيكلة لصفحة HTML كاملة.

Prettier

هذه الإضافة أكيد ستعجبك، فهي تقوم بعمل تحسين لعرض الكود بشكل تلقائي، فمثلاً عن الاشتغال ضمن فريق ستجد أن كل مطور يكتب الكود بنمطه Style الخاص. فبهذه الإضافة يمكنها عمل Formatter للكود الخاص ب JS و CSS لتحسين العرض ليكون شكل الكود موحد.

Color Info

إضافة صغيرة تمكنك من عرض المعلومات الخاصة بالألوان في CSS. يكفي فقط تمرر الفأرة على رمز الكود الخاص باللون لتظهر لك نافذة بها كافة المعلومات المتعلقة بهذا اللون.

SVG Viewer

ستتيح لك هذه الإضافة فتح صيغ الصور SVG بشكل مباشر بدون الاستعانة ببرنامج خارجي. مع إمكانية تحويلها إلى صيغة PNG وإنشاء رابط URI لها.

TODO Highlight

هذه الأداة ستقوم بتحديد كافة تعليقات TODO لجعلها بارزة ليسهل التوجه إليها وإنجازها إذا لم تنجز بعد. بشكل افتراضي يتم تحديد كلمات TODO و FIXME لكن يمكنك تخصيص الكلمات على حسب حاجتك.

Icon Fonts

Icon Fonts إضافة صغيرة تتيح لك إمكانية تضمين خطوط الأيقونات عبر CDN. فهي تدعم أكثر من 20 نوع من الخطوط المعروفة ومن بينهم Font Awesome,، Ionicons، Glyphicons، وكذلك أيقونات الماتريال ديزاين.

Minify

إضافة مهمة ستحتاجها أثناء عملية الإنتاج، فهي تمكنك من إنتاج ملفات مصغرة minify لملفاتك، هذه الإضافة تدعم JavaScript، CSS، وكذلك HTML.

Change Case

يُخول لك VSCode تحويل النصوص من النصوص ذات الأحرف الصغيرة lowercase إلى الأحرف الكبيرة uppercase أو العكس. لكنه لا يتوفر على أي تحويل متقدم للنصوص، لكن إضافة Change Case سيمكنك عمل تغييرات أكثر على النصوص، كعمل camelCase، kebab-case، snake_case وغيرها من الأنماط الأخرى.

Regex Previewer

إضافة رائعة للتعابير القياسية Regex ، فهي تمكنك من تجربة التعبير القياسية بشكل مباشرة على النصوص، مع تحديد كل النصوص التي تنطبق عليها هذا التعبير القياسي Regex .

لغات البرمجة ومنصات العمل

يأتي VSCode مع دعم للعديد من لغات البرمجة، فإذا وجدت بأن المحرر لا يدعم لغتك بشكل افتراضي فيمكنك تحميل إضافة خاصة بهذه اللغة والتي ستجعل من السهل الاشتغال عليها داخل المحرر. فبعض منصات العمل كـ react native و vue يتوفرون على إضافات لدعمهم.

الثيمات Themes

أكيد أن الثيمات من الأكثر الإضافات أهمية، فهي الإضافة التي تظهر لك طوال الوقت أمام المحرر. لذا فعليك حسن اختيارها. يوجد كم هائل من التخصيصات التي يمكنك تنصيبها ومن بينهم :

Auto Close Tag

تساعدك إضافة JsHint على الارتقاء بالكود البرمجي الجافا سكربت بشكل أفضل، إن كنت مبرمج جافاسكربت ( و فريمووركاتها أيضا ) و تستخدم محرر أكواد VS Code فيجب عليك تضمين هذه الإضافة، تسمح لك إضافة JsHint بالتعرف على الأخطاء في الكود الخاص بك، تصحيح و تكملة الأكواد أيضا، كما يمكنها القيام بعملية Debug للكود البرمجي، ستسهل عليك هذه الإضافة كتابة كود جافاسكربت صحيح و نظيف و فعال باحترافية، يمكنك التحكم الكامل فيها أيضا فيمكنك تشغيلها تارة و تعطيلها تارة اخرى، تمتد JsHint الى القيام بنفس العملية في بعض اللغات الاخرى مثل HTML و CSS .

IntelliSense

إضافة اخرى مهمة لمطوري الويب، تسمح لك هذه الإضافة باستخراج كل أسماء الكلاسات في الـ HTML و الـ CSS التي تم استخدامها في مشروعك البرمجي، و أيضا كلاسات الإطارات الخارجية التي تتعامل معها مثل Bootstrap و غيرها، ثم تقوم بتكملتها لك في الكود الخاص بك، لست مضطرا - كما في السابق - لتذكر أسماء الكلاسات من أجل استخدامها، أصبح بإمكانك ان تكتب حرف b في الـ Attribute Class ليظهر لك عدة خيارات لكل الكلاسات المستخدمة في المشروع البرمجي، إضافة جد مميزة لمطوري الويب .

MsSQL

إضافة خاصة بالتعامل مع SQL Server و قواعد البيانات و إرسال الـ Queries و تنظيمها و ما الى ذلك، إن كنت تتعامل مع قواعد البيانات، ففي الغالب ستوجد تجربة بعض الـ Queries و التحقق من صحتها و التحقق من عملها قبل ادراجها في لغة برمجية معينة مثل الـ Php او C# و غيرها، هذه الإضافة على VS Code تسمح لك بإدارة قواعد البيانات و تحويل الـ VS Code الى منصة شبيه بالـ SQL Server، إضافة مميزة لمن يتعامل مع قواعد البيانات بشتى أشكالها من أجل تجسيد و تجربة الاكواد في قواعد البيانات .

Code Runner

إضافة جد مميزة، تخيل معي انك في صدد كتابة كود جافا سكربت، و تريد التحقق من عمله أم لا، ما عليك فعله هو تضمينه في إحدى صفحات الـ HTML ثم تشغيل الصفحة و استخراج الـ Console و التحقق من نتيجة الكود البرمجي الذي كتبته للتو، أمر قد يكون صعبا قليلا، فتأتي إضافة Code Runner لتسهيل العملية بشكل كامل، يكفي بعد تنصيب الإضافة بالطبع ان تقوم بتضليل الجزء الذي تريد تشغيله من الكود البرمجي، ثم النقر يمينا و البحث عن Run Code ثم ستظهر لك في الأسفل كونسول مخصص سيُظهر لك نتيجة الكود البرمجي او الخطأ ان كان، يمكنك فعل ذلك مع العديد من اللغات البرمجية و ليس فقط الجافا سكربت، فالإضافة تدعم العديد من اللغات منها الـ C , C++ , Ruby , Java و غيرها .

Project Manager

في محررات أكواد أخرى مثلا Sublime او Bracket و غيرها، يمكنك فتح أزيد من مشروع في نوافذ مختلفة، قد يبدو الأمر مزعجا خصوصا ان اردت فتح 3 او 4 مشاريع، فسيصبح الأمر متكدسا عليك و نوافذ عديدة، في برنامج VS Code يمكنك فعل نفس الشيء، لكن يمكنك فعل شيء أفضل، استخدام إضافة Project Manager، تسمح لك هذه الإضافة بفتح أزيد من مشروع برمجي في مشروع واحد، و الانتقال بينها بكل سهولة عبر تبويب في الأعلى، بذلك تنظيم أكبر لمشاريعك البرمجية سلاسة في التحويل بينها و الانتقال من مشروع لآخر.

Material Theme

حبوبي الحبوب، هو الثيم او الستايل الذي أستخدمه شخصيا في الـ VS Code، رغم انه ثيم واحد الا انه يتوفر على أزيد من ستايل، منها الـ Dark و الـ Dark Blue و الـ Light، كلها جيدة، شخصيا أستخدم الـ Dark Blue، ستايل جميل و جذاب، مريح للعين و سهل تتبع الكود بتغييرات اللون المتناسقة، كما بستايل جد جميل معروف و هو الـ Material Design في خواصه الأخرى غير محرر الأكواد، الـ Fonts المستخدمة جيدة كذلك و احترافية .

File Template

إضافة اخرى مميزة ستسهل عليك الكثير والكثير من العمل، في العديد من لغات البرمجية أثناء تهيئة ملف جديد، سيتوجب عليك في كل مرة إضافة العديد و العديد من التهيئات الأولية، مثلا في صفحات الـ HTML ربما سيتوجب عليك إضافة الوسوم الأساسية و بعض الـ Meta و الـ Viewport و غيرها و غيرها، سيبدو الأمر مملا ان قمت به في كل مرة تنشئ ملفا جديدا بهذه الصيغة. هنا تتدخل هذه الإضافة، تسمح لك إضافة File Template بإنشاء ملفات جديدة بتهيئة معينة، يمكننا تسميتها بالـ Master Page التي تريد العمل بها مستقبلا في أي لغة برمجة تريد.

Rainbow Brackets

و نختمها بهذه الإضافة البسيطة التي تسمح لك بإضافة ألوان على الـ Brackets او الأقواس، فالكثير من الأشخاص خصوصا في الكود البرمجي الطويل يعانون من مشكلة اختلاط الأقواس مع بعضها البعض فلا تعرف أي قوس ينتمي لأي بداية، لذلك هذه الإضافة ستساعدك على إضافة ألوان لأقواس محددة من أجل تحديد بداية و نهاية كل كود، إضافة بسيطة لكنها جميلة و احترافية و ستساعدك كثيرا.

Live Server

وهي إضافة مخصصة لعرض الصفحة عرض مباشر في كل عملية حفظ تقوم بها للملف الحالي، وذلك من خلال إنشاء سيرفر مؤقت لتشفير الصفحة في المتصفح في نفس الوقت الذي تقوم بإجراء تعديلات على الكود الخاص بالملف.

Auto Rename Tag

تساعد هذه الإضافة مبرمجين لغة HTML تحديداً وذلك من خلال تطبيق اي تغييرات على اسماء الوسوم وتطبيقها على كل من وسم الفتح والإغلاق تلقائياً.

Auto Close Tag

تساعد هذه الإضافة الأشخاص الذين يعملون بلغة البرمجة HTML حيث تقوم بإغلاق الوسم الذي تقوم بفتحه تلقائياً دون الحاجة لإغلاقه بالطريقة اليدوية التي تكون في بعض الأحيان مزعجة على كل مبرمج.

CSS Formatter

إن الوظيفة الأساسية لهذه الإضافة هي عملية ترتيب اكواد الـ CSS من خلال إضافة مسافات لجعل الكود اجمل وقابل للقراءة.

PHP Formatter

تعمل هذه الإضافة نفس عمل الإضافة التي قبلها، حيث تقوم بترتيب الأكواد المكتوبة بلغة البرمجة PHP من اجل جعلها تبدو اجمل وقابلة للقراءة.

JS & CSS Minifier

تقوم هذه الأداة بضغط ملفات الـ CSS والـ JavaScript لجعلها اصغر حجماً لكي يتم إستخدامها في مشاريعك التي تحتاج فيها تحميل ملفات اصغر حجماً من ما هي عليه.