Sam Ahw

هل يمكنك توضيح ما المقصود بترتيب الدورة؟ جميع المسارات ضمن الدورات مرتبة وينصح بالبدء بالمسارات بالترتيب، ولكن يمكنك اختيار أي مسار تفضّله في حال كان لديك خبرة مسبقة بمجال معيّن.

يمكنك الاستفادة من الحلول المطروحة على نفس السؤال:

حاول تحديث أو استبدال المتصفح على جهازك باستخدام متصفح Chrome إن لم تكن تستخدمه، وفي حال استمرت المشكلة يمكنك التواصل مع فريق الدعم من هنا

المشكلة ليست بإصدار برنامج android studio بل بتوافقية المكتبات والاعتماديات المستخدمة في المشروع مع إصدار SDK المعرّف ضمن مشروعك، يمكنك إجراء التعديلات التالية على الملف build.gradle الموجود ضمن المسار android/app/build.gradle: android { compileSdkVersion 31 // تعديل الإصدار هنا إلى 31 sourceSets { main.java.srcDirs += 'src/main/kotlin' } defaultConfig { applicationId "com.example.blah_blah" minSdkVersion 16 targetSdkVersion 31 //تعديل الإصدار إلى 31 versionCode flutterVersionCode.toInteger() versionName flutterVersionName } buildTypes { release { // TODO: Add your own signing config for the release build. // Signing with the debug keys for now, so `flutter run --release` works. signingConfig signingConfigs.debug } } وأيضاً في ملف app/build.gradle: buildscript { ext.kotlin_version = '1.6.10' //تعديل الإصدار repositories { google() jcenter() } dependencies { classpath 'com.android.tools.build:gradle:4.1.0' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } في حال ظهرت المزيد من المشاكل في المستقبل أرجو منك كتابة المزيد من التفاصيل حول مشروعك وضمن أي إطار مبني Flutter, Kotlin, Android. يمكنك اتباع الإرشادات التالية لطرح الأسئلة: كيف تحصل على إجابة لسؤالك؟

قد تختلف الطريقة من مشروع لآخر حسب توزيع الملفات وطريقة تضمينها في المشروع، ولكن في حال كان المجلّد fonts يحوي خطوط (مثل الملفات باللاحقة tff أو أي لاحقة خطوط أخرى) يمكنك إضافة الخط المطلوب إلى هذ المجلّد fonts ثم يجب عليك استبدال اسم الخط عند الاستدعاء في ملف تنسيقات CSS أي قم باستبدال اسم ملف الخط القديم باسم الملف الجديد أينما وجد في المشروع. أما بالنسبة لحجم الخط فغالباً سيتم حل المشكلة في حال كان الحجم الافتراضي يتبع للخط، وفي حال لم يكن كذلك يجب عليك أيضاً تعديل ملفات التنسيقات مثل bootstrap.trl.css وتغيير خصائص font-size. مع التأكد باختيار القيم المناسبة لمسافة السطر وبقية الخصائص التابعة للخط. في حال واجهت أي مشاكل يجب عليك مشاركة محتوى الملفات أو أجزاء من الشيفرات البرمجية حتى نتمكن من مساعدتك بشكل أفضل.

لست متأكد من المقصود بتطبيق مصغّر ولكن برمجة وتصميم أي تطبيق سيكون بشكل مشابه للتطبيق الأساسي، فعدد المستخدمين ليس مهماً أثناء مرحلة التصميم بما أنه سيحوي على كافة خصائص التطبيق الأصلي. يتم النظر لعدد المستخدمين لاحقاً عند نشر المشروع للتعامل مع توزيع الحمل وتوزيع قاعدة البيانات والأمور المتعلقة بها وليس عند تصميم الواجهات أو المرحلة الأولية للتطوير. يمكنك البحث عن بعض المشاريع مفتوحة المصدر والتي قام بعض المطورين ببنائها والتي تكون مشابهة للتطبيق الأصلي بدرجة كبيرة من خلال البحث على العبارة clone مثلاً facebook clone أو instagram clone وستجد العديد من الشيفرات البرمجية على موقع github بلغات وتقنيات برمجية مختلفة يمكنك أخذ الأجزاء المطلوبة منها.

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

يوجد العديد من الطرق لحساب وتسعير المشاريع والمنتجات البرمجية، وفي النهاية الأمر يعود لك لاختيار الاستراتيجية الأنسب والتي تتوافق مع خبرتك وجودة المنتج النهائي الذي تقدّمه للعميل. غالباً ما تتبع الاستراتيجيات في العمل الحر للوقت والجهد اللازم لتنفيذ مشروع ما، فيمكنك قياس المدّة المطلوبة لتنفيذ مشروع معيّن واحتساب التكلفة الإجمالية حسب عدد ساعات العمل بالاعتماد على سعر ثابت خلال ساعة عمل واحدة. ولكن ذلك لن يتناسب مع جميع العملاء وقد تختلف الأسعار بين دولة وأخرى. لذلك يمكنك أن تقوم باحتساب سعر المنتج أو الخدمة النهائي بناءً على الأسعار الموجودة في السوق، يمكنك الاطلاع على بعض استراتيجيات تسعير المنتجات لأخذ فكرة أوضح من مدونة مستقل للعمل الحر أو الأسئلة السابقة ضمن أكاديمية حسوب: https://blog.mostaql.com/pricing-strategies/ كما ستجد العديد من المقالات والطرق إذا قمت بالبحث على الانترنت ويمكنك اختيار الطريقة المناسبة منها حسب العميل أو المنتج الذي تقوم بتطويره.

ربط أكثر من موقع الكتروني في قاعدة بيانات واحدة في حال كانت هذه المواقع على خادم ويب واحد سيتم بالشكل الطبيعي حيث تقوم بتزويد بيانات الدخول لقاعدة البيانات ضمن كل موقع وتتحكّم بالمستخدمين والصلاحيات حسب الحاجة ضمن مستوى التطبيق نفسه أو مستوى قاعدة البيانات. أما في حال كانت هذه المواقع موزّعة على خوادم ويب متعددة، فيحتاج ذلك المزيد من الإعدادات ضمن قاعدة البيانات لفتح منفذ الاتصال الخارجي remote connection، وبما أنك تستخدم ووردبريس فهذا يعني أن قاعدة البيانات هي MySql وبشكل تلقائي يكون منفذ الاتصال الخارجي محجوب لأغراض الحماية. لذلك يجب عليك تعديل إعدادات MySql والتأكد من أن جدار الحماية في خادم الويب (الاستضافة) لايمنع الوصول إلى قاعدة البيانات باتصال خارجي وفتح المنفذ 3306 الافتراضي لـ mySql وأخيراً إنشاء مستخدم لكل اتصال على قاعدة البيانات حسب الحاجة وبصلاحيات مختلفة كما تم ذكره في التعليقات السابقة.

يمكنك استخدام messagePack والتي تعمل على ضغط كائنات JSON وتقليل حجمها بشكل كبير من خلال ترميز خاص تقوم به على هذه الكائنات، كما أنها تتيح لك واجهة برمجية لتستطيع تضمينها في مشروعك بأي لغة برمجة تستخدمها. وتتمتع هذه المكتبة بحجم صغير جداً قد يصل إلى 2.4 kB فقط. مثال باستخدام الجافاسكريبت: // تعريف كائن يحوي أنماط مختلفة من البيانات var sourceData = { number: 123, number2: -0.129, text: "Abc with Üñıçôðé and ユニコード", flag: true, list: [ 1, 2, 3 ], obj: { a: 1, b: "2", c: false, d: { a: 0, b: -1 } }, time: Date.now() }; // ترميز الكائن السابق أو ضغطه باستخدام المكتبة var bytes = msgpack.serialize(sourceData); // فك الترميز والحصول على الكائن الأصلي var deserializedData = msgpack.deserialize(bytes); يمكنك الاطلاع على كيفية تحميلها واستخدامها تبعاً للغة البرمجة التي تستخدمها من خلال الموقع الرسمي للمكتبة msgpak

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

بما أنه لديك الشيفرة البرمجية لإضافة طريقة الدفع ومن الصورة المرفقة يبدو أنه يمكنك إضافة شيفرات جافاسكريبت ضمن العلامتين: <script> نضع هنا شيفرات الجافاسكريبت </script> أما بالنسبة لإعدادات الدفع وحساب بيبال، فأعتقد أنه يلزمك وصول أكبر للموقع الالكتروني (أو للشيفرة البرمجية كاملةً) للاطلاع على الجزء المسؤول عن خيارات الدفع وإجراء التعديلات المطلوبة وإضافة السعر.

من خلال ماتقدّمه الجافاسكريبت من تقنيات async await أو Promise يمكن تنفيذ ذلك بأمر بسيط: على هئية تابع لاستخدامه بمناطق مختلفة ضمن الشيفرة البرمجية: function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } أو const sleep = ms => new Promise(r => setTimeout(r, ms)); أو بسطر واحد فقط يمكن اختصاره كالتالي: await new Promise(r => setTimeout(r, 2000));

