Jetpack Compose – Intégration avec les APIs REST (Retrofit + Compose)

Bonjour à tous, cet article est le dernier de la série sur Jetpack Compose. Dans le développement Android moderne, l’intégration d’APIs REST avec Retrofit et Jetpack Compose est une méthode puissante pour récupérer et afficher des données en temps réel. Retrofit est une bibliothèque HTTP populaire qui facilite l'interaction avec des services web, tandis que Jetpack Compose permet de créer des interfaces utilisateur déclaratives et réactives. Cet article détaillera les étapes pour configurer Retrofit avec Jetpack Compose et gérer les données d'API de manière fluide.

Pourquoi utiliser Retrofit avec Jetpack Compose ?

Jetpack Compose simplifie la gestion des interfaces utilisateur avec une approche déclarative, ce qui est particulièrement utile pour les applications réactives. Cependant, pour récupérer des données de manière efficace et fluide depuis un serveur, Retrofit est la solution idéale. Retrofit se charge des appels réseau et transforme automatiquement les données JSON reçues en objets Kotlin. En combinant Retrofit avec Jetpack Compose, tu peux créer une interface réactive qui gère facilement les réponses de l'API.

Configuration de Retrofit

Avant de commencer, tu dois ajouter les dépendances nécessaires à ton projet. Ouvre ton fichier build.gradle et ajoute les lignes suivantes :

dependencies {
    implementation "com.squareup.retrofit2:retrofit:2.9.0"
    implementation "com.squareup.retrofit2:converter-gson:2.9.0"
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1" // ViewModel pour gérer les états
}

Créer l'interface ApiService

Ensuite, tu dois définir l'interface ApiService, qui va gérer les requêtes HTTP. Par exemple, si tu veux récupérer des posts, voici comment définir l'endpoint avec Retrofit :

interface ApiService {
    @GET("posts")
    suspend fun getPosts(): List<Post>
}

Configurer l'instance Retrofit

Maintenant, configure l'instance Retrofit pour utiliser l'interface ApiService :

val retrofit = Retrofit.Builder()
    .baseUrl("https://jsonplaceholder.typicode.com/")
    .addConverterFactory(GsonConverterFactory.create())
    .build()
val apiService = retrofit.create(ApiService::class.java)

Ici, baseUrl est l'URL de base de l'API, et GsonConverterFactory est utilisé pour convertir les réponses JSON en objets Kotlin.

Affichage des données avec Jetpack Compose

Une fois que Retrofit est configuré, tu peux utiliser Jetpack Compose pour afficher les données récupérées de manière fluide. Nous allons utiliser une LazyColumn pour afficher les éléments sous forme de liste.

@Composable
fun PostListScreen() {
    val coroutineScope = rememberCoroutineScope()
    var posts by remember { mutableStateOf(emptyList<Post>()) }

    LaunchedEffect(Unit) {
        coroutineScope.launch {
            posts = apiService.getPosts()
        }
    }

    LazyColumn {
        items(posts) { post ->
            Text(post.title, modifier = Modifier.padding(8.dp))
        }
    }
}

Le LaunchedEffect est utilisé pour lancer une coroutine lors de la composition de l'écran, ce qui permet de récupérer les données depuis l'API.

Gestion des erreurs de réseau

Il est essentiel de gérer les erreurs pour garantir une bonne expérience utilisateur. Par exemple, tu peux utiliser un bloc try-catch pour capturer les exceptions lors des appels réseau et afficher un message d'erreur si nécessaire :

try {
    val response = apiService.getPosts()
    if (response.isNotEmpty()) {
        posts = response
    } else {
        Log.e("API", "Aucune donnée reçue")
    }
} catch (e: Exception) {
    Log.e("API", "Erreur : ${e.message}")
}

Cela évite que l'application ne plante si l'API est inaccessible ou si une autre erreur survient.

Optimisation avec ViewModel et LiveData

Pour éviter d'exécuter plusieurs fois la même requête API et pour gérer l'état de manière propre, il est conseillé d'utiliser un ViewModel. Le ViewModel permet de gérer l'état de l'interface utilisateur de manière réactive sans avoir à s'inquiéter des recompositions.

Voici comment utiliser un ViewModel pour récupérer les posts :

class PostViewModel : ViewModel() {
    private val _posts = MutableLiveData<List<Post>>()
    val posts: LiveData<List<Post>> get() = _posts

    init {
        viewModelScope.launch {
            _posts.value = apiService.getPosts()
        }
    }
}

Tu peux ensuite observer les LiveData dans ton composable pour mettre à jour l'interface utilisateur chaque fois que les données changent.

Conclusion

L'intégration de Retrofit avec Jetpack Compose permet de créer des applications Android modernes et réactives qui consomment des APIs REST. Retrofit gère les appels réseau, tandis que Jetpack Compose facilite l'affichage réactif des données. En utilisant un ViewModel, tu peux optimiser la gestion des états et éviter les requêtes répétitives, garantissant ainsi une expérience utilisateur fluide et performante.

Sources

• GeeksforGeeks. « How to Post Data to API Using Retrofit in Android Using Jetpack Compose », dans GeeksforGeeks, 2025/03/10, https://www.geeksforgeeks.org/how-to-post-data-to-api-using-retrofit-in-android-using-jetpack-compose/.

• İbrahim Korucuoğlu. « Handling Network Requests with Retrofit and Compose in Jetpack Compose », dans Siberoloji, 2025/03/04, https://siberoloji.github.io/handling-network-requests-with-retrofit-and-compose-in-jetpack-compose/.