Mustafa Suleiman

في المثال، الدالة setTimeout ليست فعلاً async ولا تعود بقيمة Promise، حيث أن الدالة setTimeout تستخدم لتأجيل تنفيذ كود معين بعد فترة زمنية محددة. إليك توضيحًا لتسلسل الأحداث في المثال: طباعة السطر "1: execute". تُستدعى دالة setTimeout وتُمرر إليها وظيفة مستدعاة للتنفيذ (console.log('moath')) وفترة زمنية بالمللي ثانية (1000 مللي ثانية أو 1 ثانية). طباعة القيمة المُرجعة من setTimeout. هذه القيمة هي معرّف للمؤقت (timeout) المنشئ ويمكن استخدامه لإلغاء المؤقت في حالة الحاجة، القيمة المُرجعة هي رقم يُمثل المؤقت. طباعة السطر "2: execute". تنفيذ الوقت المُحدد للمؤقت (1 ثانية) ويتم طباعة "moath". لاحظ أنه لا يتم استخدام await في المثال، وبالتالي لا يتأثر تسلسل الأحداث بوجودها. ,إذا كنت ترغب في استخدام await مع setTimeout، فتستطيع استخدام setTimeout داخل دالة مستدعاة async واستخدام await معها، كما يلي: (async () => { console.log("1: execute"); const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); await delay(1000); console.log("moath"); console.log("2: execute"); })(); دالة delay تستخدم setTimeout داخل Promise، ومن ثم يتم استخدام await لاستدعاء الدالة delay وتأجيل تنفيذ الكود التالي حتى ينتهي الوقت المُحدد، مما يضمن تسلسل تنفيذ الأحداث كما هو متوقع.

عليك بالبحث عن قالب الصفحة الذي يعرض صفحة المنتجات، والذي عادةً ما يكون اسمه "archive-product.php" أو شبيه به. بعد العثور على القالب، قم بمراجعة الكود المستخدم في القالب وتحقق مما إذا كان هناك أي شروط تفصل بين المستخدمين المسجلين وغير المسجلين. فقد يكون هناك كود مثل if (is_user_logged_in()) يحدد تصميم الصفحة بناءً على حالة تسجيل الدخول. وإذا وجدت أي شروط تميز بين المستخدمين المسجلين وغير المسجلين، تستطيع تعديل الكود لجعل التصميم متجانسًا بين الصفحتين، فإما إزالة الشرط تمامًا أو تعديله بحيث يعرض التصميم نفسه لكلا النوعين من المستخدمين. أو حاول استخدام التنسيقات المخصصة Custom CSS في القالب من أجل عرض التنسيقات بشكل موحد.

يبدوا أن المشكلة تتعلق بأحد الدورات لذلك أرجو منك التعليق أسفل فيديو الدورة المتعلق بالسؤال. والمشكلة تحدث عند تشغيل أمر npm run start في مشروع Node.js. وتعني أنه يتعذر تشغيل Babel بالإصدار الصحيح. يوضح الخطأ أن الإصدار المطلوب هو Babel "^7.0.0-0" ولكن الإصدار المثبت هو "6.26.3"، أي يحدث هذا الخطأ عندما يتعارض إصدار Babel المثبت مع إصدار الإعدادات الخاصة بالمشروع. حاول تنفيذ التالي: 1- تثبيت الإصدار الصحيح من Babel. يمكنك استخدام الأمر التالي لتثبيت Babel بالإصدار الصحيح: npm install --save-dev @babel/core @babel/cli @babel/preset-env 2- تحقق من إعدادات ملف package.json في مشروعك وتأكد من أن الإصدار المطلوب من Babel معرف بشكل صحيح في قسم "devDependencies". 3- حذف مجلد node_modules في مشروعك وأعد تثبيت الحزم المعتمدة بواسطة الأمر التالي: npm install 4- إذا كنت تستخدم ملف .babelrc أو babel.config.js لإعداد Babel، تحقق منهما للتأكد من أن الإعدادات صحيحة وتتوافق مع الإصدار الجديد. بعد اتباع هذه الخطوات، قم بتشغيل npm run start مرة أخرى ويجب أن تتمكن من تشغيل المشروع بنجاح. وإذا استمرت المشكلة حاول القيام بالتالي: 1- تحديث المكونات الإضافية الخاصة بـ Babel، من خلال الأمر التالي: npm update --save-dev @babel/core @babel/cli @babel/preset-env 2- تحديث مكتبة Nodemon. قم بتشغيل الأمر التالي لتحديث Nodemon: npm update --save-dev nodemon 3- حذف ملف package-lock.json ثم قم بتشغيل الأمر npm install مرة أخرى لإعادة تثبيت الحزم المعتمدة. 4- قد يكون هناك تعارض في إصدارات الحزم المثبتة في مشروعك، فحاول بتحديث جميع الحزم المثبتة بواسطة الأمر التالي: npm update