في هذه الحالة أنت تحاول الوصول إلى قيمة useRef قبل أن يتم إظهار محتويات شجرة DOM أو مايعرف بـ DOM Rendering وبالتالي تحصل على القيمة null أو undefined لأنه لا وجود للعنصر div حتى يتم إسناد قيمته إلى containerRef. إن React يقوم بإسناد قيمة .current الخاصة بالكائن ref إلى العقدة أو الوسم الملائم لها ضمن شجرة Dom في HTML وإذا حاولنا طباعة القيمة مباشرةً قبل أن يقوم المتصفح بإظهار عقد HTML سنحصل على هذا الخطأ دوماً. لذلك يمكنك الوصول إلى القيمة من خلال استعمال useEffect كالتالي: useEffect(()=>{ const element = contrainerRef.current; console.log(element); }) أو من خلال الأحداث events: const handleClick = () => { console.log(containerRef.current); }

يكفي الإشارة إلى العنصر: const box = document.getElementById('box'); حيث سيحمل القيمة null في حال كان غير موجوداً في عقد الشجرة DOM. يمكنك أيضاً الاستفادة من التابع contains في جافاسكريبت كالتالي: document.body.contains(box); أما إذا كان العنصر موجوداً لديك وتقصد التحقق من الصف hidden فقط في CSS يمكنك تحقيق ذلك كالتالي: var box = document.getElementById("box"); if (window.getComputedStyle(box).display === "none") { .... } وفي حال كنت تستخدم الخاصية visibility بدلاً من display يمكنك استخدام التالي: window.getComputedStyle(x).visibility === "hidden"

