محمد_عاطف

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

هذا لأنك تعمل على ملف vue وهذا الأمر يتطلب intellisense ليتم تفعيل الإكمال التلقائي الصحيح. يجب عليك تنزيل إضافة Vue - Official التالية لديك في vs code : https://marketplace.visualstudio.com/items?itemName=Vue.volar

لايوجد أى خطأ حيث الألوان الخاصة بالكود لديك هي خاصة بالثيمات فكل ثيم وكل نوع ملف يختلف فيه الألوان وليست ثابته . وإذا كان يوجد خطأ ستجد أسفل الكلمة خط أحمر أو تظهر خطأ في ال console لديك .

إذا كنت تقصد موسوعة حسوب فهذا هو الرابط : https://wiki.hsoub.com/ إذا لم تكن تلك هي ما تقصدها يرجى وضع سؤالك أسفل الدرس الذي تسأل عنه لنستطيع مساعدتك.

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

إن ال Debugger في جافا سكريبت هو أداة تساعدك في تتبع وتنقيح (تصحيح) الكود البرمجي خطوة بخطوة لتتبع الكود لديك وفهم ما يحدث بالضبط داخل هذا الكود، واكتشاف الأخطاء (bugs). حيث الكلمة المفتاحية debugger تستخدم داخل الكود وعندما يصل المتصفح إليها أثناء التنفيذ يتوقف الكود مؤقتًا ويفتح أدوات المطور (Developer Tools) في تبويب Sources تلقائيا، لتتمكن من: مشاهدة القيم الحالية للمتغيرات. التقدم خطوة بخطوة (Step over / Step into). فهم تسلسل التنفيذ. اكتشاف أي متغيرات غير صحيحة أو مشاكل في منطق الكود لديك. فمثلا : قم بفتح المتصفح ثم قم بالضغط على F12 لفتح Developer Tools ثم قم بالذهاب لتبويب Console وقم بوضع الكود التالي: function calculateTotal(price, tax) { const total = price + tax; debugger; // يتوقف هنا التنفيذ return total; } const result = calculateTotal(100, 20); console.log("Total:", result); وهنا سينفذ السطر const total = price + tax وعندما يصل إلى debugger; سيتوقف الكود مؤقتا. وسيتم فتح تبويب Sources تلقائيا في أدوات المطور. ويمكنك الآن: مشاهدة المتغيرات (مثل price, tax, total) الضغط على Step over أو Step into لمتابعة الكود خطوة بخطوة. فحص ال Call Stack والأحداث الجارية. وإليك الدرس التالي لمزيد من التفاصيل والشرح من خلال متصفح chrome :

هل تقصد إرسال بيانات من خلال الدالة fetch إلى API معين ؟ إذا كان الأمر كذلك فيوجد العديد من الطرق لذلك ولكن يجب أن يكون نوع الطلب هو POST لتستطيع إرسال البيانات . فأولا لو أردت إرسال البيانات كما لو أنك تقوم بإرسال نموذج form فمثلا لو أردت إرسال النموذج form من خلال ajax أو fetch دون الحاجة لإعادة تحديث الصفحة فيمكنك إستخدام FormData هكذا : const formData = new FormData(); formData.append('username', 'test'); formData.append('email', 'test@example.com'); fetch('https://api.example.com/register', { method: 'POST', body: formData }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); // أو response.text() حسب استجابة الخادم }) .then(data => { console.log('تم إرسال بيانات النموذج بنجاح:', data); }) .catch(error => { console.error('حدث خطأ أثناء إرسال بيانات النموذج:', error); }); فهنا كما لو انك قمت بعمل submit لنموذج form التالي ولكن من خلال الدالة fetch : <form method="POST" enctype="multipart/form-data"> <input type="text" name="username"> <input type="text" name="email"> </form> الطريقة الثانية إذا كان الخادم أو ال API يتوقع البيانات على هيئة json يمكنك إستخدام الكود التالي : const myData = { name: "Ahmed", age: 30, country: "EG" }; fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json' // مهم جدا للخادم لفهم أنك ترسل JSON }, body: JSON.stringify(myData) // تحويل الكائن إلى JSON string }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(data => { console.log('تم إرسال البيانات بنجاح:', data); }) .catch(error => { console.error('حدث خطأ أثناء إرسال البيانات:', error); }); لاحظ كيف أنشأنا كائن يحوي البيانات وقمنا بتحويله إلى نص Json من خلال الدالة JSON.stringify وأرسلناه في ال body. والطريقة الأخيرة لو أردت فقط إرسال نص أى text عادي هكذا : const myTextData = "Hello from fetch"; fetch('https://api.example.com/message', { method: 'POST', headers: { 'Content-Type': 'text/plain' // تحديد نوع المحتوى كنص عادي }, body: myTextData }) .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.text(); }) .then(data => { console.log('تم إرسال النص بنجاح:', data); }) .catch(error => { console.error('حدث خطأ أثناء إرسال النص:', error); });

وعليكم السلام ورحمة الله وبركاته. الخطأ لديك بسيط ويجب عليك الإنتباه دائما إلى هذه المشكلة فهي شائعة. لاحظ هنا في الشرط أنت تستخدم علامتي إستفهام == مع ! وهنا يتم التحقق من مجموع الرقمين وأيضا يتم التحقق من نوعهم . أى هذا الشرط أنت تعني أنك تريد التحقق من النوع numberمثلا و numberوأن لا يساوا بعضهم البعض . وهنا لو لاحظت الدالة prompt تعيد الناتج كنص "string" ولكن مجموع n1 و n2 هو رقم (number) ولهذا فإن الشرط يتحقق دائما لأن النوعين ليسوا متساويين في ال input هو string والمجموع هو number . والحل الصحيح هو تحويل ال input إلى رقم ولتحويله إلى رقم أبسط طريقه هي وضع علامة + قبل النص وهنا قبل دالة prompt هكذا : // Fibonacci let n = 5; // number of input numbers let n1 = 0; let n2 = 1; for(let i=0; i<n; i++){ do{ input = +prompt(`${n1} - ${n2}`); }while(input !== n1+n2); n1 = n2; n2 = input; } والآن سيعمل معك.

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

بعد فحص الكود توجد نسبة كبيرة في إكتشاف الغش وتوليد الكود بالذكاء الإصطناعي أو نسخ الأكواد من على الإنترنت والنسبة هي 65%. أيضا إليك الملاحظات التالية التي تدل على وجود إستخدام لأدوات الذكاء الإصطناعي : أولا تنسيق الكود منظم جدا وبتسلسل واضح وهذا الأمر شائع في الأكواد المولدة بالذكاء الإصطناعي. استخدام مكتبات متقدمة مباشرةمثل faiss و SentenceTransformer مع اختيار نموذج معروف وهو أمر شائع إستخدامه في توليد الإجابات. أيضا الكود ينقصه التعليقات التوضيحية ماعدا تعليق واحد "Here I used FAISS" وهذا قد يشير إلى توليد تلقائي أو كود تعليمي تم نسخه. أيضا تسمية المتغيرات بشكل منظم مثل preprocessed_input و user_embedding و recommended_books فهذا النوع من التسميات النظيفة شائع في نماذج الذكاء الاصطناعي. ولكن لا نستطيع التأكد بشكل قاطع 100% إذا كان الكود ناتج من الذكاء الإصطناعي.

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

لا توجد أى مشكلة من جهتك . بل المشكلة الحالية في موقع vimeo والذي يتم رفع عليه الدروس حيث يوجد عطل به عالميا . نعتذر لك عن هذا الأمر وسيتم حل المشكلة في أسرع وقت إن شاء الله لذلك يرجى الإنتظار قليلا إلى حين حل المشكلة.

وعليكم السلام ورحمة الله وبركاته. مرحبا عمرو. لا توجد مشكلة من جهتك . بل المشكلة الحالية في موقع vimeo والذي يتم رفع عليه الدروس حيث يوجد عطل به عالميا . نعتذر لك عن هذا الأمر وسيتم حل المشكلة في أسرع وقت إن شاء الله لذلك يرجى الإنتظار قليلا إلى حين حل المشكلة.

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

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

أولا إن Django هو إطار عمل للواجهات الخلفية بشكل خاص . أى تعلمه لا ينبغي أن يكون لديك خلفية عن ال CSS حيث يمكنك إستخدام قوالب مباشرة ووضعها في الكود لديك في ملفات العرض. ولكن بالطبع وجود خبرة في CSS سيعطيك أفضلية وتستطيع بسهولة حل مشاكل القوالب إذا حدثت معك. ولهذا أنصحك بمشاهدة مسار "أساسيات تطوير الويب" في دورة " تطوير واجهات المستخدم" حيث يمكنك مشاهدة أول مسار بشكل مجاني لأى دورة أنت لست مشترك بها. أما بخصوص bootstrap فبالطبع ستجد صعوبة في البداية في حفظ أسماء ال classes ولكن مع التدريب والتمرين وكثرة إستخدامه في المشاريع ستجد أنك حفظت أغلب الأسماء التي تستخدم بكثرة . وإذا كانت لديك خبرة في ال css ستجد الأمور أسهل في حفظ أسماء ال classes لأنها مشتقة من خصائص CSS بالفعل.

وعليكم السلام ورحمة الله وبركاته. لإنشاء صفحة دفع يتطلب دمج الكود لديك مع مزود خدمة دفع خارجي (Payment Gateway) حيث لا يمكنك معالجة المدفوعات مباشرة في الواجهة الأمامية أو الخلفية بنفسك لأسباب أمنية . ولذلك يجب عليك أولا اختيار مزود خدمة دفع (Payment Gateway ) والأكثر شهرة وإستخدام هما Stripe و PayPal وكلاهما يوفر وثائق ممتازة ومكتبات سهلة الاستخدام ل React. فمثلا لإستخدام : Stripe: يمكنك إستخدام مكتبة @stripe/react-stripe-js و @stripe/stripe-js. PayPal: يمكنك إستخدام @paypal/react-paypal-js. وهذه هي المكتبة : https://www.npmjs.com/package/@paypal/react-paypal-js و يمكنك تفقد المثال التالي : https://paypal.github.io/react-paypal-js/?path=/docs/example-paypalbuttons--default وطريقة العمل هو في الواجهة الأمامية (React) ترسل معلومات الدفع مثل رمز البطاقة "token" الذي تم إنشاؤه بواسطة مكتبة مزود الدفع أو معرف المنتج أو الخدمة الذي تستخدمه إلى الواجهة الخلفية. وفي الواجهة الخلفية يتم إستخدام مفتاح API السري الخاص بك للتواصل مع مزود خدمة الدفع لإنشاء عملية الشحن (charge) أو الدفع. وفي النهاية يتلقى الخادم استجابة من مزود الدفع سواء بنجاح العملية أو فشلها ويرسلها مرة أخرى إلى الواجهة الأمامية. أنصحك بمشاهدة فيديوا على اليوتيوب لهذا الأمر حيث الأمر طويل قليلا ولكنه سهل ولكن يحتاج إلى التركيز والتطبيق. أما بالنسبة إلى تسجيل الدخول باستخدام حسابات Google أو Facebook فإن هذه العملية تسمى OAuth أو Social Login. وستحتاج إلى إنشاء تطبيق (App) في Google Developers Console و Facebook Developers لتستطيع إستخدام تلك الخاصيتين التي توفرهم جوجل وفيسبوك . حيث ستحتاج إلى Client ID و Client Secret لكل منهما وستضيف عن وان URL لإعادة التوجيه (Redirect URI) الخاص بتطبيقك لتوجيه المستخدم بعد نجاح تسجيل الدخول وإستقبال البيانات من جوجل وفيسبوك في هذا العنوان . ويوجد المكتبات التالية لتساعدك في ذلك وهي المكتبات الأساسية لهم : react-google-login أو react-oauth/google . react-facebook-login. وستحتاج إلى قراءة التوثيق الرسمي لهم لمعرفة كيفية الإستخدام.

إن ال Props هي اختصار ل Properties وهي وسيلة لتمرير البيانات من مكون أب (Parent) إلى مكون ابن (Child) في Vue.js و تعتبر ال Props للقراءة فقط ولا يمكن للمكون الابن تعديلها مباشرة. ومن مميزات ال Props في Vue هي : دعم TypeScript حيث يمكن تحديد أنواع الـ Props بدقة يمكنك التحقق من نوع القيمة الممررة. وأيضا إمكانية تحديد قيم افتراضية لل Props. وإليك المثال التالي للمكون الأب (ParentComponent.vue) : <template> <div> <h1>Parent Component</h1> <ChildComponent :username="user.name" :user-age="user.age" :hobbies="user.hobbies" :is-admin="false" @user-clicked="handleUserClick" > <p>Data</p> </ChildComponent> </div> </template> <script setup> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; const user = ref({ name: "mohamed", age: 28, hobbies: ["reading", "programming"] }); const handleUserClick = () => { console.log("clicked"); }; </script> وهذا كود المكون الابن (ChildComponent.vue) بالطريقة الحديثة مع <script setup> <template> <div class="user-card" @click="emit('user-clicked')"> <h2>Hi {{ username }}!</h2> <p>age: {{ userAge }} year</p> <p>Hoppies: {{ hobbies.join('، ') }}</p> <p v-if="isAdmin" class="admin-badge">Admin</p> <slot></slot> <!-- هذا مكان المحتوى الإضافي --> </div> </template> <script setup> const props = defineProps({ username: { type: String, default: "user" }, userAge: { type: Number, required: true }, hobbies: { type: Array, default: () => [] // القيمة الافتراضية للمصفوفات يجب أن تكون دالة }, isAdmin: { type: Boolean, default: false } }); const emit = defineEmits(['user-clicked']); </script> <style scoped> .user-card { border: 1px solid #ddd; padding: 1rem; margin: 1rem 0; } .admin-badge { color: red; font-weight: bold; } </style> وال Props في Vue 3 أصبحت أكثر قوة ومرونة وخصوصا مع دعم TypeScript ووظيفة <script setup> التي تجعل الكود أكثر نظافة وسهولة في القراءة.

هذه الدوال التي ذكرتها تعرف باسم Lifecycle Hooks أو "دورة حياة المكون" في Vue.js. وهي تستخدم في مكونات Vue للتحكم في سلوك المكون أثناء مراحله المختلفة من دورة حياته من أول إنشاء المكون إلى حين إزالته. beforeCreate : يتم تنفيذها قبل أن يتم إنشاء المكون وقبل تهيئة البيانات data والأحداث eventsو الخصائص props و لا يمكنك الوصول إلى this.data أو this.methods أو this.computed هنا لأنها لم تنشأ بعد. created : يتم تنفيذها بعد إنشاء الكائن (instance) وتهيئة data وmethodsو لكن قبل تركيب (mounting) المكون على ال DOM وهنا يمكنك الوصول إلى data و computed و methods. beforeMount :يتم تنفيذها بعد معالجة القالب (template) وقبل أن يتم إضافته في ال DOM وهنا كل شيء جاهز يومكنك الوصول إليه ولكن لم يتم بعد ربط المكون بال DOM. mounted :ويتم تنفيذها بعد أن يتم ربط المكون فعليا بال DOM أى ظهوره في الصفحة وكل شيء متاح والمكون الآن ظاهر للمستخدم ويمكن التفاعل معه. beforeUpdate : ويتم تنفيذها عندما يحدث تغيير في البيانات التي ستؤدي إلى إعادة تحديث (re-render) المكون وقبل تنفيذ التحديث في ال DOM. updated: ويتم تنفيذها بعد أن يتم تحديث المكون في ال DOM نتيجة لتغير البيانات. beforeUnmount : ويتم تنفيذها قبل إزالة المكون من ال DOM . unmounted : ويتم تنفيذها بعد إزالة المكون فعليا من ال DOM. وإليك المزيد من التفاصيل :

أنصحك بقراءة الإجابة السابقة التي وضحتها لك لتعرف أكثر ما هو ال API أو يمكنك مشاهدة الفيديو التالي : إن ال API هو واجهة برمجية أى كمشروع يقوم بتنفيذ شئ معين ولهذا فهو مخصص بالنسبة إلى المشروع . ولا يمكن إستخدام API موقع أخر لتعديل مشروع خاص بك حيث يجب عليك أنت بناء المنطق . بما أنك مشترك في دورة "تطوير التطبيقات باستخدام javascript" هل قمت بدراسة مسار "أساسيات Node.js" ؟ حيث في هذا المسار ستتعلم بناء الواجهات الخلفية وتوفير API لها وستفهم ما هو ال API. تلخيصا لما سبق يجب عليك أنت إنشاء ال API بنفسك لتطبيق الخصائص والمهام التي تريد تنفيذها وليس firebase أو أى موقع أخر يستطيع القيام بهذا بدلا منك.

الأمر يعتمد عليك أنت فقط . فهل تريد أن تحصل على وظفية بإستخدام إطار عمل React أم Vue ؟ بالطبع سيتوجب عليك دراسة إطار العمل الذي تريد الحصول على وظفية فيه . فلو أردت الحصول على عمل بإستخدام Vue فبالطبع يمكنك تجاهل React والإكتفاء ب Vue والعكس إذا أردت أن تعمل بإستخدام React فيجب عليك التركيز على React . ويجب عليك معرفة أن كلاهما مطلوب في سوق العمل لكن Vue.js مطلوب بنسبة أقل سواء في العمل الحر أو في الشركات وستجدها مستخدمة في الشركات الصغيرة أو المشاريع البسيطة أما React فهي من تخصص الشركات الكبيرة و المتوسطة . لذلك أنت فقط من يجب عليك تحديد ما الذي تريد تعلمه بناء على الوظيفة التي تريدها .

كنت أقصد الواجهة الخلفية التي وضحتها أنت وهي صفحة الادمن . وأيضا المتجر نفسه . بدون واجهة خلفية للمتجر فلن تستطيع ربط الواجهة الأمامية الخاصة بك . فكيف ستستطيع جلب بيانات المنتجات وتفاصيلها ؟ والسماح للمستخدم بإرسال الطلبات ؟ لهذا يجب إنشاء واجهة خلفية أولا للمتجر وتوفير API خاص بها . وربط الأدمن بنفس تلك الواجهة أى نفس قاعدة البيانات ونفس الإعدادات . لذلك بدون ال API الخاص بالمتجر فلن تستطيع ربط الأدمن أو الواجهة الأمامية .

الفرق بين Nuxt.js و Vue.js يكمن في أن كل واحد منهما له دور مختلف في تطوير تطبيقات الويب: فإن vue هو إطار عمل لتطوير الواجهات الأمامية ويستخدم لبناء تطبيقات واجهة المستخدم التفاعلية ويعمل على مستوى المتصفح فقط (Client-side) ولا يتضمن أشياء مثل التوجيه (routing) أو العرض على الخادم (SSR) إلا إذا أضفتها بنفسك يدويا. أما nuxt فهو إطار عمل مبني فوق Vue.js، يقدم لك نظام كامل لتطوير تطبيقات الويب أى يسمح بإنشاء الواجهات الخلفية والأمامية وهو يدعم : العرض من جهة الخادم (Server Side Rendering - SSR). التوليد المسبق للصفحات (Static Site Generation - SSG). التوجيه Routing . إدارة الحالة (Pinia/Vuex). لهذا إذا كنت تريد تطوير تطبيق كامل من جهة الخادم والعميل معا (full-stack) فالأفضل إستخدام nuxt.

وعليكم السلام ورحمة الله وبركاته. هل تقصد أن الواجهة الخلفية (back end) للمتجر تم رفعها على firebase أم ماذا ؟ وأيضا هل قمت بإنشاء الصفحة المتجر الأمامية من خلال React أو إطار عمل أم فقط HTML و CSS و JS ؟ لربط الواجهات الامامية مع الواجهات الخلفية هذا الأمر يتم من خلال ال API وباستخدام AJAX إذا لم تكن تعمل بأطر عمل مثل React . حيث ستقوم بإرسال الطلبات من الواجهة الأمامية إلى عنوان ال API الخاص بالواجهة الخلفية ومن ثم إستقبال الرد وتنفيذ المطلوب بعد ذلك في الواجهة الأمامية. وإليك شرح لتفاصيل ال API وكيفية الربط بين الواجهتين : وإذا كان الواجهة الخلفية مرفوعة على firebase فأنت لست بحاجة إلى تعلم firebase أو الواجهات الخلفية كل ما عليك معرفته هو ال API الخاص بكل خاصية في المشروع فمثلا لتسجيل الدخول يجب عليك معرفة عنوان API الخاص بتسجيل الدخول وما هو شكل البيانات الذي يجب إرساله مع الطلب وبعد ذلك تقوم بإستقبال الرد وإستخدامه في الواجهة الأمامية لديك مثل عرض إسم المستخدم وبياناته بعد تسجيل الدخول بنجاح. والأمر ليس بسيط أو سهل إذا لم تكن لديك خلفية عن ذلك وأيضا إذا لم تكن تعمل على إطار عمل مثل React . وأنصحك برؤية مسار "تطبيق دردشة يشبه WhatsApp" وقسم تطبيق الويب لتعرف كيف يتم الربط بين الواجهات من خلال React

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