PROJET DE FIN

D’ETUDE
Pour l’obtention du diplôme

D’INGENIEUR D’ETAT EN TELECOMMUNICATIONS

ET TECHNOLOGIES DE L’INFORMATION
2019 - 2020

Digitalisation Du Parcours Des Clients D’Al Amana Microfinance

- L’Application Mobile SELFCARE -

Réalisé par : Membre du Jury :

M. BADDOU Ayoub M. ALLAKI Driss : Encadrant
M. FARAH Redouane M. BARAKAT Hicham : Examinateur
M. KHALLAAYOUNE Jamal : Examinateur
M. ELKORICHI Mustafa : Encadrant externe
 Dédicace

Au nom de Dieu Clément et Miséricordieux, nous dédions cet humble travail

A nos chères Mères

Affables, honorables, aimables : Vous représentez pour nous le symbole de la bonté par
excellence, la source de tendresse et l'exemple du dévouement qui n'ont pas cessé de nous
encourager et de prier pour nous. Votre prière et votre bénédiction nous ont été d'un grand
secours pour mener à bien nos études. Aucune dédicace ne saurait être assez éloquente pour
exprimer ce que vous méritez pour tous les sacrifices que vous n'avez cessé de nous donner
depuis notre naissance, durant notre enfance et même à l'âge adulte. Que Dieu vous garde
et vous préserve pour nous.

A nos chers Pères

Aucune dédicace ne saurait exprimer l'estime, le dévouement et le respect que nous avons
toujours eu pour vous. Rien au monde ne vaut les efforts fournis jour et nuit pour notre
éducation et notre bien-être. Ce travail est le fruit de vos sacrifices que vous avez consentis
pour notre éducation et notre formation. Merci pour les valeurs nobles, l'éducation et le
soutien permanent venu de vous. Puisse Dieu, le tout puissant, vous préserver et vous
accorder la santé, une longue vie et le bonheur.

A nos adorables frères et Sœurs.

A nos professeurs et nos encadrants.
A nos chers ami(e)s.
A notre petite et grande famille.
A toute personne nous ayant aidé de loin ou de près...

ii
 Remerciement

Le présent rapport représente le fruit des efforts conjugués de plusieurs personnes. Il nous est
donc agréable d'exprimer notre reconnaissance auprès de toutes les personnes dont l'intervention au
cours de ce projet a favorisé son aboutissement.

En tout premier lieu, nous remercions le bon Dieu, tout puissant, de nous avoir donné la force pour
survivre, ainsi que l'audace pour dépasser toutes les difficultés surtout en ce qui s’est passé pendant
cette période de la pandémie du COVID-19.

Mes remerciements s'adressent aussi à Monsieur Mustafa ELKORICHI, notre encadrant au sein
de l’association Al Aman et Monsieur Driss ALLAKI notre encadrant au sein de l'INPT pour le temps
qui ont consacré afin de répondre à nos questions et nous guider à la conduite de cette période de
stage. Ainsi nous remercions Monsieur BARAKAT Hicham et Monsieur KHALLAAYOUNE Jamal
étant membres de Jury pour leur présence, leur lecture attentive de notre mémoire de stage ainsi que
pour leurs remarques.

Nous remercions également toute l'équipe pédagogique de l'Institut National des Postes et
Télécommunications (INPT) et les intervenants professionnels responsables de notre formation
durant notre cursus au sein de l’Ecole.

Nous adressons aussi nos sincères remerciements à Zaynab BOUROUAIN, notre collègue de
l’Ecole Nationale Supérieure des Mines de Rabat (ENSMR) et membre du projet sur lequel nous
avons travaillé, et à toute personne au sein de l’association Al Amana qui nous ont aidé durant notre
stage.

Un grand merci à nos mères, nos pères, nos frères et sœurs, nos amis et à toute la famille pour
leurs conseils ainsi que leur soutien inconditionnel, à la fois moral et économique, qui nous ont permis
d'être la personne que nous sommes aujourd’hui.

À tous ces intervenants, nous présentons nos remerciements, notre respect et notre gratitude.

iii
 Résumé

L’essor digital est aujourd’hui largement porté par le mobile. Donc faire une application mobile
dédiée à une entreprise est une évolution qui est devenue nécessaire afin d’augmenter la notoriété de
sa marque, ses produits ou ses services et d’offrir aussi une nouvelle expérience à ses utilisateurs.
Ce document contient les résultats d'un travail acharné qui a duré six mois dans le cadre d'un projet
de fin d'études réalisé au sein de l’association Al Amana Microfinance pour l'obtention du diplôme
d'ingénieur d’état de l'Institut National des Postes et Télécommunications (INPT).

L’objectif de ce projet et de faire l’étude et la réalisation d’une application mobile de microfinance

pour les clients de l’association Al Amana Microfinance. En effet, Selfcare est l’application mobile,
qui sera la première en ce domaine de la microfinance au Maroc, a pour but de faire une digitalisation
aux quelques opérations effectuées dans les agences d’Al Amana tout en facilitant à ses clients la
demande et le suivi des services offert par la société.

Nous avons réalisé le projet par rapport à tous ses aspects en parcourant toutes ses phases en
s’appuyant sur la méthode agile Kanban et en utilisant l’UML pour la conception, Adobe Photoshop
pour la réalisation des maquettes et en utilisant les technologies de développements tels que : Ionic,
Cordova, TypeScript, Angular, CSS, NodeJS avec des environnements de développement adaptés.

iv
 Abstract

Nowadays, most businesses have an existing set of digital properties and mobile platforms.
Mobile applications work effectively to boost brand awareness, and achieve better customer
engagement for their services.

This document represents the outcome of a six-month internship at Al Amana Microfinance

association as part of our graduation project at Morocco Graduate Telecommunications Engineering
Institute (INPT).

The objective of this project is to conceive, design, and build a mobile application that aims to
digitalize customer experience.

During the project planning and implementation phases, we have relied on the Kanban system for
its management, UML modeling language for system modeling, Adobe Photoshop graphics editor
for its design and technologies like Ionic, Cordova, TypeScript, Angular, CSS and NodeJS for its
programming.

Because of this mobile application project, we have been able to improve and put into practice all
the knowledge acquired during our engineering training at the Institute and in the future, we expect
to add more functionalities to it and improve its user interface.
.

v
 Liste Des Abréviations

Lettre Abréviation Désignation

API Application Programming Interface
A
AS 400 Application System 400
C CSS Cascading Style Sheets
DOM Document Object Model
D
DSI Département du Système d’Information
HTML Hypertext Markup Language
H
HTTP Hyper Text Transfer Protocol
IBM International Business Machines
I
iOS iPhone OS
JSON JavaScript Object Notation
J
JWT JSON Web Token
O OS 400 Operating System 400

N No SQL Not Only SQL

PaaS Platform as a Service
PNG Portable Network Graphics
P
PSD PhotoShop Document
PWA Progressive Web App
R REST REpresentational State Transfer
SDK Software Development Kit
S
SGBD Systèmes de Gestion de Base de Données

vi
 Liste Des Figures
Figure 1 : Logo Al Amana Microfinance ...................................................................................................... 3
Figure 2 : L’Organigramme de l’association................................................................................................. 6
Figure 3 : Principe de Kanban ..................................................................................................................... 9
Figure 4 : Workflow sur Trello ...................................................................................................................10
Figure 5 : Diagramme de GANTT ...............................................................................................................11
Figure 6 : Logos des acteurs de la microfinance au Maroc ...........................................................................14
Figure 7 : Quelques interfaces de l’application mobile Enda Tamweel.........................................................18
Figure 8 : Quelques interfaces de l’application mobile National Microfinance Bank ....................................19
Figure 9 : Quelques interfaces de l’application mobile CovenantMFB .........................................................20
Figure 10 : Quelques interfaces de l’application mobile Mwaghavul Microfinance Bank .............................20
Figure 11 : Quelques interfaces de l’application mobile Fundación delamujer .............................................21
Figure 12 : Services et fonctionnalités du projet ..........................................................................................23
Figure 13 : Diagramme de cas d'utilisation global .......................................................................................25
Figure 14 : Diagramme de séquence de cas "Authentification" ....................................................................32
Figure 15 : Diagramme de séquence de cas "Inscription" .............................................................................33
Figure 16 : Diagramme de séquence de cas "Demander un prêt" ..................................................................34
Figure 17 : Diagramme de séquence de cas "Rendez-vous" .........................................................................35
Figure 18 : Diagramme de séquence de cas "Trouver une agence" ...............................................................36
Figure 19 : Diagramme de séquence de cas "Faire une réclamation / Poser une question" ............................37
Figure 20 : Diagramme de classe.................................................................................................................38
Figure 21 : Type d'application mobile .........................................................................................................43
Figure 22 : architecture applicative du système métier d’Al Amana .............................................................51
Figure 23 : Architecture Logiciel de Selfcare ..............................................................................................52
Figure 24 : Architecture technique de Selfcare ............................................................................................53
Figure 25 : Design de la maquette 1 du Selfcare ..........................................................................................59
Figure 26 : Design de la maquette 2 du Selfcare (Suite) ...............................................................................60
Figure 27 : Logo de l'application Selfcare ...................................................................................................61
Figure 28 : Sliders et Authentification .........................................................................................................62
Figure 29 : Page d'Inscription ......................................................................................................................62
Figure 30 : Page d'Accueil ..........................................................................................................................62
Figure 31 : Page d'A propos ........................................................................................................................63
Figure 32 : Page de Mon Compte ................................................................................................................63
Figure 33 : Page de Profil............................................................................................................................64
Figure 34 : Page des Notifications ...............................................................................................................64
Figure 35 : Page de Localisation des Agences .............................................................................................65
Figure 36 : Page de Réclamation .................................................................................................................65
Figure 37 : Pages des Rendez-vous .............................................................................................................66
Figure 38 : Page d'Evénements et Actualités ...............................................................................................66
Figure 39 : Pages des Histoires et Témoignages ..........................................................................................67
Figure 40 : Page de Foire Aux Questions ....................................................................................................67
Figure 41 : Rubrique des autres services......................................................................................................68
Figure 42 : Pages de Mes Prêts....................................................................................................................69
Figure 43 : Pages de demande d'un nouveau prêt .........................................................................................69
Figure 44 : Pages de l'opération Substituer ..................................................................................................70
Figure 45 : Pages de l'opération Reporter ....................................................................................................70
Figure 46 : Pages de la Demande Anticipé du Payement .............................................................................71
Figure 47 : Panneau de chronométrage pour la réponse à un appel vers l'API...............................................72

vii
 Liste Des Tableaux
Tableau 1 : Historique d'Al Amana Microfinance ......................................................................................... 5
Tableau 2 : Fiche de description du cas d’utilisation "Authentifier" .............................................................26
Tableau 3 : Fiche de description du cas d’utilisation "S'inscrire" .................................................................27
Tableau 4 : Fiche de description du cas d’utilisation "Demander un prêt" ....................................................28
Tableau 5 : Fiche de description du cas d’utilisation "Simuler un prêt" .......................................................28
Tableau 6 : Fiche de description du cas d’utilisation "Fixer un Rendez-vous" ..............................................29
Tableau 7 : Fiche de description du cas d’utilisation "Trouver une agence" .................................................29
Tableau 8 : Fiche de description du cas d’utilisation "Consulter autres services"..........................................30
Tableau 9 : Fiche de description du cas d’utilisation "Consulter la FAQ".....................................................30
Tableau 10 : Environnement Matériel .........................................................................................................41
Tableau 11 : Comparaison entre les types d’application mobile ...................................................................44
Tableau 12 : Comparaison entre Ionic et Flutter ..........................................................................................46
Tableau 13 : Les tickets utilisés dans le workflow sur Trello .......................................................................58

viii
 Table Des Matières
Dédicace ....................................................................................................................................................ii
Remerciement.......................................................................................................................................... iii
Résumé ..................................................................................................................................................... iv
Abstract ......................................................................................................................................................v
Liste Des Abréviations .......................................................................................................................... vi
Liste Des Figures ................................................................................................................................... vii
Table Des Matières................................................................................................................................. ix
Introduction Générale ............................................................................................................................ 1
1. CONTEXTE GENERAL DU PROJET......................................................................................... 2
1.1. Introduction ................................................................................................................................ 3
1.2. Présentation de l'organisme d'accueil ....................................................................................... 3
1.2.1. Présentation générale de l’association Al Amana Microfinance ................................................. 3
1.2.2. Mission, Vision et Valeurs ...................................................................................................... 3
a. Mission ....................................................................................................................................... 3
b. Vision ......................................................................................................................................... 4
c. Valeurs ........................................................................................................................................ 4
1.2.3. Historique.............................................................................................................................. 4
1.2.4. Produits et Services d’Al Amana Microfinance ........................................................................ 5
1.2.5. Organigramme ....................................................................................................................... 6
1.3. Présentation générale du projet ................................................................................................. 7
1.3.1. Contexte du projet .................................................................................................................. 7
1.3.2. Problématique du projet .......................................................................................................... 7
1.3.3. Objectif du projet ................................................................................................................... 7
1.4. Méthodologie adoptée ............................................................................................................... 8
1.4.1. Les méthodes agiles ............................................................................................................... 8
1.4.2. Justification du choix de la méthode ........................................................................................ 8
1.4.3. Présentation de Kanban .......................................................................................................... 8
1.5. Planification du projet ............................................................................................................... 9
1.5.1. Outil de gestion ...................................................................................................................... 9
1.5.2. Planification du projet ...........................................................................................................10
1.6. Conclusion.................................................................................................................................12
2. ETUDE, ANALYSE, SPÉCIFICATION DES BESOINS ET CONCEPTION ...................13
2.1. Introduction ...............................................................................................................................14
 2.2. Les principaux acteurs de la microfinance au Maroc .............................................................14
2.2.1. Acteurs de la microfinance au Maroc ......................................................................................14
2.2.2. Contribution des services en ligne de ces acteurs .....................................................................17
2.3. Les solutions existantes dans le marché mondial ...................................................................18
3.4. Analyse des besoins ..................................................................................................................22
2.4.1. Les acteurs et leurs rôles ........................................................................................................22
2.4.2. Objectif fonctionnel du projet.................................................................................................22
2.5. Spécification des besoins..........................................................................................................24
2.5.1. Identification des besoins fonctionnels ....................................................................................24
2.5.2. Diagramme des cas d’utilisation du système ............................................................................24
a. Digramme des cas d’utilisation ......................................................................................................24
b. Description de quelques cas d’utilisation .........................................................................................26
2.5.3. Spécification des besoins non fonctionnels ..............................................................................31
2.6. Conception de la solution .........................................................................................................31
2.6.1. Diagrammes des séquences ....................................................................................................31
2.6.2. Diagrammes de classes ..........................................................................................................37
2.7. Conclusion.................................................................................................................................39
3. TECHNOLOGIE ET ENVIRONNEMENT TECHNIQUE .....................................................40
3.1. Introduction ...............................................................................................................................41
3.2. Environnement de travail .........................................................................................................41
3.2.1. Environnement matériel .........................................................................................................41
3.2.2. Environnement logiciel ..........................................................................................................42
a. Environnement logiciel pour le design ...............................................................................................42

b. Environnement logiciel pour la conception .........................................................................................42

c. Environnement logiciel pour la gestion et la planification ......................................................................42

3.3. Technologies utilisées au développement ...............................................................................43

3.3.1. Introduction au développement mobile ...................................................................................43
3.3.2. Benchmarking des outils de la technologie choisi ....................................................................45
a. Ionic Vs Flutter .............................................................................................................................45

b. React Native vs. Ionic Angular.........................................................................................................46

c. Comparaison entre plugin Cordova et Capacitor ..................................................................................47

3.3.3. Outils de développement adoptés ...........................................................................................48

a. Outils de développement utilisés pour la création des interfaces ..............................................................48

b. Outils de développement utilisés pour la création de l’API .....................................................................50

c. Outils de développement utilisés pour la création et la gestion de la BD ....................................................50

3.4. Architectures techniques de l’application ...............................................................................51

3.4.1. Architecture applicative du système métier de la société ..........................................................51
 3.4.2. Architecture logicielle de l’application....................................................................................52
3.4.3. Architecture technique de l’application ...................................................................................53
3.5. Conclusion.................................................................................................................................54
4. MISE EN OEUVRE DE LA SOLUTION ...................................................................................55
4.1. Introduction ...............................................................................................................................56
4.2. Présentation des tâches du workflow .......................................................................................56
4.3. Partie du design de l’application ..............................................................................................59
4.3.1. Design des maquettes ............................................................................................................59
4.3.2. Création logo de l’application ................................................................................................60
4.4. Travail réalisé de l’application .................................................................................................61
4.4.1. Ticket R01 : Authentification .................................................................................................61
4.4.2. Ticket R02 : Inscription .........................................................................................................62
4.4.3. Ticket R03 : Home ................................................................................................................62
4.4.4. Ticket R04 : About ................................................................................................................63
4.4.5. Ticket R05 : Mon compte ......................................................................................................63
4.4.6. Ticket R06 : Profil.................................................................................................................64
4.4.7. Ticket R07 : Notifications ......................................................................................................64
4.4.8. Ticket R08 : Localisation des agences .....................................................................................65
4.4.9. Ticket R09 : Réclamations .....................................................................................................65
4.4.10. Ticket R10 : Rendez-vous ......................................................................................................66
4.4.11. Ticket R11 : Actualités et Evénement .....................................................................................66
4.4.12. Ticket R12 : Histoires et Témoignages ....................................................................................67
4.4.13. Ticket R13 : FAQ..................................................................................................................67
4.4.14. Ticket R14 : Autres Services ..................................................................................................68
4.4.15. Ticket R15 : Mes Prêts ..........................................................................................................69
4.5. La validation des besoins non fonctionnels de Selfcare ........................................................71
4.6. Conclusion.................................................................................................................................72
Conclusion Générale Et Perspective ..................................................................................................73
Bibliographie ..........................................................................................................................................74
Webographie...........................................................................................................................................75
 Introduction Générale

Le marché des technologies a connu une énorme évolution et innovation pendant cette dernière
décennie et plusieurs secteurs se sont adaptés à ce changement pour satisfaire ses clients.

La microfinance représente l’un des domaines qui connaissent un nombre énorme de clients et qui
souffre pour les satisfaire. Il est judicieux de proposer leurs services d’une façon plus rapide et
sécurisé mais aussi à distance afin de suivre le rythme du développement et faciliter le service client.

Les applications mobiles sont devenues une tendance grâces à leurs utilisations quotidiennes pour
remplacer les équipements physiques, réduire les déplacements, gagner plus de temps, ou tout
simplement pour faciliter la vie. C'est dans ce cadre où s'inscrit notre projet qui consiste à développer
une application mobile nommée Selfcare sous les deux systèmes d'exploitation Android et l’iOS qui
propose de nombreuses fonctionnalités à l’utilisateur ainsi que sa partie administrative qui consiste à
gérer les services clientèle.

Le point de départ de notre projet était une autoformation sur la méthodologie Agile, notamment
ses frameworks de travail, ensuite nous avons mené une étude de benchmarking des différentes
solutions existantes. Par la suite, nous fait la spécification des besoins, la conception, le design des
maquettes et finissant par le développement de l’application suivi par des petits tests pour s’assurer
de son bon fonctionnement.

Le présent rapport est structuré selon quatre chapitres couvrant l'ensemble des axes du travail
effectué. Le premier chapitre contient une description du contexte général du projet notamment la
présentation de l'organisme d'accueil Al Amana Microfinance, son organigramme, sa mission, sa
vision, ses valeurs, son historique, ainsi que son offre et services en illustrant la problématique, les
objectifs et la méthodologie adoptée.
Le deuxième chapitre liste les différents acteurs de la micro finance au niveau national et traite
l’étude théorique de quelques solutions déjà existantes dans le marché au niveau des autres pays pour
voir ce qu’ils apportent et déterminer ce qui manque pour proposer la meilleure solution. C’est sur
cette base que nous avons effectué une analyse de besoins fonctionnels, non fonctionnels et une étude
conceptuelle.
Par la suite le troisième chapitre met l’accent sur la technologie et l’ensemble des éléments
techniques qui seront employés au développement.
Enfin, le quatrième chapitre présente les résultats de l’implémentation, à savoir : le design des
maquettes, une illustration de gestion du projet, et des illustrations développées de l’application
Selfcare.

1
 Chapitre 1

CONTEXTE GENERAL DU PROJET

Sommaire
1.1. Introduction .............................................................................................................................. 3
1.2. Présentation de l'organisme d'accueil .................................................................................. 3
1.2.1. Présentation générale de l’association Al Amana Microfinance .................................... 3
1.2.2. Mission, Vision et Valeurs ................................................................................................ 3
a. Mission ...................................................................................................................................... 3
b. Vision ........................................................................................................................................ 4
c. Valeurs ....................................................................................................................................... 4
1.2.3. Historique ........................................................................................................................... 4
1.2.4. Produits et Services d’Al Amana Microfinance ............................................................... 5
1.2.5. Organigramme .................................................................................................................... 6
1.3. Présentation générale du projet............................................................................................. 7
1.3.1. Contexte du projet .............................................................................................................. 7
1.3.2. Problématique du projet ..................................................................................................... 7
1.3.3. Objectif du projet ............................................................................................................... 7
1.4. Méthodologie adoptée ............................................................................................................ 8
1.4.1. Les méthodes agiles ........................................................................................................... 8
1.4.2. Justification du choix de la méthode ................................................................................. 8
1.4.3. Présentation de Kanban ..................................................................................................... 8
1.5. Planification du projet ............................................................................................................ 9
1.5.1. Outil de gestion .................................................................................................................. 9
1.5.2. Planification du projet .......................................................................................................10
1.6. Conclusion ...............................................................................................................................12

2
1.1. Introduction
Un projet, étant un ensemble d'activités coordonnées afin de réaliser une finalité, il est primordial
de le délimiter dans l'espace et dans le temps dans lequel s’est déroulé, mais aussi de déterminer la
méthodologie de sa conduite au préalable. C'est dans ce sens que s'inscrit ce chapitre dans lequel on
présentera dans un premier temps l'organisme d'accueil Al Amana Microfinance, son organigramme
global, sa mission, sa vision, ses valeurs, son historique, ainsi que son offre et services. Ensuite, on
citera les objectifs principales, la problématique de ce projet et on analysera le contexte. Et
finalement on abordera une méthodologie de travail et on déterminera une planification à ce projet.

1.2. Présentation de l'organisme d'accueil

1.2.1. Présentation générale de l’association Al Amana Microfinance

Figure 1 : Logo Al Amana Microfinance

Al Amana Microfinance est une association à but non lucratif, régie par le dahir du 15/11/1958
et les lois 18/97 et 58/03 relatives à l’exercice de l’activité du micro-crédit. Elle a été fondée le 13
février 1997 et agréée en tant qu’Association de microcrédit par le Ministère des Finances le 31
mars 2000.
La première dans le classement du secteur de la microfinance au Maroc, al Amana Microfinance
dispose, à fin décembre 2017, d’un réseau de plus de 643 agences dont 258 dans les zones urbaines
et périurbaines, 299 dans les zones rurales et 86 véhicules mobiles desservant les zones les plus
enclavées. A la fin du 2017, Al Amana Microfinance a desservi 4.432.329 prêts d’un montant global
d’environ 34 milliards de dirhams au profit de 1.626.596 bénéficiaires. [W1]

1.2.2. Mission, Vision et Valeurs

a. Mission
La Mission d’Al Amana Microfinance est de contribuer au développement économique et social
du Maroc à travers l’inclusion financière des populations exclues du système financier classique.

3
b. Vision
La vision d’Al Amana Microfinance est d’être l’institution de référence en microfinance, préférée
par ses clients, desservant le plus grand nombre de bénéficiaires, offrant des services diversifiés et
innovants, performante financièrement et ayant un fort impact social. [W1]

c. Valeurs
Les valeurs de al Amana Microfinance portent sur :
 Des valeurs fondamentales : l’Intégrité, l’honnêteté, la transparence et la responsabilité.
 Des valeurs de progrès : le goût de l’effort et de la persévérance, le goût du succès, la
rigueur, l’engagement et l’altruisme.
 Des valeurs professionnelles : La performance et le sens de l’innovation.
 Des valeurs collectives : L’appartenance et l’équité. [W1]

1.2.3. Historique
Depuis sa création, plusieurs dates phares marquent l’évolution de l’institution. [W1]

1997 Création d’Al Amana Microfinance.

Al Amana Microfinance reçoit l'agrément du Ministère des finances pour exercer

2000 les activités de microcrédit.

2001 Al Amana Microfinance assure son autonomie financière.

Al Amana Microfinance lance le premier test du prêt individuel à l’entreprise

2003 (PIE).

l’institution diversifie son offre de microcrédit et lance le prêt individuel au

2004 logement (PIL).

2005 Al Amana Microfinance passe le cap de 1000 salariés et 360 points de vente.

Al Amana Microfinance connait une croissance annuelle spectaculaire : Le

portefeuille des prêts passe de 763 à 1.843 Millions de dirhams (+142%) 2007 :
2006 L’institution est déjà une organisation forte de plus de 2000 salariés desservant
plus de 400000 clients.

2007 Refonte du système d’information de l’institution.

L’institution adopte une nouvelle identité visuelle marquant le changement, la

2009 dynamique et l’attachement à ses valeurs fondatrices.

2011 Lancement du projet d’entreprise « Oufouq 2015 ».

4
 2012 Lancement de 2 nouveaux produits : le transfert d’argent et la micro-assurance.

Le Conseil d’Administration de al Amana Microfinance décide de hisser la

performance sociale au niveau des instances de gouvernance en créant un comité
2013 ‘’Stratégie et Utilité sociale’’ rattaché au bureau exécutif du Conseil
d’Administration.

Al Amana Microfinance figure parmi les 9 meilleures grandes entreprises

2014 certifiées meilleurs employeurs du Maroc au titre de l’année 2014

 Al Amana Microfinance certifiée par la Smart Compaign

2015  Al Amana Microfinance obtient la notation ''A'' au rating social
(MICROFINANZA)

Al Amana Microfinance organise, sa convention des cadres et lance son

2016 programme Oufouq 2018.

Tableau 1 : Historique d'Al Amana Microfinance

1.2.4. Produits et Services d’Al Amana Microfinance

L’offre d’Al Amana Microfinance s’agit dans des produits financiers et des produits non
financiers. Les produits financiers se représentent sous forme des microcrédits : les prêts individuels
et solidaires destinés aux activités génératrices de revenus, mais aussi des prêts au logement.
L’approche de l’institution en matière de microcrédit s’articule autour d’un double objectif :
promouvoir des microprojets mais aussi renforcer les capacités d’entreprenariat et d’autonomisation
des bénéficiaires. Cette offre comprend en outre le transfert d’argent en partenariat avec des leaders
du marché (CASH EXPRESS, WESTERN UNION, MONEYGRAM), ainsi la micro-assurance en
partenariat avec le groupe Saham Assistance.

L’offre comprend également des produits non financiers. Il s’agit de la formation et

l’accompagnement des clients micro entrepreneurs. Ces formations de base aident les bénéficiaires à
comprendre divers aspects des produits qu’ils contractent. On outre, il y en a d’autres formations qui
sont dispensées sur l’éducation financière, le management et des formations métiers.

Al Amana Microfinance suit également ses clients à travers des services d’appui à la
commercialisation et à la visibilité des produits. De l’exposition jusqu’à la vente des produits, les
clients bénéficient à titre gracieux de différents services : un espace d’exposition sur le site web, des
stands pourvus dans différents salons, foires, et un support matériel et logistique afin de participer
aux rencontres régionales qui sont organisées par le Centre Mohammed VI de soutien à la
microfinance solidaire.

5
1.2.5. Organigramme
Al Amana Microfinance est une entreprise à grande taille humaine, elle se compose des Instances
de gouvernance, Direction Générale/pôles, Départements et Services dont chaque entité se compose
de plusieurs postes et équipes cohérents et bien organisés.

Nous étions dans le Département du Système d’Information (DSI) sous la direction de M. Abdellah
AKHIAT qui est le responsable de ce département, comme nous somme encadrés par Monsieur
Mustafa ELKORICHI qui est le responsable des nouvelles technologies. En effet, le rôle du
responsable du département était de nous expliquer les besoins du projet sur lesquelles nous avons
travaillé pendant notre stage de fin d'étude, sans oublier notre encadrant au sein de la société qui était
en contact avec nous pour nous faire orienter, faire le suivi et la validation du travail.

Figure 2 : Organigramme de l’association [1]

6
1.3. Présentation générale du projet
1.3.1. Contexte du projet
Dans le cadre de notre formation en ingénierie à l’Institut National des Postes et
Télécommunications (INPT), nous avons eu l’occasion d’effectuer notre stage de fin d’études au sein
de l’association Al Amana Microfinance, en vue de l’obtention du Diplôme d’Ingénieur d’Etat en
Télécommunications et Technologies de l’Information. En effet, ce stage vise à compléter notre
formation acquise, au sein de cet établissement, et de nous introduire à la vie professionnelle par la
mise en pratique de nos connaissances et la mise en œuvre de notre esprit d’équipe.

Les institutions financières formelles tels que les banques exigent des agents économiques à
remplir certaines conditions (documents d'identification, les garanties, un dépôt minimum, etc.) avant
de leur octroyer des crédits. Faute de pouvoir remplir ces conditions, les personnes à revenus faibles,
(les petits paysans et commerçants, les artisans, les vendeurs rue, etc.) sont exclues de ce système
financier classique. La microfinance, quant à elle, met en place des produits financiers simples et
adaptés aux besoins des populations pauvres afin de lutter contre les nombreuses dimensions de la
pauvreté. C’est dans ce sens que les apports sociaux incontestables de la microfinance et afin de la
promouvoir davantage, le Maroc à travers les sociétés de microfinance a pu résoudre les problèmes
complexes et multidimensionnels de la pauvreté. L’association Al Amana Microfinance fait partie des
acteurs de la microfinance dans le royaume marocain.

1.3.2. Problématique du projet

Al Amana microfinance offre de nombreux services et produits à ses clients or ces derniers doivent
se présenter chaque fois à l’agence pour effectuer les moindres opérations sans oublier la période de
confinement qui a imposé un grand problème pour leurs déplacements en dehors précisément aux
agences de l’association. Etant donné le nombre de clientèle, nous devrons trouver une solution pour
le confort du client afin qu’il puisse satisfaire ses besoins à distance et ainsi les agences ne souffrent
pas d’encombrement humain. D’où la nécessité d'offrir à ses clients une application mobile
permettant de réaliser des opérations en toute sécurité et à tout moment.

1.3.3. Objectif du projet

L’objectif de stage consiste à faire une étude et développer une application mobile conviviale et
moderne qui propose plusieurs fonctionnalités bancaires dont la principale fonctionnalité est
d’effectuer des opérations du prêt. Tandis que les objectifs derrière le projet sont l’amélioration du
service client, le gain de temps, la réduction d’encombrement humain et les déplacements des clients
aux agences d’Al Amana Microfinance.

7
1.4. Méthodologie adoptée
Tout processus de développement nécessite un modèle bien défini qui conduit le projet à atteindre
les résultats attendus. Un tel modèle représente une méthode qui doit décrire la modélisation du
système logiciel (éventuellement matériel) efficace et complète.

1.4.1. Les méthodes agiles

Le terme agile définit une approche de gestion de projet d’une manière souple et flexible qui prend
le contre-pied des approches traditionnelles prédictives et séquentielles de type cycle en V ou en
cascade. La notion même de gestion de projet est remise en question au profit de gestion de projet.
De façon à raisonner davantage produit que projet étant donné que l’objectif d’un projet consiste à
donner naissance à un produit. Les méthodes agiles contrairement aux méthodes traditionnelles ont
pour avantages d’impliquer au maximum le client dans la conception de l’application. Pour la
réalisation de notre application, nous allons adopter la méthodologie agile en utilisant un cadre de
travail qui sera déterminé selon la démonstration de la partie suivante.

1.4.2. Justification du choix de la méthode

Au premier lieu, nous avons décidé de suivre la méthode Agile Scrum, mais avec la pandémie du
covid-19 cette méthode est devenue difficile à cause de la non-présence physique des membres de
l’équipe et le travail est devenu à distance de plus problème de matériel (manque de performance des
pc) et de connexion internet…, c’est pourquoi nous avons pensé à utiliser la méthode Agile Kanban.
Même si ces deux méthodes ont de nombreuses similitudes, les approches sont différentes. En effet,
avec Scrum, l'équipe de développement travaille sur des cycles courts allant de deux à quatre
semaines. A chaque fin de sprint, une nouvelle version du projet est livrée au client pour qu'il en fasse
la recette. Par contre avec Kanban, c'est plus l'amélioration continue qui est mise en avant, les
développements n'étant pas figés et pouvant faire l'objet d'évolutions tout au long du projet. Durant
notre stage qui a coïncidé presque avec le début du confinement nous avons été amenés à travailler
avec la méthode agile Kanban qui est une méthode simple, visuelle et facilement compréhensible par
tous.

1.4.3. Présentation de Kanban

Kanban est une expression japonaise qui signifie ‘’ étiquette ‘’. En pratique, la méthode Kanban
consiste à matérialiser sur un mur physique ou virtuel les différentes étapes d'un processus de
réalisation d'une tâche. Chaque colonne représente une de ces étapes de réalisation. Les tâches
exprimées sur les étiquettes se déplacent d'une colonne à une autre au cours de leur cycle de vie. Elles
peuvent par exemple être réparties de la façon suivante :

8
 Figure 3 : Principe de Kanban [W2]

Ce management visuel de tâche permet de visualiser en un coup d'œil l'avancement d'une tâche.
Chacun peut ainsi voir l'avancement du projet. Le fait que le flux de travail soit contrôlé visuellement
facilite la collaboration de l’équipe et permet ainsi d'anticiper les éventuels problèmes de charge,
notamment quand il y a une accumulation de tâches dans une même colonne. Ce système permet de
mesurer et d'optimiser le temps consacré à la réalisation et à la finalisation de chaque tâche. La
méthode Kanban est souvent utilisée dans les secteurs de l'industrie sur des projets agiles et se base
sur différentes pratiques, indicateurs et événements. L'objectif fondamental de la méthode Kanban
est d'éviter le gaspillage en assurant l'amélioration continue du processus. Alors que la plupart des
entreprises préfèrent à choisir un système à flux poussés, qui ne prend pas en compte les demandes
des consommateurs, la méthode Kanban impose un système à flux tirés, déclenché par la
consommation et les besoins du client.

1.5. Planification du projet

1.5.1. Outil de gestion
L'outil utilisé pour organiser notre travail est : Trello. En effet, Trello est un outil de gestion de
projet en ligne, lancé en septembre 2011 et inspiré par la méthode Kanban de Toyota. Trello est dédié
au suivi des tickets informatiques qui représentent les tâches à effectuer au sein de n’importe quel
projet professionnel. Il repose sur une organisation des projets en tableaux, où chaque tableau se
compose par des colonnes listant des cartes, chacune représentant des tâches à effectuer. Les cartes
sont assignables aux membres de l’équipe et sont mobiles d'une colonne à l'autre, traduisant leur
avancement ce qui nous permet de structurer le travail, visualiser l'activité de l'équipe et se rendre
compte des progrès de l'équipe.

9
 De plus, il se décline en une version Web accessible en ligne, et une application mobile (sous iOS
ou Android). Tous les collaborateurs voient le même tableau (correspondant à un projet) et reçoivent
en temps réels des notifications chaque fois qu’une tâche est ajoutée ou complétée.

Figure 4 : Workflow sur Trello

1.5.2. Planification du projet

La phase de planification permet de découper le projet en tâches, de décrire leur enchaînement
dans le temps, d'affecter à chacune une durée. Dans le cadre d'une bonne gestion du projet et du
respect des délais des différentes étapes de l'application, nous avons établi un planning qui est
subdivisé selon les tâches suivantes [2] :

 L’étude du projet.
 Comprendre le besoin de la société,
 L’étude de l’existant,
 la spécification des besoins,
 La conception.
 Uses cases,
 Digramme de classe,
 Diagrammes des séquences,
 Les architectures
 Le design des maquettes.
 Formation sur les technologies à utiliser.
 Le développement.
 La rédaction du rapport.
Le diagramme de GANTT suivant permet d'illustrer le planning global de notre stage de fin
d’étude au sein d’Al Amana Microfinance :

10
11
Figure 5 : Diagramme de GANTT
1.6. Conclusion
Dans ce chapitre nous avons présenté d'abord l'organisme d'accueil Al Amana Microfinance où
nous avons effectué notre stage de fin d’étude, puis situé le projet dans son contexte général, ainsi
nous avons terminé par la planification de notre stage en spécifiant la méthode de gestion que nous
avons adopté pour notre projet et la planification que nous avons suivi afin d’encadrer ce travail dans
un espace de temps. Dans le prochain chapitre nous établirons l’étude théorique sur les acteurs
principaux de la microfinance au Maroc, ainsi quelques solutions déjà présentent au niveau des autres
pays pour voir ce qu’ils apportent et déterminer ce qui manque afin de proposer les fonctionnalités à
réaliser dans l’application qu'on va réaliser. Ainsi l’analyse, la spécification des besoins
fonctionnelles et non fonctionnelles et enfin de la conception de l’application.

12
 Chapitre 2

ETUDE, ANALYSE, SPÉCIFICATION DES

BESOINS ET CONCEPTION

Sommaire
2.1. Introduction .............................................................................................................................14
2.2. Les principaux acteurs de la microfinance au Maroc ......................................................14
2.2.1. Acteurs de la microfinance au Maroc ..............................................................................14
2.2.2. Contribution des services en ligne de ces acteurs ...........................................................17
2.3. Les solutions existées dans le marché mondial ................................................................18
2.4. Analyse des besoins ...............................................................................................................22
2.4.1. Les acteurs et leurs rôles ...................................................................................................22
2.4.2. Objectif fonctionnel du projet ..........................................................................................22
2.5. Spécification des besoins ......................................................................................................24
2.5.1. Identification des besoins fonctionnels ............................................................................24
2.5.2. Diagramme des cas d’utilisation du système ..................................................................24
a. Digramme des cas d’utilisation ..................................................................................................24
b. Description de quelques cas d’utilisation ...................................................................................26
2.5.3. Spécification des besoins non fonctionnels .....................................................................31
2.6. Conception de la solution .....................................................................................................31
2.6.1. Diagrammes des séquences ..............................................................................................31
2.6.2. Diagrammes de classes .....................................................................................................37
2.8. Conclusion ...............................................................................................................................39

13
2.1. Introduction
Le contenu de ce chapitre s’articule sur trois grandes sections qui se basent sur l’étude et la
recherche. La première section présente l’étude sur le marché de la microfinance au Maroc en citant
les acteurs de ce domaine puis le marché mondial de la microfinance plus précisément les entreprises
qui ont une telle solution disponible que nous travaillons sur, afin de voir ce qu’ils apportent et
déterminer ce qui manque pour adopter les fonctionnalités à réaliser dans notre solution. La deuxième
section s’appuie sur l’analyse des besoins, puis nous définirons les besoins fonctionnels et non
fonctionnels de l’application. Et par la suite, la troisième section se porte sur la conception de
l’application via des différents diagrammes qui donnent une vision globale de la structure,
comportement et fonctionnalité de la solution.

2.2. Les principaux acteurs de la microfinance au Maroc

2.2.1. Acteurs de la microfinance au Maroc
Le secteur du micro-crédit est devenu un secteur économique clé du Royaume et un acteur majeur
dans la lutte contre la pauvreté par l’inclusion financière et la création d’emplois. Le secteur de la
microfinance au Maroc a connu en 2008 une régression importante du nombre de clients actifs et de
son encours. Cependant, 2012 a marqué la fin du cycle de recadrage et de restructuration de la
microfinance marocaine, les efforts fournis par toutes les associations commencent à donner leurs
résultat annonçant ainsi le début d’une nouvelle phase de développement du secteur. Le secteur
continue d’investir dans le renforcement de ses capacités et la modernisation de ses structures. [W3]

Les associations qui représentent la microfinance au Maroc sont :

Figure 6 : Logos des acteurs de la microfinance au Maroc

14
 Al Amana Microfinance
C’est l’acteur que nous avons présenté dans le premier chapitre lors de la présentation de
l’organisme d’accueil. En bref, c’est une Association à but non lucratif, régie par le dahir du
15/11/1958 et les lois 18/97 et 58/03 relatives à l’exercice de l’activité du micro-crédit. Elle a été
créée le 13 février 1997 et agréée en tant qu’Association de microcrédit par le Ministère des Finances
le 31 mars 2000. Sa mission est de promouvoir les micro-entreprises par l’octroi de crédit, et par tous
services connexes. [W4]

 Al Karama pour la Microfinance

Association à but non lucratif, qui œuvre pour le développement économique et social du pays par
l’octroi de microcrédits aux populations les plus pauvres. Issue de l’Association Marocaine pour
l’Appui au développement Locale (AMAL : ex-ACAET), AL KARAMA-MC a été créée en Juillet
1999 conformément aux prédispositions du Dahir N° 1-58-376 du 15 Novembre 1958 (réglementant
le droit d’association), et conformément aux prédispositions du Dahir N° 1-99-16 du mois de Février
1999 portant promulgation de la loi N° 18/97 relative au microcrédit. La Fondation s’est donnée pour
mission d’accompagner l’accroissement progressif de la Micro-entreprise de chaque bénéficiaire par
l’appui financier et technique. [W5]

 AMOS
L’Association de Microfinance Oued Srou, est une association à but non lucratif créée le 25 février
2000. Son objectif est d’améliorer les revenues des populations économiquement faibles par le
financement d’activités génératrices de revenue et d’apporter une réponse locale aux problèmes de
l’accès au financement pour les populations les plus démunies, de renforcer et consolider sa structure
et diversifier l’offre de produits financiers notamment pour le milieu rural. [W6]

 ARDI
La Fondation ARDI a été créée en 2001 sous forme d’association d’intérêt économique et social,
sans but lucratif. Elle a pour mission de lutter contre l’exclusion financière et de promouvoir la micro
entreprise particulièrement en milieu rural, à travers l’exercice et la promotion du micro crédit. Dotée
d’un nouveau logo, d’une nouvelle organisation et de nouvelles ambitions, la Fondation ARDI se
veut le prolongement de l’activité du Crédit Agricole du Maroc vers les populations rurales non
servies par les financements bancaires traditionnels. ARDI offre aux populations défavorisées les
services de proximité nécessaires à leur insertion socioéconomique. Elle investit l’espace et se
rapproche des personnes qui ont en besoin même dans les zones les plus reculées. [W7]

 ATIL Micro Crédit

L’Association Tétouanais des Initiatives Socioprofessionnelle de Micro crédit, est une association
à but non lucratif née en janvier 2001 sous le soutien de l’association mère ATIL et elle est reconnue
par le Ministère de l’Economie et des Finances. L’association a démarré son activité en mai 2001 en

15
collaboration avec l’ONG italienne APS grâce au « Programme de formation et appui aux petites et
micro entreprises dans la Wilaya de Tétouan », financée par le Ministère des Affaires Etrangères
Italienne et par l’Agence pour la Promotion et le Développement Economique et Social des Préfecture
du Nord du Royaume (APDN).

L’association ATIL MC a pour objectifs de permettre aux promoteurs de micro entreprises

actuellement exclus du système classique de financement, l’accès au crédit pour améliorer leur niveau
d’activités et leur revenu, favoriser l’insertion des jeunes en chômage dans la vie active, intégrer les
femmes dotées d’une compétence et d’un savoir-faire à la vie socio-économique et favoriser leur
pleine participation au développement locale.

Ses services s’adressent aux petits travailleurs indépendants à faible revenu issus de la population
urbaine et rurale pauvre de la Wilaya de Tétouan située dans la région du nord du Maroc. ATIL MC
propose à la fois des prêts solidaire et des prêts individuel. Sa clientèle est constituée des micro-
entrepreneurs femmes et hommes dans différents domaines : commerce, artisanat, service, pêcheurs,
agriculture… [W8]

 Attadamoune Micro Finance

L’Association Marocaine de Solidarité Sans Frontières / Micro Crédit, est une association à but
non lucratif, créée en 1994. Elle a démarré l’activité du microcrédit en décembre 1995 et a été agréée
en 1999. Sa mission est de permettre à des micro-entrepreneurs, hommes et femmes, issus d’une
couche sociale défavorisée et exclus du système bancaire, d’accéder à des financements structurés
qui les aideront à développer leurs micro-activités. [W9]

 Attawfiq Micro Finance

Association à but non lucratif créée en mars 2000 par le Groupe Banque Populaire, après avoir
obtenu l’agrément par décret ministériel du 1er mars de l’an 2000. Elle constitue une réponse
citoyenne du Groupe Banque Populaire qui vise à contribuer efficacement, aux côtés de l’Etat et
d’autres organisations non gouvernementales (ONG), à l’effort national de lutte contre la pauvreté et
le chômage et pour la promotion de l’emploi. [W10]

 Bab Rizq Jameel

Association de microcrédit nouvellement créée en 2011. L’Association a pour objectif de fournir
à ses clients des produits financiers et services qui favorisent la réussite de leur activité et leur
intégration dans le tissu économique, ainsi, prétendre à une vie meilleure. [W11]

 Fondation ARRAWAJ de la Finance Inclusive

La fondation ARRAWAJ est un organisme qui représente aussi un acteur de microcrédit dont
l’activité est régie par le Dahir du 15 novembre 1958 et la loi n° 18-97 relative à l’exercice de l’activité

16
de microcrédit. Elle a été créée en 1996 et a été autorisée à exercer les activités de microcrédit par
arrêté ministériel du 10 mars 2000. [W12]

 Fondation Micro Crédit du Nord

Association à but non lucratif créée en 2003 à l’initiative des membres du ROTARY CLUB de
Tanger dont la majorité est également membre de l’Association FES SAÏS, section de Tanger. Elle
lutte contre la pauvreté et la précarité et contribue à l’éradication de l’immigration clandestine. Par
l’octroi de microcrédits, elle soutient les activités des exclus du système bancaire classique et permet
l’intégration des personnes défavorisées au sein de la clientèle des services financiers. [W13]

 INMAA
L’Institution Marocaine d’Appui à la Micro-Entreprise, est une association créée en 1999 et agréée
par le Ministère de Tutelle en 2000. Elle a pour mission de contribuer à la lutte contre la pauvreté à
travers des programmes de microcrédit au profit des pauvres actifs, notamment les femmes, ayant
besoin de petits prêts pour renforcer leurs activités économiques ou entamer de nouvelles activités.
Son intervention s’étale sur tout le territoire marocain notamment dans zones rurales. Développer,
outre le micro-crédit solidaire, de nouveaux produits financiers adaptés aux besoins de certains
secteurs économiques précis et nouer des relations de partenariat avec différentes organisations
locales, nationales et internationales afin d’assurer la complémentarité des actions dans régions
ciblées sont les deux principales composantes de sa vision. La Devise d’INMAA est de « lutter contre
la pauvreté, là où elle est le plus difficile à atteindre ». [W14]

 ISMAILIA
L’Association Ismailia pour le micro crédit est une association à but non lucratif créée en 1998.
Sa mission cruciale est d’aider la femme démunie dans le milieu urbain et rural (ville de Meknès et
sa région). [W15]

 Tawada pour le Micro Crédit

Agréée en août 2007 par le Ministère des Finances en tant qu’association de microcrédit,
l’Association Tawada cible principalement la clientèle rurale et féminine. [W16]

2.2.2. Contribution des services en ligne de ces acteurs

Après avoir défini et cité les acteurs de la microfinance dans notre royaume, on peut résumer qu’ils
ont un point commun qui s’agit d’octroyer des microcrédits à leurs clients afin de promouvoir ses
activités et lutter contre la pauvreté. Au niveau de la contribution du développement technologique,
on peut dire que certain de ces institutions possèdent un site web pour partager leurs services en ligne,
mais il reste toujours le déplacement aux agences pour les moindres opérations et aucun d’entre eux
n’a transformé ses services en version mobile. C’est pourquoi Al Amana Microfinance pense à cette
solution pour qu’elle soit la première au niveau national dans ce domaine à intégrer ses services du
microcrédit sur les smartphones afin d’améliorer l’accessibilité et fidéliser ses clients.

17
2.3. Les solutions existantes dans le marché mondial
Le type de solutions sur lequel nous voulons travailler prend une place vitale dans le marché de la
microfinance dans le monde, et nombreux sont les institutions du microcrédit qui possèdent une
version mobile pour lancer leurs services en ligne et de se rapprocher plus aux clients. Dans cette
partie on va citer quelques applications mobiles pour analyser les services disponibles ou bien
s’inspirer les interfaces graphiques publiées sur Google Play ou bien App Store pour proposer des
fonctionnalités à ajouter dans notre réalisation du Selfcare.

 Enda tamweel
Enda tamweel est une société de microfinance tunisienne agréée par le ministère des Finances le
31 décembre 2015. Créée par l’organisation non gouvernementale Enda interarabe, pionnière dans le
secteur de la microfinance en Tunisie. Enda tamweel a pour objectif de favoriser l’inclusion
économique et sociale des populations vulnérables (notamment les femmes, les jeunes et les
populations rurales) et de contribuer au développement économique du pays. Elle œuvre en particulier
pour la promotion de l’entreprenariat et contribue ainsi à l’effort national pour la promotion de l’auto-
emploi des jeunes et des femmes dans les quartiers et les zones rurales défavorisés. [W17]

Cet acteur adopte la solution mobile pour héberger ses services dedans. Selon les captures que
nous trouvons sur Google Play on peut tirer les fonctionnalités utilisées dans l’application. Cette
dernière est une application bilingue, elle emploie les deux langues arabe et français dans son contenu.
Cette application apporte comme fonctionnalités : la localisation des agences, inscription dans le
cas d’un nouveau client, faire une demande de prêt en remplissant un formulaire donné, un espace
client, un accès pour accéder aux produits de la société, une extension de contacter la société au cas
du besoin ou consultation. Voici quelques interfaces de cette application mobile qui a obtenu plus
que 10.000 de téléchargement au niveau du Google Play.

Figure 7 : Quelques interfaces de l’application mobile Enda Tamweel

18
 National Microfinance Bank
National Microfinance Bank est une institution jordanienne de microfinance enregistrée en tant
que société par actions privée et agréée par la banque centrale pour fournir des services financiers
conformément aux meilleures pratiques internationales dans le secteur de la microfinance. National
Microfinance Bank a fourni ses services à plus de 80.000 clients via un réseau composé de 33 agences
à travers le royaume jordanien. [W18]

Cette institution travaille aussi avec la solution mobile où elle lance ses services dedans. Selon les
captures des interfaces existantes sur Google Play nous avons pu tirer les fonctionnalités utilisées
dans l’application. Cette dernière est une application bilingue, elle emploie les deux langues arabe et
anglais dans l’affichage de son contenu. L’application du National Microfinance Bank apporte de
riches fonctionnalités à savoir : la localisation des agences, l’authentification pour les clients et
inscription dans le cas d’un nouveau client, consulter les nouveautés, voir les prêts en cours, demander
un nouveau prêt, afficher l’avancement et l’historique des payements du prêt, payement via e-wallet,
définir une alarme pour se notifier lors du prochain lot, afficher les informations de profil, etc.

Figure 8 : Quelques interfaces de l’application mobile National Microfinance Bank

 CovenantMFB
Covenant Microfinance Bank a commencé ses activités le 15 mars 2004 sous le nom de Covenant
University Community Bank Limited (CUCB LTD). Converti en banque de microfinance
conformément à la directive de la Banque centrale du Nigéria à toutes les banques communautaires
et a commencé ses activités le 11 janvier 2008. [W19]

L'application mobile CovenantMFB est une application Nigérienne conçu pour la microfinance.
L'application mobile CovenantMFB est sécurisée et présente une disposition intéressante, rapide et
pratique à utiliser.

Pour cette application solon la discription met en Google play, elle apporte les fonctionnalités
suivantes : consuler le solde du compte en temps réel; transférez de l'argent sur n'importe quel compte,
paiement et factures, recevoir des notifications, authentification pour les clients et inscription dans le
cas d’un nouveau client, etc.
19
 Figure 9 : Quelques interfaces de l’application mobile CovenantMFB

 Mwaghavul Microfinance Bank

Mwaghavul Microfinance Bank Ltd donne aux masses les moyens financiers afin de se sortir de
la pauvreté pour soutenir les initiatives entrepreneuriales et soutenir l’émancipation économique par
la fourniture des microcrédits et accroître l'accès au capital.

Cette application donne un accès instantané et en temps réel à du compte dans Mwaghavul
Microfinance Bank. L'application permet d'effectuer des transactions et de gérer le compte bancaire
à partir de l’appareil mobile. Il est très sécurisé, très simple à utiliser et gratuit pour l’abonnement.
Voici quelques services que la société offre, dont Google Play contient dans sa description sur son
application : afficher les soldes du compte, gérer le compte et pré-visualiser l'historique des
transactions, transferts vers des comptes dans la banque de microfinance Mwaghavul, transferts vers
des comptes dans d'autres banques au Nigéria, gérez les chèques, paiements des factures, demande
de nouveau (s) prêt (s), gérez les prêts, etc.

Figure 10 : Quelques interfaces de l’application mobile Mwaghavul Microfinance Bank

 La Fundación delamujer
La Fundación delamujer est la principale institution de microfinance non réglementée de
Colombie, elle s'est engagée à améliorer la qualité de vie et le progrès des entreprises de ses clients,

20
à soutenir les entrepreneurs de micro-entreprises en fournissant des solutions de microfinance qui leur
permettent d'acquérir des matières premières, de stocker ou d'étendre leurs activités et d'acheter des
machines ou des équipements.

L'établissement dispose d'un espace Service Clientèle et Protection afin de servir le mécanisme
d'écoute de l'utilisateur pour proposer des solutions adaptées à toutes ses exigences. De même, il
dispose d'outils qui renforcent leurs compétences et les motivent à prendre conscience de la gestion
de leur argent, en offrant une éducation financière au client, ce qui en fait un outil efficace pour
prévenir le surendettement.

Il intègre en permanence l'innovation et la numérisation dans la qualité des services qu'il propose,
à travers les derniers dispositifs technologiques qui lui permettent d'aller là où d'autres entités ne l'ont
pas atteint, en raison de la rapidité et de la simplicité des procédures et de l'opportunité de débourser
les prêts, très appréciés par ses clients. [W20]

Sa solution mobile dispose sur les fonctionnalités suivantes : authentification afin d’accéder au
compte personnel, avoir des informations sur les frais impayés, payement en ligne, vérification des
paiements effectués via les canaux numériques. Voici des captures qui illustrent les interfaces de cette
application mobile qui a obtenu aussi plus que 10k de téléchargement au niveau du Google Play.

Figure 11 : Quelques interfaces de l’application mobile Fundación delamujer

Il existe un bon nombre d’application mobiles dans le monde qui répondent aux divers services de
la microfinance des différentes institutions. Selon les solutions déjà existantes au niveau mondial que
nous avons cité, nous travaillons sur le même concept que cette solution pour l’intégrer pour sa
première fois au niveau national en combinaison avec les services de l’association Al Amana
Microfinance que fournit à ses clients. Nous avons pu fixer les fonctionnalités que nous proposons

21
de les intégrer dans notre projet Selfcare dont les plus primordiales sont les différentes opérations à
effectuer sur les prêts. Nous allons détailler ces fonctionnalités adoptées dans notre solution dans les
parties qui suivent de ce chapitre.

Une remarque à jouter, la conception des interfaces de ces applications sont bien présentées au
niveau du design et avec une manière conviviale afin que chaque client puisse l’utiliser facilement,
et c’est le même que nous devons aborder durant la réalisation de notre application Selfcare.

3.4. Analyse des besoins

2.4.1. Les acteurs et leurs rôles
Notre système Comporte quatre acteurs en général (dont le premier est le principal acteur pour
notre projet), qui sont :

Le client est la personne qui possède un compte chez la société Al Amana

Microfinance, et qui va bénéficier des services qui seront mises à
l’application Selfcare. Il a le droit d’effectuer toutes les opérations disponible
dans l’application.
Nouveau client est un internaute, qui a l’intention d’être client pour
bénéficier des produits et services de la société. Cet acteur possède une seule
opération qui est celle d’effectuer une inscription dans l’application et attend
la confirmation de sa demande.

L’agent est la personne qui est en contact direct avec les clients. Il va recevoir
les demandes effectuées par le client via le système.

2.4.2. Objectif fonctionnel du projet

Selon la partie précédente où nous avons effectué une étude et recherche sur les solutions déjà
existantes, nous avons pu proposer la solution que nous avons adopté dans le projet Selfcare qui
comprend un ensemble de fonctionnalités et processus que l’utilisateur va suivre afin de bénéficier
des services offerts par la société Al Amana Microfinance.

Rappelons-nous que les services sont sous forme de produits financiers et non-financiers que
chaque client peut s’abonner. Les fonctionnalités centrales de l’application sont les opérations à
effectuer sur le service du prêt, qui s’agit d’un produit financier. L’application offre au client un
espace personnel sécurisé pour gérer ses prêts et aussi de bénéficier d’autres services.

Tout est illustré dans un schéma qui montre multiple fonctionnalités et services que le client peut
accéder dans l’application.

22
 L’utilisateur installe
l’application Selfcare
L’utilisateur est un
nouveau client Inscription

L’utilisateur est déjà Attendre la

un client confirmation

Authentification
Demander un prêt

Substituer un prêt

Service du Prêt Reporter un prêt

Consulter l’historique et
l’avancement du prêt

Autres Services à Tayssir Al Amana

activer
Tamwil Moumtaz
Fixer les rendez-vous
Tamwil Express

Hissab Bikhir
Faire une réclamation
Transfert d’argent
Recevoir des
notifications Formation et
Accompagnement
S’informer aux
nouveautés de la société Appui à la
commercialisation

Se motiver par des Participation au

histoires et témoignages Concours

Réponse aux questions toujours

posées grâce au FAQ

Figure 12 : Services et fonctionnalités du projet

23
2.5. Spécification des besoins
2.5.1. Identification des besoins fonctionnels
Cette section a pour but de développer l'analyse des besoins fonctionnels attendus de la solution.
En effet, l'identification des besoins fonctionnels est une phase importante puisqu'elle doit permettre
aux utilisateurs finaux, de bien comprendre les fonctionnalités que le système fourni. A cet effet,
l’application va permettre aux clients, après l’authentification par un identifiant et un mot de passe,
de bénéficier des divers services de la microfinance, à savoir :

 Besoin fonctionnel 1 : Création des services liés au prêt

Mettre à disposition des utilisateurs de la solution un environnement technologique sécurisé
permettant d’effectuer les opérations sur ses prêts, ils peuvent les substituer et les reporter. Aussi ils
peuvent demander un nouveau prêt depuis son smartphone via l’application Selfcare et suivre sa
demande jusqu’à la confirmation. En outre, les clients ont la possibilité de consulter l’avancement et
les historiques de leurs prêts.

 Besoin fonctionnel 2 : Intégration des autres services supplémentaires

Ce besoin a pour but de mettre à disposition des clients de la solution de bénéficier aux autres
services que la société a offert. Afin de bénéficier de ces services (Tayssir Al Amana, Tamwil
Moumtaz, Tamwil Express, Hissab Bikhir, Transfert d’argent, Formation et Accompagnement,
Appui à la commercialisation, Participation au Concours) il suffit juste de les activer.

 Besoin fonctionnel 3 : Atouts

Ce besoin a pour but de mettre à disposition des clients de la solution un environnement
technologique permettant d’effectuer plusieurs choses sur l’application. Ils vont recevoir des
notifications, des nouveautés sur la société, la réponse sur toute question qu’ils ont besoin, comme ils
peuvent aussi faire des réclamations et fixer des rendez-vous, se motiver par des histoires et
témoignages des anciens clients qui ont réalisé un succès grâce au service de la société.

Bref, les besoins fonctionnels que nous avons cité se représentent sous forme des fonctionnalités
attendues de l’application des services de la microfinance qui répondent aux objectifs fonctionnels
mentionnés auparavant.

2.5.2. Diagramme des cas d’utilisation du système

a. Digramme des cas d’utilisation

Dans cette partie nous allons résumer les besoins fonctionnels du système à l’aide du diagramme des
cas d’utilisation UML. Et c’est la première étape à faire pour l’analyse d'un système. Pour ce faire on
commence par établir les diagrammes des cas d'utilisation qui permettent de mener un développement
orienté acteur et de découper le système global en de grandes tâches qui pourront simplifier le

24
développement. Un cas d'utilisation modélise une fonctionnalité du système, il correspond à un
service visible à l'utilisateur, Il s'agit d'une série d'interactions entre l'acteur et le système qui va se
réaliser.
Dans la figure présentée ci-dessous, nous avons mis le diagramme du cas d’utilisation qui
correspond à notre application dont nous avons précisé les fonctionnalités que le client peut interagir
avec elles.

Figure 13 : Diagramme de cas d'utilisation global

25
 Après que nous avons effectué le diagramme des cas d’utilisation, il est clair que nous venons de
dévoiler la première couche pour la compréhension partielle du fonctionnement de l’application.
Ensuite nous allons détailler quelques fonctionnalités pour savoir comment elles fonctionnent en
utilisant des tableaux dans le but de bien comprendre de quoi elles s’agissent exactement et savoir sur
quelles conditions que chacune a besoin pour travailler.

Dans la suite, nous allons détailler les fonctionnalités suivantes :

 Cas d’utilisation S’authentifier  Cas d’utilisation Fixer un rendez-vous

 Cas d’utilisation S’inscrire  Cas d’utilisation Trouver une agence
 Cas d’utilisation Demander un prêt  Cas d’utilisation Consulter autres services
 Cas d’utilisation Simuler un prêt  Cas d’utilisation Consulter FAQ

b. Description de quelques cas d’utilisation

 Description du cas d’utilisation « S’authentifier »

Sommaire d’identification
Titre : S’authentifier
Permettre au client d’accéder à l’application via un identifiant et un mot de
Résumé :
passe pour bénéficier des services offerts.
Acteur : Client
Description des enchainements
Pré condition : Post condition :
 Service web disponible Le client est authentifié et accède à sa page
 Serveur de base de données disponible d’accueil.
 Identifiant et mot de passe donnés par la
société lors de la création du compte
Scénario nominal :
1) Le client saisit son identifiant et son mot de passe
2) Le client clique sur le bouton connexion
3) Le système vérifie les données de connexion
4) Le client accède à sa page d’accueil

