صفحة تستدعي API

جزء من قسم واجهات API بصيغة JSON في رحلة Django على Coddy. الدرس 12 من 19.

لواجهة API مستدعٍ داخل الموقع: JavaScript على الصفحة الرئيسية. تُحمَّل الصفحة مرة واحدة، ثم يطلب البرنامج النصي بيانات من واجهة API ويملأ الصفحة دون إعادة تحميلها. البرنامج النصي، tasks/static/tasks/app.js، مُعطى؛ ومهمتك هي إنشاء الصفحة التي يحتاج إليها.

يرسل fetch("/api/tasks/") طلب GET من متصفح الزائر، ويقرأ response.json() الإجابة. يعثر document.getElementById("task-list") على العنصر الذي تكون قيمة id فيه هي task-list، لذا يجب أن تحتوي الصفحة على عنصر كهذا. يعمل البرنامج النصي بمجرد أن يقرأ المتصفح وسمه، لذا ضَع الوسم بعد العناصر التي يستخدمها، في نهاية الجسم. حمّله بالطريقة نفسها التي تحمّل بها ورقة أنماط:

{% load static %}
<link rel="stylesheet" href="{% static 'shop/style.css' %}">

لا تستطيع الاختبارات تشغيل JavaScript، لذا فهي تختبر الصفحة وJSON؛ أما المعاينة فتشغّل البرنامج النصي فعليًا.

التحدي

متوسط

اقرأ tasks/static/tasks/app.js، ثم في tasks/templates/tasks/home.html:

أضف القائمة التي يملؤها البرنامج النصي، باستخدام المعرّف الذي يبحث عنه.
حمّل tasks/app.js عبر {% static %}، وضعه بحيث تكون القائمة موجودة عند تشغيله.

اضغط على «تشغيل»: ستظهر المهام الثلاث في الصفحة الرئيسية.

جرّب بنفسك

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Task tracker</title>
</head>
<body>
    <h1>Task tracker</h1>
</body>
</html>