برنامج تعليمي للمبتدئين إلى واجهات برمجة تطبيقات الويب + كيفية البدء السريع

هذا ما بدا لي عندما بدأت في التعلم عن العمل مع واجهات برمجة التطبيقات.

إذا كنت تريد استخدام API هاه؟

إذا كنت تقرأ هذا ، فمن المحتمل أنك تبحث عن شيء ما على غرار:

"كيف يمكنني استخدام API؟"
"ما المكتبة التي أستخدمها في واجهة برمجة التطبيقات؟"
"ما هو API؟"
"الرجاء مساعدتي ، لقد علقت على تطبيق Weather App API الخاص بـ freeCodeCamp ولا أعرف ما أفعله."

حسنًا ، أنا على وشك أن أجعل حياتك أسهل بمقدار 100 مرة لأنني كنت في نفس القارب بالضبط مثلك.

اتبع ذلك ، لأنه بعد قراءة هذا ، أعدك أنك سوف تفهم تمامًا ماهية واجهة برمجة التطبيقات وكيفية التفاعل مع واحدة.

اهم الاشياء اولا.

نحن بحاجة إلى فهم ما هو كائن.

أعلم أنك رأيت شيئًا كهذا.

يبدو مألوفا؟ نعم أعرف ، ربما كان أحد الأشياء الأولى التي تعلمتها في رحلة JavaScript.

حسنًا ، ما وجهة نظرك؟ ما علاقة هذا بأي شيء؟

هل تلاحظ شيئا عن هذا الكائن؟ ليس سؤال خدعة.

ما هو هذا الكائن يقول لك؟

خطأ ، إنه كائن اسمه شخص؟ لديها مفاتيح وقيم ... ماذا في ذلك؟

بداية جيدة.

حسنا ، ماذا يقول؟ ما هو بالضبط هذا الكائن يقول لك؟

ما هو يصف؟

يا. إنه كائن يسمى الشخص. له اسم وهو ماريو. سن 22 وهو أخ يدعى لويجي. وأعتقد أن الطعام فطر؟

الآن أنت تحصل عليه!

دعونا المضي قدما.

ماذا عن هذا؟

أليس هذا هو القرف نفسه؟

انظر أقرب.

أه لا يوجد إعلان؟ مثل ليس هناك شخص ثابت = الآن.

أنت تزداد دفئًا ...

مفاتيح لها ونقلت؟

بالضبط.

وماذا في ذلك؟

ما تحتاج إلى فهمه هو أن المقتطف الأول هو كائن JavaScript اليومي المعتاد الخاص بك ، والمقتطف الثاني متشابه جدًا ، لكن يسمى JSON.

أكبر نقطة أساسية هي معرفة أن واجهة برمجة التطبيقات التي ستعمل معها ستعمل دائمًا على إخراج JSON. هذا هو المفتاح.

النموذج العقلي الذي أحاول غرسه في عقلك هو أن العمل مع واجهة برمجة التطبيقات بسيط مثل العمل مع كائن ما.

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

هذا سهل. أود فقط الوصول إلى خاصية الاسم عبر تدوين النقاط. يمكنني فقط أن أفعل اسم Person.name وهذا من شأنه أن يعطيني "Mario".

الآن ، ماذا عن JSON؟

اه. نفس الشيء…؟

تقريبيا. الشيء ، هو مجرد كائن مجهول. كيف نستخدم .name بدون شيء قبل تدوين النقاط؟

مهلا! كان هذا سؤال خدعة. هذا ليس عدلا!
لكن حسنا. إذن كيف سنخصصها؟

هذا سهل.

تذكر ما قلته من قبل؟ كيف يكون عادة JSON استجابة من API؟

دعنا نستخدم مثال عملي. دعنا في الواقع سحب البيانات من API.

المضي قدما ووضع هذا في وحدة تحكم متصفح الويب الخاص بك.

ماذا ترى؟

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

وإذا أردت اسم الكائن الأول في الصفيف؟

سهل! استخدم [0] للحصول على الكائن الأول ثم استخدم .name للحصول على الاسم!

الآن أنت تحصل عليه.

حسنا. لكن ... كيف يعمل هذا كله؟ أين يتم تعيينها ل؟ ماذا تفعل هذه الشفرة؟ يبدو أن هناك الكثير الذي تركته. انى تائه!

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

دعنا نلقي نظرة على نسخة مشروحة من هذا المقتطف.

وهناك تذهب!

يجب أن تفهم الآن أساسيات كيفية استدعاء واجهة برمجة تطبيقات وتكون قادرًا على الحصول على البيانات والقيام بشيء معها.

في هذه الحالة ، تمكنا من الاتصال بـ API وأصبح بإمكاننا الآن الحصول على الكائن الأول و console.log.

لذلك هنا هو التحدي.

أريدك أن تأخذ البيانات وإدخالها على DOM.

هنا هو رمز بداية الخاص بك. ما عليك سوى نسخ ولصق هذا في ملف .html في محرر النصوص المفضل لديك ومحاولة ملء الفراغات.

نقاط المكافأة إذا كنت تستخدم نقطة نهاية مختلفة! حاول استخدام نقطة نهاية / المنشورات.