Scénario alternative :
Alt-1) champs vide : le système affiche le message d’erreur « veuillez remplir vos données »
Alt-2) identifiant invalide : le système affiche le message d’erreur « vérifier que l’identifiant soit
valide »
Alt-3) Mot de passe invalide : le système affiche le message d’erreur
Alt-4) Mot de passe oublié : l’acteur peut réinitialiser le mot de passe de l'utilisateur ou bien de le
demander chez la société.
Alt-5) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite »

Tableau 2 : Fiche de description du cas d’utilisation "Authentifier"

26
 Description du cas d’utilisation « S’inscrire »

Sommaire d’identification
Titre : S’inscrire
l’utilisateur fait une inscription pour devenir un client, et attend la
Résumé :
confirmation par un agent.
Acteur : Nouveau Client
Description des enchainements
Pré condition : Post condition :
 Service web disponible L’utilisateur fait son inscription avec succès et il
 Serveur de base de données disponible sera un client après la confirmation.
Scénario nominal :
1) l’utilisateur clique sur le bouton inscription
2) L’utilisateur remplit tous les champs demandés par ses informations
3) Le système vérifie la compatibilité de chaque donnée saisie
4) L’utilisateur confirme son inscription
5) Le système envoie un message à l’utilisateur pour qu’il attende la confirmation de son
inscription.
Scénario alternative :
Alt-1) Le client ne veut pas s’inscrire ou bien il annule son inscription.
Alt-2) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite ».

Tableau 3 : Fiche de description du cas d’utilisation "S'inscrire"

 Description du cas d’utilisation «Demander un prêt »

Sommaire d’identification
Titre : Demander un prêt
le client peut demander un prêt comme étant un nouveau prêt ou bien pour
Résumé :
substituer ses anciens prêts.
Acteur : Client
Description des enchainements
Pré condition : Post condition :
• Client authentifié Le client effectue sa demande avec succès et
• Service web disponible informé de que sa demande est encours de
• Serveur de base de données disponible traitement.
• Pour substituer un prêt le client est supposé
avoir octroyé un ou plusieurs prêts.
Scénario nominal :

27
 1) Le client choisit de demander un nouveau prêt ou substituer ses prêts
2) Le client peut simuler le prêt qu’il demande
3) Le client fait sa demande en remplissant les champs demandés
4) Le client confirme sa demande
5) Le système enregistre la demande dans la base de données
6) Le système envoie au client que sa demande et en cours de traitement.

Pour le cas de substituer :

 Le client doit d’abords préciser les prêts à substituer.

Scénario alternative :
Alt-1) Le client possède un demande non traitée et effectue une autre nouvelle demande
Alt-2) Le client annule se demande du crédit.
Alt-3) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite »

Tableau 4 : Fiche de description du cas d’utilisation "Demander un prêt"

 Description du cas d’utilisation «Simuler un prêt »

Sommaire d’identification
Titre : Simuler un prêt
Durant le processus de la demande du prêt, le client a la possibilité
Résumé : de le simuler pour avoir une idée sur la mensualité et la durée de
remboursement.
Acteur : Client
Description des enchainements
Pré condition : Post condition :
• Client authentifié Le client effectue une simulation de son
• Client est en cours d’effectuer une demande de prêt. prêt avant de le demander.
• Service web disponible
• Serveur de base de données disponible
Scénario nominal :
1) Le client entame la demande du prêt.
2) Dans l’étape de la simulation, le client entre le montant qui désire à emprunter.
3) Le système envoie une réponse estimative sur la mensualité et la durée du remboursement.
4) Le client peut ajuster sur un des paramètres mensualité/durée.
5) Le système renvoie une réponse en fonction du paramètre ajusté.
6) Le client décide de continuer ou annuler sa demande du prêt

Scénario alternative :
Alt-1) Le client entre des valeurs (montant, durée) hors de la marge donnée.
Alt-2) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite ».

Tableau 5 : Fiche de description du cas d’utilisation "Simuler un prêt"

28
 Description du cas d’utilisation «Fixer un Rendez-vous»

Sommaire d’identification
Titre : Fixer un Rendez-vous
Le client reçoit d’un rendez-vous d’après l’agent dont il a la possibilité de
Résumé :
le confirmer ou bien de le reporter.
Acteur : Client
Description des enchainements
Pré condition : Post condition :
• Client a effectué une demande de prêt. Rendez-vous est fixé ou bien reporté à une date
ultérieure.
Scénario nominal :
1) Le client reçoit un rendez-vous proposé par l’agent.
2) Le client a le choix de fixer ou reporter le rendez-vous.
3) Le système enregistre le choix effectué pour l’envoyer à l’agent.

Scénario alternative :
Alt-1) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite »

Tableau 6 : Fiche de description du cas d’utilisation "Fixer un Rendez-vous"

 Description du cas d’utilisation «Trouver une agence»

Sommaire d’identification
Titre : Trouver une agence
Résumé : Le client peut chercher l’adresse d’une agence quelconque.
Acteur : Client
Description des enchainements
Pré condition : Post condition :
• Client est authentifié. Une adresse de l’agence et numéro d’agent seront
affichés selon la ville et agence sélectionnés.
Scénario nominal :
1) Dans l’interface ‘’Agence‘’, le client choisit une ville.
2) Selon la ville sélectionnée une liste des agences s’affiche, et le client choisit une.
3) Le système génère l’adresse de l’agence et les infos (nom et numéro de tél) de l’agent associé à
cette agence.
Scénario alternative :
Alt-1) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite »

Tableau 7 : Fiche de description du cas d’utilisation "Trouver une agence"

29
 Description du cas d’utilisation «Consulter autres services»

Sommaire d’identification
Titre : Consulter autres services
Résumé : Le client peut consulter et bénéficier à autres services de la société.
Acteur : Client
Description des enchainements
Pré condition : Post condition :
• Client est authentifié. Le client consulte et s’abonne à autres services
• Client a déjà un ou plusieurs prêts depuis l’application.
Scénario nominal :
1) Le client accède à l’espace des autres services.
2) Le client consultes des services.
3) Le client peut activer le service pour le bénéficier.

Scénario alternative :
Alt-1) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite ».

Tableau 8 : Fiche de description du cas d’utilisation "Consulter autres services"

 Description du cas d’utilisation «Consulter FAQ»

Sommaire d’identification
Titre : Consulter FAQ
Le client consulte l’espace de la foire aux questions, comme il peut poser
Résumé :
une question au cas où il ne trouve pas la réponse dans l’espace.
Acteur : Client
Description des enchainements
Pré condition : Post condition :
• Client est authentifié. Le client trouve sa réponse dans l’espace FAQ ou
• Client a déjà un ou plusieurs prêts bien il envoie une question qu’elle n’a pas trouvé
sa réponse.

Scénario nominal :
1) Le client accède à l’espace FAQ.
2) Le client cherche la réponse de son questionnement.
3) Sinon le client peut poser sa question et l’envoyer.
4) le système enregistre sa question, dès que les administrateurs contactent le client pour répondre
à sa question.
Scénario alternative :
Alt-1) Service web ou serveur de base de données indisponible : le système affiche le message
d’erreur « Une erreur inattendue s'est produite ».

Tableau 9 : Fiche de description du cas d’utilisation "Consulter la FAQ"

30
2.5.3. Spécification des besoins non fonctionnels

Afin d’assurer un bon fonctionnement de l’application et de garantir la satisfaction de l’utilisateur,

des contraintes doivent être prises en compte tout au long du développement du projet :

Ergonomie et convivialité : L’application doit fournir une interface simple et élégante pour le client
afin de faciliter l’exploitation des services de l’application.

Maintenance et évolution : Le code doit être bien lisible, compréhensible et modulaire pour garantir
la souplesse, l’évolution et la maintenance de la solution et ainsi répondre aux changements du
marché.

Rapidité et robustesse : L’application doit assurer la rapidité de réponse et la fiabilité du résultat

procuré. Autrement dit, la solution doit avoir un temps de réponse optimale en ce qui concerne le
chargement de l'application et les délais de rafraîchissement.

Sécurité : L’application doit tenir compte de confidentialité des données des clients.

Les contraintes de matériel : L'application sera téléchargée et installée sur un téléphone mobile avec
système d’exploitation Android ou bien iOS.

2.6. Conception de la solution

2.6.1. Diagrammes des séquences
Les cas d'utilisation dans le premier diagramme sont raffinés par la suite dans des diagrammes de
séquence afin d'avoir une présentation claire sur les différentes interactions entre les acteurs et le
système selon un ordre chronologique.

Dans cette partie, nous allons décrire les scénarios les plus importants ainsi que leurs
représentations par les diagrammes de séquences.

 Diagramme de séquence de cas d’utilisation "Authentification"

Le diagramme ci-dessous représente le diagramme de séquence pour l'authentification. En effet,
le client saisi son email et son mot de passe au même temps l’application valide la forme de ce que le
client tape. Ensuite, l’application envoie les infos entrées à l’API pour les chercher dans la base de
données afin d’autoriser l’accès à l’application ou bien d’envoyer un message d’erreur et demander
de ressaisir les infos correctes.

31
 Figure 14 : Diagramme de séquence de cas "Authentification"

 Diagramme de séquence de cas d’utilisation "Inscription"

Pour un nouveau client, il demande de faire une inscription. Pour le scénario de ce cas, le nouveau
client doit remplir un formulaire donné par ses informations personnelles puis les envoyer. Durant le
saisi des infos, l’application vérifie le format de ces infos, s’ils ne sont pas valides l’application affiche
le champ en rouge et un message d’erreur. A la fin, les informations seront envoyés et enregistrés
dans la base de données en passant par l’API, et l’application envoie au nouveau client un message
dont son contenu est d’attendre le contact d’un agent pour la confirmation de sa demande d’inscription
et avoir un compte chez la société.

32
 Figure 15 : Diagramme de séquence de cas "Inscription"

 Diagramme de séquence de cas d’utilisation "Demande d’un prêt"

Le cas de demander un prêt représente la fonctionnalité principale de l’application, donc c’est
important d’expliquer son scénario. Le client de la société demande un nouveau prêt puis l’application
le dirige vers une interface de la demande dont son contenu est de contacter l’agent pour que ce
dernier traite la demande. En cas de la confirmation le client passe à l’étape de simulation afin de
simuler son prêt en saisissant le montant voulu et ajustant par l’un des paramètres durée ou mensualité
ensuite l’application renvoie le résultat de la simulation. Le client continue sa demande, l’application
lui affiche les résultats de la simulation qu’il a déjà effectué et lui demande de remplir quelques infos,
après le client envoie ou annule sa demande. L’application affiche au client un message de
confirmation, dans le cas où il a confirmé sa demande sera envoyée à l’API puis à la base de données
pour l’enregistrer. A la fine le client reçoit un message de suivi de sa demande, et cette dernière sera
traitée par un agent.

Le scénario du cas de « substituer un prêt » et le même, sauf au premier lieu le client doit préciser
le ou les prêt à substituer.

33
 Figure 16 : Diagramme de séquence de cas "Demander un prêt"

 Diagramme de séquence de cas d’utilisation "Rendez-vous"

Ce diagramme de séquence représente la procédure de recevoir et fixer un rendez-vous. En effet,
l’agent envoie un rendez-vous au client, pour se faire, les infos du rendez-vous (contenu, date et
heure) seront enregistrées dans la base de données et seront envoyées aussi au client. Ce dernier a le
choix de confirmer ou reporter le rendez-vous. Pour le premier choix, le rendez-vous s’enregistre
dans l’historique et renvoie la confirmation à l’agent via l’API. Pour le deuxième choix, le client fixe
un nouveau rendez-vous, ce dernier sera ajouté dans l’historique et sera renvoyé à l’agent ainsi à la
base de données pour qu’elle fera une mise-à-jour aux informations précédentes.

34
 Figure 17 : Diagramme de séquence de cas "Rendez-vous"

 Diagramme de séquence de cas d’utilisation "Trouver une agence"

Le diagramme de séquence de cas d’utilisation « Trouver une agence » représente une
fonctionnalité de localisation. Le client veut savoir l’adresse d’une agence, dans ce cas, il sélectionne
une ville depuis une liste déroulante qui se trouve dans l’interface en cliquant sur Mes Agences dans
l’interface d’Accueil, puis l’application lui renvoie une liste des agences situées dans la ville choisie.
Le client va sélectionner une autre fois sur une agence, et l’application lui affiche son adresse et les
informations (nom complet et numéro téléphone) des agents qui sont associés à l’agence cible.

Le client peut appuyer sur l’icône du téléphone situé à côté du numéro de l’agent pour l’appeler
directement depuis l’application.

35
 Figure 18 : Diagramme de séquence de cas "Trouver une agence"

 Diagramme de séquence de cas d’utilisation "Faire une réclamation / Poser une

question"
Ce diagramme de séquence représente le même principe pour les deux cas d’utilisation : « Faire
une réclamation » et « Consulter la FAQ ». La fonctionnalité FAQ est une liste de questions et
réponses sur la société, les services et l’application, dans le cas où le client ne trouve pas la réponse
à une question, il peut la poser et l’envoyer. Nous avons fait le scénario de réclamation qui est presque
le même pour consulter et/ou poser la question dans la FAQ.

Quand le client veut faire une réclamation, un formulaire est représenté pour qu’il soit rempli par
des infos et l’objet de la réclamation. Cette dernière s’envoie dès qu’elle sera remplie. L’application
transmet la réclamation à l’API qui la transmet aussi à son tour à la base de données pour le stockage.
Le client reçoit un message de l’envoie de sa réclamation.

36
 Figure 19 : Diagramme de séquence de cas "Faire une réclamation / Poser une question"

2.6.2. Diagrammes de classes

Le diagramme de classes est considéré comme le plus important de la modélisation orientée objet,
il en montre la structure interne et permet de fournir une représentation abstraite des objets du système
qui vont interagir pour réaliser les cas d'utilisation.

Nous avons réalisé le digramme de classes suivant pour expliquer la structure intérieure de
l'application mobile Selfcare. Le digramme représente les classes et les interfaces utilisées, ainsi que
les associations qui les relient. La classe principale est la classe située au centre <<Client>> qui
interagit avec tous les autres classes et contient les informations personnelles du client.

Puisqu’on travaille avec la méthode agile, cette structure peut être mise à jour lors du
développement de l’application, en ajoutant autres classes ou modifiant les attributs et méthodes des
classes qui sont affichées dans le diagramme ci-dessous.

37
Figure 20 : Diagramme de classe

38
2.7. Conclusion
Tout au long de ce chapitre nous avons exposé les acteurs qui représentent la microfinance au
Maroc et quelques institutions à l’échelle internationale qui ont réalisé une solution mobile pour leurs
services afin de les fournir d’une façon simple à leurs clients et reste toujours proche eux. Ainsi une
étude fonctionnelle de notre projet à travers un descriptif détaillé des besoins fonctionnels et non
fonctionnels exprimés lors de cette phase du projet. Nous avons procédé aussi à la conception de
l’application en se basant sur les diagrammes de séquences et les diagrammes de classes et clôturant
par l’architecture technique de notre application Selfcare. Les parties traitées dans ce chapitre sont
les plus cruciales pour tout développement informatique. Le prochain chapitre sera focalisé sur l’étude
technique approfondie du projet à la présentation des technologies utilisées.

39
 Chapitre 3

TECHNOLOGIE ET ENVIRONNEMENT
TECHNIQUE

Sommaire
3.1. Introduction .............................................................................................................................41
3.2. Environnement de travail ......................................................................................................41
3.2.1. Environnement matériel....................................................................................................41
3.2.2. Environnement logiciel .....................................................................................................42
a. Environnement logiciel pour le design .......................................................................................42
b. Environnement logiciel pour la conception ................................................................................42
c. Environnement logiciel pour la gestion et la planification ..........................................................42
3.3. Technologies utilisées au développement .........................................................................43
3.3.1. Introduction au développement mobile ...........................................................................43
3.3.2. Benchmarking des outils de la technologie choisi ..........................................................45
a. Ionic Vs Flutter .........................................................................................................................45
b. React Native vs. Ionic Angular ..................................................................................................46
c. Comparaison entre plugin Cordova et Capacitor ........................................................................47
3.3.3. Outils de développement adoptés.....................................................................................48
a. Outils de développement utilisés pour la création des interfaces .................................................48
b. Outils de développement utilisés pour la création de l’API .........................................................50
c. Outils de développement utilisés pour la création et la gestion de la BD .....................................50
3.4. Architectures techniques de l’application..........................................................................51
3.4.1. Architecture applicative du système métier de la société ...............................................51
3.4.2. Architecture logicielle de l’application............................................................................52
3.4.3. Architecture technique de l’application ...........................................................................53
3.5. Conclusion ...............................................................................................................................54

40
3.1. Introduction
Après avoir terminé la phase de spécification des besoins et conception, ce chapitre représente les
outils utilisés et les technologies adoptées pour répondre aux différentes exigences spécifiées dans la
phase précédente de la conception. Nous allons procéder par une description et définition théorique
de chacune des technologies, techniques, langages, frameworks et bibliothèques qui ont été utilisées
pour obtenir la solution de notre projet.

3.2. Environnement de travail

3.2.1. Environnement matériel
A cause de la pandémie COVID-19, nous avons étés obligés de quitter la société et travailler à
distance chez nous. A cet effet, nous avons travaillé le projet avec nos propre PC dont on va afficher
dans un tableau les informations sur la configuration matérielle des machines que nous avons utilisées
pour le développement de notre application.

ENVIRONNEMENT MATERIEL
Matériel 1

Nom de la machine HP G62 Notebook PC

Processeur Intel(R) Pentium(R) CPU P6100 @ 2,00GHz

Mémoire RAM 4,00 Go

Disque Dur 500,00 Go

Système d’exploitation Windows 10 Professionnel 64 bits

Carte graphique Intel(R) HD Graphics

Matériel 2

Nom de la machine Hewlett-Packard (HP)

Processeur Intel(R) Core(TM) i5-2520M 2.5GHz (4CPUs)

Mémoire RAM 6,00 Go

Disque Dur 320,00 Go

Système d’exploitation Windows 10 Pro 64 bits

Carte graphique Intel(R) HD Graphics 3000

Tableau 10 : Environnement Matériel

41
3.2.2. Environnement logiciel
a. Environnement logiciel pour le design
Photoshop est un logiciel professionnel de graphisme qui offre des possibilités
quasiment infinies. Il est utilisé par nombreux de personnes parmi eux les designers
et les professionnels du web et mobile. Ce logiciel puissant nous permet de réaliser
les maquettes de l’application, le logo et des icônes et bien beaucoup de choses,
vraiment c’est un outil très utile dans la réalisation d’un projet web ou mobile. Dans un premier temps,
nous avons eu l’intention d’utiliser Adobe Xd pour la réalisation des maquettes car c’est beaucoup
mieux dans cet environnement, mais nos ordinateurs ne supportent pas sa dernière version.

b. Environnement logiciel pour la conception

Dans notre projet, nous abordons notre conception générale du système à l’aide du langage
universelle UML (Unified Modeling Language). Ce langage nous permet de construire une
modélisation explicative, claire et compréhensible prête pour avoir une conception suffisamment
complète pour l'implémentation. Afin de construire nos diagrammes nous avons opté pour le logiciel
StarUML.
StarUML est un logiciel de modélisation UML open source, simple à l’utilisation,
ce logiciel constitue une excellente option pour une familiarisation à la modélisation.
L’outil propose les diagrammes UML nécessaires qui aident à une bonne modélisation.

c. Environnement logiciel pour la gestion et la planification

Trello comme nous avons déjà vu dans le premier chapitre, est un
outil de gestion de projet en ligne qui nous permet d’organiser nos tâches
à effectuer d’une manière visuelle. Sa structure repose sur une
organisation des projets en tableaux, où chaque tableau se compose par des colonnes listant des cartes,
chacune de ces cartes porte une tâche bien précise à effectuer. Elles sont accessibles aux membres de
l’équipe et sont mobiles d'une colonne à l'autre, traduisant leur avancement ce qui nous permet de
structurer le travail, visualiser l'activité de l'équipe et se rendre compte des progrès de l'équipe.

Gantt Project est un outil de planification qui nous permet de faire un diagramme
de Gantt. Ce diagramme est couramment utilisé en gestion de projet pour représenter
visuellement le plan de travail qu’il faut suivre durant la réalisation du projet. Chaque
tâche réprésenté dans le diagramme est matérialisée par une barre horizontale, dont la position et la longueur
représentent la date de début, la durée et la date de fin. Cet outil a besoin d’installer d’abord
l’environnement Java pour qu’il fonctionne.

42
3.3. Technologies utilisées au développement
3.3.1. Introduction au développement mobile
Le choix de langage pour le développement des applications mobiles dépend en premier lieu du
système d'exploitation avec lequel on veut travailler. A cet effet, on a trois types d'application mobile
à distinguer : applications natives, applications web mobile et applications hybrides.

Figure 21 : Type d'application mobile [W21]

 Application native :
On parle d'applications natives quand on développe une application pour une plateforme spécifique
(iOS, Android, Windows...) et on développe avec un langage spécifique par défaut utilisé par les
plateformes cibles. Par exemple, les langages Swift et Objective-C sont utilisés pour le
développement des applications du système d'exploitation iOS, Kotlin et Java sont utilisés pour le
système d'exploitation Android.

Lorsqu'on développe une application native, on peut accéder à toutes les fonctionnalités du mobile
comme les montres connectées ou la localisation GPS, la caméra, les contacts, l’agenda et d’autres.
Il offre une meilleure ergonomie adapté à chaque appareil mobile.

Il est vrai que les applications natives se caractérisent par la meilleure résolution, performance et
qualité pour une meilleure interactivité, sauf qu’elles possèdent des inconvénients aussi et l’un des
points négatifs de ce genre d'applications durant la réalisation est qu'il faut développer une version
différente pour Android et pour iOS car une application mobile iPhone ne fonctionne pas sur Android
et vise vers ça. Cela signifie qu’on doit développer spécifiquement pour chaque plate-forme, ce qui
peut entraîner un budget et une taille d'équipe plus importants. Supposant qu’on souhaite publier
l'application pour iOS et Android, le temps de développement est donc multipliée par deux et chaque
plateforme possède son langage et nécessite un apprentissage important pour avancer.

 Applications web mobile :

Les applications web mobile, appelées aussi web-application, fonctionnent très bien sur les
smartphones ou les tablettes et sont accessibles dans les navigateurs web. Ces applications sont des
sites web conçus spécifiquement pour fonctionner dans les tailles d'écran des mobiles.

43
 Ce type d'application est facile à maintenir car elle ne nécessite pas de mise à jour par l'utilisateur,
ni la mise en place de processus d'approbation. Par contre, il n'y a pas l'accès aux API natives ni à la
plateforme. Il est aussi difficile de créer des applications conviviales sur ce type.

 Applications hybrides :
Cette solution est une combinaison, d'où le nom hybride, de solutions natives et Web. Où le cœur
de l'application est écrit à l'aide des technologies Web (HTML, CSS et JavaScript), qui sont ensuite
encapsulées dans une application native. Grâce à l'utilisation de plugins, ces applications peuvent
avoir un accès complet aux fonctionnalités de l'appareil mobile tel que les applications de type natif.

Le cœur d'une application mobile hybride n'est encore qu'une application écrite en HTML, CSS et
JavaScript. Cependant, au lieu que l'application soit affichée dans le navigateur de l'utilisateur, elle
est exécutée à partir d'une application native et de son propre navigateur intégré, qui est
essentiellement invisible pour l'utilisateur. Ce code est ensuite intégré dans un wrapper d'application
natif à l'aide d'une solution comme Apache Cordova ou Capacitor. De plus, ces deux derniers ont un
système de plug-in qui permet d'étendre au-delà des limites du ‘’navigateur‘’ et d'accéder à la suite
complète des capacités de l'appareil mobile d'un utilisateur, d’où l’avantage de la simplicité et le cout
réduit du développement car avec le même code de base on peut réaliser une application pour les
différentes plateformes.

Type de l’application Native Web mobile Hybride

Complet (avec
Accès aux appareils complet limité
plugins)
Performance Elevée Moyenne à élevée Moyenne à élevée
Langage du Spécifique à la
HTML, CSS, JS HTML, CSS, JS
développement plateforme
Prise en charge
Non Oui Oui
multiplateforme
Réutilisation du code Non Oui Oui
expérience utilisateur Elevée Moyenne à élevée Moyenne à élevée

Tableau 11 : Comparaison entre les types d’application mobile

 Alors, quel est le bon choix du type pour notre application mobile ?

Toutes l’équipe a unanimement convenu que le développement d'applications hybrides pourrait

être le bon choix pour notre solution car il offre une approche de développement plus facile, des
économies de coûts et une compatibilité sur une variété de plates-formes. Bien qu'ils nécessitent un

44
peu plus de compréhension pour mailler la solution ensemble, ainsi que l'utilisation d'une bibliothèque
d'interface utilisateur pour aider à la bonne présentation de note interface utilisateur, ces défis sont
connus et peuvent être facilement résolus avec un bon Framework, comme Ionic.

3.3.2. Benchmarking des outils de la technologie choisi

Après que nous avons adopté le choix de la technologie hybride pour le développement de notre
application Selfcare, il nous reste que spécifier les langages et frameworks qui s’adaptent à ce type
de développement ainsi un plugin convenable pour l’accès à l’appareil.

a. Ionic Vs Flutter
Dans cette partie, on va citer Ionic et Flutter comme étant des outils les plus utilisés et actuels pour
développer les applications mobiles du type hybride.

 Ionic :
Le framework Ionic est une boîte à outils d'interface utilisateur UI open source pour créer des
applications mobiles et desktops performantes et de haute qualité à l'aide des technologies Web à
savoir : HTML, CSS et JavaScript avec des intégrations pour les frameworks populaires comme
Angular et ReactJs.

Ionic est conçu pour fonctionner et se comporter parfaitement sur les derniers appareils mobiles
avec les meilleures pratiques. Il est conçu pour fonctionner et s'afficher magnifiquement sur tous les
appareils et plates-formes mobiles actuels. Avec des composants prêts à l'emploi, une typographie et
un thème de base magnifique qui s'adapte à chaque plate-forme.

L’Ionic est une solution multiplateforme. En effet, on peut créer et déployer des applications qui
fonctionnent sur plusieurs plates-formes, telles que l’iOS, Android, le bureau et le Web en tant
qu'application Web progressive, le tout avec une seule base de code.

 Flutter :
Flutter est une boîte à outils d'interface utilisateur open source de Google pour créer de belles
applications compilées en mode natif pour mobile, web et bureau à partir d'une base de code unique.

Le langage principal de Flutter est le Dart, un langage peu connu datant de 2011. Bien qu'il existe
depuis un certain temps, peu de développeurs le connaissent aujourd'hui (moins de 2%, selon
l'enquête StackOverflow 2019), et c'est rarement utilisé en dehors de la communauté Flutter. Il utilise
le même compilateur Dart pour générer du JavaScript qui s'affichera dans le navigateur.

Lors de la construction pour mobile, Flutter utilise le compilateur Dart pour convertir le code Dart
en code machine natif qui s'exécutera sur la plate-forme de l'appareil, ainsi qu'un moteur de rendu
personnalisé pour afficher l'interface utilisateur dans une application mobile. Flutter propose sa
propre bibliothèque de widgets d'interface utilisateur.

45
 Un tableau ci-dessous montre les caractéristiques de l’Ionic et Flutter afin de comparer ces deux
boîtes d’outil.

Flutter Ionic
Langage du
Dart HTML, CSS, JS
développement
Éléments UI Widgets Composants Web

Accès au natif Bibliothèque de plugins natifs, utilisant Bibliothèque de plugins natifs,

API des packages natifs Flutter utilisant Cordova et Capacitor

Accès hors ligne Oui Oui

Performances
Excellentes Très bien
mobiles
Performances
Faibles Excellentes
web
Options de
Mobile, Desktop, Web Mobile, Desktop, Web, PWA
déploiement

Tableau 12 : Comparaison entre Ionic et Flutter

Ionic et Flutter sont deux technologies conçues pour la création des belles applications hautes
performances et multiplateformes, mais c'est là que s'arrêtent les similitudes. Le principe directeur de
l’Ionic est d'utiliser la plate-forme Web et d'adopter des normes ouvertes dans la mesure du possible.
La réalisation avec Ionic comprend les outils et les langages du Web, en utilisant un cadre conçu pour
offrir d'excellentes performances sur mobile, desktop et en particulier sur le Web. Flutter, en
revanche, a choisi de faire cavalier seul, créant un écosystème autonome en contradiction avec les
langages, les outils et les normes communs que l'on trouve dans le monde du développement en
général. Flutter offre de très bonnes performances sur mobile, les limitations fondamentales de son
architecture en font un mauvais choix pour les déploiements basés sur le Web.

b. React Native vs. Ionic Angular

React Native est un projet open source publié en 2015 par Facebook dans le but d'ajouter le rendu
de contrôle de l'interface utilisateur iOS et Android via React et JavaScript afin d'accélérer le
développement d'applications sur Facebook. React Native peut être intégré dans des applications
natives existantes ou utilisé pour créer des applications à partir de zéro. Étant donné que React Native
n'utilise pas d'éléments DOM pour le rendu, il nécessite l'utilisation d'une bibliothèque de rendu
différente de React basée sur le Web traditionnelle.

46
 Ionic Angular est un projet d'interface utilisateur open source et d'API native composé de
composants d'interface utilisateur multiplateforme et de fonctionnalités natives pour la création
d'applications iOS, Android à l'aide de l’Angular et de la technologie Web standard. Ionic Angular
est la version officielle Angular du framework Ionic. Et le même principe s’applique sur Ionic React.
Ionic Angular prend officiellement en charge iOS, Android, Electron et le Web à l'aide de la
technologie Progressive Web App PWA, en revanche, React Native est une bibliothèque d'interface
utilisateur avec prise en charge officielle des applications iOS et Android (il existe des projets non
officiels qui ajoutent une prise en charge de bureau et Web).

Avec React Native, les développeurs apprennent un ensemble de concepts, puis créent des écrans
d'interface utilisateur spécifiquement pour iOS et spécifiquement pour Android. Par contre, les
applications Ionic Angular exécutent la même interface utilisateur sur toutes les plates-formes, en
utilisant une conception Web réactive, des CSS et des utilitaires de détection de plate-forme pour
permettre aux développeurs de personnaliser une application pour des plates-formes spécifiques s'ils
le souhaitent. En effet, React Native adopte une approche ‘’apprendre une fois, écrire n'importe où‘’,
tandis que l’Ionic adopte une approche ‘’écrire une fois, exécuté n'importe où‘’.
Ajoutant qu’Ionic Angular utilise ce que l'équipe ionique appelle le style adaptatif pour mapper
les concepts de base de l'interface utilisateur tels que la navigation, les onglets, les barres d'outils et
les boutons aux attentes de la plate-forme, tout en permettant une personnalisation complète du
concepteur. React Native exige que les développeurs créent des écrans spécifiquement pour chaque
plate-forme.
Ionic Angular et React Native sont tous les deux un excellent choix pour la création des
applications mobiles. Pour les équipes ciblant uniquement iOS et Android et avec des développeurs
natifs plus traditionnels ou des développeurs JavaScript avancés et un référentiel existant de contrôles
natifs, React Native peut être un meilleur choix. Cela explique pourquoi React Native est populaire
auprès des startups d'applications grand public qui ont un historique de développement d'applications
natives. Et pour les équipes qui ont des compétences traditionnelles en développement Web et de ses
bibliothèques et qui souhaitent cibler le mobile et le Web, Ionic Angular sera probablement mieux
adapté. Cela explique pourquoi Ionic a réussi avec des startups et des équipes d'entreprise avec plus
d'une histoire de développement Web.

c. Comparaison entre plugin Cordova et Capacitor

Pour le choix du framework Ionic, il est nécessaire d’utiliser une bibliothèque de plugins natifs
pour que l’application puisse accéder aux fonctionnalités du téléphone. Pour se faire on a le choix
d’utiliser l’apache cordova ou bien capacitor que nous allons les détailler pour la suite.

47
 Capacitor :
Capacitor est un projet open source qui exécute des applications Web modernes en natif sur iOS,
Android, Electron et Web en utilisant la technologie Progressive Web App, tout en fournissant une
interface puissante et facile à utiliser pour accéder aux SDK natifs et aux API natives sur chaque
plate-forme.

À l'aide de Capacitor, les développeurs peuvent créer une application et cibler un ensemble d'API,
quelle que soit la plate-forme sur laquelle l'application s'exécute, par opposition à la gestion de
plusieurs API pour chaque plate-forme cible. Cela signifie que, par exemple, l'accès à la caméra utilise
le même code sur iOS / Android que sur Electron et sur le Web. Cela facilite la création d'une
application Web qui s'exécute en mode natif sur mobile, sur ordinateur et sur le web en tant
qu'application web progressive. D’une manière simple, Capacitor fournit un ensemble d'API cohérent
et axé sur le Web qui permet à une application de rester aussi proche que possible des normes Web,
tout en accédant à de riches fonctionnalités de périphérique natif sur les plates-formes qui les prennent
en charge.

Il est important de mentionner que Capacitor peut fonctionner avec n'importe quel projet web, il
n'est pas spécifique à Ionic et il est indépendant de sa version, il fonctionne avec Ionic v1 à v5 et tout
ce qui viendra à l'avenir. Il peut être utilisé comme un point d'accès à tout projet JavaScript moderne
existant.

 Cordova :
Apache Cordova est un framework de développement mobile open-source. Il permet d'exploiter
les technologies Web courantes telles que HTML5, CSS3 et JS pour développer des applications
mobiles multiplateformes, évitant ainsi l'utilisation des langages natifs propres aux différentes plates-
formes. Les applications s'exécutent dans des cadres ciblés selon chaque plate-forme, elles s'appuient
sur des API conformes aux standards permettant l'accès aux capteurs de chaque appareil, aux données
ainsi qu'à l'état du réseau.

Apache Cordova s’utilise pour étendre une application à plusieurs plateformes sans avoir à ré-
implémenter celle-ci dans chacun des langages et avec chacun des outils propres aux différentes
plates-formes. Ainsi la combinaison de composants de l'application native avec une webview (fenêtre
de navigateur spécial) qui peut accéder aux API de niveau périphérique. En outre, une interface de
plugins est disponible à Cordova et les composants natifs pour communiquer entre eux, cela permet
d'invoquer le code natif de JavaScript.

3.3.3. Outils de développement adoptés

a. Outils de développement utilisés pour la création des interfaces

48
 Ionic
A travers la recherche et l’étude technique que nous venons d’effectuer, nous avons choisi le type
de développement hybride afin de bénéficier de la compatibilité sur une variété de plates-formes, et
on va travailler avec la boîte d’outil Ionic en utilisant le framework Angular.

Bref, Ionic est un cadre de développement de source libre qui

permet de concevoir des applications mobiles, web et desktop grâce
aux technologies web HTML, CSS et JavaScript, bâti sur les cadres
Angular, ReactJs ou bien VueJs.

Ionic est un framework à base des tags comme HTML donc c’est simple et compréhensible dans
son utilisation, il propose une gamme de composants bien stylé est qui sont adapté selon le système
d’exploitation utilisé (iOS ou bien Android).

 Angular
Pour le choix précédent nous avons choisi la combinaison Ionic/Angular, pour bénéficier par la
suite des composants d’Angular Material.

Angular est un framework JavaScript côté client qui permet de réaliser des
applications de type "Single Page Application". Il est basé sur le concept de
l'architecture MVC (Model View Controller) qui permet de séparer les données, les
vues et les différentes actions que l'on peut effectuer.

 Angular Material
Material est un module d'Angular, c'est un module d'intégration qui permet
d'obtenir facilement des composants responsives qui sont prêts à l’utilisation, il
suffit de les personnaliser. C’est comme le principe de Bootsrap pour l’utilisation.

 TypeScript
C’est un langage open source, développé comme étant un sur-ensemble de
JavaScript. C’est-à-dire, c’est que tout code exécutable en JavaScript l’est aussi en
TypeScript. Ce langage introduit des fonctionnalités comme la programmation
orientée objet et bien autres, etc. Pour pouvoir bénéficier de ces fonctionnalités
aucune librairie n’est requise. Il suffit d’utiliser l’outil de compilation de TypeScript pour le transpiler
(C’est le fait de compiler le code source d’un langage informatique quelconque en un autre langage)
en JavaScript car les navigateurs ne comprend pas TypeScript c’est pourquoi ce langage subit la
compilation en JavaScript. Ainsi, le code exécuté sera un équivalent JavaScript du code TypeScript
compilé.

49
 CSS
CSS désigne Cascading Style Sheets. Il s'agit d'un langage de style dont il
s’intéresse à la mise en forme du contenu intégré avec du HTML. Avec CSS on peut
faire beaucoup de choses, c’est un outil indispensable dans les technologies web qui
nous permet de mette le design de nos page web. Il est devenu couramment utilisé
dans la conception des sites web et bien pris en charge par les navigateurs web.

 Cordova
Apache Cordova est un framework de développement
mobile open-source. Il permet d'exploiter les technologies
Web courantes telles que HTML5, CSS3 et JS pour développer
des applications mobiles multiplateformes, évitant ainsi l'utilisation des langages natifs propres aux
différentes plates-formes. Son rôle est de permettre l'accès aux capteurs de chaque appareil, aux
données ainsi qu'à l'état du réseau pour des utilisations spécifiques dans l’application à développer.

b. Outils de développement utilisés pour la création de l’API

[Link] est une plateforme logicielle libre en JavaScript orientée vers les
applications réseau. Concrètement, [Link] est un environnement bas niveau
permettant l’exécution de JavaScript côté serveur.

Dans notre application nous avons créé une API à l’aide du NodeJs, afin de gérer le côté serveur de
l’application. Son développement est fait grâce à l’utilisation du framework Express.

Express est une infrastructure d'applications Web [Link] flexible qui fournit un ensemble de
fonctionnalités robuste pour les applications modernes Web et mobiles. Grâce à une gamme de
méthodes utilitaires HTTP et de middleware, la création d'une API devient simple et rapide.

c. Outils de développement utilisés pour la création et la gestion de la BD

MongoDB est un système de gestion de base de données orienté documents qui
appartient à la famille des SGBD No SQL. En revanches, dans un système de base
de données relationnelles les données sont stockées par ligne dans des tables ce
qui nécessite de faire des jointures sur plusieurs tables afin de tirer des
informations depuis la base de données. Dans MongoDB, les données stockées
sont modélisées sous forme de document sous un format JSON.

Dans un premier temps, nous avons créé notre base de données sur nos environnements matériels
mais l’accès aux données ne se fait que localement dans nos ordinateurs. C’est pourquoi on a pensé
à la solution MongoDB Atlas pour que l’accès soit en ligne. MongoDB fournit un service Cloud où
chaque user peut créer un compte gratuitement avec 512MB de stockage, pour plus d’espace il doit

50
passer en mode payement. Grâce à cette utilisation du Cloud, on a la possibilité d’envoyer et/ou
recevoir des données en ligne.

3.4. Architectures techniques de l’application

3.4.1. Architecture applicative du système métier de la société

Figure 22 : architecture applicative du système métier d’Al Amana

Le système IBM AS400 est un mini-système IBM fiable, facile à gérer, et doté d'une base de
données intégrée. Cette machine est couramment utilisée dans des environnements de production ou
de gestion comprenant de 20 à quelques milliers d'utilisateurs. L’AS400 fonctionne avec le système
d'exploitation OS400 qui est caractérisé par son indépendance technologique, en effet l’architecture
AS400 assure une réelle indépendance entre la partie matérielle et le système d'exploitation OS400.
EvolanPack est constituée sur la base d'un progiciel bancaire unique totalement intégré, mais
distribuée sous forme de modules pouvant fonctionner de façon indépendante en fonction des besoins.
Al Amana a adopté Evolan pour le suivi des prêts et pour gérer des bases de données. Les données
sont saisies via une interface web qui alimente en temps réel la base de données interne.
L’application Selfcare envoie ses requêtes vers le Serveur HTTP et c’est lui-même qui décide quel
Web service est censé à traiter la requête. Premièrement toutes les données sont enregistrées dans la

51
base de données externe. Ensuite, une fois validées par l'EvolanPack, elles seront directement
transmises vers la base de données interne.

3.4.2. Architecture logicielle de l’application

Figure 23 : Architecture Logiciel de Selfcare

Ionic & Angular : C'est la partie où se trouve le code Front-end de Selfcare. L'application elle-
même est mise en œuvre sous la forme des pages web et des services web, par défaut un fichier local
nommé [Link], qui fait référence à des codes CSS/SCSS, Ionic, HTML et TypeScript ou autres
ressources nécessaires à son fonctionnement organisé avec le Framework Angular. Ce conteneur
contient un fichier très important le fichier [Link] qui fournit au Cordova des informations sur
l'application et spécifie les paramètres affectant son fonctionnement sur l’appareil Mobile. [W22]

Cordova & Plugins : Les plugins font partie intégrante de l'écosystème de Cordova. Ils fournissent
une interface permettant à Cordova et aux composants natifs de communiquer entre eux et de se lier
à des API des appareils Mobile. Cela permet d'invoquer du code natif à partir de TypeScript. Ces
plugins de base permettent à l’application d'accéder aux fonctionnalités des appareils Mobile. [W22]

Mobile OS : Ionic est un Framework d'application multiplateforme, Il permet de construire des

applications hybrides de type natif pour Android et iOS ainsi que des applications web progressives.

52
3.4.3. Architecture technique de l’application

Figure 24 : Architecture technique de Selfcare

NodeJs & ExpressJs : Pour tester les services sur lesquels repose notre application, nous avons
utilisé un ensemble de micro services de type REST construits avec ExpressJs qui est un Framework
d'application web de NodeJs qui fournit un ensemble robuste de fonctionnalités pour les applications
web et mobiles. L’application communique avec la passerelle API Gateway qui communique à son
tour avec l'API souhaitée du micro service.

Heroku Cloud : Heroku est une plate-forme en tant que service (PaaS) qui nous permet de créer,
d'exécuter et d'exploiter nos APIs REST entièrement dans le Cloud, de sorte que lorsque l'application
est exécutée sur un appareil mobile connecté à l’internet, les requêtes provenant d’elle sont envoyées
aux services déployés sur Heroku.

MongoDB Atlas : MongoDB est un programme de base de données multiplateforme orienté vers
les documents tandis que MongoDB Atlas est le service mondial de base de données dans le Cloud
pour les applications web et mobile. Il nous a donné la possibilité de stocker, retirer et récupérer des
données tout en testant notre application en ligne.

53
3.5. Conclusion
Tous au long de ce chapitre, nous avons mené une étude de l’environnement de notre projet à
travers un descriptif des technologies et outils qu’on a utilisé durant la réalisation de ce projet. Le
prochain chapitre sera le dernier volet de ce rapport où nous allons se focaliser sur les résultats et
l’implémentation de nos travaux.

54
 Chapitre 4

MISE EN OEUVRE DE LA SOLUTION

Sommaire
4.1. Introduction .............................................................................................................................56
4.2. Présentation des tâches du workflow .................................................................................56
4.3. Partie du design de l’application .........................................................................................59
4.3.1. Design des maquettes........................................................................................................59
4.3.2. Création logo de l’application ..........................................................................................60
4.4. Travail réalisé de l’application ............................................................................................61
4.4.1. Ticket R01 : Authentification ...........................................................................................61
4.4.2. Ticket R02 : Inscription ....................................................................................................62
4.4.3. Ticket R03 : Home ............................................................................................................62
4.4.4. Ticket R04 : About ............................................................................................................63
4.4.5. Ticket R05 : Mon compte .................................................................................................63
4.4.6. Ticket R06 : Profil.............................................................................................................64
4.4.7. Ticket R07 : Notifications ................................................................................................64
4.4.8. Ticket R08 : Localisation des agences .............................................................................65
4.4.9. Ticket R09 : Réclamations ...............................................................................................65
4.4.10. Ticket R10 : Rendez-vous ................................................................................................66
4.4.11. Ticket R11 : Actualités et Evénement .............................................................................66
4.4.12. Ticket R12 : Histoires et Témoignages............................................................................67
4.4.13. Ticket R13 : FAQ ..............................................................................................................67
4.4.14. Ticket R14 : Autres Services ................................................................................................68
4.4.15. Ticket R15 : Mes Prêts......................................................................................................69
4.5. La validation des besoins non fonctionnels de Selfcare .................................................71
4.6. Conclusion ...............................................................................................................................72

55
4.1. Introduction
Cette partie, de la mise en œuvre du projet, constitue le dernier volet du rapport. Après avoir
terminé la phase de la spécification et la conception, la phase du choix des technologies et
environnements techniques à utiliser, il nous reste qu’à illustrer les fonctionnalités implémentées pour
notre application Selfcare en montrant quelques interfaces réalisées tout en expliquant comment ces
fonctionnalités répondent aux différents besoins des clients.

4.2. Présentation des tâches du workflow

Comme nous avons déjà expliqué le principe de la méthode de gestion Agile-Kanban, dans cet axe
nous allons dévoiler les grandes fonctionnalités réalisées de ce projet.

L’idée du workflow Kanban est de créer un ou des tableaux dont les colonnes représentent des
listes d’activités séquentielles et dans lesquelles se trouvent des cartes/tickets qui représentent des
tâches spécifiques à réaliser, et qui circulent d’une colonne à une autre afin de savoir facilement à
quelle étape du processus se trouve chacune des tâches.

Le workflow de notre projet Selfcare sera présenté dans le tableau ci-dessous, d’une manière
simple, en listant l’Id, le titre et l’illustration de chacune des tâches réalisées ou en cours de réalisation
selon les champs suivants :

 ID : C’est identifiant unique pour chaque ticket.

 Ticket : C’est le titre de la tâche à faire.
 Illustration : C’est une image qui représente le ticket dans le workflow.

ID Ticket Illustration

Titre : Réalisation des Maquettes

Nb de tâches : 05
D01
Complexité : Difficile
Etape : Fini

Titre : Création logo de l'application

Nb de tâches : 02
D02 Complexité : Facile
Etape : Fini

Titre : Authentification
Nb de tâches : 05
R01
Complexité : Difficile
Etape : Fini

56
 Titre : Inscription
Nb de tâches : 04
R02
Complexité : Facile
Etape : Fini

Titre : Accueil / Home

Nb de tâches : 04
R03
Complexité : Moyenne
Etape : Fini

Titre : A propos / About

Nb de tâches : 01
R04
Complexité : Facile
Etape : Fini

Titre : Mon Compte

Nb de tâches : 03
R05
Complexité : Facile
Etape : Fini

Titre : Profil
Nb de tâches : 05
R06
Complexité : Moyenne
Etape : Fini

Titre : Notification
Nb de tâches : 04
R07
Complexité : Difficile
Etape : Fini

Titre : Localisation des agences

Nb de tâches : 04
R08 Complexité : Moyenne
Etape : Fini

Titre : Réclamation
Nb de tâches : 04
R09
Complexité : Moyenne
Etape : Fini

57
 Titre : Rendez-vous
Nb de tâches : 06
R10
Complexité : Moyenne
Etape : Fini

Titre : Actualités et Evénement

Nb de tâches : 04
R11
Complexité : Moyenne
Etape : Fini

Titre : Histoires et Témoignages

Nb de tâches : 04
R12
Complexité : Moyenne
Etape : Fini

Titre : Foire Aux Questions

Nb de tâches : 04
R13
Complexité : Moyenne
Etape : Fini

Titre : Autres Services

Nb de tâches : 10
R14
Complexité : Difficile
Etape : Test

Titre : Mes Prêts

Nb de tâches : 10
R15
Complexité : Difficile
Etape : Test

Titre : Mes Prêts

Nb de tâches : 03
R16 Complexité : Moyenne
Etape : Fini

Tableau 13 : Les tickets utilisés dans le workflow sur Trello

Tous ces tickets sont gérés et présentés sur la plateforme Trello comme il est indiqué dans le
premier chapitre dans la partie de la planification du projet. Notre workflow sur Trello est structuré
en quatre colonnes (To Do, In Progress, Test, Done) qui représentent les étapes dont les tickets se
déplacent durant leur réalisation.

