03-Le_design_pattern_MVVM

Le design pattern MVVM

1. Introduction aux MVVM

Sommaire

2. Mise en pratique du MVVM

Objectifs : découvrez dans cette séquence de formation l'intérêt d'utiliser la structure MVVM et comment la mettre en place.

Introduction aux MVVM

1. Introduction au design pattern MVVM

Présentation générale du pattern MVVM :

Le pattern MVVM (Modèle-Vue-VueModèle) est un design pattern qui facilite la séparation des préoccupations (separation of concerns) et la création d'interfaces utilisateur réactives dans le développement d'applications mobiles. Il a été introduit par Microsoft pour le développement d'applications WPF (Windows Presentation Foundation) et a depuis été adopté par d'autres plateformes, y compris Android.

1. Introduction au design pattern MVVM

Avantages et objectifs du MVVM :

Le MVVM présente plusieurs avantages dans le développement mobile, notamment : - Une meilleure séparation des responsabilités entre les différents composants de l'application. - Une meilleure testabilité grâce à la facilité de tester indépendamment les composants Vue et VueModèle. - Une réutilisabilité accrue des composants grâce à leur indépendance les uns des autres. - Une meilleure gestion de l'état de l'application grâce au VueModèle.

1. Introduction au design pattern MVVM

Composants clés du MVVM :

1. Modèle (Model) Le Modèle représente les données et la logique métier de l'application. Il peut inclure des classes de données, des API de réseau, des bases de données, etc. Le Modèle ne connaît pas l'existence des autres composants du MVVM. 2. Vue (View) La Vue est responsable de l'affichage des éléments graphiques à l'utilisateur et de la gestion des interactions utilisateur. Elle observe les données du VueModèle et les affiche à l'écran. La Vue ne contient pas de logique métier. VueModèle (ViewModel) Le VueModèle agit comme un pont entre le Modèle et la Vue. Il contient la logique métier, gère l'état de l'application et expose les données nécessaires à la Vue. Il peut également gérer des événements, des actions de l'utilisateur, etc. Le VueModèle ne connaît pas l'existence de la Vue.

1. Introduction au design pattern MVVM

Intéraction entre les composants MVVM :

L'intéraction entre les composants MVVM se fait principalement par le biais de l'observation (observables) et de la liaison de données : - La Vue observe les données exposées par le VueModèle et met à jour l'interface utilisateur en conséquence. - Le VueModèle récupère ou génère les données du Modèle, les expose à la Vue via des observables (comme LiveData) et réagit aux actions de l'utilisateur. Ces concepts clés du design pattern MVVM vous permettront de comprendre la structure et l'organisation des composants dans une application mobile utilisant MVVM avec Kotlin et Jetpack Compose.

1. Introduction au design pattern MVVM

Schéma représentatif du design pattern MVVM :

VIEW

Réponse du modèle observable

Événements de l'interface

VIEWMODEL

Changement du modèle observable

Envoi d'une requête

MODEL

Mise en pratique du MVVM

2. Mise en pratique du MVVM

Application gestion de tâches :

Nous allons créer une application de gestion de tâches simple à l'aide du framework Jetpack Compose, le langage Kotlin avec le Design Pattern MVVM. Cette application vous permettra de comprendre les concepts fondamentaux de la gestion des données dans le développement Android moderne. Imaginez que vous avez une liste de tâches à accomplir, que ce soit pour votre travail ou vos activités quotidiennes. Notre application de gestion de tâches vous permettra de noter ces tâches, de les afficher, de les supprimer. Attention, Les slides qui suivent vous guideront à travers la mise en œuvre du modèle de conception et la façon dont les différentes classes sont interconnectées. Le code présenté sur ces slides devra être ajusté ou complété lors de l'exercice associé à cette partie du cours.

2. Mise en pratique du MVVM

Ajout de dépendances :

Dans un premier temps, ajoutez les dépendances suivantes pour la mise en place de l'asynchrone et gestion du ViewModel. Au cours de cette session, nous allons plonger dans le code source de l'application et découvrir comment les Composables, les ViewModels, et les StateFlows sont utilisés pour créer une expérience utilisateur fluide et interactive. Commençons par jeter un coup d'œil à l'interface utilisateur de l'application et voir comment elle fonctionne. Ensuite, nous explorerons le code source pour comprendre comment tout cela est mis en place.

2. Mise en pratique du MVVM

Création du modèle (Model) :

Définissez votre modèle de données en créant la classe Task, qui représente une tâche avec des propriétés telles que id, title, et description. Au cours de cette session, nous allons plonger dans le code source de l'application et découvrir comment les Composables, les ViewModels, et les StateFlows sont utilisés pour créer une expérience utilisateur fluide et interactive. Commençons par jeter un coup d'œil à l'interface utilisateur de l'application et voir comment elle fonctionne. Ensuite, nous explorerons le code source pour comprendre comment tout cela est mis en place.

2. Mise en pratique du MVVM

Création de l'interface du référentiel (Repository) :

Définissez une interface TaskRepository qui définit les opérations pour interagir avec les données de tâche, telles que getAllTasks, addTask, et deleteTask pour récupérer, ajouter et supprimer des tâches. Les méthodes marquées comme suspend sont conçues pour être utilisées de manière asynchrone (Coroutines) dans le contexte de l'application. Au cours de cette session, nous allons plonger dans le code source de l'application et découvrir comment les Composables, les ViewModels, et les StateFlows sont utilisés pour créer une expérience utilisateur fluide et interactive. Commençons par jeter un coup d'œil à l'interface utilisateur de l'application et voir comment elle fonctionne. Ensuite, nous explorerons le code source pour comprendre comment tout cela est mis en place.

2. Mise en pratique du MVVM

Implémentation du référentiel (Repository) :

Créez une classe TaskRepositoryImpl qui implémente l'interface TaskRepository. Cette classe gère le stockage et l'accès aux données des tâches. Au cours de cette session, nous allons plonger dans le code source de l'application et découvrir comment les Composables, les ViewModels, et les StateFlows sont utilisés pour créer une expérience utilisateur fluide et interactive. Commençons par jeter un coup d'œil à l'interface utilisateur de l'application et voir comment elle fonctionne. Ensuite, nous explorerons le code source pour comprendre comment tout cela est mis en place.

2. Mise en pratique du MVVM

Création du ViewModel :

Créez une classe TaskViewModel qui étend ViewModel. Dans cette classe, déclarez une propriété tasks qui récupère la liste des tâches à partir du référentiel en utilisant repository.getAllTasks(). Au cours de cette session, nous allons plonger dans le code source de l'application et découvrir comment les Composables, les ViewModels, et les StateFlows sont utilisés pour créer une expérience utilisateur fluide et interactive. Commençons par jeter un coup d'œil à l'interface utilisateur de l'application et voir comment elle fonctionne. Ensuite, nous explorerons le code source pour comprendre comment tout cela est mis en place.

2- Exercice

Terminé !

Vous venez de terminer cette séquence de formation ! Bravo à présent c'est à vous de jouer ! Rendez-vous dans VirtualSchool pour poursuivre l'aventure... Au programme exercice 3 intitulé : "Application To-Do List"

Retour sur VirtualSchool