Mustafa Suleiman

عند التصغير لمقاس 462px تبدأ المشاكل في الظهور، حيث يظهر شريط تمرير بالأسفل بالتالي هناك مشكلة في التجاوبية، ستحتاج إلى حذف الـ padding الخاص بتنسيق كلاس contatiner في ملف index.css @media screen and (max-width: 462px) { .container { padding: 0; } } وعند التصغير أكثر لا يتجاوب الموقع بشكل سليم، والمشكلة في الجزء الخاص بالخدمات services حيث قمت بتحديد عرض وطول ثابت للعناصر داخل الـ grid بالتالي تصبح غير متجاوبة، يجب جعلها مرنة. في البداية إنشاء grid متجاوب كالتالي في src\Components\Services\services.css : .services .services-cards { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; } @media (min-width: 300px) { .services .services-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } وحذف أي كود خاص بإنشاء الـ grid في باقي الملف. ثم حذف أي كود خاص بتعديل العرض width والطول للعناصر بداخل الـ grid. ونفس الحال في ملف gym.css لكن ستحتاج إلى استخدام flexbox فالتصميم هنا لا يناسبه الـ grid. الأسهل لك الإعتماد أكثر على الـ flexbox واستخدام grid عند الحاجة، وكذلك بالنسبة للصور يجب استخدام max-width: 100% لتصبح متجاوبة وليس تعيين قيمة ثابتة لها، بل القيمة الخاصة بالعرض تكون للعنصر الأب الذي يحتويها. نفس الحال بالنسبة للقسم للتالي: .features .content-features { max-width: 500px; } أرفقت لك المشروع بعد التعديل. alshahba-gym.zip

بالنسبة لمعرض الأعمال الأمر مختلف، ستقوم برفع ملف الـ Notebook بداخل مجلد منفصل، ثم رفع نفس الكود في ملف بايثون لكن بتقسيمه إلى ملفات قابلة لإعادة الاستخدام، وملف requirements.txt لتحميل المكتبات الخاصة بالمشروع، وملف README.md لشرح المشروع. بمعنى ضع كل الكود المنطقي والقابل لإعادة الاستخدام مثل تحميل البيانات، المعالجة المسبقة، تعريف النموذج، ودوال التدريب في ملفات بايثون داخل مجلد خاص باسم src. ثم استخدم الـ Notebook للشرح والعرض وقم باستيراد الدوال والفئات من ملفات .py واستخدمها. ml_project/ ├── notebooks/ │ └── analysis_and_visualization.ipynb │ ├── src/ │ ├── __init__.py │ ├── data_processing.py # دوال معالجة البيانات │ ├── model.py # تعريف بنية النموذج │ └── train.py # سكربت لتدريب النموذج │ │ ├── requirements.txt └── README.md

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

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

لا يوجد مشكلة في الكود، بل في أداة إختبار التجاوب في المتصفح في جوجل كروم، في بعض الأحيان ستجد مساحة فارغة جهة اليمين أو اليسار، وستحتاج إلى تنسيق CSS معين لمنع ظهورها أثناء تطوير المشروع. الأسهل هو استخدام إضافة لإختبار التجاوب ومن بين الإضافات الجيدة يوجد Pixefy - Responsive Design Checker

