عماد شيخ العشرة

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

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

مع الأسف لا يوجد لدينا اي دورات او مقالات عن رازبري غير المتواجدة في اليوتيوب. لكن يوجد لدينا في موسوعة حسوب توثيق للاردوينو ان كنت مهتما. يمكنك الاطلاع عليه من هنا.

لقد كانت المشكلة انك لا تطبق ال style لل .card ايضا يجب ان تاخذ عرض 100 بالمائة كما انني عدلت لك ال style الخاص بالقسم الذي اسفل هذا فكان التصميم غير ملائم للهواتف ايضا. @media (max-width: 778px) { .main { width: 100%; h1 { font-size: 35px; } } .cards { width: 100%; display: flex; flex-direction: column; .card { width: 100%; margin-bottom: 20px; } } .info { flex-direction: column; text-align: center; .content { padding: 0 20px; } h2 { font-size: 28px; } p { width: 100%; font-size: 16px; } img { padding: 0; margin-top: 20px; width: 90%; } } }

JSON.stringify هي دالة في جافاسكربت تحول المصفوفات او الكائن الى JSON. وال JSON هو عبارة عن هيكلة بيانات تشبه الكائن في JS لكنها عبارة عن نص وتستخدم كثيرا في عالم الويب في نقل البيانات. لماذا يتم استخدامه في التخزين المحلي؟ وهو لهذا السبب أن التخزين المحلي الخاص بالمتصفح لا يخزن إلى النصوص فنحن نحول ما نريد الى نص ثم نخزنه.

في الواقع لدينا مقالة برمجية لهذا الموضوع يمكنك الاطلاع عليها.

ماذا تقصد برفع المشروع هل تقصد لمستودع GitHub ام ماذا ؟

في ملف MyMain.vue. يوجد لديك خلل وهو التالي: أغلقت القوس الخاص بالميديا في السطر 330 بعد ما عملت ال css الخاص بال .mymain فما بعده لم يحسب أنه من ضمن الميديا. @media (max-width: 778px) { .my-main { display: flex; flex-direction: column; text-align: center; justify-content: center; } } انظر هنا هنالك خطأ اغلقت القوس مبكرا هذا ما فعلته. يجب عليك حذف هذا القوس واضافته في النهاية: .prog { display: flex; flex-wrap: wrap; text-align: center; img { width: 500px; } }} </style>

v-model هو من خصائص vue ويتم استخدامه كالتالي: هو عنصر يربط البيانات بين المدخلات التي تريد ادخالها وبين المتغير الذي تحفظ فيه المتغيرات مثل الان عندما تكتب اي حرف في صندوق ال Input هذا يتم حفظه في المتغير email: data() { return { email: '' } } هذا المصطلح مشهور جدا في عالم الواجهات الأمامية two way binding او بالعربي الربط الثنائي وهو كالتالي: عندما يتغير المتغير في الكود يتغير محتوى واجهة المستخدم أو عندما يقوم المستخدم بتغيير قيمة في واجهة المستخدم، يتم تحديث المتغير في الكود مباشرة مثال: يمكن استخدامه في اظهار رسالة خطأ مثلا عندما لا يقوم بادخال المستخدم مدخلات صحيحة . في الواقع يتم استخدامه كثير وفي كثير من الاماكن لكن هذا كان مثالا عليه.

نحن نعلم أن لغة typescript تحدد نوع المتغير فهي يجب عليها التمييز هل المتغير من نوع رقم أم نص الخ. عندما غيرنا المتغير من مصفوفة أرقام إلى نص فهذا يعني أن typescript عندما رأت المتغير أول مرة فهمت أن هذا المتغير من نوع مصفوفة أرقام وليس نص وبناء عليها اكملت وعندما غيرنا القيمة تحول لنص وهذا غريب على typescript لانها تتوقع أن يكون المتغير مصفوفة من الأرقام. لتجنب هذه المشكلة يمكنك عمل التالي وهي تحديد نوع المتغير ب any أي يعني أنه قد يكون نصا او رقما. let numbers: any = [1,2,3,4,5]; numbers = 'Hello World'; لكن ان كانت المعلومات لن تتغير فلا ينصح بوضع any حيث أنها ستساعدك typescript بوجود الأخطاء ان حصل تغيير في نوع البيانات.

