Université Hassan II de Casablanca

Faculté des Sciences Ben M’Sik

Département de Mathématiques et Informatique

Mémoire de fin d’étude pour l’obtention de la Licence Sciences

Mathématiques et Informatique
Option : Base de données

Sujet :

Conception et réalisation d’une application mobile

d’apprentissage sous Android pour le département
informatique.

Encadré par : Pr OUNACER Soumaya

Réalisé par :
Imane KHEIR - Hamza SATIA - Zineb METROUF
Soutenu le 27 juin 2022, devant le jury :
Pr AZZOUAZI Mohammed Présidant

Pr OUNACER Soumaya Examinateur

Pr DAIF Abderrahmane Examinateur
Pr GHAZOUANI Mohamed Examinateur

Pr Rachdi Mohamed Examinateur

Pr EL GHOUMARI Mohamed Yassine Examinateur

Pr ARDCHIR Soufiane Examinateur

2
1 Dédicace :

C'est avec profonde gratitude et sincères mots, que nous

dédions ce modeste travail de fin d'études à nos chers
parents ; qui ont sacrifié leur vie pour notre réussite et nous
ont éclairé le chemin par leurs conseils judicieux.

Nous espérons qu'un jour, nous serons leur source de fierté

et de bonheur, que nous souhaitons Allah leur prête durant
toute leur vie.

Nous dédions également ce travail à nos frères, nos

familles, nos amis, et tous nos chers professeurs.

3
2 Remerciements :

On remercie Allah le tout puissant de nous avoir donné la santé

et la volonté d’entamer et de terminer ce mémoire.
Au terme de ce projet nous tenons à remercier infiniment toute
l’équipe pédagogique de la faculté́ des sciences Ben M’sik, et
surtout les enseignants du département des sciences
mathématiques et informatiques.
Nous tenons à adresser nos vifs remerciements à toutes les
personnes qui ont participé de près ou de loin à la réussite et le
bon déroulement de ce projet.
Nous adressons nos sincères remerciements à notre encadrante
Mme OUNACER SOUMAYA, qui a gardé un œil attentif sur le
déroulement du projet en donnant des remarques
constructives. On la remercie pour sa disponibilité et sa
présence et cela a été un plaisir de travailler sous sa directive.
Enfin, nous adressons nos remerciements aux membres de jury
qui ont accepté d’évaluer ce modeste travail.

4
Table des matières :

1 Dédicace : ................................................................................................................. 3
2 Remerciements : ........................................................................................................ 4
3 Listes des figures : ...................................................................................................... 7
4 Introduction générale : ............................................................................................... 9
Chapitre 1 : Présentation de l’organisme d’accueil. ...................................................... 10
5 Introduction :............................................................................................................ 11
6 Présentation de la faculté́ Ben M’Sik : .................................................................... 11
7 Conclusion : .............................................................................................................. 13
Chapitre 2 : Présentation du cadre de projet. ................................................................ 14
8 Introduction :............................................................................................................ 15
9 Introduction d’une application mobile : .................................................................. 16
9.1 Un peu d’histoire : ................................................................................................ 16
9.2 Définition globale : ............................................................................................... 16
10 Cadre du projet : .................................................................................................... 17
11 Analyse d’existant : ................................................................................................ 19
11.1 Google classroom : ............................................................................................... 19
11.1.1 Problématique d’espace Google classroom :................................................... 19
11.2 Espace ENT : ........................................................................................................ 20
11.2.1 Problématique d’espace ENT :........................................................................ 20
11.3 Motivation : .......................................................................................................... 20
11.4 Solution proposée : ............................................................................................... 23
11.5 Planning du travail : .............................................................................................. 23
11.5.1 Définition Diagramme de GANT : .................................................................. 23
11.5.2 Composants d'un diagramme de Gant : ......................................................... 23
11.5.3 Avantages du diagramme de Gant :................................................................ 23
11.5.4 Le diagramme de GANT de notre application : ............................................. 24
12 Conclusion : ............................................................................................................ 25
Chapitre3 : Conception de système. ............................................................................... 26
13 Introduction : .......................................................................................................... 27
14 Spécification des besoins : ...................................................................................... 27
14.1 Besoins fonctionnels : ........................................................................................... 27
14.2 Spécification des besoins non-fonctionnels : ......................................................... 28
15 Conception UML : .................................................................................................. 28
15.1 Définition UML : .................................................................................................. 28
15.2 Identification des Acteurs : ................................................................................... 28
15.3 Diagramme de cas d’utilisation : ........................................................................... 29
15.3.1 Diagramme de cas utilisation « Étudiant » : ................................................... 29
15.3.2 Diagramme de cas utilisation « Professeur » : ................................................ 31
15.3.3 Diagramme de cas utilisation « Administrateur » : ........................................ 31
15.3.4 Diagramme de classe : ..................................................................................... 32
15.3.5 Diagramme de séquence : ................................................................................ 33
16 Conclusion : ............................................................................................................ 44
Chapitre 4 : Réalisation. ................................................................................................. 45
17 Introduction : .......................................................................................................... 46
18 Environnement de développement : ...................................................................... 46

5
18.1 Développement logiciel : ...................................................................................... 46
18.2 Langage de programmation : ................................................................................. 47
18.3 Moteur de production : .......................................................................................... 47
18.4 Les logiciels : ........................................................................................................ 49
18.5 Base de données :.................................................................................................. 49
18.6 Principales interfaces graphiques : ........................................................................ 50
19 Conclusion : ............................................................................................................ 69
20 Conclusion générale : ............................................................................................. 69
21 Bibliographie : ........................................................................................................ 70

6
3 Listes des figures :

