Mustafa Suleiman

أنت تعمل على مشروع لارافيل صحيح؟ والمشكلة هو أنه يتم التوجيه بشكل مستمر بين عدة صفحات دون أن يتم الانتهاء من العملية، أي أن الخطأ يشير إلى وجود دورة توجيه لا نهائية بين الصفحات، لذلك تفقد التالي: من المحتمل أن هناك تكوين خاطئ في إعدادات الويب المخصصة، مثل ملف .htaccess إذا كنت تستخدم Apache، وتحقق من تكوينات الويب المخصصة وتأكد من أنها لا تسبب توجيهات لا نهائية. ربما لديك قواعد توجيه غير صحيحة في ملف routes/web.php أو في أي ملف آخر لتوجيه المسارات، لذلك تأكد من قواعد التوجيه الموجودة ومن عدم وجود دورات توجيه لا نهائية. قد يتم تخزين بعض المعلومات المؤقتة في ذاكرة التخزين المؤقتة، وقد تتسبب تلك المعلومات في توجيهات غير صحيحة، لذلك حاول حذف ملفات التخزين المؤقتة بتنفيذ الأمر php artisan cache:clear من سطر الأوامر في مجلد مشروع Laravel. وربما أيضًا يتم تخزين معلومات الجلسة التي قد تتسبب في التوجيهات المتكررة، فقم بمسح ملفات الجلسة عن طريق تنفيذ الأمر php artisan session:clear من سطر الأوامر.

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

