PracticU

תכונות ופעולות IBOutlet And IBAction תרגול - Ask The Oracle

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode › תכונות ופעולות IBOutlet And IBAction תרגול - Ask The Oracle
מילון מושגים:
תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.
גופן - העיצוב הגרפי של האותיות והתווים המוצגים בטקסט, הכולל צורה, סגנון וגודל.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
קונטרולר - רכיב שמתווך בין הממשק לבין הלוגיקה והנתונים, מקבל בקשות ומחליט כיצד לטפל בהן (למשל בדפוס MVC).
Xcode - סביבת הפיתוח של אפל לכתיבת אפליקציות ל-iOS ול-macOS.
בנאי - מתודה מיוחדת שמופעלת אוטומטית בעת יצירת אובייקט ממחלקה, ומאתחלת את ערכיו ההתחלתיים.
אינדקס - מבנה במסד נתונים שמאיץ חיפוש ושליפה. גם מספר המציין מיקום של איבר במערך.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).

תכונות ופעולות IBOutlet And IBAction תרגול - Ask The Oracle
בתרגיל הזה בונים אפליקציה פשוטה בשם Ask the Oracle, שבה המשתמש שואל שאלה והאורקל עונה תשובה מוגרלת או תשובה מוכנה מראש. התרגיל מציג את ההבדל בין Outlet ל-Action, וכיצד מחברים אותם מהסטורי בורד.
עיצוב המסך
1. רקע: תמונת רקע ב-Image View מוצמדת לארבע הקצוות של המסך. בוחרים את האילוצים ביחס ל-View עצמו ולא ל-Safe Area, כדי שהתמונה תכסה את כל המסך.
2. כותרת: Label ממורכז, עם פונט מותאם אישית בגודל 32.
3. שדה טקסט וכפתור: שדה טקסט מתחת לכותרת, וכפתור Ask מתחתיו. האילוצים נקבעים בשוליים של 32 נקודות.
חיבורים בין הסטורי בורד לקוד
- Outlet הוא משתנה שמצביע על פקד. Action הוא פונקציה שמופעלת כשמשתמש מבצע פעולה, למשל לחיצה.
- גוררים מהפקד אל ה-View Controller עם מקש Control או לחיצה ימנית. Outlet של טקסט נוצר בסוג UITextField, ו-Action של כפתור נוצר עם פרמטר sender.
- שמות של Action לא משנים ידנית. משנים שם רק באמצעות Rename של Xcode, כי שינוי ידני שובר את החיבור והתוכנית קורסת בזמן ריצה.
- Outlet נכתב כ-Implicitly Unwrapped Optional, כי הוא מאותחל על ידי המערכת בשלב מאוחר, לא בבנאי.
הלוגיקה
1. קוראים את הטקסט מתוך שדה הטקסט. הטקסט הוא אופציונלי, ולכן מטפלים בו עם if let או עם ערך ברירת מחדל.
2. ממירים את השאלה לאותיות קטנות, כדי שההבדל באותיות גדולות וקטנות לא ישפיע על התשובה.
3. בודקים אם השאלה נמצאת במילון של תשובות מוכנות, למשל "hi" או "how are you".
4. אם אין תשובה מוכנה, מגרילים אינדקס אקראי לפי מספר התשובות במערך, כלומר yes, no או I don't know.
5. התשובה מוצגת בתווית שמוסתרת עד הלחיצה הראשונה.
הסיכום: Outlet מחבר פקד למשתנה, Action מחבר פעולה לפונקציה, ושניהם נוצרים בגרירה מהסטורי בורד לקוד.
השיעור הבא בקורס: UISlider And How to change fonts in a UILabel

פרקי ההרצאה: תכונות ופעולות IBOutlet And IBAction תרגול - Ask The Oracle

  1. 00:00

    מבוא: מה נבנה באפליקציית Ask the Oracle

  2. 00:53

    רעיון האפליקציה והורדת תמונת רקע

  3. 03:05

    הוספת Image View ואילוצים לכל המסך

  4. 04:19

    מצב תצוגה Scale to Fill לתמונה

  5. 06:29

    הוספת שדה טקסט וכפתור לממשק

  6. 09:37

    מעבר ל-Assistant Editor וחיבור לקוד

  7. 11:45

    יצירת Action לכפתור מה-Storyboard

  8. 13:23

    פונקציית Action עם פרמטר sender

תמלול ההרצאה: תכונות ופעולות IBOutlet And IBAction תרגול - Ask The Oracle

הטקסט המלא של הדקות הראשונות בהרצאה «תכונות ופעולות IBOutlet And IBAction תרגול - Ask The Oracle» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:24

    לייצר פרויקט חדש פייל ניו פרוג'קט הפרויקט שלנו כמו תמיד הוא מסוג סינגל ויו אפליקיישן ואנחנו נלחץ פה נקסט. לפרויקט שלנו אנחנו נקרא היום Ask the Oracle.

  3. 00:39

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

  4. 00:51

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

  5. 01:07

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

  6. 01:24

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

  7. 01:49

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

  8. 02:09

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

  9. 02:37

    בהן אני רואה את התמונה הנחמדה הזאת ואני אנסה לקחת אותה כרקע אז אני אפתח את התמונה בטאב חדש ואני יכול להוריד כרגע את התמונה אליי אנחנו נעשה פה save image as אנחנו נשמור את התמונה להורדות שלנו לתיקייה של הקורס כאן אני אבחר בשם נניח אורקל כדי שיהיה יותר פשוט ועכשיו אני אפתח את התיקייה הזאת ואת xcode

  10. 03:02

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

  11. 03:24

    כמובן התמונה של ה-oracle אז אני אעמוד פה על התמונה ובאטריביוט אינספקטור אני אבחר בתמונה של ה-oracle עכשיו אם אתם זוכרים אנחנו רוצים להוסיף אילוצים אני אלחץ על הכפתור של Add New Constraints, אני אוותר על ה-Constraints to Margins וגם אני אדאג שהאילוץ שאני אעשה יהיה ביחס ל-V עצמו ולא ביחס ל-Safe Area במקרה של Background

  12. 03:50

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

  13. 04:01

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

  14. 04:29

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

  15. 04:53

    נעשה אני אוסיף פשוט אילוצים בסדר אני אגיד 32 מלמעלה ובוא נאמר 16 משני הצדדים האחרים הפעם אין לי בעיה למקם את זה ביחס באמת לsafe area כמו שצריך רק רק ה-Background רציתי שהוא ייכנס, אתם רואים מתחת לקו של הסוללה, מתחת לשעון, ולכן האילוצים שעשינו קודם בכלל לא ביחס למרכזיות.

  16. 05:16

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

  17. 05:33

    אני אבחר גם בפונט אחר, בואו נלך לשנות את הפונט יחד. איך משנים פונט? אני עומד פה על הפונט, משנה באות T מ-System Font ל-Custom Font וכאן אני יכול לבחור לעצמי פונט שנראה הרבה הרבה יותר נחמד, נגיד אני אבחר ב-Marker Feld עבור האורקל שלנו ואני אגדיל את הפונט נניח לפונט שמתאים לכותרת ובסטייל אני אלך על סטייל יותר רחב,

  18. 06:00

    זה הגודל שאני רוצה לבחור, נגיד 32. אמרתי 32. עכשיו בכותרת, בוא נכתוב איזה כיף נכון אוקיי אז בכותרת בוא נכתוב ask the oracle מה נשאל את אני לא אוהב לצעוק פה אני אוריד את הסימן קריאה מה נשאל את ה oracle נכון אז מה אנחנו נשאל אותו אנחנו נשאל אותו בעזרת טקסט פילד יש

  19. 06:35

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

  20. 07:01

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

  21. 07:29

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

  22. 07:41

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

  23. 07:59

    בואו ניתן לבטון שלנו background גם כן כדי שנוכל ככה לראות אותו בצורה בולטת. ה-background של הבטונים נמצאים תמיד תמיד למטה למטה באזור איפה שכתוב view, וכאן אנחנו רוצים לתת רקע נניח נחמד לכפתור של האורקל, כשאת הצבע של הטקסט נשנה מיד לצבע טקסט נניח שחור ask, וגם כאן כדאי לנו להחליף את הפונט לאיזשהו custom

  24. 08:30

    font שיראה יותר יפה בוא נבחר עוד פעם אני חושב בmarker field כדי ככה להתאים את עצמנו לעיצוב ונגדיל אולי טיפונת ל-22 ופה אנחנו נכתוב ask נעלה פה רגע למעלה ונכתוב ask כאן בטקסט פילד שלנו יש לנו את התכונה של הפלייס הולדר שבה אנחנו רוצים

  25. 08:59

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

  26. 09:31

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

  27. 09:43

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

  28. 10:02

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

  29. 10:23

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

  30. 10:49

    מקום יש פה עוד אקורדיון אחד אם אני ממש ממש ככה רוצה לראות חצי חצי אז מצד אחד יש לנו את קובץ העיצוב ומצד שני יש לנו את קובץ ה-view controller, עדיין אנחנו בעצם מצייתים פה לאיזשהו design pattern שנקרא MVC ואנחנו נדבר עליו בהמשך.

  31. 11:08

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

  32. 11:27

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

  33. 11:52

    גוררים ומה בעצם אנחנו עושים כאן מה אמרתי לכם קודם אנחנו רוצים להגדיר לעצמנו איזושהי פונקציה שהפונקציה הזאת בוא נאמר button tapped או ask me הפונקציה הזאת תגיב ללחיצה על הכפתור בסדר זה הרעיון איך אנחנו נעשה את זה בואו נראה ביחד אנחנו פשוט נגרור מהכפתור לview controller ברמת המחלקה רואים כאילו שאנחנו רוצים ליצור פונקציה אז פה יוצרים פונקציות ואנחנו נשנה את הטייפ של הקונקשן לאקשן אקשן

  34. 12:26

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

  35. 12:45

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

  36. 13:01

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

  37. 13:14

    יש לי פשוט פונקציה, תתעלמו שנייה מה-Ib action הזה, אני תכף אתייחס אליו גם כן, יש לי פשוט פונקציה, קוראים לה פונקציה ask me, הפונקציה הזאת מקבלת סנדר מסוג בטון, זאת אומרת הכפתור שעליו לחצו ויש לנו פה את ה-I don't care שאומר אנחנו לא רוצים להכריח אנשים לתת לנו את השם של הפקד,

  38. 13:33

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

  39. 13:55

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

  40. 14:22

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

  41. 14:52

    לעשות ריניים זה בעצם שינוי שהוא מותר מה אסור לי לעשות זה לבוא

לקורס המלא: קורס פיתוח אפליקציות לאייפון

ההרצאה הקודמת: תרגילים מסכמים בנושא עיצוב

ההרצאה הבאה: UISlider And How to change fonts in a UILabel

הרצאות קשורות מקורסים אחרים

  • תרגול לולאות
  • תרגול על פרק Constants
  • הוספת פונקציות ופעולות - MobX Actions

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון