0Pricing
Android Academy · درس

معالجة الأخطاء وتجربة المستخدم

نمذجوا حالات واجهة المستخدم باستخدام sealed classes ‏(Loading/Success/Error). اعرضوا ProgressBar وSnackbar مع إجراءات Retry، وأخطاء التحقق المضمّنة في TextInputLayout.

معالجة الأخطاء وتجربة المستخدم درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 3 من أصل 6. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 6 دروس في المجموع.

أهمية معالجة الأخطاء

تبدو التطبيقات التي تتعطل أو تتجمد من دون تفسير معطلة. لا يعرف المستخدمون ما حدث أو ما ينبغي عليهم فعله بعد ذلك.

تعني معالجة الأخطاء الجيدة ما يلي:

  • يبقى التطبيق مستقرًا
  • يتلقى المستخدمون رسالة واضحة
  • يمكنهم إعادة المحاولة أو اتخاذ إجراء

وهذا هو الفرق بين تقييم نجمتين وتقييم خمس نجوم للتطبيق.

نمذجة حالة واجهة المستخدم

نمط واضح: نمذج جميع حالات واجهة المستخدم المحتملة باستخدام sealed class:

  • Loading — الطلب قيد التنفيذ
  • Success(data) — البيانات متاحة
  • Error(message) — حدث خطأ ما

يُصدر ViewModel إحدى هذه الحالات، ثم تعرضها واجهة المستخدم.

UiState باستخدام Sealed Class

عرّف sealed class لجميع الحالات المحتملة:

sealed class UiState<out T> {
    object Loading : UiState<Nothing>()
    data class Success<T>(val data: T) : UiState<T>()
    data class Error(val message: String) : UiState<Nothing>()
}

// In ViewModel:
private val _state = MutableLiveData<UiState<List<Post>>>()
val state: LiveData<UiState<List<Post>>> = _state

fun loadPosts() {
    _state.value = UiState.Loading
    viewModelScope.launch {
        try {
            val posts = withContext(Dispatchers.IO) { repo.getPosts() }
            _state.value = UiState.Success(posts)
        } catch (e: Exception) {
            _state.value = UiState.Error(e.message ?: "Unknown error")
        }
    }
}

عرض الحالة في واجهة المستخدم

راقب الحالة واعرض العرض المناسب لكل حالة:

viewModel.state.observe(this) { state ->
    when (state) {
        is UiState.Loading -> {
            binding.progressBar.visibility = View.VISIBLE
            binding.recyclerView.visibility = View.GONE
            binding.tvError.visibility = View.GONE
        }
        is UiState.Success -> {
            binding.progressBar.visibility = View.GONE
            binding.recyclerView.visibility = View.VISIBLE
            adapter.submitList(state.data)
        }
        is UiState.Error -> {
            binding.progressBar.visibility = View.GONE
            binding.tvError.text = state.message
            binding.tvError.visibility = View.VISIBLE
        }
    }
}

ProgressBar أثناء التحميل

اعرض ProgressBar أثناء انتظار البيانات:

  • استخدم android:indeterminate="true" لعرض مؤشر تحميل دوّار
  • بدّل مستوى الظهور بين View.VISIBLE وView.GONE
  • يزيل GONE العرض من التخطيط (وليس فقط جعله غير مرئي — إذ لا يشغل أي مساحة)

Snackbar أم Toast

فضّل استخدام Snackbar على Toast لرسائل الخطأ:

  • يمكن أن يحتوي Snackbar على زر إجراء (مثل "إعادة المحاولة")
  • يرتبط بالشاشة الحالية، ولا يطفو فوق التطبيقات الأخرى
  • يختفي تلقائيًا أو عند النقر عليه

Snackbar مع إعادة المحاولة

اعرض خطأً مع زر إجراء لإعادة المحاولة:

import com.google.android.material.snackbar.Snackbar

fun showError(message: String) {
    Snackbar.make(
        binding.root,  // root view of the screen
        message,
        Snackbar.LENGTH_INDEFINITE  // stays until dismissed
    ).setAction("Retry") {
        viewModel.loadPosts()  // retry the request
    }.show()
}

التحقق من صحة الإدخال

تحقق من صحة إدخال المستخدم قبل إرساله إلى الخادم:

  • استخدم TextInputLayout مع الخاصية error لعرض الأخطاء المضمّنة أسفل الحقل
  • تحقق من الحقول الفارغة، وتنسيق البريد الإلكتروني، وطول كلمة المرور قبل استدعاء API
  • امسح الأخطاء عندما يبدأ المستخدم بالكتابة

خطأ TextInputLayout

اعرض أخطاء التحقق المضمّنة في حقول النموذج:

fun validateAndSubmit() {
    val email = binding.etEmail.text.toString().trim()
    val password = binding.etPassword.text.toString()

    var hasError = false

    if (email.isBlank() || !email.contains("@")) {
        binding.tilEmail.error = "Enter a valid email"
        hasError = true
    } else {
        binding.tilEmail.error = null  // clear error
    }

    if (password.length < 6) {
        binding.tilPassword.error = "Minimum 6 characters"
        hasError = true
    } else {
        binding.tilPassword.error = null
    }

    if (!hasError) viewModel.login(email, password)
}

تحقق سريع

ما حالة ظهور العرض التي تزيله بالكامل من التخطيط (بحيث لا يشغل أي مساحة)؟

مراجعة: معالجة الأخطاء وتجربة المستخدم

يمكن لتطبيقاتك الآن التعامل مع الأخطاء بسلاسة:

  • نمذجة الحالة على شكل Loading / Success / Error باستخدام sealed class
  • عرض ProgressBar أثناء التحميل
  • استخدام Snackbar مع إجراء Retry لأخطاء الشبكة
  • استخدام أخطاء TextInputLayout المضمّنة للتحقق من صحة النماذج
  • View.GONE مقابل View.INVISIBLE — إزالة العرض مقابل إخفائه

الدرس الأخير: انشر تطبيقك على Play Store!

الأسئلة الشائعة

هل درس «معالجة الأخطاء وتجربة المستخدم» مجاني؟

نعم — نص درس «معالجة الأخطاء وتجربة المستخدم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 6 دروس في المجموع.

ماذا ستتعلم في «معالجة الأخطاء وتجربة المستخدم»؟

نمذجوا حالات واجهة المستخدم باستخدام sealed classes ‏(Loading/Success/Error). اعرضوا ProgressBar وSnackbar مع إجراءات Retry، وأخطاء التحقق المضمّنة في TextInputLayout. تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟

لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 6.

كم من الوقت يستغرق درس «معالجة الأخطاء وتجربة المستخدم»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟

نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. Retrofit وواجهات REST API
  2. تحميل الصور باستخدام Coil
  3. معالجة الأخطاء وتجربة المستخدم
  4. الإشعارات الفورية
  5. WorkManager والمهام في الخلفية
  6. النشر على Play Store
← العودة إلى Android Academy