تستخدم الدالة $emit داخل المكون الابن Child لارسال حدث مخصص event إلى المكون الأب. تاخذ الدالة معاملين الأول هو اسم الحدث ثانيا ياخذ اي معلومات اضافية. مثال المكون الابن: <template> <button @click="sendData">Click Me</button> </template> <script> export default { methods: { sendData() { this.$emit('custom-event', 'Hello from child!'); } } } </script> مثال المكون الاب: <template> <ChildComponent @custom-event="handleEvent" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleEvent(message) { console.log(message); // "Hello from child!" } } } </script>

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

هل تقصد موسوعة حسوب للتوثيقات؟ إن كنت تقصدها فهذا الرابط. https://wiki.hsoub.com/الصفحة_الرئيسية

إن دورة الذكاء الصناعي تبدأ للمبتدئين أيضا حيث أنه يعلم الأساسيات من الصفر ويعلم البرمجة من الأساس أن كنت تريد تعلم الذكاء الصناعي بينما دورة بايثون تعلمك صناعة التطبيقات بلغة بايثون مما يجعلك مطور Back-end لكنها تحتوي على مقدمة للذكاء الصناعي فان كنت مهتم بالذكاء الصناعي فقط يمكنك الدخول مباشرة لدورة الذكاء الصناعي. محتويات دورة الذكاء الصناعي: أساسيات لغة بايثون Python تحليل البيانات Data Analysis التعامل مع نماذج الذكاء الاصطناعي LLMs التعامل مع نماذج الرؤية الحاسوبية التعلم العميق Deep Learning نقل التعلم Transfer Learning خوارزميات تعلم الآلة Machine Learning خوارزميات التعلم الخاضعة وغير الخاضعة للإشراف تخصيص نماذج اللغة الكبيرة LLMs وصقلها دمج تقنيات الذكاء الاصطناعي مع متجر إلكتروني التعرف على الصور باستخدام الشبكات العصبية التعلم المعزز Reinforcement Learning بينما محتويات دورة بايثون: البرمجة بلغة بايثون Python التطبيقات العملية على بايثون، وتعلم التعامل مع مختلف الخدمات إطار العمل جانغو Django إطار العمل فلاسك Flask التعامل مع بوابات الدفع برمجة أنظمة أودو Odoo أساسيات تحليل البيانات أساسيات تعلم الآلة

في الواقع لأي مطور مواقع سواء كان مطور واجهة امامية او خلفية يجب عليه تعلم ال css لانها من اساسيات التطوير لكن بإمكانك عدم التعمق فيها فحفظك للأساسيات كافي. اما بالنسبة لبوتستراب فلو كنت تعرف الأساسيات الخاصة بcss فلن تصعب عليك كثيرا في الواقع لانها نفس المنطق بل بالعكس معرفة css ستساعدك في فهم bootstrap او اي من اطر العمل الخاصة ب css. انت لا يجب عليك حفظ كل الكلاسات لكن بإمكانك فهمها فهي قابلة للفهم فمثلا فحرف p تشير إلى ال padding وحرف m إلى margin وغيرها الكثير. الخلاصة انه نعم يجب عليك معرفة css ولو بالقدر القليل فقد تحتاجها كثيرا في مشاريعك فلا يوجد مشروع بدون تنسيق.

انت تقصد props في vueJS وهي كالتالي: ومعناها الخصائص وهي تستخدم في اطارات عمل الFront-end بشكل عام وهدفها هو تمرير البيانات من المكون الأب إلى المكون الابن. مثال: <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { name: 'MessageDisplay', props: { message: { type: String, required: true } } } </script> هذا هو المكون الابن الذي سوف ننشئه فمثلا نريد أن نطبع رسالة لكن هذه الرسالة قد تختلف من مكان الى اخر وقد نستخدم المكون عدة مرات فنريد ان تطبع الرسالة بشكل مرن أكثر فمررنا props باسم message. والان فلنشرح كيفية استخدامها. <template> <div> <MessageDisplay message="Hello1!" /> <MessageDisplay message="Hello2!" /> </div> </template> <script> import MessageDisplay from './components/MessageDisplay.vue'; export default { name: 'App', components: { MessageDisplay } } </script> كما نلاحظ اخذنا اسم المكون الابن واستعملها في اسم الاب وبدلا من ان ننشئ نص جديد في كل حالة فنحن نستعدي المكون ونكتب له الخاصية message التي هي props ومنها يفهم اننا نريد كتابة هذه الرسالة فنختصر علينا كتابة الأكواد المكررة باعادة استخدام المكون الابن.

في الواقع أن nuxt هو اطار عمل مبني فوق vue وهو مكمل ل vue js. عموما Nuxt يُستخدم لبناء تطبيقات SSR (Server-Side Rendering) و SSG (Static Site Generation) و SPA أيضًا. هذا يساعدنا في عمليات البحث في قوقل SEO فان كان لدينا موقع مدونة ونريد ان يظهر في قوقل أكثر فاننا نستخدم nuxt أفضل. وان كان موقع عادي فان Vue لوحده كافي لهذا. فعلى حسب مشروعك اختر التكنولوجية بعناية.

في الواقع ان لغة جي كويري مستخدمة كثيرا في الواقع وأن جميع المشاريع التي تبني باستخدام جافاسكريبت بدون اطر عمل تستخدم الجي كويري لانها تختصر الوقت ان كنت تعرف جافاسكريبت فان جي كويري ليست بتلك الصعوبة ويمكنك تعلمها بسرعة ولا يجب عليك معرفة كل التفاصيل. الامتحان سيكون في المشاريع العملية التي رفعتها إلى GitHub وأقل شيء يجب أن تكون أتممت ٤ مسارات من الدورة. فان كانت احد مشاريعك تحتوي على j query فسوف يتم سؤالك عنها لا تقلق فمكتبة j query ليست صعبة جدا ويمكنك التعود عليها سريعا. جميع دروس j query

جرب اختيار الاولى وانشئ المشروع وانظر هل ما زال يستمر الخطأ ام لا. واخبرني بالنتائج.

لقد كانت المشكلة التي تواجهك منه في مشروعك vue لكن في حال أنه ليس مثبتا للبرنامج كاملا فيعني أنه عندما ثبت مشروعك ال vue js من خلال ال terminal فقد طلب منك تحميل prettier او esLint وانت وافقت مما يسبب المشكلة جرب اعادة انشاء المشروع من البداية ومن ثم عندما يطلب منك تحميل esLint او prettier اختر No. وجرب الطريقة مرة أخرى وأخبرني هل ما زال الخطأ يظهر أم لا.

الرجاء فتح vscode واتباع الخطوات التالية.

الرجاء اقفال extention باسم prettier وسوف تحل المشكلة فهو المسبب في المشكلة وعند احتياجك له في مشاريع اخرى شغله.

يمكنك تجريب تحميل extentions خاصة ب vue مثل: افتح برنامج vs code انقر هنا واكتب Vue - Official وحملها وسوف يتم الكتابة تلقائيا.

في الواقع هذا الخطأ يحصل بسبب ال Extentions الخاص prettier فانه يتعامل مع بعض الخطوط الفارغة كانها مشكلة. جرب هذا الأمر في الطرفية واعد تشغيل الخادم وأخبرني ان لم تنحل المشكلة. npm run lint -- --fix

في الواقع فبعد الحصول على الشهادة الخاصة بالدورة واجتياز الامتحان فان فريق حسوب سيوجهك في ايجاد العمل وفرص العمل وغالبا يكون العمل عن طريق منصات العمل الحر مثل مستقل وخمسات وهو عمل اونلاين ولا يهم العمر لكن ما يهم هو الالتزام.