ניווט מותנה ב-Android עם התחברות

ה-codelab הזה הוא חלק מהקורס Advanced Android in Kotlin (פיתוח מתקדם ל-Android ב-Kotlin). כדי להפיק את המרב מהקורס הזה, מומלץ לעבוד על ה-codelabs לפי הסדר, אבל זה לא חובה. כל ה-codelab של הקורס מפורטים בדף הנחיתה של ה-codelab בנושא Android מתקדם ב-Kotlin.

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

ה-codelabs בסדרה הזו הם:

• ‫6.1 כניסה ל-Android באמצעות FirebaseUI
• ‫6.2 ניווט מותנה ב-Android עם התחברות

ה-codelab הזה מבוסס על Implementing Login on Android with FirebaseUI. אפשר להוריד את קוד ההתחלה של ה-codelab הזה גם אם לא השלמתם את ה-codelab הקודם, אבל מומלץ קודם להשלים את ה-codelab Implementing Login on Android with FirebaseUI.

מבוא

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

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

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

מה שכדאי לדעת

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

מה תלמדו

• איך להפנות משתמשים למסכים המתאימים באפליקציה בהתאם למצב הכניסה שלהם.

הפעולות שתבצעו:

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

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

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

ה-codelab הזה מבוסס על הטמעה של התחברות באפליקציית Android באמצעות FirebaseUI. אפשר להוריד את קוד ההתחלה של ה-codelab הזה גם אם לא השלמתם את ה-codelab הקודם, אבל מומלץ קודם להשלים את ה-codelab Implementing Login on Android with FirebaseUI.

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

הורדת קובץ Zip

‫
… או משכפלים את מאגר GitHub משורת הפקודה באמצעות הפקודה הבאה ועוברים להסתעפות start של המאגר:

$  git clone https://github.com/googlecodelabs/android-kotlin-login-navigation

חשוב: קוד המתחילים נמצא בענף start של מאגר הנתונים שהורדתם.

אחרי שהפרויקט נטען ב-Android Studio:

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

אם הפעולה תצליח, מסך הבית יופיע עם עובדה מעניינת על Android ולחצן התחברות בפינה הימנית העליונה.

התכונות הנוכחיות של אפליקציית המתחילים:

• אם המשתמש לא מחובר לחשבון, לחיצה על הלחצן כניסה תתחיל את תהליך הכניסה ותאפשר למשתמש להיכנס באמצעות כתובת אימייל או חשבון Google.
• אם המשתמש מחובר לחשבון, הלחצן משתנה ללחצן יציאה שמאפשר למשתמש לצאת מהחשבון.

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

1. פתיחת fragment_main.xml.
2. ‫fragment_main.xml, מוסיפים לחצן הגדרות שמוטמע בתוך ConstraintLayout וממקמים אותו בפינה השמאלית העליונה של המסך.

fragment_main.xml

<TextView
       android:id="@+id/settings_btn"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="@dimen/text_margin"
       android:background="@color/colorAccent"
       android:padding="10dp"
       android:text="@string/settings_btn"
       android:textColor="#ffffff"
       android:textSize="20sp"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"/>

3. פתיחת nav_graph.xml.
4. מוסיפים פעולה בתוך mainFragment. הid של הפעולה הוא action_mainFragment_to_customizeFragment, והיעד הוא customizeFragment.

nav_graph.xml

<fragment
       android:id="@+id/mainFragment"
       android:name="com.example.android.firebaseui_login_sample.MainFragment"
       android:label="MainFragment">
   <action
           android:id="@+id/action_mainFragment_to_settingsFragment"
           app:destination="@id/settingsFragment"/>
</fragment>

5. פתיחת MainFragment.kt.
6. ב-onViewCreated(), מגדירים onClickListener ל-settings_btn, כך שהקשה על הלחצן תעביר את המשתמש אל customizeFragment.

MainFragment.kt

binding.settingsBtn.setOnClickListener {
   val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
   findNavController().navigate(action)
}

7. אם מופיעות שגיאות שלא נפתרו, צריך לבצע קומפילציה מחדש של האפליקציה מהתפריט Build (בנייה) כדי ליצור את פעולות הניווט החדשות שיצרתם ולהשתמש בהן.
8. מפעילים מחדש את האפליקציה. עכשיו אמור להיות לחצן הגדרות פעיל בפינה השמאלית העליונה.
9. לוחצים על הלחצן שאמור להעביר אתכם למסך הגדרות. במסך הגדרות יש רק אפשרות אחת: לאפשר למשתמש לבחור איזה סוג של עובדה מעניינת יוצג במסך הבית.
10. לוחצים על לחצן החזרה במכשיר Android כדי לחזור למסך הבית.

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

1. פתיחת SettingsFragment.kt.
2. ב-onViewCreated(), בודקים את authenticationState ומפנים את המשתמש ל-LoginFragment אם הוא לא מאומת.

SettingsFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   super.onViewCreated(view, savedInstanceState)
   val navController = findNavController()
   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> Log.i(TAG, "Authenticated")
           // If the user is not logged in, they should not be able to set any preferences,
           // so navigate them to the login fragment
           LoginViewModel.AuthenticationState.UNAUTHENTICATED -> navController.navigate(
               R.id.loginFragment
           )
           else -> Log.e(
               TAG, "New $authenticationState state that doesn't require any UI change"
           )
       }
   })
}

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

3. פתיחת LoginFragment.kt.
4. ב-onViewCreated(), מטפלים בפעולות של לחצן החזרה על ידי החזרת המשתמש ל-MainFragment.
   

LoginFragment.kt

// If the user presses the back button, bring them back to the home screen
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner) {
   navController.popBackStack(R.id.mainFragment, false)
}

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

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

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

אבל אחרי שתעברו את תהליך הכניסה, תועברו שוב למסך הכניסה. זו לא חוויית משתמש טובה, והיא עלולה לבלבל את המשתמשים.

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

1. עדיין ב-LoginFragment.kt, בכל מקום ב-onViewCreated(), מתבוננים ב-authenticationState ומפנים את המשתמש חזרה אל SettingsFragment אחרי שהאימות שלו מסתיים בהצלחה.

LoginFragment.kt

// Observe the authentication state so we can know if the user has logged in successfully.
// If the user has logged in successfully, bring them back to the settings screen.
// If the user did not log in successfully, display an error message.
viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
   when (authenticationState) {
      // Since our login flow is only one screen instead of multiple 
      // screens, we can utilize popBackStack(). If our login flow 
      // consisted of multiple screens, we would have to call 
      // popBackStack() multiple times.
       LoginViewModel.AuthenticationState.AUTHENTICATED -> navController.popBackStack()
       else -> Log.e(
           TAG,
           "Authentication state that doesn't require any UI change $authenticationState"
       )
   }
})

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

הוצאה של רכיב מהמחסנית האחורית באמצעות popBackStack()‎: כשהמשתמש מתקדם באפליקציה, מערכת Android עוקבת אחרי המסכים שהוא מבקר בהם. כשהמשתמש לוחץ על לחצן החזרה, האפליקציה חוזרת למסכים שבהם הוא ביקר, לפי הסדר.

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

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

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

אפשר לעיין באפליקציה המלאה עם כל קוד הפתרון במאגר הזה ב-Github: https://github.com/googlecodelabs/android-kotlin-login-navigation.

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

למידע נוסף על שיטות מומלצות לניווט ב-Android, אפשר לעיין במקורות המידע הבאים:

מסמכי תיעוד למפתחי Android:

• ניווט ב-Android
• ניווט מותנה
• פעולות גלובליות בניווט

Codelabs:

• Android Kotlin Fundamentals: Define navigation paths

קישורים למדריכי Codelab נוספים בקורס הזה זמינים בדף הנחיתה של מדריכי Codelab בנושא Android מתקדם ב-Kotlin.