יצירת אפליקציה בסיסית של הטלת קובייה

ב-codelab הזה תיצרו אפליקציית Android לגלגול קוביות, שבה המשתמשים יכולים ללחוץ על הסמל Button באפליקציה כדי לגלגל קובייה. תוצאת הגלגול תוצג בTextView במסך.

תשתמשו בכלי לעריכת פריסות ב-Android Studio כדי ליצור את פריסת האפליקציה, ואז תכתבו קוד Kotlin כדי להגדיר מה יקרה כשלוחצים על Button.

דרישות מוקדמות

• איך ליצור ולהריץ אפליקציה עם הכיתוב Hello, World!‎ ב-Android Studio.
• מוכר לכם השימוש ב-TextViews וב-ImageViews באפליקציה.
• איך משנים את המאפיינים של TextView בעורך הפריסות.
• איך לחלץ טקסט למשאב מחרוזת כדי להקל על תרגום האפליקציה ועל שימוש חוזר במחרוזות.
• היסודות של תכנות ב-Kotlin, כפי שנלמדו ב-codelabs הקודמים.

מה תלמדו

• איך מוסיפים Button לאפליקציית Android.
• איך מוסיפים התנהגות כשמקישים על Button באפליקציה.
• איך פותחים ומשנים את הקוד Activity של אפליקציה.
• איך להציג הודעה של Toast.
• איך מעדכנים את התוכן של TextView בזמן שהאפליקציה פועלת.

מה תפַתחו

• אפליקציית הטלת קובייה ל-Android עם לחצן Button להטלת קובייה, והטקסט במסך מתעדכן בהתאם לתוצאה.

מה צריך

• מחשב עם Android Studio מותקן.

כך תיראה האפליקציה אחרי שתשלימו את ה-codelab הזה.

יצירת פרויקט של פעילות ריקה

1. אם כבר פתוח לכם פרויקט ב-Android Studio, עוברים אל File > New > New Project...‎ כדי לפתוח את המסך Create New Project.
2. בקטע Create New Project (יצירת פרויקט חדש), יוצרים פרויקט חדש של Kotlin באמצעות התבנית Empty Activity (פעילות ריקה).
3. האפליקציה נקראת Dice Roller (הטלת קובייה), ורמת ה-API המינימלית היא 19 (KitKat).

חשוב: אם אתם לא יודעים איך ליצור פרויקט חדש ב-Android Studio, תוכלו לקרוא את המאמר יצירה והפעלה של אפליקציית Android ראשונה.

4. מריצים את האפליקציה החדשה והיא אמורה להיראות כך.
   

פתיחת הכלי לעריכת פריסות

1. בחלון Project (פרויקט), לוחצים פעמיים על activity_main.xml (app > res > layout > activity_main.xml) כדי לפתוח אותו. אמור להופיע כלי העריכה של הפריסה, עם הטקסט TextViewHello World
   בלבד במרכז האפליקציה.

בשלב הבא מוסיפים Button לאפליקציה. Button הוא רכיב בממשק המשתמש (UI) ב-Android שהמשתמש יכול להקיש עליו כדי לבצע פעולה.

במשימה הזו, מוסיפים Button מתחת ל-TextView Hello World. התגים TextView ו-Button ימוקמו בתוך התג ConstraintLayout, שהוא סוג של ViewGroup.

כשקיימים Views בתוך ViewGroup, ה-Views נחשבים צאצאים של הורהViewGroup. במקרה של האפליקציה שלך, הרכיבים TextView ו-Button ייחשבו כרכיבי צאצא של רכיב האב ConstraintLayout.

אפשר להוסיף את Button כילד או כילדה של ConstraintLayout הקיים באפליקציה.

הערה: כמו באילן יוחסין, בהיררכיית תצוגות, תצוגות הורה יכולות להיות בעצמן תצוגות צאצא, ותצוגות צאצא יכולות להיות הורה לתצוגות צאצא אחרות.

הוספת לחצן לפריסה

1. גוררים רכיב Button מפלטת הרכיבים אל התצוגה Design (עיצוב), וממקמים אותו מתחת לרכיב TextView Hello World.
   
2. מתחת ללוח הצבעים בעץ הרכיבים, מוודאים שהרכיבים Button ו-TextView מופיעים מתחת לרכיב ConstraintLayout (כצאצאים של ConstraintLayout).
3. הבחנתם בשגיאה שלפיה Button לא מוגבל. מכיוון שהרכיב Button נמצא בתוך ConstraintLayout, צריך להגדיר אילוצים אנכיים ואופקיים כדי למקם אותו.

מיקום הכפתור

בשלב הזה מוסיפים אילוץ אנכי מהחלק העליון של Button לחלק התחתון של TextView. הפעולה הזו תציב את Button מתחת ל-TextView.

1. בתצוגה עיצוב, בחלק העליון של Button, לוחצים לחיצה ארוכה על העיגול הלבן עם הגבול הכחול. גוררים את הסמן, וחץ יופיע אחריו. משחררים כשמגיעים לקצה התחתון של 'Hello World' TextView. כך נוצר אילוץ פריסה, והרכיב Button עולה למעלה עד שהוא נמצא ממש מתחת לרכיב TextView.
   
2. בצד שמאל של עורך הפריסה, בודקים את המאפיינים.
3. בווידג'ט Constraint,שימו לב לאילוץ פריסה חדש שמוגדר לתחתית של TextView, Top → BottomOf textView (0dp). ‫(0dp) מציין שוליים של 0. יש גם שגיאה לגבי אילוצים אופקיים חסרים.
   
4. מוסיפים אילוץ אופקי מהצד הימני של Button לצד הימני של רכיב האב ConstraintLayout.
5. חוזרים על הפעולה בצד ימין, ומחברים את הקצה הימני של Button לקצה הימני של ConstraintLayout. התוצאה אמורה להיראות כך:

6. כשButton עדיין מסומן, ווידג'ט האילוצים אמור להיראות כך. שימו לב לשני אילוצים נוספים שנוספו: Start → StartOf parent (0dp) ו-End → EndOf parent (0dp). כלומר, הרכיב Button ממוקם במרכז האופקי של רכיב ההורה שלו, ConstraintLayout.
   

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

שינוי הטקסט של הלחצן

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

במקום שהתווית Button תציג את הטקסט 'לחצן', משנים אותה למשהו שמציין מה הלחצן יעשה: 'הפעלת הקובייה'.

1. בכלי לעריכת פריסות, כשהאפשרות Button נבחרת, עוברים אל מאפיינים, משנים את הטקסט לRoll ולוחצים על המקש Enter (Return ב-Mac).

2. בעץ הרכיבים, מופיע משולש אזהרה כתום לצד Button. אם מעבירים את העכבר מעל המשולש, מופיעה הודעה. ‫Android Studio זיהה מחרוזת שמוגדרת בקוד ("Roll") בקוד האפליקציה, ומציע להשתמש במקום זאת במשאב מחרוזת.

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

3. בעץ הרכיבים , לוחצים על המשולש הכתום.

הודעת האזהרה המלאה תיפתח.

4. בחלק התחתון של ההודעה, בקטע הצעה לתיקון, לוחצים על הלחצן תיקון. (לפעמים צריך לגלול למטה כדי לראות אותם)
5. תיבת הדו-שיח Extract Resource נפתחת. לחלץ מחרוזת פירושו לקחת את הטקסט Roll וליצור משאב מחרוזת בשם roll ב-strings.xml (app > res > values > strings.xml). ערכי ברירת המחדל נכונים, לכן לוחצים על אישור.

6. שימו לב שבקטע מאפיינים, המאפיין טקסט של Button מציין עכשיו @string/roll, כלומר המשאב שיצרתם זה עתה.
   

בתצוגה עיצוב, עדיין צריך להיות כתוב Roll על Button.

עיצוב של TextView

הטקסט 'Hello World!‎' קטן מדי, וההודעה לא רלוונטית לאפליקציה. בשלב הזה תחליפו את ההודעה הקטנה 'Hello, World!‎' במספר כדי להציג את הערך המצטבר, ותגדילו את הגופן כדי שיהיה קל יותר לראות אותו.

1. בכלי לעריכת עיצובים, בוחרים את TextView כדי שהמאפיינים שלו יופיעו בחלון מאפיינים.
2. משנים את textSize של TextView ל-36sp, כדי שהטקסט יהיה גדול וקל לקריאה. יכול להיות שתצטרכו לגלול כדי למצוא את textSize.

3. מנקים את מאפיין הטקסט של התג TextView. לא צריך להציג שום דבר ב-TextView עד שהמשתמש מטיל את הקובייה.

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

.

4. בוחרים באפשרות TextView בעץ הרכיבים.
5. בקטע מאפיינים משותפים, מחפשים את מאפיין הטקסט, ומתחתיו מאפיין טקסט נוסף עם סמל של כלי. המאפיין text הוא מה שיוצג למשתמש כשהאפליקציה פועלת. המאפיין text עם סמל מפתח הברגים הוא מאפיין 'טקסט של כלי' שמוצג רק לכם כמפתחים.
6. מגדירים את הטקסט של הכלים ל-1 ב-TextView (כדי לדמות הטלת קובייה עם התוצאה 1). המספר '1' יופיע רק בכלי העיצוב ב-Android Studio, אבל הוא לא יופיע כשמריצים את האפליקציה במכשיר אמיתי או באמולטור.

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

7. בודקים את האפליקציה בתצוגה המקדימה. המספר 1 מוצג.

8. מריצים את האפליקציה. כך נראית האפליקציה כשהיא מורצת באמולטור. הספרה 1 לא מוצגת. זו ההתנהגות הנכונה.

נהדר, סיימתם לבצע את השינויים בפריסה!

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

כדי לבצע את השינוי הזה, צריך להבין קצת יותר איך אפליקציית Android בנויה.

‫Activity מספק את החלון שבו האפליקציה מציירת את ממשק המשתמש שלה. בדרך כלל, Activity תופסת את כל המסך של האפליקציה הפועלת. לכל אפליקציה יש פעילות אחת או יותר. הפעילות ברמה העליונה או הפעילות הראשונה נקראת לעיתים קרובות MainActivity והיא מסופקת על ידי תבנית הפרויקט. לדוגמה, כשמשתמש גולל ברשימת האפליקציות במכשיר שלו ומקיש על סמל האפליקציה Dice Roller, מערכת Android תפעיל את MainActivity של האפליקציה.

בקוד MainActivity, צריך לספק פרטים על הפריסה של Activity ועל אופן האינטראקציה של המשתמשים איתו.

• באפליקציית כרטיס יום ההולדת יש Activity אחד שמציג את ההודעה והתמונה של יום ההולדת.
• באפליקציית Dice Roller, יש Activity אחד שמציג את הפריסה TextView ו-Button שבניתם.

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

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

פותחים את הקובץ MainActivity.kt

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

1. עוברים אל הקובץ MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt) ופותחים אותו. בהמשך מפורט מה שאתם אמורים לראות. אם מופיע הסמל import..., לוחצים על ... כדי להרחיב את הייבוא.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

אתם לא צריכים להבין כל מילה בקוד שלמעלה, אבל חשוב שתהיה לכם הבנה כללית של מה שהוא עושה. ככל שתעבדו יותר עם קוד Android, כך תכירו אותו טוב יותר ותבינו אותו יותר.

2. בודקים את קוד Kotlin של המחלקה MainActivity, שמזוהה לפי מילת המפתח class ואז השם.

class MainActivity : AppCompatActivity() {
    ...
}

3. שימו לב שאין פונקציה main() ב-MainActivity.
   
   קודם לכן למדתם שלכל תוכנית Kotlin חייבת להיות פונקציה main(). אפליקציות ל-Android פועלות בצורה שונה. במקום לקרוא לפונקציה main(), מערכת Android קוראת לשיטה onCreate() של MainActivity כשפותחים את האפליקציה בפעם הראשונה.
   
4. מחפשים את השיטה onCreate(), שנראית כמו הקוד שבהמשך.

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

ב-codelab מאוחר יותר נסביר על override (אז אל תדאגו לגבי זה כרגע). החלק הנותר של השיטה onCreate() מגדיר את MainActivity באמצעות קוד מהייבוא ועל ידי הגדרת הפריסה ההתחלתית באמצעות setContentView().

5. שימו לב לשורות שמתחילות ב-import.
   

‫Android מספקת מסגרת של הרבה מחלקות כדי להקל על כתיבת אפליקציות ל-Android, אבל היא צריכה לדעת בדיוק לאיזו מחלקה אתם מתכוונים. כדי לציין באיזה קלאס ב-framework להשתמש בקוד, משתמשים בהצהרה import. לדוגמה, המחלקה Button מוגדרת ב-android.widget.Button.

הפעלת ייבוא אוטומטי

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

1. ב-Android Studio, פותחים את ההגדרות דרך File > Other Settings > Preferences for New Projects.
2. מרחיבים את הגדרות אחרות > ייבוא אוטומטי. בקטעים Java ו-Kotlin, מוודאים שהתיבות Add unambiguous imports on the fly ו-Optimize imports on the fly (for current project) מסומנות. שימו לב שיש שתי תיבות סימון בכל קטע.
   
   ההגדרות של unambiguous imports (ייבוא חד-משמעי) מנחות את Android Studio להוסיף באופן אוטומטי הצהרת ייבוא, כל עוד המערכת יכולה לקבוע באיזו הצהרה להשתמש. ההגדרות של optimize imports (אופטימיזציה של ייבוא) אומרות ל-Android Studio להסיר ייבוא שלא נעשה בו שימוש בקוד.
   
3. מקישים על אישור כדי לשמור את השינויים ולסגור את ההגדרות.

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

הצגת הודעה כשלוחצים על הלחצן

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

1. מוסיפים את הקוד הבא לשיטת onCreate() אחרי הקריאה ל-setContentView(). השיטה findViewById() מוצאת את Button בפריסה. ‫R.id.button הוא מזהה המשאב של Button, שהוא מזהה ייחודי של המשאב. הקוד שומר הפניה לאובייקט Button במשתנה שנקרא rollButton, ולא את האובייקט Button עצמו.

val rollButton: Button = findViewById(R.id.button)

הערה: מערכת Android מקצה באופן אוטומטי מספרי מזהים למשאבים באפליקציה. לדוגמה, ללחצן Roll יש מזהה משאב, ולמחרוזת של טקסט הלחצן יש גם מזהה משאב. מזהי משאבים הם בפורמט R.<type>.<name>, לדוגמה: R.string.roll. למזהי View, הערך של <type> הוא id, לדוגמה, R.id.button.

הקוד שומר את ההפניה לאובייקט Button במשתנה שנקרא rollButton, ולא את האובייקט Button עצמו.

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

השיטה onCreate() אמורה להיראות עכשיו כך.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

2. מוודאים ש-Android Studio הוסיף אוטומטית הצהרת import עבור Button.
   שימו לב שיש עכשיו 3 הצהרות import – השלישית נוספה אוטומטית.
   

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

הערה: אם הפעלת הייבוא האוטומטי לא עבדה, Button יסומן באדום. אפשר להוסיף ידנית את הייבוא הנכון: מציבים את סמן הטקסט בתוך המילה Button ואז לוחצים על Alt+Enter (Option+Enter ב-Mac).

לאחר מכן צריך לשייך את הקוד ל-Button, כדי שהקוד יופעל כשמקישים על Button. Click listener הוא קוד שקובע מה יקרה כשמקישים או לוחצים על משהו. אפשר לחשוב על זה כעל קוד שפשוט נמצא שם ומחכה שהמשתמש ילחץ, במקרה הזה, על Button.

3. משתמשים באובייקט rollButton ומגדירים לו מאזין לקליקים על ידי קריאה ל-method‏ setOnClickListener().

rollButton.setOnClickListener {
}

במהלך ההקלדה, יכול להיות ש-Android Studio יציג כמה הצעות. במקרה הזה, בוחרים באפשרות setOnClickListener {...}.

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

4. צור Toast עם הטקסט "Dice Rolled!" באמצעות הקריאה ל-Toast.makeText().

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. לאחר מכן, אומרים ל-Toast להציג את עצמו על ידי קריאה ל-method‏ show().

toast.show()

כך נראית הכיתה אחרי העדכון. ההצהרות package ו-import עדיין מופיעות בחלק העליון של הקובץ:MainActivity

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

אפשר לשלב את שתי השורות ב-click listener לשורה אחת בלי משתנה. זהו דפוס נפוץ שאפשר למצוא בקודים אחרים.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. מפעילים את האפליקציה ולוחצים על הלחצן Roll (הטלת קובייה). הודעה קצרה אמורה להופיע בתחתית המסך ולנעלם אחרי זמן קצר.

מעולה! ההודעה קופצת כשלוחצים על הלחצן. זו הפעם הראשונה שכתבתם קוד Kotlin ל-Android!

עדכון של TextView כשלוחצים על Button

במקום להציג הודעה זמנית Toast, תכתבו קוד לעדכון TextView במסך כשלוחצים על הלחצן Roll.

1. חוזרים אל activity_main.xml (app > res > layout >activity_main.xml)
2. לוחצים על TextView.
3. שימו לב שהערך של id הוא textView.
   
4. פותחים את MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)
5. מוחקים את שורות הקוד שיוצרות ומציגות את Toast.

rollButton.setOnClickListener {
  
}

6. במקום זאת, יוצרים משתנה חדש בשם resultTextView כדי לאחסן את TextView.
7. משתמשים ב-findViewById() כדי למצוא את textView בפריסה באמצעות המזהה שלו, ושומרים הפניה אליו.

val resultTextView: TextView = findViewById(R.id.textView)

8. מגדירים את הטקסט ב-resultTextView ל-"6" במירכאות.
   

resultTextView.text = "6"

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

כך אמורה להיראות המחלקה MainActivity:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. מפעילים את האפליקציה ולוחצים על הלחצן. הערך של TextView אמור להתעדכן ל-6.

הדבר היחיד שחסר הוא הטלת הקובייה. אפשר להשתמש שוב במחלקה Dice מה-codelab הקודם, שמטפלת בלוגיקה של הטלת קובייה.

הוספת המחלקה Dice

1. אחרי הסוגר המסולסל האחרון בכיתה MainActivity, יוצרים את הכיתה Dice עם שיטה roll().

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. שימו לב: Android Studio מציג קו אפור גלי מתחת ל-numSides. (יכול להיות שיעבור זמן עד שהתמונה תופיע).
3. מעבירים את מצביע העכבר מעל numSides ומופיע חלון קופץ עם ההודעה המאפיין numSides יכול להיות פרטי.
   

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

4. כדי לבצע את התיקון המוצע מ-Android Studio, לוחצים על Make 'numSides' 'private' (הגדרת numSides כפרטי).

יצירת השיטה rollDice()‎

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

1. מחליפים את הקוד ב-click listener שמגדיר את הטקסט ל-6 בקריאה ל-rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. מכיוון ש-rollDice() עדיין לא הוגדר, Android Studio מסמן שגיאה ומציג את rollDice() באדום.
3. אם מעבירים את מצביע העכבר מעל rollDice(), Android Studio מציג את הבעיה וכמה פתרונות אפשריים.

4. לוחצים על עוד פעולות... כדי לפתוח תפריט. ‫Android Studio מציע לבצע עוד פעולות בשבילכם!

טיפ: אם קשה לכם להעביר את מצביע העכבר ואז ללחוץ על פעולות נוספות..., אתם יכולים ללחוץ על rollDice() ואז על Alt+Enter (Option+Enter ב-Mac) כדי להציג את התפריט.

5. בוחרים באפשרות יצירת הפונקציה rollDice. ‫Android Studio יוצר הגדרה ריקה לפונקציה בתוך MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

יצירת מופע חדש של אובייקט Dice

בשלב הזה, יוצרים את השיטה rollDice() כדי ליצור קובייה ולהטיל אותה, ואז מציגים את התוצאה ב-TextView.

1. בתוך rollDice(), מוחקים את השיחה עם TODO().
2. מוסיפים קוד כדי ליצור קובייה עם 6 צדדים.

val dice = Dice(6)

3. מטילים את הקובייה על ידי קריאה לשיטה roll() ושומרים את התוצאה במשתנה שנקרא diceRoll.

val diceRoll = dice.roll()

4. אפשר למצוא את TextView על ידי התקשרות אל findViewById().

val resultTextView: TextView = findViewById(R.id.textView)

המשתנה diceRoll הוא מספר, אבל הפונקציה TextView משתמשת בטקסט. אפשר להשתמש בשיטה toString() ב-diceRoll כדי להמיר אותו למחרוזת.

5. המרת diceRoll למחרוזת ושימוש בה כדי לעדכן את הטקסט של resultTextView.

resultTextView.text = diceRoll.toString()

כך נראית השיטה rollDice():

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

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

מעולה, אין כמוך!

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

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

מדריך הסגנון של Android

כשעובדים בצוותים, מומלץ שחברי הצוות יכתבו קוד בצורה דומה, כדי שתהיה עקביות בקוד. לכן, ב-Android יש מדריך סגנון לכתיבת קוד Android – מוסכמות למתן שמות, עיצוב ושיטות מומלצות אחרות שכדאי לפעול לפיהן. כשכותבים קוד ל-Android, צריך לפעול בהתאם להנחיות האלה: Kotlin Style Guide for Android Developers.

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

ניקוי הקוד

לצמצם את הקוד

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

rollButton.setOnClickListener {
    rollDice()
}

ההוראות של click listener הן רק שורה אחת, ולכן אפשר לצמצם את קריאת השיטה rollDice() ואת הסוגריים המסולסלים לשורה אחת. כך זה נראה. שורה אחת במקום שלוש!

rollButton.setOnClickListener { rollDice() }

עיצוב מחדש של הקוד

עכשיו צריך לשנות את הפורמט של הקוד כדי לוודא שהוא עומד במוסכמות המומלצות של פורמט קוד ל-Android.

1. בכיתה MainActivity.kt, בוחרים את כל הטקסט בקובץ באמצעות מקש הקיצור Control+A ב-Windows (או Command+A ב-Mac). אפשרות נוספת היא לעבור לתפריט ב-Android Studio עריכה > בחירת הכול.
2. אחרי שבוחרים את כל הטקסט בקובץ, עוברים לתפריט Android Studio Code > Reformat Code או משתמשים במקש הקיצור Ctrl+Alt+L (או Command+Option+L ב-Mac).

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

הוספת הערות לקוד

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

מקובל להוסיף תגובה לכל כיתה (MainActivity ו-Dice הן הכיתות היחידות שיש לכם באפליקציה) ולכל שיטה שאתם כותבים. כדי לציין למערכת שזה לא קוד, משתמשים בסמלים /** ו-**/ בתחילת ההערה ובסופה. המערכת תתעלם מהשורות האלה כשתבצע את הקוד.

דוגמה לתגובה על כיתה:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

דוגמה לתגובה על שיטה:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

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

דוגמה ל-2 הערות בתוך שיטה:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

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

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

קוד הפתרון ל-codelab הזה נמצא בפרויקט ובמודול שמוצגים בהמשך.

כתובת ה-URL של קוד הפתרון: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

כדי לקבל את הקוד של ה-Codelab הזה מ-GitHub ולפתוח אותו ב-Android Studio, צריך לבצע את הפעולות הבאות.

1. מפעילים את Android Studio.
2. בחלון Welcome to Android Studio (ברוכים הבאים ל-Android Studio), לוחצים על Check out project from version control (שליפת פרויקט מניהול גרסאות).
3. בוחרים באפשרות Git.

4. בתיבת הדו-שיח Clone Repository (שיבוט מאגר), מדביקים את כתובת ה-URL של הקוד שסופקה בתיבה URL (כתובת URL).
5. לוחצים על הלחצן בדיקה, מחכים ומוודאים שמופיע בועית קופצת ירוקה עם הכיתוב החיבור בוצע בהצלחה.
6. אפשר לשנות את הספרייה לערך שונה מברירת המחדל המוצעת.

7. לוחצים על Clone (שיבוט). מערכת Android Studio מתחילה לאחזר את הקוד.
8. בחלון הקופץ Checkout from Version Control (הוצאת קובץ מהבקרה של הגרסאות), לוחצים על Yes (כן).

9. מחכים ש-Android Studio ייפתח.
10. בוחרים את המודול הנכון לקוד הפתרון או לקוד ההתחלתי של ה-codelab.

11. לוחצים על לחצן הפעלה כדי ליצור ולהריץ את הקוד.

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

• מוסיפים Button באפליקציית Android באמצעות כלי הפריסה.
• משנים את המחלקה MainActivity.kt כדי להוסיף לאפליקציה התנהגות אינטראקטיבית.
• כפתרון זמני, אפשר להציג הודעה קופצת Toast כדי לוודא שאתם בכיוון הנכון.
• מגדירים מאזין ללחיצה על Button באמצעות setOnClickListener() כדי להוסיף התנהגות ללחיצה על Button.
• כשהאפליקציה פועלת, אפשר לעדכן את המסך על ידי קריאה לשיטות ב-TextView, ב-Button או ברכיבי ממשק משתמש אחרים בפריסה.
• כדאי להוסיף הערות לקוד כדי לעזור לאנשים אחרים שקוראים את הקוד להבין מה היה הגישה שלכם.
• מעצבים מחדש את הקוד ומנקים אותו.

• כיתה Button
• כיתה Toast
• כיתה TextView
• מדריך הסגנון של Kotlin למפתחי Android

הערה: השיטות המומלצות הן אופציונליות. הם מאפשרים לכם לתרגל את מה שלמדתם ב-codelab הזה.

מבצעים את הפעולות הבאות:

1. מוסיפים עוד קובייה לאפליקציה. כשלוחצים על הלחצן Roll (הטלה), צריך להטיל 2 קוביות. התוצאות צריכות להופיע ב-2 TextViews שונים על המסך.

בדיקת העבודה:

האפליקציה המוגמרת צריכה לפעול ללא שגיאות ולהציג שני קוביות באפליקציה.