محمد_عاطف

وعليكم السلام ورحمة الله وبركاته. مرحبا عمرو. لا توجد مشكلة من جهتك . بل المشكلة الحالية في موقع 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

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

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

إن Vue CLI هو الأداة الرسمية ل Vue.js وهي لتسهيل إنشاء وإدارة مشاريع Vue.js. وهي إختصار ل Vue Command Line Interface أي واجهة سطر الأوامر الخاصة ب Vue. و CLI هي أداة تعتمد على الأوامر النصية -سطر الأوامر- وتستخدم لإنشاء تطبيقات Vue.js مع إعدادات جاهزة مثل: إعداد Webpack دعم TypeScript دعم Vue Router و Vuex إعداد بيئة التطوير (Development Server) تحزيم الملفات وتجهيزها للإنتاج (Production Build) ونستخدم CLI لتوفير الوقت حيث يقوم بإعداد وإنشاء المشروع تلقائيا دون الحاجة لضبط كل شيء يدويا. ويحتوي على أوامر عديدة لتسهيل التطوير مثل npm run serve لتشغيل خادم للمشروع للتطوير. ويمكنك تخصيص الإعدادات كما تريد . ولإستخدامه يجب أولا تثبيته هكذا : npm install -g @vue/cli بعد تثبيته يمكننا إستخدامه لإنشاء المشروع هكذا : vue create my-project وستظهر لك خيارات تسألك لتخصيص المشروع مثل هل تريد إستخدام الإعدادات الافتراضية أو تخصيص المشروع واختيار Vue Router أو Vuex أو Linter وغيرها. وبعد ذلك يمكنك تشغيل المشروع في بيئة التطوير من خلال الأمر : npm run serve وبعد الإنتهاء من تطوير المشروع يمكنك إستخدام الأمر النهائي لتوليد ملفات المشروع النهائية : npm run build ويمكنك قراءة المزيد من خلال الدرس التالي :

وعليكم السلام ورحمة الله وبركاته. إن ال OOP (البرمجة كائنية التوجه): هو أسلوب برمجي (Programming Paradigm) لتنظيم الكود باستخدام الكائنات (Objects) والأصناف (Classes) وتعتمد على مفاهيم مثل: Class (الفئة) Object (الكائن) Encapsulation (الكبسلة) Inheritance (الوراثة) Polymorphism (تعدد الأشكال) Abstraction (التجريد) والهدف منه هو تنظيم الكود وتسهيل استخدامه ومنع التكرار من خلال إنشاء وحدات قابلة لإعادة الاستخدام. مما يسهل علينا صيانة الكود وتطويره وإختباره. أما ال Software Design (تصميم البرمجيات): هو عملية أوسع وأشمل من OOP حيث تشمل التخطيط الكامل لكيفية بناء النظام ككل، ويغطي قرارات مثل: كيف تتفاعل الأجزاء المختلفة مع بعضها البعض في الكود. ما هي البنية العامة للنظام (Architecture). اى Design Patterns (أنماط التصميم) سيتم إستخدامها. اختيار أسلوب التصميم المناسب مثل MVC او MVVM وغيرها من الأساليب الأخرى. والهدف منه بناء نظام قابل للتوسع والتطوير وسهل الصيانة ومرن ويعمل بكفاءة. والعلاقة بينهما هو أن ال OOP أداة من ضمن أدوات ال Software Design. حيث يمكنك استخدام ال OOP داخل تصميم أوسع للنظام. فالتصميم الجيد لا يعتمد فقط على ال OOP بل يشمل بنية المشروع واختيار الأنماط المناسبة.

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

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

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

