ما هو ال API

وعليكم السلام ورحمة الله وبركاته .

أولا إليكي شرح لما هو ال API وما الذي يحدث في الخفاء :

بعد ذلك الأفضل إستخدام إطار عمل مثل laravel وغيره لتحسين العمل على ال API وجعله أكثر إحترافية .

وسيتوجب بعد ذلك في النهاية ربط القالب من خلال جافاسكريبت وإرسال الطلبات إلى ال API وإستقبال البيانات وعرضها في الموقع.

وعليكم السلام ورحمة الله وبركاته.

حتى تصبح الفكرة واضحة سأحاول شرح الخطوات عندما يفتح المستخدم صفحة الكورسات في متصفحه، يقوم كود JavaScript الموجود في قالبك الجاهز بإرسال طلب (HTTP Request) عبر الإنترنت إلى رابط الـ API الخاص بك ثم يستقبل الخادم (Server) هذا الطلب.

فيتواصل كود الخادم مع قاعدة البيانات ويطلب منها: "أعطني جميع الكورسات والمواد التابعة لها" ثم تقوم قاعدة البيانات بجلب البيانات، ويرسل الخادم ملف الـ JSON كاستجابة للواجهة الأمامية.

وأخيراً يستلم كود الـ JavaScript في القالب هذا الملف، يقرأ البيانات، ويقوم بتوليد عناصر HTML (مثل البطاقات أو القوائم) ليعرض الكورسات بشكل ديناميكي داخل التصميم.

ويمكنك الإطلاع على الروابط في التعليق السابق للتفاصيل

أي موقع يتكون من ثلاث طبقات، الأولى الواجهة الأمامية Frontend وهي القالب (HTML + CSS + JavaScript)  لعرض البيانات بشكل جميل وتفاعلي، والثانية هي الواجهة الخلفية Backend والتي بها الـ API بحيث تنشئين خادم يعمل على السيرفر بلغة Node.js, PHP, Python وخلافه من أجل استقبال الطلبات، معالجة المنطق، التحدث مع قاعدة البيانات.

ثم قاعدة البيانات والتي تقع بالواجهة الخلفية أيضًا وهي مخزن منظم للبيانات ومنها أنواع مختلفة MySQL, PostgreSQL, MongoDB لحفظ واسترجاع الكورسات والمواد.

القالب الجاهز الذي تملكينه هو جزء الواجهة الأمامية، وهو في الغالب ثابت، أي أن النصوص الموجودة فيه مكتوبة داخل كود HTML مثلاً اسم الكورس ١ داخل كود HTML، ولجعله ديناميكياً يعرض بيانات حقيقية من قاعدة البيانات، سنضيف طبقة الـ API التي تتوسط بين القالب وقاعدة البيانات.

بدلاً من كتابة أسماء الكورسات والمواد داخل كود HTML، سنقوم بما يلي في القالب:

• نترك قوالب فارغة containers في HTML.
• نستخدم JavaScript لطلب البيانات من عنوان معين API endpoint.
• عند وصول البيانات، تقوم JavaScript بإنشاء عناصر HTML بشكل تلقائي ووضعها في المكان المناسب.

<div class="course-card">
  <h2>اسم الكورس</h2>
  <p>المادة ١، المادة ٢ ...</p>
</div>

سنحذف المحتوى الثابت ونكتب كود JavaScript يملؤه بالبيانات الحقيقية القادمة من الـ API، وسنبني API بسيط بلغة Node.js مع إطار Express.

أنتي بحاجة إلى تعلم الواجهة الخلفية لتستوعبي الأمر، سواء من خلال node.js أو PHP

وعليكم السلام ورحمة الله تعالى وبركاته،

المواقع كما هو متعارف تتكون من ثلاث طبقات رئيسية أولها الواجهة الأمامية أو الفرونتاند والواجهة الخلفية أي الباكند أو ال (API)، وقاعدة البيانات.

القالب الجاهز الذي تملكه هو واجهة أمامية ثابتة، ولجعله ديناميكيا ستحتاج إلى بناء API على الخادم باستخدام لغة مثل PHP مع Laravel أو Node.js مع Express بحيث يتصل بقاعدة بيانات ك. MySQL أو MongoDB.

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