الأمر ليس بتلك السهولة لكن ممكن بالطبع، الفكرة أنّ التخزين السحابي متوفر من خلال منصات الشركات الكبيرة مثل Google أو Microsoft أو أمازون، بالتالي مستوى الحماية مرتفع للغاية هنا، بسبب وجود قسم كامل مختص بالحماية، فهناك شركات وأشخاص من جميع أنحاء العالم تعتمد على تلك المنصات في التخزين السحابي وخدمات أخرى. فمعظم الخدمات تستخدم تشفير AES-256 أثناء التخزين وTLS أثناء النقلK ,تُدار البيانات عبر لوحات تحكم مركزية تتطلب مصادقة متعددة العوامل وصلاحيات دقيقة. وشركات مثل AWS وGoogle تستخدم أنظمة كشف تسلل متقدمة IDS وIPS وتقوم بمراقبة سلوك المستخدم. أيضًأ تخضع المنصات السحابية الكبيرة لمعايير مثل ISO 27001، SOC 2، وGDPR، مما يزيد من صعوبة الثغرات. أغلب الإختراقات تتم من خلال المستخدم نفسه، بمعنى استخدام كلمات مرور ضعيفة أو تكرارها، الضغط على روابط تصيد phishing تسرق بيانات الدخول، أو عدم تفعيل المصادقة الثنائية 2FA. أو مشاركة ملفات علنية دون قصد، أو منح صلاحيات مفرطة لتطبيقات غير موثوقة. وللعلم اختراق مزود الخدمة نفسه نادر جدًا، لكن وارد فهناك حوادث مثل اختراق iCloud عام 2014 حيث تم الأمر عبر تصيد، وليس ثغرة تقنية.

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

في المشاريع المختلفة يجب عليك إنشاء ملف gitignore. دائمًا عند التعامل مع git، وذلك لتجاهل الملفات والمجلدات التي ليس لها علاقة بالكود المصدري الذي تريد نشره على منصة مثل GitHub، ولكل مشروع إعداد خاص لملف gitignore. حيث تختلف أسماء المجلدات والملفات، بمعنى مشاريع جافاسكريبت مختلفة عن مشاريع بايثون وهكذا. ابحث على جوجل عن gitignore for JavaScript project وستجد الإعداد الصحيح للملف لمشاريع جافاسكريبت، وإليك مستودع به قوالب جاهزة لمختلف المشاريع: https://github.com/github/gitignore وبعد إنشائه وتهيئته قم بتنفيذ الأمر التالي لإلغاء تتبع الملفات والمجلدات والبدء من جديد مع الأخذ في الإعتبار إعدادات ملف gitignore: git rm --cached .

لديك خلط بسيط بين المفاهيم في نقطة getMe، قمت بإعادة إرسال الـ Token في الـ Response، أي أن التوكن سيُخزن مرة أخرى في الذاكرة React state، وذلك يُلغي ميزة استخدام httpOnly cookie، فالآن لديك نسخة من التوكن في JavaScript معرضة لـ XSS، ولم تعد بحاجة إلى إرسال التوكن في الـ Response، لأن الكوكي يُرسل تلقائيًا مع كل طلب. فلا ترسل التوكن في الـ Response، فكل طلب إلى الـ Backend سيُرفق به الكوكي تلقائياً بما أن التوكن في httpOnly cookie. وطلب getMe عند تحميل التطبيق أو عند الحاجة، وستستخدم TanStack Query لتخزين بيانات المستخدم فقط وليس التوكن. وفي حال تستخدم Next.js أو SSR، فستحتاج إلى التأكد من أن الكوكي يُرسل من السيرفر إلى الـ API أيضاً بواسطة req.headers.cookie أو getServerSideProps مع withCredentials.

سيتعين عليك تعديل التنسيقات بما يتناسب مع أحجام الشاشة المختلفة وذلك من خلال media queries، ولا توجد قاعدة واحدة لجميع التصميمات. و الأمر أسهل لو استخدمت الـ Grid و الـ Flex بشكل صحيح، أي لو قمت ببناء العناصر بشكل جيد وقمت باستخدام Grid و Flex وبالأخص Grid بشكل صحيح، ستقل نسبة استخدامك للـ Media Query بشكل كبير جدًا، وذلك يعرف باسم Fluid Layouts. وكذلك استخدام وحدات القياس الديناميكية مثل rem وem. وبالطبع دراسة أساسيات التصميم لواجهة المستخدم، لتتمكن من تصميم المساحات بشكل جيد وبناءًا على أسس صحيحة وليس بشكل عشوائي، وكذلك تراتبية هيكل الموقع لها أسس وليست عشوائية. ستجد تفصيل هنا:

