تجهيز وتنصيب بيئة العمل (سلسلة بناء التطبيقات) |جـ1
الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،
" يرجى العلم أن هذا المقال أحد مقالات (السلسلة الكاملة لتعلّم بناء التطبيقات - مجانا).
قبل البدء في بناء التطبيق ستحتاج أولا أن تقوم بتنصيب بعض البرامج والأدوات التي تساعدك أثناء العمل.
- برنامج تحرير الأكواد (VSCode)، ولتنزيل البرنامج على جهازك - حسب نظام تشغيلك - فضلا أضغط هنا
- برنامج نود جي اس (Nodejs)، ولتنزيله على جهازك - فضلا اضغط هنا
للتأكد من تنصيب البرنامج بنجاح قم بفتح طرفية الأوامر (Terminal) على جهازك واكتب الأمر التالي
node --version
يفترض من هذا الأمر أن يُظهر لك رقم إصدار البرنامج على الجهاز، حاليا الإصدار عندى وقت كتابة هذا المقال هو (v20.10.0).
يرجى ملاحظة أنه عند تنصيب برنامج "Nodejs" فإنه تلقائيا يأتي معه أداة اخرى اسمها إن بي ام (NPM)، وللتأكد من وجودها يرجي كتابة الأمر التالي في "طرفيه الأوامر" على جهازك.
npm --version
حاليا رقم الإصدار عندى هو (10.2.3).
بالنسبة لبرنامج "Nodejs" فهو عبارة عن بيئة عمل تساعد على تنفيذ أوامر "جافا سكريبت" على الخادم دون الحاجة لاستخدام مستعرض ويب (Web Browser) لتنفيذ هذه الأوامر.
أما "NPM" فهي عبارة عن مستودع لعدد كبير من المكتبات البرمجية المكتوبة بلغة "جافا سكريبت" بواسطة مبرمجين من أنحاء العالم، قاموا بمشاركة هذه البرمجيات مجانا لمساعدة المبرمجين في تنفيذ التطبيقات بشكل أسهل وأسرع، يمكن أن تتخيل هذه البرمجيات على أنها قطع مكعبات صغيرة تضيفها إلى بعضها لتبنى بها أشكالا كبيرة.
بعد أن قمنا بتنصيب البرامج والأدوات اللازمة، فالخطوة التالية هي تنصيب البرنامج نفسه، انشئ مجلد (Folder) جديد على جهازك ثم بداخله قم بفتح "طرفية الأوامر" واكتب الأمر التالي، مع استبدال <project-name> بإسم التطبيق الذي تفضله باللغة الإنجليزية، عندى سأختار الاسم products-app
npx nuxi@latest init <project-name>
قد يظهر لك سؤال عند كتابة الأمر السابق يسألك عن مدير الحِزَم (Packages manager) الذي تفضل استخدامه، قم باختيار "NPM"، ثم اضغط زر التأكيد Enter في لوحة المفاتيح، وانتظر الانتهاء من التنصيب.
أيضا قد يظهر سؤال لتأكيد إنشاء نظام التحكم فى الاصدارات (Git repository)، فهو المسئول عن رفع نسخة من الكود البرمجي أونلاين بحيث يمكنك مشاركتها بسهولة مع فريق العمل أو يمكنك استخدامها مستقبلا عند الحاجة إلى نشر التطبيق على الخادم بحيث يمكن للزوار زيارته، يمكنك الإجابة على هذا السؤال ب(نعم).
بعد انتهاء التنصيب بنجاح تحتاج لدخول مجلد المشروع من خلال كتابة الأمر التالي
cd products-app
في الأمر السابق استخدمنا cd وهو اختصار تغيير مسار المجلد (change directory) وذلك للدخول إلى المجلد الخاص بالمشروع.
لفتح ملفات المشروع في برنامج "في اس كود"، اضغط الزر يمين الفأرة واختر من القائمة (فتح بواسطة) ثم اختر برنامج "في اس كود"، أو لتنفيذ نفس الأمر بواسطة "الطرفية" أكتب الأمر التالي
code .
و لتشغيل البرنامج على المتصفح، قم بتنفيذ الأمر التالي
npm run dev -- -o
لاحظ الإضافة o- في نهاية الأمر فهي اختصار للأمر فتح (open)، ووظيفتها فتح التطبيق في نافذة جديدة داخل المستعرض، أما بدون هذه الإضافة سيتم تشغيل البرنامج لكن لن يفتح تلقائيا في المستعرض، و ستحتاج في هذه الحالة أن تكتب عنوان التطبيقhttp://localhost:3000بشكل يدوي داخل متصفح الويب حتى يمكن مشاهدة التطبيق.
إذا قمت بتطبيق الخطوات السابقة بشكل سليم يفترض أن تتمكن من فتح التطبيق في المستعرض بالشكل التالى
بهذا نكون - بفضل الله - قد قمنا بتنصيب وتشغيل التطبيق على الجهاز.
بإمكانك الوصول إلى الكود الكامل للتطبيق على GitHub عبر الرابط هنا.
إذا كان لديك أي استفسار أو ملاحظات لا تتردد في ذكرها في التعليقات على المقال، وفقنى الله وإياك إلى كل خير ،،