Mustafa Suleiman

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

لا أنصحك بتعلم PHP للواجهة الخلفية إلا إن كنت تريد العمل على مواقع العمل الحر، فهي الأكثر طلبًا على تلك المنصات، بسبب استخدامها في ووردبريس وأيضًا إطار لارافل الذي يُسهل كثيرًا ويُسرع عملية تطوير المشاريع الصغيرة والمتوسطة. عدا ذلك، الأفضل تعلم C# وإطار .NET أو Java أو بايثون أو Node.js أو GO، والإختيار بينهم يعتمد على المطلوب أكثر في سوق العمل المحلي في بلدك، تفقد الوظائف على مواقع LinkedIN و Indeed بالنسبة لمستوى Junior وحتى Mid-level أي 3 سنوات خبرة. السبب أنّ PHP في الشركات ليس جيدة على المدى البعيد بسبب إنخفاض رواتبها مقارنًة بما سبق ولن تجد شركات كبيرة تستخدمها، الأمر الذي سيضطرك إلى التعامل مع شركات ذات نوعية ليست جيدة في أغلب الأحوال.

ستتكرر تلك المشكلة بسبب أنّ مكتبة Eslint تعتمد على مكتبة prettier في اكتشاف الأخطاء الخاصة بتنسيق الكود في ملفات جافاسكريبت، وفي حال وجود أسطر فارغة يحدث ذلك الخطأ. وستحتاج إلى تنفيذ الأمر التالي بشكل متكرر: npm run lint -- --fix الأسهل إنشاء ملف إعدادات لـ prettier باسم .prettierrc ووضع التالي به: { "endOfLine": "auto" } ثم إنشاء ملف إعدادات لـ Eslint باسم .eslintrc.js ووضع التالي به: module.exports = { rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, };

الشروحات النظرية في باديء الأمر مفيدة، لكن يُعيبها عدم الربط مع الواقع العملي بتوفير أمثلة، فأنت لا تدري ما فائدة ذلك في المشاريع العملية في الواقع العملي، وما الذي ساستفيده منها؟ بالتطبيق على بناء نظام متجر إلكتروني، فأولاً تبدًا مرحلة تصميم البرمجيات Software Design بالتفكير على مستوى عالي أي بالنظر للمشروع ككل بنظرة عامة، حيث يجتمع مدير المشروع ومدير فريق المبرمجين Software Architect للبدء في تخطيط ما يلي: تحديد المكونات الرئيسية وليكن مثلاً: نحتاج نظاماً لإدارة المستخدمين. نحتاج كتالوج للمنتجات. نحتاج عربة تسوق. نحتاج نظاماً لمعالجة الطلبات والدفع. تحديد الهيكلية: سنستخدم بنية MVC (Model-View-Controller) Model سيمثل البيانات (المنتجات، المستخدمون). View سيمثل واجهة المستخدم التي يراها العميل. Controller سيستقبل طلبات المستخدم ويوجهها. وذلك قرار تصميمي عالي المستوى يحدد كيفية تنظيم المشروع بالكامل. ثم تحديد كيفية تفاعل المكونات كالتالي: عندما يضيف المستخدم منتجاً إلى عربة التسوق، يجب أن تتواصل عربة التسوق مع كتالوج المنتجات)للتأكد من أن المنتج متوفر وسعره صحيح. عند الدفع، يجب أن يتواصل نظام الطلبات مع نظام إدارة المستخدمين للتأكد من أن المستخدم مسجل. وتلك العلاقات تُرسم في مخططات مثل UML Diagrams لتكون واضحة للفريق. بالتالي نتيجة تلك المرحلة هو مستند تصميم تقني ومخططات توضح بنية النظام والعلاقات بين مكوناته، أي حتى الآن، لم نكتب سطر واحد من كود OOP الفعلي. بعدها تأتي مرحلة مرحلة التنفيذ لاستخدام OOP لبناء المكونات أي يأتي دور المبرمجين، بحيث يستقبل المبرمج مهمة محددة، وليكن بناء كتالوج المنتجات، ويبدأ في تطبيق مبادئ OOP، من خلال إنشاء الكلاسات وإتباع مباديء OOP وهي التغليف، التجريد، الوراثة وتعدد الأشكال. وفي النهاية يتم بناء مكون كتالوج المنتجات باستخدام كود نظيف ومنظم بفضل OOP، وهو يلتزم بالمخطط الذي تم تطويره عن طريق تصميم البرمجيات.

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

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

