كيفية إنشاء واجهة برمجة تطبيقات REST API؟

تقدم هذه المقالة مقدمة عن واجهات برمجة التطبيقات، وتحديدًا واجهات برمجة التطبيقات RESTful. سنلقي نظرة على فوائدها وقيودها وبدائلها. بالإضافة إلى ذلك، سوف نوضح كيفية إنشاء واجهة برمجة تطبيقات REST باستخدام Back4app – أحد أفضل مزودي خدمات BaaS.

ما هي واجهة برمجة التطبيقات (API)؟

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

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

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

ما هي الاختلافات بين API و SDK؟

كما ذكرنا أعلاه، واجهة برمجة التطبيقات هي مجموعة من القواعد التي تحدد كيفية تواصل جهازين أو نظامين. أما مجموعة أدوات تطوير البرمجيات (SDK ) فهي مجموعة من الأدوات والمكتبات والوثائق التي تساعد المطورين على بناء برمجيات لمنصة معينة (مثل ويندوز، ويب، أندرويد، iOS).

غالبًا ما تستخدم حزم SDKs العديد من واجهات برمجة التطبيقات خلف الكواليس. سنلقي نظرة على مثال عملي في الجزء الثاني من المقال.

ما هو REST؟

يميز النهج المعماري للبرمجيات المسمى نقل الحالة التمثيلية (REST) إطار عمل الإنترنت. وهو لا يشكل بروتوكولاً أو معياراً، مما يسمح بتنوع طرق التنفيذ من قبل المطورين. قدم روي فيلدينج REST في عام 2000، وكان بمثابة المعيار السائد لإنشاء واجهات برمجة تطبيقات الويب لأكثر من عشر سنوات.

يعتمد REST على بروتوكول HTTP ويستخدم طرق HTTP مختلفة مثل GET و POST و PUT و DELETE لمعالجة الموارد. تسمى هذه العمليات في كثير من الأحيان CRUD (إنشاء واسترجاع وتحديث وحذف). يدعم REST العديد من تنسيقات البيانات بما في ذلك JSON و HTML و XLT و Python و JavaScript وما إلى ذلك. تنسيق البيانات الأكثر استخدامًا هو JSON.

لكي يتم اعتبار واجهة برمجة التطبيقات RESTful يجب أن تتماشى مع القيود الستة التالية:

1. بنية العميل والخادم – يجب أن تكون مكونات العميل والخادم منفصلة.
2. انعدام الحالة – لا يُسمح لتطبيقات الخادم بتخزين أي بيانات للعميل بين الطلبات.
3. القابلية للتخزين المؤقت – يجب أن تكون الموارد قابلة للتخزين المؤقت من جانب العميل أو الخادم عندما يكون ذلك ممكناً.
4. نظام متعدد الطبقات – يجب أن تسمح واجهات برمجة التطبيقات بالوسطاء، ولكن يجب ألا يؤثر ذلك على العميل.
5. واجهة موحدة – يجب أن تكون الواجهة بين الخادم والعميل موحدة.
6. رمز عند الطلب (اختياري) – يسمح للخادم بإرسال رمز قابل للتنفيذ إلى العميل.

الفرق بين RESTful و RESTVOL هو أن REST يشير إلى مجموعة من القيود، بينما يشير RESTful إلى واجهة برمجة التطبيقات التي تتوافق مع تلك القيود.

كيف تعمل واجهات برمجة تطبيقات RESTful APIs؟

تعمل واجهات برمجة تطبيقات RESTful APIs بطريقة مشابهة للمتصفحات. والفرق الرئيسي هو أن المتصفحات تستخدم HTTP لطلب صفحات الويب والموارد الأخرى من الخوادم، بينما تستخدم واجهات برمجة التطبيقات RESTful APIs HTTP لطلب موارد البيانات ومعالجتها.

تتبع مكالمة RESTful API النموذجية الخطوات التالية:

1. يرسل العميل طلباً إلى الخادم.
2. يصادق الخادم على العميل ويتحقق مما إذا كان لديه أذونات كافية للطلب.
3. يقوم الخادم بمعالجة الطلب، مثل إجراء العمليات الحسابية وجلب البيانات من قاعدة البيانات.
4. يقوم الخادم بإرجاع استجابة للعميل.
5. يعالج العميل الاستجابة.

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

