این کد لبه بخشی از دوره Advanced Android in Kotlin است. اگر از طریق کدها به ترتیب کار کنید، بیشترین ارزش را از این دوره خواهید گرفت، اما اجباری نیست. همه کدهای دوره در صفحه فرود Android Advanced in Kotlin Codelabs فهرست شده اند.
این کد لبه بر روی Implementing Login در اندروید با FirebaseUI ساخته شده است. در حالی که اگر کدهای قبلی را انجام ندادهاید، میتوانید کد شروع را برای این کد لبه دانلود کنید، ممکن است برایتان مفید باشد که ابتدا پیادهسازی ورود به سیستم اندروید را با FirebaseUI codelab کامل کنید.
مقدمه
اگر برنامه شما از ورود به سیستم پشتیبانی می کند، این یک مورد معمول است که بخش هایی از برنامه را فقط برای کاربرانی که وارد سیستم شده اند رزرو کنید. برای مثال، ممکن است بخواهید صفحه تنظیمات برنامه خود را برای کاربران وارد شده رزرو کنید.
برای چنین مواردی، می توانید از پیمایش شرطی استفاده کنید تا کاربران را بر اساس وضعیت احراز هویت آنها به صفحه نمایش مناسب بیاورید.
در این کد لبه، شما در بالای یک برنامه موجود میسازید تا یک صفحه تنظیمات اضافه کنید که تنها در صورت ورود کاربران به آن قابل دسترسی خواهد بود. شما از اجزای ناوبری اندروید برای این کار استفاده خواهید کرد.
آنچه از قبل باید بدانید
- جزء ناوبری اندروید و نحوه استفاده از آن در برنامه های اندروید
- نحوه اجرای لاگین در برنامه اندروید شما با کتابخانه FirebaseUI. اگر با این مفهوم آشنا نیستید، باید از طریق Implementing Login در اندروید با FirebaseUI codelab بروید.
چیزی که یاد خواهید گرفت
- چگونه کاربران را بر اساس اینکه آیا وارد شده اند یا خیر، به صفحه های مناسب برنامه خود هدایت کنید.
کاری که خواهی کرد
- پس از ورود موفقیت آمیز کاربران به صفحه نمایش صحیح، آنها را به درستی مدیریت کنید.
- از دسترسی کاربران به صفحه تنظیمات در صورت عدم ورود به سیستم جلوگیری کنید و در عوض آنها را به صفحه ورود هدایت کنید.
در کدهای قبلی، شما روی برنامه ای کار می کردید که حقایق اندروید را نمایش می داد. برنامه شما همچنین به کاربران اجازه ورود و خروج را می داد. برای این کد لبه، یک صفحه تنظیمات به برنامه موجود اضافه خواهید کرد. صفحه تنظیمات تنها در صورتی برای کاربر قابل دسترسی خواهد بود که وارد سیستم شده باشد.
اگر کاربر وارد نشده باشد، هنگامی که سعی می کند به صفحه تنظیمات دسترسی پیدا کند، برنامه آنها را به صفحه ورود هدایت می کند. هنگامی که جریان ورود با موفقیت کامل شد، کاربر به صفحه تنظیماتی که در ابتدا سعی کرده بود به آن دسترسی داشته باشد بازگردانده می شود.
این کد لبه بر روی Implementing Login در اندروید با FirebaseUI ساخته شده است. در حالی که اگر کدهای قبلی را انجام ندادهاید، میتوانید کد شروع را برای این کد لبه دانلود کنید، ممکن است برایتان مفید باشد که ابتدا پیادهسازی ورود به سیستم اندروید را با FirebaseUI codelab کامل کنید.
نمونه برنامه را دانلود کنید، می توانید یکی از موارد زیر را:
... یا با استفاده از دستور زیر مخزن GitHub را از خط فرمان کلون کنید و به شاخه start
مخزن بروید:
$ git clone https://github.com/googlecodelabs/android-kotlin-login-navigation
هنگامی که پروژه را در Android Studio بارگذاری کردید:
- برنامه را روی یک شبیه ساز یا دستگاه فیزیکی اجرا کنید تا مطمئن شوید که محیط شما با موفقیت برای شروع توسعه راه اندازی شده است.
اگر موفقیت آمیز بود، باید صفحه اصلی را ببینید که یک واقعیت سرگرم کننده اندروید و یک دکمه ورود به سیستم را در گوشه بالا سمت چپ نشان می دهد.
ویژگی های فعلی برنامه استارتر:
- اگر کاربر وارد نشده باشد، با زدن دکمه ورود ، جریان ورود شروع می شود و به کاربر اجازه می دهد با یک آدرس ایمیل یا حساب Google وارد سیستم شود.
- اگر کاربر وارد شده باشد، دکمه به یک دکمه خروج تغییر می کند که به کاربر اجازه می دهد از سیستم خارج شود.
در این کار، دکمه ای را در صفحه اصلی اضافه می کنید که به کاربر اجازه می دهد به صفحه تنظیمات حرکت کند. صفحه تنظیمات به کاربر اجازه می دهد انتخاب کند که چه نوع حقایق سرگرم کننده ای را می خواهد در صفحه اصلی نمایش داده شود. از صفحه تنظیمات، آنها می توانند حقایق مربوط به Android یا حقایق مربوط به ایالت کالیفرنیا را ببینند.
-
fragment_main.xml
را باز کنید. - در
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"/>
-
nav_graph.xml
باز کنید. - یک عمل در
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>
-
MainFragment.kt
را باز کنید. - در
onViewCreated()
یکonClickListener
برایsettings_btn
تنظیم کنید، به طوری که با ضربه زدن روی دکمه، کاربر به سمتcustomizeFragment
هدایت شود.
MainFragment.kt
binding.settingsBtn.setOnClickListener {
val action = MainFragmentDirections.actionMainFragmentToSettingsFragment()
findNavController().navigate(action)
}
- اگر خطاهای حلنشدهای میبینید، برنامه را از منوی Build دوباره کامپایل کنید تا اقدامات ناوبری جدیدی که ایجاد کردهاید ایجاد و استفاده شود.
- برنامه را دوباره راه اندازی کنید. اکنون باید یک دکمه تنظیمات کاربردی در گوشه سمت راست بالا وجود داشته باشد.
- روی دکمه ای که باید شما را به صفحه تنظیمات هدایت کند کلیک کنید. صفحه تنظیمات فقط یک گزینه دارد، به کاربر اجازه می دهد نوع واقعیت سرگرم کننده را انتخاب کند که می خواهد در صفحه اصلی نمایش داده شود.
- روی دکمه برگشت دستگاه اندروید کلیک کنید تا به صفحه اصلی بازگردید.
در این کار، کدی را اضافه میکنید تا کاربر در صورت عدم ورود به صفحه تنظیمات، به صفحه ورود به سیستم هدایت شود.
-
SettingsFragment.kt
باز کنید. - در
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"
)
}
})
}
از آنجایی که برنامه در صورت تلاش برای دسترسی به صفحه تنظیمات، کاربر را به صفحه ورود می برد، برنامه همچنین باید رفتار دکمه برگشت را در صفحه ورود کنترل کند. اگر برنامه کنترل رفتار دکمه بازگشت را سفارشی نکند، کاربر در یک حلقه بی نهایت تلاش برای بازگشت به صفحه تنظیمات گیر می کند، اما سپس دوباره به صفحه ورود هدایت می شود.
-
LoginFragment.kt
را باز کنید. - در
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)
}
- برنامه خود را دوباره راه اندازی کنید و تأیید کنید که اگر وارد سیستم نشده اید، تلاش برای دسترسی به صفحه تنظیمات اکنون شما را به جریان ورود هدایت می کند.
در حالی که شما با موفقیت کاربر را به ورود به سیستم هدایت کرده اید، اما آنچه را که پس از ورود موفقیت آمیز کاربر به سیستم وارد می شود کنترل نکرده اید، بنابراین تلاش برای ورود به سیستم به گونه ای ظاهر می شود که گویی کار نمی کند. در مرحله بعد این را برطرف خواهید کرد.
تا کنون، شما با موفقیت برنامه خود را راه اندازی کرده اید تا اگر کاربر سعی می کند بدون وارد شدن به صفحه تنظیمات، به صفحه ورود به سیستم هدایت شود.
با این حال، پس از عبور از جریان ورود به سیستم، دوباره به صفحه ورود بازگردانده می شوید. این یک تجربه کاربری خوب نیست و می تواند گیج کننده باشد.
برای ارائه تجربه کاربری ایده آل، برنامه باید پس از ورود موفقیت آمیز کاربر به صفحه تنظیمات، کاربر را به صفحه تنظیمات بازگرداند.
- هنوز در
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"
)
}
})
- برنامه خود را دوباره اجرا کنید و تأیید کنید که اکنون وقتی با موفقیت وارد سیستم شدید، به جای صفحه ورود به صفحه تنظیمات وارد شوید.
می توانید برنامه کامل را با تمام کدهای راه حل در این مخزن Github https://github.com/googlecodelabs/android-kotlin-login-navigation بررسی کنید.
در این نرمافزار کد، بهترین روشها را برای ایجاد یک تجربه کاربری خوب در برنامهای که از ورود پشتیبانی میکند، یاد گرفتید. با مشاهده وضعیت احراز هویت برنامه، میتوانید تعیین کنید که کاربر به کدام صفحهها دسترسی داشته باشد و در صورت نیاز آنها را به صفحه ورود هدایت کند.
برای اطلاعات بیشتر در مورد بهترین شیوه های ناوبری در Android، منابع زیر را بررسی کنید:
مستندات توسعه دهنده اندروید:
Codelabs:
برای پیوند به دیگر کدلب ها در این دوره، صفحه فرود Advanced Android in Kotlin Codelabs را ببینید.