58
4.3. Partie du design de l’application
4.3.1. Design des maquettes
A l’aide de l’Adobe Photoshop, nous avons concrétisé nos idées en réalisant ces interfaces ci-
dessous qui représentent le design de notre application Selfcare. Cette maquette est un prototype
visuel qui nous donne une vision sur les scénarios d’usage déjà déterminés dans les chapitres
précédents. Il se peut que dans le développement sera un peu différent selon la possibilité de
manipulation du code, mais cette partie est indispensable dans le processus du développement car il
nous permet d’avoir un aperçu plus réaliste de notre futur application.

Figure 25 : Design de la maquette 1 du Selfcare

59
 Figure 26 : Design de la maquette 2 du Selfcare (Suite)

4.3.2. Création logo de l’application

Il est important aussi de créer un logo spécifique à notre application Selfcare. Cette création est
basée sur un choix des objets, les couleurs et la police à utiliser à l’aide bien sûre des outils intégrés
dans l’Adobe Photoshop. Le logo est sous la forme PNG et PSD.

60
 Figure 27 : Logo de l'application Selfcare

4.4. Travail réalisé de l’application

Jusqu’à maintenant, nous avons bien étudié et illustré le projet à travers la spécification des
besoins, la conception détaillé des fonctionnalités à réaliser, le choix de la méthode de gestion à
suivre, le choix des technologies et outils à adopter, le design du logo et des interfaces à développer,
etc. Et maintenant il nous reste que présenter le résultat de notre travail de développement de
l’application Selfcare qui sera l’objectif de cet axe.

Durant le développement de l’application nous avons changé un peu l’apparence des interfaces sur
ce qui est présenté dans le design des deux maquettes précédentes. Autrement dit, nous avons réalisé
d’une manière un peu différente l’apparence de quelques composants dans les interfaces de
l’application et cela revient à la difficulté de manipulation de certains composants qui sont prêts à
l’utilisation proposés par la communauté de l’Ionic et de l’Angular Material.

La présentation des résultats obtenus du développement sera traitée selon les tâches de réalisation
décrites dans les cartes/tickets du workflow.

4.4.1. Ticket R01 : Authentification

Nous avons réussi de créer une authentification par un email et un mot de passe pour accéder à
l’application. Cette dernière vérifie si le format de l’email entré est correct sinon le champ sera mis
en rouge, ensuite ces identifiants sont envoyés à l’API afin de vérifier leur existence dans la base de
données. La réponse sera par l’accès au compte personnel Selfcare ou bien un message d’erreur qui
sera survenu.
Nous avons mis aussi un exemple simple de trois sliders (des interfaces qui s’affiche en début lors
de la première utilisation de l’application) avant l’apparition de la page d’authentification.

61
 Figure 28 : Sliders et Authentification

4.4.2. Ticket R02 : Inscription

Dans le cas d’un nouvel utilisateur qui a l’intention d’ouvrir un compte
chez la société à travers l’application mobile, une option d’inscription est
intégrée via un bouton dans l’interface d’Authentification. Il suffit de
remplir tous les champs donnés par les informations demandées et les
envoyer. Ces informations seront transmises à la base de données pour les
sauvegarder et les traiter, ensuite il se peut que le nouvel utilisateur reçoive
la confirmation de son inscription et il va avoir un mot de passe pour qu’il
puisse accéder à son compte Selfcare.

Figure 29 : Page d'Inscription

4.4.3. Ticket R03 : Home

L’interface d’accueil est celle qui englobe tous les accès aux
services et fonctionnalités de l’application. A partir de n’importe
quelle fenêtre de l’application on a la possibilité de retourner à
l’interface d’Accueil en cliquant sur l’icône à gauche du tabs qui se
trouve en bas de l’interface.
Figure 30 : Page d'Accueil

62
4.4.4. Ticket R04 : About
Cette page contient un texte à propos de l’application et de la société. Aussi, il est possible de
retourner à cette interface depuis n’importe quelle fenêtre de l’application en cliquant sur -A Propos-
situé en bas de l’interface.

Figure 31 : Page d'A propos

4.4.5. Ticket R05 : Mon compte

Cette page englobe les accès au profil, changement de la langue, contact lors d’un besoin d’aide,
note de l’application sur le store et pour se déconnecter de l’application.

Figure 32 : Page de Mon Compte

63
4.4.6. Ticket R06 : Profil
Est une interface pour consulter toutes les informations de chaque user qui sont groupées selon
trois catégories : informations personnelles, contacts et localisation. Option de mis à jour est
disponible dans le cas de besoin. En plus, un avatar qui remplace l’image personnelle du client et qui
se change selon son sexe.

Figure 33 : Page de Profil

4.4.7. Ticket R07 : Notifications

Cette fonctionnalité est un peu complexe dans son développement, mais elle est importante de
l’intégrer à l’application grâce à ses multiples utilisations dans l’application. L’user sera notifié dans
le cas des nouveautés sur l’application, le cas d’un rendez-vous, le cas d’un payement… Les
notifications reçues seront listées dans l’interface Notifications.

Figure 34 : Page des Notifications

64
4.4.8. Ticket R08 : Localisation des agences
Dans cette page l’utilisateur sélectionne la ville et l’application à son tour prend ce choix et
l’envoie à l’API. Cette dernière retourne comme résultat des cartes qui contiennent l’adresse, le nom
de l’agent et son numéro qui se situe dans la ville sélectionnée. Grâce à un plugin dans cordova,
l’utilisateur peut passer l’appel à l’agent depuis l’application en cliquant sur son numéro.

Figure 35 : Page de Localisation des Agences

4.4.9. Ticket R09 : Réclamations

Chaque utilisateur a la possibilité de faire une réclamation en écrivant l’objet de la réclamation
puis l’envoyer. L’API reçoit la réclamation envoyée par l’utilisateur et le met à la base de données
pour qu’elle soit traitée après.

Figure 36 : Page de Réclamation

65
4.4.10. Ticket R10 : Rendez-vous
Cette page liste l’historique des rendez-vous déjà effectués. A chaque fois que l’application affiche
une notification d’un rendez-vous, son objet contient deux choix soit de confirmer ou de reporter.
Dans le premier choix un rendez-vous qui s’ajoute à l’historique, et dans le deuxième choix une autre
page particulière sera affichée qui permet de fixer les paramètres (date et heure) ensuite enregistrer
ce nouveau rendez-vous dans l’historique, et faire une mise-à-jour au niveau de la base de données
sur les anciens paramètres.

Figure 37 : Pages des Rendez-vous

4.4.11. Ticket R11 : Actualités et Evénement

Tous les événements et actualités de la société seront situés dans cette page d’une manière réduite,
et le détail de chaque événement ou actualité sera accessible en cliquant sur le lien En Savoir Plus.

Figure 38 : Page d'Evénements et Actualités

66
4.4.12. Ticket R12 : Histoires et Témoignages
Cette page à contient d’une manière réduite les histoires de réussites des micro-entrepreneurs qui
appartiennent à la grande famille des clients de Al Amana Microfinance. Pour découvrir en détail
l’histoire et le contact de chaque témoin il suffit de cliquer sur Voir Son Profil qui dirige vers une
autre page pour afficher ce détail.

Figure 39 : Pages des Histoires et Témoignages

4.4.13. Ticket R13 : FAQ

Cette page a pour but de répondre aux questions les plus fréquentes. Si une réponse n’existe pas
dans cette liste, il y a la possibilité de poser la question en dessous de l’interface il suffit de scroller
jusqu’au bout.

Figure 40 : Page de Foire Aux Questions

67
4.4.14. Ticket R14 : Autres Services
Cette rubrique contient une gamme de services que l’association offre à ses clients, à savoir :
 Tayssir Al Amana  Appui A La Commercialisation
 Hissab Bikhir  Participer Au Concours
 Transfert d’Argent  Showroom Vente En Ligne
 Accompagnement Et Formation

Figure 41 : Rubrique des autres services

68
4.4.15. Ticket R15 : Mes Prêts
Le service des prêts offert par la société est géré par cette rubrique. Une interface qui affiche tous
les micro-crédits qui sont groupés en prêts actifs, demandes en cours et prêts remboursés. L’utilisateur
peut cliquer sur chaque icône de crédit pour afficher son avancement détaillé et son historique de
remboursement.

Figure 42 : Pages de Mes Prêts

L’utilisateur possède l’option de faire diverses opérations sur les prêts. Lorsqu’il clique sur le
bouton du trois points verticaux qui se situe en haut à droite dans l’interface de Mes Prêts, un menu
s’affiche et contient des items sous forme des boutons qui permettent d’effectuer les opérations
suivantes :

 Demander un nouveau prêt

Figure 43 : Pages de demande d'un nouveau prêt

69
 Dans cette opération, l’utilisateur va suivre ce processus en dessus pour faire une demande d’un
nouveau prêt et un item sera ajouté dans l’interface de Mes Prêts sous le groupe Demande En Cours
qui permet à l’user de suivre l’état d’avancement de sa demande.

 Substituer un ou plusieurs prêts

L’utilisateur possède l’option de substituer un ou plusieurs de ses prêts. Toutes les étapes de cette
opération sont illustrées dans la figure ci-dessous.

Figure 44 : Pages de l'opération Substituer

 Reporter un ou plusieurs prêts

Pour que l’utilisateur reporte un ou plusieurs de ses prêts il doit faire une demande. Pour le faire il
suffit de suivre les étapes illustrées dans la figure ci-dessous.

Figure 45 : Pages de l'opération Reporter

70
 Demander un payement anticipé
Cette opération permet à l’utilisateur le droit à anticiper le payement de ses prêts, il suffit de faire
la demande qui est clarifiée dans la figure qui suit.

Figure 46 : Pages de la Demande Anticipé du Payement

4.5. La validation des besoins non fonctionnels de Selfcare

En ce qui concerne l’ergonomie et la convivialité, les composants d’Angular Material et ceux
proposés par la communauté d’Ionic, nous ont permis d’améliorer considérablement l'interface de
l'utilisateur. En effet, dans une application hybride comme la nôtre, ces outils graphiques lui donnent
l’aspect d’une application mobile native.

Quant à la maintenance et l’évolution, l’implémentation de l’architecture MVC pour le côté Front-

End et le côté Back-End nous a aidé à séparer l'interface utilisateur de la logique du programme et de
ses données, ce qui est mieux pour la testabilité de l'application. D'autre part, la mise en œuvre de
l'architecture des microservices au Back-End nous a permis également de nous adapter plus
rapidement aux changements de code.

Pour la rapidité et la robustesse, NodeJS a fait ses épreuves dans ce côté. En effet, cette technologie
est rapide car elle utilise la version 8 du moteur développé par Google qui compile JavaScript en code
machine natif. Grâce à NodeJS la lecture et l'écriture dans la base de données s'effectuent rapidement.

La figure ci-dessous représente un exemple de vitesse de réponse pour un appel vers l’API
authentification.

71
 Figure 47 : Panneau de chronométrage pour la réponse à un appel vers l'API

Concernant la sécurité, nous avons adopté le standard des « JSON Web Token » : le jeton JWT est
généré par le serveur lors de l’authentification d’un utilisateur, et qui est ensuite transmis à
l’application pour le stocker et lui rendre avec chaque requête HTTP au serveur, ce qui lui permettra
d’identifier l’utilisateur. Pour ce faire, les informations contenues dans le jeton sont signées à l’aide
d’une clé privée détenue par le serveur.

Finalement, pour les contraintes de matériel, Cordova et Ionic jouent un rôle important dans
l'extension de notre application dans diverses plateformes du mobile (Android, iOS et autres).

4.6. Conclusion
Dans cet ultime chapitre nous avons présenté les résultats du projet en illustrant cela à travers des
captures d’interfaces de notre application Selfcare. En plus, il y en a autres illustrations qui ne sont
pas présenté dans ce chapitre, à propos de la base de données fait par Mongo Atlas et les tâches suivis
pour créer chaque fonctionnalité décrites sur Trello. Le test des résultats est fait par plusieurs manières
à l’aide des outils suivants : POSTMAN, Chrome Developer Tools et sur nos propre smartphone.

72
 Conclusion Générale Et Perspective

Dans le cadre de ce Projet de Fin d’études, notre mission est déterminée au développement des
diverses fonctionnalités d’une solution mobile dénommée Selfcare qui fait partie du domaine de la
microfinance. Cette solution vient dans un contexte de digitalisation du processus de gestion des
micro-crédits et autres service supplémentaires pour les clients de l’association Al Amana
Microfinance. Notre contribution dans ce projet a commencé par une étude de benchmarking des
outils existants sur le marché mondial, ensuite nous avons entamé la spécification des besoins et la
conception, le design des maquettes, et finalement nous avons commencé à implémenter les
fonctionnalités en s’appuyant sur le processus de développement Agile-Kanban.

Ce stage de fin d’étude nous a été très bénéfique, il nous a aidé à projeter des connaissances
acquises durant notre formation d’ingénieur à l’Institut National des Postes et Télécommunications
(INPT) et nous a permet de s’auto-former sur de nouvelles technologies. Une forte valeur ajoutée
réside dans l’apprentissage des nouveaux concepts et outils mobiles qui sont actuellement la tendance
du domaine de développement, ainsi que l’adoption d’une méthodologie agile qui nous a permis une
marge de flexibilité pour innover et créer plus de valeur. Encore plus, cette expérience nous a aidé à
intégrer le monde professionnel, l’interaction et le travail au sein d’une équipe qui ont rendu ce projet
une expérience professionnelle très réussie.

La solution Selfcare n’est pas encore terminée en terme de développement vu la voluminosité de

l’ensemble des fonctionnalités qui nécessitent une durée qui dépasse le cadre de six mois. Il y aura
une amélioration au niveau des interfaces utilisateurs ainsi l’accomplissement des fonctionnalités qui
manquent.

73
 Bibliographie

[1] Al Amana Microfinance,

RAPPORT D’ACTIVITÉ 2018, PAGE 10
Edition, 30 octobre 2019

[2] Hafsa ZIDANI,

Projet de Fin d’Études « La Maintenance Evolutive De L'application Web Wis Manager »
Document Institut National des Postes et Télécommunications (INPT – Rabat), MAROC-2019.

74
 Webographie

[W1] [Link] | (consulté le 16 juin 2020)

[W2] [Link]
BQzFqZa1mLeXeTckctM6vrP-
Qg:1592010782767&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjru72pzv3pAhWl3OAKHWXUA_4Q
_AUoAXoECA0QAw#imgrc=E8e7-8GjyAygkM | (consulté le 18 juin 2020)

[W3] [Link] | (consulté le 24 juin 2020)

[W4] [Link] | (consulté le 24 juin 2020)
[W5] [Link] | (consulté le 24 juin 2020)
[W6] [Link] | (consulté le 24 juin 2020)
[W7] [Link] | (consulté le 25 juin 2020)
[W8] [Link] | (consulté le 25 juin 2020)
[W9] [Link] | (consulté le 25 juin 2020)
[W10] [Link] | (consulté le 25 juin 2020)
[W11] [Link] | (consulté le 25 juin 2020)
[W12] [Link] | (consulté le 25 juin 2020)
[W13] [Link] | (consulté le 25 juin 2020)
[W14] [Link] | (consulté le 25 juin 2020)
[W15] [Link] | (consulté le 25 juin 2020)
[W16] [Link] | (consulté le 25 juin 2020)
[W17] [Link] | (consulté le 28 juin 2020)
[W18] [Link] | (consulté le 28 juin 2020)
[W19] [Link] | (consulté le 29 juin 2020)
[W20] [Link] | (consulté le 29 juin 2020)
[W21] [Link]
native-hybride-ou-web-cross-plateforme-quel-choix/ | (consulté le 9 juillet 2020)
[W22] [Link] | (consulté le 15
juillet 2020)

75
 Travail Réalisé Par

BADDOU Ayoub Farah Redouane

Elève Ingénieur Elève Ingénieur
INPT INPT

Membres du Jury

ALLAKI Driss BARAKAT Hicham

Professeur à l’INPT Professeur à l’INPT
INPT INPT

KHALLAAYOUNE Jamal
Professeur à l’INPT
INPT

Encadrant Externe

EL KORICHI Mostafa
WebMaster
Al Amana microfinance

76
77