السؤال غير واضح، أين تريد حفظ عمليات البحث؟ في المتصفح؟ أم في قاعدة بيانات على خادم الويب؟ يمكنك إرسال العبارات التي يتم البحث عنها لخادم الويب حتى يتم الاحتفاظ بها ضمن قاعدة البيانات لديك، ولكن عندها يجب عليك استبدال آلية البحث الحالية من خلال الضغط على الأزرار وإضافة زر "بحث" حتى تضمن حفظ عبارات كاملة وإلا سيتم إرسال جميع القيم وحفظها في قاعدة البيانات حتى لو كانت فارغة أو لو كان المستخدم يقوم بإزالة كلمة معيّنة سيتم إرسال كلمة ناقصة. وآلية الحفظ تكون ببساطة من خلال نموذج Form وزر بسيط لإرسال الجمل إلى خادم الويب: <?php $search_value=$_POST["search"];//الحصول على العبارة التي تم البحث عنها //ثم يمكنك حفظها في قاعدة البيانات حسب بنية الجداول لديك ?> <form action="saveSearch.php" method="post"> Search: <input type="text" name="search"/> <input type="submit" value="ابحث"/> </form> وإذا أردت إرسال القيم إلى خادم الويب وتجنّب تحديث الصفحة حاول البحث عن طريقة استخدام ajax وتطبيقها في مشروعك.

