Arafet-Zouari Rapport-Pfe

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
Université de Carthage
Faculté des Sciences Economiques et de Gestion de Nabeul
Rapport de Stage
Présenté en vue d'obtenir le diplôme de la LICENCE FONDAMENTALE
SPECIALITE : Informatique Appliquée à la Gestion
Elaboré par
Arafet Zouari
Conception et Réalisation d’une application web/mobile

d’un Registre en ligne
Réalisé au sein de
Centre National d’Informatique
Encadré par
Encadrante universitaire Encadrante professionnel

Mme.Imen Derbel Mme.Imen Ghrissi
Année universitaire
2018 - 2019
Dédicaces
Je dédie ce projet aux êtres les plus chers à mon cœur:
Mes chers parents
Aucun mot ne pourrait vous exprimer l’amour que je vous porte.
Je mets entre vos mains le fruit de longues années d’études,
de longs mois d’amour, de tendresse, de sacrifices et d’encouragement
qui m’ont donnés la force pour persévérer dans la vie.
Mes chers frères Wael , Jamil et ma chère soeur Zaineb
Pour leurs grand amour, que dieu vous protège et je vous espère
le bonheur et la réussite
Ma chère grand-mère Habiba
Pour tout l’affection et l’amour qu’elle m’a entouré, que dieu vous
procure la bonne santé et une longue vie.
Chaque ligne de ce rapport chaque mot et chaque lettre exprime
le respect et le merci à toute ma famille et à tous ceux que j’aime.
Arafet Zouari
i
Remerciements
C’est avec un plaisir immense et un grand honneur que j’ai réservé cette
page en signe de gratitude à toute personne qui m’a aidé pendant la réalisation
de mon projet.
Je tiens tout d’abord à remercier mon encadrante universitaire Madame

Imen Derbel pour son support concernant la mission évoquée dans ce rapport,
pour ses conseils précieux, ses orientations, sa disponibilité et sa transmission
gracieuse des informations. Je le remercie surtout pour sa gentillesse de
m’offrir la grande chance de réaliser ce travail sous sa direction.
Je représente aussi mes sincères gratitudes aux collaborateurs de CNI de

m’avoir accueilli durant ce stage .En particulier, je transmets mon
remerciement à mon encadrante professionnel Madame Imen Ghrissi pour sa
bienveillance et ses conseils.
Je souhaiterais aussi remercier tous les enseignants de la Faculté des Sciences

Economiques et de Gestion de Nabeul qui nous ont transmis leurs
connaissances et nous ont permis d’avancer dans notre cursus.
Finalement, je remercie les membres du Jury d’avoir accepté d'évaluer ce

modeste travail en espérant qu’ils trouvent dans ce rapport les qualités de clarté
et de motivations qu’ils attendent.
ii
Table des matières
Dédicaces………………………………………………………………………..…………….……...…..i
Remerciement……………………………………………………………...…………….……...……….ii
Table des matières……………………………………………...…………………………….……......iii
Liste des figures……………………………..…………………………………………….……...……..v
Liste des tableaux………………………………………………………………………….……..…….vii
Liste des abréviations…………………………………………………………………….……..…….viii
Introduction générale…………………………………………………………………….……....…...1
Chapitre I: Étude préalable…………………………………………………………….…….....…...3
I.1 Introduction……………………………………………………………………………….…….....…3
I.2 Cadre de stage………………………………………………………………………….….………...3
I.2.1 Présentation de l’organisme d’accueil………………………………….….……........3
I.2.2 Mission de CNI………………………………………………………………….……......4
I.2.3 Organigramme de CNI………………………………………………………………......5
I.3 Présentation du projet……………………………………………………………………………….6
I.3.1 Étude de l’existant………………………………………………………………....……..6
I.3.2 Critique de l’existant……………………………………………………………….…….6
I.3.3 Solution proposée………………………………………………………………….……...7
I.4 Méthodologie de développement…………………………………………………………....….….8
I.4.1 Méthode de cycle de vie classique vs méthodes agiles…………………………........8
I.4.2 Choix de la méthodologie de développement………………………………………....9
I.5 Technologie de développement……………………………………………………………..........11
I.6 Conclusion…………………………………………………………………………………..………16
Chapitre II: Analyses et spécification des besoins……………………………………………...17
II.1 Introduction………………………………………………………………………………....……..17
II.2 Identification des besoins ………………………………………………………………………..17
II.2.1 Identification des besoins fonctionnels………………………………………….......17
II.2.2 Identification des besoins non fonctionnels…………………………………….......19
II.3 Identification des acteurs et des cas d’utilisations……………………………………………19
II.4 Elaboration de backlog produit………………………………………………………………….20
II.5 Conclusion…………………………………………………………………………………..……..22
Chapitre III: Étude et réalisation du sprint 1…………………..…………………………........23
III.1 Introduction………………………………………………………………………………..……...23
III.2 Backlog produit sprint 1…………………………………………………………………...……23
III.3 Analyse……………………………………………………………………………………..……...24
iii
III.3.1 Raffinement du cas d’utilisation <<Authentification>>......................................24
III.3.2 Raffinement du cas d’utilisation <<Gérer citoyens>>........................................25
III.3.3 Raffinement du cas d’utilisation <<Gérer communes>>....................................26
III.3.4 Raffinement du cas d’utilisation <<Gérer institutions>>...................................28
III.3.5 Raffinement du cas d’utilisation <<Gérer motifs>>...........................................30
III.3.6 Raffinement du cas d’utilisation <<Gérer comptes utilisateurs>>.....................31
III.4 Conception………………………………………………………………………………......……32
III.4.1 Diagramme de classe associé à sprint 1…………………………………………...33
III.4.2 Diagramme de séquence <<Authentification>>................................................34
III.4.3 Diagramme de séquence <<Rechercher citoyen>>..........................................34
III.4.4 Diagramme de séquence <<Supprimer institution>>.......................................35
III.4.5 Diagramme de séquence <<Ajouter commune>>............................................36
III.4.6 Diagramme de séquence <<Désactiver citoyen>>..........................................37
III.5 Réalisation………………………………………………………………………………......…..38
III.6 Conclusion………………………………………………………………………………...…….45
Chapitre IV: Étude et réalisation du sprint 2…………………..………………………….....46
IV.1 Introduction………………………………………………………………………………..……46
IV.2 Backlog produit sprint 2…………………………………………………………………...….46
IV.3 Analyse…………………………………………………………………………………….……46
IV.3.1 Raffinement du cas d’utilisation <<S’inscrire>>................................................46
IV.3.2 Raffinement du cas d’utilisation <<Gérer profil>>............................................48
IV.3.3 Raffinement du cas d’utilisation <<Consulter extrait de naissance>>...............51
IV.4 Conception………………………………………………………………………………...………52
IV.4.1 Diagramme de classe associé à sprint 2………………………………………….53
IV.4.2 Diagramme de séquence <<S’inscrire>>..........................................................53
IV.4.3 Diagramme de séquence <<Imprimer code d’autorisation>>..........................54
IV.4.4 Diagramme de séquence <<Modifier informations>>.....................................55
IV.4.5 Diagramme de séquence <<Consulter extrait de naissance>>.........................56
IV.5 Réalisation………………………………………………………………………………....……..57
IV.6 Conclusion………………………………………………………………………………....…….64
Conclusion générale…………………………………………………………………………….……..65
Neto graphie……………………………………………………………………………………..……..67
Annexe 1 Journal de stage……………………………………………………………………....…….69
iv
Liste des figures
Figure 1 - Logo CNI………………………………………………………………………………….….3

Figure 2 – Organigramme de CNI………..…………………………..…………..………...….……..5
Figure 3 - Cycle de vie SCRUM….………………………………………..…………………………10
Figure 4 - Description de l’architecture MVC……………....……………………………..………11
Figure 5 - Description de l’architecture API REST………...………………………………….…11
Figure 6 - Logo Ionic..…………………………………………………………………………………12
Figure 7 - Logo Angular..………………………………………………………………………….….13
Figure 8 - Logo Cordova.……………………………………………………………………….…….13
Figure 9 - Logo HTML.…………………..……………………………………………………...……13
Figure 10 - Logo CSS…….…………………………………………………………………….…...…13
Figure 11 - Logo Type Script……………………….…………………………………………..……14
Figure 12 - Logo BootStrap….……………………………………………………………….…..…..14
Figure 13 - Logo PostgreSQL.………………………………………………………………….. .…14
Figure 14 - Logo visual studio code..…..……………………………………………………….…..15
Figure 15- Logo postman……………………………………………………………………….…….16
Figure 16 - Logo NodeJS....……………………………………………………………………….….16
Figure 17 - Logo Star UML.……………...…………………………………………………….. ….16
Figure 18 - Diagramme de cas d’utilisation s’authentifier………………………………….…...24
Figure 19 - Diagramme de cas d’utilisation gérer citoyens………………………………….…..25
Figure 20 - Diagramme de cas d’utilisation gérer communes…………………………………...26
Figure 21 - Diagramme de cas d’utilisation gérer institutions……………………………….….28
Figure 22 - Diagramme de cas d’utilisation gérer motifs………………………………………...30
Figure 23 - Diagramme de cas d’utilisation gérer comptes utilisateurs………………………..31
Figure 24 - Diagramme de classe associé au premier sprint………………………………….....33
Figure 25 - Diagramme de séquence authentification…………………………………………….34
Figure 26 - Diagramme de séquence rechercher citoyen……...…………………………………35
Figure 27 - Diagramme de séquence supprimer institution………...……………………………36
Figure 28 - Diagramme de séquence ajouter commune.………………………………………….37
Figure 29 - Diagramme de séquence désactiver utilisateur…....………………………………...38
Figure 30 - Interface Authentification en mode Galaxy S5……………………………………….39
Figure 31 - Interface administrateur……………………………..………………………………….40
Figure 32 - Interface gérer citoyens………………………………………..………………………..41
v
Figure 33 - Interface gérer communes…………………………………………………………..42
Figure 34 - Interface gérer institutions………………………………………………………....43
Figure 35 - Interface gérer motifs………………………………………………………………..44
Figure 36 - Interface gérer comptes utilisateurs……………………………………………....45
Figure 37 - Diagramme de cas d’utilisation s’inscrire…..………………………………..….47
Figure 38 - Diagramme de cas d’utilisation gérer profil....……………………………..…...48
Figure 39 - Diagramme de cas d’utilisation consulter extrait de naissance………....…...51
Figure 40 - Diagramme de classe associé au deuxième sprint……………………………...53
Figure 41 - Diagramme de séquence s’inscrire……..………………………………………...54
Figure 42- Diagramme de séquence imprimer code………......……………………………...55
Figure 43 - Diagramme de séquence modifier information………...………………………..56
Figure 44 - Diagramme de séquence consulter extrait de naissance….……..……………..57
Figure 45 - Interface inscription………………..………………………….…………………….58
Figure 46 - Interface créer un compte utilisateur……..………………….……………………59
Figure 47 - Interface consulter profil……………………...……………….……………………60
Figure 48 - Interface gérer enfants...………………….…………………….…………………..61
Figure 49 - Interface gérer autorisations……………..…………………….…………………..62
Figure 50 - Interface de saisie de code en mode Iphone X....………..…..…………………..63
Figure 51 - Interface de consultation d’extrait de naissance…….……..………………...…..64
vi
Liste des tableaux
Tableau 1 - Comparaison de modèle classique vs méthodes agiles…………………..……8

