הסבר על Stream ב-Flutter

תמלול ההרצאה: הסבר על Stream ב-Flutter

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

1. 00:02

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

2. 00:18

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

3. 00:32

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

4. 00:43

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

5. 00:59

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

6. 01:08

   אחרי 10 פעמים הסטרים פשוט ייפסק. אז נתחיל מבנייה של מסך חדש, נקרא לו Trim Page, כאן תהיה מחלקה, פה בעצם נשתמש בקיצור stfull Trim Page, נרצה אימפורט סליחה, נרצה אימפורט material ובנוסף נגיד למיינד שלנו שבמקום להפעיל את ה-users list page נפעיל את ה-stream page אז עכשיו יש לנו מסך ריק שלא עושה שום דבר

7. 01:53

   ובואו נבנה את ה-stream generator שלנו אז נגיע למודל כאן נייצר קובץ דארד חדש נקרא לו random generator וכאן נבנה מחלקת או אמת random generator אוקיי עכשיו מה אנחנו צריכים לעשות אנחנו צריכים להשתמש באובייקט שנקרא stream קונטרולר באמצעות stream controller אנחנו

8. 02:20

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

9. 02:52

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

10. 03:17

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

11. 03:39

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

12. 04:05

    אנחנו רואים שצריך להוסיף אימפורט אז נשתמש בקיצור Alt-Enter ונעשה אימפורט ל-dart. 200 אז random, נקודה, נקסט אינט בואו נגריל מספר מ-0 עד 1000 אוקיי?

13. 04:20

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

14. 04:44

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

15. 05:03

    בואו נשמור את הקאונטר שלנו כמה פעמים וכבר הגררנו משתנה חדש. אז יהיה כאן int counter שווה 0 וכאן נקדם את הקאונטר שלנו אז counter++ ו-if counter גדול מ-10 אנחנו רוצים שתי דברים.

16. 05:23

    אחד להפסיק את הקונטרולר, ctrl.sync.close מפסיקים את הזרם וגם להפסיק את הטיימר שלנו כדי שלא יפסיק לרוץ אז טיימר שקיבלנו אותו כאן כפרמטר, טיימר.cancel.

17. 05:41

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

18. 06:05

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

19. 06:21

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

20. 06:40

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

21. 07:00

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

22. 07:17

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

23. 07:24

    אז השאלה היא האם יש לי פונקציה שאני יודע שתרוץ רק פעם אחת בטעינה של העמוד הזה? והתשובה היא כן. לפונקציה הזאת קוראים init state, והיא נמצאת בכל stateful widget.

24. 07:35

    אז נרשום init state, אוקיי? והפונקציה הזאת למעשה תרוץ בפעם הראשונה שהווידג'ט הזה נטען.

25. 07:42

    וכאן אנחנו יכולים לייצר מופע חדש של random generator ולהזין לסטרים. ככה random generator נקודה stream אתם זוכרים זה בעצם הגטר שבנינו ועכשיו נקודה listen ה-listen הזה מקבל כפרמטר פונקציה שנותנת לנו בכל פעם את הערך האינטג'רי את המספר החדש שיתעדכן אז בואו נגדיר כאן בתוך ה-listen פונקציה אפשר לפה לפרמטר הזה number אוקיי וזהו אז

26. 08:11

    סליחה אז עכשיו בכל פעם שהוגדר על ידי ה-random generator מספר חדש תרוץ הפונקציה הפנימית האנונימית הזאת ותיתן לנו את המספר החדש שנקרא number בואו נדפיס אותו print number ובואו נריץ את האפליקציה עכשיו.

27. 08:30

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

28. 08:47

    נוכל גם להזין לפעולה הזאת. בדומה לפיוטר נוכל להזין למצבים של ההזרמה שלנו. לדוגמה אם ננחק את הנקודה פסיק ונרשום כאן נקודה onDone נוכל לקבל פונקציה שתרוץ ברגע שההזרמה הפסיקה בואו נהפוך את זה לפונקציית חץ ונדפיס כאן print streaming is finished אריץ שוב שימי לב שההרצאה לא קורית בגלל שכמו

29. 09:17

    שאמרתי ה-init state קורה פעם אחת ברגע שהמסך הזה עולה אבל פלאטר בא לחסוך לנו והיא לא תריץ את הפונקציה init state כל פעם בגלל שבדרך כלל אנחנו מתחילים כאן משתנים ופלאטר רוצה לשמור על ה-state שלנו אז אנחנו נעצור ונריץ שוב את הפרויקט אוקיי המסך עלה בוא נחכה לסיום של הטעינה אוקיי streaming is

30. 09:47

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

31. 10:10

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

32. 10:35

    ונגדיר משתנה מחלקה שהוא בעצם יהיה הסטרים שלנו אז סטרים מסוג int נקרא לו random generator שווה זה למופע חדש של random generator נקודה stream אז עכשיו ה-stream נמצא כאן כמשתנה ונוכל לספק אותו ל-stream builder אז ה-stream יהיה שווה ל-random סליחה שווה ל-random generator שלנו ועכשיו נשאר רק לממש את

33. 11:08

    ה-builder אני רק אשים נקודה פסיק לפני שאני אשכח ועכשיו ככה בכל זמן נתון אנחנו יכולים לדעת האם יש מידע או אין מידע ואיך עושים את זה snapshot נקודה has data בדיוק כמו ב-future builder אז אם אין data if not snapshot.hasdata נוכל להחזיר כאן איזשהו טקסט שאומר עדיין אין מידע אז בואו נחזיר כאן

34. 11:35

    container שה-child שלו יהיה איזשהו center ולא יהיה ילד שפשוט יהיה טקסט שאומר no info yet עדיין אין מידע אבל אם אנחנו הגענו לשורה הזאת סימן שיש מידע בסנפשוט וכנראה שהמידע הזה הוא פשוט יהיה מספר אז בואו פשוט נדפיס את המספר הזה אז אני יכול להעתיק כאן את ה-return הזה יהיה כאן return container עם center באמצע

35. 12:08

    והטקסט יהיה במקום no info yet פשוט יהיה המספר עצמו. אז איך ניגשים לדאטה של הסטרינג? פשוט snapshot.data שימו לב שהדאטה הזה הוא בעצם dynamic אבל השפה dart תדע לבד להמיר אותו למה השתנה נכון רק כמובן צריך לעשות to string כי טקסט מקבל סטרינג כפרמטר בואו נריץ את הפרויקט שוב אוקיי אפשר לראות שבהתחלה הבהב שם לרגע no info

36. 12:33

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

37. 13:00

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

38. 13:14

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