هيكل الطلب

يحتوي الطلب على ما يلي:

يبدو نموذج الطلب كالتالي:

هيكل الاستجابة

يحتوي الرد على ما يلي:

يبدو نموذج الاستجابة على النحو التالي:

ما هي فوائد RESTful APIs؟

قابلية التوسع

تتميز واجهات برمجة تطبيقات RESTful APIs بقابليتها العالية للتوسع ويمكنها التوسع رأسياً وأفقياً. إن إضافة نقاط نهاية أو موارد جديدة لها تأثير ضئيل على أداء واجهة برمجة التطبيقات، مما يجعل من السهل توسيع نطاقها حسب الحاجة.

تنسيقات بيانات متعددة

يمكن لواجهات برمجة تطبيقات RESTful APIs إرجاع البيانات بتنسيقات مختلفة بناءً على رؤوس طلبات العميل. وهذا يجعلها مرنة للغاية ويسهل دمجها في الأنظمة الحالية. يمكن إرجاع البيانات بصيغة JSON و XLT و Python و HTML و JavaScript وما إلى ذلك.

الكفاءة

تتميز واجهات برمجة تطبيقات RESTful APIs بأنها خفيفة الوزن وذات تكلفة أقل من SOAP (بروتوكول الوصول إلى الكائنات البسيطة). وهذا يجعلها سريعة وفعالة في التعامل مع الطلبات. يمكن لواجهة برمجة تطبيقات RESTful API النموذجية معالجة ما بين 10.000 إلى 15.000 طلب في الثانية.

استقلالية المنصة

فائدة أخرى رائعة أخرى لواجهات برمجة تطبيقات RESTful هي أن الخادم والعميل مستقلان تمامًا. يتيح ذلك للمطورين تنفيذ واجهات برمجة تطبيقات RESTful APIs والعملاء بالعديد من لغات البرمجة مثل Java و JavaScript و Python وغيرها!

سهل الفهم

نظرًا لأن REST يعتمد على HTTP، فمن السهل للغاية فهمه. من شبه المؤكد أن معظم المطورين قد عملوا أو نفذوا واجهة برمجة تطبيقات RESTful مرة واحدة على الأقل.

ما هي قيود واجهات برمجة تطبيقات RESTful APIs؟

الجلب الناقص والجلب الزائد للبيانات

واحدة من أكبر مشاكل واجهات برمجة تطبيقات RESTful هي الجلب الناقص والجلب الزائد للبيانات. يحدث الجلب الزائد عندما يتم إرجاع بيانات أكثر من المطلوب، ويحدث الجلب الناقص عندما لا يتم إرجاع بيانات كافية (وهذا يحدث في الغالب عند التعامل مع العلاقات).

لا توجد اشتراكات بيانات في الوقت الفعلي

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

لا يوجد نظام إصدارات

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

لحل المشاكل المذكورة أعلاه ظهرت العديد من بدائل REST. ومن أشهرها بروتوكول الوصول إلى الكائنات البسيطة (SOAP) و GraphQL و gRPC.

ما هي طرق مصادقة RESTful؟

يمكن أن تستخدم واجهات برمجة تطبيقات RESTful APIs أساليب مصادقة مختلفة لتأمين نقاط النهاية الخاصة بها. طرق المصادقة الأكثر استخدامًا هي:

• مصادقة HTTP
• مفاتيح واجهة برمجة التطبيقات
• OAuth 2.0
• OpenID Connect
• مصادقة JWT

تتطلب معظم هذه الطرق من العميل إرسال بيانات اعتماده أو مفتاح API الخاص به في رأس الطلب. يجب مراعاة طرق المصادقة المختلفة عند بدء مشروع ما.

كيفية إنشاء واجهة برمجة تطبيقات RESTful API؟

يفحص هذا الجزء من المقالة إنشاء واجهة برمجة تطبيقات RESTful API باستخدام Back4app وإنشاء اتصال مع واجهة Next.js.

المتطلبات الأساسية

• خبرة في JavaScript ES6
• خبرة في React و Next.js
• الفهم الأساسي ل REST

