التمرين - إعداد بنية تطبيق الويب لديك

مكتمل

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

في هذه الوحدة، يمكنك إنشاء بنية مشروع صغيرة باستخدام Visual Studio Code. يحتوي المشروع على ثلاثة ملفات: ملف HTML وملف CSS وملف JavaScript. يمكنك أيضا إضافة ملحق Visual Studio Code لتبسيط تشغيل موقع الويب في المستعرض.

إنشاء مجلد جديد لموقعك على الويب

1. فتح Visual Studio Code.

   عند فتح Visual Studio Code، يتم فتح صفحة الترحيب . لاحظ أنه يمكنك إنشاء ملف جديد أو فتح مجلد في القائمة ابدأ.

   

   إذا لم تكن صفحة Welcome مرئية، يمكنك عرضها بتحديد Help > Welcome من القائمة. (بدلاً من ذلك، يمكنك عرض صفحة Welcome عن طريق فتح Command Palette باستخدام اختصار لوحة المفاتيح Shift+Ctrl+P على جهاز كمبيوتر يعمل بنظام التشغيل Windows أو Shift+Cmd+P في نظام التشغيل macOS، أو عن طريق تحديد View > Command Palette من قائمة Visual Studio Code. عند عرض Command Palette، أدخل >Help: Welcome في حقل البحث لفتح صفحة Welcome.)

2. حدد Open folder في القائمة Start من صفحة Welcome أو حدد File > Open Folder من القائمة Visual Studio Code.

   

   عند فتح مجلد، يحتوي نظام التشغيل على خيار قائمة لإنشاء مجلد جديد.

3. تنقل إلى الموقع حيث تريد إنشاء المجلد الجديد لموقعك على الويب، وحدد مجلد جديد.

4. قم بتسمية المجلد موقع ويب بسيطثم حدد تحديد مجلد.

   هام

   إذا ظهر مربع حوار Visual Studio Code، فحدد Trust the authors of all files in the parent folder...; هذه هي ميزة Workspace Trust التي تتيح لك تحديد ما إذا كان يجب أن تسمح مجلدات المشروع بتنفيذ التعليمات البرمجية التلقائي أو تقيده. لقد أنشأت المجلد للتو، لذا فهو آمن.

إنشاء بعض الملفات

1. إنشاء ملف جديد عن طريق تحديد File > New File من القائمة أو باستخدام Control+N على Windows أو Command+N على جهاز macOS.

2. حفظ الملف باستخدام Control+S على Windows أو Command+S على macOS.

3. أدخل index.html لاسم الملف، ثم حدد حفظ.

4. كرر الخطوات السابقة لإنشاء ملفين آخرين: main.css وapp.js. عند الانتهاء، يجب أن يحتوي مجلد مشروع موقع الويب البسيط في Visual Studio Code Explorer على الملفات التالية:

   • index.htm
   • main.css
   • app.js

   

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

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

تثبيت الملحقات أو الحزم

يمكنك توسيع وظيفة Visual Studio Code باستخدام سوق الملحقات. ضع في اعتبارك أن هذه الملحقات هي موارد مطورة من المجتمع المحلي، وغالبا ما تكون هناك العديد من الحلول لنفس النوع من الميزات. يمكنك تثبيت ملحقات بشكل فردي في محرر، أو عدة في وقت واحد مع سطر الأوامر.

لتطوير الويب، كل ما تحتاجه الآن مفتوح في المستعرض. تساعدك هذه الإضافة على فتح موقع الويب بسرعة في المستعرض الافتراضي، بدلاً من نسخ عنوان URL الخاص بالملف ولصقه في المستعرض.

لتثبيت هذا الملحق، استخدم الخطوات التالية:

1. حدد أيقونة الملحقات على شريط الأنشطة (الجزء الأيسر).

2. أدخل open in في مربع البحث، ثم حدد open in browser extension الذي تم نشره بواسطة TechER.

3. حدد Install، وVisual Studio Code يقوم بتثبيت الملحق.

   

4. قم بالتبديل مرة أخرى إلى Explorer بالنقر فوق الرمز العلوي في شريط الأنشطة، أو استخدم Control+ Shift-E على Windows أو Command+Shift-E على macOS.

أحسنت! يستغرق التثبيت والإعداد وقتاً إضافياً قليلاً؛ ولكنك تحتاج فقط إلى التثبيت والإعداد مرة واحدة. الآن أنت على استعداد لإنشاء موقع ويب.