Tableau 2 - Cas d’utilisation par acteur.………………………………………………….…20
Tableau 3 - Backlog Produit………….…………………………………………………….….21
Tableau 4 - Backlog Sprint 1………….…………………………………………………….....23
Tableau 5 - S’authentifier……………..………………………………………………………..24
Tableau 6 - Modifier données……………………………………………………………..…..25
Tableau 7 - Rechercher citoyen……………………………………………………………..…26
Tableau 8 - Ajouter commune………….…………………………………………………...…27
Tableau 9 - Ajouter institution………….………………………………………………….…..28
Tableau 10 - Supprimer institution……..……………………………………………………..29
Tableau 11 - Rechercher motif………….……………………………………………….……..30
Tableau 12 - Activer utilisateur…………..……………………………………………….……31
Tableau 13 - Désactiver utilisateur……………………………………………………..….….32
Tableau 14 - Backlog produit sprint 2………………………………………………..…….…46
Tableau 15 - S’inscrire……………………………………………………………….…………47
Tableau 16 - Ajouter Enfant ……………….……………………………………………….…48
Tableau 17 - Modifier informations………..…………………………………………………49
Tableau 18 - Imprimer code………………....………………………………………………..50
Tableau 19 - Consulter historique……………………………………………………………51
Tableau 20 - Consulter extrait de naissance…………..………………………………....…52
vii
Liste des abréviation
A
API : Application Programming Interface
C
CNI : Centre National d’Informatique
CSS: Cascading Style sheets
J
JS: JavaScript
H
HTML: HyperText Markup Language
HTTP: HyperText Transfer Protocol
I
IOS: Iphone Operating System
M
MVC: Model View Controler
O
OS: Operating System
R
REST API : Representational state transfer application programming system
S
SQL: Structured Query language
T
TS: Type Script
U
UML:Unified Modeling Language
URL: Uniform Resource locator
X
XML: eXtensible Markup language
viii
Introduction Général
_________________________________________________________________________________
Introduction générale
De nos jours, un acte de naissance est demandé par plusieurs institutions soit pour
des papiers de citoyennetés soit pour un mariage, un divorce ou encore une inscription
scolaire.
Pour avoir un extrait de naissance, un citoyen est obligé d’assister auprès d’un guichet
municipal, faire la queue et attendre parfois des heures.
En conséquence, les citoyens peuvent perdre beaucoup de temps en attendant leurs tours. De
plus, un acte de naissance coûte aujourd’hui deux dinars cinq cents millimes pour les citoyens
et trois dinars pour l'Etat nettement les coûts d’impressions et d’électricité.
Dans ce contexte, les institutions cherchent à favoriser l’efficience et la rapidité des services.
Elles recourent aux nouvelles technologies d’informations. En effet, la majorité des gens
s’adressent aux applications mobiles puisque les Smartphones occupent une place
prépondérante dans notre quotidien. De plus, on ne peut nier qu'une autre portion s’intéresse
aux applications web.
Dans ce cadre, le Centre national d’informatique souhaite automatiser le processus

d’extraction des extraits de naissances. C’est ainsi qu’il nous a confié de développer une
application web/mobile d’un registre en ligne. Cette application consiste à réaliser une
application à la fois web et mobile tournant sur différents systèmes d’exploitations soit
android soit IOS. Elle permet aux citoyens, essentiellement, de donner autorisations aux
institutions qui demandent un extrait de naissance pour qu’ils puissent consulter cet extrait à
travers un code imprimé par le citoyen au lieu d’aller aux municipalités.
Cette application regroupe à la fois un espace destiné aux citoyens qui vont gérer leurs
profils, un autre espace pour les responsables d’institutions qui vont consulter l’extrait de
naissance des citoyens, et un dernier espace pour l’administrateur qui va gérer les citoyens,
les communes, les institutions, ainsi que les motifs.
Nous avons adopté la méthodologie de conception Agile Scrum pour développer notre
application. Le premier sprint est relatif à la gestion citoyens, communes, institutions et des
1
Introduction Général
_________________________________________________________________________________
motifs ainsi que la gestion des comptes utilisateurs. Le deuxième sprint se concentre sur la
gestion des profiles citoyens. Notre rapport s'articule autour de quatre chapitres.
Le premier chapitre, situe le projet dans son contexte général. D’abord, nous présenterons
l’organisme d’accueil CNI. Ensuite, nous allons critiquer l’existant et nous allons proposer
des solutions. Enfin nous allons mettre l’accent sur la méthodologie et les outils de
développement.
Le deuxième chapitre est destiné aux analyses et spécification des besoins ainsi qu’à
l’élaboration du diagramme de cas d’utilisation global et du backlog product.
En ce qui concerne le troisième chapitre, il sera réservé au premier sprint destiné à

l’administrateur et qui va comporter une analyse de différentes tâches du premier backlog
sprint. De plus, ce chapitre va inclure une étude conceptuelle relative à ce sprint. Nous
trouvons à la fin de ce chapitre la phase de réalisation et des tests des différentes tâches.
Le dernier chapitre comprendra le deuxième sprint. Une partie est destinée aux citoyens
et une autre au responsable d’institution. Il va comporter la conception et la réalisation de
différentes tâches.
Une conclusion générale clôtura notre rapport.
2
Chapitre I Etude préalable
_________________________________________________________________________________
Chapitre I. Etude préalable
________________________________________________________
I.1 Introduction
L'étude d’un projet est une démarche stratégique qui va nous permettre d’avoir une
vision globale sur le plan de travail. Nous commencerons par la présentation de l’organisme
d’accueil qui est le CNI. Ensuite nous présenterons notre projet en dressant un état de
l’existant, analyser ses forces et faiblesses et formuler une solution potentielle. Enfin, nous
mettrons l’accent sur la méthodologie et les outils de développement.
I.2 Cadre de stage

Dans cette partie nous présenterons l’organisme d’accueil qui a proposé le sujet.
Nous commencerons par présentation de l’entreprise. Ensuite, nous allons citer ses services
et nous terminerons par son organigramme.
I.2.1 Présentation de l’organisme d’accueil

Le CNI est un établissement public institué le 30 décembre 1975 à caractère non
administratif doté de la personnalité civile et de l’autonomie financière.
Le CNI est un organisme placé sous la tutelle du Ministre des Technologies de la

Communication et de l'Economie Numérique, et opérant dans les domaines du secteur de
l’informatique et des technologies de la communication et certifié ISO 9001 version 2015. [1]
Figure 1 – Logo de CNI
3
_________________________________________________________________________________
I.2.2 Missions de CNI

le CNI assure les activités suivantes [1] :
I.2.2.1 Maîtrise d’ouvrage déléguée
● Maîtrise d’ouvrage déléguée et Pilotage de projet.
I.2.2.2 Etudes & Conseil
a) Système d’information
● Audit de système d’information ;
● Etude d’opportunité, Etude préalable, Etude organisationnelle
● Elaboration de Schémas Directeurs Informatiques, de termes de référence, de cahiers
des charges et de plans d’actions
● Assistance au dépouillement des offres.
b) Réseaux et Sécurité
● Etude Réseaux et sécurité
● Assistance à la réception et à l’installation de réseaux
● Elaboration des Cahiers des charges réseaux et sécurité
● Assistance au dépouillement
● Conseils et avis techniques
I.2.2.3 Développement
● Développement et Maintenance des systèmes d’Information
● Formation sur les SI développés par le CNI.
I.2.2.4 Hébergement du Système
● Hébergement des serveurs.
● Hébergement des applications et des données avec ou sans exploitation.
I.2.2.5 Backup et continuité d’activité
● Assurer la continuité de fonctionnement des applications nationales en cas de
sinistre
● Assurer la continuité des services rendus aux utilisateurs
● Assister d’autres institutions pour la mise en place de leurs solutions de backup
● Héberger les plateformes de ses clients (services dédiés)
● Fournir les services de conseil pour l’élaboration de plans de continuité d’activité
I.2.2.6 Formation & certification
● Formation sur les applications nationales
● Séminaires d’expertise
4
_________________________________________________________________________________
● Formation continue
● Formation certifiante
● Stage et initiation à la vie professionnelle
I.2.2.7 Déploiement des Applications et assistance des utilisateurs:
● Le CNI déploie les applications développées pour le compte de l’administration en
vue de leur exploitation.
● Le déploiement des postes peut se faire sur site (chez le client) ou dans les locaux du
CNI.
I.2.3 Organigramme de CNI

La figure 2 montre l’organigramme de CNI. Nous avons réalisé notre stage dans la
direction des projets.
Figure 2-Organigramme de CNI

5
_________________________________________________________________________________
I.3 Présentation du projet

Nous commençons dans cette partie de présenter un état de l’existant puis analyser
ses points faibles et donner enfin la solution proposée.
I.3.1 Étude de l’existant
De nos jours, plusieurs institutions demandent des citoyens un extrait de naissance

pour qu’ils puissent assurer un service. Par conséquent, le citoyen est obligé d’aller
à la municipalité, faire la queue au niveau de guichet et attendre parfois des heures. Cette
attente peut perturber les services des citoyens surtout si le taux d’encombrement est élevé ou
bien s’il y a des problèmes de réseau. De plus, un extrait de naissance coûte aujourd’hui deux
dinars cinq cents millimes. Notons aussi les charges d'électricités, d’impression etc.
D’ailleurs selon les dernières statistiques un extrait de naissance coûte sur l'État trois
dinars.
Actuellement, des nouvelles technologies d’information et de communication se sont

répandues sur le marché. Ils ont un impact important sur le fonctionnement des entreprises
notamment avec le développement des différents outils.
Les institutions tunisiennes cherchent à améliorer la qualité de service afin de satisfaire les
citoyens. Elles ont recouru à ces nouvelles technologies qui sont aujourd’hui adaptées par la
majorité des gens.
I.3.2 Critique de l’existant
Suite à notre étude du processus actuel de l’obtention d’un extrait de naissance d’une
manière traditionnelle en allant aux municipalités, nous présenterons certaines limites:
➢ Perte de temps: les citoyens perdent leurs temps en se déplaçant aux municipalités,
faire la queue, attendre parfois des heures vu l’encombrement au niveau des guichets.
➢ Coût: un extrait de naissance coûte au citoyen deux dinars cinq cents millimes et
à l'État trois dinars (impression, électricité etc)
➢ Retard: parfois des problèmes de réseau ou bien d’encombrement peuvent vous

