Mustafa Suleiman

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

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

الأمر بحاجة إلى تفصيل، لكن الصورة العامة هي عن طريق الـ API فهو حلقة الوصل بين الواجهة الأمامية والخلفية، وبين البرامج عامًة، ويتم إنشائه في الواجهة الخلفية Back-End من خلال لغة برمجة خاصة بالواجهة الخلفية مثل PHP أو C# مثلاً، وللعلم جافاسكريبت يتوفر لها بيئة تشغيل للواجهة الخلفية وهي Node.js ثم يتم استخدام مكتبة أو إطار للمساعدة في عملية التطوير مثل Express.js في حالة Node.js ويتم إنشاء نقاط نهاية أو عناوين API بشكل بسيط، وتحديد نوع الطلب الذي سيتم التعامل معه عند إرسال الطلب للـ API، والأنواع هي GET, POST, PUT, PATCH, DELETE. ثم كتابة منطق لمعالجة الطلب المُرسل من قبل الواجهة الأمامية ويتم إرسال رد للواجهة الأمامية، ستجد تفصيل هنا:

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

تقصد نقل سطر الكود إلى مكان آخر؟ قم بالوقوف عند السطر الذي تريده بالضغط بمؤشر الفأرة أو التنقل بالأسهم، ثم اضغط على ALT + سهم للأعلى أو الأسفل لنقل السطر من مكانه

ستحتاج إلى دراسة المسارات التالية فقط إذا أردت أن تصبح مطور Front-End: أساسيات لغة JavaScript أساسيات React.js تطبيق دردشة يشبه WhatsApp أساسيات TypeScript إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js تطبيق تعلم اللغات باستخدام Next.js وتقنيات الذكاء الاصطناعي تطبيقات الويب التقدمية PWA بجانب دراسة المسار الأول من دورة تطوير واجهات المستخدم، فهو متاح بشكل مجاني لك.

كلاهما سيعمل، الأفضل استخدام async await ومعالجة الأخطاء من خلال try-catch

كلاهما يؤديان نفس الغرض، لكن من خلال خطاف useEffect فستعمل دالة fetch تلقائيًا عند تحميل المكون بسبب مصفوفة الإعتماديات الفارغة [] بالتالي سيتم جلب البيانات في البداية في حال ذلك كان مطلوب، لكن يتم استخدام then وهي طريقة قديمة، الأفضل async-await وأيضًا لا يتم معالجة الأخطاء من خلال try-catch أما دالة async/await فهي مستقلة ولا تعمل إلا عند استدعائها بنفسك مثلاً عند النقر على زر، وتتبع النهج الحديث في التعامل مع العمليات الغير متزامنة وتعتمد على try-catch. وللعلم هناك خطأ في الكود حيث هنا const data = res.json() فـ res.json() هي عملية غير متزامنة وتعيد Promise، يجب أن تنتظرها باستخدام await لتضمن الحصول على البيانات الفعلية وليس الـ Promise نفسه. والحل الأفضل هو الجمع بين الطريقتين كالتالي: const fetchCategories = async () => { try { const res = await fetch('api/categories'); const data = await res.json(); setCategories(data); return data; } catch (error) { console.error('خطأ في جلب التصنيفات:', error); setError(error.message); return null; } finally { setLoading(false); } }; useEffect(() => { setLoading(true); fetchCategories(); }, []);

