Mustafa Suleiman

عليك بالتأكد من أنك قمت بالتالي: الخطوة 1: إنشاء خادم Next.js مخصص قم بإنشاء ملف بالاسم "server.js" في المجلد الرئيسي لمشروعك. وضع الكود التالي في الملف "server.js": // server.js const { createServer } = require('http'); const { parse } = require('url'); const next = require('next'); const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.getRequestHandler(); app.prepare().then(() => { createServer((req, res) => { const parsedUrl = parse(req.url, true); handle(req, res, parsedUrl); }).listen(3000, (err) => { if (err) throw err; console.log('> Ready on http://localhost:3000'); }); }); أو قم بقراءة الدليل الرسمي Next JS guide لتعرف ما هي الإعدادات المناسبة لمشروعك. الخطوة 2: تعديل ملف package.json عليك بتعديل ملف package.json في مشروع Next.js الخاص بك. ثم تعديل سكريبت البدء (start) ليشير إلى "node server.js" بدلاً من "next start". وتأكد من تعيين المتغير "NODE_ENV" إلى "production". مثال على package.json المعدل: { "name": "my-next-app", "version": "1.0.0", "scripts": { "dev": "next dev", "build": "next build", "start": "NODE_ENV=production node server.js" }, "dependencies": { "next": "^12.0.1", "react": "^17.0.2", "react-dom": "^17.0.2" } } الخطوة 3: بناء تطبيق Next.js قم بتشغيل الأمر التالي في وحدة التحكم (Terminal) لبناء تطبيق Next.js: npm run build وانتظر حتى تنتهي عملية البناء. الخطوة 4: رفع الملفات إلى cPanel قم بفتح مجلد مشروع Next.js الخاص بك على جهاز الكمبيوتر. حدد جميع الملفات والمجلدات باستثناء المجلد "node_modules" والملفات ".git" و"README.md" و".gitignore". أنشئ ملف ZIP باستخدام الملفات المحددة. الخطوة 5: رفع الملفات إلى cPanel دخول إلى cPanel الخاص بك. قم بتحميل ملف ZIP الذي أنشأته إلى المجلد الجذر لاسم النطاق الخاص بك وقم بفك الضغط عنه. الخطوة 6: إعداد تطبيق Node.js على cPanel انتقل إلى قسم البرمجيات في cPanel وانقر على "Setup Node.js App". انقر على زر "+ Create Application". قم بتكوين التطبيق Node.js كما يلي: Node.js version: حدد الإصدار الذي يتوافق مع إصدار Node.js الذي استخدمته أثناء تطوير التطبيق. Application mode: حدد "Production". Application root: اكتب المسار الذي يربط معه المجلد الجذر لمشروعك. إذا وضعت الملفات والمجلدات في مجلد "public_html"، فاكتب "/public_html". Application URL: حدد اسم النطاق الخاص بك. Application startup file: اكتب "server.js". والآن: انقر على الزر "CREATE" وانتظر حتى يتم إنشاء التطبيق. قم بالنقر على زر "STOP APP" لإيقاف التطبيق مؤقتًا. انتقل قليلاً لترى قسم "Detected configuration files"، وانقر على "Run NPM Install" لتثبيت جميع حزم Node.js المستخدمة في مشروعك. انتقل مرة أخرى للنقر على زر "START APP" لبدء التطبيق. افتح اسم النطاق الخاص بك في المستعرض وسيظهر لك تطبيق Next.js الخاص بك. وإذا ما زلت تواجهة أية مشكلة، أنصحك بالبحث عن Build and deploy Next js app on cpanel على يوتيوب وستجد شروحات توضح كيفية القيام بالأمر.

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

أولاً اسمح لي بالآتي، لا تقم أبدًا بإرسال تلك السيرة الذاتية إلى أي شركة وإلا سيتم رفضك بنسبة 100%، عليك بتعلم كيف تعرض وتسوق لنفسك من خلال سيرة ذاتية بسيطة وإحترافية، وأيضًا استخدم المواقع التي توفر لك قالب مجاني جاهز للسيرة الذاتية وأنصحك بقراءة التالي: وبخصوص كونك مؤهل للعمل على مواقع العمل الحر أم لا، فأنت لست بحاجة إلى سيرة ذاتية إطلاقًا، وببساطة كل ما تحتاجه هو كونك تستطيع تنفيذ المشاريع التي تطلب على تلك الموقع، تفقد المشاريع والمطلوب واسأل نفسك سؤالين وهما: هل أنا قادر على تنفيذ 70% من المطلوب؟ هل لدي في معرض الأعمال مشاريع أو مشروع مشابه أو مشاريع بجودة عالية وقريبة من أرض الواقع وليست مجرد نماذج للتدريب فقط؟ فإذا كانت إجابة السؤالين بنعم، فأنت جاهز إذًا عليك بتعلم كيفية تقديم عرض جيد وأنصحك بقراءة التالي: دليلك الشامل إلى العمل الحر عبر الإنترنت للمستقلين: 4 نصائح فعالة لكتابة عرض يجذب العملاء لماذا يتجاهل أصحاب المشاريع عروضك على مستقل؟ للمستقلين الجدد: كيف تبني معرض أعمالك باحترافية؟

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