Figure 1: Organigramme des services administratifs de la FSBM. ...... Error! Bookmark not
defined.
Figure 2: Organigramme des services communs de la FSBM. ............ Error! Bookmark not
defined.
Figure 3: Le nombre des machines connectées de 2015 à 2025 .......................................... 15
Figure 4 : Les pages web visitées par téléphone VS autres appareils. ................................. 15
Figure 5: L’utilisation d’Android VS les autres systèmes. .................................................. 18
Figure 6: Utilisation de téléphone VS l’ordinateur. ............................................................ 21
Figure 7: L'intérêt d'une application mobile. ...................................................................... 21
Figure 8: Les types d'informations souhaitées. ................................................................... 22
Figure 9: L'intérêt d'une partie chat. ................................................................................... 22
Figure 10: Diagramme de GANT. ...................................................................................... 24
Figure 11: Description des acteurs. .................................................................................... 29
Figure 12: Diagramme de cas d'utilisation « Étudiant ». ..................................................... 30
Figure 13: Diagramme de cas d’utilisation « Professeur ». ................................................. 31
Figure 14: Diagramme de d'cas utilisation « Administrateur ». ........................................... 32
Figure 15: Diagramme de classe. ....................................................................................... 33
Figure 16: Diagramme de séquence pour l’authentification. ............................................... 35
Figure 17: Diagramme de séquence récupération mot de passe. ......................................... 36
Figure 18: Diagramme de séquence « modifier profile ». ................................................... 37
Figure 19: Diagramme de séquence « évènement ». ........................................................... 37
Figure 20: Diagramme de séquence « ajout liste ». ............................................................. 38
Figure 21: Diagramme de séquence « Chat ». .................................................................... 39
Figure 22: Diagramme de séquence « ajout Professeur/Étudiant ». ..................................... 40
Figure 23:Diagramme de séquence pour l’ajout du Cours/TD. ........................................... 41
Figure 24: Diagramme de séquence pour l’ajout du module. .............................................. 41
Figure 25: Diagramme de séquence pour consulter Cours/TD. ........................................... 42
Figure 26: Diagramme de séquence de consultation d’espace liste pour le Professeur. ....... 43
Figure 27: Diagramme de séquence pour consultation d’espace liste pour l’étudiant. ......... 43
Figure 28: La deuxième fenêtre du « Walkthroughs ». ....................................................... 51
Figure 29: La deuxième fenêtre du Walkthroughs. ............................................................. 51
Figure 30: La troisième fenêtre du « Walkthroughs ». ........................................................ 51
Figure 31: L’authentification. ............................................................................................ 52
Figure 32: Le menu de l’étudiant. ..................................................................................... 53
Figure 33: Le menu du professeur. ..................................................................................... 53
Figure 34: Le menu d'administrateur. ................................................................................. 53
Figure 35: Options de menu. .............................................................................................. 54
Figure 36: Modifier la photo de profil. .............................................................................. 54
Figure 37: Les deux principales options d’administrateur. ................................................. 55
Figure 38: Ajouter un Professeur / Étudiant. ...................................................................... 56
Figure 39: Choisir entre consultation de la licence ou master. ........................................... 57
Figure 40: Choisir l’un des semestres de licence. .............................................................. 58
Figure 41: L’ajout d’un module. ....................................................................................... 59
Figure 42: Consulter module. ............................................................................................ 60
Figure 43: Les deux options de la consultation du module. ................................................ 61
Figure 44: Consulter cours. ............................................................................................... 62
Figure 45: Ajouter un TP-TD avec délai. .......................................................................... 63

7
Figure 46: Ajouter son compte rendu (Étudiant). ............................................................... 64
Figure 47: Ajouter un événement. ..................................................................................... 65
Figure 48: Consulter évènement (Étudiant). ...................................................................... 66
Figure 49: Consulter le champ liste. .................................................................................. 67
Figure 50: Créer un groupe. .............................................................................................. 68
Figure 51: Exemple d’une conversation en groupes. ......................................................... 68

8
4 Introduction générale :

Au cours des dix dernières années, l'utilisation des téléphones intelligents a littéralement
explosé ; D'après le rapport de « we are social » (une agence créative internationale dotée
d’une expertise unique sur l’internet), publié en décembre 2021, Plus des deux tiers (67,1 %)
de la population mondiale utilisent désormais un téléphone mobile, et le nombre
d’utilisateurs uniques a atteint 5,31 milliards au début de 2022.
Le totale mondiale a augmenté de 1,8 % au cours de l’année écoulée, avec 95 millions de
nouveaux utilisateurs de mobiles depuis l’année dernière à la même époque. Sur le même
sujet, dans son rapport publié ; le nombre d’utilisateurs d’Internet dans le monde a
atteint 4,95 milliards au début de l’année 2022, la pénétration de l’Internet s’élevant
désormais à 62,5 % de la population mondiale totale. Les données montrent que le nombre
d’utilisateurs d’Internet a augmenté de 192 millions (+4,0 %) au cours de l’année écoulée.

9
Chapitre 1 : Présentation de
l’organisme d’accueil.

10
5 Introduction :

A travers ce chapitre, nous allons présenter l’environnement où nous avons réalisé́ notre
projet.

6 Présentation de la faculté́ Ben M’Sik :

