ماذا يعني API ومتى أكون بحاجة لاستخدامه؟

[sohep]

ما هو API ؟
وكيف يمكن أن افهمه من خلال مثال عملي، يعني مثلا موقعنا الي عملناها في مسابقة رمضان توصيل الوجبات، هل انا بحاجة Api له ؟
وما وظيفة ال API في الموقع؟ وكيف يمكن أن استخدمها في flask ؟
أرجوا التوضيح

[YaserAlnajjar]

قمت بتوضيح الأمور حول الـ API في هذا الموضوع:

ابدأ بجني الأموال بإضافة الدفع الإلكتروني إلى موقعك في 5 دقائق

[sohep]

وضحلي أكثر بعيدا عن الأموال هل أنا احتاج كمطور مواقع ان اتعلم شيء يخص ال API ؟
لقد أردت ربط vuejs مع flask واثناء البحث وجدت مكتبات فيها APi فلم أفهم ما علاقة هذا بالموضوع.
أرجوا التوضيح

وما وظيفة ال API في الموقع؟

[YaserAlnajjar]

الـ API بشكل عام هي وسيلة للتواصل بين البرمجيات كما تعرف مسبقاً…

بالنسبة للويب وفي حالتك، هذا يعني أنه عند عمل تطبيق vuejs مع flask (كلاهما تطبيقين منفصلين) يتواصلوا باستعمال الـ API

لكن يتطلب هذا الفصل بشكل أكبر، وأقصد بهذا حذف فكرة الـ template من flask تماماً

ربما يبدو الأمر غريباً، ولكن هو في الواقع أفضل بكثير، ويحتاج مجهود أكبر.

ماهي الخطوات للقيام بالأمر:

1. أول شيء تجعل تطبيق flask يتعامل مع JSON اختصار لـ JavaScript Object Notation
   بحيث يرجع مثلاً في الـ endpoint الخاصة بالمنشورات GET /posts بيانات المنشورات على شكل json هكذا:

{
  posts: [
    {
      "id": 1,
      "author": "Yaser",
      "body": "Hello everyone"
    },
    {
      "id": 2,
      "author": "Sohep",
      "body": "Hi there"
    }
  ]
}

وأيضاً يستقبل فقط json، مثلاً في endpoint إضافة منشور POST /posts يستقبل نفس البيانات بالأعلى (بدون الـ id لأنه سينشأ واحد بنفسه) هكذا:

{
  "author": "Yaser",
  "body": "Hello everyone"
}

2. بعد أن جهزت جميع الـ endpoint صار لديك API يستطيع تطبيق Vue التواصل معه، وقتها تستعمل مثلاً مكتبة axios بهذا الشكل:

import axios from 'axios'

axios.defaults.baseUrl = 'http://localhost:5000/api'

getPosts() {
  return new Promise((resolve) => {
      axios.get('/posts')
           .then(response => { resolve(response.data) })
           .catch(error => { console.log(error) })
    })
}

لو تقوم بتشغيل الدالة getPosts فهي ستقوم بجلب البيانات من الـ API الخاصة بفلاسك

• لا تقم بجعل تطبيق flask و vue مع بعض لأن هذا سيدخلك في العديد من المشاكل، افصلهم عن بعضهم وسترى الأمور بشكل أسهل

هذا مشروع قمت بتجربة Vue عليه قبل فترة بإمكانك الإطلاع وفهم كيف تم الربط:

yaseralnajjar/vue-demo/blob/master/src/components/StudentsList.vue

[sohep]

شكرا لك
سافعل كما قلت لي وفي حال وجهتني مشاكل لا غنى لنا عن سوالك استاذ ياسر
أتمنى ان لا أكون قد اثقلت عليك

[YaserAlnajjar]

بالعكس أنا سعيد بالإفادة

وأيضاً يقال: من لا يسأل… لا يتعلم