causer un retard.
6
_________________________________________________________________________________
➢ Surcharge: la demande d’un extrait de naissance par plusieurs institutions peut

engendrer un encombrement auprès du guichet municipal.
➢ Stress: l’encombrement au niveau du guichet ainsi que le bruit peuvent énerver les
citoyens ainsi que l’agent de guichet qui devient stressé par le travail.
I.3.3 Solution proposée
Dans le but de pallier aux limites citées et surtout rapprocher les prestations du
citoyen et de l’entreprise, nous avons proposé au sein de CNI le développement d’une
application qui va accélérer les procédures, limiter les déplacements et éviter
l’encombrement et les pertes de temps.
Cette application sera utilisée d’une part par les citoyens nés en Tunisie et qui vont donner
une autorisation aux institutions qui demandent un extrait de naissance pour que cet
institution puisse consulter son acte. Cette autorisation doit être obligatoirement conforme
à un motif c’est à dire que le citoyens doit donner la raison pour laquelle l’institution va
consulter son acte de naissance. De plus, cette autorisation peut être personnelle ou bien
relative à l’un de ses enfants. Notons aussi que cette autorisation n’est effectué qu'après avoir
un code qui sera envoyé par SMS ou bien par email ou encore imprimé par le citoyen selon
son choix.
Cette application permet aussi aux citoyens d’ajouter leurs enfants à conditions que les
informations soient totalement correctes si non chaque information incorrecte peut engendrer
des poursuites judiciaires.
D’autre part, cette application sera aussi utilisée par les responsables d’institutions qui vont
tout d’abord, s’authentifier selon un login et un mot de passe donnés par le CNI. Puis, dès
que le responsable institution est identifié il va consulter l’extrait de naissance du citoyen
selon un code donné par ce dernier.
Cette application sera à la fois disponible sur un site web et en même temps téléchargeable
gratuitement du stories: Google Play, Apple Store et Windows Store.
7
_________________________________________________________________________________
I.4 Méthodologie de développement
Le choix de méthode de travail est une étape primordiale du travail tout au long de la
période de stage.
Parmi les méthodes nous citons trois grandes familles du processus de développement
logiciel: les méthodes classiques linéaire (cycle en v, cascade), les méthodes itératives
(spiral, incrémental) et les méthodes itératives incrémentales (processus unifié et méthodes
agiles)
Dans le paragraphe qui suit, nous montrerons les différences entre les modèles
classiques et les méthodes agiles (scrum, XP)
I.4.1 Méthodes classiques vs Méthodes agiles
Le tableau 1 illustre une comparaison entre les deux approches (traditionnelle et Agile) [2]
Tableau 1 - Comparaison de modèle classique et des méthodes agiles
Critère Modèle classique Méthodes agiles
Cycle de vie en cascade ou en v Itératif et incrémental
Equipe une équipe avec des ressources une équipe soudée qui communique
spécialisées dirigés par un chef et interagisse plutôt qu’une équipe
projet d’individualité soutenue par un
Chef projet
Documentation une documentation complète juste le code sera commenté

(cahier de charge, code,
diagrammes etc)
Rôle de client Négociation du contrat et il le client exprime ses attentes et ses

donne son avis à l’étape final critiques tout au long du cycle de
lorsque le logiciel est terminé développement de logiciel
Planification des plans plus ou moins planifier le projet de manière

détaillés sur la base des général
exigences définies au début de
projet
Délais il y a des délais à respecter pas des délais à respecter
Mesure de succès Respects des engagements Satisfaction du client après la

initiaux en termes de coûts, de livraison et une rétrospective
budget et au niveau de qualité satisfaisante
8
_________________________________________________________________________________
I.4.2 Choix de la méthodologie de développement
Suite à la comparaison effectuée dans la section I.4.1 nous pouvons dire que les
méthodes agiles sont considérées comme une méthodologie efficace et qui est adaptée avec
notre projet et qui va satisfaire les besoins de notre client.
Parmi les méthodes agiles nous allons opter la méthode Scrum et cela selon une étude
comparative des différentes méthodes agile.
I.4.2.1 Détails sur la méthode SCRUM
La méthodologie SCRUM est expérimentée en 1993, et c’est la méthode agile la plus
utilisée dans le monde. Cette méthode consiste à définir un cadre de travail permettant la
réalisation de projets complexes .Cette méthode a été initialement prévue pour le
développement de projet informatique mais elle peut être appliquée à tout type de projet de
plus simple au plus innovant.
Les projets qui suivent la méthode agile SCRUM sont divisés en plusieurs cycles de
travail relativement court que l’on appelle sprints.
Ces derniers permettent aux membres de l’équipe de mieux planifier les prochaines
étapes de développement du projet.les sprints peuvent durer d’une à quatre semaines. [2]
I.4.2.2 Répartition des rôles
Les projets qui utilisent la méthode SCRUM se forment autour d’une équipe
auto-organisée et qui ont tous le même but.
L’équipe SCRUM est répartie en trois rôles principaux [2]:
● Le product owner (responsable produit): ce dernier définit les spécifications
fonctionnelles et communique la vision globale du produit à l’équipe .Il établit la
priorité des fonctionnalités à développer ou à corriger et valide les fonctionnalités
développées. Il doit jouer le rôle de client final qui a le plus de responsabilités et
d’autorité.
● Le SCRUM Master: Ce dernier agit en tant que facilitateur entre le responsable
produit et l’équipe. Son rôle principal est d’éliminer tous obstacles qui peuvent
empêcher l’équipe à atteindre les objectifs fixés pour chaque sprint .Il facilite la
communication au sein de l’équipe et cherche à améliorer le savoir-faire de son
équipe.
● Les Membres de l’équipe: Sont des multiples compétences responsables du résultat
final de chaque sprint.
9
_________________________________________________________________________________
I.4.2.3 Les piliers de la méthode SCRUM

Les trois piliers de la méthode SCRUM sont les suivants [2]:
● La transparence : les aspects importants du processus doivent être visibles à tous.
C’est pour cela que SCRUM insiste sur le fait de créer un langage commun entre les
membres de l’équipe et le management, ce qui permettra une compréhension
commune de projet.
● L’inspection: un bilan régulier sur les résultats produits est réalisé afin de détecter les
écarts indésirables. Il est important que ces inspections soient faites par un inspecteur
bien formé et cela de manière adapté car cela peut nuire à l’avancement du projet.
● L’adaptation: lorsqu’un écart est constaté pendant l’inspection, le processus devra
être adapté grâce à des actions visant à améliorer la situation.
I.4.2.4 Cycle de vie de SCRUM
La figure 3 montre le cycle de vie de SCRUM .En effet, la méthode agile scrum
suit un processus itératif incrémental permettant d’obtenir un produit proche des
besoins client en prenant en compte l’évolution de ces derniers et de maximiser la
valeur du produit livré.
Chaque membre de l’équipe joue un rôle bien déterminé. La méthode repose

sur deux journaux qui sont le backlog produit et le backlog sprint.
Figure 3 - Cycle de vie SCRUM [2]
10
_________________________________________________________________________________
I.5 Technologies de développement
Pour aboutir et réussir le développement et la mise en place de notre application au

sein de CNI, nous avons utilisé différents outils logiciels et matériels.
I.5.1 Architectures mises en place
I.5.1.1 Architecture MVC (Model-View-Controller):
Cette architecture est formée par le modèle qui va traiter la demande de l’utilisateur
en accédant à la base de donnée ,la vue qui se concentre sur l’affichage et qui va présenter
les résultats de traitement ,retourné par le contrôleur ,à l’utilisateur et le contrôleur qui est
un intermédiaire entre le modèle et la vue et qui va récupérer l’information du modèle et les
affiche dans la vue [4].
Figure 4 - Description de l’architecture MVC [4]

I.5.1.2 Architecture REST API
Dans notre projet nous avons utilisé l’architecture REST API pour la
communication entre l’application front office ionic et le serveur de données
Postgresql.
Figure 5 - Description de l’architecture REST API [5]
11
_________________________________________________________________________________
REST API est un style d’architecture inspiré de l’architecture web pour construire des
services web et il utilisera les standards HTTP, URL (pour identifier les ressources),
XML/HTML (pour présenter les ressources donnés)
Les services Web Rest est plus facile on ne parle pas d’opérations on va soit ajouter un
élément, lister un élément, supprimer ou bien mettre à jour un élément donc pour Rest juste
accès au données et modification des données.
Pour Rest on trouve une ressource, un identifiant ressource(URL)et une représentation de la
ressource (en HTML,XML, TEXT,JSON…)qui nous donne une vue sur l état de ressource .
REST ne va pas invoquer des opérations complexe mais il va invoquer des requêtes HTTP
simple qui sont GET POST PUT DELETE concernant les méthodes on les appelles les
méthodes CRUD : Create(post) ,Retrieve(GET), Update(put), Delete(delete) [5].
I.5.2 Outils de développement:
❖ Ionic 4.0.1:
Ionic est un Framework open-source créé en 2013 qui s’appuie sur Angular et
Cordova et qui sert à créer des applications multiplateformes en utilisant des outils
web comme HTML, CSS, JS. Il sert à créer des applications hybrides c’est à dire que
d’une côté nous allons avoir des éléments qui vient de web et de l’autre les éléments
qui vient de natifs ce qui va réduire le temps de développement et limiter les webView
et cette application va être distribuée sur différentes plateformes(App Store, Google
Play, Market Place..) autrement dit différents systèmes d’exploitation IOS, Android ,
Windows Phone etc avec un seul développement [6].
Figure 6 - Logo ionic

❖ Angular 7.2.4
Angular est une plateforme de développement géré par Google et qui permet
de créer des applications web dynamiques.
Angular permet de créer de single page application ce qui va assurer la performance de
l’application, de plus angular est très structuré dans son architecture,il est réutilisable et
vous pouvez communiquer avec n’importe quel backend.
12
_________________________________________________________________________________
La première version est AngularJS et elle a été lancée en 2010 et dernièrement en 2018 a été
lancé la version 7 d’angular [7]
Figure 7 - Logo d’Angular
❖ Cordova 8.1.2
Cordova est un Framework open source développé par Apache et nous
permet d’interagir avec les fonctionnalités natives de Smartphone et elle permet de
créer des applications hybrides pour différentes plateformes (Android,IOS,windows...)
en HTML, CSS et JavaScript [8].
Figure 8 - Logo Cordova
❖ HTML
HyperText Markup Language est un langage de balisage dont le rôle est de
formaliser l'écriture d'un document avec des balises de formatage. Les balises
permettent de définir la structure logique du document et les liens qu'il établit avec
d'autres documents [9].
Figure 9 - Logo HTML
 CSS
Cascading Style Sheets a pour rôle, en quelque sorte, de « décorer » le site

web, lui donner de l’allure. On utilise le CSS en particulier pour réaliser la mise en
page du site [10].
Figure 10 - Logo CSS
13
_________________________________________________________________________________
❖ TS
TypeScript est un langage de programmation orienté objet plus structuré que
JavaScript et son développement est plus facile et rapide d’ailleurs il ajoute des
fonctionnalités extrêmement utiles comme le Typage Script qui permet de s’assurer
qu’une variable ou une valeur passée ou retournée soit de type prévue ,lamba ou
arrows permettant d’obtenir un code plus lisible et donc plus simple et des classes et
des interfaces permettant de coder de manière beaucoup plus modulaire
et robuste [11].
Figure 11 - Logo type script

❖ Bootstrap
Bootstrap est une collection d'outils utiles à la création du design de sites et
d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires,
boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions
JavaScript en option [12].
Figure 12 - Logo de Bootstrap
❖ Système de gestion de base de données(SGBD): PostgreSQL 11

PostgreSQL est un système de gestion de base de données relationnelle. C'est un outil
libre concurrent d'autres systèmes de gestion de base de données, qu'ils soient libres (comme
MariaDB et Firebird), ou propriétaires (comme Oracle, MySQL, Sybase, DB2, Informix et
Microsoft SQL Server). Comme les projets libres Apache et Linux, PostgreSQL n'est pas
contrôlé par une seule entreprise, mais est fondé sur une communauté mondiale de
développeurs et d'entreprises [13].
Figure 13 - Logo de PostgreSQL
14
_________________________________________________________________________________
I.5.3 Environnement de développement
Lors de l’élaboration d’une grande application, nous devons être conscients

de l’importance de l’environnement de développement. Cette section est divisée en
deux parties. La première est destinée pour une description de notre environnement
matériel et la deuxième pour l’environnement logiciel.
I.5.3.1 Environnement matériel
Au cours de la réalisation de notre projet, nous avons utilisé un ordinateur

ayant les propriétés suivantes:
➢ Modèle : HP
➢ Mémoire RAM installée : 4.00GO
➢ Processeur : Intel(R) Core TM i3-5005U CPU @ 2.00GHZ.
➢ Système d’exploitation : windows 10 64 bits
I.5.3.2 Environnement logiciel:

Pour le développement de notre application, nous avons utilisé les logiciels
suivants:
❖ Visual Studio Code

C’est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et macOS et il est présenté comme un éditeur de code open
source et gratuit, supportant une dizaine de langages. sous la licence libre
[14].
Figure 14 - Logo de visual studio code
❖ Postman
Postman est l’un de solutions pour appeler et tester une API Web .Une
fois Postman installé, vous disposez d’un environnement graphique complet
pour gérer l’ensemble de vos interactions avec vos API Web. Il offre de très
nombreuses possibilités pour manipuler une API, conserver l’ensemble des
15
_________________________________________________________________________________
requêtes dont vous avez constamment besoin ainsi que sauvegarder des
variables à jeu de requêtes [15].
Figure 15 - Logo postman
❖ Node JS 10.15.0
Node.js est une plateforme logicielle libre et événementielle en JavaScript
autrement dit c’est un environnement d’exécution java script qui permet d’utiliser le
langage JS sur le serveur et pour l’utilisation d’angular et ionic nous devons installer
tout d’abord Node.JS pour que nous puissions créer le projet ionic [16].
Figure 16 - Logo Node.JS
❖ StarUML
C’est un logiciel de modélisation UML. Il est open source et il gère la plupart
des diagrammes spécifiés dans la norme UML 2.0 et il permet de modéliser les
traitements informatiques et leurs bases de données associées [17].
Figure 17 - Logo StarUML
I.6 Conclusion
Dans ce premier chapitre, nous avons présenté le cadre général de notre projet .
En effet, nous avons commencé par une présentation de notre organisme d’accueil. Ensuite,
nous avons détaillé l'intérêt de réalisation de notre projet. Enfin , nous avons montré la
méthode de développement suivi pour la conception de notre application ainsi que les outils
nécessaires pour la réalisation du produit.
16
Chapitre II Analyse et spécification des besoins
_________________________________________________________________________________
Chapitre II. Analyse et Spécification des

besoins
________________________________________________________
II.1 Introduction
Pour avoir une bonne vision du produit, nous entamerons dans ce chapitre la phase
d’analyse et spécification de besoins en mettant l’accent en premier lieu sur les besoins
fonctionnels et la branche non fonctionnelle afin de produire le backlog produit. Nous
présenterons par la suite les acteurs et les cas d’utilisation.
II.2 Identification des besoins
Avant de démarrer un projet, il est nécessaire de le définir et de le planifier afin de

bien atteindre les objectifs voulus par notre client, et pour l’identification des besoins et la
collecte des informations nécessaires nous avons procédé comme suit :
● Des “Daily Meeting” qui sont des réunions quotidiennes de moins de 15 min avec
le product owner, le représentant du client et qui porte la vision globale du produit ,
gère le backlog produit et définir les priorités.
II.2.1 Identification des besoins fonctionnels
Les exigences fonctionnelles sont les services que le système doit fournir afin de
satisfaire les besoins de l’utilisateur, autrement dit, ce sont les fonctionnalités qu’offrira
notre projet pour chaque acteur.
Notre application doit satisfaire les besoins fonctionnels suivants:
● La gestion du profil du Citoyen
-Le Citoyen a la possibilité de consulter son profil et de modifier ses données.
-Le citoyen a la possibilité de consulter la liste de ses enfants ainsi qu’ajouter un enfant
ou bien changer des informations relatives à ses enfants
-Le Citoyen a la possibilité de donner une autorisation aux institutions qui demandent un
extrait de naissance soit de consulter son extrait soit de consulter l’extrait de l’un de ses
17
_________________________________________________________________________________
enfants et ceci en imprimant le code qui va permettre au responsable institution de faire la

consultation, ou bien par l’envoi de ce code par mail ou téléphone
-Le citoyen peut consulter l’historique des autorisations qu’il a données ainsi que savoir
l’institution qui a consulté son extrait.
● S’inscrire
-Le citoyen doit remplir un formulaire qui contient les informations nécessaire pour son profil
puis un autre formulaire qui contient son login et mot de passe.
● S’authentifier
-Un utilisateur doit saisir son login et mot de passe pour qu’il puisse accéder à son profil.
● La gestion des citoyens
-Possibilité de consulter la liste des citoyens, rechercher un citoyen et par la suite le

modifier ou bien le supprimer
-Possibilité d’ajouter un nouveau citoyen
● La gestion des communes
-Possibilité de consulter la liste des communes, rechercher et supprimer une commune.
-Possibilité d’ajouter une nouvelle commune.
● La gestion des institutions
-Possibilité de consulter la liste des institutions, rechercher et supprimer une institution.
-Possibilité d’ajouter une nouvelle institution.
● La gestion des motifs
-Possibilité de consulter la liste des motifs, rechercher, supprimer et ajouter un motif.
● La gestion des comptes utilisateurs
-Possibilité de consulter la liste des utilisateurs, rechercher, activer ou bien

désactiver un utilisateur.
18
_________________________________________________________________________________
● Consulter Extrait de naissance
-Le Responsable a la possibilité de consulter l’extrait de naissance du citoyen selon

un code donné par ce dernier.
II.2.1 Identification des besoins non fonctionnels
Les exigences non fonctionnelles sont les attributs qui caractérisent le système pour
son bon développement ainsi que son bon fonctionnement.
Notre application doit garantir les besoins suivant:
➢ la Sécurité: Garantir que nos informations sont complètement protégées par

l’authentification à chaque fois que l’administrateur, le citoyen ou le responsable veut
se connecter.
➢ Irrévocabilité: le citoyen qui a donné l’autorisation à une institution de consulter son

extrait de naissance ne peut pas nier.
➢ Ergonomie: les interfaces doivent être homogènes, claires et faciles à utiliser.
➢ Robustesse et Rapidité: notre application doit être exécutée en temps réel en

minimisant le temps de réponse pour assurer un bon rendement de l’application.
➢ Extensibilité: le code doit être clair pour les futures évolutions ou améliorations
probables.
➢ Compatibilité: l’application doit être compatible avec différentes systèmes

d’exploitations (IOS, Android..).
II.3 Identification des acteurs et des cas d’utilisations
Un acteur est toute entité en dehors du système et qui interagit directement avec lui
(Acteur Principal: la personne qui utilise les fonctions principales de système, Acteur
Secondaire: qui effectue des tâches administratives. Matériel Externe: les dispositifs
matériels, Autres Systèmes)
La mise en marche de notre système nécessite trois acteurs qui sont:
➢ Administrateur: il a pour mission de gérer tout le système, d’ailleurs, il peut

modifier, supprimer, ajouter et consulter les citoyens ainsi que les communes,
les institutions et les motifs .De plus, il a une visibilité totale sur la base de données et
il est chargé de mise à jour de contenu et tout ça après son authentification.
19
_________________________________________________________________________________
➢ Citoyen: c’est l’acteur qui doit tout d’abord créer un profile puis il a le droit de
s’inscrire en remplissant un formulaire, s’identifier par un login et mot de passe et
gérer son profile en ajoutant , modifiant ou supprimant des informations qui le
concerne ou bien concerne l’un de ces enfants et aussi bien il imprime un code qui
donne une autorisation au responsable de l’institution qui demande un extrait de
naissance pour consulter cet extrait puisque pour des raisons de protection des
données personnels il ne peut pas lui même le consulter ou bien l’imprimer.
➢ Responsable de l’institution: il va s’identifier par un login et un mot de passe et il va

consulter l’extrait de naissance du citoyens selon un code donné par ce dernier.
Le tableau 2 présente les différents cas d’utilisation par acteur
Tableau 2 - Cas d’utilisation par Acteur
Acteur Cas d’utilisation
Administrateur Gérer Citoyens
Gérer Communes
Gérer Institutions
Gérer Motifs
Gérer Comptes utilisateurs
Citoyen S’inscrire
Gérer Profil
Responsable institution Consulter extrait de naissance
II.4 Elaboration du backlog produit
Le backlog produit comporte l’ensemble de fonctionnalités de produit élaboré et dont chaque

fonctionnalité est un story associé à des critères d’acceptation avec un ordre de priorité.
Le tableau 3 illustre le backlog de notre produit.
20
_________________________________________________________________________________
Tableau 3 - Backlog produit
ID Fonctionnalités ID Story ou Scénario Priorité
1 Authentification 1.1 En tant qu'administrateur ,citoyen ou Elevée

bien responsable d'institution je dois
s’authentifier
2 Gérer citoyens 2.1 En tant qu’administrateur je peux Elevée

consulter la liste des citoyens
2.2 En tant qu’administrateur je peux Moyenne

ajouter un citoyen

chercher citoyen à partir de son
numéro de carte d’identité national

modifier les données des citoyen

supprimer un citoyen
3 Gérer Communes 3.1 En tant qu’administrateur je peux Elevée

consulter la liste des communes

chercher une commune
3.3 En tant qu’administrateur je peux Faible

ajouter une commune
3.4 En tant qu’administrateur je peux Faible

supprimer une commune
4 Gérer institutions 4.1 En tant qu’administrateur je peux Elevée

consulter la liste des institutions

chercher une institution

ajouter une institution

supprimer une institution
5 Gérer motifs 5.1 En tant qu’administrateur je peux Moyenne

consulter la liste des motifs
21
_________________________________________________________________________________

ajouter un motif d’autorisation.

supprimer un motif.
6 Gérer comptes 6.1 En tant qu’administrateur je peux Moyenne

utilisateurs consulter la liste des utilisateurs

Activer ou désactiver un utilisateur
7 S’inscrire 7.1 En tant que citoyen je dois avoir un Elevée

compte pour que je puisse
s’authentifier
8 Gérer profile 8.1 En tant que citoyen je peux consulter Elevée

mon profile
8.2 En tant que citoyen je peux modifier Elevée

des informations
8.3 En tant que citoyen je peux gérer la Elevée

liste de mes enfants
8.4 Elevée
En tant que citoyen je veux imprimer
le code qui donne autorisation aux
institutions qui demande mon propre
extrait de naissance ou bien l’extrait
de l’un de mes enfants pour consulter
ce dernier.
9 Consulter Extrait de 9.1 Elevée

En tant que Responsable institution je
naissance
veux consulter l’extrait de naissance
d’un citoyen à travers un code donné
par ce dernier
II.5 Conclusion:
Dans ce chapitre, nous avons préparé notre plan de travail. En effet, nous avons
capturé les besoins fonctionnels et non fonctionnels de notre application. Ensuite, nous avons
identifié les acteurs et les cas d’utilisation. Enfin, nous avons montré le backlog de notre
application et le plan de sprint de notre projet.
22
Chapitre III Etude et Réalisation de Sprint 1
_________________________________________________________________________________
Chapitre III. Etude et Réalisation de
Sprint 1
________________________________________________________
III.1 Introduction
Au Cours de ce chapitre nous présenterons la première partie de notre réalisation.
Nous commencerons par l’élaboration du backlog produit sprint 1. Ensuite, nous nous
intéresserons à l’analyse ainsi qu’à la conception des différentes tâches. Enfin nous
afficherons les interfaces de notre réalisation.
III.2 Backlog Produit Sprint 1
Les itérations qui se succèdent dans notre projet sont considérées comme étant des
sprints et qui sont planifiées selon un sprint backlog. Un sprint backlog se compose de
plusieurs tâches. Notre premier sprint a été d’une durée de 4 semaines du 01/03/2019
jusqu’au 28/03/2019.
Le tableau 4 illustre les besoins fonctionnels suivants que nous allons les détailler.
Tableau 4 - Backlog Produit Sprint 1
Tâches
S’authentifier
Gérer citoyens
Sprint 1
Gérer commune
Gérer institutions
Gérer motifs
Gérer comptes utilisateurs
23
_________________________________________________________________________________
III.3 Analyse
Dans cette partie nous présenterons le raffinement des différentes tâches associés à ce
premier sprint
III .3.1 Raffinement du cas d’utilisation <<Authentification>>
Dans cette étape nous allons illustrer le diagramme du cas d’utilisation “authentification” et
qui est présenté dans la figure 18 et il est suivie par une description textuelle.
Figure 18 - Diagramme de cas d’utilisation S’authentifier
❏ Description de cas d’utilisation <<Authentification>>
Le tableau 5 montre une description textuelle associé à s’authentifier.
Tableau 5 - S’authentifier
Nom cas d’utilisation S’authentifier
Acteurs Administrateur, Citoyens, Responsable
Précondition Utilisateur accède à l’application
Postcondition Utilisateur est connecté à son profile
Scénarios Principales 1) le système affiche une interface d’authentification

2) l’utilisateur saisit son login et mot de passe
3) l’utilisateur clique sur le bouton “se connecter”
4) un message du succès de connexion est affiché
Extensions (Scénarios Compte inexistant, le système affiche le message “accès invalide

alternatives) veuillez vérifier votre login et mot de passe”
24
_________________________________________________________________________________
III .3.2 Raffinement du cas d’utilisation <<Gérer citoyens>>
Dans cette étape nous allons illustrer le diagramme du cas d’utilisation “Gérer
citoyens” et qui est présenté dans la figure 19 et il est suivie par des descriptions textuelles.
Figure 19 - Diagramme de cas d’utilisation <<Gérer citoyens>>
❏ Description de cas d’utilisation <<Modifier données>>
Le tableau 6 montre une description textuelle de cas d’utilisation <<Modifier données>>
Tableau 6 - Modifier données
Nom cas d’utilisation Modifier données
Acteurs Administrateur
Précondition Administrateur doit s’authentifier
Postcondition Citoyen Modifié
Scénarios Principales 1) le système affiche la liste des citoyens

2) l’administrateur choisit le citoyen à modifier
3) le système récupère les coordonnées de ce citoyen et l’affiche
4)l’administrateur modifie les coordonnées et valide la modification
5) le système affiche un message de succès de modification
Extensions(Scénarios affichage de message d’erreur si un champ de formulaire n’est pas

alternatives) rempli, ou bien erreur dans les données saisies
25
_________________________________________________________________________________
❏ Description de cas d’utilisation <<Rechercher Citoyen>>
Le tableau 7 montre une description textuelle de cas d’utilisation <<Rechercher citoyen>>
Tableau 7 - Rechercher Citoyen
Nom cas d’utilisation Rechercher Citoyen
Postcondition Affichage de citoyen recherché
Scénarios Principales 1) le système affiche la liste des citoyens

2) l’administrateur saisit le numéro de carte d’identité national de
citoyen recherché et valide en cliquant sur le bouton rechercher.
3) le système récupère les coordonnées de ce citoyen et l’affiche
Extensions(Scénarios affichage de message d’erreur si le numéro CIN saisie est

alternatives) incorrecte.
III .3.3 Raffinement du cas d’utilisation <<Gérer communes>>

commune” et qui est présenté dans la figure 20 et il est suivie par des descriptions textuelles
26
_________________________________________________________________________________
Figure 20 - Diagramme de cas d’utilisation <<Gérer communes>>
❏ Description de cas d’utilisation <<Ajouter Commune>>
Le tableau 8 montre une description textuelle de cas d’utilisation <<Ajouter Commune>>
Tableau 8 - Ajouter Commune
Nom cas d’utilisation Ajouter Commune
Postcondition Commune Ajoutée
Scénarios Principales 1) l’administrateur choisit l’option ajouter Commune

2) l’administrateur remplit le formulaire d’ajout
3) l’administrateur clique sur le bouton “Ajouter”
4) le système ajoute la Commune
5) un message de succès d’ajout est affiché

alternatives) rempli, ou bien erreur dans les données saisies ou bien aussi au cas
ou une Commune existe déjà
27
_________________________________________________________________________________
III .3.4 Raffinement du cas d’utilisation <<Gérer institutions>>
institution” et qui est présenté dans la figure 21 et il est suivie par des descriptions textuelles
Figure 21 - Diagramme de cas d’utilisation <<Gérer institutions>
❏ Description de cas d’utilisation <<Ajouter institution>>
Le tableau 9 montre une description textuelle de cas d’utilisation <<Ajouter institution>>
Tableau 9 - Ajouter institution
Nom cas d’utilisation Ajouter institution
Postcondition institution Ajoutée
Scénarios Principales 1) l’administrateur choisit l’option ajouter institution

4) le système ajoute l’institution

alternatives) rempli, ou bien erreur dans les données saisies ou bien aussi au cas
ou une institution existe déjà
28
_________________________________________________________________________________
❏ Description de cas d’utilisation <<Supprimer institution>>
Le tableau 10 montre une description textuelle de cas d’utilisation <<Supprimer
institution>>
Tableau 10 - Supprimer institution
Nom cas d’utilisation Supprimer institution
Postcondition institution Supprimée avec succès
Scénarios Principales 1) l’administrateur choisit l’option gestion institution
2) l’administrateur choisit l’institution qu’il souhaite Supprimer
3) l’administrateur clique sur le bouton “Supprimer” et valide la

suppression
4) un message de succès de suppression est affiché
III .3.5 Raffinement du cas d’utilisation <<Gérer Motifs>>
motifs” et qui est présenté dans la figure 22 et il est suivie par des descriptions textuelles.
29
_________________________________________________________________________________
Figure 22 - Diagramme de cas d’utilisation <<Gérer motifs>>
❏ Description de cas d’utilisation <<Rechercher motif>>
Le tableau 11 montre une description textuelle de cas d’utilisation <<Rechercher motif>>
Tableau 11 - Rechercher Motif
Nom cas d’utilisation Rechercher Motif
Postcondition Affichage du motif recherché
Scénarios Principales 1)le système affiche la liste des motif

2)l’administrateur saisit l’identifiant du motif recherché et valide en
cliquant sur le bouton rechercher.
3)le système récupère la description du motif et l’affiche
Extensions(Scénarios affichage de message d’erreur si l’identifiant saisie est incorrecte.

alternatives)
30
_________________________________________________________________________________
III .3.6 Raffinement du cas d’utilisation <<Gérer Comptes utilisateurs>>
Dans cette étape nous allons illustrer le diagramme du cas d’utilisation “Gérer comptes” et
qui est présenté dans la figure 23 et il est suivie par des descriptions textuelles.
Figure 23 - Diagramme de cas d’utilisation <<Gérer comptes >>
❏ Description de cas d’utilisation <<Activer utilisateur>>
Le tableau 12 montre une description textuelle de cas d’utilisation <<Activer utilisateur>>
Tableau 12 - Activer utilisateur
Nom cas d’utilisation Activer utilisateur
Postcondition utilisateur activé avec succès
Scénarios Principales 1)l’administrateur choisit l’option gestion utilisateurs
2)l’administrateur choisit l’utilisateur qu’il souhaite activer
3)l’administrateur clique sur le bouton “activer”
4)un message de succès d’activation est affiché
31
_________________________________________________________________________________
❏ Description de cas d’utilisation <<désactiver utilisateur>>
Le tableau 13 montre une description textuelle de cas d’utilisation <<désactiver
utilisateur>>
Tableau 13 - Désactiver utilisateur
Nom cas d’utilisation désactiver utilisateur
Postcondition utilisateur désactivé avec succès
Scénarios Principales 1) l’administrateur choisit l’option gestion utilisateurs
2) l’administrateur choisit l’utilisateur qu’il souhaite désactiver
3) l’administrateur clique sur le bouton “désactiver” et valide la

