Mustafa Suleiman

يجب أولاً إنشاء ملف باسم:
.gitignore وذلك في مجلد المشروع الرئيسي، ووضع التالي به:
.env .envrc .venv env/ venv/ ENV/ env.bak/ venv.bak/ .python-version Pipfile.lock .idea/ __pycache__/ # Distribution / packaging .Python build/ develop-eggs/ dist/ downloads/ eggs/ .eggs/ lib/ lib64/ parts/ sdist/ var/ wheels/ share/python-wheels/ *.egg-info/ .installed.cfg *.egg MANIFEST وذلك لتجنب رفع أية مجلدات أو ملفات لا علاقة لها بالكود مثل مجلد env الخاص بالبيئة الإفتراضية.
ثم:
git init لإنشاء مستودع محلي في مجلد المشروع الرئيسي.
ثم تنفيذ الأوامر التالية بالترتيب في مجلد المشروع الرئيسي لرفع المشروع:
git add . // ثم git commit -m "first commit" // ثم git branch -M main // ثم git remote add origin رابط المستودع على جيت هب هنا // ثم git push -u origin main لاحظي النقطة في  الأمر . git add  تعني إضافة جميع محتويات المجلد الرئيسي تمهيدًا لرفعها للمستودع البعيد على جيت هب.
 

بالنسبة لملفات csv لعرضها يجب الضغط على رابط view raw
بالنسبة لملفات jupyter فالمشكلة عند حفظك للملف على جهازك، تم تخزين معلومات عن الـ Widgets بطريقة قديمة أو غير مكتملة، ونظام العرض في GitHub يتوقع وجود معلومة محددة اسمها state أي الحالة لكل Widget، ولكنه لم يجدها.
أسهل حل قومي بفتحها على حاسوبك من خلال VS Code، ثم من القائمة العلوية، اختاري Kernel ثم اختاري Restart and Clear Output لإعادة التشغيل ومسح المخرجات التي تظهر نتيجة تشغيل الخلايا.
واحفظي الملف مرة أخرى، ورفع الملف الجديد إلى GitHub مرة أخرى:
git add . git commit "clearing Jupyter Notebook output" git push  

لا مشكلة في البيانات الاصطناعية كبداية، ويجب أن تكون منطقية تشبه البيانات التي تتوقع جمعها مستقبلاً قدر الإمكان، وبالطبع للتجربة ولن تعتمد على أرقام الدقة لاتخاذ قرارات نهائية، لأنك بنيت البيانات على افتراضاتك الخاصة، فالهدف منها هو فقط بناء النظام، وعندما تجمع بيانات حقيقية كافية، ستقوم بإعادة تدريب النموذج عليها.
عامًة الـ Synthetic Data مفيدة لأنها تسمح ببناء وتجربة pipeline كامل للتعلم الآلي، من معالجة البيانات، إلى التدريب، إلى التكامل مع التطبيق، أيضًا تكتشف المشاكل التقنية في وقت مبكر.
أول خطوة هي تحديد الـ features بالتفكير في العوامل التي تؤثر على المسافة التي يقطعها المستخدم، وهي:
معلومات المستخدم: العمر، نوع الوظيفة (مندوب مبيعات، موظف مكتبي، يعمل من المنزل)، هل لديه عائلة. معلومات السيارة: سنة الصنع، نوع السيارة (صغيرة، SUV)، كفاءة الوقود. معلومات زمنية: يوم الأسبوع (1-7)، هل هو عطلة نهاية أسبوع (نعم/لا)، الشهر. معلومات سلوكية إن أمكن: مثل متوسط المسافة في الأسابيع السابقة، وتلك ميزة لها ثقل. ثم إنشاء صيغة وهمية لحساب المسافة، ولا يجب أن تكون مثالية، بل فقط لإنشاء بيانات ذات هيكل، ولتكن:
distance = base_distance + job_effect + weekend_effect + previous_dist_effect + noise حيث base_distance  هي مسافة أساسية يومية، مثلاً 20 كم، وjob_effect  تعني تأثير نوع الوظيف، فمندوب مبيعات سيقطع 50كم أو يزيد، وموظف مكتبي +15 كم، يعمل من المنزل -10 كم.
والـ weekend_effect خاص بالعطلة، حيث ستزيد المسافة للرحلات أو تقل لعدم الذهاب للعمل -15 كم.
والـ noise خاصة بإضافة قيمة عشوائية صغيرة لتبدو البيانات واقعية أكثر.
ثم توظيف ما سبق في الكود كالتالي:
import pandas as pd import numpy as np num_samples = 5000 job_types = ['sales', 'office', 'remote', 'student'] data = { 'age': np.random.randint(18, 65, num_samples), 'car_model_year': np.random.randint(2010, 2024, num_samples), 'job_type': np.random.choice(job_types, num_samples), 'is_weekend': np.random.choice([0, 1], num_samples, p=[0.71, 0.29]), 'previous_week_distance': np.random.normal(loc=150, scale=50, size=num_samples) } df = pd.DataFrame(data) def calculate_distance(row): base_distance = 20 if row['job_type'] == 'sales': job_effect = 40 elif row['job_type'] == 'office': job_effect = 15 else: job_effect = -10 weekend_effect = -15 if not row['is_weekend'] else 5 previous_dist_effect = row['previous_week_distance'] * 0.5 noise = np.random.normal(0, 10) distance = base_distance + job_effect + weekend_effect + previous_dist_effect + noise return max(0, distance) df['weekly_distance'] = df.apply(calculate_distance, axis=1) print(df.head()) df.to_csv('synthetic_car_data.csv', index=False) وبخصوص:
الخوارزمية لا بأس بها كنقطة بداية، لكونها سهلة الفهم والتنفيذ، والتدريب من خلال لا يتطلب موارد كبيرة، وبسهولة تستطيع معرفة كيف تؤثر كل ميزة مثل العمر على التنبؤ.
بالتالي سرعة في التأكد من أن كل شيء يعمل من تدفق البيانات إلى التكامل قبل الانتقال إلى نماذج معقدة أكثر.
وبالطبع على المدى الطويل ستحتاج إلى خوارزميات أفضل، فسلوك القيادة في الواقع أكثر تعقيدًا من علاقة خطية بسيطة، لوجود تفاعلات بين الميزات وعلاقات غير خطية.
فتأثير العمر ربما لا يكون خطيًا، فقد يقود الشباب وكبار السن لمسافات أقل من الأشخاص في منتصف العمر، ومندوب المبيعات في عطلة نهاية الأسبوع ربما يقود مسافة مختلفة تمامًا عن مندوب المبيعات خلال أيام العمل.
لذا ستحتاج إلى LightGBM أو XGBoost أو Random Forest، وذلك عند توفر بيانات عدة آلاف من المستخدمين على مدى بضعة أشهر، ثم قارن النتائج.
لكن لو التنبؤ يعتمد بشكل كبير على تسلسل المسافات السابقة، أي التنبؤ بمسافة الأسبوع الحالي بناءًا على آخر 10 أسابيع، فستحتاج إلى LSTM.
من خلال  TensorFlow Lite، وهناك طريقتين الأولى لو استخدمت scikit-learn، ستحتاج إلى أداة لتحويله إلى صيغة متوافقة مثل ONNX ثم إلى TFLite أو إعادة تدريب النموذج باستخدام TensorFlow أو Keras وهو الأسهل.
ثم أنشئ مجلد assets في مجلد app/src/main/ في مشروع أندرويد ستوديو، وانسخ ملف model.tflite إلى المجلد، وفي ملف build.gradle (Module: app)، أضف مكتبة TensorFlow Lite.
وستحتاج إلى تحميل النموذج من مجلد assets واستخدام Interpreter لتشغيله، من خلال كتابة كود Java أو Kotlin

