Hassan Hedr

يمكن لأي تطبيق من أي منصة كانت سواء تطبيق جوال أو تطبيق ويب أو حتى برنامج سطح مكتب التواصل مع أي واجهة برمجية للتطبيقات API ولا يوجد حد لذلك، وذلك لأن التواصل مع الواجهة API يتم عبر بروتوكول HTTP، أي يكفي لتلك التطبيقات )ما ندعوها عميل أو client( أن تتمكن من إرسال طلبات HTTP، 
يمكنك الاستفادة من الاطلاع على المقالات التالية للتعرف على ماهية API:
 

يجب تعديل نوع زر إرسال النموذج ليكون submit بدلًا من button وذلك حتى يُطلق الحدث submit كالتالي:
<input type="submit" value="Sign In" class="register-btn" />  

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

لمنع حدوث أي مشاكل في التزامن بين رسم العناصر وإضافتها ضمن الصفحة، وبين ربط عمليات الحذف لكل عنصر من القائمة يمكنك تنفيذ العمليتين معًا ضمن تابع واحد فقط لإجبار الربط الصحيح بعد كل عملية رسم للعناصر، أيضًا حاول تعريف أي متغيرات تحتاجها داخل تلك التوابع ضمنها وليس خارجها أيضًا لمنع حدوث أي مشاكل في التزامن بين قيمتها والعمليات عليها، يمكنك حل المشكلة بكتابة الشيفرة السابقة ضمن تابع واحد فقط واستدعاءه كالتالي:
function init() { let products = JSON.parse(localStorage.getItem("productsInCart")) || []; let productsInCartUI = document.querySelector(".cart-products"); productsInCartUI.innerHTML = products.map((product) => { return ` <div class="product-container"> <div class="product-img"> </div> <div class="product-info"> <h2 class="product-title">${product.title}</h2> <h3 class="product-description">${product.des}</h3> <h2 class="product-price">${product.price} DT</h2> </div> <div class="product-btns"> <button class="remove-to-cart" data-click="${product.id}">Remove Product</button> </div> </div> `; }); document.querySelectorAll(".remove-to-cart").forEach((item) => { let id = item.getAttribute("data-click"); let productsInCart = localStorage.getItem("productsInCart"); if (productsInCart) { item.addEventListener("click", () => { let productsInCart = localStorage.getItem("productsInCart"); let items = JSON.parse(productsInCart); let filtered = items.filter((data) => data.id != id); localStorage.setItem("productsInCart", JSON.stringify(filtered)); init(); }); } }); } init();  

ضمن ملف الإعدادات webpack.config.js اسم خاصية تعريف الإضافات هي plugins، الخطأ لديك هو كتابتها Plugin، أسماء الخواص يجب أن تُكتب كما هي مع مراعاة حالة الأحرف أيضًا، لكل المشكلة يجب تعديل اسم الخاصية لتصبح كالتالي:
plugins: { ^^^^^^^ .. }   

شيفرة جافاسكربت للحل المذكور كاملة:
let task_title = document.getElementById("txt"); let submit_btn = document.getElementById("submit_todo"); let availabel = document.querySelector(".availabel"); submit_btn.onclick = function (e) { e.preventDefault(); if (task_title.value != "") { let ul = document.getElementById("ul"); let li = document.createElement("li"); li.classList.add("singil_task"); let p = document.createElement("p"); p.textContent = task_title.value; let div_icons = document.createElement("div"); div_icons.classList.add("icons"); div_icons.innerHTML = ` <i class="fa-circle-check fa-sharp fa-solid "></i> <i class="fa-circle-xmark fa-solid" style="padding-left: 15px;"></i> `; li.appendChild(p); li.appendChild(div_icons); ul.appendChild(li); task_title.value = ""; let cheak = li.querySelector(".fa-circle-check"); cheak.addEventListener("click", function () { li.classList.add("done"); }); let deleteBtn = li.querySelector(".fa-circle-xmark"); deleteBtn.addEventListener("click", function () { li.remove(); }); } else { let h5 = document.createElement("h5"); h5.textContent = "please enter a task"; h5.style.color = "red"; h5.style.display = "block"; h5.style.padding = "10px"; availabel.appendChild(h5); setTimeout((_) => { h5.remove(); }, 1000); } };  

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

يمكن إنشاء كائنين من نوع Date لكل من التاريخين لديك، ثم حساب فرق التوقيت بينهما رياضيًا، والذي يكون بوحدة الميلي ثانية بتقسيم هذا الفرق على عدد الميلي ثانية في اليوم الواحد لتكون الشيفرة كالتالي: 
const date1 = "1/1/2022"; const date2 = "1/1/2023"; const numberOfDays = (new Date(date2) - new Date(date1)) / 86_400_000; // ^^^^^^^^^^ // ميلي ثانية في اليوم إذا كانت القيم معلومة تأكد من طرح التاريخ الأكبر من التاريخ الأصغر للحصول على نتيجة موجبة، أو يمكنك حساب القيمة المطلقة للنتيجة في حال لم تكن المدخلات معلومة دومًا ليكون الحساب كالتالي:
const numberOfDays = Math.abs(new Date(date2) - new Date(date1)) / 86_400_000; يمكنك التعرف على الكائن Date في جافاسكربت أكثر من المقال التالي:
 

ملفات المشروع النهائية الناتجة عن عملية البناء موجودة ضمن المجلد build الذي تم إنشاءه، محتويات هذا الملف هي ما يمكنك رفعها على استضافة لكي تعمل، ولا يمكنك تشغيلها محليًا مباشرةً، لاختبار ذلك دون استضافة محليًا يجب الوصول لتلك الملفات عن طريق خادم محلي، لذلك يمكنك الاستفادة من مكتبة serve بتثبيتها أولًا كالتالي:
npm install -g serve  ثم تنفيذ الأمر التالي ضمن المجلد الجذر للمشروع لديك لتخديم الملفات عن طريق خادم محلي:
serve -s build سيظهر ضمن نتيجة التنفيذ رابط للوصول إلى تلك الملفات عن طريق هذا الخادم يمكنك الوصول إليه من المتصفح لمعاينة المشروع من ملفات البناء النهائية

يوجد تابع عام مخصص لذلك بالاسم isNaN يعيد قيمة منطقية تدل فيما إذا كانت القيمة المُمررة NaN أم لا كالتالي:
isNaN(+"hi") // true أو يمكنك استخدام تابع مشابه له متوفر ضمن الصنف Number بنفس الاسم كالتالي:
Number.isNaN(+"hi") // true  

المصفوفات ليست من أنواع البيانات Data Types الأساسية في جافاسكربت، بل تعتبر من نوع كائن Object كغيرها من الأصناف، لذا للتحقق من أن قيمة ما هي من نوع مصفوفة يمكن استخدام الكلمة المحجوزة instanceof والتحقق ما إذا كانت القيمة نسخة من نوع Array كالتالي:
[] instanceof Array // true 5 instanceof Array // false {} instanceof Array // false "Emad" instanceof Array // false أو لجعل الشيفرة أكثر وضوحًا يمكن الاستعانة بالتابع الثابت static ضمن الصنف Array نفسه بالاسم isArray، حيث يعيد قيمة منطقية تدل فيما إذا كانت القيمة الممررة له هي مصفوفة كالتالي:
Array.isArray([]) // true Array.isArray(5) // false Array.isArray({}) // false Array.isArray("Emad") // false  

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

في حال كانت عملية التبديل متعلقة بقيمة العنصر، فيجب المرور على كل عناصر المصفوفة لفحصها وتبديل القيم المطلوبة بالقيم الجديدة، بدلًا من المرور على العناصر باستخدام الحلقات مثل for و foreach يمكن االاستفادة من التابع map الذي توفره المصفوفات، حيث تمرر له تابعًا سيستدعى لكل عنصر من عناصر المصفوفة وستحسب داخلة القيمة الجديدة لذلك العنصر، مثلًا في حال أردت تبديل القيم 102 بالقيمة 555 تكون الشيفرة كالتالي:
myArr.map(function (item){ if(item === 102) return 555; // تبديل بقيمة مختلفة return item; // إرجاع القيمة نفسها })  

قد يُضاف مستقبلًا دورة لتعليم تطوير الألعاب، الدورات التي توفرها الأكاديمية تعتمد على الطلب في السوق، لتؤهل من يرغب بالعمل كمبرمج من دخول سوق العمل مباشرة واكتسابه مهارات متقدمة في أحدث التقنيات المستخدمة في مجاله، توفر الأكاديمية حاليًا المقالات التالية عن صناعة الألعاب ضمن المتصفح، وسلسلة مقالات عن تطوير الألعاب باستخدام محرك Unity:
 

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

يمكنك بناء نص استعلام تحديث البيانات ديناميكيًا، حيث تتحقق من كل حقل إذا طابق الشروط التي تريدها تضيف له تعليمة تحديث، ويمكنك تمرير الحقول المقبولة ضمن مصفوفة كمعامل أول للتابع execute حتى يتم إدراجها ضمن نص الاستعلام كالتالي: 
<?php $id =$_POST['id']; $name =$_POST['name']; $ExtraData = $_POST['ExtraData']; $IDColors = $_POST['IDColors']; $validated = []; if($name !== null) $validated['name'] = $name; if($ExtraData !== null) $validated['ExtraData'] = $ExtraData; if($IDColors !== null) $validated['IDColors'] = $IDColors; $fields = implode(',', array_map(fn($field) => $field.'=?', array_keys($validated))); $sql = "UPDATE TableUser SET {$fields} WHERE id=?"; $stmt = $con->prepare($sql); $values = array_values($validated); $values[] = $id $stmt->execute($values);  

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

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

يقبل التابع primary تمرير اسم مخصص لفهرسة المفتاح المركب الذي تحاول إضافته بدلًا من الاسم المركب الطويل الذي يضيفه laravel افترضيًا، ليصبح تعريف المفتاح كالتالي:
$table->primary(['first_column', 'second_column', 'third_column'], 'composite_key'); ^^^^^^^^^^^^^^^  

يمكن الاستفادة من extends@ لإنشاء قوالب الصفحات بلغة blade، حيث ننشئ ملف عرض قالب يحوي بداخله عدة أقسام بأسماء معينة باستخدام yield@، ولاحقًا يمكن استخدام ملف القالب هذا لإنشاء عدة ملفات عرض، حيث يسمح ذلك بتقليل التكرار لهيكلية بيانات الصفحات المتشابهة وتوحيدها، فمثلًا يمكن إنشاء ملف قالب أساسي لجميع الصفحات view/layouts/main.blade.php كالتالي:
<html> <head> <title>@yield('header')</title> </head> <body> @yield('content') </body> </html> ويمكن استخدامه ضمن أي صفحة كالتالي:
@extends('layouts.main') @section('title') صفحة فرعية @endsection @section('content') <h1>أهلًا بكم</h1> @endsection وسينتج عن تفسير الصفحة السابقة محتوى HTML التالي:
<html> <head> <title>الصفحة الرئيسية</title> </head> <body> <h1>أهلًا بكم</h1> </body> </html> أما include@ فهي تشبه في عملة include في PHP، حيث تقتصر مهمتها على جلب محتوى ملف العرض المذكور وطباعته مكانها، يفيد ذلك في إنشاء مكونات وإعادة استخدامها في أكثر من مكان دون الحاجة لتكرار كتابة هيكليتها في كل مرة، مثلًا إذا كان لدينا المكون views/components/nav.blade.php كالتالي:
<nav>...</nav> وفي أي مكان ضمن أي ملف عرض آخر استخدمنا المكون السابق باستخدام include@ كالتالي:
@include('components.nav') <div>..</div> فبعد تفسير الصفحة السابقة سينتج ما يلي:
<nav>..</nav> <div>..</div>  

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

يمكنك بطرف الخادم مباشرة تجميع وتنسيق البيانات بالشكل الذي تحتاجه الواجهة لديك، ابدأ بالاستعلام عن البيانات من الجدول كما تفعل حاليًا:
$getDATA = $conn->query("SELECT langName, langVar, translation FROM lang "); وخزن القيم من ذلك الاستعلام ضمن مصفوفة مفاتيحها هي قيمة langVar وقيمها هي مصفوفة الترجمات المتوفرة للمصطلح كالتالي:
$byLangVar = []; foreach($getDATA as $data) { $byLangVar[$data['langVar']][] = $data; } ستحصل على بنية بيانات مشابهة لما يلي:
[ 'ad_cmrcaldsc' => [ ['langVar' => 'ad_cmrcaldsc', 'langName' => 'EN', 'translation' => '..'], ['langVar' => 'ad_cmrcaldsc', 'langName' => 'AR', 'translation' => '..'] ], .. ] يمكنك الآن المرور على هذه المصفوفة بدلًا من بيانات الاستعلام السابقة، ولكل مفتاح تطبع سطرًا واحدًا يعبر عن الترجمات المتعددة لهذا المتغير كالتالي:
foreach($byLangVar as $langVar => $translations): ?> <tr> <td><?php echo $langVar ?></td> <?php foreach($translations as $translation): ?> <td><?php echo $translation['translation'] ?></td> <td><?php echo $translation['translation'] ?></td> <?php endforeach ?> </tr> <?php endforeach ?>  

يمكن استخدام الواجهة Schema والتابع getColumnListing منها لجلب أسماء كل الأعمدة من جدول ما، ولجلب أعمدة الجدول tasks لديك يمكن استخدامه كالتالي:
Schema::getColumnListing('tasks');  

تأكد أن محرك تخزين بيانات الجلسة ليس array، حيث هذا المحرك يستخدم ضمن الاختبارات فقط، يمكنك إعداد ذلك ضمن ملف متغيرات البيئة env. كالتالي:
SESSION_DRIVER=cookie المحرك cookie سيُخزن ملفات الجلسة ضمن Cookie بطرف المستخدم

المشكلة في حالة عدم وجود استعلام ضمن search_query أن السطر ضمن else يجلب كل البيانات ورسالة الخطأ تخبرك بعدم وجود الدالة orderBy ضمن مجموعة المنتجات التي تم جلبها، يمكنك حل المشكلة بإنشاء استعلام query بداية ثم تطبيق الشروط عليه فقط في حال كان هناك داعٍ لذلك، وبعدها وفقط في آخر سطر تنفذ الاستعلام باستخدام get لتكون الشيفرة كما يلي:
$query = Product::query(); if ($search_query) { $query->where('name', 'LIKE', "%$search_query%"); } $products = $query->orderBy('created_at', 'desc')->with('tags')->get();