La Faculté des Sciences Ben M’Sik a ouvert ses portes en 1984. Elle est rattachée à
l’Université́ Hassan II de Casablanca.
Dès son ouverture, la Faculté́ des Sciences Ben M’Sik a accordé́ un intérêt particulier au
développement de la recherche scientifique parallèlement à sa mission d’enseignement et
de formation.
De 1984 à 2003, la FSBM a dispensé́ diverses formations de type premier cycle (DEUG) et
deuxième cycle (Licences es-sciences : Bac+4) dans diverses spécialités.
A partir de 1989, les premières formations de 3ème cycle (CEA et DES) ont commencé́ grâce
à la mise en place d’un certain nombre d’équipes et de laboratoires de recherche.
En 1997, avec la création des UFR, la nouvelle réorganisation de la formation à et par la
recherche a donné́ lieu à de nouveaux regroupements de chercheurs autour de nouvelles
thématiques.
Depuis 2003, la faculté́ des sciences Ben M'Sik dispense une formation modulaire et
semestrielle dans le cadre de la réforme pédagogique de l'enseignement supérieur
conformément au système LMD.
En 2008, suite à la réorganisation du cycle doctorat, la faculté́ des Sciences Ben M’Sik a mis
en place le Centre d’Étude Doctoral (CED) : « Sciences et applications ». Ce centre est adossé
à l’ensemble des structures de recherches accréditées par l’université́.
Dans le cadre de la structuration de la recherche, que l’Université́ Hassan II de Casablanca a
entamé́ à partir de décembre 2015, la Faculté́ des Sciences Ben M’Sik a procédé à une
nouvelle organisation et restructuration de ses équipes et Laboratoires de recherché. C’est
ainsi que la recherche à la faculté́ des sciences s’est organisée en 19 laboratoires.

11
Figure 2: Organigramme des services administratifs de la FSBM.

Figure 1: Organigramme des services communs de la FSBM.

12
7 Conclusion :

À la fin de ce chapitre, nous avons présenté l'environnement dans lequel le projet est
mené.

13
Chapitre 2 : Présentation du
cadre de projet.

14
8 Introduction :

Dans ce chapitre nous allons aborder la présentation du cadre de projet en donnant des
analyses, des statistiques et une solution sera proposée à la fin.

Figure 3: Le nombre des machines connectées de 2015 à 2025.

Ainsi que 53,3% des pages web sont vues à partir d’un téléphone. Ça représente 8,6%
d’augmentation de Décembre 2018 à Décembre 2019 comme il le montre la figure 4.

Figure 4 : Les pages web visitées par téléphone VS autres appareils.

15
9 Introduction d’une application mobile :

9.1 Un peu d’histoire :

Les applications mobiles sont apparues dans les années 1990, elles sont liées aux
développements d'Internet et des télécommunications, des réseaux sans fils et des
technologies agents, et à l’apparition et la démocratisation des terminaux
mobiles : smartphones, tablettes tactiles .

Le nombre d'applications mobiles disponible augmente rapidement à partir de 2007 date du

lancement de l'iPhone.

Les deux principaux services de plateformes de téléchargement, l'App Store et le Google

Play, sont lancés en 2008.

9.2 Définition globale :

Une application mobile est un logiciel applicatif développé pour un appareil électronique
mobile, tel qu'un assistant personnel, un téléphone portable, un smartphone, un baladeur
numérique, une tablette tactile.

Elles sont pour la plupart distribuées depuis des plateformes de téléchargement (parfois
elles-mêmes contrôlées par les fabricants de smartphones) (plateforme
de Google / Android), ou encore le Microsoft Store (plateforme de Microsoft pour Windows
10 Mobile).

Mais des applications peuvent aussi être installées sur un ordinateur, grâce au
logiciel iTunes distribué par Apple pour ses appareils.

Les applications distribuées à partir des magasins d'applications sont soit payantes, soit
gratuites mais généralement avec des publicités.

Quelques chiffres permettant de situer les enjeux liés aux applications mobiles :

16
 • En 2013, 102 Milliards d’applications ont été téléchargées.
• L’App Store et le Play Store comptent chacun un nombre d’application
proche du million.
• Selon une étude commanditée par la commission européenne, le marché des
applications mobiles sera de l’ordre de 68 milliards d’euros d’ici fin 2018 en
Europe.

Quelques avantages d’utilisation d’application mobile :

• L’exécution est rapide.

• Les possibilités fonctionnelles sont beaucoup plus étendues.
• L’accès aux données de l’utilisateur est facilité.
• Les applications peuvent émettre des notifications push pour plus
d’interaction avec l’utilisateur mobile.
• Certaines applications peuvent fonctionner hors ligne.

10 Cadre du projet :

Le projet entre dans le cadre de préparation de sujet de fin d'études pour l'obtention de la
licence fondamentale informatique de faculté Ben M’sik, qui consiste à réaliser une
application mobile Android d’apprentissage pour le département informatique, qui a comme
but :

• Avoir une interaction vivante entre les étudiants et leurs professeurs.

• Suivre leur vie universitaire (étudiants).
• Accès rapide…
• Consulter les notes, les emplois, les cours, les évènements.
• Télécharger les cours et déposer les devoirs.

Notre application a bien choisi Android comme le système d’exploitation qui est édité par
Google pour les appareils mobiles, comme les smartphones ou les tablettes. On le retrouve
aussi dans certains GPS, ordinateurs de bord de voitures, dans des télévisions, autoradios, et

17
même des montres. De plus, de nombreux prototypes d'appareils électroménagers, comme
des réfrigérateurs ou des machines à laver, fonctionnant sous Android ont été présentés ces
derniers temps, permettant ainsi de lancer une machine à l'aide de son téléphone, ou encore
d'être prévenu par son frigo lorsqu'il manque certaines choses.

D'autre part, ce système est open source, ce qui permet à n'importe qui de lancer sa propre
version d'Android. De nombreuses personnes utilisent ainsi des "ROM custom", c'est à dire
des versions modifiées par rapport au code de base fourni par l’éditeur.

