محمد_عاطف

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

يمكنك تغيير الاسم في إعدادات الموقع . بعد رفع الموقع إذهب إلى لوحة تحكم Netlify و قم باختيار الموقع الذي تريد تعديله. قم بإختيار "Site settings" وابحث عن خيار "Change site name" وأدخل الاسم الجديد الذي تريده مثل myproj وسيصبح الرابط: https://myproj.netlify.app أو من خلال Domain settings وإختيار التالي :

أولا يجب عليك تحديد شكل الموقع عند كل شاشة معينة تريدها . فيجب عليك تحديد كل قسم بشكل منفصل وتنظر كيف تريد أن تجلعه يظهر في الشاشات المختلفة . وبناء عليه يمكنك إستخدام ال Media query في css لتحديد تنفيذ الكود بداخله على أحجام شاشات معينة . فمثلا لجعل أول قسم "hero" يظهر متجاوب نجعل هنا الإتجاه الخاص ب flex أعمدة وليس صفوف ونرى أى حجم الشاشة الصحيح هو970px هكذا : @media (max-width: 970px) { .hero{ flex-direction: column; gap: 2rem; } .hero .text{ text-align: center; } } الآن أنظر كيف تغير التنسيق للشاشات الأصغر من 970px : ولجعل القسم الأخير أيضا متجاوب يمكنك إضافة الكود التالي : @media (max-width: 970px) { .skills { gap: 2rem; flex-wrap: wrap; } .skills .text{ width: 100%; } } وستجد الآن يظهر بشكل أفضل : وهكذا بناء على التصميم الذي لديك يمكنك تحديد كل قسم وأنظر كيف تريده أن يظهر وحينها تضع التنسيقات بداخل ال Media query . وإليك الدرس التالي لكيفية التعامل مع ال Media query :

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

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

الدورة تبدأ أولا بتدريس أساسيات البرمجة من خلال لغة بايثون لهذا هي لا تتطلب أى خبرة مسبقة . ولو ذهبت إلى صفحة تفاصيل الدورة ستجد تلك الملحوظة : لمن هذه الدورة؟ لمن يرغب بتعلم الذكاء الاصطناعي وتحليل البيانات من الصفر لمن يريد التعامل مع LLMs مثل GPT من OpenAI و LLaMA وغيرها لمن يعرف أساسيات الذكاء الاصطناعي ويريد التعمق بالأمور المتقدمة فيه لمن يعرف أي لغة برمجة ويرغب بتوسعة مجاله البرمجي وتعلم مهارات جديدة لمن يرغب بتطوير ودمج تقنيات الذكاء الاصطناعي مع مشروعه الذي يعمل عليه أى ستجد أنه يتم تدريس تحليل البيانات من الصفر . لهذا إذا لم ترد الإعتماد على Excel وأردت العمل مباشرة من خلال لغة البرمجة ومكتبات تحليل البيانات ورسم البيانات في رسومات بيانية فهذه الدورة مناسبة لك بالفعل. وهذه الدورة تعتمد على تدريس عدة مجالات وهذا من مميزات الأكاديمية حيث يممكنك دراسة المجال الذي تريده فلو أردت دراسة الذكاء الإصطناعي يمكنك مشاهدة مسارات الذكاء الإصطناعي ولو أردت تحليل البيانات فيمكنك دراسة مسارات تحليل البيانات فقط . ولو أردت تعلم الآلة يمكنك طبعا دراست مساراتها فقط . ولكن بالطبع لتحقيق أقصى إستفادة يمكنك دراسة الدورة بأكملها . أما بخصوص السؤال الثاني فإن تحليل البيانات هنا في هذه الدورة سيعتمد على البرمجة وإستخدام الأدوات والمكتبات البرمجية لهذا هذا الأمر يعتمد عليك . إذا أردت تعلم البرمجة فالدورة مناسبة لك وإذا لم ترد تعلمها فلن تستطيع بالطبع إستخدام أدوات ومكتبات التحليل .

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