أعتقد أنك تريد التسويق لخدمة SaaS صحيح، أنصحك بقراءة التالي: وستجد كم هائل من الدروس والمقالات في قسم التسويق والمبيعات في أكاديمية حسوب عليك بإختيار ما يفيدك منها. وأيضًا يوجد كتاب مدخل إلى التسويق على أكاديمية حسوب، وأيضًا يوجد كتاب وكورس باللغة الإنجليزية باسم Marketing for Developers قم بالبحث عنه.

هناك مكتبة Python المعروفة باسم "pgmpy" لإنشاء وتحليل شبكات بايزية (Bayesian Networks)، حيث تُعتبر pgmpy واحدة من المكتبات الشهيرة والقوية في مجال الاحتمالات والنمذجة الاحتمالية باستخدام الشبكات البايزية. لتثبيت المكتبة استخدمي الأمر التالي: pip install pgmpy وسأوضح لك بمثال بسيط كيفية إنشاء شبكة بايزية باستخدام pgmpy: from pgmpy.models import BayesianModel from pgmpy.factors.discrete import TabularCPD # إنشاء النموذج البايزي model = BayesianModel([('A', 'B'), ('C', 'B')]) # إنشاء الجداول الاحتمالية الشرطية (Conditional Probability Distributions - CPDs) cpd_a = TabularCPD(variable='A', variable_card=2, values=[[0.6], [0.4]]) cpd_c = TabularCPD(variable='C', variable_card=2, values=[[0.7], [0.3]]) cpd_b = TabularCPD(variable='B', variable_card=2, values=[[0.1, 0.2, 0.3, 0.4], [0.9, 0.8, 0.7, 0.6]], evidence=['A', 'C'], evidence_card=[2, 2]) # ربط الجداول الاحتمالية الشرطية مع النموذج model.add_cpds(cpd_a, cpd_c, cpd_b) # التحقق من صحة النموذج model.check_model() والمثال يبين كيفية إنشاء شبكة بايزية بثلاثة أجهزة (A و B و C)، وتعيين الاحتمالات المشروطة لكل جهاز، وباستطاعتك استكشاف المزيد من وظائف pgmpy للتحقق من القيود والحوسبة والرسم البياني للشبكة وغيرها الكثير، وعليك بالتعديل بالطبع بما يناسبك أنت.

أظن أن المقصود هو كيف تستخدم عنصر"sub" في HTML وهو يستخدم لتعريف نص فرعي (Subscript)، وهو نوع من التنسيق الذي يعرض النص بحجم أصغر ويضعه أسفل السطر الأساسي، وذلك لعرض الأرقام الهندسية أو الرموز الكيميائية أو الحروف الصغيرة المُخفضة. لتطبيق تأثير النص الفرعي في HTML، عليك باستخدام عنصر <sub> المحيط بالنص الذي ترغب في عرضه بشكل فرعي، مثل التالي: CO₂ سيعرض "2" بحجم أصغر وأسفل السطر الأساسي، مما يُظهر الصيغة الكيميائية. أيضًا هناك عنصر sup وهو يستخدم "sup" لتعريف نص فوقي (Superscript)، وهونوع آخر من التنسيق الذي يعرض النص بحجم أصغر ويضعه فوق السطر الأساسي، ويُستخدم لعرض الأرقام العلوية أو الأحرف المرتفعة وغيرها. مثال: H⁺ وسيتم عرض "+" بحجم أصغر وفوق السطر الأساسي، مما يعبر عن أيون الهيدروجين الموجب.

هناك العديد من الطرق للربح من التطبيقات، وأشهرها هو عرض الإعلانات داخل التطبيق، لكن ذلك غير مناسب لجميع التطبيقات، وتستطيع إضافة خيار لشراء التطبيق المنع الإعلانات أو وضع اشتراك شهري بمزايا مختلفة منها حذف الإعلانات من التطبيق. والأمر يعتمد على تكلفة تشغيل التطبيق والجمهور والمنصة المستهدفة، وحجم المستخدمين المتوقع وغيرها من الأمور. وبالطبع هناك نسبة تفرضها جوجل وآبل على مطوري التطبيقات، حيث يتم اقتطاع 15% بعد أن كانت 30$ من الأرباح، بينما آبل تفرض 30% للعام الأول ثم 15% بعد ذلك، وتلك الرسوم هي على أي عملية شراء داخل التطبيق، بينما أرباح الإعلانات فهى لك بعد إقتطاع نسبة google adsens وهي 32%. وقد تم النقاش حول الربح من التطبيقات في النقاشات التالية: تجربتك كمطور مع Google play & App store وارباحك من تطوير تطبيقات الجوال