الملف يتم حفظه في المكان الذي قمتي بإنشائه به، بمعنى لو قمتي بإنشاء الملف على سطح المكتب سيبقى مكانه، ولحفظ الكود نضغط على CTRL + S لكي يبقى في الملف عند غلق المحرر، وعند العودة وفتحه نجد الكود كما هو. ما هي الخطوات التي قمتي بها؟

العميل ما يهمه هي النتيجة النهائية في شكل تقرير، لذا عليك تحويل الـ Notebook إلى تطبيق تفاعلي باستخدامStreamlit أو Dash أو Gradio والأسهل Streamlit. وتحفظ الرسومات والإحصائيات كمكونات تفاعلية ويُرفق ملف requirements.txt للعميل يشغل التطبيق بأمر واحد: streamlit run app.py أو استضافته مجانًا على Streamlit Share أو Render أو Hugging Face Spaces وتوفير رابط مباشر لتصفحه. قبل التسليم، عليك حذف الخلايا غير الضرورية، أعد تسمية المحاور وضع تعليقات توضيحية بالعربية أو الإنجليزية حسب لغة العميل واستخدم plt.savefig('fig_01_sales.png', dpi=300, bbox_inches='tight') لحفظ كل رسم بجودة عالية، واجمع الإحصائيات الأساسية في DataFrame واحد ثم صدره إلى Excel أو CSV ليسهل على العميل فتحه بعد التقرير. ثم تقرير PDF ثابت عالي الجودة، من خلال Jupyter nbconvert مع قالب مخصص: jupyter nbconvert notebook.ipynb --to pdf --template classic أو باستخدام Quarto أو R Markdown لإخراج PDF أو Word أو HTML، تعليقات جانبية، وحتى تضمين تفاعل Plotly. وفي حال أراد عرض تقديمي، فاعتمد على مكتبة python-pptx لإنشاء الشرائح تلقائيًا من الأشكال، أو تصدير الأشكال إلى ملفات SVG أوPNG ثم تضمينها يدوياً في قالب PowerPoint.

المقصود هي مفاتيح الواجهة البرمجية API ورموز الوصول Access Tokens، والتي عبارة عن سلسلة طويلة من الأحرف والأرقام مثل AKIAIOSFODNN7EXAMPLE وتُستخدم ككلمة سر، ولكن ليس للمستخدمين، بل للتطبيقات والبرامج للتواصل مع بعضها البعض عبر الإنترنت. بمعنى لديكِ تطبيق على هاتفك يعرض حالة الطقس، بالطبع هو بحاجة إلى جلب بيانات الطقس من خدمة متخصصة مثل Google Weather API، ولكي تسمح خدمة الطقس لتطبيقك بالوصول إلى بياناتها، تمنحه مفتاح API خاص به، هو ما يُثبت أن التطبيق مصرح له بطلب البيانات. بالتالي الحصول على مفتاح وصول سيمنح الهاكر صلاحيات خطيرة، منها: الوصول إلى قواعد بيانات المستخدمين وسرقة معلوماتهم الشخصية. التحكم في خدمات سحابية مثل Amazon Web Services (AWS) أو Google Cloud، وإنشاء خوادم للتعدين عن العملات الرقمية على حساب الضحية، أو حذف بيانات الشركة بالكامل. ولو تمكن من سرقة مفتاح API لخدمة إرسال بريد إلكتروني، سيستطيع إرسال رسائل تصيد Phishing باسم شركتك. وطرق الحصول عليه مختلفة، وغالبًا من خطأ بشري، بمعنى المطورون أحيانًا يضعون تلك المفاتيح بالخطأ في الكود المصدري العام على مواقع مثل GitHub، أو ترك ملفات الإعدادات متاحة للجميع على الإنترنت. أو سرقة المفاتيح مباشرة من حاسوب المطور نتيجة استغلال ثغرات أدت لإختراق جهازه.

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

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

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

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