ما هو تطبيق Back4app؟

Back4app هو حل BaaS – Backend as a Service المذهل. فهو يستخدم برمجيات مفتوحة المصدر ويقدم العديد من الميزات لمساعدة المطورين على إنشاء تطبيقات الجوال والويب بشكل أسرع. يتيح ذلك للشركات التركيز على منطق أعمالها، دون القلق بشأن البنية التحتية السحابية.

تتميز المنصة بلوحة تحكم سهلة الاستخدام وواجهة سطر الأوامر، وتوفر المنصة مجموعات تطوير البرمجيات (SDKs) المتوافقة مع الأدوات المستخدمة على نطاق واسع مثل Node.js وFlutter وReact Native وArandroid وAngular وiOS.

لدى Back4app نموذج تسعير بسيط يمكن أن يناسب أي تطبيق. لديهم أيضًا خطة مجانية، لا تتطلب بطاقة ائتمان، وهي خيار جيد للتطوير والاختبار والنماذج الأولية.

لمعرفة المزيد عن Back4app، يرجى قراءة ما هو Back4app؟

مقدمة المشروع

في هذه المقالة، سنقوم ببناء تطبيق ويب بسيط للمدونة. سيسمح تطبيق الويب للمحررين بإضافة مقالات وللمستخدمين بقراءتها. سيتألف التطبيق من جزأين: الواجهة الخلفية (المستندة إلى REST) والواجهة الأمامية. للواجهة الخلفية سنستخدم Back4app وللواجهة الأمامية سنستخدم React مع Next.js.

الواجهة الخلفية

إنشاء تطبيق Back4app

ستتطلب الخطوات التالية أن يكون لديك حساب Back4app. قم بتسجيل الدخول أو إنشاء حساب إذا لم يكن لديك حساب حتى الآن.

انتقل إلى لوحة تحكم Back4app وأنشئ تطبيقًا جديدًا بالنقر على “إنشاء تطبيق جديد”.

اختر “الواجهة الخلفية كخدمة (BaaS)”، وأعطها اسمًا مخصصًا، واختر “قاعدة بيانات NoSQL” كقاعدة بيانات. أخيرًا، انقر على “إنشاء” لبدء عملية إنشاء التطبيق.

سوف يستغرق Back4app بضع لحظات لإعداد كل ما هو مطلوب لتطبيقك مثل قاعدة البيانات، والتوسع، والأمان. بمجرد أن يصبح تطبيقك جاهزًا، ستتم إعادة توجيهك إلى عرض “قاعدة البيانات”.

تعريف فئات قاعدة البيانات

للمضي قدماً، دعونا نعرّف فئات قاعدة البيانات.

سيكون لدينا الفصلين التاليين

1. فئة المقالة تمثل فئة المقالة (مثل سلسلة الكتل، والذكاء الاصطناعي، والبرمجة)
2. المادة تمثل مقالة. يمكن أن تحتوي المقالة على فئات متعددة (م:ن).

لإنشاء صف، انتقل إلى لوحة تحكم Back4app وحدد “قاعدة البيانات” على الشريط الجانبي. ثم انقر على “إنشاء صنف”، وقم بتسميته "صنف المقالات" وقم بتمكين “قراءة وكتابة عامة”.

عند الانتقال إلى الإنتاج يجب عليك تعطيل “القراءة والكتابة العامة” وتعزيز الأمان باستخدام ACLs و CLPs. لمزيد من المعلومات راجع Parse Server Security.

بعد ذلك، أضف الحقول التالية إليها:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | name            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | description     | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

قم بتنفيذ نفس الخطوات للفئة الثانية المسماة المادة. أضف الحقول التالية:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | title           | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | shortContent    | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | content         | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| Relation -> ArticleCategory | categories      | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

عظيم، هذا كل شيء.

ملء قاعدة البيانات

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

لإضافة فئة مقالات جديدة حددها في الشريط الجانبي وانقر على “إضافة صف”.

يمكنك استخدام فئات المقالات هذه أو ابتكار فئات خاصة بك:

+------------+------------+---------------------------------------------------------+
| name       | slug       | description                                             |
+------------+------------+---------------------------------------------------------+
| Blockchain | blockchain | Blockchain, crypto & more!                              |
+------------+------------+---------------------------------------------------------+
| AI         | ai         | Artificial intelligence, LLMs, stable diffusion.        |
+------------+------------+---------------------------------------------------------+

يمكنك أيضًا استخدام ChatGPT لإنشاء بيانات نموذجية. لمعرفة المزيد عن ChatGPT راجع كيف تستخدم ChatGPT لإنشاء تطبيق؟

افعل الشيء نفسه بالنسبة لفئة المادة:

+------------------+---------------+--------------+---------+-----------------------+
| title            | slug          | shortContent | content | categories            |
+------------------+---------------+--------------+---------+-----------------------+
| Beyond Crypto    | beyond-crypto | ...          | ...     | <blockchain.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| The Rise of AI   | rise-of-ai    | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+
| What is ChatGPT? | chatgpt       | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+

تأكد من استبدال و بمعرف كائن فئة المقالة الفعلي. في حالتي، هذان هما SxS0y0iWDij و Hf8yBDTO79 (الصورة أعلاه كمرجع).

واجهة برمجة تطبيقات REST API

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

وحدة تحكم REST API

لاختبار واجهة برمجة التطبيقات، انتقل إلى لوحة تحكم Back4app وحدد “واجهة برمجة التطبيقات > وحدة التحكم > REST” على الشريط الجانبي. ثم حدد GET كنوع الطلب، والفئات/المقال كنقطة نهاية. وأخيراً، انقر على “إرسال استعلام” في أسفل يمين الشاشة لإرسال الطلب.

سيعيد هذا الطلب جميع المقالات الموجودة في قاعدة بياناتك. يجب أن تحصل على استجابة مماثلة:

{
   "results":[
      {
         "objectId": "yEaR8K44il",
         "title": "Beyond Crypto",
         "slug": "beyond-crypto",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:26:19.016Z",
         "updatedAt": "2023-04-17T14:26:30.922Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      },
      {
         "objectId": "l46nMkHElH",
         "title": "What is ChatGPT?",
         "slug": "chatgpt",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:27:34.931Z",
         "updatedAt": "2023-04-17T14:27:42.636Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      }
      // ...
   ]
}

تتيح لك وحدة التحكم في REST Console أيضًا إجراء عمليات POST وPUT وELETE. علاوةً على ذلك، يمكنك استخدام معلمات استعلام التحليل لتصفية البيانات والتعامل مع العلاقات والمزيد.

على سبيل المثال، إذا كنت تريد جلب المقالات التي تنتمي إلى فئة “بلوك تشين”، يمكنك استخدام عبارة حيث التالية:

where={"categories": {
    "__type": "Pointer", "className": "ArticleCategory", "objectId": "<objectId>"
}}

تأكد من استبدال بمعرف كائن سلسلة الكتل.

تعرّف على المزيد حول معلمات الاستعلام من خلال الاطلاع على دليل Parse REST API.

cURL

تعتبر وحدة تحكم REST Console رائعة، ولكن عندما تعمل على تطبيقات فعلية ستحتاج إلى نهج أكثر توجهاً نحو المبرمج لطلبات واجهة برمجة التطبيقات. إحدى الأدوات التي يمكنك استخدامها هي cURL – وهي أداة سطر أوامر لبروتوكولات مختلفة مثل HTTP و FTP و SMTP.

مثال على أمر cURL لسرد فئات المقالات سيبدو كالتالي:

$ curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/ArticleCategory | jq

يمكنك الحصول على المفاتيح من “لوحة تحكم Back4app > إعدادات التطبيق > الأمان والمفاتيح”.

كما ترى عند استخدام cURL يجب عليك تحديد نوع طريقة HTTP وتقديم معرّف التطبيق ومفتاح REST API. علاوة على ذلك، يمكنك إدخال الاستجابة في jq لتنسيقها تلقائيًا وتمييزها بالألوان.

مرجع واجهة برمجة التطبيقات

شيء آخر رائع في Back4app هو أنه يقوم تلقائيًا بإنشاء مرجع API لجميع فئات قاعدة البيانات الخاصة بك. في كل مرة تقوم فيها بإجراء تغيير ينعكس التغيير في الوثائق.

للوصول إلى مرجع واجهة برمجة التطبيقات، اختر “قاعدة البيانات” على الشريط الجانبي، واستخدم النقاط الثلاث أعلى يمين الشاشة لرؤية جميع الخيارات. وأخيراً، اختر “مرجع واجهة برمجة التطبيقات”.

يحتوي مرجع واجهة برمجة التطبيقات (API) على أوصاف جميع فئات قاعدة البيانات، وتعليمات لعمليات CRUD، ونماذج الطلبات، والاستجابات، ومقتطفات التعليمات البرمجية.

هذا كل شيء بالنسبة للواجهة الخلفية. في القسم التالي، سنلقي نظرة على كيفية تنفيذ واجهة أمامية يمكنها التواصل مع الواجهة الخلفية.

الواجهة الأمامية

كما ذكرنا أعلاه سنستخدم React مع Next.js 13 لبناء الواجهة الأمامية. بشكل عام، هناك ثلاث طرق للاتصال بواجهة خلفية قائمة على Parse من واجهة JavaScript الأمامية:

1. باستخدام REST API (طلبات HTTP واستجاباتها)
2. باستخدام واجهة برمجة تطبيقات GraphQL (مذكورة في هذه المقالة)
3. باستخدام JavaScript SDK

يجب عليك اختيار الخيار الأخير أو الخيار الثاني الأخير. لا يوصى بالاستخدام المباشر لواجهة برمجة تطبيقات REST API في تطبيقات العميل التي يمكن أن تستخدم حزم Parse SDK (مثل JavaScript و Flutter و Android و iOS و Xamarin). هذا لأن Parse SDK يتيح لك كتابة شيفرة أنظف وأقل عرضة للأخطاء. خلف الكواليس، تستخدم حزم Parse SDKs واجهة برمجة تطبيقات REST.

إنشاء التطبيق التالي

امض قدمًا وقم بتشغيل مشروع Next.js باستخدام الأداة المساعدة إنشاء تطبيق Next-next. افتح جهازك الطرفي وشغّل الأمر التالي:

$ yarn create next-app

√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Successfully created a Next.js app.

بعد ذلك، قم بتشغيل خادم التطوير:

$ yarn dev

انتقل إلى http://localhost:3000 وسترى الصفحة المقصودة Next.js.

شاكراوي

لجعل عملية بناء UI/UX أسهل سنستخدم ChakraUI. Chakra UI هي مكتبة مكونات غير معقدة ونموذجية وسهلة الاستخدام توفر جميع العناصر الضرورية لتطوير تطبيقات React الخاصة بك.

في حال واجهتك أي مشاكل ارجع إلى ChakraUI: الشروع في استخدام Next.js.

قم أولاً بتثبيت Chakra وتوابعها عن طريق تشغيل:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

بعد ذلك، انتقل إلى _pages/app.tsx الخاص بك ولف تطبيقك ب ChakraProvider هكذا:

// pages/_app.tsx

import "../styles/globals.css";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme({});

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

لا تنسى استيراد ChakraProvider:

import {ChakraProvider} from "@chakra-ui/provider";

حمِّل نص وضع الألوان قبل المحتوى لتجنب ومضات الألوان العشوائية. للقيام بذلك، يمكنك استخدام _document.js هكذا:

// pages/_document.js

import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

رائع، لقد قمت بتثبيت ChakraUI بنجاح.

واجهة المستخدم

لننتقل إلى الأمام دعنا ننفذ واجهة المستخدم. سننشئ الصفحتين التاليتين

1. / يعرض قائمة المقالات
2. / / يعرض مادة معينة

ابدأ بالفهرس. استبدل محتويات الصفحات/index.js بما يلي:

// pages/index.js

import {Card, CardBody, Container, Heading, 
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Home() {

  const [isLoading, setIsLoading] = useState(true);
  const [articles, setArticles] = useState([]);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <Stack spacing="4" direction="column">
              {articles.map((article, index) => (
                <Card key={index} w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">
                        <Link as={NextLink} href={article.get("slug")}>
                          {article.get("title")}
                        </Link>
                      </Heading>
                      <Text>
                        {article.get("shortContent")}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              ))}
            </Stack>
          )}
        </Container>
      </main>
    </>
  );
}