المشكلة الأولى (CS5001) سببها أنه لا يتم العثور على طريقة Main الثابتة في البرنامج، وطريقة Main هي نقطة البداية الرئيسية لتنفيذ البرنامج، أي يجب أن تقوم بإضافة طريقة Main إلى الكود كالتالي: public static void Main(string[] args) { // الكود هنا } ولاحظ أنك قمت بكتابة Main بحرف m صغير وليس كبير. أما بالنسبة للمشكلة الثانية (CS8600)، فتحدث عندما تحاول تحويل قيمة قد تكون قيمة فارغة (null) إلى نوع غير قابل للاشتقاق مما يعني أنه تم استخدام قيمة قد تكون فارغة (null) في مكان لا يقبل القيم الفارغة. والصحيح هو استخدام Convert.ToInt32 لتحويل الإدخال المقروء من Console.ReadLine إلى قيمة صحيحة وتخزينها في المتغير age. ففي السطر name = Console.ReadLine(), إذا قام المستخدم بترك الإدخال فارغًا، فإن Console.ReadLine() ستعيد قيمة فارغة (null)، إذا كانت name معرفة كنوع غير قابل للاشتقاق (non-nullable type)، فسيحدث خطأ CS8600، وتستطيع يمكنك استخدام نوع قابل للاشتقاق لـ name من خلال استخدام string? بدلاً من string. وفي السطر age = Convert.ToInt32(Console.ReadLine()), إذا قام المستخدم بإدخال قيمة غير صحيحة أو ترك الإدخال فارغًا، فإن Console.ReadLine() قد تعيد قيمة فارغة (null). وبما أن age هو من نوع int (نوع غير قابل للاشتقاق)، فسيحدث خطأ CS8600، لذا عليك استخدام int? بدلاً من int لتجنب خطأ CS8600 وللسماح بتخزين القيمة الفارغة (null) في حالة إدخال غير صحيح. ولكن سيظهر لديك تنبيه آخر وهو CS8632: The annotation for nullable reference types should only be used in code within a '#nullable' annotations context. حيث أنه في لغة C# 8.0 وما بعدها، يمكن استخدام تعليقات Nullable Reference Types لتوضيح قابلية القيم الفارغة (nullability) للمراجعات، ويتم استخدامها لتوضيح ما إذا كانت المراجعات قد يتم تعيينها بقيمة فارغة (null) أم لا، ولكن، يجب تعيين السياق الخاص بتعليقات Nullable Reference Types باستخدام تعليمة '#nullable enable' في بداية الملف الذي يستخدم تلك التعليقات أي وضع السطر التالي: #nullable enable وبعد التعديلات السابقة يصبح الكود كالتالي: #nullable enable using System; namespace pl { class Program { static void Main(string[] args) { string? name; Console.WriteLine("enter your name"); name = Console.ReadLine(); Console.WriteLine("enter your age"); string? ageInput = Console.ReadLine(); int? age = !string.IsNullOrEmpty(ageInput) ? Convert.ToInt32(ageInput) : null; if (age > 20 && name != null) { Console.WriteLine($"welcome MR{name}"); } else if (name != null) { Console.WriteLine($"welcome {name}"); } } } } دروس ومقالات لغة C#‎ في أكاديمية حسوب

بخصوص مشكلة التعليق، أرجو منك غلق المتصفح بالكامل ثم إعادة فتحه وتجربة كتابة التعليق، وإذا استمرت المشكلة حاول تفقد هل هناك إضافة تسبب تلك المشكلة حاول تعطيل كل إضافة على حدى ثم التجربة، أو تجربة استخدام متصفح آخر. وربما قد يفيدك أيضًا حذف ملفات التخزين المؤقتة للمتصفح، عن طريق الضغط على CTRL + SHIFT + DELETE وستظهر لك نافذة تستطيع منها حذف كل البيانات من خلال الإختيار والضغط على clear data، ولكن لا أنصحك بحذف الكوكيز حتى لا يتم تسجيل خروجك من كل الحسابات في المواقع التي سجلت الدخول بها وستضطر إلى إعادة تسجيل الدخول. وبخصوص فهم الفرق بين block و inline-block فالأفضل شرح الفرق بين block و inline و inline-block: أولاً العناصر block تبدأ في سطر جديد وتأخذ عرضًا كاملاً في حاويتها، ويمكن أن تحتوي على هوامش (margins) وحشو (padding) وإطار (border) على جميع الجوانب، وأمثلة على العناصر block تشمل <div>، <p>، و <ul>. العناصر inline لا تبدأ في سطر جديد وتأخذ فقط العرض الذي تحتاجه، وبإمكانها أن تحتوي فقط على هوامش وحشو وإطار من الجانب الأيمن والأيسر فقط أي لا تستطيع تحديد طول وعرض لها، وأمثلة على العناصر inline تشمل <span>، <a>، و <img>. وهناك أمر هام يجب الإنتباه إلى إليه أنه في حالة استخدام التنسيق التالي على عنصر inline مثل span: span { padding: 12px; border: 14px solid red; } ستجد أنه يظهر إطار من الأعلى والأسفل وأيضًا حشو من الأعلى والأسفل، لكن كيف ذلك! ببساطة الحشو أو الإطار من الأعلى والأسفل لن يؤثر على طول العنصر وإذا قمت بزيادة القيمة ستجد أنه يتم الزيادة من الجانب الأيسر والأيمن بينما الأعلى والأسفل ستجد أنه يتم إنشاء منطقة إضافية حول النص تعتبر "منطقة تجاوز" (overflowing area) والتي لن تكون مرئية إلا إذا تم تعيين خلفية للعنصر كما في الإطار. بينما النص داخل الـ span ظل كما هو على نفس السطر ولم يرتفع أو ينخفض لأسفل. بمعنى أن الحشو (padding) أو margin أو الإطار للعناصر inline لا يؤثر على المسافة أعلى وأسفل العنصر - أي أن الخط (أو الخط الأساسي للنص) يكون في نفس الوضع الرأسي حيث سيكون (أو بالأحرى: هو) بدون الحشو، والحشو هنا ينشئ منطقة تتجاوز خلالها العناصر القائمة فقط إذا تم تحديد خلفية لها. أما عناصر inline-block هي عناصر متوسطة بين العناصر block و inline. ولا تبدأ في سطر جديد، ولكن يمكن أن تحتوي على هوامش وحشو وإطار، مما يجعلها خيارًا جيدًا للعناصر التي ترغب في التحكم في عرضها وارتفاعها، ولكنك لا ترغب في أن تبدأ في سطر جديد، وأمثلة على العناصر inline-block تشمل <input>، <select>، و <button>. شرح خـاصيه الـ Display بالقيم الخاصه بهاا بالتفصـيل معها أمثله

لتفهم سبب شهرته، أولاً هو إطار مفتوح المصدر تم تطويره من قبل مايكروسوفت، وتستطيع من خلاله بناء تطبيقات ويب تعمل على أي نظام، وأيضًا تطبيقات هاتف من خلال Xamarin. أيضًا C# هي لغة برمجة تم تطويرها بواسطة شركة Microsoft وتم إطلاقها لأول مرة في عام 2000 كجزء من منصة Microsoft .NET Framework، ومنذ ذلك الحين، أصبحت C# لغة برمجة رئيسية ومشهورة في تطوير تطبيقات الويندوز وتطبيقات الويب باستخدام ASP.NET وتطبيقات الأجهزة الذكية باستخدام منصة Xamarin. وقامت مايكروسوفت بدفع الكثير من المال وإجراء إتفاقيات من أجل دعم استخدام ASP.NET في المؤسسات الكبيرة الحكومية وإنشاء دورات تدريبية من أجل توفير مطوري ASP.NET في سوق العمل، أيضًا هناك تبرعات تقوم بها مايكروسوفت لدول العالم الثالث! كل سنة. ولذلك ستجد أنه يتم تدريس واستخدام لغات وتقنيات تابعة لمايكروسوفت حصرًا. وانتبه إلى أن ASP.NET هو إطار عمل لتطوير تطبيقات الويب على الجانب الخادم (الواجهة الخلفية، أي نستخدمه لبناء وتشغيل خادم الويب الذي يتعامل مع الطلبات من المتصفحات ويُنشئ الاستجابات الملائمة للعملاء. ويعمل ASP.NET على معالجة المنطق والتفاعل مع قواعد البيانات وتنسيق البيانات وإدارة الحالة والمزيد من الوظائف التي تتطلبها تطبيقات الويب. وASP.NET Core هو إطار عمل حديث يدعم أحدث تقنيات تطوير الويب، مثل Razor Pages و Blazor." حيث أن Razor Pages وهي نموذج بناء الصفحات في ASP.NET Core. تمكن المطورين من بناء صفحات الويب بناءًا على بنية بسيطة، حيث يتم دمج ترميز HTML وكود C# الخادمي في ملف واحد، وبالتالي تساعد تلك الطريقة على إنتاج كود نظيف وقابل للصيانة، مما يجعل عملية تطوير وصيانة تطبيقات الويب أسهل. أما Blazor هو إطار عمل ويب مبتكر يتيح للمطورين بناء تطبيقات ويب تفاعلية عميلية باستخدام لغة C# بدلاً من JavaScript، وباستخدام Blazor، يمكن للمبرمجين كتابة الكود على الجانب العميل والجانب الخادم بلغة C#، مما يوفر لغة برمجة موحدة في جميع أجزاء التطبيق. وبذلك، يتم الاستغناء عن الحاجة إلى التبديل بين لغات برمجة مختلفة ويتم تبسيط عملية التطوير.

سبب المشكلة هو أنك كتبت دالة setTimeout بشكل غير صحيح، ففي جافاسكريبت يتم إعتماد طريقة camel Case في الأسماء أي أن كل كلمة بعد الأولى تبدأ بحرف كبير، لاحظ أنك كتبت settimeout بينما الصحيح هو setTimeout لاحظ حرف t كبير وليس صغير.

أرجو منك التعليق أسفل فيديو الدورة الخاص بالسؤال حيث ستجد قسم خاص بالتعليقات، وطرح الأسئلة العامة هنا في قسم أسئلة البرمجة. والكود الذي وضحته وهو التالي لا يوجد به مشكلة حيث سيتم طباعة hello بعد فترة 3 ثواني: const wait = time => new Promise( (resolve, reject) => setTimeout(resolve, time) ) wait(3000).then(() => console.log('hello')) فما هو الخطأ الذي يظهر لك في الكونسول؟ وإليك تفسير الكود: نستخدم الوظيفة wait لإنشاء وعد (Promise) يتأخر لفترة محددة من الوقت المحدد كمعامل (time)، ثم حل الوعد (resolve) بعد انتهاء الفترة المحددة وهي لمدة 3000 ميلي ثانية (3 ثوانٍ)، ثم يتم طباعة "hello" عندما يتم حل الوعد.

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

المشكلة بسبب استخدام دالة useReducer في TypeScript بشكل غير صحيح، حيث يجب أن تحدد نوع الـ reducer الخاص بك بشكل صحيح، وتتوقع useReducer أن تمرر reducer يستقبل حالة وإجراء ويعيد الحالة الجديدة، ووفقًا للواجهة التي قمت بتعريفها، الدالة reducerFunction من المفترض أن تعيد حالة جديدة من نوع state وليس void. وتستطيع تحديد النوع العام للـ reducer كالتالي: function reducerFunction(state: state, action: action): state { // ... } وبذلك تحدد أن الدالة reducerFunction ستعيد حالة جديدة من نوع state وليس void، وبالتالي يتوافق مع متطلبات useReducer. وبعد تحديد النوع العام للـ reducer، بإمكانك استخدامه في useReducer كما هو: let [state, dispatch] = useReducer(reducerFunction, { b_count: 0, a_count: 0, });

بدون أدوات خارجية سيتعين عليك التالي: استخدم توازن الحمل load balancer لتوزيع حركة المرور الواردة على عدة نسخ من التطبيق الخاص بك، وذلك يضمن وجود نسخة واحدة على الأقل تخدم الطلبات أثناء عملية النشر. إذا تضمنت عملية النشر تغييرات في هيكل قاعدة البيانات، استخدم ميزة ترحيل قاعدة البيانات في Laravel، حيث تتيح لك الترحيلات تطبيق التغييرات على هيكل قاعدة البيانات مع استمرار تشغيل التطبيق، ويتعامل Laravel مع ذلك من خلال تطبيق الترحيلات في عملية انتقالية، لذا إذا فشلت عملية الترحيل، سيقوم Laravel تلقائيًا بإلغاء التغييرات. إعداد بيئة منفصلة للنشر مثل بيئة التجريب أو الاختبار ، ويجب أن تكون تلك البيئة مطابقة لبيئة الإنتاج الحية قدر الإمكان، وذلك بإختبار عملية النشر بدقة في هذه البيئة قبل تطبيقها على بيئة الإنتاج الحية. استخدام نظام التحكم في الإصدار مثل Git لإدارة الكود مما يسمح لك بتتبع التغييرات وإعادة التراجع إذا لزم الأمر. بدلاً من نشر جميع نسخ التطبيق الخاصة بك دفعة واحدة، تستطيع اعتماداستراتيجية النشر التدريجي، وينطوي ذلك على نشر النسخ الجديدة تدريجيًا واحدة تلو الأخرى، بينما تستمر النسخ الحالية في تلبية الطلبات، مما يقلل من تأثير النشر على المستخدمين ويضمن استمرارية الخدمة. تنفيذ فحوصات الحالة لمراقبة حالة نسخ التطبيق الخاصة بك، للتحقق مما إذا كانت النسخة جاهزة لتلقي الطلبات، وتكوين توازن الحمل لتنفيذ فحوصات الحالة وتوجيه المرور إلى النسخ المناسبة والسليمة فقط. بينما من الأسهل لك هو أتمتة عملية النشر وهي تضمن توحيد الأسلوب وتقليل الأخطاء وذلك باستخدم أدوات النشر مثل Jenkins أو GitLab CI/CD أو Laravel Envoyer لأتمتة عملية النشر، وذلك لجلب أحدث كود، وتشغيل الاختبارات، وتنفيذ الترحيلات، وتنفيذ خطوات النشر بشكل تلقائي. وهناك العديد من الأدوات المفيدة التي يمكن استخدامها لتحقيق نشر تطبيق Laravel بدون توقف، وفيما يلي بعض الأدوات الشائعة: Envoyer by Laravel Deployer Jenkins GitLab CI/CD Laravel Vapor

كلام صحيح، وذلك هو الغرض من دورة خاصة بتعلم أساسيات علوم الحاسب ومخصصة لمن لا يمتلك أي دراية بالبرمجة أو علوم الحاسب، لذلك لا يتم التعمق بشكل كبير في كتابة الكود بل التدريب على التفكير المنطقي والتعرف على علوم الحاسب ومجالات البرمجة وآلية عمل الويب والسيرفرات وقواعد البيانات وخلافه. الأمر الذي يؤهلك لإختيار مجال البرمجة الذي تريده على دراية ووعي، أيضًا يجنبك الإحباط عند التعمق ودراسة لغة البرمجة الأولى لك، مثل دورة بايثون أو دورة جافاسكريبت. وتستطيع الاستزادة وتعلم ما تريد من خلال المسار الأول في دورة تطوير واجهات المستخدم في مسار أساسيات تطوير الويب، وأيضًا المسار الأول دورة تطوير التطبيقات باستخدام JavaScript وهو أساسيات لغة JavaScript، وكل المسارات الأولى من الدورات الأخرى متاحة لك بشكل مجاني. وبإمكانك أيضًا البحث على يوتيوب عن مشاريع جافاسكريبت أو بايثون للمبتدئين وستجد الكثير من أجل التطبيق على ما تعلمته، وأيضًا تستطيع البحث عما تريد فهمه، ويوجد شرح كامل لجافاسكريبت وبايثون في أكاديمية حسوب وموسوعة حسوب: https://wiki.hsoub.com/الصفحة_الرئيسية https://academy.hsoub.com/programming/javascript/ https://academy.hsoub.com/programming/python/

يوجد عدة أخطاء في الكود وهي كالتالي: تم استيراد React مرتين واستخدام useReact مرتين أيضًا، وعليك باستيراد React مرة واحدة فقط واستخدام useState مرة واحدة. هناك خطأ في كتابة "useState"، اعتمد على useState وليس usestate. هناك خطأ في كتابة "useNavigate"، نستخدم useNavigate وليس usenavigate. الكود يحتوي على ترقيم غير صحيح في الكود الخاص بـ yup.object. يجب أن يكون yup.object() بدلاً من yup object(). في جزء cpassword, يوجد غلق قوس مفقود بعد [yup.ref('password')]. يوجد أخطاء في كتابة الدوال داخل الكود، استخدم useFormik و useState بدلاً من useformik و usestate على التوالي، ويجب أن يكون onSubmit بدلاً من onsubmit. في دالة register, هناك غلق قوس مفقود بعد if data.message == "succuess". هناك خطأ في كتابة Console.log، والصحيح هو console.log. وإليك الكود بعد تصحيح ما سبق. import React, { useState } from 'react'; import axios from 'axios'; import { useFormik } from 'formik'; import { useNavigate } from 'react-router-dom'; import * as yup from 'yup'; const Register = () => { const [errors, setErrors] = useState([]); const navigate = useNavigate(); const [statusErrors, setStatusErrors] = useState(''); const schema = yup.object({ name: yup.string().required('name is required').min(3, 'min is 3 char').max(10, 'max is 10 char'), email: yup.string().required('email is required').email('not valid email'), password: yup.string().required('password is required').matches(/^[A-Z][a-z0-9]{4,8}$/, 'not valid password'), cpassword: yup.string().required('confirm password is required').oneOf([yup.ref('password')], 'passwords do not match'), }); const formik = useFormik({ initialValues: { email: '', name: '', password: '', cpassword: '', }, validationSchema: schema, onSubmit: register, }); async function register(values) { try { const { data } = await axios.post('https://lazy-blue-sockeye-gear.cyclic.app/api/v1/auth/signup', values); console.log(data); if (data.message === "success") { console.log("registered"); } } catch (error) { console.log(error); } } return ( <div className="container mt-5 pt-5"> <form className="w-50 m-auto text-center" onSubmit={formik.handleSubmit}> <div className="mb-3"> <label htmlFor="exampleInputEmail1" className="form-label">Email address</label> <input type="email" className="form-control" id="exampleInputEmail1" value={formik.values.email} onChange={formik.handleChange} name="email" aria-describedby="emailhelp" /> </div> <div className="mb-3"> <label htmlFor="exampleInputName" className="form-label">Name</label> <input type="text" className="form-control" id="exampleInputName" value={formik.values.name} onChange={formik.handleChange} name="name" /> </div> <div className="mb-3"> <label htmlFor="exampleInputPassword1" className="form-label">Password</label> <input type="password" className="form-control" id="exampleInputPassword1" value={formik.values.password} onChange={formik.handleChange} name="password" /> </div> <div className="mb-3"> <label htmlFor="exampleInputPassword2" className="form-label">Confirm Password</label> <input type="password" className="form-control" id="exampleInputPassword2" value={formik.values.cpassword} onChange={formik.handleChange} name="cpassword" /> </div> <button type="submit" className="btn btn-primary">Submit</button> </form> </div> ); }; export default Register;

تلك مشكلة أخرى في صيغة استعلام SQL الذي يتم تكوينه، وتكمن في طريقة تكوين الجملة WHERE في الاستعلام. جرب تعديل السطر التالي: cur.execute("SELECT * FROM employee WHERE " + self.se_by.get() + " like '%" + self.se_var.get() + "%'") إلى: cur.execute("SELECT * FROM employee WHERE {} LIKE '%{}%'".format(self.se_by.get(), self.se_var.get())) وذلك لاستخدام التنسيق النصي {} لتضمين قيم المتغيرات في الاستعلام مما يساعد في تجنب أخطاء صيغة SQL ويجعل التعبير أكثر وضوحًا، وتأكد أيضًا من أن أسماء الأعمدة والجداول مكتوبة بشكل صحيح وتطابق قاعدة البيانات لديك.

المشكلة هي استخدام دالة str() للتحويل إلى سلسلة نصية في الجزء التالي: str(self.se_by.get())+" like'% "+str(self.se_var.get())+"%'" ويفترض أن self.se_by.get() و self.se_var.get() تعيدان قيمة عددية أو سلسلة نصية، وإذا كانت تلك القيم تعود بالفعل كسلاسل نصية، فلن تحتاج إلى استخدام str() مرة أخرى. لذا، عليك بتعديل السطر التالي: cur.execute("SELECT * FROM employee WHERE " + str(self.se_by.get()) + " like '% " + str(self.se_var.get()) + "%'") إلى: cur.execute("SELECT * FROM employee WHERE " + self.se_by.get() + " like '%" + self.se_var.get() + "%'") وبالتالي لن يتم تحويل القيم إلى سلاسل نصية مرتين، ويتم تكوين استعلام SQL بشكل صحيح.

كل من WebRTC و Amazon Kinesis Video Streams هي خيارات جيدة، ولكن تقنية WebRTC هي تقنية مجانية ومفتوحة المصدر تسمح بالاتصال في الوقت الحقيقي بين جهازين أو أكثر، وقابلة للتوسع بشكل كبير، لكن يمكن أن تكون معقدة في إعدادها وصيانتها. بالمقابل، Amazon Kinesis Video Streams هي خدمة تديرها Amazon تجعل من السهل بث وتخزين بيانات الفيديو، أيضًا قابلة للتوسع، لكنها قد تكون أكثر تكلفة من WebRTC تبعًا لطريقة الإعداد والاستخدام. تعتمد تكلفة Amazon Kinesis Video Streams على كمية البيانات التي ستسخدمها، وكما ذكرت أنت التكلفة لـ 1000 طالب، تترواح ما بين 100 إلى 200 دولار في الشهر، وقد تزيد التكلفة إذا تم تدفق المزيد من البيانات أو إذا كنت بحاجة إلى تخزين البيانات لفترات أطول. وفيما يلي بعض العوامل التي يجب مراعاتها عند اختيار بين WebRTC و Amazon Kinesis Video Streams: التوسع كلا من WebRTC و Amazon Kinesis Video Streams قابلة للتوسع، لكن WebRTC يمكن أن تكون أكثر صعوبة في التوسع لعدد كبير من المستخدمين. التكلفة Amazon Kinesis Video Streams أكثر تكلفة من WebRTC، لكنها أيضًا أسهل في الإعداد والصيانة. الميزات WebRTC يوفر مجموعة أوسع من الميزات من Amazon Kinesis Video Streams، مثل إمكانية مشاركة الشاشة واستخدام اتصالات ند لند. وفي حال كنت قلقًا بشأن قابلية التوسع والتكلفة، فإن Amazon Kinesis Video Streams خيار جيد، وبالرغم من ذلك، إذا كنت بحاجة إلى مجموعة أوسع من الميزات، فعليك بالنظر إلى استخدام WebRTC. وإليك بعضالحلول البديلة الأخرى التي قد ترغب بأخذها في الإعتبار: Zoom Google Meet Microsoft Teams

أولاً عليك بنشاء ملف تحكم (Controller) أو ملف خدمة (Service) في مجلد pages/api بمشروع Next.js واسمه يمكن أن يكون likes.ts. ثم كتابة دالتين للطلبات POST واحدة لإضافة الـ "like" والأخرى لإزالته، وإليك المثال التالي لملف likes.ts: import { NextApiRequest, NextApiResponse } from 'next'; export default function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method === 'POST') { const { like } = req.body; if (like) { // إضافة "like" بناءً على قيمة `like` // انفذ الكود الخاص بإضافة "like" هنا res.status(200).json({ message: 'تمت إضافة الـ "like" بنجاح' }); } else { // إزالة "like" بناءً على قيمة `like` // انفذ الكود الخاص بإزالة "like" هنا res.status(200).json({ message: 'تمت إزالة الـ "like" بنجاح' }); } } else { res.status(405).json({ message: 'الطلب غير مدعوم' }); } } وفي صفحتك التي تحتوي على زر الـ "like"، قم بإضافة حالة لتتبع حالة الـ "like" وإجراء طلب POST بناءً على الحالة. مثال: import { useState } from 'react'; export default function LikeButton() { const [liked, setLiked] = useState(false); const handleLike = () => { fetch('/api/likes', { method: 'POST', body: JSON.stringify({ like: !liked }), headers: { 'Content-Type': 'application/json', }, }) .then((response) => response.json()) .then((data) => { console.log(data.message); setLiked(!liked); }) .catch((error) => { console.error('حدث خطأ:', error); }); }; return ( <button onClick={handleLike}> {liked ? 'إزالة الـ "like"' : 'إضافة الـ "like"'} </button> ); } ثم تحديث ملفات الطرق (routes) في مشروع Next.js (مثل pages/index.tsx) لتضمين الزر الخاص بالـ "like" في الصفحة: import LikeButton from '../components/LikeButton'; export default function HomePage() { return ( <div> <h1>صفحة الموقع</h1> <LikeButton /> </div> ); }

بإمكانك الإعتماد على الدوال المتوفرة في لغة PHP للاتصال بقاعدة البيانات واستعلامها وإليك مثال بسيط يستخدم لغة PHP وMySQL: <?php // اتصال بقاعدة البيانات $servername = "اسم_خادم_قاعدة_البيانات"; $username = "اسم_مستخدم_قاعدة_البيانات"; $password = "كلمة_مرور_قاعدة_البيانات"; $dbname = "اسم_قاعدة_البيانات"; $conn = new mysqli($servername, $username, $password, $dbname); // التحقق من اتصال قاعدة البيانات if ($conn->connect_error) { die("فشل الاتصال بقاعدة البيانات: " . $conn->connect_error); } // إدراج السجل في قاعدة البيانات $sql = "INSERT INTO اسم_الجدول (حقل1, حقل2, حقل3) VALUES ('قيمة1', 'قيمة2', 'قيمة3')"; if ($conn->query($sql) === TRUE) { // الاستعلام الناجح // استعراض آخر معرف ID تم إدراجه $last_inserted_id = $conn->insert_id; echo "تم إدراج السجل بنجاح. العنصر الأخير المُدرَج له ID: " . $last_inserted_id; } else { echo "خطأ في الإدراج: " . $conn->error; } // إغلاق اتصال قاعدة البيانات $conn->close(); ?> قمت بإنشاء اتصال بقاعدة البيانات، ثم يتم إجراء استعلام INSERT لإدراج السجل في الجدول، وإذا تم الإدراج بنجاح، واستخدام الدالة $conn->insert_id لاستعراض آخر معرف ID تم إدراجه، ومن ثم عرضه في الصفحة. استبدلي "اسم_خادم_قاعدة_البيانات" و"اسم_مستخدم_قاعدة_البيانات" و"كلمة_مرور_قاعدة_البيانات" و"اسم_قاعدة_البيانات" بالقيم الصحيحة لخادم قاعدة البيانات الذي تستخدمه ومعلومات اعتماد الوصول لديك، وأيضًا استبدال "اسم_الجدول" و "حقل1" و "حقل2" و "حقل3" بالأسماء الصحيحة للجدول والحقول المراد إدراج البيانات فيها.

سببه أنك تحاولين إضافة أو تحديث صف مرتبط بقيد أب (foreign key) ولكن القيد الأب غير موجود في الجدول المرجع (referenced table) أو عندما يتعارض العمل بتحديث القيد الأب مع قيد الابن (child key) المرتبط به ورسالة الخطأ تعني إلى أنه لا يمكنك إضافة أو تحديث صف في جدول doctor لأنه يتضمن قيد أب مرتبط بجدول employes والقيد الأب (user_id) المحدد غير موجود في جدول employes. وربما تكون قيمة user_id التي تحاولين إضافتها غير موجودة في جدول employes، أو تحاولين تحديث قيمة user_id التي تشير إلى قيد غير موجود في جدول employes. لذلك تحققي من وجود قيمة user_id في جدول employes المشار إليه في الخطأ، وتأكدي من أن القيد الأب المحدد موجود بالفعل في الجدول المرجع. وفي حال كانت القيمة موجودة في جدول employes، تحققي من نوع البيانات لحقل user_id في جدول doctor ومن أنه يتوافق مع نوع البيانات في حقل U_id في جدول employes، حيث يجب أن يكون نوع البيانات والطول والتنسيق متطابقين. أيضًا التأكد من أن لديك الصلاحيات الكافية لإضافة أو تحديث الصفوف في جدول doctor وجدول employes. وربما السبب هو أنه هناك تعارض في العلاقة بين الجدولين، فتحققي من القيود (constraints) الموجودة على العلاقة بين الجدولين وتأكد من أنها معرفة بشكل صحيح وتتوافق مع البيانات الموجودة.

من الأفضل قراءة المستند الرسمي وتطبيق الشرح على مشروعك: https://vuejs.org/guide/reusability/custom-directives.html وأيضًا هناك دليل عن كيفية الإنتقال من vue 2 إلى vue 3 : https://v3-migration.vuejs.org

هناك مشكلة تحدث عند إزالة العنصر من DOM، جرب تعديل الكود في ملف directives.js واستخدام الخاصية beforeUnmount بدلاً من unmounted في كود الـ custom directive. أي في ملف directives.js، قم بتعديل الكود ليصبح كالتالي: // directives.js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // global Custom Directive app.directive('globalexternal', { beforeUnmount: function (el) { el.placeholder = '' }, mounted: function (el) { el.placeholder = 'Global Custom Directive from external file' } }) console.log('Global Custom Directive from external file') export default app

يجب تحويل قيمة الـ prompt إلى رقم حيث أن القيمة العائدة منه هي نص، وهناك أكثر من طريقة لفعل ذلك، الأولى هي بوضع علامة + بجانب prompt أي كالتالي: let x = +prompt('أدخل رقم من المصفوفة') وسيتم تحويل القيمة المدخلة إلى رقم. والطريقة الثانية هي باستخدام دالة parseInt كالتالي: let x = parseInt(prompt('أدخل رقم من المصفوفة')); والطريقة الثالثة هي باستخدام دالة Number وانتبه إلى أن حرف الـ N كبير لكونها constructor أي دالة بانية ولكننا نستخدمها كدالة هنا لتحويل النص إلى الرقم كالتالي: let x = Number(prompt('أدخل رقم من المصفوفة')); الكائن Number في JavaScript

في Vue 3، هناك بعض التغييرات في استخدام custom directives مقارنةً بـ Vue 2، وتستطيع تحقيق ما تريده عن طريق التالي: في ملف directives.js، يجب تصدير الـ custom directive مباشرة بدون استخدام دالة glob()، وذلك لأنك ستقوم بتصدير الـ directive ذاتها، وليس دالة لتسجيل الـ directive: // directives.js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // global Custom Directive app.directive('globalexternal', { mounted: function (el) { el.placeholder = 'Global Custom Directive from external file' } }) console.log('Global Custom Directive from external file') export default app وفي ملف main.js، قم بتصدير ما يتم استيراده من ملف directives.js ثم تشغيل التطبيق: // main.js import { createApp } from 'vue' import App from './App.vue' import directivesApp from './directives' const app = createApp(App) directivesApp.mount('#app') app.mount('#app') وفي ملف App.vue، قم بتطبيق الـ custom directive المستورد باستخدام v-globalexternal: <!-- App.vue --> <template> <input v-globalexternal style="width: 370px" /> </template> <script> export default { // ... } </script> ومن المفترض أن يعمل الـ custom directive بشكل صحيح في تطبيق Vue 3 لديك، وانتبه إلى أنه في Vue 3 لم يعد هناك حاجة لاستدعاء الـ custom directive في الملف main.js مثلما كان في Vue 2، بل تستطيع تسجيلها مباشرة في الملف directives.js. دروس ومقالات لإطار العمل Vue.js

أولاً أنت لم تستخدم دالة isNaN بشكل صحيح وأيضًا لديك مشكلة أخرى هي عدم تحديث قيمة المتغير total بشكل صحيح. بالإضافة إلى أنك استخدمت علامة التنصيص العادية ' ' ونضع بداخلها نص فقط، أما إذا أردت استخدام متغير فأرجو منك استخدام Template literals أو قوالب النصوص وهي علامة التنصيص المائلة ` ` وتصل إليها من حرف ذ في الكيبورد لكن يجب أن تكون لوحة المفاتيح باللغة الإنجليزية وليس العربية، وإليك شرح لقوالب النصوص: قالب النص الحديث في JavaScript أرجو منك كتابة الكود كالتالي: let total = 0; while (true) { let value = +prompt('Enter a number'); if (value == 0) break; if (isNaN(value)) continue; total += value; } alert(`Your total number is: ${total}`); قمت بإصلاح استخدام دالة isNaN عن طريق إضافة قوسين بعد اسم الدالة وإضافة قيمة value. ثم تحديث المتغير total عندما يتم إدخال رقم صالح عن طريق إضافة القيمة value إليه. استخدام قالب النص بدلاً من علامة التنصيص العادية وسيتم سؤالك عن إدخال رقم بشكل لا نهائي لأننا وضعنا شرط true في while، وإذا ضغط على cancel أثناء إدخال الرقم سيتم عرض مجموع ما قمت بإدخاله سابقًا.

بخصوص odoo ستجد ما تريده في المحتوى الأجنبي أرشح لك قناتي odoo mates و Odoo Discussions وأيضًا يوجد قائمة مفيدة باسم Odoo Website & E-Commerce في قناة Concept Solutions. أيضًا قناة odoo الرسمية بها شروحات مفيدة، ابحث مثلاً عن Build an ecommerce website with Odoo. أيضًا يوجد المستند الرسمي: https://www.odoo.com/documentation/16.0/developer/tutorials.html وتستطيع البحث في جوجل عن المزيد.

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