Mustafa Suleiman

الأعضاء

عرض الملف الشخصي تصفح المحتوى

المساهمات
18718
تاريخ الانضمام
17 فبراير 2023
تاريخ آخر زيارة
منذ 1 دقيقة
عدد الأيام التي تصدر بها
443

إجابات الأسئلة

إجابة Mustafa Suleiman سؤال في بناء نموذج AI تنبؤي وربطه مع أندرويد ستوديو كانت الإجابة المقبولة الجمعة في 22:43

لا مشكلة في البيانات الاصطناعية كبداية، ويجب أن تكون منطقية تشبه البيانات التي تتوقع جمعها مستقبلاً قدر الإمكان، وبالطبع للتجربة ولن تعتمد على أرقام الدقة لاتخاذ قرارات نهائية، لأنك بنيت البيانات على افتراضاتك الخاصة، فالهدف منها هو فقط بناء النظام، وعندما تجمع بيانات حقيقية كافية، ستقوم بإعادة تدريب النموذج عليها.
عامًة الـ 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
إجابة Mustafa Suleiman سؤال في تصميم تقويم من خلال Lovable كانت الإجابة المقبولة الخميس في 20:47

عليك بتوجيه الأداة لاستخدام 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>
إجابة Mustafa Suleiman سؤال في الخطأ في التوثيق كانت الإجابة المقبولة 3 يونيو

الدورة ليس لها علاقة بالتوثيق، فهي متاحة لك مدى الحياة، وتستطيع تعديل الاسم.
إجابة Mustafa Suleiman سؤال في مُلخص للنقاط الأساسية التي تم تناولها خلال دورة تطوير واجهات المستخدم للاستعداد للإختبار كانت الإجابة المقبولة 20 مايو

تلخيص كامل محتوى الدورة أمر صعب، ذلك كان يجب أن يتم أثناء دراستك لها بكتابة النقاط الهامة في الدروس لتكون مرجع لك، وبشكل عام غرض الدورة بشكل أساسي تزويدك بالمهارات اللازمة لإنشاء واجهات مستخدم تفاعلية، جذابة، ومتجاوبة لمختلف أنواع المواقع والتطبيقات.
لديك موسوعة حسوب كمرجع لك، وأيضًا مقالات البرمجة التي بالأكاديمية.
وبشكل عام، حجر الأساس هي لغة 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 دقيقة يناقش بها مشروعك وما نفذته وتطرح أسئلة خلالها. إن سارت على جميع الخطوات السابقة بشكل صحيح، تحصل على الشهادة أو يرشدك المدرّب لأماكن القصور ويطلب منك تداركها ثم التواصل معنا من جديد.
إجابة Mustafa Suleiman سؤال في هل أنا بحاجة إلى خبرة برمجية مُسبقة لدراسة الدورة كانت الإجابة المقبولة 15 مايو

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

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

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

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

من الأفضل محاولة تنفيذه لتحقيق استفادة، من خلال 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 لتحريك الزر بناءًا على ما سبق.
في حال واجهتي صعوبة أخبريني.
إجابة Mustafa Suleiman سؤال في تثبيت قاعدة بيانات محلية كانت الإجابة المقبولة 13 مارس

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

لنحاول التأكد من أن 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
إجابة Mustafa Suleiman سؤال في كيف تقسمون وقت دراستكم كانت الإجابة المقبولة 9 يناير

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

لا يوجد مشكلة عند الضغط على زر تسجيل الدخول أو زر إنشاء الحساب، قمت بكتابة إيميل وباسورد وتم تسجيل الدخول والتحويل للصفحة الرئيسية.
عامًة قم بتغيير الكود للتالي:
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 وسيتم تجنب حدوث خطأ.
إجابة Mustafa Suleiman سؤال في رفع موقع الكتروني على vps ومشكلة في تشغيل WebSocket كانت الإجابة المقبولة 27 نوفمبر 2024

أولاً، تفقد هل الخادم (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')
إجابة Mustafa Suleiman سؤال في بناء معرض أعمال كمصمم كانت الإجابة المقبولة 2 نوفمبر 2024

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

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

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

لم تقم بإنشاء عمود من أجل الإختيارات (نعم أو لا) والنوع المناسب له هو 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'); } }
إجابة Mustafa Suleiman سؤال في استفسار بخصوص السن والعمل الحر ومسار تعلم البرمجة كانت الإجابة المقبولة 26 أغسطس 2024

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

بخصوص أفضل الممارسات، فتلك ليست الطريقة المناسبة، الإعتماد على حجم الشاشة لتعيين الخط أمر يسبب مشاكل غير متوقعة بطبيعة الحال حيث لا تستطيع التحكم في ذلك بشكل كامل، فلا يوجد حد أدنى أو حد أعلى لمدى حجم الخط والأمر يظهر بشكل جلي في الشاشات الصغيرة و الشاشات الكبيرة، أيضًا لو قمت بعمل تقريب للصفحة فلن يزداد حجم الخط في حال كان مساوي لـ 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; }
إجابة Mustafa Suleiman سؤال في قاعد البيانات فارغة بعد تنفيذ كود PHP كانت الإجابة المقبولة 8 يوليو 2024

تقوم بتضمين ملف 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>
إجابة Mustafa Suleiman سؤال في المدة الزمنية لإنجاز مشروع كانت الإجابة المقبولة 10 يونيو 2024

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

الفارق الأساسي هو كيفية التعامل مع حالة التحميل 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.
إجابة Mustafa Suleiman سؤال في ما هي افضل طريقة لإضافة shadow باستخدام CSS كما في الصورة كانت الإجابة المقبولة 28 مايو 2024

من خلال CSS سيكون كالتالي:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .box { position: relative; display: flex; justify-content: center; align-items: center; background-color: #1b1bb7; border-radius: calc(20% - 40px); padding: 40px 20px; width: 300px; height: 300px; text-align: center; } .box-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: overlay; width: 91%; height: 91%; background-color: rgb(0 0 0 / 79%); border-radius: 9%; filter: blur(37px); } h1, p { font-size: 30px; font-weight: bold; font-family: system-ui; color: white; } </style> </head> <body> <div class="box"> <div class="content"> <h1>5+</h1> <p>Countries</p> </div> <div class="box-overlay"> </div> </body> </html> والنتيجة هي:

حيث ستعتمد على خاصيتي mix-blend-mode و filter لتنفيذ الفكرة.
إجابة Mustafa Suleiman سؤال في cors policy in react كانت الإجابة المقبولة 17 مايو 2024

تلك المشكلة شائعة ويجب عليك فهمها فهي خاصة بأمر هام وهو CORS.
وتحدث مشكلة الـ CORS (Cross-Origin Resource Sharing) عندما يحاول تطبيق ويب الوصول إلى موارد من نطاق مختلف (أو بروتوكول أو منفذ مختلف) بدون التصريح المناسب.
أي الإتصال من http://localhost:3000 في الواجهة الأمامية على http://127.0.0.1:4000 مثلاً في الواجهة الخلفية، لاحظ هنا منفذين مختلفين، بالتالي يرسل المتصفح طلبًا مسبقًا إلى الخادم للتحقق مما إذا كان مسموحًا للعميل بالوصول إلى المورد (السيرفر).
ويتضمن الطلب رأسًا خاصًا يسمى Origin، والذي يحتوي على عنوان URL لموقع الويب العميل.
ثم يستجيب الخادم برأس Access-Control-Allow-Origin، والذي يحدد مواقع الويب التي يُسمح لها بالوصول إلى المورد.
أي CORS هو مصطلح وببساطة، هو آلية أمان في متصفحات الويب تتحكم في كيفية تفاعل مواقع الويب المختلفة مع بعضها البعض.
ما الفائدة منها؟
ببساطة تمنع CORS المواقع الضارة من سرقة البيانات من المواقع الأخرى وتجعل من الصعب على المتسللين اختراق المواقع الإلكترونية، وتُتيح للتطبيقات الويب التفاعل مع بعضها البعض، حتى لو كانت تستضيفها مواقع ويب مختلفة.
لذا في الخادم علينا إضافة الرؤوس (headers) المطلوبة في ملفات PHP للسماح بالوصول من نطاق محدد:
<?php header("Access-Control-Allow-Origin: http://localhost:3000"); header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization"); ?> عليك وضع الكود السابق في بداية كل ملف تريد الوصول إليه وتعديل منفذ الواجهة الأمامية 3000 بما لديك أنت.
أو إنشاء ملف منفصل وكتابة به ما سبق وليكن باسم cors.php ثم استيراده
<?php include 'path/to/config.php'; // تابع بقية الكود ?> أو تضمينه في أي ملف موجد في جميع الملفات الديك مثل config.php أو init.php.
لكن الطريقة الأفضل وضع التالي في ملف .htaccess:
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://localhost:3000" Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule>

Mustafa Suleiman

المساهمات

تاريخ الانضمام

تاريخ آخر زيارة

عدد الأيام التي تصدر بها

إجابات الأسئلة

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية