اذهب إلى المحتوى
حول شغفك لإبداع حقيقي مع دورة تطوير الألعاب. اشترك الآن ×

Mustafa Suleiman

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

  • المساهمات

    13192

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

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

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

    365

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Mustafa Suleiman

  1. Mustafa Suleiman
    لإستقبال الـ input من المستخدم في Node.js وإرساله إلى قاعدة البيانات SQLite ، يمكنك إتباع الخطوات التالية: 1- تثبيت SQLite: يجب أولاً تثبيت مكتبة SQLite على جهاز الحاسوب الخاص بك. يمكنك فعل ذلك بإستخدام أحد مديري الحزم في النظام الخاص بك. على سبيل المثال، إذا كنت تستخدم npm ، فيمكنك تنفيذ الأمر التالي: npm install sqlite3 2- فتح قاعدة البيانات: يمكنك فتح قاعدة البيانات باستخدام دالة Database الموجودة في مكتبة SQLite. يمكنك استخدام الأمر التالي لفتح قاعدة البيانات: const sqlite3 = require('sqlite3').verbose(); const db = new sqlite3.Database(':memory:'); // يمكن تعيين المسار واسم ملف قاعدة البيانات هنا بدلاً من ':memory:' 3- إنشاء جدول: يمكنك إنشاء جدول باستخدام دالة run() المتاحة في مكتبة SQLite. يمكنك استخدام الأمر التالي لإنشاء جدول: db.run('CREATE TABLE users (id INT, name TEXT, email TEXT)'); 4- إدخال البيانات: يمكن إدخال البيانات باستخدام دالة run() مرة أخرى. يمكنك استخدام الأمر التالي لإدخال بيانات مستخدم: const id = 1; const name = 'John Doe'; const email = 'john.doe@example.com'; db.run(`INSERT INTO users(id, name, email) VALUES(?, ?, ?)`, [id, name, email], function(err) { if (err) { return console.log(err.message); } console.log(`A row has been inserted with rowid ${this.lastID}`); }); يمكن تغيير id و name و email إلى المدخلات المستلمة من المستخدم. بهذا الشكل، يمكنك استقبال input من المستخدم من Node.js وإرساله إلى قاعدة البيانات SQLite. يمكنك استخدام هذه الأمثلة كنقطة انطلاق وتعديلها وفقًا لاحتياجاتك.
  2. Mustafa Suleiman
    MathType هو برنامج يسمح لك بإنشاء وتحرير الصيغ الرياضية في مستندات الوورد والويب. يمكنك استخدام MathType مع PHP عن طريق استخدام البرمجة المباشرة للاتصال بالبرنامج وتوليد الصيغ الرياضية. لربط برنامج MathType بموقع مكتوب باستخدام PHP، يجب تنفيذ الخطوات التالية: 1- تأكد من أن برنامج MathType مثبت على جهاز الخادم الخاص بك. تنزيل إضافة mbstring: هي إضافة PHP مهمة تتيح العمل مع النصوص المتعددة البايت. يمكن تنزيلها عن طريق مدير حزم PHP أو بتثبيتها يدويًا. نسخ المجلد generic_wiris: هو المجلد الذي يحتوي على ملفات MathType الأساسية. يمكن العثور عليها في مجلدات الإضافة المثبتة لـ MathType. يجب نسخ هذا المجلد ووضعه في ال root الخاص بالخادم. تهيئة الملف configuration.ini: يحتوي هذا الملف على الإعدادات الأساسية لنظام MathType. يجب فتحه وضبط الإعدادات التي تريدها، مثل نوع الرسومات وحجم الخط ولغة العرض وغيرها. تهيئة صلاحيات المستخدم: يجب أن يكون للمستخدم صلاحيات تنفيذ لمحتويات المجلد generic_wiris/integration. هذا يمكن تحقيقه عن طريق تعيين الصلاحيات الصحيحة للملفات والمجلدات. 2- قم بإنشاء نموذج HTML يحتوي على مربع نص يحتوي على صيغة رياضية تريد إدراجها باستخدام MathType. في هذا المثال، نحن سنستخدم مكتبة jQuery للوصول إلى مربع النص وإرسال النص إلى برنامج MathType. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MathType Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="http://localhost/mathtype/MathType.js"></script> </head> <body> <input type="text" id="mathInput" name="mathInput" /> <button onclick="sendToMathType()">Insert MathType Formula</button> <script> function sendToMathType() { var mathText = $('#mathInput').val(); if (mathText !== '') { var mathML = MathType.ConvertEquation(mathText, "MathML"); window.opener.InsertMathML(mathML); window.close(); } } </script> </body> </html> 3- تنفيذ الاتصال مع برنامج MathType باستخدام PHP. في هذه المرحلة، يتم إرسال النص من النموذج إلى PHP ومن ثم يتم إرساله إلى MathType للتحويل إلى صيغة MathML. <?php // تأكد من أن $mathInput هو اسم حقل نص الرياضيات في النموذج الخاص بك. $mathInput = $_POST['mathInput']; // قم بإرسال نص الرياضيات إلى MathType لتحويله إلى MathML. $url = 'http://localhost/mathtype/MTScript.php?equation=' . urlencode($mathInput) . '&format=MathML'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($ch); curl_close($ch); // يجب عرض نتيجة MathML على صفحة الويب باستخدام العلامة <math> المدعومة بالمتصفح. // يمكن استخدام النص المنتج لإنشاء العلامة <math> المطلوبة باستخدام PHP DOMDocument. $dom = new DOMDocument(); $dom->loadXML($result); $mathml = $dom->saveXML($dom->getElementsByTagName('math')->item(0)); // ثم قم بعرض النتيجة على صفحة الويب باستخدام علامة <math> في النموذج الخاص بك. echo '<div>' . $mathml . '</div>'; ?> يرجى ملاحظة أن الكود يستخدم cURL للاتصال بـ MathType على localhost. قم بتعديل عنوان URL في حال كان يتم استضافة MathType على مضيف آخر. بعد ذلك، يمكننا استخدام دالة urlencode لترميز الصيغة ليتم إرسالها بشكل صحيح في الطلب الذي سيتم إرساله لموقع مكتوب. وبعد ذلك، يمكن استخدام دالة file_get_contents لجلب النتيجة من موقع مكتوب، وفك ترميز النتيجة باستخدام دالة urldecode. وفيما يلي الكود الذي يقوم بإجراء كل هذه الخطوات: // تعريف الصيغة $formula = 'x^2 + y^2 = z^2'; // ترميز الصيغة $encoded_formula = urlencode($formula); // جلب النتيجة من موقع مكتوب $url = 'http://www.sitename.com/cgi-bin/mathtype.cgi?eq=' . $encoded_formula; $result = file_get_contents($url); // فك ترميز النتيجة $decoded_result = urldecode($result); // طباعة النتيجة echo $decoded_result; يمكن تغيير قيمة المتغير $formula إلى أي صيغة رياضية أخرى، وستتم معالجتها بنفس الطريقة. ويمكن أيضًا تعديل قيمة المتغير $url ليشير إلى الموقع الذي يتم فيه استضافة برنامج MathType.
  3. Mustafa Suleiman
    لتحقيق هذا الهدف، يمكنك استخدام خاصية "exclude" في webpack لإخراج هذه الملفات من عملية التجميع. يمكنك تعديل قواعد Webpack الخاصة بك كما يلي: module: { rules: [ { test: /\.(ts|json)$/i, exclude: /src\/api\/mock/, use: [ // add your loader(s) here ], }, ], }, في هذا المثال، سيتم استبعاد أي ملف ينتهي بامتداد .ts أو .json من المجلد "src/api/mock" من عملية التجميع. يرجى ملاحظة أن خاصية "exclude" تستخدم الآن مع تعبيرات العادات النمطية (regular expressions) بدلاً من السلسلة النصية التي تم استخدامها في السؤال الأصلي. بمجرد استخدام هذه القاعدة، يجب أن تلاحظ أن Webpack لن يتضمن أيًا من ملفات ts أو JSON في مجلد "src/api/mock" في ملفات الإنتاج النهائية.
  4. Mustafa Suleiman
    يمكنك تحقيق هذا الأمر باستخدام CSS. يمكنك استخدام خاصية background-size لتحديد حجم الخلفية وتعديلها حتى تملأ الجانب الأيمن من الصفحة. يمكنك استخدام القيمة "cover" لتعديل حجم الخلفية حتى تملأ الصفحة بالكامل بما فيها الجانب الأيمن. على سبيل المثال، يمكنك استخدام الكود التالي في CSS: body { background-image: url("your-background-image.jpg"); background-size: cover; background-position: center; } حيث "your-background-image.jpg" هو اسم ملف الصورة الخاص بالخلفية الذي تريد استخدامه. تعديل قيمة background-position إذا كنت تريد تغيير موضع الصورة. هذا الكود سيجعل الخلفية تملأ الصفحة بالكامل بما فيها الجانب الأيمن.
  5. Mustafa Suleiman
    الخطأ الموجود في ملف upload.js يحدث بسبب عدم العثور على الكائن Dropzone، وهو غالبًا يعني عدم تحميل المكتبة المطلوبة بشكل صحيح. يجب التأكد من أن تم تضمين مكتبة Dropzone بشكل صحيح قبل استخدامها. يمكن حل هذا الخطأ بتأكد من تضمين مكتبة Dropzone بشكل صحيح في صفحة HTML الخاصة بالتطبيق. يمكنك استخدام CDN لتحميل مكتبة Dropzone من الإنترنت أو تضمين الملفات المطلوبة محليًا إذا كانت موجودة بالفعل في المشروع. وإليك مثال. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Upload Page</title> <!-- قم بتضمين Dropzone CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" /> </head> <body> <h1>Upload Your Files Here</h1> <form action="/upload" class="dropzone"></form> <!-- قم بتضمين Dropzone JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script> <script src="./upload.js"></script> </body> </html> في هذا المثال، يتم تضمين مكتبة Dropzone باستخدام CDN عن طريق وضع روابط CSS و JS في الصفحة HTML. Dropzone.autoDiscover = false; const myDropzone = new Dropzone('.dropzone', { url: '/upload', success: function(file, response) { console.log('Upload success', response); }, error: function(file, response) { console.error('Upload error', response); } }); يتم استخدام الأمر Dropzone.autoDiscover = false; لمنع Dropzone من البحث عن عناصر HTML التي يمكن تحويلها إلى مناطق إسقاط، ويتم إنشاء منطقة الإسقاط باستخدام الفئة .dropzone في عنصر النموذج. يتم تعيين مسار العمل المطلوب للإرسال إلى الخادم في خاصية url. يمكن تحديد مزيد من الإعدادات والخيارات لـ Dropzone باستخدام خيارات التكوين المختلفة. للمزيد:
  6. Mustafa Suleiman
    الدالة findOdd تستقبل مصفوفة (Array) A وتقوم بإرجاع العدد الذي يحدث فيه تكرارات فردية. مثلاً إذا كانت المصفوفة A هي [1, 2, 3, 2, 3, 1, 3]، فإن الدالة ستعيد القيمة 3، لأن العدد 3 هو الوحيد الذي يتكرر في المصفوفة بتكرار فردي. الكود يبدأ بتعريف دالة جديدة تسمى count والتي تستقبل مصفوفة (Array) arr وقيمة val، وتقوم بإرجاع عدد مرات تكرار val في المصفوفة arr. وتستخدم الدالة filter لتصفية القيم التي تساوي val ومن ثم حساب طول المصفوفة الناتجة. بعد ذلك، يتم تعريف متغير target وتعيينه بقيمة الصفر. تمر الدالة forEach على كل عنصر في المصفوفة A، وتستخدم دالة count لحساب عدد مرات تكرار العنصر في المصفوفة A. ثم يتم فحص ما إذا كان هذا العدد فرديًا أم لا، وذلك باستخدام العملية الرياضية % للتحقق مما إذا كان العدد الذي يمثل تكرارات العنصر في المصفوفة زوجيًا أم لا. إذا كان عدد التكرارات فرديًا، يتم تعيين قيمة العنصر الموجود حاليًا في الدورة الحالية إلى المتغير target. أخيراً، تعيد الدالة قيمة المتغير target الذي يمثل العدد الذي يحدث فيه تكرارات فردية في المصفوفة. المثال السابق: في الدورة الأولى، سيتم حساب عدد مرات تكرار الرقم 1، الذي يساوي 2، لأن الرقم 1 يتكرر مرتين في المصفوفة A. في الدورة الثانية، سيتم حساب عدد مرات تكرار الرقم 2، الذي يساوي 2، لأن الرقم 2 يتكرر مرتين في المصفوفة A. في الدورة الثالثة، سيتم حساب عدد مرات تكرار الرقم 3، الذي يساوي 3، لأن الرقم 3 يتكرر ثلاث مرات في المصفوفة A. في الدورة الرابعة، سيتم حساب عدد مرات تكرار الرقم 2 مرة أخرى، الذي يساوي 2، لأن الرقم 2 يتكرر مرتين في المصفوفة A. في الدورة الخامسة، سيتم حساب عدد مرات تكرار الرقم 3 مرة أخرى، الذي يساوي 3، لأن الرقم 3 يتكرر ثلاث مرات في المصفوفة A. في الدورة السادسة، سيتم حساب عدد مرات تكرار الرقم 1 مرة أخرى، الذي يساوي 2، لأن الرقم 1 يتكرر مرتين في المصفوفة A. في الدورة السابعة، سيتم حساب عدد مرات تكرار الرقم 3 مرة أخرى، الذي يساوي 3، لأن الرقم 3 يتكرر ثلاث مرات في المصفوفة A. بعد ذلك، سيتم فحص ما إذا كان العدد الذي تم حساب تكراراته فرديًا أم لا باستخدام الشرط count(A, arrnum) % 2 !== 0، وإذا كانت الشرط صحيحة، فإن قيمة العدد الذي يمثل تكراراته ستتم تعيينها إلى المتغير target. أخيرًا، يتم إرجاع قيمة المتغير target الذي يمثل العدد الذي يحدث فيه تكرارات فردية في المصفوفة A. إذا قمت بتنفيذ الدالة findOdd([1, 2, 3, 2, 3, 1, 3])، فستعيد الدالة القيمة 3، لأن العدد 3 هو العدد الذي يتكرر في المصفوفة 3 مرات، وهو يحدث فيه تكرارات فردية.
  7. Mustafa Suleiman
    نعم، هناك عدة أشياء يمكنك التحقق منها قبل شراء استضافة من شركة GoDaddy لضمان أنها تلبي احتياجات مشروع Next.js الخاص بك، وتشمل هذه الأشياء: دعم Node.js: تأكد من أن GoDaddy تدعم Node.js على الخوادم الخاصة بها، وأن الإصدار المدعوم هو الإصدار الذي يدعمه مشروع Next.js الخاص بك. السعر والتكلفة: تأكد من أن تكلفة الاستضافة من GoDaddy تتناسب مع ميزانيتك، وأنه لا توجد تكاليف مخفية أو رسوم إضافية غير متوقعة. الأمان: تحقق من أن GoDaddy توفر خدمات أمنية مثل الحماية من الاختراق والنسخ الاحتياطي المنتظم للبيانات الخاصة بك. الدعم الفني: تحقق من أن GoDaddy توفر دعمًا فنيًا على مدار الساعة، ويفضل أن يكون هذا الدعم عبر الهاتف أو الدردشة المباشرة. سمعة الشركة: تحقق من سمعة GoDaddy في السوق والمراجعات التي تم نشرها على الإنترنت، والتي يمكن أن تساعدك في تقييم جودة الخدمات التي تقدمها الشركة. بعد التحقق من هذه الأمور وتأكد من أن GoDaddy تلبي احتياجات مشروع Next.js الخاص بك، يمكنك شراء خطة استضافة منها ورفع مشروع Next.js الخاص بك على الخوادم الخاصة بها. و النقاط التي ذكرتها متوفرة في منصة GoDaddy حيث تدعم Node.js، وتوفر خيارات استضافة بتكلفة معقولة، وتوفر خدمات أمنية ودعم فني على مدار الساعة، ولديها سمعة جيدة في السوق. لذلك، يمكنك الاعتماد على GoDaddy لرفع مشروع Next.js الخاص بك على الإنترنت. ومع ذلك، يمكنك البحث عن مزودي خدمات استضافة أخرى ومقارنة الميزات والأسعار لضمان اختيار الخيار الأفضل لمشروعك. يمكنك رفع مشروع Next.js على GoDaddy باستخدام الخطوات التالية: قم بتسجيل الدخول إلى حساب GoDaddy الخاص بك. اختر خيار "استضافة المواقع" من القائمة الرئيسية. انتقل إلى صفحة "الملفات" وانقر على زر "إنشاء مجلد جديد" لإنشاء مجلد جديد لمشروعك. ارفع ملفات مشروع Next.js الخاص بك إلى المجلد الجديد باستخدام خيار "رفع الملفات". انتقل إلى صفحة "تكوينات node" وانقر على زر "إضافة تكوين جديد" لإنشاء تكوين جديد لمشروعك. قم بتحديد مجلد الرئيسي لمشروعك وأدخل الإصدار المناسب من Node.js في الحقل المخصص. احفظ التكوين الجديد وانتظر قليلاً حتى يتم تنشيطه. انتقل إلى صفحة "DNS" وانقر على زر "إضافة سجل" لإضافة سجل CNAME جديد. أدخل اسم المضيف المطلوب (على سبيل المثال، اسم مجلد مشروعك) وقم بإدخال "القيمة" باستخدام عنوان IP الخاص بموقع GoDaddy الخاص بك. احفظ الإعدادات وانتظر قليلاً حتى تتم مزامنة التغييرات. انتقل إلى متصفح الويب الخاص بك وأدخل عنوان المضيف الجديد الذي أنشأته في الخطوة 9. بهذه الطريقة، يمكنك رفع مشروع Next.js الخاص بك على GoDaddy وجعله متاحاً عبر الإنترنت. يرجى ملاحظة أنه قد تختلف الخطوات المحددة قليلاً اعتمادًا على نوع الاشتراك الذي اشتريته من GoDaddy.
  8. Mustafa Suleiman
    يصعب الجزم أي الطرق أفضل إلا بعد تحديد ما الهدف من تلك الأزرار وكيف سيتم عرضها وأحجام الشاشات التي يتطلب دعمها. الكود الذي تم توفيره هو لسطح المكتب فقط ولحل المشكلة المعروضة.
  9. Mustafa Suleiman
    يبدو أن هناك مشكلة في إنشاء ملف التوقيع الخاص بتطبيقك. يمكنك محاولة تشغيل التطبيق باستخدام إعدادات التوقيع الافتراضية المؤقتة لحل المشكلة مؤقتًا وتمكينك من تشغيل التطبيق على الأجهزة المحلية. 1. لفعل ذلك، يمكنك تنفيذ الخطوات التالية: 2. انتقل إلى مجلد المشروع على جهاز الكمبيوتر الخاص بك. 3. في مجلد المشروع، ابحث عن ملف build.gradle وافتحه باستخدام محرر النصوص المفضل لديك. 4. ابحث عن القسم signingConfigs وتأكد من أن جميع القيم المطلوبة معبأة بشكل صحيح. أضف الكود التالي في ملف build.gradle داخل القسم android: signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' v1SigningEnabled true v2SigningEnabled true } } buildTypes { debug { signingConfig signingConfigs.debug } } 5. حفظ الملف. 6. في نافذة Android Studio، قم بالنقر فوق Build من القائمة العلوية ، ثم Clean Project. 7. قم بالنقر فوق Build ، ثم Rebuild Project. 8. قم بتشغيل التطبيق مرة أخرى. إذا استمرت المشكلة، فيمكنك تشغيل الأمر --stacktrace لعرض المزيد من المعلومات عن المشكلة. وأيضًا قم بالرجوع إلى الإجابات على السؤال التالي وتجربة الحلول المطروحة في حال استمرار المشكلة.
  10. Mustafa Suleiman
    لتصميم تطبيقات الجوال، هناك العديد من اللغات والأطر البرمجية (Frameworks) المختلفة التي يمكن استخدامها، ولكن الخيار المناسب يعتمد على الاحتياجات والمتطلبات الخاصة بالتطبيق. تعلم لغة Java وتصميم التطبيقات بها يمكن أن يساعدك على فهم مفاهيم البرمجة والتصميم بشكل عام، حيث أن Java تستخدم على نطاق واسع في تطوير تطبيقات الجوال وتطبيقات الويب، ولها مجموعة قوية من المكتبات والأطر البرمجية المتاحة للمطورين. بالنسبة لتعلم لغة Dart واستخدام إطار العمل Flutter، فهو خيار آخر جيد. فFlutter هو إطار عمل قوي وشامل لتطوير تطبيقات الجوال، ويتميز بواجهات المستخدم المرنة والجميلة والأداء العالي، كما يتيح Flutter تطوير تطبيقات تعمل على نظامي التشغيل iOS و Android، بحيث يمكنك إنشاء تطبيق واحد يعمل على كلا المنصتين. يمكنك البدء بتعلم أيٍ من هاتين اللغتين وإطار العمل الخاص بها والتعرف على المكتبات والأدوات المتاحة لكل منهما. وبالتالي يمكنك اختيار الخيار الأنسب بناءً على الاحتياجات الخاصة بالتطبيق الذي تريد تطويره، ومدى قدرتك على التعامل مع المكتبات والأدوات المختلفة، وبالتالي تحديد الخيار الذي يناسبك أفضل من حيث الإنتاجية والجودة. وإذا كنت في البداية وتريد تعلم البرمجة فيجب عليك قراءة المقالات التالية فسترشدك إلى الطريق السليم. ويمكنك الرجوع إلى الإجابات على السؤال التالي: وهناك دورة في حسوب لتطوير التطبيقات، ستتعلم منها ما تريد. https://academy.hsoub.com/learn/javascript-application-development/
  11. Mustafa Suleiman
    في حالة وجود margin-bottom سيوجد مسافة في النهاية خاصة بعنصر a الأخير وهو ما لا نريده، ففي الصورة المطلوبة يريد حذف المسافات بالكامل، الكود سليم ويمكن إصلاحه من خلال تعديل كود css بإضافة: .qlink:not(:last-child){ margin-bottom: 7px; } ويصبح كود CSS كالتالي: .box{ border-style:solid; display: inline-block ; } .qlink { display:block; text-align:center; color: white; width: 150px; padding:16px 0; text-decoration:none; font-size: 12px; font-weight: bold; background-color: #1F70C4; } .qlink:not(:last-child){ margin-bottom: 7px; } .qlink:hover {background: #2484E9;} .qlink:active {background: #155292;} وفي حال أراد السائل إبقاء الكود الخاص به كما هو، فيجب تعديله ليصبح بالشكل التالي: HTML <div class='container'> <a href="https://google.com/1"> <button class="qlink">Awards</button> </a> <a href="https://google.com/2"> <button class="qlink">Directory</button> </a> <a href="https://google.com/3"> <button class="qlink">Patent</button> </a> <a href="https://google.com/4"> <button class="qlink">Calendar</button> </a> <a href="https://google.com/5"> <button class="qlink">Leave Request Tool</button> </a> <a href="https://google.com/6"> <button class="qlink">Publications</button> </a> </div> CSS div { width: max-content; text-align: center; border-style:solid; margin: auto; } .qlink { border: none; background-color: #1F70C4; color: white; height: 35px; width: 150px; font-size: 12px; display: inline-block; font-weight: bold; } .qlink:hover {background: #2484E9;} .qlink:active {background: #155292;} فالمشكلة كانت في إزالة الـ margin الخاصة بالأزرار ثم ضبط عرض الـ div الأب الذي يحوي كافة العناصر ليصبح عرضه هو نفس عرض المحتوى بداخله من خلال width: max-content;
  12. Mustafa Suleiman
    المشكلة في إعدادات Webpack. يجب أن تكون إعدادات الإخراج في Webpack تطابق المسار الذي يتم استخدامه في ملف الخادم (server) Express. عندما تحاول الوصول إلى ملف "index_bundle.js" من ملف Express، يجب أن تكون الإعدادات الخاصة بمسار الإخراج في Webpack مطابقة للمسار الذي يتم استخدامه في الصفحة HTML. في هذه الحالة، يجب على Webpack إخراج الملف إلى المسار "public/index" ويجب أن يتم الوصول إليه عبر المسار "/public/index/index_bundle.js". لحل المشكلة، يجب تغيير إعدادات الإخراج في Webpack كما يلي: module.exports = { entry: './app/index/index.js', output: { path: path.resolve(__dirname, 'public/index'), publicPath: '/public/index/', // تغيير المسار إلى "/public/index/" filename: 'index_bundle.js' }, // ... }; ومن ثم يجب استخدام هذا المسار في Express: app.use("/public/index", express.static(__dirname + "/public/index")); // استخدام "/public/index" بدلاً من "/" وبذلك يجب أن يكون بإمكانك الآن الوصول إلى "index_bundle.js" عبر المسار "http://localhost:3000/public/index/index_bundle.js".
  13. Mustafa Suleiman
    لتمكين التحديث التلقائي (hot reloading) في webpack-dev-server ، يجب إضافة خيار --hot إلى أمر البدء (start script) في package.json كما يلي: "scripts": { "start": "webpack-dev-server --mode development --inline --progress --hot", "build": "webpack --mode production" }, بمجرد إضافة --hot ، سيتم تشغيل خادم التطوير بشكل تلقائي ويقوم بالتحديث التلقائي للملفات بمجرد حفظ التغييرات. إذا كنت ترغب في تشغيل التحديث التلقائي لـ webpack-dev-server عند استخدام VSCode، يمكنك استخدام ميزة "Tasks" الخاصة بـ VSCode. يمكنك إنشاء مهمة تشغيل webpack-dev-server في ملف tasks.json في مجلد .vscode في مشروعك. يمكنك إنشاء الملف بنفسك من خلال القائمة المنسدلة Terminal في القائمة الرئيسية، ثم اختيار Configure Tasks وإنشاء ملف جديد. يجب أن تكون هذه هي المهمة التي يجب تضمينها في tasks.json: { "version": "2.0.0", "tasks": [ { "label": "start", "type": "npm", "script": "start", "group": { "kind": "build", "isDefault": true }, "problemMatcher": "$tsc" } ] } في هذه الحالة، ستعمل هذه المهمة على تشغيل الأمر npm start والذي يشغل webpack-dev-server. عند الانتهاء من إنشاء الملف، يمكنك تشغيل المهمة من خلال الضغط على Ctrl+Shift+B في VSCode، واختيار المهمة start، مما سيقوم بتشغيل webpack-dev-server والسماح لك بالتحديث التلقائي.
  14. Mustafa Suleiman
    لا يمكن استخدام "mailto:" في عنوان الإجراء (action) في النموذج لإرسال البريد الإلكتروني من خلال الجانب العميل (المتصفح)، بل يستخدم فقط لفتح برنامج البريد الإلكتروني على الكمبيوتر المحلي. لا يمكن استخدام JavaScript وحده لإرسال رسائل بريد إلكتروني من المستخدم مباشرةً، لأن JavaScript لغة برمجة تعمل على الجانب العميل (المتصفح) وليست على الخادم. ومع ذلك، يمكن استخدام JavaScript لإرسال طلب إلى الخادم ليتم معالجتها هناك. يمكن تنفيذ نموذج البريد الإلكتروني باستخدام HTML و CSS و JavaScript بالشكل التالي، لكن سيتطلب معالجة البيانات المرسلة بواسطة php او node.js في الخلفية: HTML: <form id="email-form" method="POST"> <label for="email">البريد الإلكتروني:</label> <input type="email" id="email" name="email" placeholder="ادخل بريدك الإلكتروني" required> <button type="submit" id="submit-btn">اشتراك</button> </form> <div id="success-msg" class="hidden">تم إرسال البريد الإلكتروني بنجاح.</div> <div id="error-msg" class="hidden">حدث خطأ أثناء إرسال البريد الإلكتروني، يرجى المحاولة مرة أخرى.</div> CSS: .hidden { display: none; } JavaScript: const form = document.querySelector('#email-form'); const submitBtn = document.querySelector('#submit-btn'); const successMsg = document.querySelector('#success-msg'); const errorMsg = document.querySelector('#error-msg'); form.addEventListener('submit', function(event) { event.preventDefault(); const emailInput = document.querySelector('#email'); const emailValue = emailInput.value; fetch('path/to/email/handler.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `email=${emailValue}` }) .then(response => { if (response.ok) { // إخفاء زر الإرسال وعرض رسالة النجاح submitBtn.classList.add('hidden'); successMsg.classList.remove('hidden'); } else { // إخفاء زر الإرسال وعرض رسالة الخطأ submitBtn.classList.add('hidden'); errorMsg.classList.remove('hidden'); } }) .catch(error => { console.error(error); // إخفاء زر الإرسال وعرض رسالة الخطأ submitBtn.classList.add('hidden'); errorMsg.classList.remove('hidden'); }); }); يستخدم fetch() لإرسال طلب POST إلى ملف المعالجة handler.php، مع إرفاق رأس Content-Type والجسم المحتوي على بيانات البريد الإلكتروني. يتم التعامل مع الاستجابة باستخدام then()، حيث يتم التحقق من معلومة الحالة للاستجابة وإظهار رسالة النجاح أو الخطأ وفقًا لذلك. يتم التعامل مع أي أخطاء باستخدام catch()، حيث يتم عرض رسالة الخطأ في هذه الحالة. يمكن تغيير الملف المعالج و Content-Type حسب حاجتك وتكوين الخادم الذي تستخدمه. هناك العديد من خدمات ومواقع البريد الإلكتروني الذي يمكن استخدامها لإضافة نماذج الاشتراك على موقعك بدون الحاجة إلى كتابة الكود بنفسك. هذه الخدمات عادةً ما تتيح إنشاء نماذج الاشتراك بسهولة وبشكل سريع، ويتم تضمينها في موقعك باستخدام قطعة من الكود الذي توفره الخدمة. ومن بين الخدمات المشهورة لذلك: Mailchimp: يتيح Mailchimp إنشاء نماذج الاشتراك المخصصة التي يمكن تضمينها في موقعك باستخدام كود HTML الذي توفره الخدمة. Constant Contact: هذه الخدمة تتيح إنشاء نماذج الاشتراك بشكل سهل وبدون الحاجة إلى كتابة الكود بنفسك. AWeber: هذه الخدمة تتيح إنشاء نماذج الاشتراك المخصصة بسهولة وتضمنها في موقعك باستخدام الكود HTML الذي توفره الخدمة. GetResponse: يتيح GetResponse إنشاء نماذج الاشتراك المخصصة التي يمكن تضمينها في موقعك باستخدام كود HTML الذي توفره الخدمة. هذه الخدمات لها تكاليف، وتختلف الأسعار والميزات المتاحة في كل منها. يمكنك البحث عن خدمة مناسبة لاحتياجاتك وميزانيتك.
  15. Mustafa Suleiman
    عندما تستورد الصورة باستخدام import كما فعلت في Img ، فإن Webpack يأخذ الملف المحدد ويقوم بتضمينه في ملف الإخراج (bundle.js) كما هو مفصل في الخيار type: 'asset/resource' الموجود في ملف webpack.config.js الخاص بك. عند استخدام مسار نسبي للصورة كما هو موضح في option-2 ، فإن Webpack لا يستطيع العثور على الملف لأنه يحاول البحث عنه في مجلد الإخراج (dist) وليس في مجلد الصور الخاص بالتطبيق (images). لتجنب هذا الخطأ، يمكنك استخدام مسارات نسبية مع webpack باستخدام publicPath في output، والذي يتم تعيينه إلى './' لجعل الملفات الموجودة في مجلد الصور الخاص بك متاحة للتطبيق. يمكنك أيضًا إضافة publicPath في file-loader كما يلي: { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', generator: { filename: 'static/images/[hash][ext][query]' }, publicPath: './' }, عند الانتهاء من ذلك ، يجب أن يعمل الأمر عند استخدام المسار النسبي: <img src='./images/test.jpg' alt="test-2" /> وتأكد من تأكيد وجود مجلد static/images في مجلد الإخراج (dist).
  16. Mustafa Suleiman
    في البداية إذا أردت التحكم في جهازك عن بعد فقط، فيمكنك استخدام برامج مثل TeamViewer وتركها تعمل على الجهاز والدخول عليه بواسطة الـ IP وباستطاعتك تعيين كلمة سر. أما تحويل جهازك إلى سيرفر عام يمكن أن يتم باستخدام بعض البرامج المجانية التي تمكنك من إعداد خادم على جهازك الخاص وجعله متاحًا للوصول من أي جهاز آخر على شبكة الإنترنت. سأشرح لك الخطوات الأساسية اللازمة لتحقيق ذلك: 1- تثبيت برنامج خادم الويب: يمكن استخدام أي برنامج خادم ويب مثل XAMPP أو WAMP أو Apache أو laragon لإنشاء خادم ويب. يوفر هذا البرنامج خادم ويب وقاعدة بيانات و PHP. يمكنك تنزيل البرنامج من موقع الويب الرسمي وتثبيته على جهازك. 2- اختبار الويب سيرفر: يجب التأكد من أن الويب سيرفر يعمل بشكل صحيح على جهازك. يمكن القيام بذلك عن طريق فتح متصفح وزيارة localhost. 3- تعيين عنوان IP ثابت لجهازك: تعيين عنوان IP الثابت يعني تحديد عنوان الإنترنت الخاص بجهاز الكمبيوتر الخاص بك بشكل دائم، والذي يتم تعيينه يدويًا. يختلف هذا عن العنوان الديناميكي الذي يتم تعيينه تلقائيًا عند الاتصال بالإنترنت. بعد تثبيت برنامج الخادم الخاص بك، سيكون من الضروري تعيين عنوان IP الثابت لجهاز الكمبيوتر الخاص بك، حيث يمكن استخدام هذا العنوان للوصول إلى جهاز الكمبيوتر الخاص بك عبر الشبكة. ومن أجل ذلك يمكنك العثور على إعداد تعيين العنوان الثابت في قسم الشبكة في إعدادات جهاز الكمبيوتر الخاص بك. 4- إعداد المنافذ اللازمة: يجب فتح المنافذ الخاصة بالويب سيرفر على جدار الحماية الخاص بالجهاز، للسماح لأي شخص في الشبكة بالوصول إلى الويب سيرفر. يجب فتح المنافذ 80 لبرتوكول HTTP و 443 لبروتوكول HTTPS. سأشرح الخطوات اللازمة لفتح المنافذ على راوتر من نوع TP-Link Archer C7. تسجيل الدخول إلى لوحة التحكم الخاصة بالراوتر: افتح متصفح الويب الخاص بك واكتب عنوان IP الافتراضي الخاص بالراوتر في شريط العنوان (عادةً ما يكون 192.168.0.1 أو 192.168.1.1). سيطلب منك إدخال اسم مستخدم وكلمة مرور لتسجيل الدخول إلى لوحة التحكم. الوصول إلى قسم إعدادات المنافذ: بمجرد تسجيل الدخول إلى لوحة التحكم، انتقل إلى قسم "Advanced" (متقدم) ثم اختر "Port Forwarding" (توجيه المنافذ). إضافة إعدادات التوجيه: اختر "Add New" (إضافة جديدة) لإنشاء إعدادات التوجيه الجديدة. سيطلب منك تحديد اسم الجهاز (عادةً ما يكون اسم الخادم) وعنوان IP الخاص بالجهاز (عنوان IP الثابت الذي قمت بتعيينه سابقًا) ورقم المنفذ الداخلي والخارجي. حفظ الإعدادات: بعد إدخال جميع التفاصيل اللازمة، انقر على "Save" (حفظ) لحفظ الإعدادات الجديدة. ستحتاج إلى تكرار هذه الخطوات لإضافة إعدادات توجيه منفذ إضافية. التأكد من البورتات التي تم فتحها من خلال التوجه لموقع https://portchecker.co/checking وستجد أنه تعرف على الـ public IP الخاص بجهازك ما عليك سوى كتابة بورت 80 ثم اضغط على check وكرر نفس الأمر مع بورت 443 وتأكد من ظهور كلمة port x is open. من المهم ملاحظة أن إعدادات توجيه المنافذ يمكن أن تختلف قليلاً بين الراوترات المختلفة، ومن المهم أيضًا إتباع الإرشادات الخاصة بالراوتر الخاص بك للتأكد من تمكين توجيه المنافذ بطريقة صحيحة. 5- تفعيل خدمة DNS: بعد الانتهاء من إعداد إعدادات الراوتر وتحديد عنوان IP الخاص بالجهاز الخادم، يمكنك استخدام DNS لتسهيل عملية الوصول إلى الخادم. يمكنك استخدام خدمات DNS المجانية مثل No-IP أو DynDNS لتسجيل عنوان IP الخاص بالخادم الخاص بك وربطه بعنوان URL سهل الاستخدام. وسبب القيام بتلك الخطوة هو ربط الـ public IP باسم دومين أو عنوان URL يمكنك كتابته والدخول على جهازك عن بعد، فربما بعد إعادة تشغيل الراوتر قد يتغير الـ public IP، ويمكنك الحصول من مزود الخدمة على static IP. الخطوات لاستخدام DNS هي كالتالي: قم بإنشاء حساب على موقع خدمة DNS المختارة والأفضل No-IP لكونها مجانية. أدخل اسم النطاق الذي تريد استخدامه واتبع التعليمات لربط عنوان IP الخاص بالخادم بالاسم المستخدم في النطاق. تأكد من تحديث إعدادات الراوتر الخاص بك للسماح بمرور حركة المرور المرتبطة بـ DNS من الخارج إلى الجهاز الخادم. قم بتنزيل برنامج العميل الذي يقدمه موقع خدمة DNS المختارة وتثبيته على الجهاز الخادم. سيتم تشغيل هذا البرنامج في الخلفية وسيقوم بتحديث عنوان IP الخاص بالخادم بشكل دوري. يمكنك الآن الوصول إلى الخادم باستخدام عنوان URL المحدد لخدمة DNS المستخدمة.
  17. Mustafa Suleiman
    هناك العديد من الخيارات المتاحة لاستضافة تطبيقات Next.js على الإنترنت، ويمكن الاختيار بين خيارات مثل: Vercel: هي منصة استضافة خاصة بـ Next.js وتوفر دعمًا متميزًا لهذه التقنية وتقدم خدمة الاستضافة بشكل مجاني ومدفوع، وتسمح لإضافة عدد غير محدود من النطاقات. namecheap: تدعم شركة Namecheap استضافة تطبيقات Next.js وتوفر خيارات متعددة للخوادم المشتركة والخوادم الخاصة بأسعار مناسبة. يمكنك اختيار خطة استضافة تناسب احتياجاتك وميزانيتك، مع توفير خيارات متعددة للدفع ودعم فني متاح على مدار الساعة. Heroku: هي خدمة استضافة تدعم تقنية Node.js وتتميز بأنها سهلة الاستخدام وتوفر خدمة مدفوعة ومجانية. DigitalOcean: هي خدمة استضافة توفر خيارات متعددة للاستضافة بدءًا من الخوادم الافتراضية حتى الخوادم الخاصة والاستضافة المدارة، وتوفر دعمًا لتقنية Node.js و Next.js، ويمكن إضافة عدد غير محدود من النطاقات. AWS Elastic Beanstalk: هي خدمة استضافة توفر دعمًا لتقنية Node.js و Next.js، وتسمح بإضافة عدد غير محدود من النطاقات، وتعتمد على سحابة Amazon Web Services (AWS)، وتوفر خيارات متعددة للتكوين والتوسع. Google Cloud Platform: هي خدمة استضافة توفر دعمًا لتقنية Node.js و Next.js، وتسمح بإضافة عدد غير محدود من النطاقات، وتتميز بأنها سهلة الاستخدام وتقدم خدمة مجانية ومدفوعة. Cloudflare Pages: يمكن لـ Cloudflare Pages دعم عدة نطاقات لتطبيق واحد، وتوفر خدمة CDN مدمجة لتحسين أداء التطبيقات، بالإضافة إلى أنها توفر عمليات نشر بسيطة وسهلة الاستخدام. وتوفر Cloudflare Pages خيارات دفع مختلفة مثل الاشتراك الشهري أو الدفع مقابل الاستخدام بأسعار تنافسية بالمقارنة مع خدمات الاستضافة الأخرى. Netlify: تعتبر Netlify مثالية للاستضافة السريعة والبسيطة لتطبيقات Next.js. توفر خططًا مجانية ومدفوعة ، ولكن يمكن أن تكون الخطط المدفوعة أكثر تكلفة. Linode: توفر Linode خدمة VPS مع خطط متعددة بأسعار مختلفة. تدعم Node.js ويمكن استخدامها لتشغيل تطبيقات Next.js. توجد العديد من الخيارات المتاحة لاستضافة تطبيقات Next.js، والخيار الأفضل يعتمد على ميزانيتك واحتياجاتك الفردية. من بين الخيارات التي تم ذكرها، Vercel هي الخيار الأكثر تخصصاً لاستضافة تطبيقات Next.js، وتقدم خدمة استضافة مدفوعة ومجانية مع دعم لإضافة عدد غير محدود من النطاقات.
  18. Mustafa Suleiman
    ممتاز، تعلم HTML و CSS هو الخطوة الأولى لتصميم وتطوير صفحات الويب، ولكن هناك الكثير من التقنيات والأدوات المختلفة التي يجب أن تتعلمها لتكون مطور ويب محترف. HTML و CSS ليستا لغات برمجة، إنما هما لغتان تستخدمان لتطوير صفحات الويب. HTML هي لغة ترميز النصوص التي تستخدم لتحديد هيكل صفحات الويب، بينما تستخدم CSS لتحديد التنسيقات والأساليب الجمالية لعرض محتوى الصفحة. بينما لغة JavaScript تعتبر لغة برمجة مستخدمة بشكل شائع في تطوير صفحات الويب وتطبيقات الويب. يمكن استخدام JavaScript لتوفير العديد من المزايا لصفحات الويب، بما في ذلك تحديث المحتوى ديناميكيًا وتفعيل العناصر التفاعلية. لذلك، إذا كان الشخص يرغب في تطوير صفحات الويب التفاعلية والديناميكية، فسيحتاج بالتأكيد إلى تعلم JavaScript. ولكن إذا أردت أن تأسيس نفسك بشكل قوي في البرمجة ولديك وقتٍ كافي لذلك، فأنصحك بفعل ذلك وبشدة والإتجاه نحو تعلم لغة C++ قبل تعلم JavaScript. وإذا أردت تعلم مجال الويب، إليك مسارًا كاملاً لتصبح مطور Full-stack لتتمكن من إنشاء مشروع كاملاً بمفردك: JavaScript: هي لغة برمجة تستخدم عادة لتطوير وظائف تفاعلية في صفحات الويب، مثل التحقق من الإدخالات وإضافة تأثيرات متحركة. لتعلم JavaScript. Bootstrap: هي إطار عمل لتصميم صفحات الويب تستخدمه العديد من المواقع الكبيرة، والذي يسهل عليك عملية تصميم الصفحات وجعلها تستجيب بشكل جيد على جميع الأجهزة المختلفة. tailwindcss: يمكنك تعلم tailwindcss بدلاً من Bootstrap فهى توفر مرونة أكبر في تخصيص التصميم وإعادة استخدام الأكواد في العديد من المشاريع المختلفة، حيث يمكن للمطورين تعريف مخصصاتهم الخاصة واستخدامها في أي مكان داخل التطبيق. Sass: هي لغة تعتمد على CSS، وتستخدم لتبسيط عملية كتابة الأنماط والتنسيقات في CSS، وتحسين إمكانية إعادة استخدام الشفرة. Git: هو نظام للتحكم في الإصدارات يستخدم لتتبع التغييرات في الشفرة المصدرية وإدارة تعاون فريق العمل على المشاريع. تعلم إطارات العمل (Frameworks): تعتبر إطارات العمل مجموعة من الأدوات والمكتبات التي تساعد المطورين في إنشاء تطبيقات الويب بسهولة وسرعة. بعض الإطارات الشائعة هي React.js و Angular و Vue.js. إطارات العمل الخاصة بالـ Back-End: يمكن استخدام إطارات العمل الخاصة بالـ Back-End مثل Node.js وإطار العمل الخاص بها Express.js لبناء تطبيقات ويب ديناميكية وقابلة للتوسع. تتيح هذه الإطارات العديد من المزايا مثل: القدرة على التعامل مع البيانات وقواعد البيانات باستخدام لغة جافاسكريبت على الجانب الخادم. القدرة على بناء API للتفاعل مع التطبيقات الأخرى وتوفير خدمات ويب. 8 - قواعد البيانات: يجب تعلم قواعد البيانات الحديثة والشائعة مثل MySQL أو MongoDB أو PostgreSQL. لتعلم العمل مع إطارات العمل الخاصة بالـ Back-End، يمكن البدء بتعلم الأساسيات في لغة جافاسكريبت ومفاهيم البرمجة الأساسية. بعد ذلك يمكن التحول إلى تعلم إطار العمل Node.js و Express.js، والتعلم عن كيفية التعامل مع البيانات والاتصال بقاعدة البيانات. من المهم أيضًا التعلم عن كيفية بناء API وتصميمها بشكل صحيح لتوفير خدمات ويب عالية الجودة وآمنة. يجب أيضًا تعلم الأمان والحماية وكيفية التعامل مع الأخطاء والأخطار المحتملة في تطوير تطبيقات الويب.
  19. Mustafa Suleiman
    إذا فهمت سؤالك بشكل صحيح، سأقوم بتقسيم الإجابة إلى جزئين على أي حال. الجزء الأول (الجانب البرمجي) التطبيقات مثل Apple Pay و STC Pay تسمى Fintech، وإليك الطريقة التي يتم إنشاء تلك التطبيقات بها بشكل مختصر: يتضمن الجانب الخاص بالبرمجة في إنشاء تطبيق مثل Apple Pay العديد من العناصر التقنية المهمة، ومن أهمها: لغات البرمجة: يجب اختيار اللغات البرمجية المناسبة لبناء تطبيق Apple Pay. يمكن استخدام Objective-C أو Swift لبرمجة تطبيقات iOS، بينما يمكن استخدام Java أو Kotlin لبرمجة تطبيقات Android. البرمجة النظيفة: يجب كتابة الكود بشكل نظيف ومنظم ومناسب للصيانة والتحسين فيما بعد، مما يسهل على المطورين العمل على المشروع بشكل أفضل في المستقبل. الواجهة البرمجية للتطبيق (API): يجب إنشاء واجهة برمجية تتيح للمستخدمين التفاعل مع التطبيق بشكل مريح وبسيط، وتوفير أدوات ووظائف تجعل استخدام التطبيق سهلاً وفعالاً. دمج الدفع: يتطلب إنشاء تطبيق مثل Apple Pay دمج وظيفة الدفع الآمن والموثوق به، وذلك من خلال استخدام البوابات الدفع الشهيرة مثل Stripe و PayPal وغيرها. الامتثال للمعايير الأمنية: يجب على المطورين الالتزام بالمعايير الأمنية الصارمة، مثل PCI DSS و GDPR، لتأمين المعلومات الحساسة وحماية البيانات الشخصية للمستخدمين. اختبار التطبيق: يجب إجراء اختبارات شاملة لتحقيق الجودة والموثوقية والأداء المطلوب للتطبيق، وذلك من خلال استخدام أدوات الاختبار المختلفة مثل Xcode و Android Studio. التطوير المستمر: يجب العمل على تطوير التطبيق باستمرار، وتحديثه وتطويره لتلبية متطلبات المستخدمين وتحسين الأداء والأمان و الاستجابة للتغييرات في البيئة التقنية والتحديثات الجديدة في الأجهزة والأنظمة الأساسية. يمكن تحقيق ذلك من خلال استخدام أساليب التطوير الحديثة مثل Agile وDevOps والعمل على تطبيق أفضل الممارسات في هذا المجال. بناء الخادم وقاعدة البيانات: يجب أن يتم تخزين معلومات العملاء بشكل آمن في قاعدة البيانات. يتطلب هذا إنشاء خادم واستضافة البيانات وضمان أمانها وحمايتها. بناء تطبيق الهاتف الجوال: يجب أن يتم برمجة تطبيق للهواتف الذكية يعمل بنظام iOS و Android. يجب أن يكون التطبيق متوافقًا مع مختلف أنواع الهواتف المحمولة. تكنولوجيا الاتصال اللاسلكي (NFC): يستخدم Apple Pay تقنية NFC لنقل المعلومات بين الهاتف الذكي وجهاز الدفع عند السداد. يجب عليك إضافة هذه التقنية إلى تطبيقك إذا كنت تريد إنشاء تطبيق مشابه. يجب الانتباه إلى أن إنشاء تطبيق مثل Apple Pay يحتاج إلى خبرة ومهارات تطويرية عالية، وموارد كبيرة للتطوير والتسويق والصيانة والدعم. الجزء الثاني (طريقة شحن الرصيد) تعتمد محافظ الكترونية مثل Apple Pay و STC Pay على تقنية الدفع الرقمي التي تستخدمها، والتي تتيح للمستخدمين إجراء المدفوعات الإلكترونية بشكل سهل وآمن. ولشحن رصيد المحافظ الإلكترونية، يمكن القيام بذلك من خلال الخطوات التالية لجميع المحافظ الإلكترونية بشكل عام: قم بتحميل تطبيق المحفظة الإلكترونية المناسبة على هاتفك الذكي. اختر الخيار "شحن الرصيد" أو "إضافة الأموال" في التطبيق. حدد المبلغ الذي ترغب في شحنه إلى محفظتك الإلكترونية. اختر طريقة الدفع المناسبة، والتي قد تشمل الدفع باستخدام بطاقة الائتمان أو الخصم المباشر أو خيارات أخرى مثل PayPal أو Apple Pay إذا كانت متاحة، وفي بعض البلاد العربية يمكن شحن المحافظ الإلكترونية نقدًا عن طريق فروع مزود الخدمة. قم بإدخال معلومات الدفع وتأكيد العملية. بالنسبة لمحفظة Apple Pay تستطيع شحن رصيدك في Apple Pay بسهولة باستخدام بطاقات الائتمان أو الخصم الخاصة بك التي تم تخزينها في محفظتك الرقمية. وفيما يلي خطوات شحن الرصيد في Apple Pay: قم بفتح تطبيق المحفظة على جهاز iPhone أو iPad الخاص بك. اختر بطاقة الائتمان أو الخصم التي ترغب في استخدامها لشحن الرصيد. انتقل إلى قسم "بطاقات" من التطبيق ، وانقر على "إضافة المال". اختر المبلغ الذي ترغب في إضافته إلى رصيد Apple Pay الخاص بك. انقر على "Apple Pay" باعتبارها طريقة دفع. أدخل معلومات الدفع وتأكد من صحتها، مثل رمز الأمان الثلاثي أو رمز التحقق المكون من 4 أرقام. انقر على "إضافة المال" وانتظر حتى تكتمل العملية. هناك طرق أخرى للشحن أيضًا مثل: الحوالة البنكية: يمكنك استخدام الحوالة البنكية لشحن رصيد في Apple Pay، وذلك عن طريق إضافة حساب البنك إلى التطبيق ومن ثم تحويل المبلغ المراد شحنه إلى حساب Apple Pay. تطبيقات الدفع الإلكتروني الأخرى: توجد العديد من التطبيقات الأخرى التي تتيح شحن رصيد في Apple Pay، مثل PayPal وVenmo وCash App وغيرها، ويمكن استخدامها لنقل الأموال من حسابها إلى حساب Apple Pay. ستظهر الأموال المضافة إلى رصيد Apple Pay الخاص بك على الفور بعد اكتمال العملية. يمكنك استخدام هذه الأموال في التطبيقات والخدمات التي تقبل Apple Pay كطريقة دفع. بالنسبة لمحفظة STC Pay يمكنك شحن المحفظة من خلال تطبيق STC Pay عن طريق الطرق الآتية: 1- عن طريق Apple Pay: اضغط على "إضافة الأموال" اضغط خيار Apple Pay أدخل المبلغ الذي تريد إضافته اختر بطاقة من بطاقاتك الموجودة في Apple Wallet لإضافة الأموال منها أكّد العملية لإضافة الأموال بثوانٍ. 2- عن طريق البطاقة الائتمانية أو بطاقة مدى: اضغط على "إضافة الأموال" اضغط خيار البطاقة الائتمانية أو بطاقة مدى أدخل المبلغ الذي تريد إضافته، ثم استمرار أدخل تفاصيل البطاقة أكّد العملية لشحن حسابك بثوانٍ. 3- عن طريق التحويل المحلي إلى STC Pay: اضغط على "إضافة الأموال" اضغط خيار التحويل البنكي إلى STC Pay اختر من البنوك المتعاونة وانسخ رقم الحساب أو الآيبان حوّل محلياً من حسابك البنكي إلى حسابك في STC Pay من خلال لصق رقم الحساب أو الآيبان ستصل الحوالة خلال ساعات عمل بنكك الرسمي. 4- عن طريق سداد: اضغط على "إضافة الأموال" اضغط خيار سداد انسخ رقم سداد المكون من 10 أرقام في STC Pay اختر دفع فاتورة سداد من حسابك البنكي وإضافة فاتورة جديدة باسم المفوتر.
  20. Mustafa Suleiman
    ستجد هنا شرح كامل لطريقة الإشتراك وطرق الدفع وهما باي بال و البطاقة الإئتمانية. وهناك طريقة أخرى وهي بطاقة الهدية: تُوفّر أكاديمية حسوب لزوارها إمكانية شراء بطاقة هدية ومشاركتها، ليتمكن متلقّي الهدية من استخدامها في التسجيل بالدورات المتوفرة في الأكاديمية. وفي حال عدم إمكانية الدفع بالطرق السابقة: يمكن الدفع للدورات التدريبية المختلفة بواسطة أي بطاقة بنكية أو حساب بايبال، ولا يشترط أن يقوم الشخص الذي يدرس الدورة بدفع سعرها، فإذا كان لديك أقارب أو أصدقاء في الخارج يمكنهم مساعدتك في دفع تكلفة الدورة. يجب الإشارة إلى أنه بعد اجتياز الامتحان النهائي للدورة والتأكد من هوية المتدرب، يتم منح الشهادة الخاصة بالدورة للشخص الذي اجتاز الامتحان بنجاح، بغض النظر عن هوية الشخص الذي دفع ثمن الدورة. عند اشتراكك بإحدى دورات حسوب، ستحصل تلقائيًا على وصول لأول مسار من بقية الدورات بشكل مجاني لتتعرف على محتواها، وبعد ذلك يمكنك الاشتراك بدورة ثانية في حال أردتِ إكمال المسارات في هذه الدورة الجديدة.
  21. Mustafa Suleiman
    لا بالطبع لا يجب أن يكون لديك حاسوب بمواصفات عالية للتعلم والعمل. يمكنك البدء في التعلم والعمل بأي جهاز كمبيوتر يعمل بنظام التشغيل المناسب للمهام التي تريد القيام بها. ومع ذلك، يمكن أن يكون لديك حاجة إلى زيادة سعة الذاكرة العشوائية RAM وتحسين المعالج وبطاقة الرسومات في بعض الحالات لتشغيل بعض البرامج الثقيلة بشكل مريح، ولكن هذا يعتمد على نوع العمل الذي تقوم به. مواصفات الحاسوب المناسب للبرمجة: المعالج: يفضل اختيار معالج بسرعة عالية ويفضل أن يكون بـ 4 أو أكثر من النوى. الذاكرة العشوائية (RAM): يجب أن تكون بحجم كافي لتشغيل برامج التطوير، يفضل 8 جيجابايت أو أكثر. القرص الصلب (HDD) أو قرص الحالة الصلبة (SSD): يجب أن يكون بحجم كافي لتثبيت النظام والبرامج، ويفضل استخدام SSD لتسريع عملية التحميل والإقلاع. بطاقة الشاشة: يفضل استخدام بطاقة شاشة متوسطة الأداء أو عالية الأداء إذا كنت ستعمل على تطوير برامج الجرافيك أو الألعاب. مواصفات الحاسوب المناسب لبرامج الجرافيك: المعالج: يفضل اختيار معالج بسرعة عالية ويفضل أن يكون بـ 4 أو أكثر من النوى. الذاكرة العشوائية (RAM): يجب أن تكون بحجم كافي لتشغيل برامج الجرافيك، يفضل 16 جيجابايت أو أكثر. القرص الصلب (HDD) أو قرص الحالة الصلبة (SSD): يجب أن يكون بحجم كافي لتثبيت النظام والبرامج، ويفضل استخدام SSD لتسريع عملية التحميل والإقلاع. بطاقة الشاشة: يفضل استخدام بطاقة شاشة عالية الأداء مثل NVIDIA GeForce أو AMD Radeon. ملحوظة: يمكن العمل على البرمجة وبرامج الجرافيك بحاسوب بمواصفات أقل، ولكن المواصفات المذكورة أعلاه ستساعد على تحسين سرعة العمل وجودة الأداء. في المجمل، يمكن البدء في التعلم والعمل بأي جهاز كمبيوتر متاح لديك، ثم ترقية الموارد تباعًا حسب الحاجة وقدرتك على ذلك. بالنسبة لطريقة التقديم على دورات أكاديمية حسوب: ستجدي هنا شرح كامل لطريقة الإشتراك وطرق الدفع وهما باي بال و البطاقة الإئتمانية. عند اشتراكك بإحدى دورات حسوب، ستحصلي تلقائيًا على وصول لأول مسار من بقية الدورات بشكل مجاني لتتعرفي على محتواها، وبعد ذلك يمكنك الاشتراك بدورة ثانية في حال أردتِ إكمال المسارات في هذه الدورة الجديدة. يمكنك الحصول على المزيد من التفاصيل حول الدورات وإن كان لديك أي سؤال من مركز المساعدة.
  22. Mustafa Suleiman
    يمكن استخدام لغة C++ لرسم ثلاث أهرامات بجانب بعض باستخدام حلقات التكرار والدوال المساعدة في مكتبة الرسم المختارة. وهذا مثال بسيط يرسم ثلاث أهرامات بجانب بعض باستخدام مكتبة SDL: #include <iostream> #include <SDL.h> // تعريف الثوابت اللازمة للبرنامج const int SCREEN_WIDTH = 640; const int SCREEN_HEIGHT = 480; const int PYRAMID_HEIGHT = 10; const int PYRAMID_SPACING = 20; const int PYRAMID_BASE_WIDTH = 10; int main(int argc, char* args[]) { // تهيئة المكتبة SDL_Init(SDL_INIT_VIDEO); SDL_Window* window = SDL_CreateWindow("Pyramids", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN); SDL_Renderer* renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED); SDL_SetRenderDrawColor(renderer, 0xFF, 0xFF, 0xFF, 0xFF); // عمل حلقة لرسم الأهرامات for (int i = 0; i < 3; i++) { // حساب إحداثيات الأهرام int x = (SCREEN_WIDTH / 4) + (i * (PYRAMID_BASE_WIDTH + PYRAMID_SPACING)); int y = SCREEN_HEIGHT - PYRAMID_HEIGHT; // عمل حلقة لرسم الصفوف في الأهرام for (int j = 0; j < PYRAMID_HEIGHT; j++) { // حساب إحداثيات الصف int rowWidth = PYRAMID_BASE_WIDTH - j; int rowX = x + ((PYRAMID_BASE_WIDTH - rowWidth) / 2); int rowY = y - (j * 10); // رسم النجوم في الصف for (int k = 0; k < rowWidth; k++) { SDL_RenderDrawPoint(renderer, rowX + k, rowY); } } } // عرض الرسم على الشاشة وانتظار الإغلاق SDL_RenderPresent(renderer); SDL_Delay(5000); // تحرير الموارد والخروج SDL_DestroyRenderer(renderer); SDL_DestroyWindow(window); SDL_Quit(); return 0; } يمكن تعديل قيم الثوابت المعرفة في البرنامج لتحقيق نتائج مختلفة. ويمكن استخدام الحلقات لتوسيع الرسم وإضافة مزيد من الأشكال.
  23. Mustafa Suleiman
    الخطأ الذي تتلقاه يشير إلى أن بعض الحقول الإلزامية في نموذج Django لم تتم إدخالها في الطلب POST الخاص بك. تأكد من تقديم جميع الحقول الإلزامية والتأكد من أنها ليست فارغة. بعض الأسباب الأخرى التي يمكن أن تتسبب في هذا الخطأ تشمل: عدم تضمين حقل الرمز الخاص بك في نموذج النموذج في النموذج HTML. عدم إضافة enctype="multipart/form-data" إلى العلامة form في النموذج HTML لدعم تحميل الملفات. عدم تضمين csrf_token في النموذج HTML للحماية ضد هجمات CSRF. قمت بإضافة تعليقات لشرح الأمور الجديدة التي قمت بتحديثها في الكود. from django.shortcuts import render, redirect from django.contrib import messages from .forms import ProductForm def Add_Product(request): if request.method == "POST": form = ProductForm(request.POST, request.FILES) if form.is_valid(): # استخدمت قوسين للاستدلال # احفظ البيانات وتمرير العنصر المميز إلى commit=False product = form.save(commit=False) # تحديد المستخدم الذي قام بإنشاء العنصر product.created_by = request.user product.save() # رسالة نجاح في حالة النجاح messages.success(request, 'Product has been added.') return redirect('product') else: # رسالة خطأ إذا كانت النموذج غير صالح messages.error(request, form.errors) else: # تم إنشاء نموذج فارغ لعرض الصفحة الأولية form = ProductForm() context={ 'form':form, 'title':'iPanel | Product Master', 'page_title':'Product List', 'tree_title_1':'Product', 'tree_title_2':'Add', 'tree_url':'product', 'btn_type':'fa fa-regular fa-plus', } return render(request,'panel/product/form.html',context) تأكد من تحديث ملف views.py بالكود الجديد وإعادة تشغيل الخادم Django ومحاولة إرسال النموذج مرة أخرى. يجب أن تعمل الآن دون الحصول على أي أخطاء.
  24. Mustafa Suleiman
    أنت بحاجة إلى قراءة المقالات التالية بتمعن وهدوء وستجد الإجابة بنفسك، لأنك بحاجة إلى فهم طريقة عمل الـ event handlers في React.
  25. Mustafa Suleiman
    إذا كنت تواجه مشكلة في عدم ظهور محرر الصفحات WPBakery على موقع الويب الخاص بك، فهناك بعض الخطوات التي يمكنك اتباعها لإصلاح المشكلة: 1- التأكد من تثبيت الإضافة بشكل صحيح: تأكد من أن الإضافة مثبتة ومفعلة بشكل صحيح. يمكنك التحقق من ذلك من خلال الذهاب إلى قائمة الإضافات في لوحة التحكم الخاصة بالموقع والتحقق من حالة WPBakery. إذا لم يكن WPBakery مثبتًا بشكل صحيح ، فقد يكون من الأفضل إلغاء تثبيته وإعادة تثبيته مرة أخرى. يمكنك القيام بذلك من خلال الانتقال إلى "الإضافات" في لوحة التحكم الخاصة بموقعك ، وإلغاء تثبيت WPBakery ، ثم إعادة تثبيته مرة أخرى. 2- التحقق من تحديثات الإضافة: تحقق من أن الإضافة محدثة إلى أحدث إصدار متاح. يمكنك التحقق من ذلك عن طريق التحقق من قائمة التحديثات في لوحة التحكم الخاصة بالموقع. 3- تعطيل الإضافات الأخرى: جرب تعطيل جميع الإضافات الأخرى على موقع الويب الخاص بك وتحقق من ما إذا كان ذلك يؤدي إلى حل المشكلة. قد تتعارض بعض الإضافات مع WPBakery وتؤدي إلى مشكلة في عرض المحرر. 4- مسح ذاكرة التخزين المؤقت للمتصفح: يمكنك مسح ذاكرة التخزين المؤقت للمتصفح الخاص بك لحل المشكلة. يمكنك القيام بذلك من خلال إعدادات المتصفح الخاص بك. 5- التأكد من أن WPBakery يدعم نسخة WordPress الحالية: تحقق من أن WPBakery يدعم الإصدار الحالي من WordPress الذي تستخدمه. إذا كانت نسخة WPBakery الحالية لا تدعم نسخة WordPress الحالية ، فقد يكون من الأفضل ترقية إضافة WPBakery.
×
×
  • أضف...