פרוייקט מסכם ב-Xcode
register.top-headlines לכתבות הראשיות ו-everything לחיפוש. בכל קריאה נדרש API key, ובכתבות הראשיות חייבים לשלוח לפחות פרמטר אחד, למשל country.fetchArticles מקבלת endpoint, מילון פרמטרים וקולבק. בונים URLComponents, מוסיפים את ה-endpoint ואת ה-API key, ומפה מילון ל-URLQueryItem בעזרת map.URLSession.shared.dataTask ואחר כך resume. התשובה חוזרת דרך DispatchQueue.main.async כי URLSession עובד ב-thread משני. הקולבק מסומן @escaping, והפענוח נעשה עם JSONDecoder בתוך do/catch.reloadData. הקלוז'ר משתמש ב-weak self כדי לא להחזיק reference חזק ל-View Controller. את מילוי התא מעבירים למתודה populate בתוך קלאס התא.beginUpdates ו-endUpdates.NSLinguisticTagger כדי לזהות את שפת הטקסט. עברית וערבית מיושרות לימין, שאר השפות לשמאל.everything עם מילת החיפוש. ה-Search Bar הופך ל-first responder כדי שאפשר יהיה להקליד מיד.didSelectRowAt מבטלים את הבחירה ופותחים את כתובת הכתבה ב-SFSafariViewController, אחרי import SafariServices.cd.sudo gem install cocoapods.pod init יוצר קובץ Podfile, ופותחים אותו עם open -a xcode Podfile.Pods for.pod install מוריד את הספרייה. אחר כך סוגרים את Xcode ופותחים את קובץ ה-xcworkspace ולא את ה-xcodeproj.pod install.urlToImage.פרקי ההרצאה: פרוייקט מסכם ב-Xcode
תמלול ההרצאה: פרוייקט מסכם ב-Xcode
הטקסט המלא של הדקות הראשונות בהרצאה «פרוייקט מסכם ב-Xcode» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום וברוכים הבאים, אנחנו רוצים לעבוד על פרויקט מסכם שיכלול את כל החומר שעשינו עד עכשיו ובנוסף אנחנו נרצה לעשות היכרות עם פיצ'רים נוספים.
לפני שנתחיל ברור קודם כל נראה איך נראה הפרויקט, אז אני אריץ פה את הפרויקט ואתם יכולים לראות שבהתחלה יש לנו איזושהי טעינה, אחר כך סימון שהטעינה הסתיימה ולבסוף אנחנו יכולים לראות פה טייבל ויו שמציג את התוצאות של במקרה הזה חדשות ששלפנו מניוז ה-API.
אם אני אגלול פה קצת למטה אז אנחנו נוכל לראות שיש תאים שעדיין בעצם כבר כל התאים נטענו אבל אתם יכולים לראות את כל התוצאות בנוסף יש לנו פה למטה מה שנקרא תאבר קונטרולר שאותו אנחנו רוצים להכיר היום ובנוסף לתאבר שתאבר מאפשר לי להחליף בין תאבים אנחנו רוצים גם ללמוד לעשות חיפוש היום אוקיי חיפוש למשל אני אכתוב פה איזושהי מילת חיפוש ואני אקיש
על הכפתור search ואז אנחנו ניחשף פה לדברים שחיפשנו למידע שחיפשנו אוקיי אז יש לנו דברים שאנחנו רוצים להכיר, זה ה-Tab Bar הזה, בנוסף יש לנו את ה-Search Bar, וחוץ מזה אנחנו רוצים גם להכיר את ה-API שאיתו עבדנו, נכון? ה-API הזה נקרא News API, ובמקרה הזה השתמשתי בכמה Endpoints ב-API,
בכמה כתובות של ה-API, אחת בשביל לקבל את החדשות ונתיב אחר בשביל לבצע את החיפוש, ויש ב-API הזה ככה כמה נקודות שאפשר להיכנס אליהן ולקבל מידע.
אוקיי, יתר הדברים זה שאנחנו נרצה לעבוד עם ספריות חיצוניות, כמו שראיתם בהתחלה כשהרצתי את הפרויקט, ראינו איזשהו פרוגרס בר נחמד, אז אותו אנחנו נשלוף מספרייה שנקראת pkhood, ובנוסף אנחנו נרצה לטעון את התמונות בצורה יעילה מאוד על ידי שימוש בספרייה שנקראת sd-web-image.
עוד דבר קטן שהכנתי לנו זה שאם אני לוחץ פה על אחד מהאייטמים, אז אנחנו יכולים לראות את התוצאה בדפדפן, אז פתיחת קישורים בדפדפן. כמו כן זה פרויקט מסכם לכל מה שעשינו עד עכשיו, וגם עבודה בארכיטקטורת mvc יופי אתם מתרגשים גם אני בואו נתחיל באקס קוד אז אנחנו נקפוץ לאקס קוד אנחנו נרצה לייצר לנו
פרויקט חדש לשיעור פרויקט הזה הפעם לא יהיה סינגל ואופליקיישן אלא אנחנו רוצים לעשות אפליקציה עם טאבים זה הטאבר קונטרולר אז בואו נכיר אותו נקרא לאפליקציה שלנו ניוז אפ וניכנס פנימה יופי עכשיו כמובן שאנחנו נרצה לפתוח את האקס קוד במסך מלא ועכשיו באקס קוד בואו נתחיל לראות איזה צעדים אנחנו רוצים לעשות קודם דבר ראשון בואו נסתכל על המבנה של הטאבה
אז אם אתם יכולים להסתכל בסטורי בורד במיין סטורי בורד יש לנו פה כבר איזשהו מבנה בסיסי שבו יש לי טאבר קונטרולר ושני view קונטרולרים שמחוברים אליו עכשיו איך הם מחוברים אליו נניח שהייתי בא ומוסיף פה view קונטרולר שלישי אל תעשו את זה כי אנחנו תכף נמחק אותו אני רק רוצה להדגים פה נקודה וגם אותו הייתי רוצה להציג כטאב אז כל מה שהייתי צריך לעשות
זה לגרור סגווי מהתאבר קונטרולר לגרור סגווי עם קונטרול דרג ולהגיד שאנחנו רוצים שהוא יהיה view קונטרולר בעזרת relationship סגווי בצורה הבאה ואז גם הוא קיבל פה תאב אתם רואים יש לי שלוש תאבים עכשיו בנוסף לזה אם אני כבר אעמוד על התאב הזה אני אוכל לבחור את התמונה או דברים נוספים למשל badge זה אומר המספר הזה שאתם יכולים לראות כאן אם יש לכם איזה
שני עדכונים שאתם רוצים להציג אני כרגע לא רוצה בייג' אבל אפשר גם לבחור אימג' עבור האייטם או טקסט עבור האייטם בסדר נגיד אתם רוצים לכתוב פה news אז זה משהו אחד שאפשר לעשות ובנוסף אפשר גם לשים תמונה אז נגיד אתם רוצים לשים פה את התמונה הזאת והיא תהיה תמונה של הטאב אז עכשיו יש לי כאילו שלוש טאבים והובן לכם שאתם צריכים ליצור פה view controller אוקיי מעולה אז זה הרעיון
של הטאבר קונטרולר והוא מאפשר לכם לעשות טאבים באפליקציה אם אתם לא רוצים את אחד ה-View Controller, אתם קודם כל צריכים למחוק את ה-Segway, לעמוד על ה-Segway ולמחוק אותו ואחר כך פשוט להוסיף את ה-Segway מחדש אם תרצו אותו, אוקיי?
ה-Segway שוב פעם זה Relationship Segway, יפה. אז נניח שהחלטתי לוותר פה על ה-Segway הזה ועל ה-View Controller הזה, אני יכול למחוק אותו, מצוין. רוצה להוסיף עוד אחד? גם טוב.
יש לנו באייטמים, שוב פעם, מזכיר, אם אני עומד פה על אייטם אני יכול לבחור את התכונות שלו וזה ככה מה שאנחנו רוצים לדעת בראש ובראשונה, לעבודה עם טאבר קונטרולר אוקיי אנחנו נרצה יש פה יצרו בשבילי פרסט ויו קונטרולר וסקונט ויו קונטרולר אבל אני מעדיף פשוט ליצור לעצמי את הקבצים אז אני אסמן את שני הקבצים האלה ואני אמחק אותם move to trash ובנוסף אנחנו
נעבור לסטורי בורד ונוריד פה את שתי הסגווים אנחנו רוצים פשוט לייצר הכל לבד כדי לערוך הכירות עם הדברים אז אני אסמן את הויו קונטרולרים ואני פשוט אמחק אותם בסדר אני מסמן פה את הסגווי מוחק ורק אחר כך אני יכול לסמן את ה-view-controller ולמחוק אותו ועכשיו אנחנו יכולים להוסיף את ה-view-controller שלנו בעצמנו. דרך אגב בואו נכיר פה את כל
הסיפור אם אני מוסיף tabar, מחקתי הכל, אני יכול להוסיף tabar-controller בעצמי לפרויקט רגיל שהיה לכם עד עכשיו, tabar-controller ואני זורק אותו פה והוא כבר בא עם שתי אייטמים.
עכשיו האייטמים האלה לא מחוברים עדיין לקלאסים ואת זה אנחנו נרצה לעשות בעצמנו רק אם אני עכשיו אריץ את האפליקציה אז אין לי נקודת כניסה לתוכנית, אתם רואים שחסר פה את החץ הזה של איזי ניישל ויו קונטרולר אז אם אתם רוצים אתם יכולים לעבור לפה לאטריביוט ולבחור באיזי ניישל ויו קונטרולר לתאבה וככה יוצא שזאת הנקודת כניסה
לתוכנית זה הויו קונטרולר הראשי בתוכנית שאנחנו רוצים לעשות את הפרויקט שלנו בארכיטקטורה של mvc ולהוסיף את הויו קונטרולרים שמציגים במקרה שלנו טייבלס באפליקציה שלנו הויו קונטרולר הזה הוא טייבל ויו קונטרולר וגם פה יש טייבל ויו קונטרולר בעצם פעמיים table view controller בואו נוסיף
אותם אבל נשים אותם כבר בצורה של mvc בגרופ נפרד אז אנחנו מייצרים קודם כל new group נקרא לגרופ הזה controllers ובתוכו אנחנו רוצים לייצר לעצמנו פעמיים table view controller אז אני אעשה new file coco touch class אנחנו רוצים לרשת מtable view controller ולקרוא לראשון articles table view controller ואנחנו רוצים לקרוא לשני
new file עוד פעם לרשת מtable ויו קונטרולר ואנחנו רוצים לקרוא לזה סרצ' טייבל ויו קונטרולר או ארטיקל סרצ' אם אתם רוצים להעריך קצת את השם ולהיות עם שם יותר מסודר קצת אז יש לי שני ויו קונטרולרים של טייבל ויו קונטרולר ובשביל שהם יתאימו לי לפה אז אני צריך להוריד את הויו קונטרולר הזה ולהחליף אותו בטייבל ויו קונטרולר כדי לעשות את זה אני פשוט אוריד את הסגווי קודם ואחר כך אני יכול לגשת לפה ולמחוק את ה...
אם אני לא מצליח למחוק אני בא למעלה ומוחק וגם פה אני רוצה למחוק את ה-Segway וגם למחוק את זה. אוקיי, אז אתם צריכים תב"ר קונטרולר, ולתב"ר אתם מוזמנים להוסיף עכשיו TableViewController ועוד אחד.
אוקיי, עכשיו בואו נגרור Segway, זה יהיה RelationshipSegway של ViewController, וגם פה אני רוצה Segway, שוב פעם RelationshipSegway.
עכשיו יש לנו שני אייטמים, ולשני האייטמים האלה אנחנו רוצים לשייך את הקלאסים שיצרנו, אז אני עומד על האייטם הראשון, ובקלאס שלו אנחנו ניתן לו את articles table view controller.
נלך לאייטם השני, ובקלאס שלו ניתן את ה-search table view controller. יפה. בנוסף לזה, אנחנו רוצים פה ב-table view הראשון לשנות קצת את האייקון כדי שיראה יותר נחמד.
אם אתם מסתכלים אצלנו באפליקציה, אז בוא נסתכל עליה ואז נוכל ככה לבחור משהו נכון. כאן יש לי בזה ציור של ספר ומתחת חדשות, וב-search יש לי זכוכית מגדלת.
אז איך עושים את זה? אנחנו רוצים לעמוד פה, ללכת לטאבר האייטם עצמו ותחת הטאבר האייטם אפשר פה לשנות את הדבר הזה לחדשות, את הטקסט לחדשות, זה כבר יהיה יותר נחמד ובאימאג' בוא נבחר תמונה כמו שיש שם של ספר, אפשר לחפש פה גם,
יותר קל, אז זה האייקון של החדשות, יפה. למטה יש לנו את הקטע עם החיפוש, אז כאן אנחנו נרצה לכתוב חיפוש, בעברית אפשר ואת התמונה של החיפוש בוא נעשה search גם כן, זה מגניפיין גלאס, מצוין, אז עכשיו יש לנו את שני האייקונים, מה שחסר פה זה התאים עצמם ובנוסף פה אנחנו רוצים להוסיף search bar, אז בואו נעמוד למעלה
ונחפש גם search bar ואת ה-search bar אנחנו רוצים לשים פה למעלה, בסדר? אז בואו נשים אותו, הנה, מעולה, אז זה ה-search bar שלנו ויש לנו כמו שאמרנו שתי table view controllers, בואו נתחיל בזה שאני רוצה לאכלס את ה-table view controller הראשון ותשימו לב עוד משהו מעניין, אתם יכולים לראות שבפרויקט אני משתמש באותם
תאים. אתם רואים, יש לי פה תא ופה תא. והתאים האלה הם אותו דבר, יש לי בעצם איזשהו טייטל, איזשהו דסקריפשן ותמונה. טייטל, דסקריפשן, תמונה.
אם התמונה לא מוצגת זה בגלל שלא הייתה תמונה במקור, אוקיי? אבל בכולם יש לי טייטל, דסקריפשן ותמונה. גם כאן, טייטל, דסקריפשן ותמונה.
לפעמים אבל התאים שלנו הם באנגלית ואז הם צריכים להתחיל בצד שמאל, ולפעמים התאים שלנו הם בצד ימין בגלל שהם בעברית והם צריכים להתחיל בצד ימין אז אני אראה לכם איך אפשר לטפל בזה בצורה דינמית על ידי זיהוי של השפה של הטקסט אבל את זה נעשה יותר מאוחר מה שאני מנסה להגיד בשלב הנוכחי זה שאם אנחנו רוצים להשתמש באותו סל בשביל
פעמיים בשתי טייבל ויו קונטרולרים שונים רצוי שנעשה ריוז לסל ואיך עושים ריוז לסל עד עכשיו מה שהיינו עושים זה לבוא לפה לסל ולעצב פה את הסל נכון?
זאת אומרת אולי להגדיל אותו קצת ואז להתחיל לגרור פנימה דברים. עכשיו זה לא מתאים במקרה שלנו בגלל שאנחנו רוצים לעשות ריוז לאותו סל פעמיים ואם יהיה עדכון אז אני רוצה לעדכן רק במקום אחד ושזה יתעדכן בשתי הטייבל ויו קונטרולרס.
כדי לעשות ריוז לסל אנחנו נייצר לעצמנו עוד תקייה חדשה נקרא לה views כי במודל ויו קונטרולר זאת הצורת עבודה אז יש לי קונטרולרס ויש לנו views אז עכשיו אנחנו משתמשים גם בviews ובתוך תקיית views אנחנו נרצה לייצר קובץ חדש וכאן אנחנו בעצם רוצים לייצר טייבל ויוסל אוקיי אז בואו קוקו טאץ' קלאסט והפעם אנחנו רוצים
לרשת מיואי טייבל ויוסל זה דבר שכבר עשינו בעבר נכון עד כאן אין חדש מה שכן חדש וזה בדיוק הקטע שאני רוצה להראות לכם זה שאנחנו רוצים לייצר קובץ xab נפרד עבור הסל הזה כדי שנוכל להשתמש בו בכמה מקומות בואו רק נקרא לזה בשם משמעותי נקרא לזה ארטיקל טייבל ויוסל נוודא שזה נכנס בראיית לתוך הגרופ של הביוס
נעשה קריאייט ועכשיו יש לנו בעצם קובץ קלאס של סייל ויש לנו גם קובץ xab. xab זה בעצם קובץ אינטרפייס בילדר והוא מייצג view בודד להבדיל מ-storyboard שמייצגים הרבה views ביחד וזאת גרסה ישנה יותר בעצם של אינטרפייס בילדר וכאן הוא התפתח אני אגדיל את זה מעט כדי שנוכל קצת לעבוד ונתקרב קצת לכאן כאן בסייל אנחנו
רוצים פשוט לשים שני לייבלים אז בואו נוסיף לייבל אחד ועוד לייבל, אז אפשר לעשות לזה העתק-הדבק או מה שתרצו. Command-D זה גם קיצור כדי להעתיק ולהדביק, אבל רק פה בתוך ה-Storyboard.
ובנוסף אנחנו רוצים אימג'-ויו, אז נשים פה את ה-Image-View שלנו. עכשיו, מבחינת קצת יופי של הדבר הזה, אז אנחנו רוצים שהכותרת תמיד תהיה קצת יותר מודגשת.
אפשר פשוט להגיד שאנחנו רוצים את הטקסט הזה בבולד, אז בואו נגדיר את זה. רגע, לא ב-Color אלא ב-Font, נכון? בואו נלך לפונט ואפשר פשוט לקחת אפילו סיסטם פונט אבל לקחת אותו בבולד או בסמי בולד כדי שהוא יהיה מודגש יותר הגודל פה הוא 17 וזה בסדר זה סביר עכשיו השפת טקסט היא נאצ'ורל אבל הנאצ'ורל מה זה אומר בעצם זה שהטקסט אמור
להיות או בצד ימין או בצד שמאל בהתאם לשפה