ביצוע HTTP Request ב-Flutter

תמלול ההרצאה: ביצוע HTTP Request ב-Flutter

הטקסט המלא של הדקות הראשונות בהרצאה «ביצוע HTTP Request ב-Flutter» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:12

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

3. 00:27

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

4. 00:36

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

5. 00:50

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

6. 01:25

   זו שורה הראשונה שרצה ב doWork אני אעתיק את הכל הזה ארד כמה שורות וכאן תהיה doWork last line בואו נריץ רגע את הפרויקט אני רוצה כשכפתור יהיה באמצע אז אני רק אגדיר כאן בקולור Main Access Alignment Main Access Alignment Center מעולה ועכשיו כשאני אלחץ על הכפתור יש לי Do Work First Time

7. 01:51

   ו-Do Work Last Time עד כאן אין שום חידוש עכשיו אני רוצה באמצע לקבל לדוגמה את השעה מהאינטרנט יש איזשהו API חיצוני שמחזיר לי את השעה אז בואו נבנה פונקציה שנקראת Get Time From Server עכשיו כדי לפנות לשרת אני צריך להשתמש בספרייה מסוימת שנקראת HTTP. הספרייה הזאת מאפשרת לי לבצע קריאות החוצה.

8. 02:16

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

9. 02:34

   אז קודם כל נבצע import package HTTP/http.dart ויש לי גם אפשרות לתת שם לאימפורט הזה. אני ארשום as HTTP. וזה אומר שבקוד אני אני אוכל לגשת לספרייה הזאתי דרך המילה HTTP. בדיוק ככה, HTTP.get, אוקיי?

10. 02:55

    אני הולך לבצע קריאת get לשרת. הכתובת של השירות הזה תהיה HTTPs.2/remounts.online/api/time ואני כמובן מחזיר את התוצאה ונקרא לפונקציה מכאן כבר time שווה get time from server ונדפיס את הtime אז בואו נראה מה יש לנו כאן נריץ את הקוד נעבור לrun כמובן נלחץ על click me ואוקיי do work first line instance of future מה זה הfuture הזה

11. 03:42

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

12. 03:58

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

13. 04:23

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

14. 04:36

    במקביל אני רוצה גם להדפיס כאן do work middle line רק כדי להנחיש את השתלשלות האירועים אני גם אבדל את הקריאה של הפרינט הזה ובואו נריץ אוקיי שימו לב מה קרה כאן do work first line do work last line ורק לאחר מכן do work middle line וזה בדיוק מנחיש את התכנות האסינכרונית למרות

15. 05:04

    שהקוד כתוב בצורה מסוימת first line ואז midline ורק אז last line ובכל זאת רק בצורה סינכרונית ורק לאחר סיום הפעילות הוא הדפיס את ה-midline כמו כן אפשר לראות שהדפסנו את הזמן שהגיע מהשרת אז אפשר לוותר כאן גם על העבר time שווה בגלל שאנחנו מקבלים את הערך כאן בתוכו ריספונס איפשהו בעתיד עכשיו מה קורה