)

RÉPUBLIQUE DU BÉNIN
MINISTÈRE DE L’ENSEIGNEMENT SUPÉRIEUR
ET DE LA RECHERCHE SCIENTIFIQUE

UNIVERSITÉ D’ABOMEY-CALAVI

INSTITUT DE FORMATION ET DE
RECHERCHE EN INFORMATIQUE

BP 526 Cotonou Tel : +229 21 14 19 88

https://www.ifri-uac.bj Courriel : contact@ifri.uac.bj

MÉMOIRE
pour l’obtention du

Diplôme de Licence en Informatique

Option : Internet et Multimédia

Présenté par :
Faith Esther Hihôto SAGBOHAN

Réalisation d’une application mobile pour

la révision de l’examen du baccalauréat

Sous la supervision :
Amour AGBONON, Ing ITIL-CEH-CISA
Chef service informatique au Ministère de l’Enseignement Secondaire

Membres du jury :

Année Académique : 2020-2021

Sommaire

Dédicace ii

Remerciements iii

Résumé iv

Abstract v

Table des figures 1

Introduction 2

1 État de l’art 4

2 Modélisation et conception 8

3 Résultats et Discussions 18

Conclusion 23

Bibliographie 24

Table des matières 25

i
Dédicace

Je dédie ce travail à :

• Dieu le père Tout puissant, mon assurance, ma force, mon soutien, celui sans qui ce travail
n’aurait pas été possible ;

• Nicole DOVI et Jacob SAGBOHAN, mes parents, la meilleure au monde, mon soutien, ma
force ;

• Gisèle DOVI, ma tante, ma seconde maman, mon soutien ;

• Annie SAGBOHAN, ma grande sœur, mon modèle ;

• Tous ceux qui ont toujours été là pour moi, mes amis, ma chorale, mon pasteur.

ii
Remerciements

J’adresse mes sincères remerciements :

• Au Professeur C. Eugène EZIN, Directeur de l’Institut de Formation et de Recherche en Infor-

matique (IFRI) ;

• A tout le corps professoral de l’Institut de Formation et de Recherche en Informatique pour

l’accompagnement et la formation de pointe durant ces trois dernières années ;

• A Monsieur Amour A. AGBONON, mon maitre de mémoire, qui malgré ses nombreuses oc-
cupations a accepté d’encadrer ce travail ;

• A Monsieur Arthur ODO, mon maitre de stage pour son accompagnement, ses précieux conseils
et son aide ;

• A toute ma famille, pour son appui et son soutien de toujours.

iii
 Résumé
Le baccalauréat est l’examen qui sanctionne la fin des études secondaires et qui ouvre par son ob-
tention l’accès à l’enseignement supérieur. Durant les phases de préparation de cet examen, les can-
didats sont confrontés à quelques problèmes tels que la difficulté à préparer des fiches de révision,
le manque d’organisation, la difficulté à trouver des épreuves corrigées. Une des choses qui entrave
également la révision est le téléphone portable ; en effet, le téléphone constitue une grande distraction
pour les élèves.
Afin d’optimiser l’utilisation du téléphone portable tout en soutenant les candidats durant leur
révision, nous proposons comme solution une application mobile comportant des questions à choix
multiples ainsi que des résumés de cours, le tout conforme au programme national béninois pour
faciliter les révisions. L’application mobile disposera également d’un recueil d’épreuve d’examens
avec leurs corrigés.
Mots clés :baccalauréat, révisions, application mobile

iv
 Abstract
The baccalaureat is the exam that marks the end of secondary education and gives access to higher
education. During the preparation phases of this exam, candidates are confronted with a number of
problems such as the difficulty of preparing revision sheets, the lack of organisation and the difficulty
of finding corrected tests. One of the things that also hinders revision is the mobile phone, which is a
great distraction for students.
In order to take advantage of this use of mobile phones while supporting candidates during their
revision, we propose as a solution a mobile application with multiple choice questions as well as
course summaries, all in accordance with the Beninese national curriculum to facilitate revision. The
mobile application will also have a collection of exam papers with their correction.
Key words:high-school diploma, revisions, mobile application
Table des figures

1.1 Captures d’écran de Kartable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.2 Captures d’écran de DigiSchool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Captures d’écran de Nomad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.1 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.2 Diagramme de séquences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3 Diagramme de classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3.1 Logo de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.2 Monogramme du logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.3 Icône du logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.4 Réviser-Evaluer-Réussir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.5 Ecran d’accueil-Matières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

1
Introduction générale

1- Contexte
Les examens nationaux sont souvent redoutés par les élèves, le baccalauréat particulièrement, car
il nécessite une grande préparation. En effet, le baccalauréat permet de juger l’élève sur son réel ni-
veau et par conséquent cela nécessite donc une connaissance globale de tout le programme étudié.
C’est afin de faciliter la révision pour cet examen que nous mettons en place cette application mobile.

2- Problématique
Pour la révision et la préparation des examens les élèves disposent de plusieurs moyens qui sont : les
travaux dirigés, les travaux en groupe d’étude, les annales de révision, les séances avec les répétiteurs
enfin et surtout le travail individuel quotidien. C’est ce dernier qui fait souvent défaut à certains ap-
prenants, soit parce qu’ils manquent de motivation personnelle soit parce qu’ils n’ont pas une bonne
méthodologie ou encore parce qu’ils manquent de suivi. Enfin quel que soit la raison, nous notons
que certains apprenants rencontrent des difficultés à réviser individuellement. Pour leur faciliter la
tâche, nous avons décidé mettre en place une application mobile de révision pour les examens. Cette
application consistera en un ensemble de quiz et de résumés de cours.

3- Objectifs
L’objectif principal de ce mémoire est de mettre en place une solution de révision de l’examen du
baccalauréat qui permettra aux élèves de la classe de terminale d’accéder à des résumés de cours et à
des quiz. Les candidats pourront également avoir accès à des épreuves d’examen accompagnées de
leurs corrigés. Tous ces contenus seront accessibles hors connexion. Notre solution consistera en une
application mobile qui permettra aux candidats au BAC de :

• Lire des résumés de cours ;

• Effectuer des quiz en rapport avec ces résumés de cours ;

• Voir la note obtenue au quiz ainsi que le corrigé du quiz ;

2
 • Voir leur moyenne générale à l’issue des quiz

• S’entraîner à l’aide d’une base d’épreuve d’examens du bac dont les corrigés sont disponibles ;

• Consulter des conseils pratiques pour organiser leur révision ;

4- Résultats attendus
L’application mobile nommée Noukplon, devra permettra à l’utilisateur de :

• Créer un compte utilisateur ;

• Choisir sa série ;

• Voir la liste des matières composant sa série et choisir laquelle il veut réviser ;

• Sélectionner un quiz et le passer

• Consulter sa progression

5- Organisation du mémoire
Le présent travail est structuré en trois chapitres. Le chapitre premier présente une clarification des
termes phares du travail avec des détails ainsi qu’une étude des solutions existantes dans le sens
de notre travail, leurs insuffisances et l’avantage de notre solution par rapport à ces dernières. Le
chapitre 2, expose notre solution, les méthodes mises en œuvre pour sa conception et les choix tech-
niques liés à sa réalisation. Les résultats obtenus suite à la réalisation de la solution et les insuffisances
qui lui sont liées sont quant à eux présentés dans le chapitre 3.
Chapitre 1
État de l’art

Introduction

Pour mener à bien notre projet, il est important de faire le tour des concepts clés liés à celui-ci, ainsi
que l’état actuel des recherches sur ce sujet. Ce chapitre présente la généralité sur notre sujet et une
étude des solutions existantes afin de dénoter la valeur qu’apporte notre solution.

1.1 Généralités sur les applications mobiles

