Rapport de stage

De fin de première année

Génie Logiciel

Réalisation d'une application mobile pour

suivre les lavagistes en temps réel

Réalisé par : Encadré par :

Yasser LATRECH Mlle.Khadija BENNOUNA

Soutenu le: 13/09/2022

Membres de jury :
• Pr. Y. Lefdaoui
• Pr . R. ALAOUI

Année Universitaire : 2021-2022

1
 Tables des matières :

Remerciement :..........................................................................................................................4

Résumé : ....................................................................................................................................5

Introduction générale :..............................................................................................................6

Chapitre I : Contexte générale du projet: ................................................................................7

1. La société Devstter :........................................................................................................ 7

1.1 Présentation : ............................................................................................................7
1.2 Ses activité : .............................................................................................................
Saisissez du texte 7 ici
1.3 Étude de l’existence :.............................................................................................. .9
2. Présentation du projet :...................................................................................................10
2-1 Problématique :....................................................................................................... 10
2.2 Solution proposée :...................................................................................................10
3. Plan de travaille :.............................................................................................................11

Chapitre II : Analyse et conception : ......................................................................................12

1. Besoins fonctionnels et techniques :..............................................................................12

1.1 Besoin fonctionnel :.................................................................................................12
1.2 Besoin technique :...................................................................................................14
1.2.1 Langages utilisés :...........................................................................................14
1.2.2 outils de développement .................................................................................16
2. Conception :....................................................................................................................17
2.1 Identification des acteurs :.......................................................................................17

Chapitre III : Interfaces de l'application réaliser :.................................................................20

1. Application Lavagekom :...............................................................................................20

Conclusion :............................................................................................................................27

2 Saisissez du texte ici

 • Liste des figures

Figure 1: Interface d’accueil .................................................................................................... 20

Figure 2 : Interface de réservation ............................................................................................ 21
Figure 3 : Interface profile........................................................................................................ 22
Figure 4 : Interface liste des packs ........................................................................................... 23
Figure 5 : Interface recherche................................................................................................... 24
Figure 6 : Interface menu ......................................................................................................... 25
Figure 7 : Interface map ........................................................................................................... 26

• Liste des tables

Tableau 1: Fiche technique de l’agence ................................................................................... 07

Tableau 2 : Acteurs et rôles de mon projet ............................................................................... 18

• Liste des acronymes

Liste tous les acronymes utilisés dans le rapport avec leur signification dans un tableau
sans bordure

DUT Diplôme universitaire de technologie

JSON JavaScript Object Notation
SaaS Software as a Service

3
 • Remerciements

Je tiens à remercier toutes les personnes qui, grâce à leur collaboration, ont rendu possible la
réalisation de ce mémoire.

Je veux tout particulièrement :

Remercier vivement Monsieur Mohammed Hammani et Monsieur Hamza

MERIOUT les Directeurs de la société DEVSTTER pour m’avoir accueilli pour
effectuer mon stage, m’offrant ainsi La possibilité d’acquérir de nouvelles expériences
professionnelles et pratique très riches.

Aussi, Je souhaite exprimer mes profondes gratitudes et mes vifs

remerciements à : l’ensemble du corps professoral du département informatique de
l'Ecole Supérieure de Technologie de Salé qui m'a présenté toutes les informations et
l'aide nécessaires pour mener à bien mon stage.

Mes vifs remerciements s'adressent également aux membres du jury : Pr. Y.

Lefdaoui et Pr . R. ALAOUI , pour nous avoir honorés en acceptant d’évaluer et de
juger ce travail.

Tous mes professeurs et le corps administratif de l'Ecole Supérieure de

Technologie , pour l'effort qu'ils ont fourni pour nous permettre de passer une
formation agréable.

Et enfin à tous mes amis et collègues de la promotion pour l'esprit qui a animé
nos relations durant nos études.

4
 • Résumé