تلك معالجات لأكواد CSS أو بالإنجليزية CSS Preprocessors، وبشكل بسيط جدًا تخيل أنك تبني منزل من خلال قطع Lego، فلغة CSS العادية توفر القطع الأساسية، أما معالجات CSS المسبقة Sass و Less و Stylus توفر قوالب وأدوات سحرية لتجميع تلك القطع بشكل أسرع وأكثر تنظيمًا. في النهاية، كل ما تبنيه من خلال تلك الأدوات السحرية يتم تحويله أو بالأدق ترجمته إلى قطع ليغو عادية بمعنى أكواد CSS عادية لكي يفهمها متصفح الويب. ومن خلالها ستتمكن من استخدام ميزات ليست موجودة في لغة CSS مثل المتغيرات لتخزين الألوان والخطوط والأحجام، والتداخل لكتابة الأنماط المتداخلة بشكل يشبه HTML. وأيضًا Mixins لإنشاء كود قابل لإعادة الاستخدام، والدوال لإجراء عمليات حسابية أو معالجة للألوان، كذلك تقسيم الملفات لتقسيم كود CSS إلى ملفات صغيرة ومنظمة. و Sass اختصار لـ Syntactically Awesome Style Sheets هو أشهر وأقدم معالج CSS، وله صيغتان للكتابة هما SCSS و Sass ولكن SCSS هي الصيغة الأكثر استخدامًا اليوم، وأي كود CSS عادي هو كود SCSS صالح، بالتالي الانتقال إليها سهلاً جدًا، ويستخدم الأقواس {} والفاصلة المنقوطة ; تماماً مثل CSS. $primary-color: #3498db; nav { background-color: $primary-color; ul { list-style: none; li { display: inline-block; a { color: white; &:hover { color: darken($primary-color, 10%); } } } } } بينما Sass لا يستخدم الأقواس أو الفواصل المنقوطة، ويعتمد على المسافات البادئة مثل لغة بايثون، وتلك الصيغة أقل استخدامًا الآن. وبخصوص Less فهو يشبه SCSS إلى حد كبير في طريقة الكتابة، فهو أيضًا يستخدم الأقواس والفاصلة المنقوطة، وكان منافس قوي لـ Sass لفترة طويلة، واشتهر لأنه كان أساس تصميم مكتبة Bootstrap 3. و Stylus هو الأكثر مرونة من بينهم لكوه يمنحك حرية كاملة في طريقة الكتابة، مثل CSS/SCSS تمامًا من خلال الأقواس والفواصل المنقوطة أو بدونها تمامًا مثل صيغة Sass أو مزيج بين الاثنين. لذا ما يتم استخدامه حاليًا هو Sass وستجده في الواقع العملي في معظم الشركات والمطورين والمشاريع مفتوحة المصدر مثل Bootstrap 5.

الـ CLI اختصار لـ Command Line Interface، أي واجهة سطر الأوامر، بمعنى يتعامل المستخدم معها بكتابة أوامر نصّية بدل الضغط على أزرار أو أيقونات من خلال واجهة مستخدم GUI. والأدوات التالية هي CLI أيضًا ‎bash، ‎zsh، ‎PowerShell، أو أوامر git، npm، pip وغيرهم. وستجد الكثير من أُطر العمل أو المكتبات توفر مكتبة CLI خاصة لتوفير سكريبت جاهز يتم تنفيذه في الخلفية دونّ دراية منك، عن طريق أمر بسيط، وذلك لأتمتة المهام المتكررة وسرعة في التنفيذ مقارنًة بالواجهات الرسوميّة، وإمكانية دمج الأوامر في سكربتات CI/CD ولتوحيد عملية التطوير بين الجميع. بمعنى إنشاء وإدارة مشاريع Vue بسرعة وبدون إعداد يدوي معقد، حيث مكتبة Vue CLI تعتمد داخليًّا على Webpack لتجميع الكود، وتُنشئ هيكل مشروع يشمل: ملفات ‎.vue‎ (Single-File Components) إعداد ‎Babel‎ و‎ESLint‎ و‎PostCSS‎ سيرفر تطوير مع Hot-Reload تأتي بنظام Plugins وPresets بحيث تستطيع يمكنك إضافة Router, Vuex, TypeScript, Vuetify بخطوة واحدة. توفر أمر vue ui للحصول على واجهة رسومية اختيارية لإدارة الإعدادات.