Une application mobile est définie, selon Wikipédia, comme un logiciel applicatif développé pour un
appareil électronique mobile, c’est-à-dire smartphone, tablette, montre connectée et autres. Dans des
termes plus simples, une application mobile est un programme téléchargeable comportant un fichier
qui est installé puis exécuté par le système d’exploitation de votre mobile. Ce fichier est codé dans un
langage de développement spécifique à votre appareil mobile. Pour Android par exemple, on a les
langages Java et Kotlin et pour les appareils Apple on a Objectice-C et Swift. Les applications mobiles
développées avec ces langages sont dites natives. Mais il est également possible de coder une appli-
cation mobile pour tous les systèmes d’exploitation. On parle alors d’application mobile hybride.[?] :

• Application native

Une application native est une application développée pour un système d’exploitation spé-
cifique. Elle représente la majorité des applications mobiles utilisées. Son avantage est qu’elle
exploite directement les fonctionnalités de votre appareil tel que le GPS, l’appareil photo, l’ac-
céléromètre. Ces fonctionnalités sont des fonctionnalités natives de vos appareils c’est pourquoi
on parle d’application native.[?]

• Application hybride

Une application mobile hybride au contrario est une application développée pour être utilisée

4
Chapitre 1. État de l’art 1.2. Application web mobile

sur tous les systèmes d’exploitation. Elles sont aussi dites cross-platform. Certaines se basent
sur les langages web à savoir : HTML, CSS et Javascript.[?]

1.2 Application web mobile

Un site mobile ou web application est une version optimisée pour un affichage sur un téléphone
mobile ou un Smartphone. Le contenu est allégé par rapport à un site internet standard destiné aux
écrans PC et les ordinateurs portables. La navigation est facilitée grâce aux écrans, à une ergonomie
simple, fonctionnelle et adaptée aux plateformes mobiles. Un site mobile peut aussi être un site web
développé à la base pour les écrans PC, mais rendu responsive pour permettre l’affichage sur les
smartphones.

1.3 Étude de l’existant

L’examen du baccalauréat est le principal sinon le seul moyen d’intégrer la plupart des circuits
d’étude supérieur universitaire. Il est donc indispensable à toute personne voulant intégrer une uni-
versité de décrocher cet examen plus que redouté. Plusieurs solutions ont déjà été proposés pour
faciliter le processus de préparation à cet examen. Nous vous présentons ici quelques une d’entre
elles. [?]
Kartable
Ce site propose des cours en ligne, des exercices autant pour le collège que pour le lycée. Des fiches
de révisions sont également disponibles pour vous préparer aux épreuves du bac. La version gratuite
permet un accès limité aux cours, exercices et évaluations. [?].

F IGURE 1.1 – Captures d’écran de Kartable

5
Chapitre 1. État de l’art 1.3. Étude de l’existant

Digischool
Le site Digischool permet de réviser en ligne, sur son site Internet, mais aussi à travers ses ap-
plications. Celles que Digischool a développées pour le bac comportent de nombreux avantages !
Vous pourrez, comme sur les autres applications retrouver des quizz, des cours, ou encore des petits
conseils appelés « kits du bac ». [?]

F IGURE 1.2 – Captures d’écran de DigiSchool

Nomad Education
Nomad Education est une application mobile qui s’adresse à l’affrique francophone et qui offre de
multiples contenus de révision aux collégiens, aux lycéens et même aux étudiants. Elle propose les
programmes de 450 diplômes qui vont du brevet au CAP, au BAC, à la licence, au BTS, au DUT mais
aussi les examens aux classes préparatoires aux grandes écoles. Elle propose un mode hors connexion
pour permettre aux étudiants de réviser sans connexion. Elle dispose d’une version premium qui per-
met d’accéder à des quiz en culture général, cours de préparations pour réussir son oral et des cours
pour se préparer aux tests d’entrées dans les écoles d’ingénieurs. [?]

F IGURE 1.3 – Captures d’écran de Nomad

6
Chapitre 1. État de l’art 1.4. Intérêt de cette solution par rapport aux existantes

1.4 Intérêt de cette solution par rapport aux existantes