Le présent rapport est le fruit du travail réalisé pendant mon stage de fin de premère
année au sein de DEVSTTER, visant la fin de première année de DUT .

Au cours de ces 04 semaines de stage j'ai travaillé sur un projet qui consiste à
développer une application mobile dont l’objectif est la suivre les lavages mobiles sur la carte
en temps réel.

5
 • Introduction générale

Dans le cadre de fin d'année à l'Ecole Supérieure de Technologie à Salé, nous sommes
amenés à faire un stage dans l’entreprise. L’objectif primaire de ce stage est la prise de
contact avec le milieu professionnel et la mise en pratique des connaissances acquises durant
la formation de DUT.

J'ai effectué mon stage chez DEVSTTER où ils m'ont proposé de construire une
application mobile SAAS pour surveiller les lavages mobiles . Cette application vise à donner
au consommateur la possibilité de voir tous les lavages mobiles actifs sur la carte avec une
description qui comprend des informations supplémentaires sur chaque lavage (Prix, liste des
packs, produits utiliser, etc.).

Ce rapport décrit et illustre les différentes phases de notre travail. L'objectif est de
donner un aperçu complet et détaillé des travaux réalisés et de mettre en évidence les
solutions aux difficultés rencontrées. Et pour cela j'ai écrit le rapport de trois chapitres :

• Le premier chapitre sera consacré à la Présentation de l’entreprise et à la

problématique à laquelle répond le projet toute en présentant le contexte et
l’environnement de travail.
• Le deuxième chapitre présente une analyse des besoins fonctionnels et techniques,
ainsi la conception de l’application.
• Et le dernier chapitre est destiné à la présentation les différentes interfaces graphiques
de l’application.

6
 • Chapitre 1 :

Contexte générale du projet

• La société DEVSTTER

• Présentation

DEVSTTER est une agence digitale située à Fès et active dans tout le pays. Son objectif
est de trouver des solutions simples et efficaces qui s'adaptent aux besoins des clients. Que ça
soit une petite ou une grande entreprise, elle met son expertise à la disposition des clients pour
assurer une prestation originale, créative et efficace.

L'agence a été fondée en 2020 par Mr HAMMANI Mohammed, Ingénieur d’Etudes et

Développement Confirmé, et Mr NAJDI Zakaria, Ingénieur en Développement Informatique,
et Mr MERIOUT Hamza, Expert en marketing et communication.

On peut présenter sa fiche signalétique de la manière suivante :

Date de
Raison Sociale Forme juridique Siege
création
Devstter SARL AU Ben souda, Résidence olivier, n° 05/2020
399 étages 2 bureau 6, Fès 30000

Tableau 1: Fiche technique de l’agence

• Ses activités

De la création à l'impression, en passant par le positionnement sur Internet, Devstter

propose des services globaux.

Les principales prestations de l’agence :

• Étude, Conseil et Développement de solutions informatiques spécifiques.

• Fourniture de logiciels standard de gestion d’entreprise.

• Développement de logiciels spécifiques sur demande.

7
 • Conception et hébergement des Sites Web.

• Conception et Réalisation des applications Web et mobile.

• Gestion des réseaux sociaux.

• Référencement SEO.

• Graphique design.

• Audit et contrôle.

L’agence dispose d’une équipe de développeurs doués et de graphistes et designers

créatifs qui veillent à apporter des conseils pédagogiques pour aider les clients à faire les bons
choix ainsi que les changements à envisager pour atteindre leurs objectifs. Chez Devstter,
l’équipe est centrée sur les différents modes de communication digitale pour les canaux les
plus pertinents pour les clients : Community Management, publicité sur les réseaux sociaux
(SMO), référence payante (SEA), référencement naturel SEO, tactiques et médias
traditionnels (Panneaux d'affichage, publicités à la radio, à la télévision, etc.).

Pour le Community Management, Facebook, Instagram, LinkedIn, nos Community

managers maîtrisent facilement ces réseaux sociaux. En fonction de la cible et du public
souhaite, elle propose la stratégie de communication la plus adaptée au projet. L’expert
fournit toutes les clés pour bien gérer le réseau social.

Pour la publicité sur les réseaux sociaux, (Social Media Optimisation), les Traffic
managers, experts en matière de publicité sur les médias sociaux, aident à déterminer la
stratégie d'acquisition. Acquisition de trafic boost du visibilité, génération de fans et
d'abonnés sur les comptes Facebook et Instagram, augmentation des ventes et des conversions
sur le site internet.

Pour le référencement payant, les stratégies SEA, AdWords ou Google Ads ne sont
autres que le développement de campagnes de prospection sur les moteurs de recherche
comme Google. L’agence et ses experts certifiés Google Ads et Google Analytics proposent
les bonnes pratiques digitales pour communiquer sur ce levier. Les offres de services
expérimentées sont adaptées aux besoins, qu'il s'agisse de conseils ou de la gestion totale
d’une campagne de communication digitale.

Pour le SEO, Comme les autres moyens de communication numérique, le référencement

est l'un des domaines d'expertise de Devstter. Les experts en référencement conseillent sur

8
l'optimisation du site web en réalisant un audit SEO, sur l'amélioration et la dynamisation du
contenu en mettant en place un guide de rédaction, et enfin sur une stratégie de définition des
mots et de mise en place de netlinking pour améliorer le positionnement sur les moteurs de
recherche.

Pour le dessin digital, les réseaux de graphistes, ou designers suivent et répondent

toujours aux problématiques de communication digitale. Supports de communication, identité
visuelle, création de logo ou de charte graphique, motion design vidéo, développement de
maquettes d'UX et d'UI design pour la création de site internet, les experts en design digital
maîtrisent tous les aspects du domaine de la communication et de l'identité visuelle.

Pour la création des sites internet, le développement et la création de sites web

constituent le cœur de métier de l’agence. Chez Devstter, tous les sites web sont réalisés sur
mesure en accord avec les besoins des clients

• Etude de l’existant

Le marché des applications mobiles est si vaste que vous ne pouvez pas penser à une
idée et vous ne pouvez pas la trouver. Et donc il existe en fait de nombreuses applications
pour localiser des restaurants (hors du Maroc), chaque application est spécialisée dans
quelque chose, et voici une liste des applications existantes et leurs spécialités :

Nom d’application Pays App information

United States, Cette application vous aide à trouver
Mexico, Germany, l'endroit idéal pour manger en fonction
Netherlands,
OpenTable de l'emplacement, de la date, de
Canada, Australia
l'heure, de la taille de la fête et des
préférences gustatives
United States, Cette application vous aide à trouver
Find Me Gluten Free Ireland, France des restaurants sans gluten avec leurs
notes, avis, prix, etc.
United States Cette application vous aide à trouver les
Zagat meilleurs restaurants près de chez vous en
fonction des avis des utilisateurs

9
 • Présentation du projet

• Problématique

Vous vous dirigez vers une grande ville et vous ne savez pas comment explorer tous les
lavages mobiles ? Vous vivez dans une grande ville et vous cherchez un lavagiste proche de
vous ? Quoi qu'il en soit, vous avez besoin d'un guide pour vous aider.

Mais l'option disponible (par exemple Google Maps) ne donne pas beaucoup
d'informations sur les lavagistes ou leurs packs, donc notre solution répond à ce besoin grâce
à une application SaaS gratuite pour tous les utilisateurs.

• Solution proposée

Afin de résoudre les problèmes décrits dans la section précédente, il a été décidé de
créer une application mobile SaaS pour atteindre l'objectif souhaité.

L'application a deux acteurs, l'un d'eux est le lavagiste qui doit pouvoir :

• Créer un compte dans notre application avec toutes les informations nécessaires.

• Gestion des packs, horaire...etc.

• Changer son emplacement dans la carte .

• Consultez les statistiques du lavage mobile.

Et le deuxième acteur est l'utilisateur qui peut :

• Consulter tous les lavages mobiles à la carte.

• Filtrer les lavages mobiles par catégorie, lieu...etc.

• Obtenir les coordonnées de chaque lavages mobiles.

Et plus.

10
 • Plan de travail

Lorsque j'ai pris connaissance du projet, l'entreprise avait déjà passé la phase de
connaissance et d'observation, je suis donc passé directement à la conception de l'application
au début de mon stage.

J'ai commencé par créer un cas d'utilisateurs, un diagramme de classes qui me donne un
aperçu de ce que sera la base de données, j'ai fini par créer un diagramme de séquence pour le
processus qui nécessite plus de détails.

Après la conformation de mon superviseur et après quelques changements,

Saisissezjedu
suis passé
texte ici
à la phase de développement, cette phase se décompose en 3 parties :

• La première partie consistait à créer l'interface de l'application, la partie design en

Flutter.

• La deuxième partie était l'API Laravel dans laquelle j'ai créé toutes les fonctions dont
j'ai besoin dans l'application mobile.

• La troisième partie était l'intégration entre les deux parties, le backend dans Laravel et
le frontend dans Flutter.

Et le diagramme de Gantt ci-dessous comme résumé du plan de travail (divisé en deux parties
pour visibilité) :

11
 • Chapitre 2 :

Analyse et Conception

• Besoins fonctionnels et techniques

• Besoin fonctionnel

Dans cette partie nous allons clarifier les besoins du système à réaliser pour pouvoir
clarifier les besoins des utilisateurs de l’application.

• Inscription :
• Le lavagiste peut se préinscrire en fournissant un certain nombre
d'informations/documents.

• Le consommateur peut s'inscrire dans l'application en fournissant un email et

un mot de passe ou mon compte Google / Facebook.

• Connexion :

• Le lavagiste et le consommateur peuvent se connecter à l'application en

utilisant un email et un mot de passe.

• Accueil :

• Le lavagiste ou le consommateur voit tous les lavages actifs sur la carte avec
leurs positions en temps réel.

• Le lavagiste et le consommateur peuvent voir la fiche descriptive d'un lavage

lorsque je clique sur lui.

• Le lavagiste et le consommateur peuvent rechercher une lavage (recherche

globale, nom, type de pack, plat).

• Le lavagiste et le consommateur peuvent filtrer l'affichage des lavages selon

certains critères (distance, spécialités, note, favoris, etc.)

• Le lavagiste et le consommateur peuvent afficher la liste exhaustive des

lavages actifs avec parcours en scrollant.
12
 • Le lavagiste et le consommateur peuvent voir leur position sur la carte en
temps réel.

• Fiche descriptive d'un lavagiste :

• Le lavagiste et le consommateur peuvent voir un descriptif rapide du lavagiste

(courte description, logo).

• Le lavagiste et le consommateur peuvent voir les spécialités proposées par le

restaurateur.

• Le lavagiste et le consommateur peuvent voir la liste des menus, des plats, des
desserts, des boissons, etc.

• Le lavagiste et le consommateur peuvent voir les ingrédients de chaque

menu/plat/dessert.

• Le lavagiste et le consommateur peuvent voir le prix de chaque item.

• Le lavagiste et le consommateur peuvent voir une image (si disponible) de

chaque item.

• Le lavagiste et le consommateur peuvent voir des informations

complémentaires sur le lavage.

• le consommateur peuvent noter le lavage (note / commentaire).

• Le lavagiste et le consommateur peuvent contacter le lavage mobile

(sms/WhatsApp ou appel téléphonique).

• le consommateur peuvent rajouter le lavage mobile en favoris.

• Paramètres :

• Le lavagiste peut spécifier l'état actif/inactif (géolocalisation).

• Le lavagiste et le consommateur peuvent définir des critères de notifications.

• Le consommateur peut modifier mes informations personnelles (nom, prénom,

email, mot de passe, photo de profil).

• Le lavagiste peut paramétrer son logo.

• Le lavagiste peut ajouter des catégories de pack .

• Le lavagiste et le consommateur peuvent déconnecter de l'application.

13
 • Favoris :

• Le consommateur peut voir la liste des lavages mobiles en favoris

• Statistiques :

• Le lavagiste peut accéder à ses statistiques (nombre de vues, nombre de notes,

commentaires…etc.)

• Besoin technique

• Langages utilisés

• Flutter

Flutter est un cadre de développement d'applications mobiles open-

source créé par Google pour créer des applications hautes performances pour iOS et Android
dans une seule base de code. Flutter offre aux développeurs un moyen rapide et expressif de
créer des applications natives. Flutter s’appuie sur le langage de programmation DART (à
l’origine appelé Dash), créé également par Google et présenté au public en 2011.

14
 • Laravel

Laravel est un Framework PHP qui été créé par Taylor Otwel, qui
initie alors une nouvelle façon de concevoir un Framework en utilisant ce qui existe de mieux
pour chaque fonctionnalité. Il a été, en ce sens, construit en se basant sur Symfony, un autre
Framework PHP reconnu mondialement pour sa robustesse. De fait, il embarque des briques
logiciel testés et approuvés par une grande communauté permettant d’améliorer la rapidité des
développements et de la robustesse de l’application.

• JSON

JSON est un format de données textuelles, générique, dérivé de la

notation des objets. Il permet de représenter de l’information structurée. Créé par Douglas
Crockford. Ces types de données sont suffisamment génériques et abstraits pour, d’une part,
pouvoir être représentés dans n’importe quel langage de programmation, d’autre part, pouvoir
représenter n’importe quelle donnée concrète.

15
 • Outils de développement

• VS code

Visual Studio Code est un éditeur de code open-source développé par

Microsoft supportant un très grand nombre de langages grâce à des extensions. Il supporte
l’auto complétion, la coloration syntaxique, le débogage, et les commandes Git.

• GitHub

GitHub est une plateforme de gestion et d’organisation de projets basée

sur le cloud qui intègre les fonctions de contrôle de version de Git. En d’autres termes, tous
les utilisateurs de GitHub peuvent suivre et gérer les modifications apportées au code source
en temps réel tout en ayant accès à toutes les autres fonctions de Git disponibles au même
endroit

• MySQL

MySQL est un système de gestion de base de données (SGBD). Il est

distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de
base de données les plus utilisés au monde, autant par le grand public, que par des
professionnels, en concurrence avec Oracle, Informix et Microsoft SQL Server.

16
 • Postman

Postman est outil multifonction pour API Web, propose de nombreuses

fonctionnalités, une prise en main rapide et une interface graphique agréable.

Postman permet de construire et d’exécuter des requêtes HTTP, de les stocker dans un
historique afin de pouvoir les rejouer, mais surtout de les organiser en Collections.

• Slack

Slack est une application de messagerie dédiée au travail en collaboration.

Cet outil de communication permet aux employés d’une même entreprise d’échanger des
messages, des fichiers et des projets.

• Conception

• Identification des acteurs

Un acteur est celui qui déclenche la réalisation d'une activité pour remplir ses
obligations commerciales, c'est celui qui interagit directement avec le système étudié : un
utilisateur, une équipe externe ou un autre système.

En réponse à l'action d'un acteur, le système fournit un service qui répond à ses besoins.
Les acteurs peuvent être classés (hiérarchie).

Une même personne peut représenter plusieurs acteurs (jouer plusieurs rôles), Plusieurs
personnes peuvent représenter le même acteur (jouer le même rôle).

Pour mon projet les principaux acteurs sont le consommateur et le Lavagiste.

17
 Acteur Rôles
Inscription :
• Inscrire à l'application par mail et mot de passe
• Inscrire par compte Google / Facebook
Connexion :
• Connecter à l'application via login
• Connecter via compte Google / Facebook
Accueil :
• Voir tous les lavages actifs sur la carte avec leurs positions en
temps réel
• Voir la fiche descriptive d'un lavage lorsque je clique sur lui
• Rechercher un lavage (recherche globale, nom, type de
lavage, plat)
Fiche descriptive d'un lavage :
• Voir un descriptif rapide du lavagiste (courte description,
logo)
Consommateur
• Voir les spécialités proposées par le lavagiste.
• Voir la liste des packs, des produits, etc.
• Voir le prix de chaque pack.
• Voir des informations complémentaires sur le lavagiste
• Contacter le restaurateur (sms/WhatsApp ou appel
téléphonique).
• Rajouter le lavagiste en favoris.
Favoris :
• Voir la liste des lavages en favoris
Paramètres :
• Définir des critères de notifications
• Modifier mes informations personnelles
• Déconnecter de l'application.
Notification :
• Notifié lorsque mes critères de notification sont validés
Inscription :
• Effectuer une pré-inscription en fournissant un certain nombre
d'information/de documents
Connexion :
• Connecter à l'application via mon login et mon mot de passe.
Accueil :
• Voir tous les lavages actifs sur la carte avec leurs positions en
temps réel.
• Être alerté si mon état est inactif
Lavagiste • Voir la fiche descriptive d'un lavage lorsque je clique sur lui
• Rechercher un lavage (recherche globale, nom, type de pack,
prix)
• Afficher ma position en temps réel sur la carte
Fiche descriptive d'un lavage :
• Voir un descriptif rapide du lavage (courte description, logo)
• Voir les spécialités proposées par le lavage.
• Voir la liste des packs, des produits, etc.
• Voir le prix de chaque article.
• Voir des informations complémentaires sur le lavage.

18
 • Contacter le lavagiste (sms/WhatsApp ou appel
téléphonique).
Paramètres :
• Spécifier l'état actif/inactif (géolocalisation)
• Définir des critères de notifications
• Ajouter les catégories de menus (3 niveaux maximum)
• Paramétrer les spécialités
• Paramétrer le logo
• Déconnecter de l'application.
Notification :
• Notifié lorsque mes critères de notification sont validés
Statistiques :
• 1ccès à les statistiques (nombre de vues, nombre de j'aime,
commentaires...etc.)

Tableau 2 : Acteurs et rôles de mon projet

19
 • Chapitre 3 :

Interfaces de l’application réalisée

Application Lavagekom :

Figure 1: interface d’accueil

20
 Tu peux cliquer sur le lavagiste pour afficher
plus des informations et réserver.

Figure 2: interface de réservation

21
 Cette interface représente le profil de
lavagiste et contient toutes les
informations qu'un consommateur doit
connaître.

Figure 3: interface profile .

22
Figure 4: interface liste des packs

23
 L'utilisateur peut effectuer une recherche
globale des lavagistes actives.

Figure 5: interface recherche

24
 le menu aide l'utilisateur pour gérer son
compte.

Figure 6: interface menu

25
 L'utilisateur peut également rechercher par
carte les lavages les plus proches de son
emplacement

Figure 7: interface map

26
 • Conclusion

Mon stage chez DEVSTTER était plein des avantages.

Au niveau des Softskills :

• Mon comportement est devenu plus professionnel

• Je me suis débarrassé de la peur sociale

• J’ai créé des contacts avec des gens dans le domaine professionnel

• Je me suis adapté avec l’atmosphère des entreprises

Au niveau des connaissances :

• J’ai découvert le monde du développement mobile

• Je me suis amélioré au niveau du développement web

• J’ai pris une bonne impression et connaissance sur le réseau informatique

• J’ai découvert le monde professionnel et comment il marche

Grace à ce stage j’ai créé des objectifs que je doive réaliser dans le futur, parmi ces objectifs
est de devenir un bon développeur mobile, ainsi que construire le maximum des projets
possibles.

27