لا حاجة لإيقافها، الأفضل تحميل مكتبة @vue/eslint-config-prettier من خلال الأمر التالي، حيث ستقوم بإضافة إعدادات مُعدة مسبقًا لـ ESLint، ومُصممة خصيصًا لتعمل مع مشاريع Vue.js التي تم إنشاؤها باستخدام أداة create-vue. وذلك لدمج Prettier وهي إضافة تنسيق الكود مع ESLint وهي إضافة فحص الكود بشكل سلس، بحيث يتم تجنب التعارضات بين قواعد تنسيق الكود في ESLint وقواعد Prettier. npm add --dev @vue/eslint-config-prettier

يوجد مكتبة mPDF لكن الأفضل حاليًا مكتبة Gpdf فهي تعتمد على mPDF لكنها أسهل في الاستخدام وأحدث أيضًا، وأيضًا تتكامل مع Blade Views و Facades في Larave بشكل جاهز. ببساطة الكود التالي هو كل ما تحتاجه لإنشاء PDF من ملف Blade View: use Omaralalwi\Gpdf\Facade\Gpdf as GpdfFacade; public function generatePdf() { $html = view('pdf.example-1')->render(); $pdfContent = GpdfFacade::generate($html); return response($pdfContent, 200, ['Content-Type' => 'application/pdf']); } ولكن يجب استخدام نوع خط مخصص للغة العربية وبها خطوط جاهزة وهي التالي: https://github.com/omaralalwi/Gpdf?tab=readme-ov-file#support-for-arabic

عبارة عن موجه لربط سمة في عنصر HTML ببيانات موجودة في تطبيق Vue لديك، بمعنى في لغة HTML قيمة السمات تكون ثابتة: <a href="https://google.com">جوجل</a> <img src="logo.png" alt="شعار"> لاحظ كتبت عنوان https://google.com في سمة href وذلك العنوان ثابت، نفس الأمر بالنسبة لمسار الصورة في سمة Src. لكن مع v-bind، تستطيع جعل تلك السمات معتمدة على بيانات من جافاسكريبت، بالتالي: <a v-bind:href=""></a> <img v-bind:src="" alt=""> معناه أننا نخبر Vue أريد أن أربط سمة href وسمة src ببيانات ستأتي من ملف الجافاسكريبت script.js وعلى إفتراض أن الملف يحتوي على الكود التالي: const app = Vue.createApp({ data() { return { name: 'علي', age: 25, gender: 'ذكر', vueWebsiteUrl: 'https://vuejs.org/', vueLogoUrl: 'https://vuejs.org/images/logo.png' } }, methods: { } }); app.mount('#root'); فتستطيع استخدام المتغير vueWebsiteUrl و vueLogoUrl لإضافة بيانات بشكل ديناميكي كالتالي: <div id="root"> <a v-bind:href="vueWebsiteUrl">موقع Vue الرسمي</a> <img v-bind:src="vueLogoUrl" alt="شعار Vue"> </div>

أسهل طريقة هي من خلال مكتبة BeeWare، ستحتاج إلى تثبيت التالي: pip install briefcase ثم تنفيذ الأمر التالي لإنشاء مشروع وسيقوم بسؤالك عن بيانات المشروع قم بإدخالها خطوة بخطوة: briefcase new ثم في مجلد src ستجد ملف باسم app.py ضع به الكود الخاص بك، ثم توجه لمسار مجلد المشروع الرئيسي وليس src عن طريق منفذ الأوامر، ثم نفذ الأوامر التالية: briefcase build android briefcase package android ستجد تفصيل هنا: https://docs.beeware.org/en/latest/tutorial/tutorial-1.html

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

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

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

بالنسبة للصور فلديك مواقع Unsplash, Pexels, Pixabay, Pngtree تقدم صورًا عالية الجودة بدون حقوق ملكية أو بترخيص CC0 الذي يسمح بالاستخدام التجاري والتعديل بدون ذكر المصدر. كذلك Freepik يحتوي على قسم ضخم من الميديا المجانية Vectors, PSDs, Photos, Icons. والمنصات المتخصصة في أصول الألعاب مثل Sprites, Tilesets, Backgrounds, 3D Models هي OpenGameArt.org والذي يحتوي على كم هائل من الرسومات ثنائية وثلاثية الأبعاد، مؤثرات صوتية، وموسيقى. وكذلك Kenney.nl يقدم مجموعات ضخمة من 2D sprites, 3D models, UI elements. بالإضافة إلى https://itch.io/game-assets/free وهو منصة لمطوري الألعاب المستقلين، وكثير منهم يشاركون أصولاً مجانية، وتفقد أيضًا موقع https://craftpix.net/freebies لكن تركيزه على تصميمات البكسل. ولو أردت أيقونات فقط فيتوفر موقع Flaticon وMaterial Icons.