Des solutions étudiées, seules deux possèdent un contenu pédagogique se rapprochant du pro-
gramme béninois. Il s’agit de l’application d’origine ivoirienne PLF et de l’application Nomad Educa-
tion. Concernant la première, en la testant, nous avons rencontré des difficultés au niveau de l’étape
de l’inscription. Concernant l’application Nomad, elle fonctionne hors connexion, mais le bémol, c’est
que le contenu qu’elle propose n’est pas conforme au programme national béninois. Aussi, une par-
tie de ses ressources sont payantes. Le plus de notre solution est qu’elle sera basée sur le programme
d’enseignement béninois, une application mobile conçue par des béninois pour des béninois.
L’application proposera des quiz répartis selon les différentes séries (filières) disponibles au Bé-
nin. Les apprenants des séries littéraires par exemple auront la possibilité de choisir leur matière de
spécialité. De plus il y aura au sein de l’application un recueil des épreuves du BAC du Bénin. Notre
solution est une application mobile qui tiendra compte des insuffisances des solutions existantes.

Conclusion

De tout ce qui précède, il est à noter qu’il existe de nombreuses applications mobiles éducatives
pour la révision du baccalauréat. Certaines fonctionnent en ligne tandis que d’autres fonctionnent
hors-ligne. Le point négatif de ces applications est qu’elles ne sont pas basées sur le programme
d’enseignement béninois.

7
Chapitre 2
Modélisation et conception

2.1 Introduction

La réalisation d’une application mobile nécessite la mise en place d’une organisation et d’une analyse
pour prendre en compte tous les aspects du sujet. Dans ce chapitre, nous présenterons une analyse
approfondie de la structure de notre application et aussi les différents outils nécessaires à la réalisa-
tion de celle-ci.

2.2 Analyse

L’aboutissement de ce projet nécessite une étude approfondie et minutieuse pour l’adoption d’une
méthodologie plus adaptée. Cette phase est primordiale dans la réalisation de l’application.C’est
grâce à elle que nous pourrons dimensionner le projet, avoir une nette idée sur ce qu’il y a à faire,
les solutions techniques, matérielles et comment procéder pour y arriver. Notre solution sollicite de
l’utilisateur beaucoup d’interactions [?].

2.2.1 Analyse des besoins

Les besoins de l’application se divisent en deux groupes : les besoins fonctionnels et les besoins non
fonctionnels.

2.2.2 Les besoins fonctionnels

Les besoins fonctionnels désignent tout simplement les fonctionnalités qui répondent aux besoins de
chaque acteur du système.
Du point de vue de l’élève : Lorsqu’un élève utilise notre système, il peut :

• Créer un compte utilisateur ;

• Lire des résumés de cours ;

• Effectuer un quiz dans une matière de son choix ;

• Partager ses exploits sur les réseaux sociaux ;

8
Chapitre 2. Modélisation et conception 2.3. Conception

• Voir une statistique de ses scores aux quiz déjà effectués ;

2.2.3 Les besoins non fonctionnels

Les besoins non fonctionnels ont pour but de définir les exigences du système en termes de compor-
tement et de performance. Ainsi l’application mobile Nouplon devra être :

• Dotée d’une bonne expérience utilisateur

L’application doit être compréhensible avec un parcours utilisateur simple

• Portable
L’application mobile doit être compatible avec tout système Android de version minimum 4.3

• Sécurisée
L’application mobile doit garantir la protection des données utilisateur

• Performante

2.3 Conception

La réalisation d’une application nécessite une phase de conception. Cette phase englobe principale-
ment la modélisation permettant de décrire les objets du système et les interactions entre ses objets
et le système lui-même. Nous allons donc utiliser un langage de modélisation : UML(Unified Mode-
ling Language). UML est un langage de modélisation graphique à base de pictogrammes utilisé dans
le développement logiciel. Ce langage de schémas qui découle d’une harmonisation des méthodes
d’analyse utilisées dans les années 1990, est aussi bien prévu pour être dessiné par des logiciels gra-
phiques, que tracé sommairement et surtout rapidement au crayon sur une feuille blanche.[?]
Plusieurs types de diagrammes UML entrent en jeu lors de l’analyse et de la conception d’un
système. Ces diagrammes sont classés dans deux grandes catégories de vues : les vues statiques et
les vues dynamiques.[?] La catégorie des diagrammes à vue statique comprend :

