Mustafa Suleiman

بالنسبة شرح GitHub يوجد شرح مختصر في دورة علوم الحاسوب في قسم إدارة المشاريع البرمجية، في الدروس التالية 03. التعرف على نظام إدارة الإصدارات Git وموقع GitHub المدّة: 6.16 04. مثال تطبيقي على Git و GitHub المدّة: 8.03 بالنسبة لمتى تتعلم GitHub فمن الأفضل التركيز على تعلم أساسيات البرمجة وعلوم الحاسب، وعند الوصول لمرحلة القدرة على إنشاء مشروع متوسط وليس بسيط جدًا، قم بتعلم GitHub. ويمكنك الإعتماد على المصادر التالية https://academy.hsoub.com/programming/workflow/git/

بالنسبة للمواقع الإلكترونية فإن JavaScript هي واحدة من اللغات الأكثر استخدامًا لتطوير الواجهات الأمامية (front-end)، وتستخدم أيضًا في تطوير تطبيقات الويب الديناميكية (dynamic web applications). وهناك العديد من الإطارات (frameworks) التي تستند إلى JavaScript مثل React و Vue.js و Angular وغيرها. لذلك، إذا كنت ترغب في إنشاء موقع إلكتروني، فإن تعلم JavaScript هي خيارك الأول. بالنسبة لتطبيقات الهاتف المحمول فإن Flutter هي إحدى الأطر الحديثة التي يمكن استخدامها لتطوير تطبيقات Android و iOS. يعتمد Flutter على لغة Dart، وهو يوفر مجموعة واسعة من المكتبات والأدوات التي يمكن استخدامها في تطوير تطبيقات الهاتف المحمول، والتي يمكن أن تجعل عملية تطوير التطبيقات أسهل وأكثر فعالية. وبخصوص المقارنة بينها وبين جافاسكريبت، فأنصحك بقراءة النقاش التالي تجنبًا للتكرار. ولكن يجب أن تعلم أنه يوجد إطار React Native لبناء تطبيقات الهاتف لجميع المنصات والذي يعتمد على مكتبة react والتي بدورها تعتمد على لغة جافاسكريبت. وإليك نبذة مختصرة عنه: هو إطار عمل شائع لتطوير تطبيقات الجوال باستخدام JavaScript ويتم تطويره من قبل Facebook. تسمح React Native للمطورين بإنشاء تطبيقات الهاتف المحمول المتعددة المنصات باستخدام نفس الرمز المصدري. يمكن لمطوري React Native بناء تطبيقات لنظامي التشغيل iOS و Android باستخدام JavaScript ومكتبات React الشائعة. تساعد React Native المطورين على توفير الوقت والموارد اللازمة لبناء تطبيقات متميزة وفعالة من حيث التكلفة. أخيرًا، بالنسبة لبرنامج Windows فإن لغة البرمجة التي تستخدمها يعتمد على نوع البرنامج الذي تريد إنشائه. إذا كنت تريد إنشاء برنامج مكتبي تفاعلي يحتاج إلى واجهة رسومية، فإن C# يعتبر خيارًا شائعًا لبرمجة تطبيقات Windows. وبإمكانك استخدام الإطار البرمجي .NET لتطوير تطبيقات Windows. كما يمكن استخدام لغات البرمجة الأخرى مثل Java و Python و C++، حسب المتطلبات الخاصة بمشروعك. ولكن إذا كنت تريد توفير الوقت والجهد وستقوم بالمشروع بمفردك، فأنت بحاجة إلى استخدام إطار عمل Electron.js الخاص بجافاسكريبت. وهو إطار عمل شائع يستخدم لتطوير تطبيقات سطح المكتب باستخدام HTML و CSS و JavaScript. تتيح Electron للمطورين إنشاء تطبيقات سطح المكتب قابلة للتشغيل على نظام التشغيل Windows و MacOS و Linux. وهي تعتمد على تقنية Node.js وتوفر العديد من الأدوات والمكتبات التي يمكن استخدامها لبناء تطبيقات سطح المكتب بشكل سريع وسهل. ولكن يعيبه استهلاكه العالي لموارد الجهاز وبالأخص الرامات. لذلك يمكن القول بأن تعلم جافاسكريبت سيمكنك من إنشاء ما تريده على كافة المنصات.

في البداية يجب معرفة أن الهكر الأخلاقي هو في الأساس مبرمج بارع، أي يجب إتقان البرمجة والتدرج فيها. وسأعطيك مخلص سريع للخريطة: قم بتعلم اللغات البرمجية المهمة للأمن السيبراني مثل Python. تعلم أساسيات الشبكات مثل TCP / IP و DNS و DHCP و HTTP و HTTPS و SSL / TLS. دراسة المفاهيم الأساسية للأمن السيبراني، ومنها أنواع الهجمات والأدوات المستخدمة فيها وكيفية تحليل الثغرات وإصلاحها. تحديد مجالات الأمن السيبراني التي تهمك وتخصص فيها، مثل الهجمات الاجتماعية والاختراق والحماية من الفيروسات والبرمجيات الخبيثة وتطوير البرمجيات الآمنة. يمكن أن تساعد الحصول على شهادات معتمدة في تحقيق الهدف المنشود، فهي تعطيك المعرفة والخبرة اللازمة للعمل في مجال الأمن السيبراني. : تساعد الدورات التدريبية في تحديث معرفتك وتطوير مهاراتك في مجال الأمن السيبراني. يمكن للمشاركة في المسابقات والمجتمعات الخاصة بالأمن السيبراني أن تمنحك الفرصة لتحسين مهاراتك وتبادل الخبرات مع الآخرين في المجال. ومن الممكن أن أتحدث وأسرد لك 1000 سطر، لكن ذلك حديث على غير علم وخبرة وتجربة، لهذا: الأفضل الاستماع لأهل الخبرة وأنصحك بقراءة الدليل الشامل التالي للخبير الأمني محمد عبد الباسط النوبي، بعنوان ١٠١ - دليلك فى البرمجة ومجال امن وحماية واختبار اختراق تطبيقات الويب وستجد به كل ما تحتاج معرفته. وأنصحك أيضًا بقراءة النقاش الخاص به على منصة حسوب I\O وهو نقاش ثري أجاب فيه على الكثير من الأسئلة، ويحتاج منك إلى تركيز واستيعاب كبير.

يمكن التأكد من إعدادات التطبيق في جوجل بلاي كونسول، حيث أنه يمكن أن تكون قد اخترت إصدارات معينة يعمل عليها التطبيق. وبشكل عام لا يمكن حل هذه المشكلة من خلال وحدة تحكم Google Play Console بشكل مباشر. وعادةً ما يتعين على المطورين تحديث تطبيقهم لدعم إصدارات Android الأحدث وإعادة تحميل التطبيق على متجر Google Play. قد يتطلب ذلك إجراء تغييرات على تطبيقك لجعله يتوافق مع إصدارات Android الأحدث، مثل تحديث مستندات التطبيقات (Manifest) ومكتبات التطوير (SDK) والمكونات الأخرى التي تستخدمها في تطبيقك. على أي حال، ينبغي عليك دراسة سبب عدم توافق تطبيقك مع إصدارات Android الأحدث وتصحيحه، حتى تتمكن من إعادة تحميل تطبيقك بنجاح وضمان توافقه مع مختلف إصدارات Android. وهل تستخدم إطار عمل معين لإنشاء التطبيق؟ أم تطور التطبيق بشكل native؟

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

الإجابات السابقة أجابت على سؤالك بخصوص إعادة تحميل الصفحة، لكنك لم تذكر السبب الذي من أجله تريد إعادة تحميل الصفحة؟ فمثلا إذا كنت تريد عمل Reset للعبة في المتصفح لإعادة اللعبة من البداية، فالأفضل القيام بالتالي: 1- أضف زر reset إلى صفحة اللعبة باستخدام عنصر HTML button. <button id="reset-button">Reset Game</button> 2- قم بإنشاء دالة في جافاسكريبت تتحكم في إعادة تعيين قيم اللعبة إلى الوضع الأصلي. function resetGame() { // قم بإعادة تعيين جميع قيم اللعبة إلى الوضع الأصلي // مثال: إذا كان لديك لعبة تتكون من صورة وعنوان، يمكنك تعيين src الصورة إلى الصورة الأصلية ونص العنوان إلى النص الأصلي document.getElementById('game-image').src = 'original-image.png'; document.getElementById('game-title').textContent = 'عنوان اللعبة الأصلي'; document.getElementById('game-score').textContent = '0'; } 3- استخدم الزر الذي أضفته في الخطوة الأولى لاستدعاء الدالة التي أنشأتها في الخطوة الثانية. const resetButton = document.getElementById('reset-button'); resetButton.addEventListener('click', resetGame); تذكر أن تعيد جميع القيم في اللعبة إلى حالتها الأصلية في الدالة التي أنشأتها في الخطوة الثانية. يمكنك أيضًا تحديث الواجهة الرسومية لتعكس الحالة الجديدة للعبة.

بخصوص النصائح التي يمكن أن تساعدك على الحصول على العمل الأول: اولاً، قبل أي نصائح يجب إلقاء نظرة على السوق المحلي لديك ومعرفة المهارات المطلوبة للمجال الذي تريده، بالنسبة للويب مثلاً هل المطلوب بكثرة لوظيفة junior هو إطار عمل React أم Angular وهل المطلوب بكثرة لغة مثل PHP؟ وأيضًا قم بإلقاء نظرة على المشاريع المطلوبة واللغات الخاصة بها، على مواقع العمل الحر التي تريد العمل بها. 1- قم ببناء مشاريع حقيقية: يمكنك البحث عن مشاريع تطبيقات الويب التي يحتاجها الناس أو مشابهة لما ستعمل عليه في الشركات، والتي يمكنك بنائها باستخدام Python. عند بناء المشاريع، يمكنك إضافة نماذج إلى سيرتك الذاتية (CV) وتشاركها على المواقع المختلفة. كما يمكنك إرسال مشاريعك الى شركات تطوير الويب وإرفاقها في طلب الوظيفة. 2- اكتساب الخبرة: يمكنك العمل على بناء الخبرة العملية من خلال العمل مع المجتمع المفتوح المصدر (open source community). يمكنك الانضمام إلى المجموعات المختلفة التي تهتم بتطوير Python والتعاون في مشاريع مختلفة. هذا يمكن أن يساعدك على التعلم من المطورين الآخرين وتطوير مهاراتك البرمجية. وبإمكانك اكتساب الخبرة أيضًا من مواقع العمل الحر كمستقل، والعمل على مشاريع باستخدام المهارات التي اكتسبتها. 3- ابحث عن فرص التدريب: يمكنك البحث عن فرص التدريب التي تقدمها الشركات المختلفة للحصول على تجربة عملية. يمكن أن يتم توظيف بعض المتدربين في الشركات بعد الانتهاء من البرنامج التدريبي. وتأكد من امتلاك حساب على LinkedIn ووضع معلوماتك ومهاراتك ومشاريعك به بشكل جيد، وايضًأ حساب على GitHub و إظهار أفضل مشاريعك على ملفك الشخصي. 4- تعلم مهارات أخرى: قد تكون لديك خبرة جيدة في تطوير تطبيقات الويب باستخدام Python، ولكن تعلم مهارات أخرى يمكن أن تساعدك على الحصول على وظيفة أفضل. أنصحك بقراءة النقاشات على الأسئلة التالية. https://io.hsoub.com/webdev/143736-من-الصفر-الى-الاحتراف

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

لتشغيل ملف Laravel على مسار فرعي مثل www.sdsda.com/mm ، يمكنك اتباع الخطوات التالية: إنشاء مجلد جديد داخل مجلد public_html في الخادم الخاص بك ، واسمه mm. انسخ جميع ملفات Laravel الخاصة بك إلى المجلد mm الجديد الذي قمت بإنشائه في الخطوة السابقة. انتقل إلى مجلد mm باستخدام موجه الأوامر على الخادم الخاص بك ، وثبت جميع المكتبات المطلوبة باستخدام Composer باستخدام الأمر التالي: composer install 4. قم بتعيين الإعدادات اللازمة لتشغيل Laravel على مسار فرعي ، وهي في ملف .env الخاص بك. يجب تعيين APP_URL الخاص بك إلى المسار الكامل لمجلد mm ، مثل: APP_URL=https://www.sdsda.com/mm 5. لجعل Laravel يتعرف على المسار الجديد الخاص بك ، يجب تعديل ملف index.php في مجلد mm ليتضمن المسار الصحيح إلى الخاص بالتطبيق Laravel. تأكد من تغيير هذا السطر: require __DIR__.'/../bootstrap/autoload.php'; ليتضمن المسار الجديد الخاص بـ mm ، مثل: require __DIR__.'/../mm/bootstrap/autoload.php'; أخيرًا ، قم بتغيير المسار الخاص بـ index.php إلى mm ، مثل: require __DIR__.'/mm/bootstrap/app.php'; بعد اتباع هذه الخطوات ، يجب أن يعمل Laravel الخاص بك على المسار الفرعي الجديد. يمكنك الوصول إلى التطبيق عبر الرابط التالي: https://www.sdsda.com/mm من الهام التأكد من تغيير اسم المجلد الذي تم إنشاؤه (mm) إلى الاسم الذي تريده وتحديث المسارات الموجودة في الخطوات المذكورة أعلاه على وفق ذلك.

عليكم السلام، يتم استخدام null و undefined بطرق مختلفة ولأسباب مختلفة في JavaScript. حيث يتم استخدام undefined عادة عندما تريد الإشارة إلى متغير لم يتم تعيين قيمة له. على سبيل المثال، إذا كنت تعرف متغيرًا بدون قيمة محددة، فيمكنك تعيين قيمة undefined له. من ناحية أخرى، يتم استخدام null عادة لإشارة إلى أن المتغير لا يحتوي على أي قيمة في الوقت الحالي. على سبيل المثال، يمكن أن تعيين قيمة null إلى متغير بعدما تم استخدامه في وقت ما. يمكن استخدام undefined و null معًا لإشارة إلى أن المتغير لم يتم تعيين أي قيمة له، ولا يحتوي على أي قيمة في الوقت الحالي. وسأشرح لك بشكل أكثر تفصيلاً. تستخدم قيمة undefined عادة في الحالات التالية: عند تعريف متغير جديد ولم يتم تعيين أي قيمة له بعد، فإن قيمته تكون undefined بشكل افتراضي. عندما يتم إرجاع قيمة undefined من دالة أو طريقة في حالة عدم وجود قيمة للإرجاع. عندما تتم مقارنة متغير مع undefined للتحقق مما إذا كان يحتوي على قيمة أو لا. استخدام قيمة null غالباً ما تستخدم لإعطاء قيمة فارغة لمتغير معين عندما يكون من المهم تفريقه عن القيمة undefined. على سبيل المثال، عندما يتم تحميل بيانات من خادم ولا يوجد بيانات متاحة للعرض، يمكن استخدام null بدلاً من undefined لتفريق الحالة الفارغة عن حالة عدم تعيين القيمة. لاحظ أن القيمتين لهما استخدامات مختلفة، وغالبًا ما تختلف تبعًا للحالة التي تواجهها. لذلك، يجب عليك اختيار القيمة المناسبة بناءً على الحالة التي تواجهها. ولاحظ أيضًا أن كلا القيمتين تعطي قيمة false عندما تستخدم في ظروف معينة مثل قياس قيمة متغير boolean، لكن الاستخدام الرئيسي لهما مختلف ولا ينبغي الخلط بينهما. بعض الأمثلة التوضيحية التي تظهر كيفية استخدام null و undefined في JavaScript: مثال على undefined: let x; // تعريف المتغير دون تعيين قيمة if (x === undefined) { console.log("x is undefined"); // سيتم طباعة هذه الرسالة لأن x ليس له قيمة } مثال على null: let y = null; // تعريف المتغير وتعيينه قيمة null if (y === null) { console.log("y is null"); // سيتم طباعة هذه الرسالة لأن y تم تعيينها بقيمة null } مثال يستخدم كلا القيمتين: let z; // تعريف المتغير دون تعيين قيمة z = null; // تعيين قيمة null للمتغير if (z === null || z === undefined) { console.log("z is null or undefined"); // سيتم طباعة هذه الرسالة لأن z ليس له قيمة أو تم تعيينها بقيمة null } لاحظ أن القيمتين تحددان بشكل مختلف في JavaScript ويمكن استخدام كلا القيمتين بطرق مختلفة لتحقيق مختلف الأغراض. https://wiki.hsoub.com/JavaScript/undefined https://wiki.hsoub.com/JavaScript/null

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

يتم استخدام getElementsByClassName و getElementById في الجافاسكريبت لتلافي الحاجة إلى تكرار الأكواد وتبسيط عملية الوصول إلى العناصر الخاصة بصفحة الويب. تحتوي كلا الوظيفتين على الخصائص المختلفة التي يمكن استخدامها لتعديل الصفحة عبر الجافاسكريبت. على سبيل المثال، يمكن استخدام getElementsByClassName لتغيير خصائص العناصر المختلفة في الصفحة، مثل تغيير لون الخلفية، وتغيير الحجم، والتحكم في الرسومات. يمكن استخدام getElementById للوصول إلى عنصر واحد فقط على الصفحة، مثل حقل النص أو زر الضغط، وتعديل الخصائص الخاصة به. ويمكن أيضًا استخدام هذه الوظيفة لإنشاء عناصر جديدة على الصفحة، مثل إضافة نص أو صورة جديدة. لا يزال هناك الكثير من الأمور التي يمكن القيام بها باستخدام getElementsByClassName و getElementById في الجافاسكريبت، وذلك يعتمد على الاحتياجات الخاصة بكل موقع ومطوري الويب. ومنها: 1- تغيير نص عنصر: يمكن استخدام الدالة innerHTML لتغيير نص عنصر معين باستخدام getElementById. على سبيل المثال، لتغيير نص عنصر الفقرة <p> الذي لديه العنصر id="para"، يمكن استخدام الكود التالي: document.getElementById("para").innerHTML = "تغيير النص هنا"; 2- تغيير الأسلوب الخاص بعنصر: يمكن استخدام الدالة style لتغيير الأسلوب الخاص بعنصر معين باستخدام getElementById. على سبيل المثال، لتغيير لون خلفية عنصر الفقرة <p> الذي لديه العنصر id="para"، يمكن استخدام الكود التالي: document.getElementById("para").style.backgroundColor = "red"; 3- تغيير الأسلوب الخاص بمجموعة من العناصر: يمكن استخدام الدالة style أيضًا لتغيير الأسلوب الخاص بمجموعة من العناصر باستخدام getElementsByClassName. على سبيل المثال، لتغيير لون خلفية جميع عناصر الفقرة <p> التي لديها العنصر class="para"، يمكن استخدام الكود التالي: const elements = document.getElementsByClassName("para"); for (let i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = "red"; } 4- إضافة أو إزالة فئة CSS من عنصر: يمكن استخدام الدالة classList لإضافة أو إزالة فئة CSS من عنصر معين باستخدام getElementById أو getElementsByClassName. على سبيل المثال، لإضافة فئة CSS جديدة إلى عنصر الفقرة <p> الذي لديه العنصر id="para"، يمكن استخدام الكود التالي: document.getElementById("para").classList.add("new-class"); 5- تحديد حدث على عنصر: يمكن استخدام addEventListener لإضافة حدث إلى عنصر محدد. ويتم استخدام هذه الوظيفة عادة للتعامل مع تفاعلات المستخدم مثل النقر، الضغط، التمرير وغيرها. على سبيل المثال، يمكن استخدام الوظيفة التالية لإضافة حدث النقر على زر "أضف إلى السلة": const addToCartBtn = document.getElementById('add-to-cart-btn'); addToCartBtn.addEventListener('click', function() { // الكود الذي يتم تنفيذه عند النقر على زر "أضف إلى السلة" }); 6- تغيير محتوى العنصر: يمكن استخدام خاصية innerHTML لتغيير محتوى عنصر HTML. على سبيل المثال، يمكن استخدام الوظيفة التالية لتغيير نص داخل عنصر بواسطة getElementById: const myElement = document.getElementById('my-element'); myElement.innerHTML = "النص الجديد"; يمكن استخدام نفس الطريقة لتغيير محتوى العناصر التي تم العثور عليها باستخدام getElementsByClassName. 7- تغيير خصائص العنصر: يمكن استخدام خاصية العنصر style لتغيير الخصائص الرسومية لعنصر HTML. على سبيل المثال، يمكن استخدام الوظيفة التالية لتغيير خلفية عنصر باستخدام getElementById: const myElement = document.getElementById('my-element'); myElement.style.backgroundColor = "red"; يمكن استخدام نفس الطريقة لتغيير خصائص العناصر التي تم العثور عليها باستخدام getElementsByClassName.

لغة JavaScript و Flutter هما لغتان مختلفتان تستخدمان في مجالات التطوير المختلفة. JavaScript هي لغة برمجة تستخدم على نطاق واسع في تطوير تطبيقات الويب، في حين أن Flutter هي إطار عمل لتطوير تطبيقات الجوال والحواسيب اللوحية ومنصات السطح. يختلف العمل في Flutter عن العمل في JavaScript في العديد من النواحي، بما في ذلك: البنية الأساسية للتطبيق: في Flutter، يتم بناء التطبيق باستخدام شجرة عناصر واجهة المستخدم (UI) وتصفح المستخدم بين تلك العناصر، في حين يتم في JavaScript بناء التطبيقات باستخدام المكونات والعناصر الأخرى التي تدعمها مكتبات الويب. الأداء: يتميز Flutter بأداء عالٍ جدًا بفضل استخدامه للغة Dart المحسنة للأداء، في حين يعاني JavaScript من بعض المشاكل في الأداء، ولكن هذه المشاكل يمكن تفاديها باستخدام التقنيات المختلفة والمكتبات الأخرى. التعددية: يتميز Flutter بتقديم واجهة مستخدم متماثلة عبر منصات مختلفة، بمعنى أن التطبيقات المبنية باستخدام Flutter تعمل بنفس الطريقة على أنظمة Android وiOS والحواسيب اللوحية ومنصات السطح، في حين يتطلب JavaScript العمل على تكييف التطبيقات لعدة منصات. العدد الكبير من المكتبات: تتوفر في JavaScript مجموعة واسعة من المكتبات والإطارات التي يمكن استخدامها في تطوير تطبيقات الويب، في حين تتوفر في Flutter مجموعة أصغر من المكتبات والإطارات ولكنها تعتبر كافية لتلبية الاحتياجات الأساسية لتطوير تطبيقات الجوال. لا، ليست كل الميزات والوظائف التي يمكن القيام بها باستخدام Flutter متاحة في JavaScript والعكس صحيح أيضاً. على سبيل المثال، Flutter يوفر مكتبات وأدوات مخصصة لتطوير تطبيقات متعددة المنصات بينما تعتمد JavaScript على مكتبات مثل React Native و Ionic لتطوير تطبيقات الموبايل. بعض الميزات التي يوفرها Flutter والتي يصعب القيام بها باستخدام JavaScript تشمل التصميم المتماثل والواجهة المستخدم السلسة والمتفاعلة والأداء السريع. بالإضافة إلى ذلك، تستخدم Flutter لغة برمجة Dart التي توفر بنية قوية وخاصية Just-in-Time (JIT) و Ahead-of-Time (AOT) compilation والتي تجعلها مناسبة بشكل خاص لتطوير تطبيقات الويب والموبايل. على الجانب الآخر، تتميز JavaScript بسهولة تعلمها واستخدامها ويتم استخدامها على نطاق واسع في تطوير تطبيقات الويب والموبايل. يوفر JavaScript أيضاً مجموعة واسعة من المكتبات والأدوات التي تساعد على تطوير تطبيقات عالية الجودة بسرعة وفعالية. لذلك، يتوقف الخيار بين استخدام Flutter أو JavaScript على احتياجات المشروع ومتطلبات التطبيقات التي يجب تطويرها. لا يمكن القول بأن Flutter أو JavaScript أفضل من الآخر من هذه الناحية، لأن الخيار يتوقف على احتياجات المشروع ومتطلبات التطبيقات التي يجب تطويرها. إذا كانت الأولوية لديك تطوير تطبيقات متعددة المنصات بتصميم متماثل وواجهة مستخدم سلسة وأداء سريع، فإن Flutter ستكون خيارًا جيدًا لك. ومع ذلك، إذا كانت التطبيقات التي ترغب في تطويرها تستهدف منصة واحدة مثل الويب أو الموبايل، فقد تكون JavaScript ومكتباتها المثلية مثل React و Angular أو React Native و Ionic خيارًا أكثر ملاءمة. بشكل عام، يمكن استخدام كلا الخيارين لتطوير تطبيقات عالية الجودة، ويتوقف الاختيار على مجموعة متنوعة من العوامل، بما في ذلك متطلبات المشروع وفريق التطوير والموارد المتاحة وغيرها. لذلك، يجب اتخاذ قرار الخيار الأفضل بناءً على احتياجات ومتطلبات المشروع. يوجد الكثير من فرص العمل لمطوري flutter ربما يجب عليك البحث في المكان الصحيح، وأيضًا تطوير مهارتك بشكل كافي من خلال بناء مشاريع حقيقية وليست نماذج صغيرة. ويتم تحديد Flutter في بعض فرص العمل كخيار لتطوير التطبيقات بسبب تميزها في بعض الميزات مثل تجربة المستخدم المتماثلة عبر المنصات والأداء والتوافق مع منصات مختلفة. ومع ذلك، قد يتم تحديد لغة برمجة معينة في بعض الفرص الوظيفية بناءً على متطلبات المشروع والأدوات المستخدمة. يعتبر Flutter مثاليًا لتطوير تطبيقات متعددة المنصات بفضل واجهة المستخدم الموحدة والسرعة والأداء العالي. وبسبب هذه الميزات، يقوم العديد من المطورين والشركات بتفضيل Flutter لتطوير تطبيقاتهم. لذلك، يتم البحث عن مطوري Flutter للعمل في هذه الشركات والمشاريع. ومن الجدير بالذكر أيضًا أنه عندما يتم اختيار لغة معينة أو إطار عمل، يتم اختيارها بناءً على خبرة المطورين المتاحين، والتدريب والدعم المتاح لهم، وسهولة تطوير التطبيقات بهذه اللغة أو الإطار. لذلك، فإن الاستثمار في تعلم Flutter أو لغة أخرى معينة قد يزيد من فرص العمل في هذا المجال.

أرجو منك استخدام الأمر التالي كما شرحت لك من قبل. npm update react-scripts --force أو الأمر التالي في حال استمرت المشكلة. npm update react-scripts --legacy-peer-deps

اتبع الخطوات التالية لحل مشكلة "ModuleNotFoundError" في Python: تحقق من تثبيت الـ Module الذي يعاني من المشكلة باستخدام أحد أدوات الإدارة مثل pip. يمكن استخدام الأمر pip show <package_name> مع استبدال <package_name> باسم الحزمة للتحقق من وجود الـ Module وموقع تثبيته. إذا لم يكن الـ Module مثبت، يمكن استخدام الأمر التالي لتثبيتها. pip install <package_name> تأكد من وجود الـ Module في المسار الصحيح. يمكن استخدام الأمر python -c 'import <package_name>; print(<package_name>.file)' لمعرفة مسار الـ Module المثبت. تأكد من تحديث الـ Module إلى أحدث إصدار باستخدام الأمر. pip install --upgrade <package_name> في بعض الأحيان، يمكن أن يحدث هذا الخطأ بسبب تضارب في أسماء الـ Modules ، يمكن حل هذه المشكلة عن طريق تغيير اسم الـ Module الذي به مشكلة في البرنامج. حلول أخرى يمكن استخدام الحلول التالية لتجنب أخطاء الاستيراد: تجنب استخدام المسارات النسبية في استيراد الوحدات واستخدام المسارات المطلقة بدلاً من ذلك. على سبيل المثال: بدلاً من استخدام from .module import function يمكن استخدام from package.module import function حيث package هي الحزمة التي يتم استيراد الـ module منها. استخدام المسارات المطلقة في الاستيراد باستخدام الوظيفة sys.path.append()، والتي تضيف المسار الذي تحدده إلى قائمة المسارات التي يتم البحث فيها للوحدات. تحديد PYTHONPATH system variable، والتي تضيف المسار الذي تحدده إلى قائمة المسارات التي يتم البحث فيها للوحدات. يمكن تعيين هذه المتغيرات بشكل دائم في ملفات الإعداد (مثل .bashrc) أو يمكن تعيينها بشكل مؤقت في سطر الأوامر باستخدام الأمر . export PYTHONPATH=/path/to/directory

يمكن تحديد الطول المطلوب لحقل integer في Laravel، ولكنه لا يقبل البارامتر الذي تم ذكره في السؤال: $table->integer('price', 11); في Laravel، يمكن استخدام الدالة integer لتحديد حقل من نوع integer، وتحديد الطول المطلوب في البارامتر الثاني، على سبيل المثال: $table->integer('price', 4); // سينشئ حقل من نوع int(4) لاحظ أن القيمة المحددة في البارامتر الثاني تمثل الطول الإجمالي للحقل، وليس عدد الأرقام التي يمكن أن يحتويها الحقل. الطول الإجمالي يشير في قاعدة البيانات إلى عدد الأحرف أو الأرقام الذي يمكن أن يحتوي عليه الحقل. على سبيل المثال، إذا كانت لدينا خانة في قاعدة البيانات مخصصة للأسماء وأردنا تحديد طول الأسماء التي يمكن إدخالها في هذه الخانة، فيمكننا تحديد الطول الإجمالي لهذا الحقل. وبناءً على هذا الطول الإجمالي، يتم تحديد حجم الحقل في قاعدة البيانات الخاصة به. لاحظ أنه في الكود الخاص بك تستخدم $table->string('os', 2000) هذا الكود ينشئ عمودًا في جدول قاعدة البيانات باسم price من نوع string، ويحدد الطول الأقصى للعمود بقيمة 2000 حرف. يعني أن العمود يمكن أن يحتوي على أي مجموعة من الأحرف والأرقام بطول يصل إلى 2000 حرف، ويتم تخزين البيانات في هذا العمود في شكل سلسلة نصية (String). وهذا يستخدم عادةً في حالة تخزين البيانات النصية طويلة مثل وصف المنتجات أو الرسائل الإخبارية. ومن الممكن استخدام نفس الطريقة مع الدالة tinyInteger، حيث يتم تحديد الطول المطلوب في البارامتر الوحيد للدالة: $table->tinyInteger('price', 4); // سينشئ حقل من نوع tinyint(4) لاحظ أن القيمة المحددة في البارامتر الوحيد للدالة تمثل الطول الإجمالي للحقل أيضًا. ويجب التنويه إلى أن استخدام الحقل من نوع string لحفظ القيم الرقمية غير مناسب وغير مستحسن، حيث أن هذا يؤدي إلى زيادة حجم قاعدة البيانات وإضافة تعقيدات في البحث عن القيم وترتيبها.

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

في Laravel، يمكنك استخدام خاصية length لتحديد الحجم الذي تريد استخدامه لحقل integer. ولكن، هناك بعض الاختلافات بين أحجام الأعداد المسموح بها للأنواع المختلفة من الحقول. tinyInteger يستخدم لتعريف عمود رقمي صغير يمكنه تخزين القيم بين -128 و +127، ويحتوي على 1 بايت فقط (8 بت). integer فهو يستخدم لتعريف عمود رقمي أكبر يمكنه تخزين القيم بين -2147483648 و +2147483647، ويحتوي على 4 بايتات (32 بت). بالتالي، إذا كان العدد الذي تريد تخزينه في العمود صغيرًا، يمكنك استخدام tinyInteger لتوفير مساحة في قاعدة البيانات، وإذا كان العدد كبيرًا، فيمكن استخدام integer. يجب ملاحظة أنه في حالة عدم تحديد عدد الأرقام في العمود، فإن Laravel سيستخدم الإعدادات الافتراضية لقاعدة البيانات التي يتم استخدامها. يمكن استخدام $table->string('price', 2) لتحديد حجم الحقل، لكن هذا يعتمد على نوع البيانات التي تريد تخزينها في هذا الحقل. عادةً ما يتم استخدام الأنواع الرقمية مثل tinyInteger و integer لتخزين الأرقام الصحيحة، مثل الأسعار والكميات والعمر وما إلى ذلك. وعند استخدام أنواع الأرقام الصحيحة، من المفترض أن يكون لديك قيمة رقمية تريد تخزينها، وليس قيمة نصية. على الجانب الآخر، تستخدم الأنواع النصية مثل string لتخزين البيانات النصية مثل الأسماء والأسماء الأولى والعناوين والبريد الإلكتروني وما إلى ذلك. وفي حالة تحديد طول الحقل باستخدام string ، يتم تحديد عدد الأحرف التي يمكن أن يحتوي عليها النص في هذا الحقل. لذلك، يمكن استخدام string لتخزين الأرقام الصحيحة ذات الطول الصغير مثل price ، ولكن يتم استخدام الأنواع الرقمية مثل tinyInteger و integer للأرقام الصحيحة ذات الطول الكبير. إذا كنت تريد استخدام حقل tinyInteger، يمكنك تحديد الطول بالتالي: $table->tinyInteger('price', 4); تمثل القيمة الثانية الحد الأقصى لعدد الأرقام المسموح بها في هذا الحقل. إذا كنت تريد استخدام حقل integer، يمكنك تحديد الطول بالتالي: $table->integer('price', 11); تمثل القيمة الثانية الحد الأقصى لعدد الأرقام المسموح بها في هذا الحقل. ومع ذلك، يجب الانتباه إلى أن هذه القيم لا تحدد الحد الأقصى للأعداد التي يمكن حفظها في الحقل. بدلاً من ذلك، فإنها تحدد العدد الأقصى للأرقام التي يمكن عرضها عند عرض الحقل في أدوات الإدارة مثل phpMyAdmin. لحفظ أي رقم في الحقل، يجب التأكد من أن الرقم لا يتجاوز الحد الأقصى للحقل. علاوة على ذلك، يمكن تخصيص الخاصية unsigned لجعل الحقل موجباً فقط. يتم ذلك بإضافة unsigned() في نهاية تعريف الحقل، على النحو التالي: $table->integer('price', 11)->unsigned(); وبمجرد تحديد الحجم الصحيح للحقل، يمكن استخدامه بشكل عادي في التطبيق Laravel الخاص بك.

في المرات القادمة أرجو منك طرح السؤال أسفل الفيديو الخاص به في الدورة. المشكلة هي أنه لا يوجد دالة display() في الكائن Taskcontroller، وبالتالي يتعذر على برنامج Python العثور على هذه الدالة أثناء تشغيل الأمر. لحل هذه المشكلة، يجب إضافة دالة display() إلى الكائن Taskcontroller. يمكن القيام بذلك عن طريق إضافة الكود التالي داخل الكائن: class Taskcontroller: # ... def display(self): tasks = self.model.get_all_tasks() if tasks: self.view.show_all_tasks(tasks) else: self.view.show_empty_task_list_message() هذا الكود ينشئ دالة display() التي تقوم بجلب جميع المهام باستخدام دالة get_all_tasks() من النموذج وتعرضها باستخدام دالة show_all_tasks() من العرض. إذا لم تكن هناك مهام، سيتم عرض رسالة خاصة بذلك باستخدام دالة show_empty_task_list_message(). بعد إضافة الدالة display()، يجب تشغيل الأمر مرة أخرى بنفس الطريقة وسيتم عرض قائمة المهام بشكل صحيح بدون وجود خطأ المشكلة الذي ظهر في السابق.

يمكن تخزين القيم التي لا تحتاج إلى ترجمة بشكل عادي في العمود نفسه دون استخدام JSON. أما بالنسبة للأعمدة التي تحتاج إلى ترجمة، فيمكن استخدام JSON لتخزين النص المترجم لكل لغة في مفتاح يمثل اسم اللغة. على سبيل المثال، يمكن إنشاء عمود "product_name" و "product_description" في الجدول الخاص بالمنتجات في قاعدة البيانات. يمكن تخزين النص المترجم لكل لغة باستخدام JSON على النحو التالي: { "ar": "اسم المنتج", "en": "Product Name" } يمكن تحديد القيمة المخزنة باستخدام العنصر الفرعي "ar" للغة العربية والعنصر الفرعي "en" للغة الإنجليزية. لعرض القيم في تطبيقك، يمكنك استخدام حزمة "spatie/laravel-translatable" في Laravel لترجمة النصوص بسهولة. يمكنك استخدام الوظيفة "translatable()" لتحديد الأعمدة التي تحتوي على النص المترجم واستخدام الدالة "translate()" للوصول إلى النص المترجم للغة المحددة. على سبيل المثال: $product = Product::find(1); // الحصول على اسم المنتج بلغة معينة $productName = $product->translate('ar')->product_name; يمكنك أيضًا استخدام الوظيفة "locale()" للتحقق من اللغة الحالية المستخدمة في التطبيق وعرض النص المترجم باللغة المناسبة تلقائيًا. $product = Product::find(1); // الحصول على اسم المنتج باللغة الحالية في التطبيق $productName = $product->translate(app()->getLocale())->product_name; يمكن استخدام هذا النهج لعرض الوصف المترجم للمنتجات أيضًا. وسأشرح لك المزيد وتخزين البيانات المتعلقة باللغات في قاعدة البيانات يمكن أن يكون تحديًا في تطبيقات الويب متعددة اللغات. إذا كان لديك عمودين فقط في جدول قاعدة البيانات واحد يتعلق بالاسم والآخر بالوصف، وتريد ترجمة قيمهما للغات المختلفة، فيمكن استخدام حزمة "spatie/laravel-translatable" في Laravel. قبل البدء في الاستخدام، يجب تثبيت الحزمة باستخدام مدير الحزم composer، باستخدام الأمر التالي: composer require spatie/laravel-translatable يمكن تحويل العمود الذي يحتوي على الاسم والعمود الذي يحتوي على الوصف إلى حقول قابلة للترجمة باستخدام خاصية "translatable" من الحزمة، على النحو التالي: use Spatie\Translatable\HasTranslations; class Product extends Model { use HasTranslations; public $translatable = ['product_name', 'product_description']; // ... } تم تحويل العمودين "product_name" و "product_description" إلى حقول قابلة للترجمة باستخدام الخاصية "translatable". بعد ذلك، يمكن إدخال البيانات المتعلقة بالترجمة في قاعدة البيانات باستخدام تنسيق JSON المعتمد من Laravel، كما أوضحته في إجابتي السابقة. يمكن الوصول إلى قيمة الحقل المترجم باستخدام الدالة "translate()"، على النحو التالي: $product = Product::find(1); // الحصول على اسم المنتج بلغة معينة $productName = $product->translate('ar')->product_name; // الحصول على وصف المنتج بلغة معينة $productDescription = $product->translate('ar')->product_description; إذا كنت تريد عرض النص المترجم للغة المحددة في تطبيقك، يمكن استخدام الدالة "locale()" للتحقق من اللغة الحالية للمستخدم وعرض النص المترجم باللغة المناسبة، على النحو التالي: $product = Product::find(1); //

يمكن حل هذه المشكلة باستخدام الخطافات فقط، بإضافة حالة إضافية لتعقب حالة الكرسي إذا كان قيمته true أو false وفي الحالة الأولى يتم تغيير لون الكرسي إلى اللون المختلف، وإذا تم النقر على الكرسي مرة أخرى والحالة الثانية تصبح صحيحة، يتم إزالة اللون المختلف. يمكن تنفيذ هذا الحل على النحو التالي: const [isSelected, setIsSelected] = useState(false); const handleClick = () => { setIsSelected(!isSelected); }; const seatClasses = classNames('seat', { selected: isSelected }); return ( <div className={seatClasses} onClick={handleClick} > Seat </div> ); في هذا المثال، نستخدم "classnames" لتحقيق تحكم أفضل في فئات الكراسي وتغييرها بين "seat" و "seat selected" بناءً على الحالة الحالية لـ "isSelected".

هناك تعارض بين الإصدارات المستخدمة في package.json، ولذلك عندما يتم التثبيت تتوقف العملية. ولحل تلك المشكلة أشرت إليك باستخدام التالي: يتم استخدام: npm install --force @craco/craco عادةً عندما يحدث خطأ في تثبيت الحزمة باستخدام npm install العادي. وعند استخدام --force ، يتم تجاهل أي أخطاء وتمرير تركيب الحزمة بشكل صارم دون مراجعة أي اعتمادات أو مشكلات تثبيت أخرى. وإذا استمرت المشكلة استخدم الأمر التالي: npm install --legacy-peer-deps @craco/craco ونستخدمه عندما تكون هناك مشكلات في التثبيت المتعلقة بتعارضات اعتمادات النداء الزوجي. تعارضات اعتمادات النداء الزوجي (Peer Dependency conflicts) هي مشكلات تحدث عندما تحتوي حزمة معينة على تبعيات (dependencies) متضاربة مع تبعيات أخرى للحزم المراد تثبيتها. وهذا يحدث عندما تتطلب حزمة ما تثبيت حزمة تعتمد عليها بشكل مباشر ولكن يوجد نسخة من هذه الحزمة مثبتة بالفعل في مشروع الـ Node.js الذي يتم تثبيت الحزمة فيه. ولذلك ، فإن حل تعارضات الاعتمادات الزوجية يتطلب حلاً للتبعيات المتضاربة وذلك بتحديد أي من الحزم يجب أن تكون مثبتة بأي إصدارات.

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

يمكن توسيط عنصر div باستخدام العديد من الطرق المختلفة في CSS. ومن بين هذه الطرق: 1- استخدام margin: auto يمكن توسيط العنصر div بوضع margin: auto له. يجب على العنصر div أن يكون له عرض محدد ويجب أن يكون محيطه الخارجي مفعلًا. مثال: HTML: <div class="container"> <p>Hello, World!</p> </div> CSS: .container { width: 50%; margin: auto; } 2- استخدام flexbox يمكن استخدام Flexbox لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: flex ويجب أن يستخدم justify-content: center و align-items: center. مثال: HTML: <div class="container"> <p>Hello, World!</p> </div> CSS: .container { display: flex; justify-content: center; align-items: center; height: 100vh; } 3- استخدام grid يمكن استخدام CSS grid لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: grid ويجب على العنصر الفرعي (child element) أن يكون له grid-column و grid-row محدد. مثال: HTML: <div class="container"> <p>Hello, World!</p> </div> CSS: .container { display: grid; place-items: center; height: 100vh; } .container p { grid-column: 1 / -1; grid-row: 1 / -1; text-align: center; } يجب تحديد height للعنصر الرئيسي في حال استخدام Flexbox أو Grid، حتى يتم توسيط العنصر الفرعي بشكل صحيح. يمكن استخدام قيمة نسبية مثل vh لضمان أن الارتفاع يمتد عبر جميع شاشات العرض بشكل صحيح.

لتمديد الصورة باستخدام CSS يمكن استخدام الخواص التالية: width: تحديد عرض الصورة. height: تحديد ارتفاع الصورة. max-width: تحديد أقصى عرض مسموح به للصورة. max-height: تحديد أقصى ارتفاع مسموح به للصورة. min-width: تحديد أدنى عرض مسموح به للصورة. min-height: تحديد أدنى ارتفاع مسموح به للصورة. object-fit: تحديد كيفية تمدد الصورة في العنصر الأب (contain أو cover أو fill أو none أو scale-down). مثال: img { width: 800px; height: 600px; max-width: 100%; object-fit: contain; } في هذا المثال ، تم تحديد عرض الصورة وارتفاعها وأقصى عرض مسموح به للصورة ، بالإضافة إلى تحديد كيفية تمدد الصورة في العنصر الأب باستخدام خاصية object-fit. يمكن استخدام الخصائص الأخرى المذكورة أعلاه بنفس الطريقة. يمكن استخدام خاصية transform في CSS لتحويل الصورة بشكل أفقي أو رأسي أو للتحكم في حجمها ودورانها وموقعها. تشمل بعض القيم الشائعة لخاصية transform: rotate: لدوران الصورة. scale: لتحجيم الصورة. translate: لتحريك الصورة. skew: لإمالة الصورة. مثال: img { width: 800px; height: 600px; transform: rotate(45deg) scale(1.5); } في هذا المثال ، تم تحديد عرض الصورة وارتفاعها ، وتم دورانها 45 درجة وتكبير حجمها بنسبة 1.5 باستخدام خاصية transform. يمكن استخدام القيم الأخرى للخاصية transform لتعديل الصورة بأي شكل تريده.