يستخدم شرط "if" لتغيير قيمة متغير يسمى "todos" استنادًا إلى قيمة متغير آخر يسمى "showTodo". و تعريف "todos" باستخدام useState() ، وهو Hook خطاف يستخدم في React لإنشاء وإدارة حالة المكونات. وإذا كانت قيمة "showTodo" تساوي 'active' ، تستخدم دالة "filter()" على "todos" لاستبعاد العناصر التي لديها "status" معقمة (false) والحفاظ فقط على العناصر التي لديها "status" غير معقمة (true). وتعدل قيمة "todos" لتكون هذا النتيجة ومن ثم يتم طباعتها في وحدة التحكم باستخدام console.log(). باختصار، ما يحدث هو تصفية وتعديل قيمة "todos" بناءً على قيمة "showTodo" واستخدام الدالة "filter()" للحصول على مجموعة من العناصر المطلوبة، والتي تعتمد على حالة "status" لكل عنصر في "todos".

ربما السبب هو وجود اختلاف في تكوين القوالب أو القوالب المستخدمة لعرض صفحة المتجر لكل فئة. فعند استخدام WooCommerce، تستخدم قوالب WordPress لعرض صفحات المتجر والمنتجات. يمكن أن تكون هناك قوالب مخصصة لصفحة المتجر للمسجلين وقوالب مختلفة للغير مسجلين. حاول التحقق من إعدادات القوالب في موقعك والتأكد من أنه ليس هناك تعيين مختلف للمسجلين والغير مسجلين، وتستطيع الوصول إلى إعدادات القوالب عن طريق لوحة تحكم WordPress والتنقل إلى "مظهر" ثم "محرر القوالب"، أيضًا قد تحتاج أيضًا إلى التحقق من إعدادات WooCommerce والتأكد من أن السمات تعرض بنفس الطريقة للمستخدمين المسجلين والغير مسجلين. أو حاول استخدام تنسيقات CSS مخصصة وتطبيقها على القالب لعرضه بشكل سليم للجميع.

App ID هو هوية فريدة تُعرف في بيئة تطوير Apple وتُستخدم لتمييز التطبيقات الخاصة بك عند توزيعها أو تحديثها. يحتوي App ID على سلسلة نصية مميزة تُعبر عن هوية التطبيق. عند إنشاء تطبيق جديد، يتم إنشاء App ID خاص به ويكون له تكوين معين يشمل معلومات مثل Bundle Identifier والخدمات المرتبطة بالتطبيق مثل Push Notifications وApp Groups وغيرها. Bundle Identifier مُعرّف فريد للتطبيق في إطار التطوير ويستخدم لتمييز التطبيق على نظام iOS، ويتم تعريف Bundle Identifier في مشروعك في Xcode ويتم استخدامه كمعرّف للتطبيق أثناء عملية التطوير والبناء. وقد يحتوي Bundle Identifier على نفس القيمة التي تستخدمها في App ID، ولكنها ليست نفس الشيء. باختصار، Bundle Identifier هو المعرّف الذي يتم استخدامه أثناء تطوير وبناء التطبيق في Xcode، في حين أن App ID هو المعرّف الفريد في بيئة تطوير Apple ويستخدم لتمييز التطبيق أثناء توزيعه على Apple App Store أو استخدام الخدمات المرتبطة بالتطبيق. لذلك تأكد من استخدام Bundle Identifier الصحيح في Xcode و وجود App ID صحيح مقابله في حسابك على موقع مطوري Apple.

المشكلة تكمن في وجود علامة غير صحيحة في المسار الذي تحاول من خلاله تشغيل المشروع، فالعلامة "$" ليست حرفًا صالحًا في أسماء المجلدات في نظام التشغيل Windows، ويجب تجنب استخدام هذه العلامة في أسماء المجلدات. باعتبار أنه تم حذف العلامة "$" من المسار وتم إعادة تسمية المجلد الخاص بك إلى "courses-projects"، فقد تم حل المشكلة. الآن يمكنك تشغيل الأمر npm start دون وجود خطأ. ويجب أن تتجنب استخدام الأحرف الخاصة أو الرموز المحظورة في أسماء المجلدات عند إنشاء مشاريع React أو أي مشروع آخر، ويُفضل استخدام الأحرف الأبجدية والأرقام والشرطة (-) أو الشرطة السفلية (_) في أسماء المجلدات والملفات لتجنب أي مشاكل محتملة. ولعلك تتسائل هل من الأفضل تسمية مجلد المشروع بالشكل courses-projects أو courses projects؟ في الحقيقة يمكن استخدام أي منهما، ولكن هناك بعض النصائح التي يمكن أن تساعدك في اختيار اسم المجلد بشكل أفضل: استخدم الشرطة (-) أو الشرطة السفلية (_) لفصل الكلمات في اسم المجلد، فهو يساعد في جعل الاسم أكثر وضوحًا وقابلية للقراءة. وأيضًا عند التعامل مع المجلدات أثناء العمل على سيرفر بعد نشر المشروع على خادم الويب أو استضافته في بيئة إنتاجية، فقد تواجه مشاكل إذا كان هناك أحرف خاصة أو أحرف غير صالحة في اسم المجلد. واستخدام الشرطة (-) يقلل من حدوث هذه المشاكل ويجعل عملية النشر أكثر سلاسة. تجنب استخدام الأحرف الخاصة أو الرموز المحظورة، فقد تتسبب هذه الأحرف الخاصة في مشاكل في بعض الأنظمة أو الأدوات. اختر اسمًا وصفيًا وموضحًا يعكس طبيعة المشروع، مما يساعد الآخرين على فهم المشروع بسرعة.

سأوضح لك خطة عامة لتنفيذ نظام CRUD لتسجيل الشكاوى للموظفين، بما في ذلك تسجيل الفيديو والصورة وعرضها: 1- إعداد قاعدة البيانات إنشاء قاعدة بيانات جديدة للمشروع. إنشاء جدول لتخزين بيانات الموظفين، وتستطيعي تضمين الحقول التي تحتاجها مثل الاسم، والبريد الإلكتروني، والوظيفة، وما إلى ذلك. 2- إعداد نموذج الموظف إنشاء نموذج لبيانات الموظفين باستخدام Laravel's Eloquent ORM. ضمن النموذج، عليك بتعريف الحقول اللازمة مثل الاسم، والبريد الإلكتروني، والوظيفة، وخلافه. 3- إنشاء صفحة التسجيل إنشاء واجهة المستخدم لتسجيل بيانات الموظفين. استخدمي حقول الإدخال لجمع المعلومات الأساسية مثل الاسم والبريد الإلكتروني والوظيفة. إضافة زر أو حقل تحكم لفتح كاميرا الويب وتسجيل الفيديو، وتستطيعي استخدام JavaScript وواجهة برمجة تطبيقات WebRTC لتحقيق ذلك. 4- معالجة البيانات إنشاء وظيفة لمعالجة بيانات الاستمارة المرسلة من صفحة التسجيل. داخل هذه الوظيفة، استخدمي طرق Laravel لإنشاء سجل جديد في قاعدة البيانات باستخدام بيانات الموظف المقدمة. حددي مسارًا لتخزين الفيديو المسجل في الملفات، ويتوفر ميزة التخزين المؤقت في Laravel . وسأشرح لك مثال: إنشاء وظيفة في طبقة التحكم (Controller) لمعالجة بيانات الاستمارة المرسلة من صفحة التسجيل، باسم store أو اسم آخر مناسب. داخل هذه الوظيفة، استخدمي طرق Laravel لإنشاء سجل جديد في قاعدة البيانات باستخدام بيانات الموظف المقدمة، وتستطيعي استخدام النموذج المرتبط بالموظفين (Employee Model) والوصول إلى الحقول المناسبة مثل الاسم والبريد الإلكتروني والوظيفة. تعيين المسار الذي سيتم تخزين الفيديو المسجل فيه باستخدام ميزة التخزين المؤقت في Laravel من خلال store() لحفظ الملف المؤقت في المجلد المناسب. تحديد حقل النص في قاعدة البيانات الذي يحتوي على مسار الفيديو المسجل، واستخدمي الدالة setAttribute() في نموذج الموظف (Employee Model) لتعيين قيمة المسار الذي تم تخزينه. بعد الانتهاء من تخزين المسار وإنشاء السجل في قاعدة البيانات، عليك بتنفيذ أي إجراءات إضافية تحتاجها مثل تنفيذ إشعار للمستخدم أو إعادة توجيهه إلى صفحة أخرى. 5- تخزين الفيديو والصورة بمجرد تسجيل الفيديو من كاميرا الويب، قومي بتخزينه في مجلد مؤقت في الخادم باستخدام Laravel's Filesystem. استخدمي حقل النص في جدول الموظفين لتخزين مسار الفيديو المؤقت. تكوين Laravel لمعالجة تحميل الملفات ونقل الفيديو من المجلد المؤقت إلى مجلد دائم في الخادم. 6- عرض البيانات والفيديو إنشاء صفحة لعرض بيانات الموظفين المسجلة، بما في ذلك الفيديو والصورة المسجلة. استرجعي بيانات الموظفين من قاعدة البيانات باستخدام Eloquent ORM. عرض البيانات في صفحة العرض وقم بتضمين مشغل الفيديو لعرض الفيديو المسجل. 7- التعامل مع CRUD العادي تحديث واجهة المستخدم لتمكين إجراءات CRUD العادية على بيانات الموظفين، مثل إضافة وتعديل وحذف. تنفيذ وظائف CRUD اللازمة في طبقات التحكم (Controllers) باستخدام Eloquent ORM ومكونات Laravel. 8- تحسينات إضافية تستطيعي تنفيذ تحسينات إضافية، مثل إضافة ميزات التحقق من صحة الملفات المرفوعة وتحويل الصورة أو الفيديو إلى صيغة معينة قبل التخزين. وإذا كان هناك أي نقطة غير واضحة أخبريني وسأوضحها لكِ.