• Les diagrammes de cas d’utilisation

• Les diagrammes de classes

• Les diagrammes d’objets

• Les diagrammes de composants

• Les diagrammes de déploiement

Concernant les diagrammes à vue dynamique, nous pouvons citer :

• Les diagrammes d’états-transitions

• Les diagrammes d’activités

• Les diagrammes de collaboration

• Les diagrammes de séquence

9
Chapitre 2. Modélisation et conception 2.3. Conception

Pour notre système, nous avons conçu trois diagrammes :

• le digramme de cas d’utilisation

• le diagramme de classes

• le diagramme de séquences

2.3.1 Modélisation fonctionnelle

2.3.1.1 Diagramme de cas d’utilisation

Le diagramme de cas d’utilisation est celui permettant de représenter le modèle conceptuel. Les cas
d’utilisation permettent de structurer les besoins des utilisateurs et les objectifs correspondants d’un
système. Ils se limitent aux préoccupations "réelles" des utilisateurs. Ils identifient les utilisateurs du
système (acteurs) et leur interaction avec le système. Ils permettent de classer les acteurs et structurer
les objectifs du système. Enfin, ils servent de base à la traçabilité des exigences d’un système dans
un processus de développement intégrant UML.[?] Dans notre diagramme de cas d’utilisation, nous
avons pu relever deux acteurs : l’élève et l’administrateur du système.

10
Chapitre 2. Modélisation et conception 2.3. Conception

F IGURE 2.1 – Diagramme de cas d’utilisation

11
Chapitre 2. Modélisation et conception 2.3. Conception

L’application sera téléchargée et installée par l’élève.L’élève s’inscrira sur celle-ci. Une fois inscrit,
il pourra configurer son profil en choisissant notamment sa série. Il pourra jouer à un quiz. Il pourra
vérifier sa progression.

2.3.1.2 Description textuelle des cas d’utilisation

Cas d’utilisation 1 : Effectuer un quiz

Objectif : L’élève effectue un quiz et le système affiche les résultats.

Acteur : Élève

Description : Toute personne inscrit en classe de terminale en vue de passer le baccalauréat

Pré-condition : L’utilisateur doit être authentifié

Démarrage : L’utilisateur se trouve sur l’écran affichant la liste des matières

Scénario nominal :

1. L’élève choisit la matière qu’il souhaite réviser

2. Le système affiche la liste des chapitres composant cette matière

3. L’élève choisit le chapitre par lequel il souhaite commencer à réviser

4. Le système affiche les résumés de cours ainsi que les quiz disponibles pour ce chapitre

5. L’élève sélectionne le quiz pour l’effectuer

6. Le système affiche la première question du quiz avec des propositions de réponses

7. L’élève choisit une réponse

8. Le système affiche la bonne réponse accompagnée d’une explication.

9. L’élève clique sur Suivant pour passer à la question suivante

10. Le système affiche de nouveau une question avec ses propositions de réponses

11. L’élève répond de nouveau

12. Lorsque l’élève a fini de répondre à toutes les questions du quiz, le système affiche la note
obtenue par l’élève avec la correction du quiz

13. Si la note est inférieure à la moyenne, l’élève doit reprendre le quiz

2.3.1.3 Diagramme de séquences

Le diagramme de séquence est une représentation intuitive lorsque l’on souhaite concrétiser des in-
teractions entre deux entités (deux sous-systèmes ou deux classes d’un futur logiciel). Ils permettent
à l’architecte ou le designer de créer au fur et à mesure sa solution. Cette représentation intuitive est
également un excellent vecteur de communication dans une équipe d’ingénierie pour discuter cette

12
Chapitre 2. Modélisation et conception 2.3. Conception

solution. Ils permettent de décrire COMMENT les éléments du système interagissent entre eux et
avec les acteurs :

• Les objets au cœur d’un système interagissent en s’échangeant des messages.

• Les acteurs interagissent avec le système au moyen d’IHM

(Interfaces Homme-Machine).[?]

Présentation du diagramme de séquences du système

F IGURE 2.2 – Diagramme de séquences

13
Chapitre 2. Modélisation et conception 2.3. Conception

2.3.2 Modélisation conceptuelle

2.3.2.1 Diagramme de classes

Le diagramme de classes modélise les objets qui composent le système, ce qui vous permet d’afficher
les relations entre ces objets ainsi que de décrire ce que ces objets peuvent faire et les services qu’ils
peuvent fournir. Les diagrammes de classes sont fondamentaux pour le processus de modélisation
des objets et modélisent la structure statique d’un système.[?]
Présentation du diagramme des classes du système

F IGURE 2.3 – Diagramme de classes

14
Chapitre 2. Modélisation et conception 2.4. Choix Techniques

2.4 Choix Techniques

2.4.1 Choix des langages et des frameworks de modélisation

Dans la conception de notre application mobile, nous utiliserons le framework React Native. Ce fra-
mework est basé sur ES6, une nouvelle version du langage Javascript. Nous aurons également a
utilisé un autre langage nommé le JSX. Pour la conception de l’api de notre application mobile, nous
nous servirons de firebase.
‘

• Javascript :
JavaScript, désigne un langage de développement informatique, et plus précisément un lan-
gage de script orienté objet. On le retrouve principalement dans les pages Internet. Il permet,
entre autres, d’introduire sur une page web ou HTML des petites animations ou des effets.Il
s’agit d’un langage créé en 1995 par Brendan Eich, en même temps que la technologie Java, il
se distingue des langages serveurs par le fait que l’exécution des tâches est opérée par le na-
vigateur lui-même, sur l’ordinateur de l’utilisateur, et non sur le serveur web. Il s’active donc
généralement sur le poste client plutôt que côté serveur.[?]

• ES6 :
ES6 est l’abréviation de ECMAScript 6 ; il s’agit de la version de Javascript mise à jour en 2015.
ES6 a été pensé pour créer des applications web dont la maintenance est plus facile, tout en
restant compatibles avec le code existant.De nouvelles fonctionnalités ont été ajoutés au lan-
gage. Ainsi, la bibliothèque standard s’enrichit de nouvelles méthodes, mais surtout, le langage
adopte de nouvelles syntaxes, comme les classes ou les modules, permettant d’avoir un code
beaucoup plus structuré et lisible. [?]

• JSX :
JSX, Javascript Synthax Extension est une syntaxe permettant d’intégrer du HTML ou du XML
dans du Javascript. Il est utilisé par React car il vous permet d’écrire votre langage de balise
dans le code Javascript. Cela ressemble à du HTML sur le Web, sauf qu’au lieu d’éléments Web
tels que <div> ou <span>, vous utilisez des composants React.[?]

• Firebase :
Firebase est une plateforme mise en place par James Tamplin et Andrew Lee en 2011 et racheté
par Google en 2014. L’objectif de cette plateforme est de faciliter la création de backend à la
fois scalable et perfromant. La plateforme fournit deux types de services : des outils de déve-
loppement et de test de son application et des outils permettant d’augmenter et d’engager ses
cibles.[?] Nous avons eu à utiliser les outils suivants :

– Firebase Authentification : Cet outil fournit des SDK faciles à exploiter, des services back-
end ou encore des bibliothèques d’interface utilisateur. Ces bibliothèques vous permettent
d’authentifier vos utilisateurs.[?]

– Realtime Database : Firebase Realtime Database n’est autre qu’une base de données NoSQL,
bénéficiant d’un hébergement « Cloud » et permettant le stockage et la synchronisation

15
Chapitre 2. Modélisation et conception 2.4. Choix Techniques

de données de vos utilisateurs. Les développeurs peuvent gérer cette base de données en
temps réel.[?]