عليك بتوجيه الأداة لاستخدام Intl.DateTimeFormat API المتاحة في المتصفح، وبمثال بسيط ستكتب السكريبت التالي:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="dual-calendar-container"> <p class="gregorian-date"></p> <p class="hijri-date"></p> </div> <script> document.addEventListener('DOMContentLoaded', function() { const today = new Date(); const gregorianOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; const gregorianDateFormatter = new Intl.DateTimeFormat('ar-EG', gregorianOptions); const gregorianDateString = gregorianDateFormatter.format(today); const hijriOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }; const hijriDateFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic-umalqura', hijriOptions); const hijriDateString = hijriDateFormatter.format(today); const container = document.getElementById('dual-calendar-container'); if (container) { container.querySelector('.gregorian-date').textContent = `الميلادي: ${gregorianDateString}`; container.querySelector('.hijri-date').textContent = `الهجري: ${hijriDateString}`; } }); </script> </body> </html>  

الدورة ليس لها علاقة بالتوثيق، فهي متاحة لك مدى الحياة، وتستطيع تعديل الاسم.
 

تلخيص كامل محتوى الدورة أمر صعب، ذلك كان يجب أن يتم أثناء دراستك لها بكتابة النقاط الهامة في الدروس لتكون مرجع لك، وبشكل عام غرض الدورة بشكل أساسي  تزويدك بالمهارات اللازمة لإنشاء واجهات مستخدم تفاعلية، جذابة، ومتجاوبة لمختلف أنواع المواقع والتطبيقات. 
لديك موسوعة حسوب كمرجع لك، وأيضًا مقالات البرمجة التي بالأكاديمية.
وبشكل عام، حجر الأساس هي لغة HTML والتي من خلالها نبني هيكل المحتوى، حيث يجب أن تكون قادر على بناء هيكل سليم ومنطقي لصفحات الويب، وتذكر أهمية العناصر الدلالية Semantic HTML لتنظيم المحتوى وتحسين قابلية الوصول ومحركات البحث، وفكر في كيف استخدمت <div>, <nav>, <header>, <footer>, <article>, <section> وغيرها في المشاريع المختلفة.
ثم CSS، حيث درسنا الأساسيات وهي المحددات، خصائص التنسيق (ألوان، خطوط، هوامش، مسافات داخلية)، ونموذج الصندوق Box Model.
ثم التخطيط Layout وفهمك لـ Flexbox و Grid ضروري لبناء تخطيطات معقدة ومتجاوبة، وتذكر كيف استخدمتها في بناء الصفحات الرئيسية، القوائم، وتوزيع العناصر.
ثم Sass لمعالجة التنسيقات المتقدمة، وتم تقديمه في مشروع المتجر الإلكتروني، مما يعني أنك يجب أن تفهم فوائده مثل المتغيرات، التضمين، المكسنات والوراثة وغيرهم، وكيف يساعد في كتابة CSS أكثر تنظيمًا، خاصة في المشاريع الكبيرة.
ثم أساسيات JS ودرسنا المتغيرات، الدوال، التحكم في DOM للوصول للعناصر وتعديلها، والتعامل مع الأحداث Events.
ثم درسنا jQuery لتسهيل كتابة كود JS، وعلى الرغم من أن الاتجاه الحديث يقلل من الاعتماد على تلك المكتبة، إلا أن الدورة غطتها لأنّ هناك مشاريع قائمة تعتمد عليها بالفعل في الواقع العملي، وتذكر كيف تُسهل jQuery تحديد العناصر، التلاعب بالـ DOM، وإضافة التأثيرات والتعامل مع AJAX.
ثم انتقلنا للتصميم المتجاوب Responsive Design، وذلك مفهوم محوري في الدورة، حيث يجب أن تفهم كيف تجعل واجهاتك تعمل بشكل جيد على مختلف أحجام الشاشات (موبايل، تابلت، ديسكتوب)، وتقنيات مثل Media Queries، واستخدام وحدات القياس النسبية (%, vw, vh)، وتخطيطات Bootstrap المرنة هي كلمة السر لذلك وهو النظام الشبكي Grid System.
للتذكير Bootstrap يوفر لك كلاسات مثل .col-sm-12 للشاشات الصغيرة، .col-md-6 للشاشات المتوسطة، .col-lg-4 للشاشات الكبيرة لتحقيق ذلك بسهولة بدون كتابة Media Queries معقدة بنفسك لكل عنصر.
أي كلاسات sm, md, lg هي الخاصة بمقاسات الشاشات.
وللعلم نظام الشبكة يجب استيعابه، أي فهم كيفية تقسيم الصفحة إلى صفوف وأعمدة container, row, col-* فهو أساس بناء تخطيطات متجاوبة بسرعة.
أيضًا المكونات الجاهزة من أزرار، قوائم تنقل، بطاقات، نماذج، إلخ، تذكر كيف استخدمتها لتوفير الوقت والجهد وضمان مظهر متناسق.
والترقية إلى Bootstrap 5، عليك استيعاب الفروقات الأساسية وكيفية الانتقال بين الإصدارات.
ثم قمنا بدراسة Hugo وهو إطار مولد للمواقع الساكنة static، واستخدمناه لبناء مواقع ثابتة لشركة، شخصية، مدونة بسيطة.
ومن ميزاته السرعة، الأمان، سهولة النشر، وعليك استيعاب معمارية القوالب Templates به وفهم كيفية استخدام وتعديل القوالب في Hugo.
ثم درسنا إظهار بيانات من API داخل القالب في مشروع الموقع الإخباري، وذلك للربط بين عالم المواقع الساكنة والمحتوى الديناميكي، للتوضيح أن مواقع الويب هي أكثر من مجرد صفحات HTML ثابتة، وستحتاج إلى مراجعة مفهوم الـ API:
والآن ما عليك فعله بعد المراجعة هو التطبيق العملي فهو الأهم حيث يجب تخصيص 60% من وقت الدراسة للتطبيق العملي ولا تشتت نفسك وتنجرف وراء المشاهدة والقراءة فقط وذلك يُعرف باسم Tutorial Hell، وبعد مدة زد النسبة إلى 70-80% الفكرة هي أن يكون الجزء الأكبر من وقتك مخصصًا للكتابة الفعلية للكود، بناء المشاريع، وحل المشكلات.
تستطيع إعادة بناء مشاريع الدورة بنفسك من الصفر دون النظر إلى الحل إلا عند الضرورة القصوى ،ويا حبذا لو قمت بالتعديل عليها وإضافة ميزات جديدة.
ثم البدء في مشاريع شخصية جديدة حتى لو كانت بسيطة، لتطبيق ما تعلمته بأفكار وتطبيقات مختلفة، أي حاول بناء صفحة بسيطة من الصفر باستخدام HTML, CSS, و JS.
وجرب استخدام مكونات Bootstrap لإنشاء تخطيط سريع، وفكر في كيفية تطبيق مبادئ التصميم المتجاوب على أي واجهة تراها.
بشكل مُتدرج ستحتاج إلى القيام بما تم ذكره هنا:
قم ببناء جزء صغير من الموقع باستخدام html و CSS وأنصحك بتنفيذ التحديات على موقع Frontend mentor مع تحديد التمارين الخاصة بالمستوى المبتدئ newbie ثم  junior ثم تستطيع زيادة الصعوبة فيما بعد إلى intermediate، وإليك التمارين مباشرًة:
https://www.frontendmentor.io/challenges?difficulty=1&type=free%2Cfree-plus اختر أي تمرين تراه مناسب ثم حاول تنفيذه، وفي حال واجهتك مشكلة تستطيع الاستفسار في قسم أسئلة البرمجة، ومع الوقت والإلتزام والصبر سيتحسن مستواك وتستطيع بعدها تنفيذ تصميم كامل.
ثم التمارين التالية:
ثم بعد ذلك تدرج في الصعوبة نحو إنشاء موقع بالكامل، ثم تدرج في الصعوبة نحو إنشاء موقع متعدد الصفحات.
ثم الإنتقال لمرحلة تعلم الـ JS والتعمق بها من خلال المسار الأول من دورة جافاسكريبت هنا بالأكاديمية فهو مجاني لك كحال باقي المسارات الأولى من جميع الدورات، بعد أن تصبح قادرًا على رؤية تصميم وقادر على تنفيذه أي أنك قادر على بناء موقع بالكامل باستخدام HTML و CSS على الأقل التصاميم المتوسطة في الصعوبة، أي بعد إنشاء تصميمين كاملين.
الإختبار سيكون كالتالي:
إجراء محادثة صوتيّة لمدة 30 دقيقة يطرح المدرّب عليك أسئلة متعلّقة بالدورة والأمور التي نفّذتها خلالها. يحدد لك المدرّب مشروعًا مرتبطًا بما قمت به أثناء الدورة لتنفيذه خلال فترة محددة تتراوح بين أسبوع إلى أسبوعين. إجراء محادثة صوتيّة أخرى لمدّة 30 دقيقة يناقش بها مشروعك وما نفذته وتطرح أسئلة خلالها. إن سارت على جميع الخطوات السابقة بشكل صحيح، تحصل على الشهادة أو يرشدك المدرّب لأماكن القصور ويطلب منك تداركها ثم التواصل معنا من جديد.

محتوى الدورة تم إعداده ليبدأ معك من نقطة البداية في مجال البرمجة، وذلك بدراسة أساسيات البرمجة من خلال لغة بايثون وهي اللغة المُستخدمة في مجال الذكاء الاصطناعي وتحليل البيانات،  ثم خلال الدورة ستتعلم ما يلي:
التعامل مع البيانات بمختلف الصيغ التعامل مع قواعد البيانات SQL و NoSQL التعامل مع نماذج الذكاء الاصطناعي LLMs مثل GPT من OpenAI و LLaMA من Meta تحليل البيانات واستخلاص المعلومات والتمثيل البياني لها التعامل مع مكتبات شهيرة مثل Pandas و Numpy و Matpoltlib و Seaborn تعلم الآلة Machine Learning الخورازميات الشهيرة في تعلم الآلة مثل الانحدار Regressions والتصنيف Classification والتجميع Clustering خوارزميات التعلم الخاضعة للإشراف Supervised learning وخوارزميات التعلم الغير خاضعة للإشراف Unsupervised learning وخوارزميات التعلم المعزز Reinforced learning دمج تقنيات الذكاء الاصطناعي مع متجر إلكتروني لو أردت تعلم الأساسيات في مجال البرمجة بشكل أفضل، فعليك دراسة دورة علوم الحاسوب قبل دورة الذكاء الاصطناعي، لكن الأمر ليس ضروري أو إلزامي، لكن في رأي ذلك أفضل لك.

لا تكن حبيس أفكارك، ما تقوم به غير عملي وغير واقعي، فحتى الشركات الكبيرة لا تقوم بما تفعله، أحيانًا كثيرة يتم نشر ميزة ليست كاملة وبها أخطاء ويتم إصلاحها بعد النشر.
المهم هو إخراج نتيجة بجودة مقبولة ثم التحسين، فلو لاقت قبول ومفيدة فعلاً يتم تطويرها لتجنب إضاعة الوقت والمجهود في أمر لا عائد منه عند إختباره في الواقع.
وعامًة المشكلة شائعة جداً جداً بين المبرمجين، خصوصاً في البدايات، ويسمى شلل التحليل Analysis Paralysis أو السعي للكمال المضر.
اعتمد منهجية MVP وابدأ دائماً بأبسط نسخة تعمل وتحقق الهدف الأساسي المطلوب، ولديك الهدف الأساسي هو إدخال بيانات لتقرير واحد بطريقة ثابتة ربما اجعل ذلك يعمل أولاً، أي ركز على أن يعمل الكود بشكل صحيح مبدئياً، حتى لو كان غير أنيق أو غير قابل للتوسع بسهولة وبعد أن يعمل، تستطيع العودة لتحسينه وعمل Refactoring، وجعله يتعامل مع حالات أكثر تعقيداً.
وبدلاً من التفكير في المشروع ككتلة واحدة ضخمة تتطلب حلاً مثالياً لكل شيء، قسّمه إلى مهام صغيرة جداً يمكن إنجازها في فترة قصيرة.
وستواجهك مشكلة ماذا لو؟ فقم بكتابة ما تفكر به جانبياً وامضِ قدماً، بأي طريقة تريدها تحت عنوان تحسينات مستقبلية أو مشاكل محتملة، ثم انسَها في الوقت الحالي وركز على المهمة التي بين يديك وستتعامل مع ذلك لاحقاً عندما يحين وقتها.

لا مشكلة في ذلك، عامًة لو أردت استخدم code runner لأنه يقوم بتنفيذ أمر cls، قم بإضافة التالي في ملف الإعدادات لتشغيله في التيرمنال كما تم التوضيح:
"code-runner.runInTerminal": true,

محاولة جيدة وأعتقد أنك تعلمت منها بعض الأمور، عامًة في الإصدار 12 تم إتاحة Custom Community Laravel Starter Kits بمعنى  Starter Kits تم تطويرها من قبل مبرمجين آخرين في مجتمع لارافل، ولم تعد الخيارات محصورة في الـ Starter Kits المقدمة من قبل لارافل فقط.
مع الوقت سيتم إتاحة الكثير من الـ Starter Kits المطورة من قبل مبرمجين آخرين، وحاليًا يوجد بالفعل مجموعة بدء تدعم RTL ها هي:
https://github.com/AryanpAzadeh/RTL-blade-starter-kit الشرح الموجود في المستودع بالفارسية قم بترجمته من خلال جوجل ترجمة لتفهم المميزات المتاحة

من الأفضل محاولة تنفيذه لتحقيق استفادة، من خلال Visual Studio اختاري Create a new project وابحثي عن Windows Forms App (.NET Framework) أو Windows Forms App في حال تستخدمين .NET Core
ثم اختاري اختر C# كلغة البرمجة، وتسمية المشروع واضغطي على Create.
ستظهر لكِ نافذة تحتوي على نموذج فارغ Form، وهو الواجهة التي سنضيف إليها الزر، ثم في نافذة Solution Explorer على الجانب الأيمن، افتحي ملف Form1.cs.
وفي وضع التصميم Design View، انقر يبزر الفأرة الأيمن على النموذج واختاري Properties وبها:
غيّري Text إلى Resume Button Example ليظهر كعنوان النافذة ثم Size إلى 300 عرض × 200 ارتفاع ليكون حجم النافذة مناسبًا ثم StartPosition إلى CenterScreen لجعل النافذة تظهر في المنتصف وفي في شريط الأدوات Toolbox على الجانب الأيسر، ابحثي عن Button واسحبيه إلى النموذج، ثم ضعي الزر في مكان مناسب وليكن وسط النموذج تقريبًا.
بعد ذلك ستكتبي الكود، انقري بزر الفأرة الأيمن على الزر في وضع التصميم واختاري View Code، أو افتحي ملف Form1.cs مباشرة، ستجدي كود يبدأ بـ public partial class Form1 : Form.
قبل أي دالة قومي بكتابة المتغيرات التالية:
تخزين العرض الأصلي تخزين الإرتفاع متغير لمتابعة حجم الزر بتصغيره وتكبيره متغير خاص بوقت الـ animation كالتالي:
private int originalWidth; private int originalHeight; private bool isExpanding = false; private Timer animationTimer; ثم في دالة في دالة Form1()، أضيفي كود بعد InitializeComponent() لإسناد متغيري الطول والعرض إلى button1.Width وbutton1.Height
بعد ذلك عليك إعداد المؤقت timer 
animationTimer = new Timer(); animationTimer.Interval = 30; ثم إضافة حدث النقر Click، في في وضع التصميم، انقري مرتين على الزر، وسيُنشئ Visual Studio دالة button1_Click، اكتبي بها:
MessageBox.Show("تم النقر على زر الاستئناف!"); ثم حدث تمرير المؤشر على الزر MouseEnter  في نافذة Properties للزر، انقري على أيقونة البرق Events وابحثي عن MouseEnter، انقري مرتين بجانبه لإنشاء دالة واكتبي بها:
isExpanding = true; animationTimer.Start(); ثم حدث مغادرة المؤشر MouseLeave بنفس الكيفية حاولي كتابة الكود الخاص به.
بعد ذلك تنفيذ الرسوم المتحركة، بربط المؤقت بحدث، في Form1() بعد إعداد animationTimer.Interval، أضيفي التالي لربط المؤقت بدالة:
animationTimer.Tick += AnimationTimer_Tick; ثم عليكِ كتابة تلك الدالة وهي AnimationTimer_Tick لتحريك الزر بناءًا على ما سبق.
في حال واجهتي صعوبة أخبريني.

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

لنحاول التأكد من أن Nginx يستخدم location /static/ بشكل صحيح لجميع الطلبات التي تبدأ بـ /static/، وأن الـ location يتمتع بالأولوية على أي كتلة أخرى ربما تتعارض معه.
أولاً بتعديل ملف الإعدادات لاستخدام ^~ مع location /static/ لإعطائه الأولوية:
server { root /opt/Fikra-Project; location ^~ /static/ { alias /opt/Fikra-Project/staticfiles/; } location /media/ { alias /opt/Fikra-Project/media/; } # إعدادات Gunicorn location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } حيث ^~ يخبر Nginx أنه إن تم العثور على تطابق مع /static/، فلا يتم التحقق من أي كتل location أخرى، واستخدام ذلك الـ location مباشرًة، ويجب أن يكون location ^~ /static/ يأتي قبل location / في ملف الإعدادات.
ثم تنفيذ أمر:
python manage.py collectstatic --noinput بعد التعديل، تفقد صحة الإعدادات وأعد تحميل Nginx:
sudo nginx -t sudo systemctl reload nginx  

القاعدة ليست مرتين أو أكثر، بل ما تحتاجه هو 4 إلى 5 أضعاف وقت الدورة، وذلك ما بين مشاهدة للدرس واستيعابه بشكل مبدأي أو كلي ثم التطبيق العملي بمفردك والمراجعة على النقاط التي يقل بها استيعابك، ثم محاولة التطبيق بشكل جانبي على تمرين مختلف أو مشروع بسيط.
أيضًا البحث والقراءة للاستزادة فلا تكتفي بما يتم تقديمه في أي دورة مهما كانت، ولا حاجة لإعادة الدرس طالما أنك قادر على التطبيق على ما جاء به بمفردك وليس الكتابة مع الشرح ومتفهم لما تقوم به وليس مجرد حفظ للخطوات، عند الوصول لذلك تنتقل للدرس التالي.
إذا أردت نصيحتي، فلا تستمتع لمن يخبرك بالدراسة 30 دقيقة ثم استراحة 10 أو 5 دقائق وهي تقنية Pomodoro، فهو يضرك بدون قصد.
فالعقل يستغرق حوالي 23 دقيقة للدخول في مرحلة التركيز، والتوقف بعد 25 دقيقة يحرمك من التركيز العميق وحالات التدفق flow states.
وسأوضح لك كيفية خداع عقلك لتعلم شيء جديد بسرعة وبفعالية أكبر:
حدد فترة زمنية مركزة، أي ابدأ بأن تخبر نفسك أنك ستخصص الـ 45 دقيقة القادمة فقط لتعلّم الموضوع أو المهارة الجديدة، وذلك لا يضعك تحت ضغط ويخبر عقلك أن الأمر مجرد 45 دقيقة، ويساعدك في دخول وضعية تعلّم ذات تركيز عالٍ.
خلال تلك الفترة المُركّزة لمدة 45 دقيقة، يُفرَز اثنان من المواد الكيميائية المهمة في عقلك:
الأدرينالين وهو الهرمون الذي يزيد من اليقظة ويجعلك أكثر انتباهًا واستعدادًا لاستيعاب المعلومات الجديدة. الأسيتيل كولين، ويلعب دورًا حاسمًا في عملية التعلم وتشكيل الذاكرة، وعند إفرازه، يقوم بتعزيز تعديل الاتصالات العصبية المرتبطة بالمهمة المحددة، مما يعني تسليط الضوء على المناطق التي يرغب الدماغ في تغييرها لاستيعاب المعلومات الجديدة. وبمجرد انتهاء الفترة المُركّزة للتعلم، فقد حان الوقت لوقف كل شيء وإعطاء عقلك فترة راحة، وذلك الوضع مهم لسببين رئيسيين:
 تثبيت المعلومات المكتسبة: فأثناء الراحة، يعمل عقلك على تنظيم وتثبيت المعلومات التي اكتسبتها حديثًا في مسارات عصبية دائمة، وتلك العملية تُعزز من ترسيخ التعلم.  زيادة الدافعية: حيث معرفة أنك ستسترخي وتأخذ استراحة بعد الجلسة المركزة يعتبر مكافأة، مما يزيد من دافعيتك للانخراط في المهمة التعليمية من البداية. والآن نتأتي لزيادة فترة التركيز مع مرور الوقت، وذلك مع التمرس في تلك التقنية، يمكنك تدريجياً زيادة فترة التعلم المركز إلي حتى 2 ساعة (أو أي فترة مناسبة)، فالجلسات الأطول تؤدي إلى تعلم أعمق ودخول حالات من التدفق الإبداعي flow states وعندها لن تشعر بنفسك بل ينصب تركيزك بالكامل على ما تفعله.
وعندما كنت أتعلم البرمجة، كنت أقضي 10 ساعات يوميًا وربما أكثر، بين مشاهدة الدروس والتوقف للاستيعاب ثم المراجعة والتطبيق بمفردي لتثبيت ما تعلمته وأحيانًا البحث عن الأمور التي لا أفهمها سواء بمشاهدة شرح على اليوتيوب أو قراءة مقال على جوجل.
أو رؤية مثال، أو البحث عن تمرين للتطبيق ومحاولة التغيير في الكود لفهم طبيعة عمله وكيف يعمل ولماذا استخدمنا ذلك ولم نستخدم ذلك وهكذا.

لا يوجد مشكلة عند الضغط على زر تسجيل الدخول أو زر إنشاء الحساب، قمت بكتابة إيميل وباسورد وتم تسجيل الدخول والتحويل للصفحة الرئيسية.
عامًة قم بتغيير الكود للتالي:
registerBtn?.addEventListener('click', () => { container.classList.add("active"); }); loginBtn?.addEventListener('click', () => { container.classList.remove("active"); }); لاحظ ? وهو Optional chaining operator فائدته التحقق من وجود قيمة أي يعمل على التحقق من وجود قيمة registerBtn و loginBtn قبل محاولة الوصول إلى خاصية addEventListener.
وفي حال registerBtn أو loginBtn تساوي null أو undefined، فإن الكود لن يُنفذ addEventListener وسيتم تجنب حدوث خطأ.

أولاً، تفقد هل الخادم (VPS) يعمل على المنفذ 8000. يمكنك فعل ذلك عن طريق تشغيل الأمر التالي في منفذ الأوامر، حيث يجب أن يكون المنفذ الذي تستخدمه Nginx لـ WebSocket هو نفس المنفذ الذي يستخدمه Django:
sudo netstat -tlnp | grep 8000 ثانياً، لنتأكد من أن تكوين Nginx  صحيح، عن طريق تشغيل الأمر التالي:
sudo nginx -t ثم لنتأكد من أنّ الخادم يعمل على بروتوكول HTTP/1.1،  عن طريق إضافة السطر التالي إلى تكوين Nginx:
proxy_http_version 1.1; نفس الأمر لنتأكد من أنه يعمل مع بروتوكول WebSocket، بإضافة التالي:
proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; ثم التأكد من أنّه يعمل مع بروتوكول SSL/TLS، بإضافة التالي:
ssl_certificate /etc/letsencrypt/live/domain_name/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/domain_name/privkey.pem; أيضًا قم بتجربة إضافة / إلى نهاية العنوان إن حدث مشكلة قم بإزالتها فذلك يعتمد على إعدادات websocket  في الخادم لديك:
location /ws/ { proxy_pass http://127.0.0.1:8000/; وفي ملف الإعدادات في django   في مصفوفة ALLOWED_HOSTS يجب أن تحتوي على يحتوي على اسم المجال، وإليك مثال عليك تعديله:
ALLOWED_HOSTS = ['test.com', 'www.news.com', 'blog.news.com', '111.222.333.444'] أيضًأ في حال تستخدم SSL/TLS، فقم بتعيين SECURE_PROXY_SSL_HEADER في ملف settings.py.
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')  

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

أتفهم شعورك بالتشتت في الوقت الحالي، لكن ستحتاج إلى الإنتهاء من مرحلة ثم التي تليها، فحاليًا أنت تتعلم أساسيات البرمجة من خلال دورة علوم الحاسوب، أرجو قراءة التالي:
ثم التالي:
وبالنسبة لمطور Full-stack فهل تريد تعلم جافاسكريبت أم PHP أم بايثون؟
عامًة عليك تحديد ذلك من خلال تفقد المطلوب في سوق العمل لديك بالنسبة لمستوى Junior، وليس ما تفضله أنت.
وتستطيع التعلم من مصادر أخرى، وذلك أفضل بالطبع فلا توجد دورة واحدة تقدم لك كل شيء، وأحيانًا تحتاج إلى المزيد من الشرح أو التوضيح أو رؤية شرح آخر وهكذا، أيضًا للتطبيق العملي أنت بحاجة إلى للبحث على اليوتيوب عن مشاريع للمبتدئين وتنفيذها ورؤية الشرح.
لكن لا تشتت نفسك، عليك الإلتزام بدورة واحدة مناسبة لك، ثم الاستزادة من مصادر أخرى وتنفيذ مشاريع والممارسة.
 

أثناء تثبيت Postgres هل قمت بكتابة باسورد؟ عليك كتابته وليس الباسورد الخاص بـ pgAdmin فذلك هو ال Master password للوصول لسيرفرات قاعدة البيانات وليس باسورد قاعدة البيانات نفسها، في حال قمت بكتابة نفس الباسورد فلا مشكلة.
المستخدم الإفتراضي لقاعدة البيانات هو postgres عليك كتابة  كلمة المرور التي قمت بتحديدها.
إن لم تتذكرها، قم بكتابة التالي في psql لتعيين كلمة مرور:
ALTER USER postgres WITH PASSWORD 'admin' تستطيع تعديل admin إلى كلمة تريدها.
بعد ذلك قم بإعادة تشغيل Postgres من خلال تنفيذ التالي في CMD أو أي منفذ أوامر وليس من خلال PSQL:
net stop postgresql net start postgresql  

لم تقم بإنشاء عمود من أجل الإختيارات (نعم أو لا) والنوع المناسب له هو Boolean أي قيمة منطقية True أو False، وليكن باسم has_agreed.
أيضًا لم تقم بإنشاء عمود للمرفقات وتعيين نوعه كـ String لتخزين مسار الملف.
وبقية الأعمدة نوعها مناسب، وهيكل الجدول سيكون كالتالي:
Column Name Data Type Description id int Auto-incrementing primary key firstname varchar(255) First name lastname varchar(255) Last name email varchar(255) Email address phone varchar(20) Phone number category varchar(255) Category (dropdown list) has_agreed boolean Has agreed to terms (yes/no options) attachment varchar(255) File attachment created_at timestamp updated_at timestamp وذلك هو الكود:
use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateArticalesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('articales', function (Blueprint $table) { $table->id(); $table->string('firstname', 255); $table->string('lastname', 255); $table->string('email', 255); $table->string('phone', 20); $table->string('category', 255); $table->boolean('has_agreed')->default(false); $table->string('attachment', 255)->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('articales'); } }  

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

بخصوص أفضل الممارسات، فتلك ليست الطريقة المناسبة، الإعتماد على حجم الشاشة لتعيين الخط أمر يسبب مشاكل غير متوقعة بطبيعة الحال حيث لا تستطيع التحكم في ذلك بشكل كامل، فلا يوجد حد أدنى أو حد أعلى لمدى حجم الخط والأمر يظهر بشكل جلي في الشاشات الصغيرة و الشاشات الكبيرة، أيضًا لو قمت بعمل تقريب للصفحة فلن يزداد حجم الخط في حال كان مساوي لـ 80vw مثلاً وستزداد النصوص التي أقل من ذلك.
بالتالي الطريقة الحديثة هي استخدام دالة clamp والصيغة الخاصة بها كالتالي:
font-size: clamp(MIN, VALUE, MAX); MIN: الحد الأدنى لحجم الخط. VALUE: القيمة المفضلة لحجم الخط والتي ستتغير حسب حجم الشاشة، أي القيمة التي نريدها للخط. MAX: الحد الأقصى لحجم الخط. وهناك أداة توفر لك القيم للنصوص المختلفة في موقعك، أي تقوم بتوليد القيم لك بناءًا على مساحة العرض وحجم الخط الذي تريده، وهي:
utopia.fyi https://modern-fluid-typography.vercel.app/ وهناك حل آخر أُفضله، وهو إنشاء TYPOGRAPHY SYSTEM، بحيث يكون هناك نظام للخطوط متبع في كامل التصميم.
أولاً عليك تحديد حجم الخط الأساسي للموقع ليصبح 10px، ونفعل ذلك بوضع القيمة التالية:
html { font-size: 62.5%; } 62.5% من حجم الخط الأساسي أو الإفتراضي وهو 16px تصبح القيمة 10px.
وذلك لتسهيل استخدام rem فحاليًا 1.8rem تعني 18px وبالتالي الاستخدام أصبح أسهل من أجل التجاوبية.
بعد ذلك عليك تحديد مقاسات الخطوط في الـ  TYPOGRAPHY SYSTEM وأحجامها font weight وأيضًا الـ line height  وفي النهاية ستجد أنّ لديك نظام يشبه التالي:
*** 01 TYPOGRAPHY SYSTEM - Font sizes (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 - font weight default: 400 medium: 500 semi-bold:600 bold: 700 - line height default: 1.5 medium: default paragraph: 1.5 الآن قم بإنشاء متغيرات مخصصة تستطيع استخدامها في كامل التصميم كالتالي:
:root { --font-family: 'Noto Kufi Arabic', sans-serif; --font-color--white: #ebedf8; --font-color: #322143; --font-size: 1.8rem; --font-size-small: 1.4rem; --font-size-medium: 1.6rem; --font-weight--medium: 500; --font-weight--semi: 600; --line-height: 1.5; }  

تقوم بتضمين ملف register.php مرتين، وذلك  يسبب حدوث تعارضات أو الكتابة فوق المتغيرات،  احذف السطر include 'register.php'; من داخل كتلة if (isset($_POST['save_btn']))، حيث تحتاج فقط إلى تضمينه مرة واحدة في بداية البرنامج.
<?php include 'register.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>User Registration</title> </head> <body> <div> <h1>User Registration Form</h1> <form action="register.php" method="POST"> <input type="text" name="Firstname" placeholder="Firstname"> <br> <br> <input type="text" name="Lastname" placeholder="Lastname"> <br> <br> <input type="number" name="Age" placeholder="Age"> <br> <br> <input type="submit" name="save_btn" value="Save Data"> </form> </div> <?php if (isset($_POST['save_btn'])) { $fname = mysqli_real_escape_string($connect, $_POST['Firstname']); $lname = mysqli_real_escape_string($connect, $_POST['Lastname']); $age = mysqli_real_escape_string($connect, $_POST['Age']); $query = "INSERT INTO students (Firstname, Lastname, Age) VALUES ('$fname', '$lname', '$age')"; $result = mysqli_query($connect, $query); if ($result) { echo "تم إدراج السجل بنجاح!"; } else { echo "خطأ: " . mysqli_error($connect); } } ?> </body> </html>  

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

الفارق الأساسي هو كيفية التعامل مع حالة التحميل loading state.
tفي الكود الأول، تقوم بالتحقق من حالة التحميل loading ولكنك لم تقم بإرجاع الـLoader كجزء من الـJSX، أي الكود داخل الشرط if (loading) لا يعتبر جزءًا من النتيجة المرجعة من الدالة Books.
بينما في الكود الثاني، تقوم باستخدام تعبير ثلاثي للتحقق من حالة التحميل loading، وإن كانت الحالة loading، يتم إرجاع الـLoader كجزء من الـJSX، وإذا لم تكن الحالة loading يتم عرض الكتب.
لذا الكود الثاني يعيد الـLoader كجزء من النتيجة المرجعة من الدالة Books، بينما الكود الأول لا يعيد أي شيء في حالة التحميل، مما يعني أن العنصر Oval لن يتم عرضه.
إذن في الكود الأول عليك تعديل الجزء الخاص بحالة التحميل ليعيد الـLoader كجزء من النتيجة المرجعة من الدالة Books:
if (loading) { return ( <Oval height={120} width={120} color="rgb(247, 96, 14)" wrapperStyle={{ height: "70vh", display: "flex", alignItems: "center", justifyContent: "center", }} wrapperClass="" visible={true} ariaLabel="oval-loading" secondaryColor="#E2E2E2" strokeWidth={3} strokeWidthSecondary={3} /> ); } من أجل عرض الـLoader عندما تكون الحالة loading هي true.