لا تشغل بالك بما سيتم استبداله، الأمر ليس بتلك البساطة في مجال البرمجة، فمنذّ زمن يُشاع عن لغة PHP أنها أصبحت قديمة وستختفي وسيتم استبدالها ولم يحدث ذلك حتى الآن، فالواقع العملي هو ما يفرض كلمته. ووجود مشاريع ضخمة عمرها أكثر من 10 سنوات تعتمد على Node.js يضع حاجز قوي أما إنتقال تك المشاريع إلى تقنية جديدة، ربما المشاريع الجديدة في حال أثبتت المكتبة أو الإطار كفائتها، لكن ذلك بحاجة إلى وقت فهي ما زالت تقنية حديثة وغير مستقرة مقارنًة بـ Node.js وفي مجتمع جافاسكريبت بالأخص كل أسبوع تقريبًا هناك مكتبة أو إطار جديد، لذا الأمر مُشتت ومُجهد، الصحيح هو الإنتظار لحين أن تنضج تلك التقنيات وستفرض نفسها على الواقع العملي، وحينها تستطيع تعلمها واستخدامها. حاليًا ما يجب التركيز عليه هو المهارات المطلوبة في سوق العمل بالنسبة للتخصص الذي اخترته والذي غالبًا هو Full-Stack، لذا أنت تستهدف MERN Stack وهو ما يجب التركيز عليه وليس التقنيات الجديدة. وبعد اكتساب خبرة في التخصص الذي اخترته وتنفيذ مشاريع قوية، تستطيع تعلم تقنيات جديدة وإختبارها في مشاريع جانبية لا مشكلة، فذلك مطلوب بالفعل لتطوير مهاراتك ولكي تبقى مُطلع على الجديد في مجال البرمجة والذي يتغير بسرعة كبيرة كل فترة. أي هناك أولويات يجب الإلتزام بها في بداية السنة الأولى من رحلة تعلم البرمجة، ولا تحيد عنها لكي تصل لما تريده.

منهج الدورة مُتدرج يبدأ من شرح أساسيات بايثون وحتى أساسيات تعلم الآلة، وللتفصيل: الأسس البرمجية السليمة عبر لغة Python التعامل مع مختلف صيغ الملفات مثل إكسل Excel وورد Word وخدمات المستندات السحابية استخراج البيانات من صفحات الويب Web Scraping وتحليلها أساسيات التعامل مع قواعد البيانات عبر بايثون، والتعامل مع البريد الإلكتروني لإرسال الرسائل أساسيات إطار العمل جانغو Django بناء تطبيق إدارة المهام باستخدام إطار العمل جانغو Django تطوير متجر إلكتروني متكامل باستخدام إطار العمل جانغو Django وربطه مع وسائل الدفع باي بال PayPal وسترايب Stripe أساسيات إطار العمل فلاسك Flask، وبناء مدونة بسيطة تطوير تطبيقات أودو Odoo تطوير واجهة برمجية API اعتمادًا على نمط RESTful لمعالجة الصور وبالتالي تستطيعين العمل بالمجالات التالية: مطور Full-stack لبناء مواقع الويب والمتاجر الإلكترونية أي قادر على تطوير الواجهة الأمامية والخلفية أيضًا من خلال Django و Flask. مطور واجهة خلفية Back-End فقط. مطور odoo ويتم بها أيضًا شرح أساسيات تحليل البيانات وتعلم الآلة أيضًا، لكن الأساسيات فقط وليس شرح بشكل مُتعمق فهو خارج نطاق الدورة وخاص بدورة الذكاء الاصطناعي بالأكاديمية. وكمثال لوصف وظيفة خاصة بمطور بايثون حيث ستجدي وصف مشابه له على مواقع التوظيف مثل LinkedIn: معرفة عميقة بلغة بايثون وقدرة على استخدامها لبناء تطبيقات ويب. خبرة في استخدام إطار عمل مثل Django أو Flask لبناء واجهات المستخدم الخلفية. معرفة باستخدام مكتبات ORM للتعامل مع قواعد البيانات (مثل PostgreSQL أو MySQL) وقدرة على دمج مصادر بيانات متعددة. فهم جيد للمتعددات المتزامنة وكيفية التعامل معها بكفاءة في بايثون، أي كتابة أكواد بايثون تعمل على معالجة عدة مهام في نفس الوقت. خبرة في استخدام محركات قوالب مثل Jinja2 لإنشاء صفحات ديناميكية. فهم أساسي لـ HTML, CSS, و JavaScript لبناء واجهات مستخدم جذابة. معرفة بمبادئ الأمان، المصادقة، والتفويض. فهم المبادئ التصميمية الجيدة لبناء تطبيقات قابلة للتطوير والصيانة. خبرة في استخدام مكتبات لمعالجة الأحداث التي تسمح بتنفيذ أكواد معينة عند حدوث أحداث محددة. قدرة على بناء تطبيقات تعمل بكفاءة على منصات متعددة (جوال، سطح مكتب). القدرة على تصميم قواعد بيانات فعالة تلبي احتياجات العمل. مهارات قوية في اختبار الوحدات وتصحيح الأخطاء. خبرة في استخدام أدوات مثل Git لإدارة إصدارات الكود وبالتالي الدورة تغطي جزء كبير من المهارات المطلوبة بالوظيفة، وتحتاجين فقط إلى تعلم أساسيات تقنيات الواجهة الأمامية، مثل JavaScript و HTML5 و CSS3 وذلك متاح بشكل مجاني من خلال المسار الأول من دورة تطوير واجهات المستخدم. وبالطبع أي دورة مهما كانت يجب الدراسة بجانبها للتعمق أكثر والاستزادة، فلا توجد تلك الدورة التي توفر كل شيء.