إن ال addEventListener هي دالة تستخدم لإضافة مستمع (Listener) للأحداث (events) مثل النقر على زر أو تحريك الفأرة أو الضغط على لوحة المفاتيح أو إرسال نموذج والأحداث الأخرى في جافاسكريبت. وصيغتها : element.addEventListener("event", function) حيث تستقبل أولا إسم الحدث الذي تريد الإستماع له . والدالة التي تريد تنفيذها عن حدوث هذا الحدث. const button = document.getElementById("btn"); button.addEventListener("click", function() { alert("تم النقر على الزر!"); }); فلاحظ في المثال السابق قمنا بالإستماع للحدث click ونريد تنفيذ الدالة وهي إظهار رسالة عند الضغط على الزر . نأتي الآن إلى preventDefault وهى هي دالة تستخدم داخل الحدث (event) لمنع السلوك الافتراضي الذي يحدث تلقائيا عند تنفيذ هذا الحدث. فمثلا عند الضغط على submit في النموذج form يتم أولا تنفيذ الحدث submit وبعدها يتم إرسال النموذج وإعادة تحديث الصفحة . فماذا لو لم نرد إرسال النموذج مباشرة ؟ أى لو أردنا تنفيذ تحقيق للبيانات كما تريد أنت هنا ؟ هنا يجب إستخدام preventDefault لمنع هذا السلوك الإفتراضي . <form id="form"> <input type="text" name="name" /> <button type="submit">إرسال</button> </form> <script> const form = document.getElementById("form"); form.addEventListener("submit", function(e) { e.preventDefault(); //يمنع إعادة تحميل الصفحة alert("تم إرسال النموذج!"); }); </script> يمكنك تجربة الكود السابقة مع حذف سطر e.preventDefault() ستجد أن الصفحة يتم تحديثها عكس عند إضافة هذا السطر ومنع هذا الحدث الإفتراضي. وإليك الدرس التالي لمزيد من التفاصيل :

لا يمكنك استخدام linear-gradient مباشرة كلون لنص الوسم <a> أو لأي نص آخر باستخدام خاصية color. وذلك لأنها لا تدعم التدرجات اللونية (gradients). ولكن هناك طريقة للتحايل على ذلك حيث يمكنك استخدامها لعمل تدرج لوني للنص سواء داخل الوسم <a> أو غيره باستخدام خاصيتي background و -webkit-background-clip. <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <style> a { font-size: 24px; font-weight: bold; background: linear-gradient(90deg, #f00, #00f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; } </style> </head> <body> <a href="#">gradiant color text</a> </body> </html> حيث background تحدد تدرج اللون الذي نريده . و -webkit-background-clip: text يجعل الخلفية تقتصر على النص فقط . و -webkit-text-fill-color: transparent تجعل النص شفاف بحيث يظهر التدرج.

نعم هناك بالفعل العديد من الأدوات والمشاريع مفتوحة المصدر والتي تعتمد على الذكاء الاصطناعي في مجال الأمن السيبراني وتغطي مجالات واسعة من الاستخدامات مثل اختبار الاختراق التلقائي و الحماية ضد الهجمات و تحليل الثغرات وتقييم المخاطر للنظام. مثلا يوجد : Adversarial Robustness Toolbox (ART) وهي مكتبة بايثون تركز على حماية نماذج الذكاء الاصطناعي من الهجمات العدائية. Reaper وه إطار عمل مفتوح المصدر لاختبار أمان التطبيقات (Application Security Testing) بشكل آلي تماما. TARS وهو مشروع مفتوح المصدر يهدف إلى أتمتة أجزاء من اختبار الاختراق باستخدام وكلاء ذكاء اصطناعي. ويوجد العديد من الأدوات الأخرى مثل DeepExploit و YARA وغيرها من الأدوات الأخرى.

أولا لنعرف ما هو MCP : إن Model Context Protocol (MCP) هو بروتوكول أو نظام تنظيمي يتم إستخدامه لتغذية نموذج الذكاء الاصطناعي بمحتوى خارجي ديناميكي ومنظم حتى يتمكن النموذج من فهم السياق الكامل المطلوب بدقة. حيث تيح لنماذج ال LLMs التفاعل مع الأدوات الخارجية مثل قواعد البيانات والخدمات بطريقة موحدة. ويمكن اعتبار MCP مثل منفذ USB ل AI حيث يوفر طريقة موحدة لربط نماذج ال AI بمختلف مصادر البيانات والأدوات المتاحة. إذا ال MCP يسمح لك بتحديد ما الذي يجب أن يعرفه النموذج قبل أن يبدأ في التفاعل معك بطريقة منظمة، وقابلة للتحكم وقابلة للتوسعة. أما لماذا إنتشر بسرعه فهذا بسبب : أن ال MCP يسمح لك بالتحكم في ما يراه ويعرفه النموذج تكامل أفضل في التطبيقات فمثلا في copilots داخل أدوات مثل Notion أو Slack أو GitHub يجب أن يفهم النموذج البيئة قبل أن يتفاعل مع المستخدم . وإن ال MCP ليس بديلا لل APIs بل هو نظام يستخدم داخل التطبيقات أو داخل APIs لتنظيم البيانات المرسلة للنموذج والMCP قد يكون جزءا من الطلب request إلى ال API مثل /chat/completions.

يوجد العديد من المنصات التي توفر مقالات وأخبار أخر التطورات في مجال الذكاء الإصطناعي . فللمصادر العالمية وهي باللغة الإنجليزية : توجد MIT Technology Review و TechCrunch AI وVentureBeat AI تنشر باستمرار مقالات وتحليلات عن أحدث التطورات في الذكاء الاصطناعي. وأيضا توجد منصة Hugging Face حيث تحتوي على مدونة وموارد تعليمية عن نماذج الذكاء الاصطناعي، وهي مثالية لمتابعة التطورات التقنية. يمكنك أيضا متابعة الخبراء والمتخصصين والشركات على منصة LinkedIn حيث يتم نشر تحديثات ومقالات بإستمرار وستجد مناقشات جيدة بخصوص هذا الأمر .

وعليكم السلام ورحمة الله وبركاته. أعتقد أنك تسأل عن مواقع لتعلم مهارة حل المشكلات . وتلك المواقع تقوم بتقديم العديد من الأسئلة لجميع المستويات المختلفة ويمكنك حل تلك المسائل بأى لغة برمجة ويمكنك حلها ب java script دون أى مشكلة . ومن تلك المواقع : Hackerrank و LeetCode: هذه المواقع تقدم تحديات برمجية تمكنك من تطبيق المفاهيم المختلفة بما في ذلك الأساسيات و الدوال، وتقديم الحلول الخاصة بك لهذه التحديات ولكن يفضل الدخول في المستويات المبتدئة. PyBites: يوفر PyBites تحديات يومية وأسبوعية لتطوير مهاراتك في Python. codeforces : وهو من المواقع الشهيرة جدا التى تقوم بعمل مسابقات عالمية يوميا وإسبوعيا حيث تكون تلك المسابقات عبارة عن مشاكل ويجب حلها عن طريق البرمجة وتختلف صعوبة المسابقات من مسابقة إلى أخرى و أيضا يعطيك نقاط عند دخول كل مسابقة وحل المشاكل لتتابع تقيمك وسط العديد من المبرمجين حول العالم . Codewars : يقدم تحديات برمجية مصنفة بمستويات مختلفة تتيح لك تطوير مهاراتك بشكل تدريجي. ويمكنك قراءة التالي لمزيد من التفاصيل : أما بخصوص المدونة الخاصة ب hsoub فأعتقد أنك تقصد حسوب io ويمكنك زيارتها من خلال الرابط التالي : https://io.hsoub.com/

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

ما هو البرنامج الذي تعملين عليه ؟ عموما لحفظ أى تعديلات يمكنك الضغط على زر CTRL + S لحفظ الأكواد والتعديلات . ولو كنتِ تعملين على vs code يمكنك تفعيل الحفظ التلقائي من خلال قائمة file وإختيار التالي :

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

نعم، استخدام FormData هو الطريقة الأفضل والمعتمدة لإرسال ملفات وصور من الواجهة الأمامية إلى الخادم. أيضا السؤال غير واضح قليلا . هل عند تحديد ملف يتم رفعه مباشرة أم تقوم برفع الملف بمجرد الحذف ؟ هذا الأمر يعتمد على ما تريد تنفيذه ولكن أنا أرى من الأفضل تحديد الملفات وبعد ذلك يوجد زر لرفعها وليس كل ملف يتم تحديده يتم إرساله إلى الخادم وذلك لعدم الضغط وبطئ الخادم وأيضا لو أردت حفظ بيانات مع الصور هذه الطريقة أفضل لأنه سيتم إرسال جميع البيانات مع الصور في formData. ولكن تلك الطريقة لن تنفع إذا كانت الملفات كبيرة وكثيرة فالأفضل لو الملفات كثيرة يمكنك جعل كل تحديد للملف يتم رفعه ولو قام بإلغاءه يمكنك حذفه من الخادم أيضا . وأنصحك إذا أردت شئ متقدم يمكنك إستخدام مكتبات جافاسكريبت والتي توفر لك ذلك ومن تلك المكتبات هي مكتبة Dropzone.js والتي تساعدك في رفع الملفات من خلال إرسال الطلبات في الخلفية وتوفر لك رفع الصور مرة واحدة أو رفع كل صورة بمجرد تحديدها وأيضا توجد أحداث عند حذف ملف ما يمكنك إستخدامها لحذف الصور من الخادم. أما بخصوص الفرق بين fetch و XMLHttpRequest و Ajax . فإن XMLHttpRequest هي واجهة قديمة لإرسال طلبات HTTP لكن من الصعب إرسال ال API والأفضل لك تجنبها. أما fetch فهي واجهة حديثة لإرسال الطلبات وهي أسهل وأوضح ويفضل استخدامها. أما Ajax (jQuery) فهى اختصار ل "Asynchronous JavaScript and XML"، ويستخدم مع مكتبة jQuery وهي قديمة ولكنها سهلة إذا كنت تستخدم jQuery بالفعل. وإليك تفاصيل أكثر حول الفروقات بينهم:

نعم بالفعل يجب عليك تسجيل الدخول بالحساب الذي قمت منه بشراء الدورة والذي تقوم بإرسال السؤال الحالي منه . إذا نسيت كلمة المرور فيمكنك إعادة تعينها . ولكن أولا هل قمت بالدخول بحساب جوجل مباشرة أم قمت بإنشاء حساب عادي ؟ إذا كنت قد قمت بالدخول من خلال حساب جوجل يرجى الذهاب إلى الرابط التالي على حاسوبك : https://accounts.hsoub.com/login?source=academy&locale=ar ومن ثم إختيار الدخول بإستخدام جوجل وسيتم تسجيل دخولك بنجاح. أما إذا كنت قد قمت بتسجيل حساب من خلال بريد وكلمة المرور فيجب أن يكون لديك وصول إلى بريدك ومن ثم الدخول على الرابط التالي وكتابة بريدك الإلكتروني: https://accounts.hsoub.com/reset_password وسيتم إرساله بريد إلى بريدك الإلكتروني فيه رابط لإعادة تعين كلمة المرور يرجى تفقد بريدك الإلتكروني لهذا الأمر. بعد تعين كلمة المرور يمكنك تسجيل الدخول من الرابط الأول الذي أرفقته وكتابة بريدك وكملة السر الجديدة التي أنشأتها.

وعليكم السلام ورحمة الله وبركاته. لا داعي للقلق بعد إتمام الشراء من الممكن أن يأخذ بعض الوقت لحين ظهور قسم دوراتي في التبويبات في الأعلى . إذا لم تظهر بمفردها من فضلك يرجى محادثة مركز المساعدة من خلال الرابط التالي : https://support.academy.hsoub.com/conversations وسيقومون بمساعدتك وحل المشكلة لك إن شاء الله.

نعم في JavaScript يوجد مفهوم مشابه للخصائص مثل private و public و لكن تطبيقه وطريقة التنفيذ تختلف كثيرا عن اللغات الأخرى مثل Java و PHP وغيرها. قبل ES2022 لم يكن هناك أى إمكانية لجعل الخصائص للصنف خاصة (private) ولكن منذ ES2022 أصبحت JavaScript تدعمها . class Person { #name; // private constructor(name) { this.#name = name; } getName() { return this.#name; } } const p = new Person("Ali"); console.log(p.getName()); console.log(p.#name); لاحظ في المثال السابق لجعل الخاصية private نقوم بوضع علامة # قبلها مما يسمح لنا بإخفائها. وستجد أن أخر سطر في يعطيك رسالة خطأ أن #name هو private. أما protected فليست مدعومة حتى الآن.

هل يمكنك توضيح الدوال التي تقصدها ولو بمثال في الكود ؟ حيث الداول تلك موجودة في قاعدة البيانات mongodb وفي javascript ولكل دالة إستخدامها بناء على مكان إستخدامها . نعم الإستخدام يختلف بناء على المكان الذي تستخدمهم فيه يرجى التوضيح أكثر ما اللغة التي تقصدها أو قاعدة البيانات. عموما الدالة find تستخدم للبحث عن أول عنصر في البيانات . فبناء على الشرط الذي يمرر لها ستعيد أو عنصر يطابق هذا الشرط وإلا ستعيد undifined. const products = [ { id: 1, name: 'لابتوب', price: 1200 }, { id: 2, name: 'ماوس', price: 25 }, { id: 3, name: 'كيبورد', price: 75 }, { id: 4, name: 'شاشة', price: 300 }, { id: 5, name: 'سماعات', price: 15 } ]; const cheapProduct = products.find(product => product.price < 20); console.log(cheapProduct); // الناتج { id: 5, name: 'سماعات', price: 15 } const nonExistentProduct = products.find(product => product.price > 5000); console.log(nonExistentProduct); // الناتج undefined (لأنه لا يوجد منتج سعره أكبر من 5000) كما في المثال السابق في أول جزء سيتم إعادة أول منتج سعره أقل من 20 . وفي ثاني جزء لن يتم إعادة شئ لأنه لا يوجد منتج سعره أكبر من 5000. أم الدالة findIndex تستخدم للبحث عن أول فهرس (index) في المصفوفة . حيث تعيد أول index للعنصر الذي يوافق الشرط بدلا من إعادة العنصر نفسه فيمكننا إستبدال المثال السابق بالتالي : const products = [ { id: 1, name: 'لابتوب', price: 1200 }, { id: 2, name: 'ماوس', price: 25 }, { id: 3, name: 'كيبورد', price: 75 }, { id: 4, name: 'شاشة', price: 300 }, { id: 5, name: 'سماعات', price: 15 } ]; const cheapProductIndex = products.findIndex(product => product.price < 20); console.log(cheapProductIndex); // الناتج 4 const nonExistentProductIndex = products.findIndex(product => product.price > 5000); console.log(nonExistentProductIndex); // -1 لاحظ في الجزء الأول تم إعادة 4 وهو الفهرس الخاص بالعنصر الذي سعره أقل من 20 . وفي الجزء الثاني تم إعادة -1 لأنه لم يتم العثور على ما نريد . حيث findIndex تعيد -1 إذا لم نجد ما نعثر عليه. أما findOne تستخدم في قواعد البيانات لتعيد أول عنصر في قاعدة البيانات يحقق الشرط . db.users.findOne({ name: 'أحمد' }) فمثلا هنا سيعيد أو قيمة في قاعدة البيانات لها إسم name يساوي "أحمد".

يوجد العديد من الخدمات التي توفر لك طرق إرسال رسائل المصادقة من خلال ال SMS . أولا Firebase Authentication : تدعم مباشرة إرسال رسائل المصادقة والتأكد من خلالها عن طريق SMS وأيضا تدعم العمل على الهواتف والويب من خلال ال SDKs التي توفرها وتدعم مباشرة Expo دون الحاجة إلى عمل Eject لها . وأيضا ستجد شروحات كثيرة لها على الإنترنت إذا حدثت مشكلة أو أردت المساعدة في شئ ما. من عيوبها : أن أسعار الرسائل تعتمد على مزود SMS التي ستستخدمه ومن الممكن أن تكون مكلفة في بعض الأوقات. وأيضا لا تدعم إرسال الرسائل للدول المحظورة من google. أيضا يوجد Twilio وهي ممتازة لإرسال الرسائل وتستطيع تحديد رقم الهاتف الذي تريد إرسال الرسائل منه وأيضا يمكنك جعل الهاتف الذي يرسل الرسائل بإسم موقعك أو الخدمه ولكن هذا الأمر يحتاج إلى تقديم أوراق إثبات . وتتم من خلال إرسال APIS بالرسائل التي تريد إرسالها ولكن سيتوجب عليك كتابة منطق الواجهة الخلفية بنفسك من خلال التحقق من الأكواد وإنشاءها. أيضا يوجد Auth0 وهي خدمة شاملة للمصادقة وتدعم رقم الهاتف باستخدام Twilio أو أى مزود خدمة SMS آخر . ولكن عيوبها أنها مرتفعة السعر وأغلى من Firebase وتحتاج إلى إعدادات أكثر . ولكن يوجد جزء مجاني منها ولكنها محدود أى لك عدد قليل من الرسائل . في النهاية لو أردت سهولة وسرعة في الدمج في المشروع ودعم لك يمكنك استخدام Firebase Auth. أما إذا أردت تحكم كامل ومرونة في الكود لديك وأنك تقوم بإنشاء كل شئ بنفسك فيمكنك استخدم Twilio.

جميع المسارات يفضل دراستها بأكملها ويمكنك تجاهل أول ثلاث مسارات وهم "مدخل إلى علوم الحاسوب" و "أساسيات البرمجة" و "أنظمة التشغيل ونظام لينكس" . أما باقي المسارات فهي مهمة لك في مجال البرمجة عموما .

هل تقصد أنك أنشأت مسارين ؟ أى لإضافة المستخدم مسار ولإضافة الصور مسار ؟ إذا كان الأمر كذلك فهذا ليس جيدا يمكنك جعلهم مسار واحد بما أنه يتم إرسال البيانات من نموذج بيانات واحد أما لو كان هناك نموذجين يمكنك أولا إضافة المستخدم وبعد ذلك عند تحميل الصفحة للنموذج الثاني تقوم بوضع id المستخدم في action الخاص بالنموذج form . أما بخصوص التخزين في قاعدة البيانات فأفضل طريقة هي من خلال العلاقات relations في laravel . ففي نموذج User نضيف العلاقة التالية : class User extends Model { public function images() { return $this->hasMany(Image::class, 'fk_user_id'); } } وفي نموذج Image نضيف العلاقة التالية : class Image extends Model { public function user() { return $this->belongsTo(User::class, 'fk_user_id'); } } الآن عند إضافة المستخدم يمكنك ربط الصورة مباشرة به من خلال العلاقة التي أنشأناها هكذا : $user = User::create([ 'name' => 'user_name', 'email' => 'email@email.com', 'password' => Hash::make('password') ]); $path = $request->file('image')->store('user_images'); $user->images()->create([ 'path' => $path ]); وفي السطر الأخير هنا يمكنك إضافة بيانات الصورة التي تريد حفظها في قاعدة البيانات وسيتم ربطها مباشرة بهذا المستخدم.

وعليكم السلام ورحمة الله وبركاته. أولا إن في دروة تطوير واجهات المستخدم يتم شرح أساسيات Html و Css وJava Script و jquery و bootstrap والعديد من التقنيات الأخرى مثل webpack وغيرها حيث تؤهلك الدورة لتكون مطور واجهات مستخدم لمواقع ثابته حيث يمكنك تحويل اي تصميم الى موقع ثابت بإستخدام html و css و js . و jquery هنا يساعدك كثيرا في التلاعب بمحتوي الصفحات الثابته بدلا من إستخدام أطر العمل مثل react والتي تقوم ببناء مشاريع واجهات أمامية (frontend) كاملة. وبالنسبة للمبتدأين في مجال تطوير الواجهات الأمامية فإنه من الصعب أن يبدأو بتعلم المكتبات مباشرة مثل react دون تعلم الأساسيات حيث سيجدوا الكثير من الصعوبة في ذلك و أيضا هناك من يريد فقط أن يقوم بإنشاء مواقع ثابته و ثيمات دون التطرق للمكتبات المعقدة مثل react ولذلك هنا في الأكاديمية تم فصل ذلك الأمر إلى دورتين دورة تطوير واجهات المستخدم و دورة تطوير التطبيقات باستخدام JavaScript . لهذا الأمر يعتمد عليك يمكنك الإشتراك في دورة تطوير التطبيقات باستخدام JavaScript و مشاهدة أول مسار من دورة تطوير واجهات المستخدم الخاص بأساسيات Html و Css وJava Script و jquery وهذا سيكفي للبدأ في هذا الأمر . ولكن لو أردت تطبيق مشاريع عملية في التصميم وأيضا تعلم boostrap و webpack فيفضل الإشتراك في دورة تطوير واجهات المستخدم . وحاليا يوجد عرض دورتين بسعر دورة واحدة لهذا يمكنك إغتنام تلك الفرصة والإشتراك في هذا العرض وإختيار الدورتين معا .