عليك باستخراج ملفات الموقع التي بداخل Amersaid ووضعها في مسار public_html بشكل مباشر، حيث أنك قمت برفع الموقع بداخل فولدر باسم Amersaid. وإليك مثال:

الأسئلة الإمتحانية لا يتم الإجابة عليها بشكل مباشر، بل عليك الإجتهاد في حلها وبإمكانك توفير الكود وطرح المشكلة التي تواجهك لمساعدتك بها. وبخصوص المطلوب منك، سأوضح لك الخطوات بشكل عام: قومي بإنشاء مشروع جديد في بيئة تطوير الجافا، مثل Eclipse أو IntelliJ. إنشاء صفحة تسجيل الدخول Login.java، وفي تلك الصفحة، عليك إنشاء واجهة المستخدم لإدخال اسم المستخدم وكلمة المرو، باستخدام عناصر واجهة المستخدم مثل TextField و PasswordField و Button. كتابة كود للتحقق من صحة اسم المستخدم وكلمة المرور المدخلة، وعليك بالمقارنة مع الأسماء وكلمات المرور المخزنة مسبقًا في التطبيق، باستخدام هيكلة البيانات المناسبة، مثل HashMap، لتخزين أسماء المستخدمين وكلمات المرور. بعد تسجيل الدخول الناجح، قومي بعرض الخيارات الثلاثة أمام المستخدم: إضافة موظف، إضافة مشروع، البحث عن موظف، تقرير المشاريع. إنشاء صفحة إضافة موظف AddEmployee.java، ثم إنشاء واجهة المستخدم لإدخال معلومات الموظف مثل اسم الموظف ورقم الموظف والراتب والقسم وعدد الأبناء. كتابة كود لإضافة الموظف إلى التطبيق، بإنشاء كائن من الصنف الذي يمثل الموظف واحتفظ بالمعلومات المدخلة في الخطوة السابقة، فإذا كان عدد الأبناء أكبر أو يساوي 4، قم بزيادة الراتب بقيمة 100. إنشاء صفحة إضافة مشروع AddProject.java، عن طريق إنشاء واجهة المستخدم لإدخال معلومات المشروع مثل اسم المشروع ورقم المشروع ورقم الموظف المسؤول عنه. كتابة كود لإضافة المشروع إلى التطبيق. قم بإنشاء كائن من الصنف الذي يمثل المشروع واحتفظ بالمعلومات المدخلة في الخطوة السابقة. تطوير صفحة البحث عن موظف SearchEmployee.java، وفي تلك الصفحة، سيتم بناء واجهة المستخدم لإدخال رقم الموظف الذي يرغب المستخدم في البحث عنه. كتابة كود للبحث عن موظف باستخدام رقم الموظف المدخل، وعليك بالبحث في البيانات المخزنة في التطبيق للعثور على الموظف المطابق للرقم المدخل واعرضي معلوماته مثل الاسم والقسم والراتب. إنشاء صفحة تقرير المشاريع ProjectReport.java، وكتابة الكود اللازم لعرض تقرير يحتوي على قائمة المشاريع وعدد الموظفين الذين يعملون في كل مشروع وإجمالي رواتبهم. وسأوضح لك الجزء الأول فقط من المشروع، وهو صفحة تسجيل الدخول: import java.util.HashMap; import java.util.Scanner; public class Login { public static void main(String[] args) { HashMap<String, String> users = new HashMap<>(); // تخزين أسماء المستخدمين وكلمات المرور // قم بإضافة بعض المستخدمين لغرض التجربة users.put("user1", "password1"); users.put("user2", "password2"); Scanner scanner = new Scanner(System.in); System.out.println("من فضلك، قم بإدخال اسم المستخدم:"); String username = scanner.nextLine(); System.out.println("من فضلك، قم بإدخال كلمة المرور:"); String password = scanner.nextLine(); if (users.containsKey(username)) { // التحقق من وجود اسم المستخدم في قاعدة البيانات String storedPassword = users.get(username); // الحصول على كلمة المرور المخزنة if (password.equals(storedPassword)) { // المقارنة بين كلمة المرور المدخلة والمخزنة System.out.println("تم تسجيل الدخول بنجاح!"); // قم بعرض الخيارات الأخرى للمستخدم واستدعاء الدوال المناسبة حسب الاختيار } else { System.out.println("كلمة المرور غير صحيحة!"); } } else { System.out.println("اسم المستخدم غير موجود!"); } } } وهو مثال بسيط يوضح جزءًا من الكود لتسجيل الدخول باستخدام اسم المستخدم وكلمة المرور المخزنين مسبقًا في التطبيق، وتستخدم HashMap لتخزين أسماء المستخدمين وكلمات المرور كأزواج المفتاح-القيمة. بعد ذلك يستخدم كائن Scanner للحصول على إدخال المستخدم، والتحقق من صحة اسم المستخدم وكلمة المرور المدخلة ومقارنتها مع القيم المخزنة في HashMap. دروس ومقالات لغة جافا في أكاديمية حسوب

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

ما فهمته هو أن الكود هو نموذج PHP يهدف إلى إضافة منتج جديد إلى صفحة في موقع WordPress الخاص بك باستخدام WooCommerce APIK صحيح؟ ولتنفيذ لك عليك بالتالي: أولاً، يتم التحقق من إرسال النموذج باستخدام الجزء التالي من الكود: if(isset($_POST['add_product_btn'])) { // يتم استخراج قيم الحقول من النموذج $name = $_POST['name']; $description = $_POST['description']; $image = $_FILES['image']['name']; $regular_price = $_POST['regular_price']; $sale_price = $_POST['sale_price']; // يتم إدراج قيم المنتج في قاعدة البيانات المحلية $product_query = "INSERT INTO products(name,descriprion,image,regular_price,sale_price) VALUES ('$name','$description','$image','$regular_price','$sale_price')"; $product_query_run = mysqli_query($con, $product_query); if($product_query_run) { // يتم تحميل الصورة إلى مسار محدد move_uploaded_file($_FILES['image']['tmp_name'], $path.'/'.$filename); // يتم إعادة توجيه المستخدم إلى صفحة إضافة المنتج مع رسالة نجاح redirect("add-product.php", "تمت إضافة المنتج بنجاح"); } else { // يتم إعادة توجيه المستخدم إلى صفحة إضافة المنتج مع رسالة خطأ redirect("add-product.php", "حدث خطأ ما"); } } من ثمّ، تحديد مفتاح المستهلك والسر الخاص بك وإعداد اتصالك بووردبريس وخدمة WooCommerce باستخدام الكود التالي: $consumer_key = "ck_786f953cb5af922717ac6ea4bec5f40484645572"; $consumer_secret = "cs_7907ada02821f451c936e0555acb93b2c2b8e506"; require __DIR__ . '/vendor/autoload.php'; use Automattic\WooCommerce\Client; $woocommerce = new Client( 'https://woocommerce-883252-3583112.cloudwaysapps.com/', $consumer_key, $consumer_secret, [ 'version' => 'wc/v3', ] ) ; وأخيرًا، إنشاء مصفوفة بالبيانات الخاصة بالمنتج الجديد وإضافتها باستخدام WooCommerce API باستخدام الكود التالي: $data = [ 'name' => $name, 'regular_price' => $regular_price, 'sale_price' => $sale_price, 'description' => $description, 'images' => $image ]; print_r($woocommerce->post('products', $data)); والكود يقوم بإنشاء مصفوفة $data تحتوي على معلومات المنتج الجديد مثل الاسم والأسعار والوصف والصورة. ثم، استخدام print_r لطباعة رد من WooCommerce API بعد إرسال البيانات. وانتبهي إلى أنه يجب توفير المفتاح key الصحيح والسر secret للوصول إلى WooCommerce API، وأيضًا التأكد من وجود مكتبة WooCommerce PHP Client وملفاتها في المسار الصحيح في مشروعك.

إليك بعض المواقع التي توفر قوالب مجانية للواجهة الأمامية لتستخدمها مع Django: Start Bootstrap يقدم مجموعة من القوالب المجانية والسمات للواجهة الأمامية، وتستطيع تحميل القوالب وتخصيصها وفقًا لاحتياجاتك. HTML5UP يقدم HTML5UP مجموعة من القوالب المجانية والأنيقة للواجهة الأمامية، وبإمكانك تنزيل القوالب واستخدامها في تطبيقك مع Django.

من الأفضل تجنب استخدام jQuery حاليًا فهى لم تعد تستخدم بكثرة، تعلمها بالطبع لتستطيع التعديل على الأكواد الموجودة في الموقع الذي تعمل عليه أو فهم كود jQuery عند البحث على الإنترنت مثلا. وإليك بعض الأسباب لتجنب استخدام jQuery: 1- jQuery كبيرة الحجم، مما يؤدي إلى تأخير في تحميلها وتنفيذها على الصفحات الويب. 2- المتصفحات الحديثة توفر العديد من الميزات والوظائف المدمجة في JavaScript النقية، فمع تطور معيار DOM وظهور APIs جديدة مثل querySelector و addEventListener، أصبح بإمكان المطورين الوصول إلى العناصر والتلاعب بها بسهولة باستخدام جافاسكريبت النقية دون الحاجة إلى jQuery. أيضًا بسبب أن تطور ميزات ECMAScript: ECMAScript (المعيار الرسمي لجافاسكريبت) يتطور بشكل مستمر، ويقدم ميزات جديدة وقوية مثل الوعود (Promises) والسمات (Arrow Functions) وغيرها. وبفضل هذه الميزات، أصبح بإمكان المطورين تنفيذ العديد من المهام بشكل أسهل وأنظف دون الحاجة إلى استخدام jQuery. 3- عند استخدام jQuery، يكون من الصعب تخصيص سلوكها وتصميمها بالكامل وفقًا لاحتياجات المشروع، بينما يمكنك القيام بذلك بشكل أفضل باستخدام JavaScript النقية. 4- توجد العديد من المكتبات الحديثة مثل React وVue.js وAngular التي توفر تجربة تطوير أقوى وفعالة، وتدعم أداءً وصيانةً وإدارة حالة التطبيق بشكل أفضل من jQuery. وبإمكانك أيضًا استخدام جافاسكريبت النقية لتنفيذ ما تريده كالتالي: // HTML <button id="moveButton">انقر هنا</button> <div id="myDiv" style="height: 2000px; overflow: auto;"> <p>محتوى العنصر</p> </div> // JavaScript document.getElementById("moveButton").addEventListener("click", function() { const myDiv = document.getElementById("myDiv"); const scrollOptions = { top: 500, behavior: "smooth" }; myDiv.scrollTo(scrollOptions); }); بتعريف زر يحمل معرف "moveButton" وعنصر div يحمل معرف "myDiv" بنفس الطريقة كما في المثال السابق. وعند النقر على الزر، تم إضافة مستمع الأحداث "click" باستخدام addEventListener والذي يقوم بتنفيذ وظيفة معينة عند حدوث الحدث. داخل وظيفة المستمع، نقوم بالحصول على عنصر الـ div باستخدام document.getElementById ونخزنه في متغير myDiv. ثم نعرف كائن scrollOptions يحتوي على الخصائص التي تحدد التمرير الرأسي المطلوب، حيث قمت بتعيين الخاصية top إلى 500، وهذا يعني أن العنصر سيرتفع بمقدار 500 بكسل. أيضًا عليك تعيين الخاصية behavior إلى "smooth"، مما يجعل الحركة تكون سلسة بدلاً من قفزة فجائية. أخيرًا، نستخدم myDiv.scrollTo(scrollOptions) لتنفيذ التمرير الرأسي للعنصر div وفقًا للخصائص التي تم تعريفها في scrollOptions.

هناك كم هائل من الوظائف التي بإمكان تلك الروبوتات القيام بها ومنها: إنشاء وحذف وتحرير القنوات، وتعيين الأذونات اللازمة للأعضاء. تتبع نشاط المستخدمين ومنحهم مستويات وأدوار مخصصة بناءً على تفاعلهم في الخادم. تشغيل الموسيقى في قنوات الصوت من مصادر مثل YouTube أو Spotify، ويمكنها التحكم في مستوى الصوت وتشغيل قوائم التشغيل. إرسال إشعارات وتذكيرات للأعضاء في الخادم، مثل تذكير بالأحداث المهمة أو مواعيد الاجتماعات. تقديم ألعاب تفاعلية للأعضاء، مثل ألعاب الكلمات المتقاطعة أو ألعاب الأدوار البسيطة. البحث عن معلومات عبر الإنترنت وتقديمها للأعضاء، مثل الأخبار أو توقعات الطقس أو معلومات عامة. الترحيب بالأعضاء الجدد في الخادم وتوديع الأعضاء الذين يغادرون. مراقبة النشاط في الخادم والكشف عن المخالفات والسلوك غير الملائم، وتنفيذ تدابير الأمان المطلوبة مثل حظر الأعضاء المخالفين. تنظيم مسابقات وألعاب تفاعلية للأعضاء، مثل ألعاب الألغاز أو ألعاب الأدوار المتقدمة. توفير الدعم الفني والإجابة على الأسئلة الشائعة للأعضاء، وتقديم التوجيه والمساعدة في استخدام الخادم. الاتصال بمنصات أخرى مثل Twitter أو Reddit وتقديم تحديثات مباشرة للأعضاء. توفير أوامر خاصة بتخصيص واجهة الخادم، مثل تغيير الألوان والخلفيات وإضافة الرموز التعبيرية المخصصة. بالنسبة لأشهر البوتات في Discord، فهناك العديد من البوتات المشهورة ومنها: Dyno: بوت متعدد الاستخدامات يوفر ميزات إدارة الخادم ونظام المستويات والموسيقى والأدوار. MEE6: يوفر نظام المستويات والأدوار والموسيقى والترحيب والإشعارات والمسابقات. Tatsumaki: يقدم نظام المستويات والأدوار والألعاب والإحصائيات والترحيب والتوديع. Dank Memer: للترفيه يقدم ألعاب الكلمات والميمات والنكات والصور المضحكة. Rythm: لتشغيل الموسيقى من مصادر مثل YouTube وSpotify وSoundCloud.

بالطبع لا فما تقصده هو استخدام الكلمة المحجوزة const لتعريف الثوابت، وقد تم توضيح ذلك بالتفصيل هنا: وبخصوص الكود الخاص بك، فهو غير صحيح حيث أنك قمت باستخدام خاصية name الموجودة في الكائن window وقمت بتغيير قيمتها. وعليك بقراءة التالي قبل استكمال الشرح لتفهم ما أقصده: وفي الكود لديك"name" قمت أنت بتعريفها ضمن النطاق العالمي global ضمن كائن "window"، بتعيين قيمة السلسلة النصية "bader" للمتغير "name"، ثم طباعة نوع المتغير باستخدام "console.log(typeof name);" وسيتم طباعة "string" في الإخراج لأن قيمة المتغير هي سلسلة نصية. ثم، قمت أنت بتعيين قيمة رقمية 5 للمتغير "name"، وبعد ذلك طباعة نوع المتغير مرة أخرى باستخدام "console.log(typeof name);" وستظهر "string" أيضًا، ولكن لماذا لم تصبح رقم number؟ السبب أنه تم تغيير القيمة النصية فقط من "bader" إلى "5" أي أنه لم يتم تحويل القيمة، وتلك المشاكل الغريبة ستحدث لو لم تقم باستخدام أحد الكلمات الخاصة بتعريف المتغيرات وهم var و let و const. أي يجب أن يكون الكود لديك كالتالي: const userName = 'bader'; console.log(typeof name); userName = 5; console.log(typeof name); وستجد أنه يظهر لك خطأ caught TypeError: Assignment to constant variable. والذي يعني أنك لا تستطيع تغيير قيمة متغير ثابت.

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

هناك عدة أسباب لذلك: لم تقم بتمكين Apple Pay في إعدادات تطبيقك. لم تضف الأذونات المناسبة لـ Apple Pay إلى ملف Info.plist الخاص بتطبيقك. لم تقم بتنفيذ رمز Apple Pay بشكل صحيح في تطبيقك. عليك أولاً التحقق من تمكين Apple Pay في إعدادات تطبيقك، عن طريق فتح مشروع Xcode الخاص بتطبيقك والانتقال إلى ملف Info.plist، وفي ملف Info.plist، ابحث عن المفتاح ApplePay وتأكد من أنه مضبوط على YES. وإذا تم تمكين Apple Pay في إعدادات تطبيقك، ولكن لا تزال تواجه رسالة الخطأ "invalid ability provided"، فيجب عليك التحقق من أنك قد أضفت الأذونات المناسبة لـ Apple Pay إلى ملف Info.plist، وتستطيع فعل ذلك عن طريق إضافة الأذونات التالية إلى ملف Info.plist: <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict> <key>NSApplePayPaymentAuthorization</key> <array> <string>com.apple.developer.in-app-payments</string> </array> وبمجرد أن تقوم بإضافة الأذونات المناسبة لـ Apple Pay إلى ملف Info.plist. وأيضًا تأكد من استخدام أحدث إصدار من React Native، وأحدث إصدار من Apple Pay SDK. وهل قمت بإضافة الـ Merchant ID والشهادات المطلوبة؟ وبالنسبة للشهادات إليك طريقة إنشائها: وأنصحك بالبحث عن How to implement Apple Pay in React Native Apps وستجد شرح واضح لكيفية فعل ذلك عن طريق مكتبة react-native-payments.

أنت لم تذكر ما هي تلك المشاريع؟ هل هي مشاريع كبيرة ومشابهة للمشاريع التي يتم تنفيذها بشكل حقيقي وليس مجرد نماذج؟ عند تنفيذ مشروع هل تواجه مشكلة في التنفيذ؟ أم تستطيع تطبيق ما تريده بشكل مباشر أي تعرف ما هي الأدوات التي عليك استخدامها؟ وهنا لا أقصد البحث عن حل لمشكلة معينة تواجهها أو كيفية تنفيذ أمر ما في المشروع بل أقصد المشروع ككل. هل تعمقت في الواجهة الخلفية؟ وأنشات مشاريع أكثر تعقيدًا؟ هل قمت بدراسة المفاهيم المتقدمة في CSS وجافاسكريبت، هل قمت بإنشاء مشروع معقد مثل SPA بواسطة جافاسكريبت وHTML, CSSS ؟ وأنا هنا لا أقصد التقليل أبدًا من ما قد حققته بالفعل، فمجهود يحترم أحسنت حقًا، لكن ما قصدته هو توجيهك إلى أنك في البداية وبمستوى Junior أعتقد، لذلك لا تنتقل إلى لغة أخرى إلا بعد أن تصبح متمكن من الـ Stack الخاص بك وهو MERN. ولتتعمق أكثر في مجالك ستحتاج إلى اللغة الإنجليزية، لذلك عليك بكتابة الكود لكي لا تنسى من وقت آخر من خلال إنشاء مشروع تحب العمل عليه، ثم العمل على اللغة الإنجليزية لو كنت تراها غير جيدة حيث ستحتاج إلى مستوى سؤهلك للاستماع والقراءة في البداية ثم الكتابة والتحدث لتستطيع العمل في شركة في المستقبل. ابحث عن مشاريع أكثر تعقيدًا واعمل عليها، او عليك بتعلم المفاهيم المتقدمة في الـ Stack الخاص بك، وكما أشرت ستحتاج إلى اللغة الإنجليزية لكون الكتب والمقالات والدورات المتقدمة باللغة الإنجليزية.

ستحتاج إلى استخدم JavaScript لتحريك صورة الغلاف على محور الـ Y، باستخدام حدث onMouseMove لتحديد موقع المؤشر وتحديث خاصية background-position-y في CSS بناءًا على ذلك الموقع، وتستطيع ضبط سرعة التحريك عن طريق ضبط القيمة التي تتم إضافتها إلى background-position-y بناءًا على حركة المؤشر. ولكن نصيحتي إليك هي بأن تقوم بإنشاء الموقع بخواصه الأساسية والمطلوب منك فقط، ثم إذا أردت التحسين وإضافة ميزات أخرى افعل ذلك، وتلك الطريقة ستجنبك إضاعة الوقت في ميزات جانبية بدلاً من العمل على إنهاء المشروع بميزاته الأساسية. وللعلم تلك الطريقة مستخدمة في بناء المشاريع حيث يتم بناء ما يعرف باسم MVP أي المشروع بميزات أساسية ليعمل فقط ويتم تجريبه ثم مع الوقت يتم إضافة الميزات والخواص المطلوبة للتوسع وبناءًا على إحتياجات المشروع، ولا أن يتم بناء كل الميزات وإطلاقها في نفس الوقت وتأخير إطلاق المشروع. وعلي أي حال،سأوضح لك بمثال بالكود: أولًا، قم بإنشاء مكون React يسمى "CoverPhoto"، واحفظه في ملف "CoverPhoto.js": import React, { useState } from 'react'; import './CoverPhoto.css'; const CoverPhoto = () => { const [positionY, setPositionY] = useState(0); const handleMouseMove = (event) => { const { clientY } = event; setPositionY(clientY); }; return ( <div className="cover-photo" onMouseMove={handleMouseMove} style={{ backgroundPositionY: `${positionY}px` }} /> ); }; export default CoverPhoto; ثم، قم بإنشاء ملف CSS واحفظه بنفس المجلد تحت اسم "CoverPhoto.css": .cover-photo { width: 100%; height: 300px; background-image: url('image.jpg'); background-size: cover; background-position: center; transition: background-position-y 0.3s ease-out; } وضع في اعتبارك تعديل "image.jpg" بمسار صحيح لصورة الغلاف. أخيرًا، عليك بتضمين مكون "CoverPhoto" في مكان الذي يُعرض فيه الغلاف في المشروع. الخاص بك. import React from 'react'; import CoverPhoto from './CoverPhoto'; const App = () => { return ( <div> {/* عناصر أخرى في التطبيق */} <CoverPhoto /> {/* عناصر أخرى في التطبيق */} </div> ); }; export default App;

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

المشكلة تنتج عن محاولة unserialize (فك تسلسل) بيانات في مشروع Laravel، حاول تنفيذ الأوامر التالية: php artisan config:clear php artisan view:clear php artisan key:generate وأيضًا قم بحذف الكوكيز الخاصة بالموقع في المتصفح كالتالي: في حال استمرار المشكلة اتبع التالي: استخدم أحدث إصدار من Laravel وتأكد أنه متوافق مع إصدار PHP الذي تستخدمه. قم بفحص الكود الخاص بك للتأكد من عدم وجود أخطاء في استخدام دالة unserialize(). تحقق من صحة البيانات التي تتم unserialize عليها، فربما تكون هناك تعديلات أو تغييرات في بيانات مخزنة تسبب في هذا الخطأ، فربما تحتاج إلى إصلاح أو تحديث البيانات المخزنة. تحديث ملف composer.json وتشغيل أمر composer update للتأكد من تحديث جميع الاعتماديات والمكتبات اللازمة لمشروع Laravel. حذف ملف bootstrap/cache/config.php وملفات الكاش المؤقتة الأخرى في حال كنت تستخدم الكاش لتأكيد أن التغييرات في الكود تطبق بشكل صحيح.

سبب المشكلة هو عند تثبيت حزمة http في تطبيق Flutter، تظهر رسالة الخطأ في ملف pubspec.yaml وتشير إلى أن هناك تعارض في إصدارات الحزم. حيث أن الحزمة http تعتمد على حزمة http_parser بإصدارات محددة، وفي حالتك أنت فإصدار الحزمة http_parser المتوفر في البيئة لا يتوافق مع الإصدار المطلوب بواسطة حزمة http. والرسالة تخبرك أن الإصدارات المسموح بها لـ http_parser هي أكبر من 8.0.1 وأقل من 4.0.0، ولكن الإصدار المثبت حاليًا في البيئة ليس من ضمن هذه النطاقات. بما أن التطبيق الخاص بك يعتمد على إصدار 0.12.2 من حزمة http، والتي بدورها تعتمد على إصدارات http_parser غير متوافقة، فإن عملية حل الإصدارات تفشل وتظهر رسالة الخطأ المذكورة. عليك بالتالي: تحديث إصدار حزمة http في ملف pubspec.yaml إلى إصدار يتوافق مع الإصدارات المتاحة لـ http_parser. يمكنك الاطلاع على وثائق الحزمة لمعرفة الإصدارات المدعومة. التحقق من توافق إصدارات الحزم في مشروعك والتأكد من أن الحزم المختلفة التي تستخدمها تعتمد على إصدارات متوافقة مع بعضها البعض. إعادة تثبيت أو تحديث حزمة http_parser لتتوافق مع الإصدارات المطلوبة. من المهم أيضًا استخدام أحدث إصدار من Flutter ومكتبة الـ Dart، فقد تكون هناك تحديثات أو إصلاحات لمشكلة مشابهة.

ربما المشكلة لديك أنك لم تقم بربط ملف جافاسكريبت في HTML بشكل صحيح تأكد من ذلك ومن كتابة اسم الملف والمسار بشكل صحيح. وأيضًا ربما هناك خطأ في اسم الكلاس أو الـ id وإليك مثال يعمل بشكل سليم، وقد كتبت لك السكريبت داخل كود HTML تجنبًا للمشاكل قم بتجربته. <!DOCTYPE html> <html> <head> <title>مثال عن استخدام innerHTML</title> </head> <body> <h1 id="example-heading">مرحبًا بك!</h1> <div id="example-content"> <p>هذا هو المحتوى الأصلي.</p> </div> <script type="text/javascript"> // استهدف عنصر العنوان const heading = document.getElementById('example-heading'); // تحديث المحتوى باستخدام innerHTML heading.innerHTML = 'مرحبًا بكم في مثال innerHTML!'; // استهدف عنصر المحتوى const content = document.getElementById('example-content'); // تحديث المحتوى الداخلي للعنصر بواسطة innerHTML content.innerHTML = `<p>هذا هو المحتوى المحدث باستخدام <strong>innerHTML</strong> و <strong>ES6</strong>!</p>`; </script> </body> </html> وهناك نقاش آخر لنفس المشكلة أنصحك بالإطلاع عليه:

قد يكون السبب هو عدم إعادة تعيين قيمة ScrollY عند تحميل الصفحة الجديدة، بمعنى عندما تقوم بالتنقل بين الصفحات في تطبيق React باستخدام React Router، يتم عرض المحتوى الجديد في نفس المكان الذي كانت فيه الصفحة السابقة، ومن المحتمل أن ScrollY يتم الاحتفاظ به من الصفحة السابقة، مما يجعل الصفحة الجديدة تبدأ في وضعية غير متوقعة. لذلك قم بإعادة تعيين قيمة ScrollY إلى الصفر عند تحميل الصفحة الجديدة باستخدام useEffect() مع مصفوفة الاعتماد الفارغة [] لضمان أن يتم تشغيلها فقط عند تحميل الصفحة للمرة الأولى. import { useEffect } from 'react'; function YourComponent() { useEffect(() => { window.scrollTo(0, 0); }, []); // ... }