وعليكم السلام ورحمة الله وبركاته. أحسنت في بناء تلك المشاريع بنفسك فهي ممتازة وجيدة وتحوي العديد من الأفكار وتطبيق كامل على الأساسيات التي درستها .وبالفعل كلما تدربت أكثر وقمت بإنشاء مشاريع حقيقية ستجد مستواك يتقدم بشكل كبير إن شاء الله. إليك المشروعين التاليين : إليك مشروع نظام إدارة مكتبة صغيرة وهذا هو بعض المطلوب فيه ويمكنك أنت إضافات ميزات إضافية : تسجيل الكتب وتصنيفاتها. تسجيل الأشخاص المستعيرين الطلاب مثلا. إستعارة واسترجاع الكتب. البحث عن الكتب. المشروع الثاني هو نظام تسجيل طلاب والمطلوب كالتالي : تسجل بيانات الطلاب مثل الاسم و الرقم والتخصص والصف إمكانية التسجيل من خلال قراءة ملف txt او json يحوي البيانات. إمكانية عرض الطلاب مع تجميعهم حسب الصف أو التخصص تحديث بيانات الطلاب أو حذفها. حاليا الأفضل لك كما ذكرت هو التمرين كثيرا والتطبيق في المشروعات وأنصحك بدخول مواقع حل المشكلات والتدرب كثيرا عليها لتنمية مهارة التفكير المنطقي . ولكن أنصحك بعدم التعمق بشكل كبير فيها وترك الدراسة بشكل كامل بل يجب أن يكون بجانب دراستك حتى لا تتأخر في الدراسة وإستكمال الدورة. إذا كنت تقصد إيقاف وقت الدورة في الأكاديمية فهنا لا يوجد وقت للدورة وهي متاحة لك مدى الحياة يمكنك الوصول إليها في أى وقت . أما إذا كنت تقصد التوقف عن الدراسة بها فنعم يمكنك ذلك ولكن أنصحك بعدم التوقف لفترة كبيرة . وإذا كنت تقصد بتعلم تصميم الواجهات من خلال لغة HTML و CSS و JS فقط فنعم هذا هو الأفضل قبل الدخول في إطار Django . ولكن إذا كنت تقصد دراسة أطر عمل مثل React فلا أنصحك حاليا بذلك يمكنك الإنتهاء من الدورة وبعد ذلك البدأ في React .

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

نحن هنا في موقع الأكاديمية لا نقوم على الإجابة على الأسئلة الإختبارية أو التقيمية ولكن يمكننا تقديم المساعدة لك . ستحتاج أولا لتعمل كيفية إستقبال الطلبات في php ويمكنك قراءة الدرس التالي : https://wiki.hsoub.com/PHP/external_variables أيضا ستحتاج إلى معرفة كيفية التعامل مع قواعد البيانات : وإذا أردت عرض البيانات في جدول في HTML يمكنك قراءة الإجابة التالية : وبالطبع عليك تغير سلسلة الإتصال بقواعد البيانات إلى البيانات الصحيحة الخاصة بك وأيضا التأكد من الإتصال ب mysql هكذا : $host = 'localhost'; $dbname = 'اسم_قاعدة_البيانات'; $username = 'اسم_المستخدم'; $password = 'كلمة_المرور'; $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); يمكنك محاولة تنفيذ الكود بنفسك وإرفاقه هنا لنستطيع مساعدتك به وتوجيهك إلى تحسينه أو إصلاحه لك إذا كان يوجد به أخطاء.

