Adnane Kadri

ما هي المشكلة التي تحدث تحديدا؟ تفحصت عارض الشرائح الخاص بك ولا يبدوا به اي مشكلة.

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

يمكنك البحث عن نسخ مختلفة لـ vs code في متاجر التطبيقات مثل uptodown، يوجد مثلا Older versions of Visual Studio Code (Windows) | Uptodown. أو ايضا في تحديثات VS code حسب التوثيق الرسمي للبرنامج في تحديثات VS code، اختر تلك المناسبة لنظام التشغيل الخاص بك وقم بتحميلها وتثبيتها على جهازك.

يمكنك مراسلة مركز مساعدة أكاديمية حسوب بشأن المشكلة، وسيتم توجيهك نحو حلها.

ما رسالة الخطأ التي تظهر تحديدا؟ ان كان يتم اخبارك ان imagecreatetruecolor غير معرف، حاول الغاء تعليق السطر ;extension=gd بملف إعداد php الملف php.ini بملفات xampp/php.

الكائنات في علوم الحاسب بمجملها هي كيانات لها خواص معينة تعرف ضمن ازواج تسمى مفتاح وقيمة key-value. يمكن ان تكون قيمة الخاصية بيانات (عددا، سلسلة نصية .. الخ) او دالة (تسمى هاته الخاصية في هاته الحالة وظيفة او تابعا method). والكائنات هي الاخرى نمذجة لكيانات موجودة في الحقيقة. لنتخيل اي شيء يمتلك خواصا يسمى كائنا. فالسيارة كائن لها خواص: اللون نوع المحرك سعة المحرك اسم العلامة التجارية عدد الركاب ولها وظائف مثل: السير الكبح في جافاسكربت نعرفها وفق: const car = { brand: 'BMW', color: 'black', // ... , accelerate(/* ... */) { // ... }, }; يمكنك الاستزادة اكثر بقراءة ان كنت مشتركا باحدى دورات الاكاديمية فيمكنك مراجعة: دورة تطوير التطبيقات باستخدام JavaScript > أساسيات لغة JavaScript > الكائنات Objects

webpack ومثله من هاته الادوات تسمى مجمعات ملفات او كتعبير افضل افضل مجمعات وحدات module bundler. فهي تقوم بتجميع عدد من ملفات الجافاسكربت، الـ HTML والcss لتجعلها في ملف واحد، وبهذه الطريقة ستتيح الكثير من الميزات الأخرى مثل: امكانية تقسيم الشيفرات وتجزئتها في بيئة عمل متكاملة. استخدام المحملات لتحميل وتفسير انواع معينة من الملفات مثل sass. فصل بيئة التطوير عن بيئة الانتاج بشكل تام. امكانية ضغط الملفات وتشويشها في بيئة الانتاج بشكل يجعلها اسرع في القراءة والتنفيذ من ناحية المتصفح واصعب من ناحية القراءة والتعديل عليها من قبل مطورين آخرين.

تمعن جيدا في رسالة الخطأ وحاول فهم مضمونها. فالرسالة تحاول هنا اخبارك ان المتغير index الذي تحاول الوصول اليه غير معرف اساسا. وتشير رسالة الخطأ الى الموضع 13 من السطر 9 الموافق لـ: while (index < msgs.length) { ^^^^^^^ } يفترض ان يشير index الى فهرس معين صحيح؟ اظن ما تشير اليه في السطر 8 هو تصريح هذا المتغير. تأكد من اصلاح التصريح: let index = 0;

يجب ان تقوم اولا ببناء الملفات الثابتة واخراج مجلد المشروع عن طريق تنفيذ امر البناء npm run build. يفترض ان يقوم هذا بإنشاء مجلد app او public او dist او ايا كان اسم مجلد ملفات المشروع بحسب ما تصفه في ملف اعداد webpack. بعد هذا قم اما برفع المجلد الناتج، او مجلد ملفات المشروع متضمنا لهذا المجلد. توجه بعد ذلك الى اعدادات المستودع من تبويبة settings. ثم من القائمة الجانبية اختر pages من قسم Build and deployment قم باعداد الصفحة واحفظ التغييرات. سيتم انشاء الصفحة بشكل مباشر، على انها ستظهر بعد دقائق.

في خوادم Apache الانتاجية قد تحتاج توصيف ملف htaccess. للتوجيه الى ملف index.php مباشرة. محتوى الملف سيكون مشابها للخاص بمحتوى الملف في لارافيل كـ: <IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews -Indexes </IfModule> RewriteEngine On # Handle Authorization Header RewriteCond %{HTTP:Authorization} . RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] # Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [L,R=301] # Send Requests To Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>

ما تصفه يسمى المسافة البادئة التلقائية أو Auto indent، ولتفعيل هاته الميزة في VS code نحتاج التوجه الى: الاعدادات Settings نتوجه الى خيار Auto indent من قسم Text editor نتأكد من تفعيل الخيار full نعيد تشغيل VS code

مبدئيا، لا أظن أنه يوجد حل للموضوع بشكل نهائي تماما. فقد يستعمل المستخدمون خادما وكيلا proxy للقيام بالطلبات من داخل دولة غير محظورة. ستبقى الطريقة الأكثر فعالية هي تحليل عنوان IP المستخدم للحصول على اسم البلد وحظرها. قد يساعدك استعمال Torann/laravel-geoip أو اي حزمة أو خدمة مشابهة.

من غير المنطقي ان لا تكون هنالك مشكلة ما، هلا أعدت مراجعة طريقة رفعك للمشروع على الاستضافة: سنستعين بـ github في هذا. أضف موقعا جديدا عبر الدخول الى لوحة التحكم الخاصة بك على netlify والضغط على new site from git من قسم continuions deployment اضغط على Github قم بإعطاء الاذن لـ netlify بالوصول الى github قم بتحديد المستودع الخاص بك بما في ذلك الأمر الذي تقوم به بتشغيل خادم webpack ومجلد dist في قسم public directory أكد الرفع deploy site ان كنت قد واجهة مشكلة باحدى هاته الخطوات يرجى الاشارة.

لا أظن ان المشكلة في vite فهو لا يهتم الا بتحزيم ملفات الأصول واخراجها. المشكلة في الغالب بسبب استعمال بروتوكول Https لطلب هاته الملفات. يفترض ان لا تجد اي مشكلة بخصوص طلب هاته الملفات او الصفحة ككل باستخدام http. فبدل التصفح الى: https://website.com/ قم بالتصفح الى: http://website.com/ او قم بجبر الطلب باستخدام https، بملف AppServiceProvider.php قم باضافة السطر: if ($this->app->environment('production')) { URL::forceScheme('https'); } الى التابع boot من هذا الملف. طبعا لا تنسى تضمين الواجهة URL: use \Illuminate\Support\Facades\URL;

ستحتاج بادئ الأمر محرر أكواد من مثل sublime text أو Notepad++ لتحرير الأكواد والشيفرات بلغة PHP. ثم ستحتاج لتشغيلها خادما محليا يحوي مفسرا لهذه اللغة من مثل xampp أو wampp. وقد تحتاج كشيء جانبي متصفحا من مثل google chrome أو mozilla firefox لإستعراض خرج هاته التعليمات البرمجية. استعن بالمحتوى المجاني المنشور على أكاديمية حسوب بخصوص التطوير بلغة PHP او اطلع على تفاصيل دورة تطوير تطبيقات الويب باستخدام PHP.

يمكنك استعمال حيلة بسيطة أخرى لمقاربة ذات النتيجة، نستعن في هذا بعناصر label. لنصف الهيكلة التالية: <label> <span id="enabled" class="enabled-checkbox">&#10004;</span> <input id="checkbox" type="checkbox" /> <span id="disabled" class="disabled-checkbox">&#10006;</span> </label> نصف هنا عنصري span واحد يعبر عن حالة تفعيل الصندوق وواحد عن حالة تعطيله. يمكنك تنسيقهما وفقما ما تريد: label input{ display: none; } label .enabled-checkbox ,label .disabled-checkbox { height: 50px; width: 50px; padding:5px; border: 1px solid red; } ايضا انتبه الى ان انه تم اخفاء عنصر input. لأن الضغط على عنصر label سيكون تبديلا لحالة العنصر. ثم اخيرا عن طريق الجافاسكربت: الاستماع الى حدث تغيير حالة الصندوق. ففي حالة تفعيله. نقوم بإخفاء العنصر المتعلق بتمثيل حالة التعطيل واظهار الخاص بحالة التفعيل. وفي حالة تعطيله نقوم بإخفاء العنصر المتعلق بتمثيل حالة التفعيل. واظهار الخاص بحالة التعطيل. let input = document.querySelector('#checkbox'); input.addEventListener('change', (event) => { if (event.currentTarget.checked) { enabled.style.display = "inherit" disabled.style.display = "none" } else { disabled.style.display = "inherit" enabled.style.display = "none" } }) ايضا انتبه الى انه يجب اخفاء احد عنصري span بشكل افتراضي يوافق الحالة الافتراضية لعنصر الصندوق: label .disabled-checkbox{ display: none; }

بجانب المشار إليه من قبل المدرب عمر، من بين المشاريع التي تم استعمال NodeJS فيها كمحرك واجهة خلفية يوجد ايضا: تطوير تطبيق جوال (تطبيق طبيبي) باستخدام React Native. إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js (هنا بالضبط تم استعمال خادم Next وهو في الأصل قائم على NodeJS). تطوير تطبيق جوال للتواصل الاجتماعي باستخدام Ionic. أما بالنسبة لأرشيف المسارات الأقدم فيوجد: تطبيق مشاركة وصفات الطعام. تطوير تطبيق لمطعم باستخدام Ionic 4. تطبيق جوال لطلاب المدارس. تطوير تطبيق قائمة مهام.

يتم في هذا في الغالب توظيف مفهوم مراقبات التقاطع Intersection observers بشكل أو بآخر. يستعمل البعض على سبيل المثال اطر عمل ومكتبات من مثل WOW.js او Animate.css أو Modernizr أو AOS (Animate on scroll) وغيرها من هاته الأطر والمكتبات. أجد استعمال الأخير اسهل وابسط، يتم التثبيت اما عن طريق تضمين الملفات المصدرية: <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> .. <script src="https://unpkg.com/aos@next/dist/aos.js"></script> أو عن طريق مدير الحزم npm: npm install --save aos@next ثم تهيئة المكتبة: AOS.init(); ثم لن يكون عليك إلا وصف الخواص التي تتحكم في هاته الحركيات وارفاقها بالقيم المناسبة. اعرف أكثر عن التحريك في css > إظهار المحتوى أثناء التمرير

لا يفترض ان يكون هنالك علاقة بين مكون collapsible و طلب Ajax في jQuery. يحتمل ان هنالك مشكلة اخرى. هل يمكنك ارفاق الشيفرة كاملة؟

يمكنك الاعتماد على مواقع التوظيف والعمل الحر لأخذ تصور او فكرة عن اهم المكتبات واكثرها طلبا في سوق العمل. هي ذاتها الأشهر في مجتمعات المطورين ايضا. مثلما يمكنك استخدام محركات البحث بفعالية للبحث عن ذات الأمر يمكنك ايضا البحث عن دراسات استقصائية بهذا الخصوص. نجد مثلا دراسة مهمة مثل stackoverflow developer survey 2021 يوجد بملخص الدراسة عدة أقسام كاملة تخص اطر الويب ومكتباته. فحسب الدراسة هنالك: 40 بالمئة من اصل 70 ألف مطور يستعملون React و 35 بالمئة يستعملون jQuery. يعطي هذا فكرة عن مدى شعبية هذين الأخيرين. ايضا تحتاج الاندماج في المجتمعات التقنية لأخذ فكرة عن الأشهر والأكثر طلبا واستعمالا.

دورة تطوير التطبيقات باستخدام JavaScript > أساسيات لغة JavaScript > التخاطب مع الخادم

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

يوجد في الجزء الخاص بـ NodeJS في دورة تطوير التطبيقات باستخدام JavaScript مسار كامل يشرح هذا المفهوم بإسهاب بعنوان " بناء واجهة برمجية API لتقييم الأفلام " بداية من تصميم النماذج وقواعد البيانات إلى غيرها مرورا ببعض الجزئيات الأخرى. من مثل كيفيات التسجيل والمصادقة وقراءة الموارد، حذفها والتعديل عليها وادارتها. لأن هذا المفهوم يتعلق بشكل أكبر بـ NodeJS وجهة الخادم أكثر من جهة العميل. ولذلك سيتطلب التعرف على أسس NodeJS بجانب التعامل مع قواعد البيانات بواسطته مرورا بآليات التعامل مع خوادم الويب وإطار العمل Express.js حتى يمكن التعامل مع كامل تشعبات هذا المفهوم في NodeJS. اعرف اكثر عن:

يظهر الخطأ لأنك تحاول استدعاء تابع يخص المصفوفات على سلسلة نصية. myString.split(""); myString.filter فالتابع split لا يقوم بتجاوز تعريف المتغير بل يعيد مصفوفة جديدة تماما. في هاته الحالة تبقى myString سلسلة نصية في حال لم يتم تجاوزها عن طريق: let myString = "EElllzzzzzzzeroo"; myString = myString.split(""); او مباشرة: .split("") .filter((el,i) => { return myString.indexOf(el) === i }) ثم لخدمة الغرض الذي لديك يكفي : let myString = "EElllzzzzzzzeroo"; myString = myString .split("") .filter((el,i) => { return myString.indexOf(el) === i }) يفترض ان يحل المشكل لديك. ستعاد مصفوفة من حروف فريدة في المصفوفة. ["E", "l", "z", "e", "r", "o"] String.prototype.split()‎ Array.prototype.filter()‎ String.prototype.indexOf()‎

يحتمل ان هنالك مشكلة بطباعة الـ Unicodes الخاصة باللغة العربية. هل جربت تحويلها الى ترميز utf8 قبل طباعتها؟ $stringToPrint = "محمود رضا\n"; $printer -> text(utf8_encode($stringToPrint)); $printer -> cut(); قد يحل هذا المشكل لديك.