Android Natif - Anthony Da Cruz

#📰 Actualités MVVM

Dans cette partie nous allons développer un écran simple pour afficher des actualités Dwitch, avec le design pattern MVVM.

#🧠 Notions

Il va nous ĂŞtre utilse pour comprendre et appliquer de nouvelles notions :

  • Mise en place de l’architecture MVVM
  • Affichage d’image asynchrone

🛟 MVVM

  • Comme d’habitude il faudra faire un tour dans les ressources pour d’abord comprendre ce qu’est l’architecture MVVM.
  • Comprendre comment l’utiliser et utiliser les exemples fournis.

#Etape 1 - Couche modèle

#✅ Complétez les tâches suivantes

  • Mettez en place les modèles de donnĂ©es nĂ©cessaires pour afficher les actualitĂ©s
Exemple de Post pour un article JSON
json
{
  "data": [
    {
      "id": 17,
      "documentId": "z7knpkka6l7nac4hic1b779s",
      "title": "Collaboration avec les Fromagers des Aravis",
      "content": "Dwitch s'associe aux Fromagers des Aravis pour vous proposer une sélection exclusive de fromages AOP dans nos sandwichs. Reblochon, Tomme, Abondance... Des produits d'exception sélectionnés avec soin pour des saveurs authentiques !",
      "createdAt": "2024-12-07T12:33:39.870Z",
      "updatedAt": "2024-12-07T12:38:10.543Z",
      "publishedAt": "2024-12-07T12:38:10.680Z",
      "medias": [
        {
          "id": 26,
          "documentId": "jh4lhm3vcscyvn8aviym0z02",
          "name": "snacking-7.jpg",
          "alternativeText": null,
          "caption": null,
          "width": 1400,
          "height": 932,
          "formats": {
            "large": {
              "ext": ".jpg",
              "url": "/uploads/large_snacking_7_67506e1580.jpg",
              "hash": "large_snacking_7_67506e1580",
              "mime": "image/jpeg",
              "name": "large_snacking-7.jpg",
              "path": null,
              "size": 76.74,
              "width": 1000,
              "height": 666,
              "sizeInBytes": 76744
            },
            "small": {
              "ext": ".jpg",
              "url": "/uploads/small_snacking_7_67506e1580.jpg",
              "hash": "small_snacking_7_67506e1580",
              "mime": "image/jpeg",
              "name": "small_snacking-7.jpg",
              "path": null,
              "size": 25.83,
              "width": 500,
              "height": 333,
              "sizeInBytes": 25829
            },
            "medium": {
              "ext": ".jpg",
              "url": "/uploads/medium_snacking_7_67506e1580.jpg",
              "hash": "medium_snacking_7_67506e1580",
              "mime": "image/jpeg",
              "name": "medium_snacking-7.jpg",
              "path": null,
              "size": 48.96,
              "width": 750,
              "height": 499,
              "sizeInBytes": 48964
            },
            "thumbnail": {
              "ext": ".jpg",
              "url": "/uploads/thumbnail_snacking_7_67506e1580.jpg",
              "hash": "thumbnail_snacking_7_67506e1580",
              "mime": "image/jpeg",
              "name": "thumbnail_snacking-7.jpg",
              "path": null,
              "size": 8.2,
              "width": 234,
              "height": 156,
              "sizeInBytes": 8195
            }
          },
          "hash": "snacking_7_67506e1580",
          "ext": ".jpg",
          "mime": "image/jpeg",
          "size": 431.83,
          "url": "/uploads/snacking_7_67506e1580.jpg",
          "previewUrl": null,
          "provider": "local",
          "provider_metadata": null,
          "createdAt": "2024-12-07T12:37:53.181Z",
          "updatedAt": "2024-12-07T12:37:53.181Z",
          "publishedAt": "2024-12-07T12:37:53.186Z"
        }
      ]
    },
  ]
}

#🛟 Aide

  • Essayez de simplifier le modèle, notamment pour les mĂ©dias, vous n’avez pas besoin de toutes les informations pour afficher une image.

#Etape 2 - ViewModel

🛑 Attention

Ne codez pas encore la vue, travaillez avec le ViewModel et les modèles de données pour récupérer les actualités puis affichez les dans Timber.

#✅ Complétez les tâches suivantes

  • Installez les dĂ©pendances nĂ©cessaires pour le ViewModel
  • CrĂ©ez un ViewModel pour les actualitĂ©s -> NewsViewModel ou PostViewModel
  • CrĂ©ez une fonction pour rĂ©cupĂ©rer les actualitĂ©s -> loadNews() par exemple
  • Utilisez Retrofit pour rĂ©cupĂ©rer les donnĂ©es depuis l’API Dwitch (/posts)

🍒 Si vous êtes chaud

Utilisez les flows pour gérer les données de manière plus propre et plus moderne.

#Etape 3 - Vue

#✅ Complétez les tâches suivantes

  • Construisez une vue pour afficher les actualitĂ©s
  • Affichez les images des actualitĂ©s
  • Connectez votre ViewModel Ă  votre vue
  • Mettez en place un UIState pour gĂ©rer les Ă©tats
  • Les Ă©tats de chargement, d’erreurs, de succès et de vide doivent ĂŞtre gĂ©rĂ©s

#🛟 Aide

  • Pour afficher les images distantes utilisez AsyncImage de Coil par exemple -> Installez la dĂ©pendance Coil
  • Utilisez bien le viewModelScope pour lancer les appels rĂ©seau de manière asynchrone
  • Il faudra rajouter l’URL de base du serveur Dwitch pour complĂ©ter les URL des images (sans le /api)

🎒 UI State

Dans les ressources vous trouverez des exemples pour gérer les états de votre interface utilisateur.

  • Vous devez afficher un CircularProgressIndicator lors du chargement, un message d’erreur en cas d’erreur, un message de succès si la liste est vide, et les news si tout s’est bien passĂ©.

🌆 Images & Coil

đź‘Ś Bravo !

Vous avez encore appris pas mal de notions importantes pour le développement Android moderne.

NavigationBravo !? 🎉