إعداد المشروع
الدرس 28 من 38 · التنفيذ · 4 دقيقة و31 ثانية
الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.
الموارد
التفريغ النصي
[00:02] قبل أن نبدأ، أريد أن أعطيك جولة سريعة للمشروع الذي نريد أن نعمل معه. لذلك سوف تجد رابط لهذا المستودع في وصف هذا الفيديو. وهو إعداد ريبو توربو قياسي للغاية. إذا لم تكن قد اعتدت على توربو ريبو من قبل. انها قوية جدا ولكن أيضا أداة بسيطة جدا لإدارة repos أحادية. أحب استخدام mono repos تقريبًا كافتراضي لمعظم المشاريع التي أعمل عليها ما لم تكن بسيطة للغاية. شيء ربما أقوم باختراقه، في عطلة نهاية الأسبوع.
[00:31] ولكن إذا كنت أعمل مع فريق، إذا كنت أعرف أن تطبيقًا ما سيكون له أو أن مشروعًا سيكون له حزم متعددة وتطبيقات متعددة محتملة، فأنا أحب أن أبدأ مع المستودع الأحادي، ولكن لأنه يجعل الأمور أكثر بساطة على المدى الطويل. مرة أخرى، هذا إعداد بسيط للغاية، لكنني أريد فقط أن أعطيك نظرة عامة سريعة على ما لدينا هنا.
[00:52] لدينا مجلد تطبيقات. المجلدان الرئيسيان اللذان لدينا هنا، هما التطبيقات والحزم. يحتوي مجلد التطبيقات على ثلاثة تطبيقات. الأول هو واجهة برمجة التطبيقات الأساسية، والتي تشبه حقًا نسخة وهمية من واجهة برمجة التطبيقات الأساسية الحقيقية التي رأيناها في مخطط الحاوية. لذلك سنستخدم هذه لبعض التمارين، لكننا لن نلمسها حقًا. ولكن فقط لكي تعرف، يمكنك أن ترى ما هي نقاط النهاية المتاحة هنا عن طريق فتح هذا الملف JS الفهرس وسوف يعود بعض البيانات وهمية أننا ذاهبون إلى استخدام لتمثيل بعض الكيانات لدينا.
[01:27] ثم لدينا تطبيق DOCS الخاص بنا، والذي مرة أخرى، لن نستخدم هذا في حد ذاته، ولكن هذا فقط لإعطائك مثالًا على أنواع التطبيقات الأخرى التي قد تكون لديك في مشروعك الخاص. على سبيل المثال، قد تكون هذه للتوثيق الداخلي، أو يمكن أن تكون مثل تطبيق كتاب قصص أو دوكوصور أو شيء من هذا القبيل لتوثيق نظام التصميم الخاص بك.
[01:48] وأخيرًا، لدينا تطبيق الويب، وهو تطبيق Next.JS الرئيسي الذي سنعمل معه. سأعود إلى هذا واحد في دقيقة واحدة.
[01:58] ثم لدينا الحزم والحزم هي مرة أخرى فقط، على سبيل المثال، لدينا بعض تكوين الوبر ES، وبعض تكوين الكتابة، وبعض الأنواع الشائعة التي قد تكون لدينا، وكذلك حزمة واجهة المستخدم مرة أخرى، من المفترض أن تمثل نظام التصميم الخاص بنا، مكتبة المكونات الرئيسية لدينا، ولدينا بعض مكونات المثال هنا. هذه ليست جاهزة للإنتاج على الإطلاق، ولكن هذا فقط لإعطائك مثالًا على كيفية هيكلة المشروع بأكمله وقاعدة الشيفرة بأكملها للحصول على كل هذه الحزم المختلفة بطريقة منظمة.
[02:29] لذا بالعودة إلى تطبيق الويب، كما ذكرت سابقًا، فإن هذا هو العميل الذي يواجه تطبيق المكدس الكامل هو الذي قمنا بتصميم البنية له. وهو تطبيق قياسي وبسيط للغاية Next.JS. كما ذكرت سابقًا، سنستخدم Next.JS في هذا المثال، إذا أردنا تشغيل التطبيق، فيمكنك فتح وحدة تحكم وتشغيل NPM run dev من جذر المشروع وبالتالي سيؤدي ذلك إلى تشغيل جميع التطبيقات الثلاثة.
[02:56] سيتم تشغيل api الأساسية، وتطبيق المستندات وتطبيق الويب. نحن لا نهتم حقًا بالمستندات، لكن هذا جيد. انها لن تذهب إلى انها لن تفعل أي شيء. ومن ثم يمكننا أن نرى تشغيله على المضيف المحلي 3000. لذا إذا فتحت متصفح هنا، هذا ما يجب أن تراه عند تشغيل هذا محليًا.
[03:13] الآن مرة أخرى، هذه نسخة من موقع Uber Eats. انها ليست حتى نسخة جيدة، ولكن هذا هو مرة أخرى، فقط لإعطائها شيئا لتبدو وكأنها. لدينا طريقان فقط في هذا الفرع الرئيسي. لدينا هذه المسارات الرئيسية حيث لم نقدم عنوانًا بعد. ثم إذا نقرنا على زر البحث هذا هنا، فسيأخذنا إلى صفحة تسليم أبي، وهي واحدة أخرى من الصفحات التي قمنا بتنفيذها.
[03:39] إذا عدنا إلى قاعدة الشيفرة، إذا أردنا أن نرى كيف يتم تنفيذ هذه الأشياء، سترى أن لدينا في مجلد التطبيق الخاص بنا، وهو مجلد التوجيه للعام المقبل. لدينا تطبيق الصفحة الرئيسية في مجلد المسار. لدينا page.tsx، وهذا يمثل طريقنا الرئيسي ومن ثم لدينا مجلد التسليم الخاص بنا مع أيضًا page.tsx هذه اتفاقية Next.JS تمثل جميع طرق التسليم.
[04:07] الآن، كما سترون، ليس لدينا شيء آخر. لدينا layout.tsx وهو نوع من العنوان أو الرأس والتذييل وهلم جرا. ولكن في الحقيقة ليس لدينا أي شيء آخر. ليس لدينا أي مكونات داخل مجلد التطبيق، وهذا حسب التصميم. لذلك سنتحدث عن كيفية الاحتفاظ بكل الشيفرة الخاص بنا، ومعظم الشيفرة الخاصة بنا داخل مجلد الوحدات لدينا في الفيديو التالي.