שימוש REST API
Single-Page Application

תמלול ההרצאה: שימוש REST API Single-Page Application

הטקסט המלא של הדקות הראשונות בהרצאה «שימוש REST API Single-Page Application» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   בואו נראה שיטה מאוד פופולרית לצריכת מידע על ידי REST API מצד הלקוח. אני מניח שבטח שמעתם פעם על SPA או Single Page Application. אז MPA זה Multi-Page Application.

2. 00:17

   אנחנו רוצים להבין מה זה, אנחנו רואים שיש לנו פה אפליקציה עם כמה דפים, ו-Single Page Application או SPA זה בעצם אפליקציה שיש לה דף אחד.

3. 00:25

   בואו נתחיל עם מה זה Multi-Page Application. יש לנו Backend. ויש לנו פרונטנד, ובאקנד כמובן יש לנו דטאבייס, בוא נניח שהדטאבייס שלנו מתעסק במוצרים, האתר שלנו בעצם מנגיש מוצרים, אז מן הסתם הדטאבייס מכיל את כל המוצרים, זה ממש בסדר, אולי איזשהו

4. 00:43

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

5. 00:56

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

6. 01:05

   ובוא נניח שאנחנו משתמשים באיזושהי שפה, כל שהיא, בחרתי סתם לצורך הדוגמה, שפת PHP. PHP היא שפה שמאפשרת לבנות דפים בצד של ה-backend, מאפשרת להגדיר דף סטטי, ואני מגדיר פה את ה-HTML של הדף.

7. 01:22

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

8. 01:34

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

9. 01:49

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

10. 02:12

    מה קורה בצד של הפרונט? יש לנו את המשתמש הקצה, End User, בן אדם, יש לו דפדפן, ומה שהוא רוצה להוציא, זה לגלוש בדפדפן לדף הבית, ולקבל את דף הבית.

11. 02:26

    אז מה שהוא מקבל זה פייג'בדפדפן, מציג את דף הבית. אז הוא כותב את הכתובת של דף האבאוט, הצעה של השרת פשוט מחזיר לו דף, שמכיל HTML של דף האבאוט, והדוודפן מציג את זה.

12. 02:40

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

13. 02:53

    פת השרת, במקרה הזה PHP, ופה על יות... כל שפה אחרת יכולה להיות C Sharp, Java, Node.js, C++, Visual Basic, לא משנה איזה שפה, מה שהיא עושה זה ברגע שביקשו את הדף, היא נכנסת לפעולה, ניגשת לדטאבייס, שולפת את הדאטה מהדטאבייס, ובונה את הדף בצורה דינמית, on the fly, בו במקום, ואז

14. 03:22

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

15. 03:39

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

16. 03:56

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

17. 04:12

    מדיה בתוך המחשב אבל כל המשתנים, כל האובייקטים, כל המערכים שיצרתי נעלמים בצד של הפרונט וחיסרון נוסף שמתם לב שהשרת עבד קשה הלך לדטאבייס בנה דף את ה-HTML בצד של ה-backend, כל הבנייה הזאת היא מתבצעת ב-backend, עבור כל אחד מהדפים, ואם יש לי המוני לקוחות שגולשים עכשיו לשרת, אז

18. 04:35

    כל אחד מהם השרת יצטרך לבנות דף יעודי עבורו. אז זאת שיטה שנקראת Multi-Page Application, קצת ישנה, בואו נעבור לשיטת Single-Page Application.

19. 04:46

    יש לנו את ה-backend, ואנחנו רוצים בשיטת Single-Page Application, לבנות בדיוק את אותו הדבר, הנה הדטאבייס עם כל המוצרים שלנו, אבל... אין לנו שלושה דפים, יש לנו דף אחד.

20. 04:56

    הדף הזה נקרא Index HTML. אני כן רוצה שלושה דפים, אני רוצה דף בית, אני רוצה דף אבאוט, אני רוצה דף מוצרים, אבל בשיטת Single Page Application יש לנו דף אחד שנקרא Index HTML.

21. 05:06

    הוא רק מתוכן, איפה דף הבית, איפה דף האבאוט, איפה דף המוצרים. לדף HTML יש אפשרות לחבר JavaScript כמובן. JavaScript מאפשרת לבנות דינמית בצד של ה-frontend, איזה ממשק משתמש שאנחנו רוצים.

22. 05:23

    אז עכשיו יש לנו בצד של השרת גם REST API, והנה ה-REST API נכנס כאן לשימוש, וה-REST API יודע להנגיש דאטה טרור. מה קורה בפרונט?

23. 05:37

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

24. 05:49

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

25. 06:03

    פרום, דף הבית מוצג לו. יוזר עכשיו לוחץ בתפריט על דף About, אין שום צורך לגשת לבשרת ואין לנו גם כל מיני דפים אחרים בשרת.

26. 06:11

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

27. 06:22

    אין לנו פה את המוצרים, המוצרים נמצאים בדדאבייס. ב-JavaScript יש קונספט שנקרא Ajax. Ajax זה קיצור של Asynchronous JavaScript and XML, וזה בעצם היכולת של JavaScript לבצע פנייה ל...

28. 06:33

    איזשהו כתובת שנמצאת בצד של השרת בלי להביא דף שלם בלי לרפרש את הדפדפן אז כאשר היוזר לוחץ על דף המוצרים JavaScript נכנסת לפעולה גולשת ל-REST API REST API פונה לדטאבייס מביא את הדאטה ומחזיר JSON של דאטה טהור כי זה מה ש-REST API עושה, מחזיר JSON JavaScript