يتم استخدام SVG في حال كان عدد العناصر قليل ضمن الصفحة مثل بعض الرسومات والتي لا تتطلب التفاعل معها من قبل المستخدم. لأن SVG هو عقد سيتم وضعها في شجرة DOM وبالتالي ستكون مكلفة من ناحية الأداء وستكون بطيئة في حال وجود تفاصيل كبيرة أو كمية كائنات كبيرة ضمن الصفحة. أما Canvas فيعتبر خيار أفضل في حال كان عدد الكائنات كبير ويحتاج معالجة أكثر لأنه يعطي أداء أفضل وسرعة كبيرة ولا يزيد من الضغط على المتصفح في حال كانت المشاهد تحوي تفاصيل كبيرة يلزم تحريكها.

يمكنك الوصول إلى هذه المعلومات من خلال المتصفح عن طريق استخدام navigator، فإذا حاولت طباعته ستجد المعلومات التالية: console.log(navigator); # platform = Win32 # appCodeName = Mozilla # appName = Netscape # appVersion = 5.0 (Windows; en-US) # language = en-US # mimeTypes = [object MimeTypeArray] # oscpu = Windows NT 5.1 # vendor = Firefox # vendorSub = 1.0.7 # securityPolicy = # userAgent = Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7 .... وبعدها يمكنك تحديد نوع المتصفح ونظام التشغيل من الخاصيات platform، vendor, appCodeName. أما إذا كنت تقصد تحديد نوع الجهاز المستعمل لمستخدم ما ضمن خادم ويب، فيوجد العديد من المكتبات المساعدة حسب ما لغة البرمجة أو إطار العمل الذي تستخدمه سواء كان PHP أو Javascript Node.JS

