ما هي القارورة؟
FLASK هو إطار ويب خفيف الوزن لـ Python يسمح لك ببناء تطبيق ويب بسرعة وبأقل قدر ممكن من التعليمات البرمجية النمطية. دعنا نذهب خطوة-.

لنبدأ خطوة بخطوة
لنبدأ بإنشاء الإعداد اللازم. انتقل إلى Vite وانسخ هذا الأمر:

npm create vite@latest

أنا أستخدم MAC فقط، لذلك قد يكون إعداد WINDOWS مختلفًا بعض الشيء. بعد ذلك، افتح الجهاز والصق الرمز الذي نسخته من موقع Vite. بمجرد تشغيل الكود، سيُطلب منك ما يلي:

? Project name: › vite-project

استبدل مشروع vite باسم مشروعك الخاص. بعد أن تعطيه اسمًا، سيُطلب منك تحديد إطار العمل، وفي حالتي سأختار REACT كإطار عمل خاص بي، ولكن يمكنك تحديد إطار العمل الذي تعرفه والضغط على Enter:

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

بمجرد تحديد إطار العمل الخاص بك، يمكنك الآن تحديد البديل (اللغة) الذي تختاره. أنا على دراية بجافا سكريبت لذا سأختار ذلك. تذكر: عليك اختيار الشكل الذي تهيمن عليه أكثر والضغط على علامة التبويب "إدخال".

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript   SWC
❯   JavaScript
    JavaScript   SWC
    Remix ↗

بعد اختيار هذه المطالبات، هناك الأوامر التالية التي يتم إعطاؤها لك لتشغيلها:

Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

إذا قمت بتشغيل هذه الأكواد المذكورة أعلاه بنجاح، فسوف تصل إلى مضيفك المحلي:

  VITE v5.4.8  ready in 1455 ms

  ➜  Local:   http://127.0.0.1:5555/
  ➜  Network: use --host to expose
  ➜  press h   enter to show help

يمكنك نسخ عنوان http ولصقه في متصفحك وستظهر لك صفحة Vite React، التي يمكنك الآن استخدامها لمشروعك.

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

npm install
npm run dev

دعنا ندخل القرص المضغوط داخل src وستظهر لك الملفات التالية

src % tree
.
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

داخل "App.jsx"، يمكنك تعديل و/أو مسح الكود الموجود داخل هذا الملف وإضافة الكود الخاص بك وفقًا لذلك. يحتوي هذا الملف على شعار Vite وReact.

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

mkdir backend; mkdir server; mkdir frontend

دعونا نجعل إعداد مشروعنا يبدو أكثر أو أقل مثل هذا:

my-app/
├── backend/
|       server/
│       ├── app.py
│       ├── models.py
│       ├── requirements.txt
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json

فتح محطتين:
ستكون إحدى المحطات الطرفية مخصصة للواجهة الخلفية/الخادم وستكون الأخرى للواجهة الأمامية/src.
داخل الواجهة الخلفية/الخادم، قم بتشغيل الأوامر التالية:

pipenv install && pipenv shell

للتأكد من تثبيت جميع التبعيات وإنشاء ملف Pipfile الخاص بنا.

داخل الواجهة الأمامية/src، قم بتشغيل الأوامر التالية:

npm install
npm run dev

لضمان إنشاء جميع الملفات الضرورية مثل ملفات package.json الخاصة بنا.

الجزء الثاني قادم....