Future Builder
פרקי ההרצאה: Future Builder
תמלול ההרצאה: Future Builder
הטקסט המלא של הדקות הראשונות בהרצאה «Future Builder» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אחרי שהכרנו את הפיוצ'ר אני רוצה שנכיר וויג'ט חדש שנקרא פיוצ'ר בילדר. אז כמו שהבנו פיוצ'ר תמיד יהיה באחד משלושת המצבים הבאים או שהוא בטעינה או שהוא יסתיים בהצלחה ואז הוא מפעיל את הכל ב-then או שהוא יסתיים בכישלון ואז הוא מפעיל את הכל ב-catch error.
בסלבון הזה אני רוצה לפנות לשרת דמה שיחזיר לנו רשימה קבועה של משתמשים ובאמצעות פיוצ'ר בילדר אנחנו נציג חיווי לטעינה בזמן שהמשתמשים ניתנים ונציג את רשימת המשתמשים עצמה מיד בסיום התהינה.
אז בואו נעבור לאתר jsonplaysolder בכתובת jsonplaysolder.typecode.com fake-online-rest API for Testing and Prototyping מעולה.
אם נרד קצת למטה נראה את ה-resources את כל המקורות שיכול לספק לנו האתר. אז יש כאן פוסט קומנטס אלבומס פוטוס טודו ויוזרס. אנחנו נשתמש ביוזרס.
בואו נפתח את היוזרס בכרטיסייה נפרדת רק כדי לראות מה נקבל. וכאן יש לנו רשימה של משתמשים שמיוצגת באמצעות JSON array.
אז בואו נראה מה מכיל כל יוזר ID, Name, Username, E-Mail, Address כאובייקט פנימי, נמזה אותו, Phone, Website ועוד אובייקט שנקרא Company.
אז אנחנו בעצם נבנה מחלקה מותאמת, אנחנו לא נשתמש בכל השדות, נשתמש רק באולי ID, Name, Username ו-E-Mail ואותם נציג אצלנו בפרויקט.
אז בואו נחזור לפרויקט, נגיע לתיקי המודל ונוסיף קובץ דארט חדש, זה יהיה user. נבנה class user והשדות שלנו יהיו int id, string name, string username ו-string email.
נבנה גם קונסטרקטור, בהמשך אנחנו נוסיף גם named constructor כמו שלמדנו מהקדמה, אנחנו נעשה את זה ממש תכף. אז בואו נוסיף עכשיו מסע חדש ונקרא לו users list page, new dart file, users list page זה יהיה st full זאת אומרת stateful widget ונקרא לו users list page import material מעולה וכמו
תמיד נחזיר כאן scaffold ו-body נחזיר הפעם future builder נשים כאן נקודה פסיק ועכשיו כמו שאמרנו future builder מקבל איזשהו future אבל עדיין לא בנינו כזה עזבו רק לצורך המחשה נבנה כאן איזשהו פונקציה דמה שמדמה פיוצ'ר, והיא סך הכל תעקב אותנו לדוגמה למשך 3 שניות.
אז נבנה פונקציה שמחזירה פיוצ'ר מסוג void, ונקרא לו testFuture והפונקציה תחזיר future.pa future.delayed ומשך הזמן של העיכוב יהיה מופע חדש של המחלקה Duration עם 3 שניות.
אוקיי? אז יש לנו בעצם למעשה כאן פונקציה שנקראת testFuture והיא מחזירה מופע של future שבעצם מסתיים לאחר 3 שניות. אז לשדה future בפיוטר בילדר שלנו ניתן test future אוקיי ועכשיו כדי שהפיוטר בילדר ידע מה להציג בכל זמן אנחנו נערוך את השדה בילדר וכמו שאפשר לראות שהבילדר הוא בעצם פאנקשן שמקבלת שתי פרמטרים
בילדר קונטקסט והסינק סנאפ שוט ווייד בואו נראה אז בבילדר נבנה כאן פונקציה שמקבלת קודם כל קונטקסט וסנאפ שוט ועכשיו נסביר מה זה אז אז את הקונטקסט אנחנו כבר מכירים ו-snapshot הוא למעשה ערך שמייצג את ה-future בכל מצב.
זה יכול להיות עוד לפני שה-future סיים את העבודה שלו וזה יכול להיות אחרי שהוא סיים את העבודה עם הצלחה או עם כישלון. אז איך אנחנו יודעים אם ה-future סיים את העבודה שלו או לא?
פשוט מאוד if snapshot.hasdata זאת אומרת יש לו כבר מידע הוא סיים את העבודה עם כישלון או עם הצלחה אגב אחרת אנחנו יודעים שה-future עדיין לא סיים את העבודה שלו.
במקרה שהוא עדיין לא סיים את העבודה אנחנו נבחר להחזיר כאן למשל איזשהו קונטיינר לתוכו יהיה ה-child שלו יהיה center וכאן יהיה לנו איזשהו טקסט שרושם לואודינג זאת אומרת אני עדיין לטעינה אני עדיין טוען את רשימת המשתמשים במקרה שלה לקונטיינר ניתן כמובן איזשהו צבע רקע אדום סתם שיהיה בולט ואם יש כבר מידע זאת אומרת הפיוצ'ר סיים את העבודה שלו אנחנו נחזיר כאן גם קונטיינר בדיוק אותו דבר רק שנרשום כאן
במקום לואודינג פינישט והרקע יהיה עכשיו בואו נגדיר את העמוד Users List Page כעמוד הדיפולטיבי שלנו במיין ונריץ את הפרויקט.
אז במקום להחזיר טסט פייג' נחזיר Users List Page, נבצע אימפורט ונריץ. אוקיי, אז אפשר לראות שיש לנו כאן את העמוד דהינה אבל משום מה הפיוצ'ר עדיין לא מסיים את העבודה שלו ואנחנו לא רואים את הלייבל finished.
בואו ננסה להבין למה זה קורה. אז אם נסתכל בקוד שלנו בפונקציה טסט פיוצ'ר אנחנו נראה שהפיוצ'ר שלנו הוא למעשה לא מחזיר שום דבר.
זאת אומרת הפונקציה מחזירה פיוצ'ר אבל הפיוצ'ר לא מחזיר שום דבר ולכן snapshot.hezdata אף פעם לא מתקיים בגלל שאין לו באמת דאטה ולכן אנחנו נוסיף כאן פרמטר שייצג איזושהי פונקציית חץ שסתם תחזיר איזשהו ערך זה לא משנה אנחנו נחזיר
כאן טסט אף אחד לא הולך להשתמש בזה אבל עכשיו אם נריץ את הקוד שלנו נראה לואודינג ועכשיו ההסט דאטה כן יעבוד בגלל שחזר לנו איזשהו ערך מהפיוצ'ר שבסופו של דבר חזר עם הפונקציה בפיוצ'ר האמיתי שתכף נבנה אנחנו נפנה לשרת נקבל את רשימת המשתמשים ואותם נחזיר מהפונקציה אז עכשיו אנחנו נבנה פיוצ'ר חדש
פיוצ'ר שבמקום להחזיר ווייד הוא החזיר רשימה של יוזרים אז יש לנו כאן פיוצ'ר שמחזיר ליסט של יוזר נקרא לו get users נעשה import לuser אוקיי ועכשיו אנחנו צריכים לפנות לשרת כדי לקבל את רשימת היוזרים אז קודם כל נוודא שהוספנו את הספרייה htp בקובץ pubspec.yaml הנה יש לנו זה כאן htp ועכשיו נוכל לפנות לשרת אז נגדיר var response שווה htp.get והכתובת
של השרת תהיה https.times.slash json.place.holder.typecode.com ואנחנו פונים ל-users. עכשיו אנחנו צריכים לבצע אימפורט ל-HTTP אז ניגש למעלה ונרשום import HTTP as HTTP אוקיי אז עשינו אימפורט לספרי ה-HTTP והגדרנו על אימפורט שם HTTP כדי שנוכל לפנות אליו דרך השם HTTP אוקיי
אז אז htp.get פנינו לכתובת של הפונקציה שלנו בשרת אבל אנחנו רוצים להמתין עד לסיום הפעולה אז נגדיר כאן await וכדי שנוכל להשתמש ב-await הפונקציה חייבת להיות אסינכרונית אז נגדיר כאן ac ועכשיו הכל בסדר.
אז מיד בשורה הבאה התוכן של הקריאה לשרת נמצא לנו בתוך ה-response וכדי לגשת את התוצאה עצמה אנחנו ניגש ל-response.body אבל שימו לב ש-response.body הוא בעצם סטרינג סטרינג לא מעניין אותנו אנחנו רוצים רשימה של משהו אז המשהו הזה יהיה דיינמיק אנחנו נהפוך את
הסטרינג שלנו לרשימה של דיינמיק דיינמיק הוא כמו אובג'קט בשפות אחרות עכשיו כדי לבצע את ההמרה בין סטרינג לדיינמיק נשתמש במחלקה שנקראת json decoder אוקיי אז נגדיר כאן ליסט של דיינמיק נקרא לזה לדוגמה json list אוקיי וזה יהיה שווה ל-json decoder מופע חדש נבצע אימפורט מ-dart
convert ועכשיו יש לנו json decoder ונשתמש בפונקציה convert ושימו לב שהוא מקבל input כסטרינג אז אנחנו ניתן לו את response נקודה body אוקיי אז בנקודה הזאת יש לנו בעצם רשימה של dynamic שנקראת json list והיא מייצגת את כל האיברים שקיבלנו ברשימה מהשרט אבל רשימה של dynamic לא עוזרת לנו כי הפונקציה שלנו צריכה להחזיר רשימה של אובייקטים מסוג user
אז עכשיו נוכל לחזור למחלקה user וכאן אנחנו נבנה עכשיו named constructor קונסטרקטור חדש שמקבל מפה map ומייצר לנו באמצעות אותו map מופע חדש של user והמימוש הוא כזה user נקודה שם הפונקציה תהיה לדוגמא from json הפונקציה תקבל map מסטרינג לדיינמיק נקרא לזה json אנחנו מגדירים קונסטרקטור חדש במחלקה user זה נקרא named constructor כי יש לו שם שונה
והוא מקבל כפרמטר מפה של סטרינג ודיינמיק המפה הזאת בעצם זה בדיוק מה שיגיע מהשרט אנחנו אמרנו את הסטרינג שחזר מהשרת לרשימה של דיינמיק וכל איבר כזה אנחנו נשלח לפונקציה הזאתי שיתקבל בתור מפ של סטרינג ודיינמיק בגלל שלכל ג'ייסון יש קי