ما الذي لم يعمل معك بالضبط؟ حاولت تنفيذ الشيفرة على محاكي tailwind الموجود على الموقع الرسمي وألاحظ أنها تعمل بالشكل الصحيح: (لتجريب الشيفرة على الموقع الرسمي للمكتبة https://play.tailwindcss.com/) <nav class="container relative"> <a href="#" class="logo">Logo</a> <ul class="main-nav"> <li><a class="" href="#">Home</a></li> <li class="group"> <a class="" href="#">Other Links</a> <div class="mega_menu z-[-1] opacity-0 group-hover:z-10 group-hover:opacity-100"> <div class="image"> <img class="hidden max-w-[18rem] md:flex" src="{{ asset('storage/Logo.png') }}" alt="" /> </div> <ul class="links"> <li><a href="#">Link-1</a></li> <li><a href="#">Link-2</a></li> <li><a href="#">Link-3</a></li> <li><a href="#">Link-4</a></li> <li><a href="#">Link-5</a></li> </ul> <ul class="links"> <li><a href="#">Link-6</a></li> <li><a href="#">Link-7</a></li> <li><a href="#">Link-8</a></li> <li><a href="#">Link-9</a></li> <li><a href="#">Link-10</a></li> </ul> </div> </li> <li><a class="" href="#">Market</a></li> <li><a class="" href="#">About </a></li> <li><a class="" href="#">News</a></li> <li><a class="" href="#">Contact</a></li> </ul> </nav>

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

يجب عليك إضافة group-hover إلى العناصر الأبناء لتصبح كالتالي: <li class="group"> <div class="hidden group-hover:block"> -->block تكون القائمة مخفية وعند تمرير المؤشر على العنصر الأب يتم تطبيق الخاصية ..... </div> </li> وطبعاً يمكنك استخدام خاصية الشفافية كما في مثالك، ولكن عندها من الممكن أن تسبب بعض المشاكل لأن القائمة ستبقى موجودة ضمن الواجهة ولكن بشكل شفاف: <li class="group"> <div class="opacity-0 group-hover:opacity-100"> ..... </div> </li> تأكد من استعمالك لأحدث نسخة Tailwind CSS 3 ومابعد وإلا ستضطر لإضافة الخصائص التابعة لـ group-hover بشكل يدوي ضمن ملف إعدادات tailwind في مشروعك.

يمكنك استخدام ::placeholder والتي تتيح لك تعديل التنسيقات دون التأثير على تنسيقات حقل الإدخال نفسه: input { border: #000; padding: 10px; font-size: 1.6em; } input::placeholder { color: red; font-size: 0.5em; } أما بالنسبة لاستخدام الجافاسكريبت في تحديث التنسيقات، يمكنك إضافة وحذف الصف عند إطلاق حدث ما مثل الضغط على زر أو حسب مشروعك ويعود تطبيق ذلك لإطار العمل الذي تستخدمه في حال كنت تستخدم واحداً. مثال باستخدام JQuery: .your-class::-webkit-input-placeholder { color: #b2cde0 } $('input').addClass('your-class'); أو دون استخدام إطار عمل: x.classList.add('your-class');

سرعة تحميل الموقع الالكتروني تتعلّق بعوامل كثيرة ومواضيع عديدة يصعب اختصارها، وأيضاً حسب إطار العمل في حال كنت تستخدم واحداً. من أهم الأمور التي يمكنك البدء بها: - حجم الصور: حاول دوماً ضغط الصور واستخدام الصيغ الحديثة مثل .webp التي ينصح بها Google كونه يتمتع بحجم صغير مع المحافظة على دقة الصورة، كما يمكنك البحث أكثر عن تقنيات إظهار أحجام صور مخصصة لحجوم الشاشات المختلفة. - حجم الملفات css و جافاسكريبت: في حال كنت تستخدم إطار عمل معيّن في واجهة المستخدم مثل React , Vue, وغيرها سينتج عنها العديد من شيفرات الجافاسكريبت اللازمة لعمل المكتبة نفسها، مما يزيد من حجم ملفات الجافاسكريبت في موقعك، ولكن معظم أطر العمل هذه لديها تقنيات بناء build بحيث تقوم بضغط هذه الملفات لتقليل حجمها قدر المستطاع، لذلك يجب عليك التأكد من اتباع الخطوات المذكورة في التوثيق الرسمي لإطار العمل في حال كنت تستخدم واحداً. - بالنسبة للمكتبات والإضافات: حاول دوماً اختيار المكتبات الأقل حجماً والتي لها أقل عدد من الاعتماديات dependencies (أي لا تعتمد على مكتبات أخرى لعملها) وفي حال استطعت تطوير نفس الخاصية التي تقدمها المكتبة بنفسك، حاول دوماً الاستغناء عنها. - تحميل البيانات: قد يكون سبب آخر في زيادة مدة التحميل، في حال كنت تتعامل مع خادم ويب فعلي وقاعدة بيانات أو حتى مواقع أخرى أو فيديوهات، يمكنك مراقبة المدة الي يستغرقها موقعك لتحميل البيانات أو الصور ومحاولة تحسين هذه العمليات وتسريعها في خادم الويب. - استخدام الذاكرة المؤقتة Cache: سيكون عاملاً هاماً في سرعة تحميل الموقع، حاول البحث عن طرق استخدامات cache بدلاً من إعادة تحميل نفس النسخة من الموقع في كل مرة يقوم المستخدم بزيارة موقعك. - استخدام شبكات توصيل المحتوى CDN: والتي ستساعدك أيضاً على تقليل مدة تحميل الموقع من خلال نشر نسخ محلية عبر شبكة الانترنت لتسريع تصفح الموقع حسب النقطة الجغرافية للزائرين. (مثال cloudflare). وأخيراً، يمكنك الاستفادة من بعض الأدوات المتاحة مجاناً (ومنها pagespeed المقدّمة من Google) لفحص موقعك وسيخبرك بأي تفاصيل أخرى وأي مشاكل موجودة وطرق تحسينها أيضاً

لا يمكننا كتابة الحل كاملاً دون الاطلاع على مشروعك وكامل تفاصيله وماتحاول تحقيقه فعلياً. هل قرأت الأمثلة والتوثيق الموجود ضمن المكتبات؟ حاول قراءة الأمثلة وتطبيقها لتعلّم استخدام المكتبات في مشروعك، على سبيل المثال يتم في مكتبة jspdf استخدام التابع text لتغيير النصوص ضمن الصفحة: doc.text("Hello world!", 1, 1); حيث يمكنك استبدال الجملة بمتغيّر يقوم المستخدم بإدخاله، كما يمكنك إضافة صور، نصوص، تغيير مواقع العناصر،.. إلخ.

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