ذلك خطاف من مكتبة react-router-dom يوفر معلومات كاملة عن الرابط الحالي الذي يتصفحه المستخدم داخل تطبيقك، وفي الواقع العملي ستستخدمه في معرفة الصفحات التي يزورها المستخدمون لإرسال تلك المعلومات إلى خدمات مثل Google Analytics مثلاً. import { useLocation } from 'react-router-dom'; import { useEffect } from 'react'; import { analytics } from './analytics-service'; function AnalyticsTracker() { const location = useLocation(); useEffect(() => { console.log(`المستخدم زار الصفحة: ${location.pathname}`); analytics.trackPageView(location.pathname + location.search); }, [location.pathname]); return null; } أو في حال لديك صفحة لعرض المنتجات، وتريد السماح للمستخدم بفلترة النتائج حسب الفئة والسعر، فستظهر تلك الفلاتر في الرابط، أي كالتالي (/products?category=laptops&sort=price_asc) وبناءًا عليها تقوم بطلب البيانات من قاعدة البيانات عن طريق توظيف location.search مع URLSearchParams المتوفر في المتصفح كـ API. import { useLocation } from 'react-router-dom'; import { useState, useEffect } from 'react'; function ProductListPage() { const location = useLocation(); const [products, setProducts] = useState([]); useEffect(() => { const queryParams = new URLSearchParams(location.search); const category = queryParams.get('category'); const sortBy = queryParams.get('sort'); console.log(`جلب المنتجات من الفئة: ${category}, مرتبة حسب: ${sortBy}`); // هنا تقوم بطلب البيانات من الـ API بناءً على هذه المتغيرات fetchAPI(`/api/products?category=${category}&sort=${sortBy}`) .then(data => setProducts(data)); }, [location.search]); / return ( <div> </div> ); } أو لو لديك صفحة قائمة المنتجات، وعندما يضغط المستخدم على منتج، تريد إرسال بيانات هذا المنتج (الاسم، السعر، الصورة) إلى صفحة تفاصيل المنتج لتظهر فوراً بينما يتم تحميل باقي التفاصيل، فستعتمد على location.state: import { Link } from 'react-router-dom'; function ProductItem({ product }) { return ( // نستخدم الخاصية "state" في مكون Link <Link to={`/products/${product.id}`} state={{ productData: product }}> <div> <h3>{product.name}</h3> <p>{product.price}</p> </div> </Link> ); } ثم استقبال البيانات في صفحة تفاصيل المنتج: import { useLocation, useParams } from 'react-router-dom'; import { useState, useEffect } from 'react'; function ProductDetailPage() { const location = useLocation(); const { id } = useParams(); const initialData = location.state?.productData; const [product, setProduct] = useState(initialData); useEffect(() => { if (!product) { console.log("البيانات غير موجودة في state، جاري طلبها من الـ API..."); fetchAPI(`/api/products/${id}`).then(data => setProduct(data)); } }, [id, product]); if (!product) { return <div>جاري التحميل...</div>; } return ( <div> <h1>{product.name}</h1> <p>السعر: {product.price}</p> </div> ); } كذلك لو لديك صفحة إعدادات بها عدة تبويبات مختلفة Profile, Account, Notifications وتريد أن يكون الرابط هو الذي يحدد أي قسم يتم عرضه، بمعنى أي قسم يجب أن يكون نشطًا بناءًا على الرابط؟ فستحتاج إلى استخدام location.pathname أو location.hash.

دراسة المسارات التي تسبقه وهي: أساسيات لغة JavaScript أساسيات React.js أساسيات Node.js تطوير تطبيق جوال باستخدام React Native ويمكنك تخطي مسار React Native حاليًا وتجاهل الجزء الخاص بتطبيق الهاتف في مسار تطبيق دردشة يشبه WhatsApp، وذلك في حال كان تركيزك الحالي منصب على تعلم جافاسكريبت وReact.

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

ذلك طبيعي جدًا، ففي حال لم تقم بإضافة أية تعليقات على الأجزاء الرئيسية من الكود لتوضيح المنطق الخاص بتلك الأجزاء، لتصبح خريطة لك لاستيعاب ما يحدث عند العودة فيما بعد، أو لم تقم بتنظيم ملفات المشروع من خلال هيكل مجلدات مُنظم، أو طريقة كتابة الكود غير مُنظمة والتسميات غير واضحة، أو قمت بإنشاء المشروع من خلال إتباع شرح دونّ استيعاب ما تقوم به. عامًة كلما طالت المدة، زاد النسيان، لذا عليك بالتعود على كتابة التعليقات: # هذه الدالة تحسب متوسط المبيعات الشهرية function calculateMonthlyAverage() { # نجمع المبيعات من قاعدة البيانات # ثم نقسم على عدد الأشهر } وعند الإنتهاء من المشروع اكتب ملف README مفصل، ووضح القرارات التقنية المهمة واشرح كيفية تشغيل المشروع. والتسميات الواضحة: //بدلاً من function calc(x, y) { return x * y * 0.15; } //اكتب function calculateTaxAmount(price, quantity) { const TAX_RATE = 0.15; return price * quantity * TAX_RATE; }

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

Codewars من المواقع السهلة والتي بها مساءل مناسبة للمبتدئين بسبب نظام المستويات الذي يسمى Katas حيث تبدأ من أسهل مستوى 8 kyu وتتدرج في الصعوبة كلما حللت مسائل أكثر، وبالتالي لن تواجه مشاكل صعبة جدًا في البداية. وذو واجهة بسيطة، فكل ما عليك هو قراءة المشكلة، كتابة الحل في المحرر الموجود بالموقع، ثم الضغط على Test لتجربة حلك و Attempt لتقديمه. وبعد أن تحل أي مشكلة بنجاح، يتيح لك رؤية حلول المبرمجين الآخرين. وستجد مواقع أخرى هنا:

بالنسبة للأحياء فستحتاج إلى مكتبة خاصة ببيانات منطقة جغرافية معينة أو قم بإنشاء جدول في قاعدة البيانات مخصص للأحياء، بينما الدول والولايات والمدن والعملات والمناطق الزمنية فذلك متاح من خلال المكتبات التالية: nnjeim/world وهي الأفضل altwaireb/laravel-world nerdsnipe/laravel-countries igaster/laravel_cities sufyan/laravel-countries-states-cities

تستطيع حل بعض المسائل على موقع Codewars: وبجانبه حاول حل التمارين التالية لإختبار استيعابك فيما تعلمته على إفتراض أنّ المستوى الخاص بك هو متوسط: اكتب دالة تستقبل سلسلة نصية كمدخل وتعيد السلسلة النصية معكوسة. دالة تستقبل جملة كمدخل وتعيد أطول كلمة في الجملة. دالة تتحقق مما إن كانت الكلمة المدخلة تُقرأ بنفس الشكل من اليمين لليسار ومن اليسار لليمين، ويجب تجاهل حالة الأحرف والمسافات. دالة تستقبل مصفوفة كمدخل وتعيد مصفوفة جديدة تحتوي على العناصر الفريدة فقط بدون تكرار. لديك مصفوفة من الكائنات، كل كائن يمثل منتج له اسم وسعر، فاكتب دالة تحسب المجموع الكلي لأسعار المنتجات. لديك مصفوفة من الطلاب، كل طالب له اسم والفصل الذي ينتمي إليه، أنشيء دالة تقوم بتجميع الطلاب حسب فصولهم. وكتمارين على الـ DOM: 1- فأنشئ صفحة HTML تحتوي على: عنوان <h2> يعرض الرقم 0. زر زيادة (+). زر نقصان (-). واكتب كود جافا سكريبت بحيث عند الضغط على زر زيادة يزيد الرقم المعروض، وعند الضغط على نقصان يقل الرقم. 2- قائمة مهام بسيطة To-Do List من خلال صفحة HTML تحتوي على: حقل إدخال نصي زر إضافة. قائمة غير مرتبة. ومن خلال جافا سكريبت اكتب منطق بحيث عندما يكتب المستخدم مهمة في حقل الإدخال ويضغط على إضافة، تتم إضافة المهمة كعنصر جديد <li> داخل القائمة <ul>. 3- بناء واجهة بسيطة تسمح للمستخدم بإدخال اسم مدينة وعرض درجة الحرارة الحالية فيها، وذلك من خلال استخدام API مجاني للطقس مثل OpenWeatherMap. وتعامل مع حالات الخطأ، مثل إدخال اسم مدينة غير موجود.

المُتاح هو نشر المقالات، وعليكِ: إرسال فكرة عامة حول المقال المُراد كتابته أو رابط للمقال المُراد ترجمته (أو المقال كاملًا إن كان جاهزًا)، فيُمكن أن يكون الموضوع خارج اهتماماتنا، أو أن هناك مقالات قيد الكتابة حوله، أو أن الموضوع قد سبق الحديث عنه، ولا نرغب في تضييع جهدك سُدًى. بعد الحصول على المُوافقة المبدئية تقوم بتحرير المقال وإرسال مُسودة "جاهزة للنشر" يفضل أن يُرسل المقال على هيئة ملف markdown، ملف odt أو ملف docx (على هذا الترتيب). تتم المُراجعة التقنية للمقال من طرف عُضو في فريق التحرير، والذي سيتولى اقتراح تعديلات أو تصحيحات إن كانت هناك حاجة لذلك. بعد الفراغ مما سبق يمر المقال إلى مرحلة التدقيق اللغوي يُنشر المقال وستجدي تفصيل هنا: https://academy.hsoub.com/pages/write-for-us/publication-process/ وتلك هي قواعد كتابة المقالات المناسبة للنشر بالأكاديمية: https://academy.hsoub.com/pages/write-for-us/style-guide/ بينما الكُتب، غير مُتاح نشرها إلا من قبل فريق الأكاديمية نفسه ويتم إختيار مواضيع معينة للكتب للعمل على كتابتها ونشرها.

ما هي الدورة المقصودة؟ وما هو عمرك وهل تنوي العمل على منصات العمل الحر أم تستهدف سوق العمل في بلدك؟

بالطبع الفترة التأسيسية هي 6 أشهر، وتصل أحيانًا إلى سنة حسب المجهود المبذول والخبرات السابقة والفروقات الفردية من شخص لشخص، وكذلك الوقت المخصص للدراسة ومدى الإلتزام بالمدة المحددة. وفي حال الإلتزام في السنة الأولى والدراسة بشكل مُكثف أي بحد أدنى 4 إلى 5 ساعات يوميًا، فمن المفترض الوصول لمستوى Junior، أي أنك قادر على تطوير مشاريع حقيقية والمساهمة في مشاريع قائمة بالفعل، ولكن بحاجة إلى التوجيه والإشراف من المطورين الأكثر خبرة. في الـ 6 أشهر أولى عليك بالتركيز على الأساسيات مع التطبيق على مشاريع صغيرة، وعند الوصول لمستوى تصبح به قادر على تنفيذ مشاريع بلغة جافاسكريبت فقط دون نسخ أعمى من دروس يوتيوب، بمعنى أصبحت قادر على تنفيذ مشروع Weather App كامل مثلاً، بعدها انتقل إلى تعلم React وخصص لها شهر ثم تعلم TypeScript والتطبيق على ذلك في مشاريع React لمدة شهر، ثم Next.js لمدة شهر. ولا مشكلة ولو وصلت لتلك المرحلة خلال ثلاثة أو أربعة أشهر فبإمكانك البدء في React مباشرة، مع الاستمرار في تعميق الأساسيات بالتوازي، أما لو احتجت ستة أشهر لإتقانها فلا مشكلة، فسرعة التعلم تختلف من شخص لآخر. لأنّ React لا تُعلمك أساسيات الويب بل تفترض أنك على علم بها، ومعظم المشكلات التي ستواجهها في React أصلها JavaScript أو CSS. ثم تعلم كيف تقوم بإختبار مشروعك من خلال Unit و E2E tests.

هناك إجابات غير صحيحة، لذا لا يتم السماح لك باستكمال عملية التسجيل إلا بعد توفير إجابات صحيحة. قم بقراءة التالي أولاً بالضغط على تبويب المستقلون وعام أيضًا، وقراءة المحتوى الخاص بهم: https://mostaql.com/p/terms بعد ذلك قم بالعودة والإجابة على الأسئلة من جديد.

ستجد تفصيل هنا: https://support.mostaql.com/create-account https://support.mostaql.com/joining-as-freelancer

اسم المستخدم يجب أن لا يقل عن 4 أحرف، بينما أنت كتبت 3 أحرف فقط zen لذا قم بكتابة zeen

ذلك ما قصدته، في حال لا يظهر لك اسم المكون عند كتابته وبالضغط عليه يتم الاستيراد تلقائيًا، قم بإنشاء ملف باسم jsconfig.json في مجلد المشروع الرئيسي وضع به التالي: { "exclude": ["node_modules"] } لاحظ عليك الضغط على اسم المكون ليتم استيراده عندما يظهر في الإقتراحات:

ما تعلمته هو الأساسيات ومن خلال المشاريع العملية في باقي الدورة ستتعلم المزيد، وستصل لمستوى متوسط من خلال المشاريع التي في الدورة عند استيعاب ما تم شرحه. حيث سيتم التعمق في استخدام الخطافات خاصًة المهم منها وهم: useState useEffect useContext useRef وأيضًا سيتم التعمق في مفهوم إدارة الحالة على نطاق أوسع، ففي المشاريع المتوسطة والكبيرة ستحتاج إلى مكان مركزي لإدارة الحالة التي نشاركها مكونات كثيرة، وذلك من خلال مكتبة بسيطة وسهلة وهي Zustand. بالإضافة إلى التعمق في طريقة التعامل مع الخوادم والبيانات الخارجية، وكيفية استخدام react router للتنقل بين الصفحات المختلفة دون إعادة تحميل الصفحة بالكامل. واستخدام Tailwind CSS والذي هو إطار عمل CSS الأشهر حاليًا، وتعلمه سيجعلك تقوم ببناء الواجهات بشكل سريع. بجانب ما سبق قم بالبحث وتعلم عن useReducer و useCallback وuseMemo، وكذلك تعلم كيفية إنشاء خطافات مخصصة.

ليس كذلك، بل في الواقع العملي ستجد مزيج هجين من أساليب برمجية مختلفة، حيث يتم استخدام كل أسلوب للمهمة المناسبة، بمعنى البرمجة الوظيفية والإجرائية 60-70% كالتالي: import pandas as pd import numpy as np from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler data = pd.read_csv('data.csv') def preprocess_data(df): df = df.dropna() df['feature'] = df['feature'].apply(lambda x: x.strip()) return df def train_model(X, y): X_train, X_test, y_train, y_test = train_test_split(X, y) scaler = StandardScaler() X_train_scaled = scaler.fit_transform(X_train) والبرمجة الكائنية 20-30% كالتالي لبناء pipelines معقدة أو مكتبات، أو تغليف النماذج فبدلاً من وجود متغيرات متناثرة للنموذج والمحوّلات وإعدادات المعالجة، الأفضل إنشاء صنف ModelWrapper يحتوي على كل ما يتعلق بالنموذج من كيفية تحميله، كيفية معالجة المدخلات، كيفية التنبؤ، وكيفية تفسير المخرجات، وذلك يسهل بشكل كبير عملية نشر النموذج. class DataProcessor: def __init__(self, config): self.config = config self.scaler = StandardScaler() def fit(self, data): self.scaler.fit(data) return self def transform(self, data): return self.scaler.transform(data)