هناك طرق أخرى لإضافة الامتداد ".html" إلى الرابط، وإحدى الطرق البسيطة هي استخدام دالة strcat لدمج النصوص: <?php require_once('/config.php'); require_once('includes/url_slug.php'); if(isset($_GET['change'])){ $new_url = $site_url."/s/".cano($_GET['q']); $new_url .= ".html"; header("Location: ".$new_url); } $search_term = urlencode($_GET['q']); $save_search = cano($_GET['q']); $search_title = str_replace("-", " ", $save_search); $search_title = ucwords($search_title); ?> من خلال إنشاء متغير جديد يسمى $new_url وبدمج القيمة cano($_GET['q']) مع النص "/s/" وبعد ذلك دمج النص ".html" إلى النهاية باستخدام عملية الدمج (.). ثم استخدام القيمة المدمجة في عبارة header("Location: ...")، والنتيجة إضافة الامتداد ".html" إلى الرابط المطلوب.

من خلال الصور المشكلة في إنشاء Certificates, Identifiers & Profiles لنشر التطبيق على Apple App Store، ورسالة الخطأ تعني أن هوية التطبيق (App ID) التي تقوم بإدخالها غير متاحة. تأكد من أنك تستخدم ال Bundle Identifier الصحيح الذي يُطابق الذي في مشروعك في Xcode، وتستطيع التحقق من ذلك بفتح مشروعك في Xcode والتحقق من قيمة Bundle Identifier في قسم General للمشروع. قم بزيارة موقع مطوري Apple (https://developer.apple.com/account/) وتسجيل الدخول باستخدام حسابك. تأكد من أن لديك حساب Apple Developer صالح ومفعل وأنك تستخدمه لإنشاء Certificates, Identifiers & Profiles. التحقق من أن لديك App ID بنفس القيمة التي تستخدمها في Bundle Identifier، وإذا لم يكن لديك App ID بهذه القيمة، فيجب عليك إنشائه في حسابك على موقع مطوري Apple. إعادة توليد Certificates, Identifiers & Profiles بناءً على المعلومات الصحيحة وحاول مرة أخرى إنشاء التوثيقات اللازمة.

نعم صحيح، في الكود الأول، قمت بتمرير arrow function إلى onClick، وليس function عادية، يعني استدعاء الـ changeStatus داخل onClick سيتم فقط عند النقر على العنصر المحدد، وليس عند تحميل الصفحة.

عند استدعاء الـ function داخل onClick، هناك اختلاف بين استخدام الـ function العادية واستخدام arrow function. فعند استخدام الـ function العادية، تستدعى الـ function مباشرةً عند تحميل الصفحة. مما يعني أن الـ function ستُستدعى وتنفّذ مرة واحدة عند تحميل الصفحة، وليس عند النقر فعليًا على العنصر الذي يحتوي على الـ onClick، وذلك غير مرغوب فيه، لأنه يعني أن الـ function ستنفّذ قبل النقر على الزر أو العنصر المستدعى. أما عند استخدام arrow function، فإنها تُستدعى فعليًا عند النقر على العنصر المحدد. في الكود الأول، تم استخدام arrow function لاستدعاء changeStatus داخل onClick، وبالتالي، سيتم استدعاء الـ function فقط عندما يتم النقر فعليًا على العنصر. وبالنسبة للكود الثاني، فلا يوجد حاجة لاستدعاء addTodoTo في onClick مرتين. يكفي استدعائها مرة واحدة في onSubmit في الـ <form>، حيث ستتم معالجة الحدث عند النقر على زر الإرسال (submit) في النموذج. بخصوص للاستفسار الأخير، onClick={addTodoTo()} هو استدعاء فوري للـ function عند تحميل الصفحة، وليس عند النقر فعليًا على العنصر. ويجب استخدامها بالشكل التالي onClick={addTodoTo} دون استدعاء فوري بواسطة الأقواس ().

عليك بقراءة المقالات التالية: وعلي يوتيوب إذا قمتي بالبحث عن الحلقات التكرارية في بايثون ستجدي شرح وافي.

الرسالة التي تظهر "Failed to load resource: the /games-frame/api/gam./gold-of-west/bet:1 server responded with a status of 400" تعني أن هناك خطأ في تحميل مورد محدد من الخادم. السبب الأكثر احتمالًا لهذا الخطأ هو أن الطلب المرسل من العميل إلى الخادم غير صحيح، فغالبًا ما يكون رمز الاستجابة 400 يشير إلى أن هناك خطأ في الطلب من العميل. هناك عدة أسباب محتملة لحدوث هذا الخطأ: 1- قد يكون هناك خطأ في صياغة الطلب المرسل إلى الخادم، مثل وجود معلمة مفقودة أو قيمة غير صالحة. 2- لا تمتلك الصلاحيات الكافية للوصول إلى المورد المطلوب من الخادم. 3- خطأ في تكوين الخادم أو برمجيته، مما يتسبب في عدم قدرته على معالجة الطلب المرسل بشكل صحيح. وكنصيحة إذا كان ليس لديك خبرة برمجية، فلن تتمكن من فعل شيء بالكود، حيث يجب فهم ما الذي تريده وكيف يمكن تنفيذ ذلك وما الذي يفعله الكود بالنسبة للموقع الذي تريد استخدامها به. لذلك من الأفضل تعلم أساسيات HTML وجافاسكريبت:

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

لا مشكلة تستطيع رفع مجلد المشروع لتفقده، فلا يمكن معرفة ذلك بدون رؤية الكود والملفات.

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

1- ليس من الضروري عمل مشاريع باستخدام class components. في React، وتستطيع استخدام كلا النوعين من المكونات (function components و class components) لبناء تطبيقاتك. ولكن function components أصبحت الأسلوب الأكثر شيوعًا في الوقت الحالي بسبب مزاياها مثل بساطتها وقراءتها واختبارها، بالإضافة إلى استخدام الـ hooks التي تقدمها React. 2- قوة استخدام class components تكمن في إمكانية استخدام مفهوم الحياة الداخلية (lifecycle) للمكونات. حيثث تتوفر للـ class components مجموعة من الطرق (methods) المدمجة مثل componentDidMount و componentDidUpdate و componentWillUnmount وغيرها، تسمح لك بالتحكم في سلوك المكون بناءً على حالات معينة في دورة حياته. هذا يمكن أن يكون مفيدًا في حالات استخدام الحالة المحلية للمكونات (local state) أو التفاعل مع APIs الخارجية بطرق تقليدية. ومع ذلك، في React 16.8 تم إدخال الـ hooks الذي يتيح لك استخدام حالة المكون (state) والحياة الداخلية (lifecycle) في function components أيضًا. وبفضل الـ hooks مثل useState و useEffect و useContext، أصبح بإمكان function components القيام بمعظم الوظائف التي يمكن القيام بها باستخدام class components بشكل أسهل وأنظف وبالتالي يعتبر استخدام function components والـ hooks هو الأسلوب الموصى به في الوقت الحالي.

تحقق من التالي وأخبرني بالنتيجة: 1- تحتاج إلى التأكد من وجود الخط العربي (arb.ttf) في نفس المجلد الذي يحتوي على الكود الخاص بك. تحقق من صحة اسم الملف ومكانه. 2- أنت تستخدم حزمة arabic_reshaper لإعادة تشكيل النص العربي، لذلك تأكد من تثبيت الحزمة بشكل صحيح باستخدام أداة إدارة الحزم pip. وسبب الخطأ الذي يظهر لك هو أنه يوجد مشكلة في القيم المستخدمة لتعيين الخريطة الحرفية (cmap) في ملف الخط العربي الذي تستخدمه (arb.ttf). وتلك الأخطاء تحدث عندما يكون ملف الخط غير صحيح أو غير متوافق مع مكتبة FPDF، لذلك تأكد من التالي: 1- ملف الخط العربي (arb.ttf) الذي تستخدمه هو ملف صالح وغير تالف، وقد تحتاج إلى تحميل ملف خط عربي آخر وتجربته للتأكد من أنه ليس المشكلة. 2- تحديث مكتبة FPDF إلى أحدث إصدار متاح مما قد يصلح بعض الأخطاء وتحسين التوافق مع ملفات الخط عبر التحديثات. 3- التحقق من أن جميع الاعتماديات اللازمة مثبتة بشكل صحيح، بما في ذلك bidi.algorithm و arabic_reshaper. استخدم الأمر التالي لتثبيت الحزم: pip install python-bidi pip install arabic-reshaper في حالة استمرار المشكلة، حاول استخدام خطوط أخرى تتوافق بشكل أفضل مع مكتبة FPDF لدعم الكتابة العربية، مثل خطوط Amiri و Lateef و Droid Arabic Kufi وغيرها.

بعض النصائح البسيطة بالإضافة إلى ما تم ذكره: 1- التأني في فهم الأساسيات بشكل جيد ابدأ بفهم المفاهيم الأساسية في جافاسكريبت والبرمجة، مثل المتغيرات والتحكم في التدفق (عبارة if-else، حلقات التكرار، الدوال، إلخ). هذا سيساعدك في بناء أساس قوي لفهم اللغة. وقم بالتطبيق على مشاريع تستخدم جافاسكريبت فقط بدون أي إطار عمل، فعند تعلمي للبرمجة قمت بإنشاء مشاريع متوسطة الحجم من خلال جافاسكريبت فقط، وزدت درجة التعقيد تدريجيًا، مثلاً إنشاء موقع للعبة تخمين لرقم معين. ثم إنشاء موقع حساب بنكي ومحاكاة عمليات السحب والإيداع والتحويل، وإنشاء موقع لعرض الخرائط باستخدام مكتبة Leaflet وإمكانية تحديد نقاط وحساب مسافة بين نقطتين وإمكانية إنشاء تمرين للجري أو بالدراجة وحساب المسافة وإمكانية تعديل التمرين وعرض مكانك على الخريطة. أيضًا إنشاء موقع كامل يوفر لك البحث عن وصفات للطعام من خلال الإعتماد على API وإمكانية حفظ أو إضافة وصفات وهو مشروع ليس بالسهل حيث سيتعين عليك التلاعب بالـ DOM وإنشاء كلاسات لتنظيم المشروع. كل تلك المشاريع ستمكنك من تنمية مهارة التفكير المنطقي، وتستطيع البحث عن مشاريع جافاسكريبت أو JavaScript project وستجد شروحات على اليوتيوب وقم بالتنفيذ مرة مع الشرح ومرة بمفردك أو افهم الفكرة وقم بالتنفيذ ثم عد إلى الفيديو. أي يجب أن تحاول التكفير وتعصر ذهنك لإيجاد حلول حتى لو كانت سيئة في البداية المهم أنها تعمل. 2- حاول حل مشاكل برمجية بنفسك، اختر مشكلات صغيرة في البداية وحاول حلها بواسطة التفكير المنطقي. قم بتطبيق الأفكار التي تعلمتها وراقب نتائجك. ستلاحظ تحسنًا تدريجيًا في القدرة على حل المشاكل بشكل أكثر فعالية. 3- قم بقراءة الشيفرة المصدرية لمشاريع مفتوحة المصدر ومشاريع أخرى معروفة، وهذا سيساعدك في فهم كيفية تنظيم وبناء البرامج بشكل منطقي وفعال. 4- تعلم من الأخطاء وحاول مرة أخرى حتى تصل إلى حلول أفضل.

لحل تمرين 1 عليك بإتباع الخطوات التالية: 1- إعداد مشروع Vue.js جديد، أو استخدم مشروع Vue.js موجود بالفعل. 2- في ملف التطبيق الرئيسي، قم بتعريف المتغيرات التالية في كائن الـ "data": operand1 و operand2: تستخدم لتخزين قيمة المعاملين. operation: تستخدم لتخزين العملية الحسابية المحددة. result: تستخدم لتخزين نتيجة العملية الحسابية. كمثال: data() { return { operand1: 0, operand2: 0, operation: 'addition', result: 0 }; } 3- عليك بإنشاء واجهة المستخدم الخاصة بالتطبيق، حسب شكل التمرين أو الذي تريده أنت، وتستطيع استخدام عنصر <select> لاختيار العملية الحسابية وعناصر <input> لإدخال قيم المعاملين وعنصر <button> لتنفيذ العملية الحسابية. 4- قم بتعريف أسلوب للتحقق من قسمة المعاملين على الصفر وعرض رسالة مناسبة للمستخدم، وبإمكانك الإعتماد على التوجيهات الشرطية مثل v-if و v-show في Vue.js لإظهار أو إخفاء رسالة الخطأ. 5- تعريف الوظيفة التي تُطبق العملية الحسابية المحددة على المعاملين وتحسب النتيجة، وتتوفر التوجيهات الحسابية في Vue.js للقيام بذلك، مثلاً المثال، استخدم الكود التالي لتحقيق الجمع: methods: { calculate() { if (this.operation === 'addition') { this.result = this.operand1 + this.operand2; } else if (this.operation === 'subtraction') { this.result = this.operand1 - this.operand2; } else if (this.operation === 'multiplication') { this.result = this.operand1 * this.operand2; } else if (this.operation === 'division') { if (this.operand2 === 0) { this.result = 'Error: Division by zero!'; } else { this.result = this.operand1 / this.operand2; } } } } حيث قمت بتعريف دالة calculate التي تقوم بفحص العملية الحسابية المحددة وتقوم بتطبيقها على المعاملين للحصول على النتيجة. في حالة القسمة، وقمت بإضافة فحص إضافي للتأكد من أن المعامل الثاني ليس صفرًا، وإلا فإنه سيتم عرض رسالة خطأ مناسبة للمستخدم. 6- توصيل العناصر في واجهة المستخدم ببيانات التطبيق من خلال استخدام التوجيهات اللازمة في Vue.js. وتستطيع استخدام التوجيهة v-model لربط قيم المعاملين بحقول الإدخال والتوجيهة v-on:change للتحقق من تغيير العملية الحسابية. كمثال: <div> <input type="number" v-model="operand1"> <select v-model="operation"> <option value="addition">+</option> <option value="subtraction">-</option> <option value="multiplication">*</option> <option value="division">/</option> </select> <input type="number" v-model="operand2"> <button @click="calculate">Calculate</button> <p>Result: {{ result }}</p> </div> قمت بربط حقل إدخال operand1 بالمتغير operand1 في البيانات، وكذلك حقل إدخال operand2 بالمتغير operand2. وأيضًا بربط عنصر select بالمتغير operation. وعند النقر على الزر "Calculate"، ستتم استدعاء وظيفة calculate لتنفيذ العملية الحسابية وحساب النتيجة، والتي ستظهر في العنصر <p>.

الكود في الصورة خاص بإعدادات إضافة جوجل كروم، وهناك مشكلة به حيث يتم تشغيل ملفي jquery.js و popup.js، فهل ملف popup هو الملف الأساسي؟ إن لم يتم تحديد تشغيل أيًا من ملفات الإضافة أو التطبيق ولذلك عليك بقراءة الدليل أو المستند الخاص بالإضافة لرؤية ما هي الملفات التي من المفترض تشغيلها. ولا يمكن الحكم على الكود وما الذي يفعله بالضبط بدون رؤية باقي الكود الخاص بالإضافة، تستطيع مشاركة مجلد الإضافة بالكامل أو توفير صورة للخطأ الذي يظهر لك عند تشغيل الإضافة في الـ Console أي خطأ هنا كما في الصورة التالية: وتستطيع إظهار الكونسول من خلال الضغط على CTRL + SHIFT + j معًا في الكيبورد.

أرجو شرح المزيد في سؤال ما هي الإَضافات والمكتبات التي تستخدمها، ما هي المنصة، صورة للصفحة وما الذي تريد فعله بالضبط؟ وعلي أي حال، حاول تعديل الكود بالشكل التالي: </script> <script type='text/javascript'> //<![CDATA[ if (window['location']['href']['indexOf']('/p/checkout.html') > -1) { document['title'] = 'Checkout'; $('.item-post .post-body').html(` <div class="my-shopping"> <h2>معلومات الفاتورة</h2> <div class="cart-review-wrap"> <div id="contact" class="form-bret"> <form name="contact-form"> <label class="">الاسم&nbsp;<abbr class="required" title="required">*</abbr></label> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="" size="30" type="text" value=""/> <label class="">عنوان البريد الإلكتروني&nbsp;<abbr class="required" title="required">*</abbr></label> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="" size="30" type="text" value=""/> <label class="">رقم الهاتف وعنوان الشارع&nbsp;<abbr class="required" title="required">*</abbr></label> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="" rows="5"></textarea> <div class="checkout-wrap"> <div class="simpleCart_items"/> <div style="clear: both;"/> <div class="cart-bot-element"> <div class="cart-amount"> <div class="cart-subtotal">المجموع الفرعي: <span class="simpleCart_total"/></div> <h4>طلبك:</h4> <div class="carter">لديك <span class="simpleCart_quantity"/> عنصر(أ) في عربة التسوق الخاصة بك.</div> <div class="my-total">الإجمالي: <span class="simpleCart_total"/></div> </div> <a class="simpleCart_checkout" href="javascript:;"> <input class="checkout-bill" id="ContactForm1_contact-form-submit" type="button" value="تأكيد الطلب"> </a> </div> </div> </form> </div> </div> </div> <style>h1.post-title {display: none!important; }</style> `); }; if (window['location']['href']['indexOf']('/p/cart.html') > -1) { document['title'] = 'عربة التسوق'; $('.item-post .post-body').html(` <div class="my-shopping check"> <h2>عربة التسوق</h2> <div class="cart-review-wrap"> <div class="simpleCart_items"/> <div style="clear: both;"/> <div class="cart-bot-element"> <div class="cart-amount"> <div class="cart-subtotal">المجموع الفرعي: <span class="simpleCart_total"/></div> <h4>عربتك:</h4> <div class="carter">لديك <span class="simpleCart_quantity"/> عنصر(أ) في عربة التسوق الخاصة بك.</div> <div class="my-total">الإجمالي: <span class="simpleCart_total"/></div> </div> <a class="simpleCart_checkout" href="/p/checkout.html">المتابعة للدفع</a> </div> </div> </div> <style>.item-post h1.post-title { display: none!important; }</style> `); }; //]]> </script>

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

أثناء تعلم الدورة ستعرف أنه يتم البناء من خلال نمط تصميم MVC. وعند بناء موقع مثل Instagram أو متجر إلكتروني باستخدام دورة PHP والتركيز على الجانب الخلفي (backend) ستحتاج في الواقع إلى استخدام لغات وتقنيات الواجهة الأمامية (frontend) مثل HTML وCSS وJavaScript بالإضافة إلى إطار العمل Laravel ومكتبات مثل Bootstrap أو Tailwind CSS. بالنسبة للتعامل مع HTML، فستقوم بكتابة كود HTML داخل صفحات PHP لتقديم المحتوى المناسب وتجميع البيانات التي يتم استرجاعها من قاعدة البيانات وعرضها بطريقة ملائمة. وباستخدام إطار العمل Laravel، ستحصل على العديد من المزايا المتقدمة مثل التوجيه (Routing)، وإدارة قواعد البيانات، والتحقق من الصحة والأمان، وإنشاء API، وغيرها من الوظائف التي تسهل تطوير تطبيقات الويب. أما بالنسبة للتصميم والتنسيق، يمكنك استخدام أدوات مثل CSS وSass لتحسين تصميم الموقع وتطبيق الأنماط الخاصة بك. ويمكنك أيضًا استخدام إطار عمل CSS مثل Bootstrap أو Tailwind CSS لتسهيل وتسريع عملية تصميم وتنسيق الموقع. وفيما يتعلق بتجميع الملفات، يمكنك استخدام أدوات مثل Vite أو Webpack لتجميع وتحسين وتقليص حجم الملفات الأمامية (مثل CSS وJavaScript) وتحويلها إلى إصدارات أكثر كفاءة لتحسين أداء الموقع. إذاً، في عملية بناء موقع مثل Instagram أو متجر إلكتروني، يجمع العمل بين لغات الواجهة الأمامية وإطار العمل Laravel في الجانب الخلفي لتحقيق الوظائف المطلوبة وتقديم تجربة مستخدم متكاملة وجذابة. أي ما يحدث هو نمط "Server-side Rendering" (تقديم من الخادم) في بناء موقع مثل Instagram أو متجر إلكتروني باستخدام PHP وإطار العمل Laravel. ففي الـ Server-side Rendering، يتم تجهيز صفحات الويب على الخادم قبل أن يتم إرسالها إلى المتصفح. وعندما يقوم المستخدم بزيارة صفحة، وتنفيذ الكود PHP على الخادم لجمع البيانات اللازمة من قاعدة البيانات وإعداد صفحة HTML النهائية التي تحتوي على المحتوى المطلوب. وباستخدام إطار العمل Laravel، تستطيع تعريف المسارات (Routes) والمنطق المرتبطة بها في صفحات PHP مثل routes/web.php أو routes/api.php. فعند استلام طلب المستخدم، يتم تنفيذ الكود المناسب لجمع البيانات وإعداد صفحة HTML للرد على الطلب. مما يعني أن Server-side Rendering يعمل على توليد الصفحة النهائية على الخادم وإرسالها إلى المتصفح بشكل جاهز للعرض. وبالتالي المستخدم سيحصل على محتوى مرئي بشكل سريع عند تحميل الصفحة، حيث يتم تقديم المحتوى بشكل مسبق وتجهيزه على الخادم. وبخصوص اللغات الخاصة بالواجهة الأمامية، فمن خلال إشتراكك في الدورة ستحصل على وصول للمسارات الأولى من جميع الدورات الأخرى، وبالتالي ستتمكن من تعلم أساسيات HTML, CSS, JS. وسيتم شرح كل ما ذكرته في دورة PHP ولكن عليك بتعلم الأساسيات أولاً قبل البدء في الدورة، أي عليك برؤية المسار الأول من دورة دورة تطوير واجهات المستخدم و المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript .