0.3 ממשק אפליקציה API הרצאה
מבנה fullstack¶
בדרך כלל נהוג לחלק תוכנות לשני חלקים, ה״צד שרת״ (backend) ו-״צד לקוח״ (frontend)
כאשר צד לקוח (הfrontend) הוא הקוד שרץ אצל המחשב/טלפון של הלקוח, והצד שרת (הbackend) הוא קוד שרץ בשרת מרוחק.
לדוגמה: האפליקציות בטלפון שלנו הן קוד צד לקוח, בגלל שהקוד שלהן ממש רץ אצלנו בטלפון. לעומת זאת, ברוב האפליקציות אנחנו צריך גם קוד מרוחק (צד שרת) שמטרתו לנהל שירותים מסוימים באפליקציה- זהו קוד צד שרת.
נקח לדוגמה את האפליקציה יוטיוב- הקוד צד לקוח לא מספיק, אנחנו צריכים קוד צד שרת מרוחק, שרץ בשרתים שלנו ואחראי לנהל את המשתמשים ביוטיוב (לאפשר יצירת משתמשים והתחברות), לאפשר העלאת סרטונים למסד הנתונים של יוטיוב, לאפשר לאנשים לגשת לסרטונים של אנשים אחרים- ועוד המון.
השילוב של backend ושל frontend נקרא גם ״fullstack״ֿ
למעשה, קוד צד לקוח יכול להיות אפליקציה, תוכנה, משחק מחשב, או אתר אינטרנט.
באתרי אינטרנט הקוד צד לקוח קצת שונה, אתר אינטרנט לא עובד כמו תוכנה רגילה (אנחנו לא מורידים אותה מראש למכשיר שלנו)- למעשה כאשר אנחנו נכנסים לאתר הדפדפן שלנו פונה לשרתים של האתר כדי לקבל קוד שהדפדפן שלנו מריץ על המכשיר שלנו (הקוד צד לקוח), ועדיין, גם הוא צריך לגשת המון פעמים לצד השרת.
אם נחזור לדוגמה שלנו יוטיוב, ליוטיוב יש את הbackend שלהם, ויש להם כמה צדדי לקוח שונים, תוכנה, אתר ואפליקציה וכולם משתמשים באותו צד שרת מאחורי הקלעים.
עכשיו יש לנו קצת הבנה על מה זה full-stack וכיצד תוכנה מודרנית נראית.
אתר אינטרנט¶
אז איך אתרי אינטרנט עובדים?
הfrontend הוא קוד javascript+html+css שנמצא על שרת מרוחק, שמחכה שדפדפנים יפנו אילו בפרוטוקול http. כאשר המשתמש פונה לשרת הfrontend שלנו עם הדפדפן, הדפדפן מבצע בקשת GET על נתיב /ֿ, השרת יחזיר לו את הקוד javascript, html, css של העמוד הראשי והדפדפן יציג לנו את העמוד באמצעות הקבצים שקיבל מהשרת frontend שלנו.
פרקטית, הנה דוגמאות לבקשות http שהדפדפן יכול לעשות לשרתי frontend:
הדפדפן יודע לפרסר javascript, html, css וממש להציג בצורה גרפית את האתר.
פתחו את www.google.com ולחצו על ctrl + shift + i, תפתח לכם חלונית שבה תוכלו לראות את קוד הjavascript, html ו-css שממש הדפדפן מריץ כדי להציג את האתר שמולכם.
לסיכם, שרתי frontend של אתרים הם השרתים שאילו הדפדפן שלנו פונה כדי לקבל את הhtml + css ו- javascript של האתר, וכך הדפדפן שלנו יודע להציג לנו את האתר עצמו.
הapi¶
כמובן, שהאתר שאנחנו מריצים בדפדפן שלנו יפה והכל- אבל זה לא מספיק. מה אם נרצה שמשתמש באתר יגש למסד נתונים? ירשום תגובה לפוסט, יתחבר לעמוד האישי שלו או כל דבר אחר? פה בדיוק נכנס הbackend.
הbackend הוא קוד שיודע לבצע את כל הפעולות שנגדיר לו, מול המסד נתונים או כל דבר אחר- ומייצא את כל הפעולות האלו למשתמש באמצעות שרת http- אנחנו קוראים לשרת הזה api. (זה שרת נפרד מהfrontend בדרך כלל)
דוגמה לבקשות api
POST /login
{
username=amit
password=123
}
POST /video/upload
{
url=https://youtu.be/dQw4w9WgXcQ?si=a5cQ54WX9QW9aS5T
name=kittens
}
GET /health_check
כלומר, בזמן ששרת frontend מחזיר עמודי html וjava script באמצעות פרוטוקול http,
שרת backend מבצע פעולות שהמשתמש מבקש ומחזיר תשובות json, xml, או טקסט באמצעות פורטוקול http.
לרוב נראה, שקוד הjavascript שרץ בדפדפן שלנו (שאותו קיבלנו משרת הfrontend). יפנה בעצמו לשרת הbackend (דרך הapi) כדי לבצי פעולות כלשהן.
לדוגמה, אם יש כפתור של כתיבת תגובה לפוסט באתר, מאחורי הקלעים כאשר נלחץ על הכפתור- יהיה קוד javascript שרץ אצלנו בדפדפן שיודע לפנות לbackend בפורטוקול http וידע להגיע לapi שמטפל בתגובות לאתר.
בקורס זה נלמד כיצד לבנות קוד backend- ואיך לייצא אותו באמצעות api, לא נתעסק באיך כותבים קוד frontend ואיך frontend פונה לapi.
כאשר אנחנו כותבים api וקוד backend- כל סוג של קוד frontend יכול לפנות אילו, אתר, אפליקציה, תוכנה, או סקריפט פייתון.
בעתיד, יהיו קורסים גם על כיצד לפתח אתרים, תוכנות, משחקי מחשב, וכו.