• React Native :
React Native est un framework d’applications mobiles open source créé par Facebook en 2015.
Il est utilisé pour développer des applications pouvant fonctionner sur différents systèmes d’ex-
ploitations mobiles, notamment Android et iOS. Supprimant la contrainte de développer une
même application avec des langages différents pour correspondre à chaque plateforme, React
Native permet aux développeurs d’utiliser les fonctionnalités natives de ces plateformes.[?]

• XANO :
Xano est une plateforme qui nous permet de créer des API sans coder. La première étape est
de créer et de modéliser sa base de données. Ensuite, la plateforme se charge de nous créer des
CRUD pour chaque table de la base de données. La plateforme créée également les points de
terminaisons que nous utiliserons pour recevoir et envoyer des requêtes.[?]

2.4.2 Choix des outils de développement

Comme outil de conception, nous avons utilisé :

• Visual Studio Code :

Visual Studio Code est un éditeur de code source qui peut être utilisé avec une variété de lan-
gages de programmation, notamment Java, JavaScript, Go, Node.js et C++. Il est basé sur le
cadre Electron, qui est utilisé pour développer des applications Web Node.js qui s’exécutent
sur le moteur de présentation Blink. Visual Studio Code utilise le même composant d’éditeur
(nom de code Monaco) utilisé dans Azure DevOps (anciennement appelé Visual Studio Online
et Visual Studio Team Services). Le logiciel prend en charge le Windows Subsystem for Linux
et, permet ainsi, par exemple, de programmer facilement en C/C++ depuis un ordinateur Win-
dows 10.

2.4.3 Choix des outils de design

• Figma :
L’un des aspects le plus important de notre application est son interface utilisateur et son er-
gonomie. Afin de concevoir les maquettes de notre application, nous nous sommes servis du
logiciel de conception d’interface : Figma. Figma est une application spécialisée dans la concep-
tion des interfaces Web et mobiles. Cet outil a été conçu dans l’esprit d’un Design System, par-
tageable par une équipe de designers. En ce sens, c’est un outil puissant et complètement dans
les tendances actuelles. Aujourd’hui, il n’est pas possible de parler de prototypage et d’outils
de design collaboratif sans évoquer Figma. Figma appartient à la nouvelle génération d’ou-
tils de design des interfaces dématérialisées. Il est conçu pour un travail collaboratif entre les
différents intervenants d’un projet. Outre les ressources et les éléments graphiques qu’il per-
met d’exporter, Figma offre la possibilité de générer le code associé aux différents éléments de
l’interface. [?].

16
Chapitre 2. Modélisation et conception 2.4. Choix Techniques

2.4.4 Choix du SGBD

• PostgreSQL :
PostgreSQL est un système de gestion de base de données relationnelle orienté objet puissant et
open source qui est capable de prendre en charge en toute sécurité les charges de travail de don-
nées les plus complexes. Alors que MySQL donne la priorité à l’évolutivité et aux performances,
Postgres donne la priorité à la conformité et à l’extensibilité SQL. PostgreSQL fonctionne sur
tous les principaux systèmes d’exploitation et est conforme à ACID depuis 2001. Postgres peut
être téléchargé gratuitement et déployé sur du matériel standard, ou peut être exécuté dans le
Cloud par le biais d’une variété de fournisseurs.[?].

Conclusion

Dans ce chapitre, il a été question d’aborder le côté technique de la réalisation dans les moindres
détails. Nous avons approfondi les analyses sur les fonctionnalités et étudier les outils à utiliser.

17
Chapitre 3
Résultats et Discussions

Introduction

Les travaux menés tout au long de ce projet nous ont permis de concevoir Noupklon : une application
mobile facilitant la revue et la révision des cours aux élèves candidats à l’examen du Baccalauréat.
La présentation des résultats obtenus ainsi qu’une phase de discussion sont nécessaires pour mieux
jauger la qualité de ce qui a été fait. Nous procéderons, de ce fait, à une présentation détaillée notre
système, puis nous discuterons de ses insuffisances et limites.

