Jetpack Compose Academy · درس

واجهة التحميل والنجاح والخطأ

اعرض كل نتيجة من نتائج الشبكة بوضوح

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

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Every Request Has Three Outcomes

A network call is either still loading, finished with data, or failed. Great screens show something honest for all three.

Model State With a Sealed Class

A sealed class captures those outcomes as distinct types, so the compiler forces you to handle each case in the UI.

sealed class UiState {
    object Loading : UiState()
    data class Success(val users: List<User>) : UiState()
    data class Error(val message: String) : UiState()
}

Start in the Loading State

Initialize your state as Loading so the screen shows a spinner the instant it appears, before any data arrives.

var state by mutableStateOf<UiState>(UiState.Loading)

Update on Success

When the call returns, swap the state to Success with the fetched list. Compose recomposes and reveals the content.

state = UiState.Success(api.getUsers())

Update on Error

In your catch block, move to the Error state with a friendly message instead of leaving the user stuck on a spinner.

catch (e: Exception) {
    state = UiState.Error("Couldn't load users")
}

Branch With when

In the Composable, use a when over the state. Each branch renders exactly the right UI for that outcome.

when (val s = state) {
    is UiState.Loading -> { }
    is UiState.Success -> { }
    is UiState.Error -> { }
}

Show a Spinner While Loading

For the loading branch, a centered CircularProgressIndicator reassures users that something is happening. ⏳

is UiState.Loading -> CircularProgressIndicator()

Render the Data on Success

The success branch reads the list and draws it, usually in a LazyColumn so long results scroll smoothly.

is UiState.Success -> UserList(s.users)

Offer a Retry on Error

The error branch should show the message plus a Retry button that re-runs your load function. Failures shouldn't be dead ends.

is UiState.Error -> RetryView(s.message, ::loadUsers)

Handle the Empty Case

Success doesn't always mean items. When the list is empty, show a calm empty state rather than a blank screen.

One State Drives the Whole Screen

Because a single state object decides everything, your UI can never show a spinner and data at once. It stays predictable.

Quick Check

Why model loading, success, and error as a sealed class?

Recap: Rendering Every Outcome

You modeled state as a sealed class, branched with when, and showed loading, data, errors, and empties. You can now ship a robust networked screen.

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

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

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

ماذا ستتعلم في «واجهة التحميل والنجاح والخطأ»؟

اعرض كل نتيجة من نتائج الشبكة بوضوح تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

← العودة إلى Jetpack Compose Academy