Il est utilisé par la plupart des étudiants pour plusieurs raisons :

• Budget convenable aux étudiants.

• Développement d'applications facile.
• Un système d'exploitation Open Source.
• Un système qui laisse la liberté sur le choix de la marque souhaitée.
• Mémoire extensible, grâce à la possibilité de mettre une mémoire
supplémentaire.

Voilà le pourcentage d’utilisation d’Android par rapport aux autres systèmes d’exploitation
suite au rapport de ‘’ALL NEWS IGITAL ‘’ :

Figure 5: L’utilisation d’Android VS les autres systèmes.

18
11 Analyse d’existant :

Afin d’approfondir notre compréhension du sujet et avoir une idée plus claire sur notre
projet et ses fonctions attendues, nous avons mené une étude sur des applications qui
s’inscrivent dans le même cadre que notre application :
Nous analysons l’application de Google classroom et l’espace ENT.

11.1Google classroom :

Est une plate-forme d'apprentissage gratuite dédiée aux écoles. Son but est de simplifier la
création et la diffusion de cours et des exercices.

Cette application offre ces services :

• Disposition d’un centre d’activités qui permet aux utilisateurs de partager

directement des informations.
• C’est un service éducatif qui offre des outils d’apprentissage gratuitement.
• Google classerrom offre à tout le monde un accès gratuit.
• L’accès au Google Classroom à partir de n’importe quel navigateur ou
télécharger l’application pour Android, iPhone ou iPad.

11.1.1 Problématique d’espace Google classroom :

Malgré tous les avantages qui précèdent, l’application Google classroom se manque :

• Affichage des notes pour les examens.

• Forums et des discussions en temps réel pour augmenter l’interaction entre
les étudiants.
• Ce n’est pas vraiment un espace numérique pour partager des fichiers ou créer
des documents ; c’est en grande partie le travail de Google Drive et de Google
Docs.

19
 • Il n’est pas dédié spécialement aux étudiants spécifiques ; il est accessible par tout
le monde.

11.2Espace ENT :

Est un espace numérique de travail (ENT) désigne un ensemble intégré de services

numériques choisis et mis à disposition de tous les acteurs de la communauté éducative
d'une ou plusieurs écoles ou d'un ou plusieurs établissements scolaires dans un cadre de
confiance.
L’espace ENT offre ces services :

• L’organisation des ressources.

• Dépôt des notes, annonces, emploi ….
• Récupération et changement de mot de passe.
• L’inscription aux années universitaires.

11.2.1 Problématique d’espace ENT :

Même si que l’espace ENT répond aux plusieurs besoins, y a toujours des options
manquantes :

• L’interaction vivante entre professeur et ses étudiants.

• La rapidité si on le compare avec une application mobile d’apprentissage.
• Les notifications au cas des nouveautés.
• La partie affichage des évènements et des annonces.
• Les éléments d’interface ont besoin d’être téléchargés depuis le serveur, qui
rendre l’espace lourd.

11.3Motivation :

Pour bien découvrir la situation courante des étudiants et trouver une solution convenable
à ses besoins, on a réalisé un formulaire avec différentes questions :

20
 Comparaison entre le temps passé sur le téléphone et l'ordinateur.

Téléphone le plus Ordinateur le plus

Figure 6: Utilisation de téléphone VS l’ordinateur.

L'idée d'une application mobile d'apprentissage qui présente divers supports sur les
cours vous intéresse ?

OUI Non

Figure 7: L'intérêt d'une application mobile.

21
 Quel type de formation souhaitons vous avoir dans l'application ?

Tout ce qui précède

Exemple de qiuz, de projets et d'examens

Cours et devoirs

0 0.5 1 1.5 2 2.5 3 3.5 4 4.5

Figure 8: Les types d'informations souhaitées.

Êtes-vous intéressé à avoir une partie chat dans l'application ?

OUI NON

Figure 9: L'intérêt d'une partie chat.

22
11.4Solution proposée :

Tous ce qui précède nous a montrer que les étudiants ne sont pas satisfaits de ce qu’existe
au niveau des plateformes d’apprentissage ; et pour cette raison nous avons pensé
d’améliorer le moyen d’apprentissage par la réalisation d’une application mobile Android
dédiée aux étudiants de département informatique afin de répondre à ses besoins.

11.5Planning du travail :

11.5.1 Définition Diagramme de GANT :

Un diagramme de Gant est un outil pratique pour planifier des projets. C’est l'un des outils
les plus efficaces pour représenter graphiquement l'état d'avancement des différentes
activités (tâches) qui constituent notre application.

11.5.2 Composants d'un diagramme de Gant :

Un diagramme de Gantt est généralement composé des éléments suivants :

• Dates : les dates de début et de fin permettent voir quand l'ensemble du projet
commence et se termine.
• Tâches : Les projets sont constitués d'un certain nombre de sous-tâches. Avec un
diagramme de Gant, pour suivre leur évolution, ainsi rien n'est oublié.
• Calendrier prévisionnel : le graphique indique quand chaque tâche doit être
effectuée. Ceci permet d’exécuter chaque sous-tâche dans les délais et de
terminer l'ensemble du projet à la date prévue.
• Dépendances : certaines tâches peuvent être effectuées à tout moment, tandis
que d'autres doivent être exécutées avant ou après le début ou la fin d'une autre
tâche. Le diagramme de Gant indique ces dépendances.
• État d’avancement : le diagramme montre précisément l'état d'avancement de
notre projet en indiquant les tâches qui ont déjà été exécutées. En sélectionnant
la date du jour, nous visualisons ce qu'il nous reste à faire et si on est en bonne
voie pour terminer le projet dans le temps consacré.