désactivation
4) un message de succès de désactivation est affiché
III.4 Conception
Dans cette section nous allons élaborer la conception de notre premier sprint. Nous allons
adopter la langage de modélisation UML (Unified Modeling Language) puisque c’est un
support de communication performant qui facilite la représentation et la compréhension de
solution.
Nous choisissons dans cette partie 2 diagrammes UML:
❖ Diagramme de classe pour présenter les classes et les interfaces relatives à ce sprint
ainsi que les différentes relations entre celles-ci.
❖ Diagramme de séquence pour montrer les interactions d’objets.
32
_________________________________________________________________________________
III.4.1 Diagramme de classe
Ce type de diagramme présente la composition interne du système. Il fournit une

représentation non détaillée des objets du système. Ces derniers interagissent ensemble pour
réaliser les cas d’utilisation. Les principaux éléments de la vue statique sont les classes, qui
décrivent les responsabilités, le comportement et le type d'un ensemble d'objets. Les éléments
de cet ensemble sont les instances de la classe.
Ces objets sont liés par des associations ou bien agrégations ou même par un
mécanisme d’héritage.
La figure 24 illustre le diagramme de classe associé au premier sprint
Figure 24 - Diagramme de classe associé au premier sprint
33
_________________________________________________________________________________
III .4.2 Diagramme de Séquence <<Authentification>>
Ce diagramme représente le processus exacte d'exécution du cas d’utilisation

<<Authentification>> et définir les règles pour l’exécuter par la modélisation de l’ensemble
des interactions.
Le diagramme de séquence associé au cas d’utilisation <<Authentification>> est présenté dans

la figure 25.
Figure 25 - Diagramme de séquence de cas d’utilisation <<S’authentifier>>
III .4.3 Diagramme de séquence <<Rechercher Citoyen>>

Dans cette partie nous montrerons le diagramme de séquence associé à rechercher
un citoyen. En effet, après l’authentification de l’administrateur, il a possibilité de gérer les
citoyens. En effet, il a la possibilité de consulter la liste des citoyens et par la suite rechercher
un citoyen selon son numéro de carte d’identité national.
34
_________________________________________________________________________________
La figure 26 illustre le diagramme de séquence <<Rechercher citoyen>>
Figure 26 - Diagramme de séquence associé à rechercher citoyen
III .4.4 Diagramme de séquence <<Supprimer institution>>
Dans cette partie nous montrerons le diagramme de séquence associé à supprimer

une institution. En effet, après l’authentification de l’administrateur , il a possibilité de
supprimer une institution suite à une décision prise par l'état ou bien par l’une des ministère
si cette institution n’aura pas besoin des extraits des naissances des citoyens à l’avenir.
La figure 27 illustre le diagramme de séquence <<Supprimer institution>>
35
_________________________________________________________________________________
Figure 27 - Diagramme de séquence associé à supprimer institution
III .4.5 Diagramme de séquence <<Ajouter commune>>
Dans cette partie nous montrerons le diagramme de séquence d’ajouter une commune.
En effet, après l’authentification de l’administrateur, l’administrateur a possibilité d’ajouter
une commune suite à une décision prise par l’Etat.
La figure 28 illustre les différentes phases de cette action.
36
_________________________________________________________________________________
Figure 28 - Diagramme de séquence ajouter commune
III .4.6 Diagramme de séquence <<Désactiver utilisateur>>
Dans cette partie nous montrerons le diagramme de séquence de désactiver un

utilisateur. En effet, après l’authentification de l’administrateur, une liste des utilisateurs sera
affiché, l’administrateur a possibilité de désactiver un utilisateur si son compte est piraté ou
bien par demande de l’utilisateur.
La figure 29 illustre les différentes phases de cette action.
37
_________________________________________________________________________________
Figure 29 - Diagramme de séquence associé à désactiver utilisateur
III .5 Réalisation
Dans cette partie, nous allons présenter quelques interfaces décrivant les principales
fonctionnalités de premier sprint et qui relatif au backoffice. Il comporte le compte
administrateur ainsi que les différentes tâches associé à ce dernier.
III .5 .1 Interface d’authentification
L’ interface présentée à la figure 30 est en mode Galaxy S5 puisque notre application est à la
fois web et téléchargeable sur n’importe quel smartphone. D’après cette interface
l’administrateur va accéder à son profil afin de réaliser les différentes tâches.
38
_________________________________________________________________________________
Figure 30 - Interface Authentification en mode Galaxy S5
III .5 .2 Interface Administrateur

Après authentification l’administrateur va choisir la tâche à réaliser selon cette interface.
Selon cette interface l’administrateur va choisir entre la gestion des citoyens, gestion des
communes, gestion des institutions, gestion des motifs ainsi que la gestion des comptes
utilisateurs.
La figure 31 illustre cette interface en mode web
39
_________________________________________________________________________________
Figure 31 - Interface administrateur
III .5 .2 Interface Gérer citoyens
La figure 32 montre la liste des citoyens en mode Ipad Pro. Selon cette interface
l’administrateur a possibilité de consulter la liste des citoyens, chercher un citoyen
selon son numéro de carte d’identité national, modifier ses données ou bien le
supprime. L’administrateur a possibilité d’ajouter un nouveau citoyen en cliquant sur
le bouton au dessous de liste et saisit par la suite les données nécessaires.
40
_________________________________________________________________________________
Figure 32 - Interface Gérer Citoyens
III .5 .3 Interface Gérer Communes
La figure 33 montre la liste des communes en mode Ipad. Selon cette interface
l’administrateur a possibilité de consulter la liste des communes, chercher une
commune selon son nom et le supprime en cas de besoin. L’administrateur a
possibilité d’ajouter une nouvelle commune en cliquant sur le bouton au dessous de
liste et saisit par la suite le nom et le gouvernorat de cette commune.
41
_________________________________________________________________________________
Figure 33 - Interface Gérer Communes
III .5 .4 Interface Gérer institutions

La figure 34 montre la liste des institutions en mode Ipad. Selon cette interface
l’administrateur a possibilité de consulter la liste des institutions, chercher une
institution selon son nom et le supprime en cas de besoin. L’administrateur a
possibilité d’ajouter une nouvelle institution qui demande va demander à l’avenir un
extrait de naissance en cliquant sur la bouton au dessous de liste et saisit par la suite
le nom du nouvelle institution.
42
_________________________________________________________________________________
Figure 34 - Interface Gérer institutions
III .5 .5 Interface Gérer motifs

La figure 35 montre la liste des motifs en mode Ipad. Selon cette interface
l’administrateur a possibilité de consulter la liste des motifs, chercher un motif selon
son identifiant et le supprime en cas de besoin. L’administrateur a possibilité
d’ajouter un nouveau motif en cliquant sur le bouton au dessous de liste et saisit par
la suite la description du nouveau motif.
43
_________________________________________________________________________________
Figure 35 - Interface Gérer motifs
III .5 .2 Interface Gérer comptes utilisateurs

La figure 36 montre la liste des utilisateurs en mode web. Selon cette interface
l’administrateur a possibilité de consulter la liste des utilisateurs, rechercher un
utilisateur selon son numéro CIN et il peut le désactiver ainsi que l’activer.
44
_________________________________________________________________________________
Figure 36 - Interface Gérer comptes utilisateurs
III .6 Conclusion
Dans ce chapitre nous avons détaillé la réalisation de notre premier sprint qui
a comme objectif de finaliser les tâches de l’administrateur et nous avons montré les
interfaces relatives au back office de notre application. Nous allons traiter dans le
chapitre suivant notre deuxième sprint relatif à la partie front office.
45
Chapitre IV Etude et Réalisation de Sprint 2
_________________________________________________________________________________
Chapitre IV. Etude et Réalisation de
Sprint 2
________________________________________________________
IV.1 Introduction
Au Cours de ce chapitre nous présenterons la deuxième partie de notre réalisation.
Nous commencerons par l’élaboration du backlog produit sprint 2. Ensuite, nous
intéresserons l’analyse ainsi que la conception des différentes tâches. Enfin nous afficherons
les interfaces de notre réalisation.
IV.2 Backlog Produit Sprint 2
Le Sprint 2 est d’une durée de 4 semaines du 01/04/2019 jusqu’au 28/04/2019
Dans ce deuxième sprint nous allons détailler les besoins fonctionnels suivants:
Tableau 14 - Backlog Produit Sprint 2
Tâches
Sprint 2 S’inscrire
Gérer profil
Consulter extrait de naissance
IV.3 Analyse
Dans cette partie nous présenterons le raffinement des différents cas d’utilisations
IV.3.1 Raffinement du cas d’utilisation <<S’inscrire>>

Dans cette étape nous allons illustrer le diagramme du cas d’utilisation “S’inscrire” et qui
est présenté dans la figure 37 et il est suivie par des descriptions textuelles sur cette cas
d’utilisation.
46
_________________________________________________________________________________
Figure 37 - Diagramme de cas d’utilisation S’inscrire
❏ Description de cas d’utilisation <<S’inscrire>>
Le tableau 15 montre la description textuelle associé à ce cas d’utilisation
Tableau 15 - S’inscrire
Nom cas d’utilisation S’inscrire
Acteurs Citoyens
Précondition le citoyen accède à l’application
Postcondition Citoyen inscrit
Scénarios Principales 1) le système affiche le formulaire d’inscription
2) le citoyen saisit ses données personnelles dans l’interface

d’inscription
3) l’utilisateur clique sur le bouton “suivant”
4) le système vérifie que les données personnelles sont correctes

selon la table citoyens existant (déjà prêt)
4) le citoyen saisit les données de son compte et clique sur valider
4) Le système valide les paramètres d’entrée
Extensions (Scénarios Affiche un message d’erreur si les données saisies sont

alternatives) incorrectes.
47
_________________________________________________________________________________
IV.3.2 Raffinement du cas d’utilisation <<Gérer Profil >>
la figure 38 illustre le diagramme de cas d’utilisation <<Gérer profil>>
Figure 38 - Diagramme cas d’utilisation Gérer profil
❏ Description de cas d’utilisation <<Ajouter Enfant>>
Le tableau 16 montre une description textuelle de cas d’utilisation <<Ajouter Enfant>>
Tableau 16 - Ajouter Enfant
Nom cas d’utilisation Ajouter enfant
Acteurs Citoyen
Précondition le citoyen doit s’authentifier
Postcondition information Ajoutée
48
_________________________________________________________________________________
Scénarios Principales 1) l’administrateur choisit l’option ajouter enfant

