تمرين - قم بإضافة حاوية تطوير إلى مشروع موجود مسبقًا

مكتمل

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

في هذا التمرين، ستضيف حاوية dev وتفتح مشروع لوحة معلومات المنتجات في الحاوية.

إضافة حاوية تطوير

  1. ارجع إلى VS Code والمشروع الذي نسخته سابقا.

  2. اضغط على F1 لفتح لوح الأوامر.

  3. اكتب add dev container وحدد Dev Containers: Add Development Container Configuration Files. يقدم هذا قائمة بقوالب حاويات التطوير. تحتوي القوالب على الملفات المصدر اللازمة لتكوين بيئة تطوير كاملة لمكدس التكنولوجيا المحدد.

  4. حدد إضافة تكوين إلى مساحة العمل.

  5. حدد الخيارات التالية:

    خيار القيمة‬
    تحديد قالب تكوين حاوية بايثون 3
    إصدار Python 3.11
    تحديد ميزات إضافية لتثبيتها حدد موافق

هام

في الخطوة الأولى عند تحديد قالب تكوين، قد تحتاج إلى تحديد "Show All Definitions..." من القائمة، ثم حدد Python بمجرد تحميل المجموعة الكاملة من القوالب.

ستتم إضافة تكوين حاوية Dev إلى مشروعك. سوف يقوم Visual Studio Code بإعلامك بأنه يمكنك الآن فتح المشروع في حاوية. تجاهل هذا الإعلام في الوقت الحالي.

قم بفحص ملفات الضبط

  1. لاحظ أنه تمت إضافة مجلد جديد تحت اسم '.devcontainer' إلى المشروع.
  2. قم بتوسيع هذا المجلد ولاحظ أنه يحتوي على ملف devcontainer.json.

فتح المشروع في حاوية

  1. اضغط على F1 لفتح لوح الأوامر.
  2. اكتب إعادة فتح في الحاوية.
  3. حدد حاويات التطوير: إعادة فتح في الحاوية من قائمة الخيارات المتوفرة.

ستبدأ الحاوية في البناء. قد يستغرق البناء الأولي بضع دقائق لأنه يجب أن يتم سحب صورة جديدة للأسفل وبناؤها على الجهاز الخاص بك. بعد أن تم بناء الحاوية في المرة الأولى، سيكون البناء أسرع بكثير في المرات اللاحقة.

عرض المؤشر البعيد

عند اكتمال بناء الحاوية، يمكنك تأكيد اتصالك بالحاوية عن طريق فحص المؤشر البعيد. يجب أن تشاهد الآن ملفات مشروعك مُحمَّلة في VS Code.

  • فحص مؤشر التحكم عن بعد من خلال عرض الزاوية اليسرى السفلية من VS Code. لاحظ أنه يعرض الآن "حاوية التطوير: Python 3".

    لقطة شاشة للمؤشر البعيد مع نص يشير إلى حاوية التطوير python 3

هام

قد ترى إعلامات حول Pylance أو تحسين الأداء على Windows. يمكنك رفض أي إعلامات تراها في VS Code بأمان. لن تحتاج إلى القيام بهذه الأشياء.

قم بفحص الحاوية

  1. اضغط على Ctrl + ` لفتح الوحدة الطرفية المتكاملة في Visual Studio Code إذا لم تكن مفتوحة بالفعل.

  2. لاحظ أن مطالبة الوحدة الطرفية قد تبدو مختلفة عن مطالبة الوحدة الطرفية العادية الخاصة بك.

    مطالبة terminal المتكاملة في VS Code

  3. شغل الأمر التالي للتأكد من أن Python مثبتة:

    python --version
    

    يجب أن يكون إخراج المحطة الطرفية هو إصدار Python المستخدم في الحاوية.

تثبيت تبعيات المشروع

  • تشغيل الأمر التالي في المحطة الطرفية لتثبيت تبعيات Flask التي تحتاجها لتشغيل المشروع:

    pip3 install --user -r requirements.txt
    

تشغيل المشروع

  1. أدخل الأمر التالي في المحطة الطرفية لتشغيل المشروع:

    python app.py
    
  2. افتح المشروع في متصفح بالانتقال إلى http://127.0.0.1:5000.

    لقطة شاشة لتطبيق

عمل رائع! لديك تطبيق ويب Python معFlaskيعمل على الجهاز الخاص بك، وربما أنك لا تعرف حتى ما هي تلك الأشياء. هذا جيد! أنت غير مضطر. تهتم الحاوية بإعداد البيئة بأكملها.

في القسم التالي، ستتعلم كيفية استخدام devcontainer.json الملف لأتمتة تثبيت التبعية وتخصيص VS Code لمشروع Python هذا.