11.5.3 Avantages du diagramme de Gant :

23
L'utilisation du diagramme de Gantt dans le processus de gestion de projet offre les
avantages suivants :

• Clarté.
• Vue d'ensemble simplifiée.
• Informations sur la performance.
• Amélioration de la gestion du temps.
• Flexibilité.
• Organisation des taches avec leur temps précis.
• Utilisation du diagramme de gant somme une référence pour réaliser chaque
tâche sans le risque d’être en retard.

11.5.4 Le diagramme de GANT de notre application :

Figure 10: Diagramme de GANT.

24
12 Conclusion :

L’objectif principale de ce chapitre, c’était la présentation de cadre de projet, la réalisation

d’application mobile d’apprentissage, en analysant ses points forts par rapport aux tout ce
qu’existe au niveau des plateformes d’apprentissages.

25
Chapitre3 : Conception de
système.

26
13 Introduction :

La réussite de toute étude dépend de la qualité de sa conception et sa modélisation. De ce

fait, ce chapitre sera consacré d’entamer deux parties ; la première sur l’analyse et
spécification des besoins fonctionnels et non-fonctionnels, et l’autre sur la conception UML
de l’application mobile.

14 Spécification des besoins :

14.1Besoins fonctionnels :

Les besoins fonctionnels représentent les besoins primaires de notre application c’est-à-dire
les besoins indispensables auxquels doit répondre l’application :

Quelques besoins fonctionnels de notre application mobile :

• Professeur peut consulter, ajouter, supprimer ou bien télécharger les cours

• Professeur peut recevoir les devoirs de ses étudiants
• Étudiant peut télécharger ses cours, consulter les notes et l’emploi, liste des PFE.
• Admin peut ajouter des profs comme des étudiants
• Professeur peut communiquer avec ses étudiants grâce à une partie chat.
• Tous les acteurs peuvent changer la photo de profil ainsi que la récupération de
mot de passe.
• Prof et admin peuvent ajouter des évènements.
• Étudiant peut réagir et commenter aux évènements.
• Le chef de département peut répondre aux besoins des étudiants.

27
14.2Spécification des besoins non-fonctionnels :

Ce sont les besoins qui permettraient d’améliorer la qualité des services de l’application, pour
notre cas on a distingué :

• Les mots de passe sont stockés de manière sécurisée.

• Chaque acteur a son espace indispensable.
• L’accès flexible et facile.

15 Conception UML :

15.1Définition UML :

L'UML (Unified Modeling Language ou Langage de modélisation unifiée en français) est

un langage graphique de modélisation informatique, est constitué de diagrammes qui servent
à visualiser et décrire la structure et le comportement des objets qui se trouvent dans un
système ; pour les présenter de manière plus simple et compréhensible.

15.2Identification des Acteurs :

Un acteur représente l'abstraction d'un rôle joué par des entités externes (utilisateur,
dispositif matériel ou autre système) qui interagissent directement avec le système étudié.

Les acteurs de notre application mobile sont :

28
 Figure 11: Description des acteurs.

15.3Diagramme de cas d’utilisation :

Le diagramme de cas d’utilisation représente les actions réalisées par le système, pour avoir
un résultat qui répond au besoin d’un acteur particulier. On va présenter ici les diagrammes
de cas d’utilisation de chaque partie.

15.3.1 Diagramme de cas utilisation « Étudiant » :

Il s’agit d’un utilisateur client qui peut accéder à l’application à travers l’authentification ; puis
il va choisir l’une d’interface désirée :

• Mon espace : l’utilisateur va choisir la consultation du cour, Téléchargement du

cours ou bien le dépôt des devoirs.
• Messagerie : l’étudiant peut contacter ses collègues, ses profs dans un chat privé
ou public.
• Mes listes : C’est une partie concernant la consultation des notes, d’emploi, des
listes des PFE.
• Évènement : partie consiste à informer les étudiants aux évènements courants
avec la possibilité de réagir et de commenter à chaque événement.

29
• Modifier : l’étudiant a le droit de modifier sa photo de profil comme le mot de
passe.

Figure 12: Diagramme de cas d'utilisation « Étudiant ».

30
 15.3.2 Diagramme de cas utilisation « Professeur » :

Il s’agit d’un utilisateur Professeur qui a des taches communes avec chef de département qui
a une tache spécifique c’est de répondre à toute réclamation de ses étudiants, ainsi que le
professeur dépose les notes, les cours, aussi il ajoute des événement pour informer ses
étudiants.

Figure 13: Diagramme de cas d’utilisation « Professeur ».

15.3.3 Diagramme de cas utilisation « Administrateur » :

Qui va différencier les taches d’administrateur par rapport aux autres acteurs, c’est que
l’admin a la possibilité d’ajouter étudiant et professeur, aussi l’ajout et la suppression du
module, comme il montre la figure suivante :

31
 Figure 14: Diagramme de d'cas utilisation « Administrateur ».

15.3.4 Diagramme de classe :

Le diagramme de classes est un schéma utilisé en génie logiciel pour présenter les classes et
les interfaces des systèmes ainsi que leurs relations. Ce diagramme fait partie de la
partie statique d'UML, ne s'intéressant pas aux aspects temporels et dynamiques.

Les diagrammes de classes présentent de nombreux avantages pour n'importe quel type
d'organisation. Vous pouvez les utiliser pour :

• Mieux comprendre l’aperçu général des schémas d’une application.

• Créer des schémas détaillés qui mettent l'accent sur le code spécifique qui doit être
programmé et mis en œuvre dans la structure décrite.

32
[Link] Composants de base d’un diagramme de classes :

• Classes : modèle pour créer des objets et mettre en œuvre un comportement dans
un système.
• Nom : première ligne d'une forme de classe.
• Attributs : deuxième ligne d'une forme de classe. Chaque attribut de la classe
apparaît sur une ligne distincte.
• Les interactions : désigne les relations et liens divers qui peuvent exister dans les
diagrammes de classes et d'objets.

[Link] Le digramme de classe pour notre application :

Figure 15: Diagramme de classe.

15.3.5 Diagramme de séquence :

33
Un diagramme de séquence est un diagramme d’interaction dont le but est de décrire
comment les objets collaborent au cours du temps et quelles responsabilités ils assument. Il
décrit un scénario d’un cas d’utilisation.
Le diagramme de séquence permet de faire apparaitre :

• Les intervenants dans l’interaction (objets du système ou acteurs).

• La description de l’interaction (messages).
• Les interactions entre les intervenants.

[Link] Diagramme de séquence pour l’authentification :

L’acteur va saisir son mot de passe, s’il n’est pas correct, un message d’erreur va s’afficher
sinon le contrôleur va lire le login et mot de passe, va rediriger l’acteur vers la base de données
pour chercher son existence ; s’il n’existe pas elle va afficher un message d’erreur sinon va
rediriger l’acteur vers la page d’accueil.

34
 Figure 16: Diagramme de séquence pour l’authentification.

[Link] Diagramme de séquence pour la récupération de mot de passe :

L’acteur va cliquer sur le mot de passe oublié, il va remplir un formulaire qui contient son
adresse mail, par la suite le système va chercher l’adresse mail dans la base de données, s’elle

35
n’existe pas ; un message d’erreur va être afficher sinon un nouveau mot de passe va être
envoyé sur la boite mail d’acteur.

Figure 17: Diagramme de séquence récupération mot de passe.

[Link] Diagramme de séquence modifier profile :

36
 Figure 18: Diagramme de séquence « modifier profile ».

[Link] Diagramme de séquence pour l’ajout évènement :

Figure 19: Diagramme de séquence « évènement ».

[Link] Diagramme de séquence pour l’ajout des listes (pfe, td, notes,
emplois) :

37
Figure 20: Diagramme de séquence « ajout liste ».

38
[Link] Diagramme de séquence pour participation dans un chat privé ou
public :

Figure 21: Diagramme de séquence « Chat ».

39
[Link] Diagramme de séquence pour l’ajout du Professeur/Étudiant :

Figure 22: Diagramme de séquence « ajout Professeur/Étudiant ».

[Link] Diagramme de séquence pour l’ajout du Cours/TD :

40
 Acteur = Admin et professeur.

Figure 23:Diagramme de séquence pour l’ajout du Cours/TD.

[Link] Diagramme de séquence pour l’ajout du module :

Acteur = Admin.

Figure 24: Diagramme de séquence pour l’ajout du module.

41
[Link] Diagramme de séquence pour consulter Cours/TD :
Acteur = Étudiant.

Figure 25: Diagramme de séquence pour consulter Cours/TD.

[Link] Diagramme de séquence pour ajouter Cours/TD pour le

Professeur :

Diagramme de séquence pour l’ajout du Cours/TD.

42
[Link] Diagramme de séquence de consultation d’espace liste pour le
Professeur :

Figure 26: Diagramme de séquence de consultation d’espace liste pour le Professeur.

[Link] Diagramme de séquence pour consultation d’espace liste pour

l’étudiant :

Figure 27: Diagramme de séquence pour consultation d’espace liste pour l’étudiant.

43
16 Conclusion :

L’objectif principale de ce chapitre, c’était l’analyse de toutes les méthodes nécessaires pour
le déroulement efficace de notre application ; par la modélisation des différents diagrammes
qui schématisent physiquement chaque fonctionnalité traitée.

44
Chapitre 4 : Réalisation.

45
17 Introduction :

La bonne réalisation d’une application mobile dépend de bon choix des outils informatique
qui vont nous aider à bien développer chaque partie et assurer la maintenance de notre
application mobile.

18 Environnement de développement :

18.1Développement logiciel :

hj
Android studio : Il s'agit de l'IDE Android officiel pour le développement d'applications. Basé
sur IntelliJ IDEA; un environnement ou un environnement de développement pour les
programmes, qui dispose de puissants outils d'édition de code. On peut dire qu'en termes
d'analyse de code, il met immédiatement en évidence les erreurs, afin de leur apporter une
solution plus rapide. En tant qu'outils intégrés pour le développement ou la construction de
programmes sous Android, il contient une interface utilisateur préalablement construite ou
conçue, avec différents modèles d'écran, où les éléments existants peuvent être déplacés. De
plus, les débogueurs pour les émulateurs et la possibilité de travailler avec Logcat sont
couverts. IntelliJ IDEA prend en charge divers langages basés sur JVM ; Java (d'où le « J » dans
IntelliJ), Clojure, Groovy, Kotin et Scala.

46
18.2 Langage de programmation :

Java : C’est un langage de programmation orienté objet, développé par Sun

Microsystems. Il permet de créer des logiciels compatibles avec de nombreux systèmes
d’exploitation (Windows, Linux, Macintosh, Solaris). Java donne aussi la possibilité de
développer des programmes pour téléphones portables et assistants personnels.
Enfin, ce langage peut être utilisé sur internet pour des petites applications intégrées à
la page web (applet) ou encore comme langage serveur (jsp).

XML : pour Extensible Markup Language, désigne un langage informatique (ou

métalangage pour être plus précis) utilisé, entre autres, dans la conception des sites
Web et pour faciliter les échanges d'informations sur Internet. Ce langage de description
a pour mission de formaliser des données textuelles. Il s'agit, en quelque sorte, d'une
version améliorée du langage HTML avec la création illimitée de nouvelles balises.

18.3Moteur de production :

47
Gradle : est un moteur de production fonctionnant sur la plateforme Java. Il permet de
construire des projets en Java, Scala, Groovy voire C++.

Gradle allie les atouts de Apache Maven et Apache Ant : il allie l'utilisation de conventions à
la manière de Maven (convention plutôt que configuration) avec la flexibilité de Ant pour
décrire les tâches de construction, avec une cohérence forte dans l'interface de
programmation des tâches.

Apache Maven : (couramment appelé Maven) est un outil de gestion et d'automatisation de

production des projets logiciels Java en général et Java EE en particulier. Il est utilisé pour
automatiser l'intégration continue lors d'un développement de logiciel. Maven est géré par
l'organisation Apache Software Fondation. L'outil était précédemment une branche de
l'organisation Jakarta Project. L'objectif recherché est de produire un logiciel à partir de ses
sources, en optimisant les tâches réalisées à cette fin et en garantissant le bon ordre de
fabrication. Maven utilise un paradigme connu sous le nom de Project Object Model (POM)
afin de décrire un projet logiciel, ses dépendances avec des modules externes et l'ordre à
suivre pour sa production. Il est livré avec un grand nombre de tâches prédéfinies, comme la
compilation de code Java ou encore sa modularisation.

48
18.4Les logiciels :

hj
GanttProject : est un logiciel libre de gestion de projet écrit en Java, ce qui permet de l'utiliser
sur divers systèmes d'exploitation (Windows, Linux, MacOs). Il permet d'éditer un diagramme
de Gantt.

StarUML : est un logiciel de modélisation UML, qui a été cédé comme open source par son
éditeur, à la fin de son exploitation commerciale (qui visiblement continue ...), sous une
licence modifiée de GNU GPL. StarUML gère la plupart des diagrammes spécifiés dans la
norme UML 2.0. StarUML est écrit en Delphi1, et dépend de composants Delphi propriétaires
(non open-source).

18.5 Base de données :

Firebase : (Realtime Database) est capable de fournir à votre application la valeur des
données et les mises à jour appliquées sur ces dernières avec à une simple API. Grâce à

49
 la synchronisation en temps réel, les utilisateurs de votre application peuvent consulter
leurs données depuis n’importe quel terminal (sur le web ou depuis leur mobile). Notez
que cette base de données est livrée avec des SDK mobiles et web et permet la création
d’amplifications sans utiliser de serveurs.

18.6Principales interfaces graphiques :

50
Figure 29: La deuxième fenêtre du Figure 30: La deuxième fenêtre
Walkthroughs. du « Walkthroughs ».

Walkthroughs : sont des solutions logicielles

étape par étape qui guident les utilisateurs à
travers une série d'actions pour les aider à
terminer un processus. Ils sont utilisés pour
former des personnes sur des flux de travail,
des tâches, aussi de leur donner une idée sur
l’application.
Une fois que l’utilisateur clique sur le bouton
« Démarrer », l’interface d’authentification
va être afficher.

Figure 28: La troisième fenêtre du « Walkthroughs ».

51
 Le remplissage des champs de cette fenêtre
est indispensable pour l’authentification,
donc l’utilisateur dois posséder en avance
sa propre adresse email et son propre mot
de passe, qui sont générés par
l’administrateur.
Au cas où l’utilisateur à oublier son mot de
passe, il peut simplement cliquer sur « Mot
de passe oublié », cette action va lui aider
à le récupérer.
La photo en haut est de type « GIF », elle
est donc mouvementée, qui présente un
étudiant porte son téléphone qui
représente la consultation de l’application
en montant les escaliers qui représentent la
réussite.

Figure 31: L’authentification.

52
 Figure 33: Le menu Figure 34: Le menu du professeur.
d'administrateur.

Vous pouvez bien remarquer que nous

avons essayé de différencier les menus des
différents acteurs en donnant une couleur
spécifique selon le rôle d’acteur connecté.
Le rôle est défini lors de l’authentification
après la vérification de la base de données.
Le vert est consacré à l’administrateur, le
bleu au professeur, et le violet pour
l’étudiant.

Figure 32: Le menu de l’étudiant.

53
 Si l’utilisateur clique sur le bouton de menu,
une petite fenêtre va apparaitre.
Cette fenêtre comporte trois options :
La première : Modifier la photo de profile.
La deuxième : Modifier mot de passe.
La troisième : Se déconnecter de l’application.
Si l’utilisateur choisi l’option de « Modifier
photo de profile », une nouvelle fenêtre va être
affichée.

Figure 36: Options de menu.

Cette fenêtre contient deux autres actions :

Modifier : donne l’autorisation d’ouvrir la
galerie de photo et de sélectionner la
nouvelle photo.
Supprimer : Sert à supprimer la photo
actuelle et de la remplacer
automatiquement par la photo qui par
défaut.

Figure 35: Modifier la photo de profil.

54
 Cette fenêtre est affichable
seulement à l’administrateur.
C’est au niveau de cette dernière
que l’administrateur peut choisir
entre ajouter, également
supprimer un module, ou créer
un compte d’étudiant /
professeur.

Figure 37: Les deux principales options d’administrateur.

55
 Cette fenêtre est affichable
seulement à l’administrateur.
C’est au niveau de cette dernière
que l’administrateur peut créer
les comptes des professeurs,
également des étudiants.
L’affectation du rôle se fait en
cliquant sur l’un des choix :
Étudiant / Professeur.
Le cas d’affichage d’une erreur :
Si une adresse est déjà utilisée.
Si la confirmation du mot de
passe n’est pas valide.
Si l’un des champs est vide.

Figure 38: Ajouter un Professeur / Étudiant.

56
 Cette fenêtre est accessible à
tous les acteurs, elle les aide à
choisir entre consulter le champ
de licence ou le champ du
master.

Figure 39: Choisir entre consultation de la licence ou master.

57
 Cette fenêtre est accessible à
tous les acteurs, elle les aide à
choisir l’un des semestres de
licence.

Figure 40: Choisir l’un des semestres de licence.

58
 Cette fenêtre est affichable
seulement à l’administrateur,
c’est là où il peut ajouter un
module, en remplissant ces
champs.
Le bouton « Enregistrer le
module sert à confirmer
l’enregistrement en affichant un
message d’ajout avec succès.
Le cas d’affichage d’une erreur :
Si le ID est déjà utilisé.
Si l’un des champs est vide.

Figure 41: L’ajout d’un module.

59
 Cette fenêtre est affichable à
tous les acteurs, sauf que le
bouton de supprimer le module
et le numéro du ID vont
apparaitre seulement à
l’administrateur.
Le même cas pour le bouton de
plus (+) qui sert à ajouter un
module.

Figure 42: Consulter module.

60
 Cette fenêtre est affichable à
tous les acteurs après avoir cliqué
sur l’un des modules.
Elle affiche deux options :
Consulter cours.
Consulter TD – TP.

Figure 43: Les deux options de la consultation du module.

61
 Cette fenêtre est affichable à
tous les acteurs après avoir choisi
la consultation de l’un des cours,
sauf que le bouton supprimer et
d’ajout seront invisible aux
étudiants, aussi pour la photo du
module, seules l’administrateur
et le professeur du module qui
peuvent la changer.

Figure 44: Consulter cours.

62
 Cette fenêtre est accessible
seulement au professeur et
l’administrateur.
Ils peuvent déposer les TD – TP,
aussi ajouter un délai.
Une toute liste va être afficher
comporte les noms des étudiants
qui ont déposé leur compte
rendu.
Un message d’erreur va être
afficher si le nom ou l’url du
fichier sont vides.

Figure 45: Ajouter un TP-TD avec délai.

63
 Cette fenêtre est affichable
seulement à l’étudiant.
Il peut consulter les TP-TD et
ajouter son compte rendu sous la
limite du délai.
Si l’étudiant dépasse le délai un
message en haut va apparaitre,
qui peut plus ajouter son travaille
et le bouton d’envoi va
disparaitre, en revanche il peut
consulter le fichier qui a ajouté, il
peut aussi le modifier.

Figure 46: Ajouter son compte rendu (Étudiant).

64
 Cette fenêtre est affichable
seulement à l’administrateur et
au professeur.
Seules qui peuvent ajouter un
événement afin de garder la
crédibilité des postes ajoutés.

Figure 47: Ajouter un événement.

65
 Cette fenêtre est affichable
seulement à l’étudiant.
Il peut voir tous les évènements,
et réagir avec.

Figure 48: Consulter évènement (Étudiant).

66
Chapter 1

Cette fenêtre est accessible à

tous les acteurs, sauf que
l’étudiant peut seulement les
consulter, du même pour le
professeur mais il peut ajouter
les notes, par contre
l’administrateur peut ajouter des
listes dans tous ces champs.

Figure 49: Consulter le champ liste.

67
 Ces fenêtres sont accessibles
à tous les acteurs, ils peuvent
avoir une conversation en
groupe ou (privé qui est
toujours en cours de
réalisation) .

Figure 50: Créer un groupe.

Dans chaque message ajouté,

le nom et la date avec le
temps vont être affichés.

Figure 51: Exemple d’une conversation

en groupes.

68
19 Conclusion :

L’objectif principale de ce chapitre, c’était la réalisation d’application mobile, en travaillant

sur les technologies nécessaires qui permettent d’améliorer la performance et la rapidité
d’application mobile.

20 Conclusion générale :

Notre application mobile qui a comme but principale d’améliorer l’état d’apprentissage des
étudiants avec la possibilité de consulter toutes nouveautés concernant les cours, les notes,
les événements….
Il est également adressé aux étudiants de département informatique ce qui va rendre notre
application incomplète,
Mais pour notre premier pas, on a préféré de factoriser la cible adresser et par la suite on va
généraliser notre application pour tous les étudiants de faculté ben M’Sik et même les
étudiants du monde entier.

69
 21 Bibliographie :

[1] Donald Bell. Uml's sequence diagram. Internet, 2004.

[2] Franck Barbier. UML 2 et MDE. Dunod, 2005
[3] Grady Booch, James Rumbaugh, and Ivar Jacobson. Le guide de l'utilisateur UML.
Eyrolles, 2003.
[4] Java in a nutshell de David Flanagan – O'Reilly, traduit en français.
[5] Pascal Roques. UML2 - Modéliser une application mobile. Les cahiers du
programmeur. Eyrolles, 2006.
[6] Programmation Java de Hubbard John Rast - Ediscience international, ISBN :
2100486640
[7] Tom Penders. Introduction à UML. OEM, 2002.

[Link] : agence créative internationale dotée d'une expertise unique

sur les médias sociaux.

[Link] : site web contient des informations sur les

applications mobiles.

[Link] : Magazine sur l'actualité du digitale et les tendances du web.

[Link] : La Création de formulaire.

[Link] : Le Diagramme de Gant.

[Link] : Diagramme de cas

d’utilisation.

[Link] : Diagramme
de séquence.

[Link] : Création de diagramme de séquence.

[Link] : Diagramme
se classes.
[Link] : Informations sur
google classroom.

70
71