4) le système ajoute l’information
Extensions (Scénarios affichage de message d’erreur si un champ de formulaire n’est pas

alternatives) rempli, ou bien erreur dans les données saisies.
❏ Description de cas d’utilisation <<Modifier information >>
Le tableau 13 montre une description textuelle de ce cas d’utilisation
Tableau 17 - Modifier information
Nom cas d’utilisation Modifier information
Acteurs citoyen
Postcondition information Modifiée
Scénarios Principales 1) le citoyen clique sur le bouton modifier

3) le citoyen entre la nouvelle valeur soit de son email son
téléphone ou bien mot de passe (il ne peut changer que ses valeurs)
4) le citoyen valide la modification
5) le système fait les mises à jour et affiche un message de succès de
modification
Extensions (Scénarios affichage de message d’erreur si le champ à modifier n’est pas

alternatives) rempli, ou bien erreur dans les données saisies.
49
_________________________________________________________________________________
❏ Description de cas d’utilisation <<valider et imprimer le code d’autorisation>>
Le tableau 18 montre une description textuelle de cas d’utilisation <<valider et imprimer

le code d’autorisation>>
Tableau 18 - Imprimer le code d’autorisation d’accès à mon extrait de

naissance
Nom cas d’utilisation valider et imprimer le code d’autorisation
Acteurs Citoyen
Postcondition impression bien réalisée
Scénarios Principales 1) le citoyen clique sur gérer autorisation

2) le citoyen coche le checkbox “je donne autorisation d'accès à
mon extrait personnel ou à un extrait de l’un de mes enfants “
3) le citoyen choisir l’institution qui lui donne autorisation de
consulter son extrait ainsi que le motif d’autorisation
4) le citoyen confirme l’autorisation qu’il donne en cliquant sur
valider et imprimer code
5) le citoyen choisit soit l’envoi de code par mail ou bien par
téléphone ou bien l’imprimer
6) le système affiche un message de succès de l’opération
Extensions (Scénarios affichage de message d’erreur si le checkbox n’est pas coché ou

alternatives) bien institution ou motif n’est pas sélectionnée
50
_________________________________________________________________________________
❏ Description de cas d’utilisation “consulter historique”
Le tableau 19 montre une description textuelle de cas d’utilisation <<consulter historique>>
Tableau 19 - Consulter Historique
Nom cas d’utilisation consulter historique
Acteurs citoyen
Postcondition consultation terminée
Scénarios Principales 1) l’administrateur choisit l’option consulter historique
2) le système affiche l’historique des autorisations que le citoyen a

fait ainsi que les institutions qui ont déjà consulté son extrait.
IV.3.3 Raffinement du cas d’utilisation <<Consulter extrait naissance >>
La figure 39 illustre le diagramme de cas d’utilisation <<consulter extrait de naissance>>
Figure 39 - Diagramme de cas d’utilisation associé à consulter extrait
❏ Description de cas d’utilisation <<consulter extrait de naissance>>
Le tableau 20 montre une description textuelle de cas d’utilisation <<consulter extrait de

naissance>>
51
_________________________________________________________________________________
Tableau 20 - Consulter extrait de naissance
Nom cas d’utilisation consulter extrait de naissance
Acteurs Responsable
Précondition le Responsable doit s’authentifier
Postcondition consultation terminée
Scénarios Principales 1) le responsable saisit le code donné par le citoyen
2) le système affiche l’extrait de ce citoyen
3) le responsable consulte l’extrait de naissance
Extensions (Scénarios affichage de message d’erreur s’il existe une erreur dans le code
alternatives) donnée par le citoyen.
IV.4 Conception
Dans cette partie nous allons montrer le diagramme de classe associé au deuxième
sprint ainsi que les diagrammes de séquences relatifs aux différentes tâches.
IV.4.1 Diagramme de classe associé au deuxième sprint

Pour notre deuxième sprint, le diagramme de classe représente un moyen très utile
pour modéliser les différents cas d’utilisation
La figure 40 illustre le diagramme de classe de deuxième sprint
52
_________________________________________________________________________________
Figure 40 - Diagramme de classe associé au deuxième sprint
IV.4.2 Diagramme de Séquence <<S’inscrire>>
Dans cette partie nous montrerons le diagramme de séquence associé à s’inscrire.

En effet, un citoyen doit créer un compte pour qu’il puisse s’authentifier et pour le créer il
doit d’abord remplir deux formulaires contenant les données nécessaires.
La figure 41 illustre le diagramme de séquence <<S’inscrire>>
53
_________________________________________________________________________________
Figure 41 - Diagramme de séquence associé à s’inscrire
IV.4.3 Diagramme de Séquence <<imprimer le code d’autorisation >>
Dans cette partie nous montrerons le diagramme de séquence associé à imprimer

code. . En effet, un citoyen doit imprimer un code qui donne autorisation à l’institution
choisie de consulter soit son extrait de naissance soit l’extrait de l’un des ses enfants.
La figure 42 illustre le diagramme de séquence <<imprimer code>>
54
_________________________________________________________________________________
Figure 42 - Diagramme de séquence associé imprimer code
IV.4.4 Diagramme de Séquence <<Modifier information >>
Dans cette partie nous montrerons le diagramme de séquence associé à modifier

information. . En effet, un citoyen a possibilité de modifier des informations qui le concerne
après consultation de son profile.
La figure 43 illustre le diagramme de séquence <<modifier information>>
55
_________________________________________________________________________________
Figure 43 - Diagramme de séquence associé à modifier information
IV.4.5 Diagramme de Séquence <<Consulter Extrait de naissance >>

Dans cette partie nous montrerons le diagramme de séquence associé à consulter
extrait naissance. En effet, un responsable d’institution a possibilité de consulter l’extrait de
naissance d’un citoyen en accédant à la base de donnée au niveau du système de la
municipalité selon un code donnée par ce dernier.
La figure 44 illustre le diagramme de séquence <<consulter extrait de naissance>>
56
_________________________________________________________________________________
Figure 44 - Diagramme de séquence associé à consulter extrait de naissance
IV.5 Réalisation
Dans cette partie, nous allons présenter quelques interfaces décrivant les principales
fonctionnalités de notre deuxième sprint.
IV.5.1 Interface d’inscription
Le citoyen doit tout d’abord saisir ses données personnelles selon la figure 45 puis le système
va vérifier si les données sont correctes à partir de table des citoyens tunisiens existant déjà
au sein de CNI.
57
_________________________________________________________________________________
Figure 45 - Interface Inscription.
Une fois les données saisies, selon l’interface au dessus, sont totalement correcte le citoyen
va remplir un formulaire d’inscription qui va lui permettre d’avoir un compte pour accéder
à son profil comme il est indiqué dans la figure 46
58
_________________________________________________________________________________
Figure 46 - Interface créer un compte utilisateur
IV.5.2 Interface Gérer profil

Après authentification le citoyen a la possibilité de consulter son profil et de changer son mot
de passe ou bien son email ou son téléphone. De plus, le citoyen peut gérer la liste de ses
enfants ainsi que gérer les autorisations et consulter l’historique de ses autorisations.
59
_________________________________________________________________________________
❖ Interface consulter profil
Figure 47 - Interface consulter profil
❖ Interface gérer enfants

Selon cette interface un citoyen a la possibilité de consulter la liste de ses
enfants ainsi que supprimer un enfant de la liste. De plus, le citoyen peut
ajouter un enfant à la liste à condition que les informations saisies soient
totalement correcte si non une erreur peut engendrer des poursuites
judiciaires.
60
_________________________________________________________________________________
Figure 48 - Interface gérer enfants
❖ Interface gérer autorisations

Selon la figure 49 un citoyen va choisir l’institution qu’il va donner
autorisation. Ensuite il va indiquer si cette autorisation est personnelle ou bien
pour l’un de ses enfants. Dans le cas où l’autorisation concerne l’un des
enfants, le citoyen va choisir le prénom de cet enfant. Enfin, le citoyen indique
le motif d’autorisation et valide par l’impression de code.
61
_________________________________________________________________________________
Figure 49 - Interface gérer autorisation
IV.5.3 Interface consulter extrait de naissance

Après authentification le responsable d’institution qui demande un acte de naissance
va saisir le code d’autorisation donné par le citoyen selon la figure 50. Une fois la
vérification de code est faite par le système l’extrait de naissance de citoyen sera affiché pour
le responsable comme il est indiqué dans la figure 51.
62
_________________________________________________________________________________
Figure 50 - Interface de saisie du code en mode Iphone X
Une fois le système vérifie le code saisi par le citoyen selon l’interface au dessus, l’extrait de
naissance relatif à ce code sera affiché pour le responsable comme il est indiqué dans la
figure au dessous.
63
_________________________________________________________________________________
Figure 51 - Interface de consultation d’extrait de naissance
IV.6 Conclusion
Dans ce chapitre nous avons détaillé la réalisation du notre deuxième sprint. Il a

comme objectif de finaliser les tâches de citoyen d’une part et de responsable d’autre
part. En fin, nous avons montré les interfaces relatives au front office de notre
application.
64
Conclusion générale
Tout au long de ce rapport, nous avons présenté les différentes étapes de réalisation d’une
application web/mobile d’un registre en ligne. Cette application permet aux citoyens de
donner autorisation aux institutions, qui demandent un acte de naissance, pour consulter cet
extrait à travers un code donné. Cette autorisation peut être personnelle ou bien relative à
l’un de ses enfants. Notons aussi que cette autorisation n’est effectué qu'après avoir un code
qui sera envoyé par SMS ou bien par email ou encore imprimé par le citoyen selon son choix.
De plus, cette application sera aussi utilisée par les responsables d’institutions qui vont tout
d’abord, s’authentifier selon un login et un mot de passe donnés par le CNI. Puis, dès que le
responsable institution est identifié il va consulter l’extrait de naissance du citoyen selon un
code donné par ce dernier.
Cette application sera à la fois disponible sur un site web. En effet, nous avons choisi de
développer une application à la fois web et mobile téléchargeable gratuitement des différents
stories. Cette application tourne sur différents systèmes d’exploitation ce qui explique le
grand avantage de l’outil de développement Ionic.
Au cours développement, nous avons adapté la méthodologie SCRUM qui nous a permis de
décomposer notre plan de travail selon des sprints. Cette décomposition a facilité la
réalisation de travail selon le backlog sprint.
Au sein de CNI, nous avons essayé à respecter les différents principes de SCRUM. D’ailleurs,
notre travail a été basé essentiellement sur la communication. Nous avons organisé souvent
des daily meeting au cours desquels nous nous discutons sur différents tâches ainsi que
actualiser le plan de sprint. Ces réunions nous ont aidé à éliminer beaucoup d’obstacles
ainsi que communiquer et évaluer l’avancement de projet.
Ce projet, nous a donné l’opportunité de s’initier dans la vie professionnelle et avoir un

