דוגמאות לעבודה עם JSON - חלק 1
UIColor. זה מקרה שכיח כשהנתונים מהשרת לא תואמים לטיפוסים של Swift.mock_data.json.Animal שמממש Codable, עם name, scientificName ו-color. בשלב ראשון color הוא String. enum בשם CodingKeys מתקן את השם של השדה המדעי.AnimalDataSource עם פונקציה readDemo. מוצאים את ה-URL ב-bundle, קוראים כ-Data, ובדרך ביניים כדאי להדפיס כמחרוזת (UTF-8) כדי לבדוק. אחר כך משתמשים ב-JSONDecoder להמרה למערך של Animal.UIColor: מייבאים UIKit ומשנים את הטיפוס. מכיוון ש-UIColor אינו Decodable, צריך לממש בעצמך init(from:) ו-encode(to:), כמו בשיעור הקודם.UIColor: extension עם convenience init שמנקה רווחים, מסיר #, מוודא שיש שש ספרות (אחרת fallback ל-init הרגיל), וממיר ל-Int בבסיס 16.UIColor.getRed מקבל מצביעים (טכניקה שמגיעה משפת C) למשתנים שמתמלאים בערכים. מחברים את הבתים עם OR ו-left shift, ומפרמטים עם String(format:) לשש ספרות hex.init(from:): קוראים את הצבע כמחרוזת ומשתמשים ב-init החדש. ב-encode כותבים את ה-hex string של הצבע.00ff00 מציגה ירוק.encode בינתיים (מחרוזת של #) הוא זמני ומתוקן בהמשך.Codable ידנית כשמחלקה קיימת ולא ניתן להפוך אותה ל-struct, למשל כשרוצים אובייקטים שהם גם Core Data וגם Codable. לפי המרצה, חלק מהסטודנטים נשאלו על זה בראיונות עבודה.UIColor.פרקי ההרצאה: דוגמאות לעבודה עם JSON - חלק 1
תמלול ההרצאה: דוגמאות לעבודה עם JSON - חלק 1
הטקסט המלא של הדקות הראשונות בהרצאה «דוגמאות לעבודה עם JSON - חלק 1» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום וברוכים הבאים בסרטונים הקודמים ראינו את העבודה עם הפרוטוקול קודאבל ועבודה עם ג'ייסון והיום אנחנו רוצים להיכנס קצת יותר לדוגמאות ופתרון של מקרים שכיחים בעבודה עם ג'ייסון אנחנו נרצה בעצם עדיין לעבוד עם הפרוטוקול קודאבל אבל פשוט לעבוד על איזה שהם כמה דוגמאות שיעזרו לכם להתמודד עם כל המקרים שאתם עלולים להתעקד
בהם בעבודה עם ג'ייסון טוב לצורך הדוגמה אנחנו נרצה למצוא מקור לג'ייסון ועיתונאי נפרסר ונעבוד אז בואו נפתח רגע דפדפן, ובדפדפן אנחנו רוצים להיכנס לאתר מאוד נחמד שנקרא מוקרו.
מוקרו בעצם נותן לנו ג'ייסון של מוק דאטה. מה זה מוק דאטה? זה מידע לא אמיתי, אבל הוא נראה כמו מידע אמיתי לכל דבר. אז אנחנו בעצם יכולים לבקש מהאתר הזה שימציא עבורי ג'ייסון, שעיתון יוכל להשתמש באפליקציה, בין אם לבדיקות, שזה נהדר לבדיקות, ובין אם זה באמת לאיזשהו ג'נרטור ל-realistic
data. טוב, בואו נתחיל כאן באתר אנחנו רואים שמציעים לנו את השדות הבאים עבור הג'ייסון שלנו בואו נישאר רק עם מה שאנחנו רוצים אני אוריד מפה את ה-ID אני אוריד את האימייל ואת הג'נדר אני אשאר פה עם שלושת אלה כשאני אשנה אותם מעט הראשון נניח שאנחנו רוצים לעשות ג'ייסון של בעלי חיים
אני אקרא לזה name ופה אנחנו נבחר ב-animal name בוא נראה איפה אנחנו יכולים למצוא את זה וואלה יש לנו פה אפשרות ל-animal common name מעולה עכשיו לגבי ה-last name בואו נשנה את זה ל-scientific name ונעשה את זה בכוונה עם אנדרסקור כאן במקום last name יש לנו animal scientific name שזה נהדר והשדה האחרון פה בוא נגיד שאנחנו רוצים
שזה יהיה צבע ואנחנו יכולים לבחור פה באפשרויות בצבעים יש פה צבעים כאלה של red blue black אבל יש פה עוד אפשרות של x colors תכף נמצא הנה כאן עכשיו הדוגמה היום עוסקת דווקא באיך לעבוד עם x colors ולהמיר אותם ל-ui colors אז אנחנו נרצה להתמודד יפה אז הנה כל השדות שלנו יש לנו את האנימל ניים, סינטיפיק ניים, יש לנו את הקולור ועכשיו אנחנו רוצים לקבל מזה
ג'ייסון. אז כאן במקום csv שזה פורמט נפוץ אנחנו נרצה לעבוד עם ג'ייסון, אנחנו נרצה שזה יהיה מוכל ב-ra ואנחנו לא רוצים נאלים במקרה הזה אז הורדתי פה את ה-include null values ובואו נעשה דאונלוד דאטה או אם אתם רוצים אפשר לעשות קודם preview כדי לראות איך זה נראה.
אתם רואים בעצם אני אקבל ג'ייסון שנראה ככה והג'ייסון הוא נורא פשוט חוץ מזה שהקולור פה הוא סטרינג ואנחנו נרצה בהמשך להמיר אותו ל-UiColor, אבל נתחיל בצורה פשוטה.
אוקיי, אז בואו נעשה דאונלוד, ועכשיו בתיקי הדאונלוד שלי יהיה לי קובץ שנקרא mockdata.json, ואותו אנחנו נרצה לקרוא.
זה א'. ב', בואו נייצר פרויקט רגע ב-Xcode, אז נפתח את Xcode, ונייצר לנו פרויקט חדש. אנחנו נקרא לפרויקט שלנו json-demo, ונמקים אותו בתיקי הרגילה שלנו.
מעולה. עכשיו אנחנו נרצה לקחת את הקובץ שהורדנו ולגרור אותו לפרויקט אז בואו נמצא את הקובץ ואנחנו רוצים לגרור אותו לפרויקט אז בואו נעשה את זה אני גורר את זה כאן בסדר מתחת ל-view controller ואנחנו נסמן copy items if needed כי אנחנו רוצים שזה יעתק לפרויקט create groups ו-add to targets כדי שזה גם
יעבור קומפילציה ביחד עם הפרויקט ויהיה חלק מהתוצר טוב אז עכשיו הקובץ נמצא בתוך הפרויקט בואו ניכנס רגע ל-Xcode ונסתכל פה על ה-JSON זה הג'ייסון שיש לי אוקיי עכשיו בשלב הבא אנחנו רוצים הרי לעשות סריאליזציה ודה סריאליזציה של אובייקטים אז בואו נייצר לנו קלאס של או סטראקט יותר נכון של אנימל עבורה בעלי חיים שלנו פיקטיביים ונעשה פה נקסט סוויפט פייל
נקרא לזה אנימל נקודה סוויפט מצוין עכשיו פה בקובץ שנוצר בואו נתחיל לעבוד ונייצר לעצמנו בעצם סטראקט של אנימל ובתור התחלה בואו נעבוד עם השדות הפשוטים אז נעשה let name מסוג סטרינג נעשה גם let scientific name מסוג String ואנחנו גם נרצה לעשות את ה-Color וכרגע אנחנו נשאיר את זה בתור
String גם כן, אוקיי? זאת אומרת, אנחנו בהתחלה לא נתמודד עם ה-UI-Color ואחר כך נראה מה הבעיה בכלל עם ההתמודדות ואיך פותרים אותה.
מה שכן, יש לנו את השמות שהם לא בדיוק אותו דבר ב-JSON לעומת הקובץ Swiftfile שלנו, אז בואו נגיד, אנחנו רוצים לשנות את השמות ולממש את הפרוטוקול Codable.
אז קודם כל כדי לממש את Codable, נרשום פשוט שאנחנו מממשים Codable, ואם אנחנו רוצים לשנות שמות אז אתם זוכרים מהשיעור הקודם אנחנו מייצרים אינאם שאנחנו קוראים לו בדיוק בדיוק coding keys האינאם הזה יש לו raw value של סטרינג והוא גם מממש את הפרוטוקול coding key ופה אנחנו כוללים קייסים עבור כל השמות שלנו אוקיי אז יש לנו קייס אחד של name וcolor שבהם
אנחנו לא נוגעים כי הם אותו דבר בג'ייסון ויש לנו גם קייס אחר שבו אנחנו כן רוצים לגעת שזה זה זה בעצם הscientific name ובג'ייסון קוראים לזה, תכף נראה בדיוק, סיינטיפיק ניימים אנדרסקור, וגם פה ככה כתבנו את זה עם איפול, לא נורא.
אוקיי, אז בוא נשים את זה פה, ועכשיו בסטראקט אנחנו רואים את זה מצוין. אוקיי, אז כרגע אני עדיין מממש קודאבל ובצורה נהדרת, עדיין לא נכנסנו פה לעובי הקורה עם להמיר את ה-UI קולור לסטרינג, בואו נעשה לנו פה תודו, שאת זה אנחנו נרצה לעשות בהמשך, אנחנו נעשה איזשהו Deep Dive ככה ונראה איך
פותרים את הבעיה הזאת עם UI Color אוקיי אז את זה עשינו מצוין עכשיו כדי לקרוא את הקובץ הזה בואו נייצר לעצמנו Data Source כי לרוב אתם לא תעבדו ישר מה-View Controller עם ה-JSON אתם תרצו איזשהו מתווך באמצע אז אנחנו מייצרים קובץ נוסף אחרון לפרויקט New File Swift File בואו נקרא לזה Animal Data Source אז Animal Data Source ובואו נעשה
Create פה ב-Animal Data Source אנחנו נשאיר את הדברים פשוטים בינתיים ופשוט נגדיר פונקציה read demo ובתוך הפונקציה הזאת אנחנו בעצם רוצים לקרוא את ה-JSON בסדר?
אז יהיה לנו read the JSON file ובואו נעשה את זה בשביל לקרוא את הקובץ אנחנו צריכים נתיב לקובץ אז בואו נמצא את ה-URL לקובץ אחרת אין לנו מה להמשיך אז בואו נעשה guard let url שווה ל-bundle main.url for resource עכשיו ל-resource שלנו קוראים בדיוק בדיוק mock underscore data וה-extension שלו היא JSON אוקיי עכשיו אם היה לי את ה-URL הזה אין לנו מה להמשיך
אז אנחנו עושים אלס ריטרן ואנחנו יודעים בוודאות שיהיה לנו פה את ה-URL, אז הכל אמור להיות מצוין בשלב הזה. שורה קצת ארוכה מדי, אז בואו נעשה פה אנטר.
יפה, אז הנה ה-URL. עכשיו, once יש לנו את ה-URL אנחנו נרצה בעצם לקרוא אותו כדאטה, אוקיי? אז זה לא בעיה לעשות, בואו נעשה את זה.
בואו נעשה פה let data וגם את זה אנחנו נעשה ב-garb. אנחנו מנסים לקרוא את הקובץ, אז בואו נעשה פה טריי ואנחנו רוצים למצוא דאטה מהקונטנט של ה-URL הזה, אז אין בעיה, יש לנו בנאי מתאים למחלקה דאטה שבדיוק יודע לעשות את זה.
אנחנו הולכים פה על Contents of URL, ושוב פעם, Else Return. אז הדאטה הזה זה בעצם קראנו את הקובץ בצורה בינארית, אוקיי? הטיפוס של זה זה דאטה. נהדר.
Once יש לנו את הדאטה, אנחנו רוצים לעשות איזושהי די-סריאליזציה, נכון? די-סריאליז או סוויפט אובג'קטס, אוקיי? טוב, כדי לעשות את הדי-סריאליזציה בואו קודם כל נבדוק שהכל עובד, אוקיי?
לפני שאנחנו עושים דה סריאליזציה בואו פשוט נמיר את זה לסטרינג. אני אעשה דבר כזה, אנחנו נגיד אפשר ככה ישר לעשות את זה פה, בואו נגיד guard let str, ננסה לקרוא את זה קודם כל כג'ייסון, כסטרינג, אז אני אעשה טריינג ואנחנו רוצים לייצר סטרינג מקונטנטסב url שזה גם כן בלילי, מה?
ואני נותן לו את הurl שלי, אנחנו גם ניתן לו פה אנקודינג של utf-8 כדי ככה להגיד לו באיזה סט תבים להשתמש ואחרת זה החוצה, גם השורה הזאת היא קצת ארוכה מדי, אז בואו נשבור אותה פה.
בשלב הזה אתם יכולים להדפיס את הסטרינג שלכם, אוקיי? וזה ככה כדאי לעשות. אז מפה זה בעצם מדפיס לי את הסטרינג, בואו נראה אותו בעין. בואו נלך רגע ל-view controller, נדפיס את הסטרינג, נראה שאנחנו בינתיים מצליחים לקרוא את הג'ייסון.
אז בואו פשוט נקרא ל-read demo. read demo, ונריץ את זה. טוב, בואו נראה. אני אפתח פה את הקונסול, והנה הקריאה. אוקיי, אז הצלחנו לקרוא את הקובץ, אמנם קראנו אותו כסטרינג, אבל צעד צעד, נכון? צריך לעשות כל פעם צעד קטן.
טוב, אז בדאטה סורס ראינו שאנחנו יכולים ככה לקרוא את הכל כסטרינג, וזה נהדר, זה כלי שימושי, זאת אומרת, אל תמשיכו הלאה בלי שבדקתם את עצמכם.
נשים את זה אבל בהערה, כי אנחנו לא צריכים את הסטרינג, אנחנו רוצים לעבור לשלב הזה של הדה-סריאליזציה עכשיו. בשביל לעשות את הדה סריאליזציה אנחנו משתמשים בדקודר שמוכר לנו כבר אז let decoder שווה json decoder חדש יש לנו את הדקודר ועכשיו אנחנו ננסה להמיר אותו לאנימלס את הדאטה שלנו אז בואו נעשה guard let
אנימלס שווה למה שווה לטרי ואנחנו נבקש מהדקודר שלנו שימיר לנו את הדאטה לאובייקטים שלנו עכשיו האובייקטים שלנו זה מערך של אנימלס שימו אז פה אנחנו ניתן מערך ואנימן ואת הטיפוס של זה. אז איך אנחנו מגיעים לטיפוס? נקודה סלף, נכון? זה נותן לי את האנימן נקודת טייפ, את האנימן הרי נקודת טייפ. מעולה.
ואז אני נותן לו פה את הדאטה ואחרת ריטרן, ובשלב הזה אנחנו כבר יכולים ללכת ולהדפיס את האנימן שלנו. בואו נריץ שוב. הפעם אני מצפה לראות הדפסה של האובייקטים שלנו כבר אחרי שעשינו להם דה סריאליזציה.
בואו נראה. פנטסטי. אוקיי? כלומר, מחקתי את ההדפסה של הסטרינג, כרגע אנחנו רואים את ההדפסה של האובייקטים כבר, וכדי לראות את ההבדל, אז כאן כתוב json demo animal ובפנים יש את כל התוכן.
נהדר. עד כאן פשוט ראינו דוגמה פשוטה של קריאת ג'ייסון. ברגע שהג'ייסון והדאטה שלכם אותו דבר, זה מאוד מאוד פשוט ומאוד קל.
בואו נחזור אבל ל-animal.swift וננסה לעמוד בדרישה חדשה. החלטנו שאנחנו רוצים שהColor פה הוא יהיה UIColor, כי ככה זה בסוויפט, נכון? אנחנו לא עובדים עם XColors ביומיום.
אז החלטנו לעשות פה שזה יהיה UIColor, ובשביל זה אנחנו צריכים אימפורט ל-UICit גם. אז זה לא בעיה, נכון? אבל יש פה בעיה אחרת. הבעיה היא שלצערכם UIColor לא מממש את הפרוטוקול Decodable, ואי אפשר ככה לסיים פה את העבודה.
אנחנו מקבלים סטרינג מהג'ייסון, ואנחנו צריכים איכשהו להמיר אותו ל-UIColor. בשביל לעשות את זה, אנחנו צריכים לחזור לדוקומנטציה ולהיזכר איך מממשים לבד את הפרוטוקולים קודאבל ודיקודאבל בסדר אין קודאבל ודיקודאבל בואו נסתכל רגע בדוקומנטציה אז אנחנו זוכרים קודאבל סוויפט לא נורא אם אני כותב בעברית אז גוגל יבין אותי ובפרוטוקול
כאן בואו ניזכר יש לנו את האנקודינג אנד דיקודינג קאסטון טייפס ופרסט סטפס וכאן אוטומטיקלי עשינו נכון זאת אומרת הג'ייסון דומה לאובייקטים אז הכל טוב אבל אחר כך יש לנו גם את האפשרות לעשות Manually Encoding ו-Decoding ופה אנחנו צריכים להיכנס.
כדי לעשות את ה-Encoding וה-Decoding Manually זה בעצם אומר שאנחנו נצטרך Init From Decoder ואנחנו נצטרך מתודה של Encode to Encoder.
אז בואו נקפוץ פנימה ונעשה את זה. עשינו את זה בשיעור שעבר נכון עם הדוגמה של ה-Name אבל עכשיו אנחנו בדוגמה אמיתית אז בואו ננסה לעשות את זה גם פה אצלנו. במילים אחרות כמו שאמרתי אנחנו צריכים להוסיף את החלקים החסרים אז בואו נוסיף init אוקיי והinit הזה נקרא init from decoder והטיפוס שלו הוא decoder והמטרה הזאת עלולה לזרוק שגיאה אז אנחנו מאתרים אותה בדרוז ופה
בinit אנחנו בעצם נצטרך לעבוד עם הקונטיינר הזה כמו בפעם שעברה אז בואו נעשה let values שווה try ואנחנו נבקש מהדיקודר שלנו שייתן לנו קונטיינר kidby הקודינג כיס שלנו אז coding keys נקודה self אוקיי זה הקונטיינר עכשיו מתוך הקונטיינר אנחנו נרצה לקחת את הדברים שלנו אז self
נקודה name שווה try ומתוך הקונטיינר אז קוראים לו container values values נקודה decode בואו נגיד string נקודה self זה הטיפוס של הname לפחות והcoding keys שלו זה name באותו אופן בואו נעשה גם את החלק של הscientific name אוקיי אז self נקודה scientific name שווה גם כן string ושוב פעם אנחנו לוקחים מהcoding קיס הפעם את ה-scientific name מצוין לגבי
הקולור אבל אנחנו לא יודעים עדיין לעשות את זה ואנחנו מייצרים כרגע סתם קוד שככה זמני בינתיים עד שנממש פה את