1. أعددنا المقالات وحالات isLoading التي سنستخدمها لاحقًا عند جلب البيانات.
2. استخدمنا مكونات ChakraUI الأساسية لتصميم واجهة المستخدم.
3. لعرض جميع المقالات نقوم بتكرار حالة المقالات.

بعد ذلك، انتقل إلى الصفحات/[slug].js وقم بتغييره إلى ما يلي:

// pages/[slug].js

import {useRouter} from "next/router";
import {Card, CardBody, Container, Heading,
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Article() {

  const router = useRouter();
  const {slug} = router.query;

  const [isLoading, setIsLoading] = useState(true);
  const [article, setArticle] = useState(null);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <>
              {article == null ? (
                <Text>This article does not exist.</Text>
              ) : (
                <Card w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">{article.get("title")}</Heading>
                      <Text>
                        {article.get("content")}
                      </Text>
                      <Text fontSize="sm">
                        Posted on {new Date(article.get("createdAt")).toDateString()}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              )}
            </>
          )}
          <Text size="sm" mt="2" align="right">
              <Link as={NextLink} href="/">← Go back</Link>
          </Text>
        </Container>
      </main>
    </>
  );
}

1. أعددنا حالة المقال لحمل المقال.
2. لقد استخدمنا الموجه التالي لجلب معلمة السبيكة من عنوان URL.

تكامل الواجهة الخلفية

في هذا القسم الأخير، سنقوم بتوصيل الواجهة الأمامية بالواجهة الخلفية.

لاستخدام Parse SDK علينا أولاً تثبيت Parse SDK. انطلق وشغّل الأمر التالي:

$ yarn add parse @react-native-async-storage/async-storage

بعد ذلك، انتقل إلى صفحتك/التطبيق.js وقم بتهيئة Parse هكذا:

// pages/_app.js

const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  // replace me
Parse.serverURL = PARSE_HOST_URL;

export default function App({ Component, pageProps }) {
  return (
      // ...
  );
}

لا تنسى الاستيراد:

import Parse from "parse/dist/parse.min.js";

لجلب المقالات على صفحة الفهرس يمكننا استخدام Parse.Query.Query. بمجرد جلب البيانات يمكننا تخزينها في المقالات وتعيين isLoading إلى false:

// pages/index.js

export default function Home() {

  // ...

  const getArticles = async () => {
    const query = new Parse.Query("Article");
    setArticles(await query.find());
    setIsLoading(false);
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    // ...
  );
}

يمكننا بعد ذلك القيام بشيء مماثل للمقال في الصفحات/[slug].js:

// pages/[slug].js

export default function Article() {

  // ...

  const getArticle = async () => {
    const query = new Parse.Query("Article");
    query.equalTo("slug", slug);
    const results = await query.find();
    setIsLoading(false);
    if (results.length === 0) return;
    setArticle(results[0]);
  };

  useEffect(() => {
    getArticle();
  }, []);

  return (
    // ...
  );
}

مرة أخرى، لا تنسَ استيراد Parse في كلا الملفين.

import Parse from "parse/dist/parse.min.js";

ابدأ تشغيل خادم التطوير التالي (إذا لم يكن يعمل بالفعل) وقم بزيارة http://localhost:3000 في متصفح الويب المفضل لديك. يجب أن ترى قائمة مقالاتك ويجب أن تكون المقالات قابلة للقراءة.

الخاتمة

في هذه المقالة، تعرفت في هذه المقالة على واجهات برمجة التطبيقات وواجهات برمجة التطبيقات RESTful APIs ومزاياها وعيوبها. يجب أن تكون الآن قادرًا على إنشاء واجهات برمجة تطبيقات RESTful APIs البسيطة والاتصال بها من تطبيق الواجهة الأمامية.

يمكنك الحصول على الكود المصدري النهائي على GitHub.

إذا كنت قد استمتعت بهذه المقالة، يُرجى الاطلاع أيضًا على مقالة كيفية إنشاء واجهة برمجة تطبيقات GraphQL.