début d’expérience significatif. Nous avons appris à compter sur soi pour résoudre les
problèmes ainsi que être bien organisé pour accomplir notre travail en respectant les
deadline. De plus, ce stage nous a procuré la chance d’acquérir des connaissances sur les
nouvelles technologies et les outils nécessaires pour la prise de décision pour le choix des
techniques de développement.
65
Sur le plan humain, ce stage nous a offert la possibilité d’améliorer nos capacités
d’intégration, de communication et de développer nos aptitudes pour le travail en groupe.
Au cours de réalisation de notre projet, nous avons été astreints par quelques limites
notamment, les contraintes de temps qui nous ont empêchés d’ajouter certaines
fonctionnalités. Cependant, il était une occasion d’apprendre des nouveaux outils de
développement particulièrement Angular pour le développement web et Ionic pour le
développement mobile.
Le projet peut être amélioré en ajoutant quelques modules ou interfaces pour mieux l'adapter
aux besoins des utilisateurs d’ailleurs nous pouvons ajouter une interface destiné pour les
tunisiens à l’etranger. Il été un honneur pour moi que j’ai été parmi l’équipe réalisatrice de
ce projet qui sera à l’avenir utilisé par tous les citoyens espérant bien qu’il arrivera à
satisfaire leurs besoins.
66
NETOGRAPHIE
[1], présentation de l’organisme d’accueil, http://www.cni.tn/index.php/fr/layout-

3/presentation-du-cni-2, consulté le 20/02/2019
[2], Description de la méthodologie SCRUM, https://fr.wikipedia.org/wiki/Scrum, consulté le

21/02/2019
[3], Tableau comparatif entre les méthodes, https://www.supinfo.com/articles/single/3093-

comparatif-methodes-agiles, consulté le 21/02/2019
[4], Description de l’architecture MVC, http://prof.bpesquet.fr/cours/modele-mvc/ consulté le

01/03/2019
[5], Description de l’architecture API REST,

https://openclassrooms.com/fr/courses/3449001-utilisez-des-api-rest-dans-vos-projets-web,
consulté le 03/03/2019
[6], Description Ionic, https://openclassrooms.com/fr/courses/5098931-developpez-une-

application-mobile-multiplateforme-avec-ionic-3/5103726-decouvrez-ionic, consulté
le05/03/2019
[7], Description Angular, https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-

Angular-7-by-Example, consulté le 07/03/2019
[8], Description Cordova, https://fr.wikipedia.org/wiki/Apache_Cordova, consulté le

28/03/2019
[9], Description HTML, https://fr.wikipedia.org/wiki/Hypertext_Markup_Language, consulté

le 29/03/2019
[10], Description CSS , https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade, consulté

le 29/03/2019
[11], Description TS, https://fr.wikipedia.org/wiki/TypeScript , consulté le30/03/2019
[12], Description Bootstrap, https://fr.wikipedia.org/wiki/Bootstrap_(framework), consulté le

30/03/2019
[13], Description Postgresql, https://fr.wikipedia.org/wiki/PostgreSQL, consulté le

02/04/2019
67
[14], Description VSC, https://fr.wikipedia.org/wiki/Visual_Studio_Code, consulté le
02/04/2019
[15], Description Postman,

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop,
consulté le 03/04/2019
[16], Description Node JS, https://fr.wikipedia.org/wiki/Node.js, consulté le 03/04/2019
[17], Description Star UMl, https://fr.wikipedia.org/wiki/StarUML, consulté le 03/04/2019
68
Annexes
Annexe 1
Journal du stage
Semaine du 25 février 2019
Date Description des tâches
Lundi, 25 février 2019 Étude des techniques de travail
Mardi, 26 février 2019 Étude des techniques de travail
Mercredi, 27 février 2019 Étude des techniques de travail
Jeudi, 28 février 2019

Étude des techniques de travail et critique de l’existant
Vendredi, 1 mars 2019 Analyse et spécification des besoins
69
Semaine du 4 mars 2019
Lundi, 4 mars 2019 Analyse et spécification des besoins
Mardi, 5 mars 2019 Analyse et spécification des besoins
Mercredi, 6 mars 2019 Conception
Jeudi, 7 mars 2019 Conception
Vendredi, 8 mars 2019 Conception
70
Lundi, 11 mars 2019 Développement du premier sprint
Mardi, 12 mars 2019 Développement du premier sprint
Mercredi, 13 mars 2019 Développement du premier sprint
Jeudi, 14 mars 2019 Développement du premier sprint
Vendredi, 15 mars 2019 Développement du premier sprint
71
Lundi, 18 mars 2019 Développement du premier sprint
Mardi, 19 mars 2019 Développement du premier sprint
Mercredi, 20 mars 2019 Développement du premier sprint
Jeudi, 21 mars 2019 Développement du premier sprint
Vendredi, 22 mars 2019 Développement du premier sprint
72
Lundi, 25 mars 2019 Développement du premier sprint et rédaction rapport
Mardi, 26 mars 2019 Développement du premier sprint et rédaction rapport
Mercredi, 27 mars 2019 Développement du premier sprint et rédaction rapport
Jeudi, 28 mars 2019 Développement du deuxième sprint et rédaction rapport
Vendredi, 29 mars 2019 Développement du deuxième sprint et rédaction rapport
73
Conception et Réalisation d’une application web/mobile d’un Registre en ligne
Rapport de Stage FSEG, Nabeul 2019
_________________________________________________________________
RÉSUMÉ
De nos jours, la majorité des institutions des Etats cherchent à faciliter les services des
citoyens d’une part et de minimiser le taux d’encombrement au niveau des institutions
d’autres part. Dans ce contexte nous avons réalisé dans le centre national d’informatique une
application web/mobile qui permet aux citoyens essentiellement de donner autorisation aux
institutions qui demandent un acte de naissance pour consulter cet extrait à travers un code
donné par le citoyen au lieu de se déplacer aux municipalités et attendre parfois des heures
pour avoir un extrait de naissance. De plus, un citoyen a la possibilité d’ajouter ses enfants
dans son profil à condition que les informations ajoutées soient totalement correctes si non
une information saisie incorrectement va engendrer des poursuites judiciaires
Mots clés : Acte de naissance, Citoyen, Commune, Motif, Autorisation, Profil
_________________________________________________________________
SUMMARY
In our days, everybody needs to have his birth certificate. However, he is obliged to move to
the municipality and stand in line. Sometimes, we need to wait for hours. This Traditional way
can be waste of time, that’s why we thought about creating a web mobile application that will
facilitate the service of citizens. Our application allows us to give permission to the institution
that needs our birth certificate to consult it through a code. Morever, we can add our children
in our profile but the information should be correct. This application will help not only
citizens but also the institution to reduce congestion at the counter.
Key words : Birth certificate, Citizen, Municipality, Pattern, Profile

Arafet-Zouari Rapport-Pfe

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Arafet-Zouari Rapport-Pfe

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Présenté en vue d'obtenir le diplôme de la LICENCE FONDAMENTALE

SPECIALITE : Informatique Appliquée à la Gestion

Conception et Réalisation d’une application web/mobile

Centre National d’Informatique

Encadrante universitaire Encadrante professionnel

Je dédie ce projet aux êtres les plus chers à mon cœur:

Mes chers parents

Aucun mot ne pourrait vous exprimer l’amour que je vous porte.

Je mets entre vos mains le fruit de longues années d’études,

de longs mois d’amour, de tendresse, de sacrifices et d’encouragement

qui m’ont donnés la force pour persévérer dans la vie.

Mes chers frères Wael , Jamil et ma chère soeur Zaineb

Ma chère grand-mère Habiba

procure la bonne santé et une longue vie.

Chaque ligne de ce rapport chaque mot et chaque lettre exprime

le respect et le merci à toute ma famille et à tous ceux que j’aime.

Je tiens tout d’abord à remercier mon encadrante universitaire Madame

Je représente aussi mes sincères gratitudes aux collaborateurs de CNI de

Je souhaiterais aussi remercier tous les enseignants de la Faculté des Sciences

Finalement, je remercie les membres du Jury d’avoir accepté d'évaluer ce

Figure 1 - Logo CNI………………………………………………………………………………….….3

Tableau 1 - Comparaison de modèle classique vs méthodes agiles…………………..……8

Dans ce cadre, le Centre national d’informatique souhaite automatiser le processus

En ce qui concerne le troisième chapitre, il sera réservé au premier sprint destiné à

Une conclusion générale clôtura notre rapport.

Chapitre I. Etude préalable

I.2 Cadre de stage

I.2.1 Présentation de l’organisme d’accueil

Le CNI est un organisme placé sous la tutelle du Ministre des Technologies de la

Figure 1 – Logo de CNI

I.2.2 Missions de CNI

I.2.3 Organigramme de CNI

Figure 2-Organigramme de CNI

I.3 Présentation du projet

I.3.1 Étude de l’existant

De nos jours, plusieurs institutions demandent des citoyens un extrait de naissance

Actuellement, des nouvelles technologies d’information et de communication se sont

I.3.2 Critique de l’existant

➢ Retard: parfois des problèmes de réseau ou bien d’encombrement peuvent vous

➢ Surcharge: la demande d’un extrait de naissance par plusieurs institutions peut

I.3.3 Solution proposée

I.4 Méthodologie de développement

I.4.1 Méthodes classiques vs Méthodes agiles

Tableau 1 - Comparaison de modèle classique et des méthodes agiles

Critère Modèle classique Méthodes agiles

Cycle de vie en cascade ou en v Itératif et incrémental

Documentation une documentation complète juste le code sera commenté

Rôle de client Négociation du contrat et il le client exprime ses attentes et ses

Planification des plans plus ou moins planifier le projet de manière

Délais il y a des délais à respecter pas des délais à respecter

Mesure de succès Respects des engagements Satisfaction du client après la

I.4.2 Choix de la méthodologie de développement

I.4.2.3 Les piliers de la méthode SCRUM

Chaque membre de l’équipe joue un rôle bien déterminé. La méthode repose

Figure 3 - Cycle de vie SCRUM [2]

I.5 Technologies de développement

Pour aboutir et réussir le développement et la mise en place de notre application au

I.5.1 Architectures mises en place

I.5.1.1 Architecture MVC (Model-View-Controller):

Figure 4 - Description de l’architecture MVC [4]

Figure 5 - Description de l’architecture REST API [5]

I.5.2 Outils de développement: