EXAMEN

Semestre : 1 2
Session : Principale Rattrapage

Module : Développement mobile Cross platform

Enseignant(s) : Equipe mobile
Classe(s) : 4 SIM 1,2,3,4

Documents autorisés : OUI Nombre de pages :

Calculatrice autorisée : NON Internet autorisée : NON

Date : 12/01/2022 Heure : 13h00 Durée : 01h30

* La validation tient compte seulement de l’exécutable de l’application, l’étudiant sera noté

pour chaque interface fonctionnelle.
* Il faut respecter les dispositions des composants graphiques, leurs formes et leurs tailles
comme dans les figures en dessous.
* La gestion des sessions est effectuée à l’aide de « shared preferences ».
* L’image logo.png est à récupérer à partir des ressources du projet.
* Pour s’authentifier voici les codes d’inscription à utiliser : 102, 104
* Pour exécuter votre projet sur un emulateur android, utilisez l’adresse suivante : 10.0.2.2
* Les ressources numériques sont : examen en version pdf et une collection postman et
insomnia

Vous êtes amené à développer une application mobile android et iOS pour la plateforme web
« evax » afin de faciliter la gestion des vaccinations et la prise de RDVs.

Pour ce faire, vous allez utiliser « Flutter » afin de réaliser les différentes interfaces/fonctionnalités
de l’application comme suit :

Interface d’authentification :

- L’interface d’authentification contient (voir figure 1) : 


• Une image récupérée à partir des ressources du projet « logo.png ».

• Un champ de saisie pour ajouter le code d’inscription et une marge de 20px à droite et à
gauche.

• Un bouton avec le texte « Réinitialiser » dont la couleur du background est bleue.

1
 • Un bouton avec le texte « Login » dont la couleur du background est rouge.

- Fonctionnalités : 


• Le champ de saisie ne peut pas être vide et doit être composé de trois chiffres (Voir entête).

• Le bouton « Réinitialiser » permet de vider le champ « Code d’inscription ».

• En cliquant sur le bouton « Login » et si le contenu du champ de saisie est valide, vous allez
essayer de vous connecter à l’aide du service web (voir annexe) :

▪ Si vous recevez le code HTTP 200, vous allez rediriger

l’utilisateur vers l’interface d’accueil nommée « Evax » (Voir Figure 3).


▪ Si vous recevez le code HTTP 401, une boite de dialogue s’affiche

avec le message «Le code d’inscription est invalide» et avec le titre « Erreur ». 


Figure 1: Interface d'authentification

Interface d’accueil « Evax » :

- Cette interface, intitulé « Evax », contient (voir figures 2, 3,4) :

NB : Toutes les informations de cette interface sont récupérées à partir des web services (Voir
Annexe).

• Un tiroir (Drawer) d’accueil.


• Le widget « TabBar » contenant les trois interfaces suivantes :
o Mes doses (avec l’icône « health_and_safety »)
o Pharmacies (avec l’icône « local_pharmacy »)

2
 o Certificats (avec l’icône « qr_code»)

Tiroir d’accueil (Drawer) :

- Ce tiroir contient (voir figure 3) :

• Une option permettant à l’utilisateur de voir son historique contenant le texte « Historique
», l’icône « history » et aussi l’icône « arrow_forward_ios »

• Une option permettant à l’utilisateur de se déconnecter, contenant l’icône «

power_settings_new », le texte « Se déconnecter » et l’icône « arrow_forward_ios ».


- Fonctionnalités 


• Lors de la déconnexion, l’utilisateur va être redirigé vers l’interface d’authentification et

perd sa session. 


Figure 3 – Tiroir d’accueil

Interface Mes doses :

- Cette interface intitulée « Mes doses » liste les doses de l’utilisateur connecté en mentionnant le
Type ainsi que la date. S’il n’est pas vacciné, le texte « Vous n’avez pris aucune dose » sera affiché
au milieu de l’interface.

3
 Figure 4 – Mes Doses

Interface Pharmacies :

- Cette interface intitulée « Pharmacies » contient une liste déroulante de toutes les pharmacies
conventionnées récupérées à partir du service web (voir annexe).

- Chaque produit est représenté par une carte (Card) qui contient (voir figure 5) :

• L’image de la pharmacie. 


• Le titre de la pharmacie, taille x2 ; l’adresse de la pharmacie, taille x1. 


• Une marge de 10px en bas.

-Fonctionnalités : 


En cliquant sur l’une des pharmacies, une nouvelle interface s’affiche listant la liste des RDVs
disponible selon le type du Vaccin « « Figure 6 » (récupéré à partir du service web).

4
 Figure 5: Interface Pharmacies

Interface prise de RDVs:

Cette interface, contient (voir figure 6) :

• Le texte de l’AppBar est « Le titre de la pharmacie », récupéré à partir de l’interface

précédente.
• Une liste déroulante affichant les RDVs disponibles
o Chaque item de la liste contient : Le type du Vaccin, la date ainsi que l’icône
« arrow_forward_ios ».

- Fonctionnalités

En cliquant sur un item de la liste, une boite de dialogue s’affiche avec le message récupéré à partir
du web service.

Figure 6 : Interface prise de RDV

5
Interface Certificats :

- Cette interface affiche (voir figure 7) :

• Les informations de l’utilisateur connecté récupérées à partir du web service.

• L’état de vaccination de l’utilisateur connecté : Non vacciné ou Vacciné.

- Fonctionnalités : 


• Si l’utilisateur est non vacciné, le texte « Non vacciné » sera affiché avec la couleur rouge.
• Si l’utilisateur est vacciné, le texte « Vacciné » sera affiché avec la couleur verte. Aussi
dans ce cas un QR Code sera ajouté à l’interface sous forme d’image récupérée du serveur.

Figure7 : Interface Certificats

Annexe
Ci-dessous les liens des web services à consommer :
Authentification URL : localhost:9090/api/users/login
Mes doses : localhost:9090/api/pharmacies/rendez_vous/liste/{id_user}
Liste des pharmacies : localhost:9090/api/pharmacies/list
Prise de RDV : localhost:9090/api/pharmacies/rendez_vous
Certificats : localhost:9090/api/certificate/{id_utilisateur}
Exemple : BaseUrl pour récupérer une image test.png = localhost:9090/test.png