שיעור עשרים- API - דוגמאות ושימושים

פרק 20 - API - דוגמאות ושימושים

ראשית נראה בכלל דוגמא לשימוש בAPI, ולאחר מכן נלמד איך עושים זאת בעזרת ג׳אווהסקריפט.

שימוש ב-API

כמו שאמרנו לכל אתר יש את הAPI שלו, כלומר את הכללים שלו איך ניתן לגשת לנתונים שלו. בא נראה כמה דוגמאות:

דוגמא – API: תמונות של כלבים

יש אתר הנקרא https://dog.ceo/ . האתר הזה מציע לנו גישה למאגר גדול של תמונות של סוגי כלבים שונים. כדי לדעת איך אנו מתקשרים עם המאגר הזה ניגש להסבר על ה- API שלהם: https://dog.ceo/dog-api/documentation/ ששם יש את כל ההסברים איך לתקשר עם המאגר של התמונות. הם מסבירים שם איך אפשר לבקש תמונות לפי זנים או איך פשוט לבקש תמונה רנדומלית של כלב וכו׳.

לדוגמא כדי לבקש תמונה רנדומלית נשתמש בקישור הבא, שמבקשת תמונה רנדומלית.

https://dog.ceo/api/breeds/image/random

אם תכנסו לקישור – תקבלו תשובה בסגנון הבא:

כלומר בעצם אנו ביקשנו תמונה רנדומלית שנמצאת על השרת שלהם, והם החזירו תשובה – קישור לתמונה. בנוסף רשום status, שהוא מראה שהבקשה בוצעה בהצלחה.

אם לדוגמא נכניס קישור לא תקין, שלא ב'הסכם׳: https://dog.ceo/api/breeds/image/r

נקבל תשובה:

שאומרת לנו status – error, כלומר הבקשה לא הצליחה, ובנוסף התשובה מסבירה לנו מה הבעיה בבקשה שלנו, ולמה היא לא התקבלה.

חשוב לומר שהרבה אתרים מבקשים להירשם אליהם חלקם בחינם, חלקם בתשלום. וזה הגיוני מכיוון שהם מציעים לנו שירות שאנו יכולים להשתמש בו.

דוגמא API: רעיונות לפעילויות כשמשעמם:

הכנסו לאתר https://www.boredapi.com .

אחד מהדברים שם הוא מאפשר לקבל רעיונות רנדומליים לפעילויות:

: https://www.boredapi.com/api/activity

איך עושים זאת בעצמנו

כאשר אנו ניגש לשרת API, יהיו לנו 2 סוגים של פעולות עיקריות:

GET: בקשה שבה אנו מבקשים לקבל מידע. בבקשה זו אנו נציין איזה מידע אנו רוצים לקבל

POST: בקשה שבה אנו מעלים מידע לשרת. בבקשה כזו אנו נציין איזה מידע אנו רוצים להעלות.

כעת אנו נתמקד בבקשת GET בלבד.

fetch

בואו נראה דוגמא איך אנו מבקשים תמונה בעזרת ג׳אווהסקריפט.

לשם כך נשתמש בפונקציה ()fetch:

מה שהפונקציה עושה זה לשלוח בקשת GET לשרת שנמצא בכתובת(הקישור) שהכנסנו לסוגריים.

בשלב זה יש מספר פעולות שאנחנו צריכים לבצע אז תחזיקו ראש:

לחכות לתשובה .
לשנות את התשובה לפורמט הרצוי לנו
מהתשובה לקחת את הנתונים שאנו רוצים בדיוק.

נראה דוגמא למבנה ונסביר:

לחכות לתשובה

מכיוון שאנחנו מבקשים בקשה משרת אחר, שזה בעצם ממחשב שיושב פיזית במקום אחר בעולם, יכול להיות שייקח זמן עד שזה יחזור. לכן אנו נרצה שהמחשב יחכה עד שתשובה תגיע. הפונקציה then אומרת: ״תחכה כל עוד התשובה לא מגיעה – ברגע שהיא מגיעה – תבצע את הפונקציה שרשומה פה בפנים.

לשנות את הפורמט

לא נכנס יותר מידי לפרטים, אבל נסביר שכאשר מידע נשלח ברשת הוא נשלח בפורמט מסוים שנקרא (json), ועל מנת שנוכל לקרוא אותו כמו שצריך – צריך להחזיר אותו מהפורמט – לפורמט רגיל. נגדיר את הפונקציה שעושה זאת בצורה הבא:

מהתשובה לקחת את הנתונים שאנו רוצים בדיוק.

קודם ראינו שהתשובה נראית באופן הבא:

כלומר התשובה מורכבת מ2 חלקים במקרה שלנו – message,status. לכן נבנה פונקציה שנגשת לחלק של הקישור, כי זה מה שאנו מחפשים. נגדיר את הפונקציה הבאה:

אנו רואים ששמרנו בתוך המשתנה dog את הmessage. כלומר את הקישור שלנו.

(נזכיר שבשביל לדעת מה חוזר מהבקשה צריך להסתכל בהסברים על הAPI הספציפי הזה.)

ולבסוף הדפסנו אותו.

נסו את הקוד הזה בעצמכם!

כעת לאחר שהבנו את איך משיגים את הקישור של התמונה, אנחנו יכולים להתשתמש בזה, לדוגמא ליצור אלמנט של תמונה, וברגע שאתם מקבלים את הקישור להגדיר אותו כsrc של התמונה לדוגמא:

משימה

קחו את הדוגמא שהראינו שמבקשת תמונה רנדומלית, ותשנו אותה באופן הבא: תייצרו פונקציה שמבצעת את הפעולה 10 פעם (כל פעם נקבל תמונה אחרת) , ובכל פעם תיצרו אלמנט חדש של תמונה, תכניסו את הקישור כsrc של התמונה, בCSS תעצבו את כל הכלבים שיוצגו בדף באופן מסוים בגודל מסוים. עשו זאת כרצונכם. עכשיו אפשר לעשות מגוון דברים עם הדבר הזה, אפשר להוסיף כפתור לדף, שבכל פעם שנלחץ עליו הוא יביא תמונה רנדומלית ועוד ועוד..
https://randomuser.me/api/ – בכתובת הזו מקבלים מידע על משתמשים לא אמיתיים.

אם נכנס לכתובת נקבל טקסט בסגנון הבא כמו קודם:

בהתבסס על מה שראינו:

א. נסו להדפיס כל נתון שיש בדף שאתם מקבלים. בדוגמא שלפניכם הצגנו איך ניתן לגשת למין, שם + שם משפחה של המשתמש. נסו ללמוד את הכללים דרך מה שעשינו – ועשו זאת בעצמכם.

שימו לב שהנקודה החשובה בכל מידע שאנו מקבלים – הוא להבין איך הוא בנוי, עם איזה שמות, וכו׳ ואז לדעת ׳לדקור את הנקודה׳

ב. כעת לאחר שלמדתם איך להגיע לכל מקום – בואו נשתמש במידע.

הציגו את המשתמש על הדף בצורה טובה. לדוגמא בdiv אחד תשימו את הפרטים היבשים, בdiv אחר את האימייל שם משתמש וסיסמא שלו, ובמקום אחר, תיצרו אלמנט של תמונה עם התמונה שלו.. השתמשו בכל הכלים שלמדנו עד כאן.

3. https://api.genderize.io/?name=Moshe – בכתובת הזאת, אנו נכניס שם של בנאדם (בסוף של הקישור, במקרה שלנו הכנסנו Moshe) והוא יענה לנו מה ההסתברות שהשם הוא של בן/בת.

ראשית, נסו זאת בעצמכם, הכניסו שמות שונים. תקבלו משו בסגנון:

כעת כתבו תוכנית שמשתמשת בזה. למשל תכתבו תוכנית שמקבלת שם מהמשתמש, לאחר מכן תוסיף את השם לכתובת, ו׳תמשוך׳ מהתשובה שהתקבלה את התשובה האם זה שם של בן/בת, ומה ההסתברות לכך.

הוסיפו את התשובה לדף. (ופנקו קצת בסטייל)

סיכום:

ראינו דוגמאות לשימוש בAPI. זה מאפשר לנו לגשת למאגרי מידע עצומים שאנו יכולים להשתמש בהם בתוכניות שלנו.

למדנו שיש כל מיני סוגים של בקשות, כאשר עסקנו רק באחת – בבקשת GET, שבה אנו מבקשים משו ספציפי משרת מסוים.

לבסוף ראינו איך איך בפועל מבקשים משו בעזרת הפונקציה ()fetch.

ראינו שעל מנת להשתמש בfetch, אנו צריכים לעשות 3 דברים – להשתמש בפונקציה then, ולהגדיר עוד 2 פונקציות – אחת שתשנה את הפורמט של ההודעה, והשניה פונקציה שתבצע עבורנו מה שאנו צריכים, כאשר זה ישתנה כמובן ממקרה למקרה.

זהו, הAPI זהו כלי עוצמתי ביותר. הוא מאפשר לנו להשתמש בנתונים ובכלים שאנשים אחרים יצרו. המון פעמים בשביל להשתמש בAPI מסויימים יהיה צריך לשלם למי שמציע זאת, שכן זה שירות כמו כל שירות – הם נותנים לנו שירות וכלים.

פרק 20 - API - דוגמאות ושימושים

כל הזכויות שמורות לבנימין טק

אבל עזבו זכויות, אנחנו בעיקר מרגישים מחוייבות לעודד פה בבנימין חדשנות ויזמות בראש קהילתי נעים ומזמין :)

שלחו פרטים

שלחו פרטים

שלחו פרטים

שאלה מעולה :)