ما تريده هو أن تصبح مطور Full-Stack بمعنى تطوير الواجهة الأمامية Front-End والخلفية Back-End معًا، فالأمامية هي واجهة المستخدم التي تظهر في المتصفح، كواجهة أكاديمية حسوب هنا، بينما الواجهة الخلفية هو السيرفر الذي به قاعدة البيانات والمنطق الذي يقوم بمعالجة كل الطلبات من وإلى السيرفر. أمامك خيارين الأول تعلم تقنيات MERN والثاني تعلم PHP ولارافل، والأمر يعتمد على ما تريده من وراء تعلم البرمجة هل تنوي إتخاذها كمسار مهني أم مجرد هواية لتنفيذ مشروع تريده مثلاً؟ ستجد هنا تفصيل وتوضيح لكل من: ما هي علوم تطوير الويب؟ مجالات تطوير الويبالواجهات الأمامية Front-End لغات تطوير الواجهات الأمامية المكتبات وأطر العمل المتوفرة للواجهات الأمامية مصادر تعلم تطوير الواجهات الأمامية Front-End الواجهات الخلفية Back-End ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ مصادر لتعلم تطوير الواجهات الخلفية Back-End المطور الشامل Full-Stack ما هي فرص العمل بعد تعلم تطوير الويب؟ كيف أختار مجال تطوير الويب المناسب لي؟ والفيديو التالي سيوضح الأمر لك أيضًا:

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

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

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

بالضبط تم تنفيذ كل ما هو مطلوب

بسبب أنك عرفت IterativeImputer وهو يعتبر القيمة -1.0 هي القيمة المفقودة: IterativeImputer(missing_values=-1.0) لكن البيانات الفعلية التي يستقبلها IterativeImputer وهي الأعمدة الرقمية numeric_features من data_train تحتوي على قيم NaN، وهي الطريقة المتبعة في Pandas و NumPy لتمثيل القيم المفقودة. بالتالي عند استقبال NaN يجد -1.0 كعلامة للقيم المفقودة، لذا يعتبر الـ NaN قيمة غير صالحة ولا يستطيع التعامل معها. عليك تغيير missing_values=-1.0 إلى missing_values=np.nan.

isna تتعرف على NaN و None وNaT (Not a Time - للتواريخ) كقيم مفقودة، ولا تعتبر -1.0 قيمة مفقودة بشكل افتراضي، حيث NaN هي قيمة خاصة تعني أنّ البيانات الرقمية مفقودة أو نتيجة عملية حسابية غير معرفة، بالتالي NaN في الغالب تعني أن الخلية كانت فارغة تمامًا في البيانات الأصلية، خصوصًا في الأعمدة الرقمية. ولتضمين قيم أخرى مثل -1.0 كقيم مفقودة، يجب تحديد ذلك صراحًة من خلال استبدالها عن طريق np.nan df.replace(-1.0, np.nan, inplace=True) أو إنشاء قناع مخصص: missing_mask = (df == -1.0) | df.isna() missing_count = missing_mask.sum()

الدالة ستكون كالتالي: function winner(){ for(let i = 1; i < 10; i++){ square[i] = document.getElementById('item' + i).innerHTML; } if(square[1] == square[2] && square[2] == square[3] && square[1] != ''){ end(1,2,3) return; } if(square[4] == square[5] && square[5] == square[6] && square[5] != ''){ end(4,5,6) return; } if(square[7] == square[8] && square[8] == square[9] && square[8] != ''){ end(7,8,9) return; } if(square[1] == square[4] && square[4] == square[7] && square[1] != ''){ end(1,4,7) return; } if(square[2] == square[5] && square[5] == square[8] && square[5] != ''){ end(2,5,8) return; } if(square[3] == square[6] && square[6] == square[9] && square[6] != ''){ end(3,6,9) return; } if(square[1] == square[5] && square[5] == square[9] && square[5] != ''){ end(1,5,9) return; } if(square[3] == square[5] && square[5] == square[7] && square[5] != ''){ end(3,5,7) return; } // هنا نتحقق من التعادل let draw = true; for(let i = 1; i < 10; i++){ if(square[i] == ''){ draw = false; break; } } if(draw){ title.innerHTML = 'تعادل'; setTimeout(function(){location.reload()}, 4000); } }

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