3.1 Présentation de l’application mobile pour la révision de l’examen du

baccalauréat

3.1.1 Logo de l’application

Le logo de notre application mobile est d’un symbole associé à du texte.
L’icône du logo est utilisée ici comme icône de notre application.

F IGURE 3.1 – Logo de l’application

Violet : # 4E5AA7 Vert : 5FB4A2

18
Chapitre 3. Résultats et Discussions 3.1. Présentation de l’application mobile pour la révision de l’examen du baccalauréat

F IGURE 3.2 – Monogramme du logo

F IGURE 3.3 – Icône du logo

3.1.2 Interfaces de l’application

Ecran de bienvenue
Lorsque l’utilisateur lance son application de révision, il atterrit sur un écran défilant composé de
trois interfaces. Ces interfaces décrivent l’objectif de l’application.

19
Chapitre 3. Résultats et Discussions 3.1. Présentation de l’application mobile pour la révision de l’examen du baccalauréat

F IGURE 3.4 – Réviser-Evaluer-Réussir

20
Chapitre 3. Résultats et Discussions 3.1. Présentation de l’application mobile pour la révision de l’examen du baccalauréat

Page d’accueil de l’application mobile

F IGURE 3.5 – Ecran d’accueil-Matières

21
Chapitre 3. Résultats et Discussions 3.2. Discussion

3.2 Discussion

La solution développée connaît certaines insuffisances au nombre desquelles nous avons : - la néces-
sité pour les utilisateurs d’être connectés à internet - la non-disponibilité de l’application mobile sur
toutes les plateformes.

Conclusion

Cette étape nous a permis de présenter le prototype développé. Nous avons également soulevé dans
ce chapitre les insuffisances de notre prototype.

22
Conclusion générale et perspectives

Le présent travail a donné à une application mobile permettant à tout élève candidat au baccalauréat
de se préparer pour l’examen. Ainsi, cette application mobile permet à l’élève d’effectuer des quiz,
d’avoir accès à des épreuves corrigées et de suivre sa progression. Pour réaliser cette application,
nous avons commencé par l’étape de l’analyse qui est indispensable. Cette analyse nous a permis
de faire un état des lieux des solutions existantes et d’identifier les besoins. À l’issue de cette étape,
nous avons pu passer à la conception d’architecture de base stable et ensuite au choix justifié des
technologies avant de passer à l’implémentation de l’application mobile proprement dite. De ce qui
précède, il est difficile de prétendre avoir eu une solution idéale. Toutefois, nous espérons avoir ré-
pondu à notre problématique. Cependant, nous sommes conscientes des améliorations à faire. Nous
avons prévu d’améliorer l’expérience utilisateur et d’étendre notre application aux séries techniques.

23
Bibliographie

24
Table des matières

Dédicace ii

Remerciements iii

Résumé iv

Abstract v

Table des figures 1

Introduction 2

1 État de l’art 4
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.1 Généralités sur les applications mobiles . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Application web mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Étude de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Intérêt de cette solution par rapport aux existantes . . . . . . . . . . . . . . . . . . . . . 7
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Modélisation et conception 8
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Analyse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.1 Analyse des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.2 Les besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.3 Les besoins non fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3.1 Modélisation fonctionnelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3.1.1 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . 10
2.3.1.2 Description textuelle des cas d’utilisation . . . . . . . . . . . . . . . . . 12
2.3.1.3 Diagramme de séquences . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3.2 Modélisation conceptuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.2.1 Diagramme de classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.4 Choix Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.4.1 Choix des langages et des frameworks de modélisation . . . . . . . . . . . . . . 15
2.4.2 Choix des outils de développement . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4.3 Choix des outils de design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.4.4 Choix du SGBD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

25
 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3 Résultats et Discussions 18
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1 Présentation de l’application mobile pour la révision de l’examen du baccalauréat . . 18
3.1.1 Logo de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1.2 Interfaces de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2 Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Conclusion 23

Bibliographie 24

Table des matières 25

26
27