إن كلمة this هي كلمة مفتاحية خاصة في JavaScript وهي تشير إلى "السياق" الحالي الذي يتم فيه تنفيذ دالة، وقيمتها ليست ثابتة بل تتغير بناءً على كيفية استدعاء الدالة. أى أن this تشير إلى الكائن الذي "يمتلك" الدالة التي يتم تنفيذها حاليا. فمثلا لو كان لدينا كائن يمثل شخص ولديه خاصية name ودالة greet(). وإذا أردنا أن نجعل الدالة greet تطبع مرحبا وإسم هذا الكائن (name) فهنا سنحتاج إلى طريقة للوصول إلى خاصية name الخاصة بنفس الكائن الذي تنتمي إليه وهنا هو دور كلمة this. const person = { name: "Ahmed", greet: function() { console.log(`Hi ${this.name}`); // this يشير إلى person } }; person.greet(); // Hi Ahmed person.name = "Mohamed" person.greet(); // Hi Mohamed فلاحظ في المثال السابق كيف إستطعنا الحصول على الخاصية name الخاصة بهذا الكائن بداخل الدالة greet بسهولة . وحينما قمنا بتغير الإسم وإستدعاء الدالة greet مرة أخرى تم الحصول على الإسم الجديد بعد تغيره . لأن this هي تشير إلى الكائن نفسه ويمكننا الوصول إلى الخصائص والدوال الخاصة بهذا الكائن . send() { const object = { name: this.name, // هذا يشير إلى الكائن الذي تم استدعاء send() منه email: this.email, password: this.password, number: this.number, }; // ... } هنافي الكود الذي في الصورة this.name و this.email وباقي الخصائص ، تشير إلى الخصائص name و email في الكائن الذي يحتوي على الدالة send() أى الكائن نفسه الذي يستدعي الدالة. أى يمكنك إعتبار this تعني كلمة أنا أى عند إستدعاء دالة من كائن هنا this تعني أنا لهذا الكائن. ويجب عليك الإنتباه أنه في الدوال السهمية لا تحتوي على this حيث قيمة "this" ليست مرتبطة بسياق الاستدعاء ولا تتأثر بطريقة الاستدعاء ولكنها تستمد قيمتها من النطاق الذي تم تعريف الدالة فيه كالتالي: const person = { name: "Ahmed", greet: () => { console.log(`Hi ${this.name}`); // لن تعمل this هنا } }; person.greet(); // Hi undefined لاحظ هنا كيف تم طباعة undefined لأن الدالة السهمية ليست لها نطاق مما يعني أن this لن تعمل هنا. إذا في أى مكان ترى كلمة this فهي تعني الإشارة إلى الشئ أو الكائن أو أى شئ قام بإستدعاء تلك الدالة . وإليك مزيد من التفاصيل :

وعليكم السلام ورحمة الله وبركاته. نعم بالفعل يوجد الكثير من الحلول الأخرى بدلا من إستخدام splice مع النصوص وذلك لأن النصوص (strings) غير قابلة للتغيير (immutable) ولا تحتوي على دالة splice كما في المصفوفات. ويوجد حل وذلك من خلال أولا تحويل النص إلى مصفوفة (array) من خلال إستخدام split وبعد ذلك يمكنك استخدام splice وأخيرا تحويل المصفوفة مرة أخرى إلى نص.هكذا : let txt = 'hello'; let txt_arr = txt.split(''); // تحويل النص إلى مصفوفة من خلال تفكيك الأحرف إلى عناصر في المصفوفة for (let i = 0; i < txt_arr.length; i += 2) { // التكرار على طول المصفوفة ولكن قمنا بزيادة العداد بمقدار 2 لأنه يتم إضافة عنصر جديد txt_arr.splice(i, 0, txt_arr[i]); // إضافة الحرف مرة أخرى في الموضع الحالي } let new_txt = txt_arr.join(''); // تحويل المصفوفة إلى نص console.log(new_txt); // "hheelllloo" حيث أولا إستخدمنا txt.split('') لتحويل النص إلى مصفوفة من الحروف. ومن ثم نستخدم حلقة for للتكرار خلال المصفوفة مع زيادة الفهرس بمقدار 2 في كل خطوة لأننا نضيف حرف جديد في كل مرة. وأخيرا نقوم بإستخدام join('') لتجميع عناصر المصفوفة إلى نص مرة أخرى.

وعليكم السلام ورحمة الله وبركاته. نعم بالفعل البيانات في الحياة الواقعية (Real-world data) مختلفة تماما عن البيانات الموجودة في الدورات والتي يتم توفيرها لك أثناء الدراسة: فالبيانات الموجودة في الكورسات أو الدراسة تكون : منظمة و نظيفة و مثالية. ودائما ما تجد فيها كل الأعمدة المطلوبة. وتجدها بدون قيم مفقودة كثيرة أو بدون أى قيم مفقودة. وتجدها مفهومة وسهلة ولها تفسير لكل شئ. تكون غالبا متوازنة وموزعة توزيع جيد . وغالبا تكون جاهزة مباشرة للإستخدام . أما البيانات الواقعية : فتكون غير مرتبة وفيها أخطاء أو قيم متطرقة وضوضاء. من الممكن أن تكون بها قيم مفقدوة أو بها أسماء أعمدة خاطئة. من الممكن أن لا تعرف ما هي أصل البيانات أو معناها وشرحها. من الممكن أن تكون غير متوازنة وغالبا بها انحيازات تحتاج إلى تنظيف وتحويل وتجهيز كبير قبل أي تحليل لها إو إستخدامها. ولهذا ينبغي عليك أن تتعلم وتكون لديك خبرة في : تنظيف البيانات (Data Cleaning) تحليل البيانات الاستكشافي (EDA) تحويل البيانات (Data Transformation) التعامل مع القيم المفقودة استخدام أدوات متقدمة مثل Pandas و SQL و أو حتى Excel في بعض الأحيان للتعامل مع شتى الطرق التي تستخدم في تخزين وحفظ البيانات.