numpy مكتبة أساسية وبُنيت عليها أهم مكتبات في مجال تحليل البيانات وتعلم الآلة، منها pandas وScikit-learn ووMatplotlib. فهياكل البيانات في Pandas مثل Series و DataFrame مبنية على مصفوفات numpy وبإجراء عمليات حسابية في Pandas، ففي الخلفية يتم الإعتماد على numpy. وما أنت بحاجة إلى تعلمه في البداية هو التالي: تفهم هكيل البيانات ndarray فكل شيء في المكتبة يدور حول ذلك الكائن، وباستيعابه ستتمكن من فهم المكتبة بأكملها. قبل أن تتمكن من تحليل أي شيء، تحتاج إلى إنشاء مصفوفة، فتعلم طريق إنشائها بالمكتبة. ثم تعلم الخصائص الخاصة بالمصفوفة Array Attributes في المكتبة مثل shape وndim وغيرهم. ثم الفهرسة والتقسيم العمليات الحسابية الموجهة Vectorized Operations دوال التجميع الأساسية الفهرسة المنطقية Boolean Indexing ابحث على اليوتيوب عن "أساسيات مكتبة numpy" وستجد مصادر مختلفة اختر ما تريد.

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

تقصد على مستقل؟ يوجد قسم " أعمال وخدمات استشارية" لكن تفقد المشاريع على المنصة فربما لا يوجد طلب على مثل تلك الخدمات، حيث تستطيع تفقد منصة خمسات والتي بها قسم "استشارات شخصية" ويوجد به طلب على تلك الخدمات بالفعل. https://khamsat.com/lifestyle/life-coaching

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

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

يجب وجود خادم لكي يتم من خلاله اكتشاف التحديثات الجديدة ويتم تحديث الصفحة بشكل تلقائي لعرضها، لذا ستحتاج إلى تثبيت إضافة Live server بالضغط على أيقونة الإضافات في المحرر ثم البحث عن live server أو تستطيع الضغط على الرابط التالي مباشرًة للتوجه لصفحة الإضافة ثم اضغط على install وسيتم فتحها مباشرًة في محرر vscode فاضغط على install للتثبيت: Live Server الآن قم بفتح مجلد المشروع في vscode بالضغط على file ثم open folder واختر مجلد المشروع. ثم افتح ملف index.html وهو الملف الرئيسي للمشروع، ثم ستجد بالأسفل زر باسم go live اضغط عليه وسيتم تشغيل الخادم في المتصفح وأي تغييرات تجريها ثم تحفظها بالضغط على CTRL + S ستظهر في المتصفح مباشرًة: