Département : Mathématiques et Informatique

MEMOIRE DE STAGE

En vue de l’obtention du diplôme Licence Professionnelle

‘’Génie Informatique’’

Mise en œuvre d’une application mobile pour la

digitalisation des catalogues touristiques :

« Catalog City »

Présenté par

Mlle. TAOUSSI Salma

Soutenue le : 28Juin 2024

Devant le jury :

Pr ANTARI Jilali Professeur à la Faculté Polydisciplinaire de Taroudant Président

Pr SADIQ Abderrahmane Professeur à la Faculté Polydisciplinaire de Taroudant Encadrant

Pr IGERNANE Mohammed Professeur à la Faculté Polydisciplinaire de Taroudant Encadrant

Année Universitaire 2023- 2024

 DEDICACES

Je dédie ce travail :

À mes parents, il n'y a rien au monde qui puisse rendre tous les sacrifices qu'ils ont faits
pour notre éducation et notre bien-être afin que nous puissions atteindre nos objectifs.

À mes frères et sœurs, pour leur aide, leurs encouragements et leur fidélité. Je leur
souhaite tout le succès et tout le bonheur.

Au corps professoral et administratif de la faculté, a ceux qui me encouragent et me

conseillent A ceux qui n’ont jamais été avares ni de leurs temps ni de leurs connaissances pour
satisfaire nos sollicitations.

Aux étudiants de génie informatique-promotion 2023/2024, que notre amitié puisse

durer éternellement. À tout ami qui m'a consacré un jour, un moment de sa vie pour m'aider, me
conseiller, m'encourager ou simplement me sourire.
 REMERCIEMENTS

C’est avec un grand plaisir que j’adresse mes remerciements les plus distingués aux
personnes qui m’ont apporté leur aide et leur collaboration.

Je tiens tout d’abord à remercier, toute l’équipe pédagogique de la Faculté

Polydisciplinaire de Taroudant et les intervenants professionnels responsables de la formation
génie informatique.

J’exprime ma profonde gratitude à Monsieur SADIQ Abderrahmane et Monsieur

IGOURNANE Mohammed, mes honorables encadrants, pour m’avoir fait confiance pour la
réalisation de ce projet, pour leurs conseils ainsi que pour leur disponibilité.

Je tiens à remercier tous particulièrement Monsieur ERRAHICHE Saad pour m’avoir

intégré rapidement au sein de l’entreprise Ondustry et m’avoir accordé toute sa confiance et pour
le temps qu’il m’a consacrés tout au long de cette période, sachant répondre à toutes mes
interrogations.

Je voudrais aussi remercier ceux qui ont participé de près ou de loin à la réalisation de ce
projet.
 RESUME

Ce travail est le fruit de deux mois de stage dans le cadre de ma licence professionnelle en
Génie Informatique, effectué au sein d'Onedustry Technologies. Pendant cette période, j'ai eu
l'opportunité de contribuer au développement d'une application mobile innovante axée sur la
digitalisation des catalogues touristiques.

L'objectif principal de mon travail chez Onedustry Technologies était de concevoir une
plateforme qui transforme l'expérience des utilisateurs en leur offrant un accès intuitif et enrichi à
une mine d'informations sur les attractions locales, les options de restauration, et les activités
touristiques disponibles dans chaque destination.

Ce projet m'a permis de mettre en pratique mes compétences en programmation, en

gestion de bases de données et en déploiement de services cloud. J'ai exploré et utilisé diverses
technologies, acquérant ainsi une compréhension approfondie des outils et des méthodes
nécessaires pour créer une application performante et conviviale.
Introduction générale

INTRODUCTION GENERALE

Dans le contexte actuel où l'efficacité et la productivité des entreprises sont

cruciales, l'automatisation des processus de travail, notamment dans la gestion des ressources
humaines, est devenue une stratégie essentielle. C'est dans cette perspective que Catalog City a été
développée. Cette application mobile répond aux besoins des voyageurs désirant explorer des
destinations touristiques en offrant une solution simple et efficace.

Catalog City met à disposition une mine d'informations sur les attractions locales, les
restaurants, et les activités touristiques. En simplifiant l'accès à ces informations cruciales, elle
permet aux utilisateurs de gagner du temps, d'éviter les recherches laborieuses et les erreurs de
planification, enrichissant ainsi leur expérience de voyage.

Dans le domaine du tourisme, soutenir et promouvoir les projets touristiques moins

connus ou émergents est crucial. Catalog City offre une plateforme ouverte à tous les acteurs du
secteur touristique, encourageant ainsi la visibilité des projets débutants ou peu connus. En
permettant à ces entrepreneurs et promoteurs de présenter leurs offres de manière attractive et
professionnelle, Catalog City leur offre une chance équitable de se faire connaître dans l'industrie
du tourisme.

Dans le cadre de mon projet de fin d'études, Catalog City a été réalisé pendant mon stage
en mode hybride chez Onedustry Technologies. J'ai utilisé NestJS, Flutter, MongoDB et AWS. Ces
technologies ont permis de créer une application performante et intuitive pour l'exploration
touristique.

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

 Chapitre II : Gestion de projet et analyse de conception.
 Chapitre III : Outils et techniques de réalisation.
 Chapitre IV : Présentation de l’application et résultat.

Page | 1
Introduction générale

Page | 2
Table des matières

TABLE DES MATIERES

ARTICLE I. CONTENU

INTRODUCTION GENERALE.......................................................................................................................................1

TABLE DES MATIERES................................................................................................................................................2

CHAPITRE 1 : CONTEXTE GENERAL......................................................................................................................9

1. Introduction.........................................................................................................................................9

2. Présentation de l’organisme d’accueil...........................................................................................9

2.1. Les services..................................................................................................................................................9

2.2. La fiche technique.....................................................................................................................................11

3. Cahier de charge :............................................................................................................................12

3.1. Le contexte général...................................................................................................................................12

3.2. Problématique...........................................................................................................................................12

3.3. Une Solution Révolutionnaire..................................................................................................................13

4. Conclusion.........................................................................................................................................13

CHAPITRE2 : GESTION DE PROJET CONCEPTION ET ANALYSE................................................................14

1. Introduction :....................................................................................................................................14

2. Gestion de projet :............................................................................................................................14

2.1. Méthode de gestion (Agil Scrum) :..........................................................................................................14

2.2. Planification :............................................................................................................................................15

2.3. Diagramme de Gantt :...............................................................................................................................15

3. Analyse et conception :....................................................................................................................16

3.1. Outils et méthodologie :............................................................................................................................16

3.2. Spécification des besoins :........................................................................................................................16

3.2.1. Identifications des acteurs :.................................................................................................................17

3.2.2. Besoins fonctionnels :...........................................................................................................................17

3.2.3. Besoins non fonctionnels :....................................................................................................................18

Page | 2
Table des matières

3.3. Diagramme de cas d’utilisation :.............................................................................................................19

3.4. Diagramme de classe :..............................................................................................................................21

3.5. Diagramme de séquence :........................................................................................................................21

4. Conclusion.........................................................................................................................................23

CHAPITRE 3 : OUTILS ET TECHNIQUES DE REALISATION..........................................................................24

1. Introduction.......................................................................................................................................24

2. Technologies utilisées......................................................................................................................24

3. Les outils utilisés..............................................................................................................................26

4. Conclusion.........................................................................................................................................28

CHAPITRE 4 : PRESENTATION DE L'APPLICATION ET RESULTATS.........................................................29

1. Introduction.......................................................................................................................................29

2. Pour visiteur......................................................................................................................................29

2.1. Avant Authentification.............................................................................................................................29

2.2. Authentification........................................................................................................................................30

2.3. Page d'accueil:...........................................................................................................................................32

2.3.1. Détails des Villes...................................................................................................................................34

2.3.2. Détails des pays :...................................................................................................................................37

2.4. Fonctionnalité de Support Multilingue :................................................................................................39

2.5. la Page de Déconnexion............................................................................................................................40

3. Partie Admin :...................................................................................................................................41

3.1. Authentification d’Admin........................................................................................................................41

3.2. Gestion des villes :.....................................................................................................................................42

4. Conclusion.........................................................................................................................................43

CONCLUSION GENERAL.........................................................................................................................................44

WEBOGRAPHIE...........................................................................................................................................................45

Page | 3
Table des matières

Page | 4
Liste des abréviations

LISTE DES ABREVIATIONS

UML : Unified Modeling Language

AWS : Amazon Web Services

SaaS : Software as a Service

PaaS : Platform as a Service

CRM : Customer Relationship Management

SARL : Société à Responsabilité Limitée

AU : Anonyme à Responsabilité Limitée

FTP : File Transfer Protocol

SFTP : SSH File Transfer Protocol

FTPS : FTP Secure

API : Application Programming Interface

HTTP : Hypertext Transfer Protocol

SSH : Secure Shell

Page | 5
Table des figures

TABLE DES FIGURES

Figure 1 : Fiche technique d’Onedustry........................................................................................................................11

Figure2 : Diagramme de cas d’utilisateur......................................................................................................................16

Figure3 : Diagramme de cas d’utilisation visiteur.........................................................................................................19

Figure4 : Diagramme de cas d’utilisation visiteur.........................................................................................................20

Figure5 : Diagramme de classe.......................................................................................................................................21

Figure 6 : Diagramme de séquence d'authentification..................................................................................................22

Figure 7 : Diagramme de séquence de recherche et réservation...................................................................................23

Figure 8 : Logo Flutter....................................................................................................................................................24

Figure 9: Logo DART......................................................................................................................................................24

Figure10 : Logo NestJS...................................................................................................................................................25

Figure 11: Logo MongoDB Atlas...................................................................................................................................25

Figure12 : Logo AWS......................................................................................................................................................25

Figure13: Logo AWS Lambda........................................................................................................................................25

Figure14: Logo API Gateway.........................................................................................................................................26

Figure15: Logo EC2........................................................................................................................................................26

Figure16 : Logo Keycloak...............................................................................................................................................26

Figure17: Logo VSCode..................................................................................................................................................26

Figure18: Logo GitHub...................................................................................................................................................27

Figur19: Logo FileZilla...................................................................................................................................................27

Figure20: Logo Postman.................................................................................................................................................27

Figure 21: Logo Putty......................................................................................................................................................27

Figure22: Logo StarUML...............................................................................................................................................28

Figure23: Logo Cloudinary.............................................................................................................................................28

Figure24: 2ème page de bienvenue...................................................................................................................................30

Figure25 : Page de lancement.........................................................................................................................................30

Page | 6
Table des figures

Figure26: 3ème page de bienvenue...................................................................................................................................30

Figure27: 1ére page de bienvenue.................................................................................................................................30

Figure28 : Page d ´inscription........................................................................................................................................31

Figure 29:Page de connexion d’utilisateur....................................................................................................................31

Figure30: Page de connexion.........................................................................................................................................31

Figure31: Saisie échouée...............................................................................................................................................32

Figure32: Connexion échouée........................................................................................................................................32

Figure33: Inscription échouée........................................................................................................................................32

Figure34: Menu d’un utilisateur non authentifié.........................................................................................................33

Figure35: Accueil d’un utilisateur non authentifié.......................................................................................................33

Figure36: Accueil d’un utilisateur authentifié...............................................................................................................33

Figure37: Accueil d’un utilisateur authentifié...............................................................................................................33

Figure38: Détails d’une ville avec catégorie.................................................................................................................34

Figure39: Détails d’une ville...........................................................................................................................................34

Figure40: Détails du restaurant......................................................................................................................................35

Figure41: Voir sur map...................................................................................................................................................35

Figure42: Partage via WhatsApp....................................................................................................................................36

Figure43: Partage via WhatsApp....................................................................................................................................36

Figure45: Liste des pays..................................................................................................................................................37

Figure44: Détails d’un pays............................................................................................................................................37

Figure46 : Liste des favoris.............................................................................................................................................38

Figure47 : Exploration des attractions...........................................................................................................................38

Figure50 : Traduction du menu......................................................................................................................................39

Figure49 : Traduction du page d’accueil en francais....................................................................................................39

Figure48: Choix de la langue française.........................................................................................................................39

Figure51: Choix de la langue arabe...............................................................................................................................40

Figure53: Traduction du menu en arabe.......................................................................................................................40

Figure52: Traduction du page d’accueil en arabe.........................................................................................................40

Page | 7
Table des figures

Figure54: Déconnexion...................................................................................................................................................41

Figure55: Connexion d’Admin.......................................................................................................................................42

Figure56: Ajoute d’une ville...........................................................................................................................................43

Figure57: Affichage du ville ajoutée..............................................................................................................................43

Page | 8
Liste des tableaux

LISTE DES TABLEAUX

Tableau 1: Planification du projet..................................................................................................................................15

Page | 9
Chapitre 1 : contexte général

CHAPITRE 1 : CONTEXTE GENERAL

1. Introduction
Le but de ce chapitre est de mettre notre projet dans son contexte. Commençant par la
présentation de l’organisme d’accueil, la détermination de la problématique du projet et sa solution
passant par la suite à la réalisation d’un cahier de charge de mon applications mobile ‘catalogcity’.

2. Présentation de l’organisme d’accueil

Onedustry Technologies est une société fondée en juillet 2020, axée sur la transformation
digitale des secteurs liés aux automobiles. La société se distingue par son engagement à fournir des
solutions innovantes dans divers domaines, notamment les services de voiture, la restauration, les
voyages, les sports, les parkings et les villes intelligentes.

2.1. Les services

Onedustry Technologies offre une gamme diversifiée de services destinés à simplifier la

vie des propriétaires de véhicules et à renforcer les opérations des concessionnaires automobiles.
Voici une description détaillée des services proposés :

 Services pour les Propriétaires de Véhicules :

 Réparations et Maintenance à Domicile : Onedustry Technologies permet

de trouver un mécanicien qualifié pour effectuer des réparations, une vidange d'huile
moteur, ou le remplacement des pneus directement à domicile, offrant ainsi une solution
pratique et rapide aux besoins d'entretien des véhicules.

 Réservation de Parking : L'application facilite la recherche et la réservation

d'espaces de parking, simplifiant le stationnement pour les utilisateurs et leur permettant de
gagner du temps et de réduire le stress lié au stationnement.
Chapitre 1 : contexte général

 Services de Lavage de Voiture : Les utilisateurs peuvent accéder à des

services de lavage de voiture, soit à domicile soit en point de service, garantissant un
véhicule propre sans effort supplémentaire.

 Achat et Vente de Pièces et de Véhicules d'Occasion : L'application

permet d'acheter des pièces détachées pour véhicules, en consultant les prix et les options
de livraison. De plus, les utilisateurs peuvent acheter ou vendre des véhicules d'occasion
directement via la plateforme, facilitant ainsi les transactions.

 Services pour les Concessionnaires Automobiles :

 Gestion de la Relation Client (CRM) : Onedustry Technologies améliore la

relation entre les concessionnaires et leurs clients en offrant une écoute attentive et des
solutions adaptées aux besoins des clients, renforçant ainsi la satisfaction et la fidélité.

 Programmes de Fidélisation : La plateforme propose des programmes de

fidélisation, incluant des points de fidélité, pour encourager les clients à revenir et à rester
engagés avec les services des concessionnaires.

 Prise de Rendez-vous : La solution facilite la prise de rendez-vous pour des

services comme la vidange, la maintenance et le contrôle mécanique, optimisant ainsi la
gestion du temps pour les concessionnaires et les clients.

 Boutique en Ligne pour Pièces de Rechange : Les clients peuvent

consulter les pièces de rechange disponibles, leurs prix, et les options de livraison, ce qui
simplifie l'achat de pièces nécessaires pour l'entretien et la réparation des véhicules.

 Technologie et Accessibilité :

Page | 11
Chapitre 1 : contexte général

 Plateforme SaaS et PaaS : Onedustry Technologies propose une plateforme

informatique qui peut être utilisée sous forme de Software as a Service (SaaS) ou Platform
as a Service (PaaS), en fonction des besoins et du budget des concessionnaires.

 Application Mobile : Disponible sur Android et iOS, l'application mobile

est sécurisée par des logins et des mots de passe, garantissant la sécurité des données et
l'accès contrôlé aux services.

 Opérationnalité 24h/24 : La plateforme est accessible 24 heures sur 24,

offrant ainsi une disponibilité constante des services, ce qui est crucial pour répondre aux
besoins des clients à tout moment.
2.2. La fiche technique

4 A 10 EMPLOYEES

Figure 1 : Fiche technique d’Onedustry

Page | 12
Chapitre 1 : contexte général

3. Cahier de charge :

3.1. Le contexte général

Le secteur touristique au Maroc, ainsi que dans d'autres destinations émergentes, connaît
une croissance rapide grâce à une combinaison de richesses culturelles, historiques et naturelles.
Cependant, l'accès à des informations précises et actualisées sur les destinations touristiques, les
hébergements, les activités et les services reste souvent fragmenté et peu accessible pour les
voyageurs. Avec la montée en puissance des technologies mobiles, il existe une opportunité
significative de créer une plateforme numérique qui centralise ces informations et facilite les
réservations, contribuant ainsi à une expérience touristique plus enrichissante et fluide.

3.2. Problématique

Les voyageurs rencontrent souvent plusieurs défis lorsqu'ils explorent de nouvelles

destinations, notamment :

 Difficulté d'accès à des informations fiables et actualisées sur les attractions

locales, les services et les activités

 Complexité des réservations de chambres d'hôtel, de tables de restaurant, et

de visites guidées à partir de différentes plateformes.

 Manque de visibilité des offres spéciales et des réductions, ce qui limite les
possibilités d'économies pour les voyageurs.

 Absence d'une interface intuitive et conviviale qui permettrait une navigation

facile et une immersion complète dans les informations touristiques.

Page | 13
Chapitre 1 : contexte général

3.3. Une Solution Révolutionnaire

 Informations Centralisées et Actualisées : Réunir toutes les informations

indispensables sur une seule plateforme, actualisées en temps réel, et présentées de manière
attrayante

 Réservations Simplifiées : Faciliter les réservations d'hôtels, de restaurants

et d'activités à partir d'une interface unique et conviviale.

 Visibilité des Offres Spéciales : Mettre en avant les meilleures offres et

réductions disponibles pour permettre aux voyageurs de profiter pleinement des
opportunités d'économies.

 Interface Intuitive et Conviviale : Créer une expérience utilisateur fluide et

immersive, avec une navigation aisée et plaisante pour planifier et vivre chaque aventure
sans tracas.

4. Conclusion
Dans ce chapitre, j’ai tentée de citer le contexte du projet qui s'étale sur deux parties : la
première décrit l'organisme d'accueil et la seconde regroupe la problématique, la présentation du
projet, et la solution proposée. Nous passerons dans le chapitre suivant à une nouvelle étape qui
consiste à la présentation de la phase de conception déployée dans ce projet.

Page | 14
Chapitre2 : gestion de projet, conception et analyse

CHAPITRE2 : GESTION DE PROJET CONCEPTION ET

ANALYSE
1. Introduction :

Après avoir examiné le contexte général de mon stage de fin d'études, nous nous
plongeons maintenant dans cette phase consacrée à la gestion de projet et à l'analyse et conception,
nous plongeons au cœur de l'organisation et de la planification des ressources nécessaires à la
réalisation d'un projet, tout en examinant les besoins des utilisateurs.

2. Gestion de projet :

La gestion de projet englobe toutes les activités nécessaires pour planifier, organiser, et
superviser le déroulement d'un projet, assurant ainsi l'atteinte de ses objectifs. Elle implique
l'application de diverses méthodes, techniques et outils de gestion adaptés à chaque phase du
projet, depuis l'évaluation initiale de l'opportunité jusqu'à la finalisation et la clôture du projet.

2.1. Méthode de gestion (Agil Scrum) :

Dans le cadre du développement de CatalogCity, j'ai opté pour la méthodologie Scrum

afin de gérer efficacement le projet.

Scrum est une méthodologie Agile de gestion de projet qui se caractérise par des
sprints, des cycles de développement courts et réguliers de deux à quatre semaines. Chaque
sprint débute par une réunion de planification où les tâches prioritaires sont sélectionnées à
partir du backlog de produit. Des réunions quotidiennes, appelées Daily Stand-Ups,
permettent à chaque membre de l'équipe de partager ses progrès, ses obstacles et ses plans
pour la journée. À la fin de chaque sprint, une revue est menée pour évaluer les livrables et
recueillir les retours des parties prenantes, suivie d'une rétrospective pour identifier les points
à améliorer dans le processus. Scrum met l’accent sur la collaboration, la flexibilité et
l'amélioration continue, tout en assurant une livraison rapide et régulière de parties du
produit.

Page | 15
Chapitre2 : gestion de projet conception et analyse

2.2. Planification :

La planification des tâches est essentielle dans la gestion de projet pour structurer et
organiser les activités nécessaires à l'atteinte des objectifs, Elle permet d'identifier, de séquencer et
d'allouer les ressources adéquates à chaque tâche, assurant ainsi une utilisation optimale du temps
et des ressources disponibles. Une planification efficace aide à respecter les délais et à gérer les
risques potentiels.

Tableau 1: Planification du projet

2.3. Diagramme de Gantt :

Le diagramme de Gantt est un outil visuel de gestion de projet qui affiche les tâches sur
une chronologie, montrant leur durée, dates de début et de fin, et avancement. Il aide à identifier
les dépendances et à suivre la progression du projet.
Chapitre2 : gestion de projet, conception et analyse

Figure2 : Diagramme de cas d’utilisateur

3. Analyse et conception :

3.1. Outils et méthodologie :

Pour la conception de mon projet, j'ai choisi d'utiliser UML (Unified Modeling Language)
en raison de sa flexibilité et de sa capacité à modéliser des systèmes orientés objets de manière
détaillée et cohérente. UML offre une variété de diagrammes qui permettent de représenter à la fois
la structure statique et les interactions dynamiques du système. Cela facilite la communication
entre les membres de l'équipe et assure une compréhension commune du projet. Grâce à UML, j'ai
pu identifier clairement les cas d'utilisation, structurer les données et les relations avec les
diagrammes de classes, et modéliser les interactions et les flux d'information avec les diagrammes
de séquence. Cette approche a fourni une base solide pour le développement et la maintenance du
système.

3.2. Spécification des besoins :

Page | 17
Chapitre2 : gestion de projet, conception et analyse

L'objectif du projet est de répondre aux exigences fonctionnelles de l'application et de

satisfaire également les besoins non fonctionnels, qui sont essentiels pour optimiser la qualité du
logiciel.

3.2.1. Identifications des acteurs :

Un acteur est une entité externe qui interagit avec le système (opérateur, centre distant, autre
système, etc.). En réponse à l'action d'un acteur, le système fournit un service correspondant à son
besoin. Les acteurs peuvent être classés en différentes catégories. Dans notre cas, nous avons
identifié les principaux acteurs suivants :

 Voyageurs : Incluent les touristes individuels, les familles, et les groupes

touristiques.

 Administrateurs : Équipe technique responsable du développement, de la mise à

jour, et de la maintenance de l'application.

3.2.2. Besoins fonctionnels :

Les besoins fonctionnels décrivent les fonctionnalités spécifiques et les services que le
système doit fournir pour répondre aux attentes des utilisateurs et accomplir ses tâches principales.
Ils définissent ce que le système doit faire.

 Pour les acteurs :

 Créer un compte : Permettre aux utilisateurs de créer un compte personnel en fournissant

des informations telles que leur nom, leur numéro de téléphone, e-mail et leur mot de passe.

 Se connecter : Offrir aux utilisateurs la possibilité de se connecter à leur compte à l'aide

de leurs identifiants (adresse e-mail/mot de passe)

 Accès Facile aux Informations Touristiques : Besoin d'accéder facilement à des

informations précises et actualisées sur les destinations touristiques pour planifier leurs
voyages de manière informée.

 Réservation Directe de Services : Souhaitent la possibilité de réserver directement des

services touristiques via l'application pour plus de commodité et d'efficacité.

Page | 18
Chapitre2 : gestion de projet, conception et analyse

 Accès aux Offres Spéciales : Recherchent des offres spéciales et des promotions pour
économiser sur les réservations et les achats liés à leurs voyages.

 Interface Conviviale : Ont besoin d'une interface utilisateur intuitive et conviviale pour
une navigation fluide à travers l'application, facilitant ainsi la recherche d'informations et
la réservation de services.

 Partage Social : Désirent la capacité de partager leurs expériences de voyage et leurs

recommandations sur les réseaux sociaux pour inspirer d'autres voyageurs et renforcer les
liens communautaires.

 Pour les administrateurs de l'Application :

 Outils de Gestion Efficaces : Recherchent des outils de gestion efficaces pour maintenir et
mettre à jour l'application, assurant ainsi son bon fonctionnement et sa pertinence continue.

 Analyse des Données d'Utilisation : Ont besoin d'analyser les données d'utilisation de
l'application pour comprendre les besoins des utilisateurs et améliorer constamment les
services offerts.

3.2.3. Besoins non fonctionnels :

Les besoins non fonctionnels définissent les caractéristiques du système, telles que la
performance, le type de matériel, et la conception. Pour l'application CatalogCity, les principaux points à
assurer sont les suivants :

 Facilité d'utilisation (utilisabilité) : L'interface utilisateur doit être conviviale, intuitive et

facile à naviguer. Les villes, les détails de chaque villes, et fonctionnalités doivent être
clairement organisés et compréhensibles pour tous les utilisateurs.

 Performance : L'application CatalogCity doit être rapide et réactive pour garantir une
expérience utilisateur fluide et agréable.

 Sécurité : La sécurité des données des utilisateurs doit être rigoureusement assurée pour
protéger contre les violations de données et les accès non autorisés.

Page | 19
 Chapitre2 : gestion de projet, conception et analyse

 Extensibilité : Le code de CatalogCity doit être clair et évolutif, permettant l'ajout de

nouvelles fonctionnalités et l'intégration avec d'autres systèmes à l'avenir.

3.3. Diagramme de cas d’utilisation :

 Pour le visiteur :

Figure3 : Diagramme de cas d’utilisation visiteur.

Ce diagramme montre les actions qu'un visiteur peut effectuer dans CatalogCity, telles que
rechercher et réserver des hôtels et des restaurants, explorer des activités, découvrir des marchés
artisanaux, consulter des offres spéciales, et partager des photos. Toutes ces actions nécessitent une
authentification préalable.

 Pour administrateur :

Page | 20
Chapitre2 : gestion de projet, conception et analyse

Figure4 : Diagramme de cas d’utilisation visiteur.

Ce diagramme de cas d'utilisation montre les actions qu'un administrateur peut effectuer dans
l'application CatalogCity, comme gérer les hôtels, les restaurants, les activités, les magasins d'artisanat, les
villes et les pays. Les actions incluent ajouter, modifier et supprimer ces éléments. Chaque action de gestion
nécessite une authentification préalable,

Page | 21
Chapitre2 : gestion de projet, conception et analyse

3.4. Diagramme de classe :

Figure5 : Diagramme de classe

Ce diagramme offre une vue d'ensemble de la structure statique du système en mettant en

évidence les différentes classes et leurs relations. Chaque classe représente un ensemble d'objets,
tandis que les associations entre les classes décrivent les liens entre ces objets. Les objets sont les
instances des classes, et les relations entre les classes sont incarnées par les liens entre ces objets.

3.5. Diagramme de séquence :

Le diagramme de séquence, classé parmi les diagrammes comportementaux (dynamique)

et plus spécifiquement les diagrammes d’interactions, représente les échanges entre les différents
objets et acteurs du système, organisés selon leur ordre chronologique.

Page | 22
Chapitre2 : gestion de projet, conception et analyse

 D’authentification :

Figure 6 : Diagramme de séquence d'authentification

Le diagramme de séquence d'authentification offre une vue simplifiée des différentes

étapes impliquées dans le processus d'identification. Il met en lumière les interactions entre
l'utilisateur, l'application et le serveur.

 De recherche et réservation :

Page | 23
Chapitre2 : gestion de projet, conception et analyse

Figure 7 : Diagramme de séquence de recherche et réservation

Ce diagramme détaille les étapes de recherche et de réservation d'hébergement.

L'utilisateur entre la destination et la catégorie, puis l'interface utilisateur effectue une recherche
via le service dédié. Les résultats sont obtenus depuis la base de données et affichés à l'utilisateur.
S'il choisit un hôtel, il voit les détails, peut effectuer une réservation, puis recevoir une
confirmation. Ensuite, il peut éventuellement laisser un avis, qui est enregistré dans la base de
données. S'il ne sélectionne pas d'hôtel, il retourne à la page d'accueil.

4. Conclusion

Ce chapitre a traité de la gestion de projet, de l'analyse et de la conception, y compris la

planification des tâches, les outils, les méthodologies, la spécification des besoins, et la modélisation. Le
prochain chapitre portera sur les outils et techniques de réalisation.

Page | 24
Chapitre 3 : Outils et techniques de réalisation

CHAPITRE 3 : OUTILS ET TECHNIQUES DE REALISATION

1. Introduction
Après avoir défini la conception de notre projet, nous passons maintenant à sa mise en
œuvre. Ce chapitre se concentrera sur la description des technologies utilisées, ainsi que des outils
de développement.

2. Technologies utilisées

Pendant la durée de mon projet, j'ai utilisée une variété des technologies pour développer,
déployer et tester l'application. Voici une liste des principaux technologies que j'ai employées :

 Flutter :

Flutter est un framework open-source développé par Google pour

créer des applications multiplateformes (iOS, Android, Web et
bureau) à partir d'un seul code source.
Figure 8 : Logo Flutter

 DART :

DART est le langage de programmation utilisé avec Flutter, conçu

pour être facile à apprendre et à utiliser, avec un typage statique en
option.
Figure 9: Logo DART

Page | 25
Chapitre 3 : Outils et techniques de réalisation

 NestJS :

NestJS est un framework back-end Node.js basé sur des modules,

inspirés par Angular, qui facilite la création d'applications back-end
évolutives et modulaires en utilisant TypeScript, un langage de Figure10 : Logo NestJS
programmation typé.

 MongoDB Atlas :

MongoDB Atlas est une plateforme de base de données cloud

entièrement gérée pour MongoDB, offrant une infrastructure
sécurisée, évolutive et hautement disponible pour stocker et gérer
Figure 11: Logo MongoDB Atlas
des données dans le cloud, sans nécessiter de configuration ou de
maintenance complexe.

 Amazon Web Services (AWS) :

Une plateforme cloud d'Amazon qui offre une variété de services

pour aider les entreprises à développer et déployer des applications
sur Internet. Figure12 : Logo AWS

 AWS Lambda :

Un service qui exécute votre code en réponse à des événements et

gère automatiquement les ressources sous-jacentes.
Figure13: Logo AWS Lambda

Page | 26
Chapitre 3 : Outils et techniques de réalisation

 Amazon API Gateway :

Un service qui vous permet de créer, déployer et gérer des API pour
vos applications, facilitant ainsi l'accès à vos services web.
Figure14: Logo API Gateway

 Amazon EC2 (Elastic Compute Cloud) :

Un service qui fournit des serveurs virtuels dans le cloud, vous

permettant d'exécuter vos applications sur une infrastructure
informatique flexible et évolutive. Figure15: Logo EC2

 Keycloak:

Keycloak est un produit logiciel open source permettant

l'authentification unique avec gestion des identités et des accès
destiné aux applications et services modernes.
Figure16 : Logo Keycloak

3. Les outils utilisés

Pendant la durée de mon projet, j'ai utilisée une variété d'outils pour développer, déployer
et tester l'application. Voici une liste des principaux outils que j'ai employées :

 Visual Studio Code (VSCode) :

VSCode est un éditeur de code source gratuit, léger et extensible

développé par Microsoft, pris en charge par une large communauté
d'extensions et de plugins pour divers langages de programmation et
Figure17: Logo VSCode
technologies.

Page | 27
Chapitre 3 : Outils et techniques de réalisation

 GitHub :

GitHub est une plateforme de développement logiciel basée sur Git,

offrant des fonctionnalités de contrôle de version, de collaboration et
de gestion des projets pour les équipes de développement de
Figure18: Logo GitHub
logiciels.

 FileZilla :

FileZilla est un client FTP open-source permettant de transférer des

fichiers entre un ordinateur local et un serveur distant via les
protocoles FTP, SFTP et FTPS.
Figur19: Logo FileZilla

 Postman :

Postman est un outil de collaboration pour le développement d'API,

offrant des fonctionnalités de test, de débogage, de documentation et
de partage d'API, facilitant la création et la gestion d'API HTTP.
Figure20: Logo Postman

 Putty :

Putty est un client SSH, Telnet et Rlogin open-source utilisé pour se

connecter à des serveurs distants via une connexion sécurisée SSH,

Figure 21: |Logo

Page 28 Putty
Chapitre 3 : Outils et techniques de réalisation

permettant l'administration et la configuration à distance des

serveurs.

 StarUML :

StarUML est un outil de modélisation UML (Unified Modeling

Language) utilisé pour concevoir et documenter l'architecture
logicielle des applications, offrant des fonctionnalités de création de
Figure22: Logo StarUML
diagrammes de classe, de séquence, d'activité, etc.

 Cloudinary :

Cloudinary est une solution de gestion d'images et de vidéos de bout

en bout pour les applications web et mobiles. L'application prend en
charge les téléchargements d'images, le stockage dans le cloud, les
manipulations d'images, l'optimisation d'images pour le web et la Figure23: Logo Cloudinary

diffusion.

4. Conclusion

L'utilisation de technologies comme Flutter, NestJS et AWS, avec des outils comme
VSCode et GitHub, contribue à construire une application qui sera à la fois sûre et facile à utiliser.
L'objectif est de répondre aux attentes élevées en matière de qualité et de convivialité pour les
utilisateurs.

Page | 29
Chapitre 4 : Présentation de l'application et résultats

CHAPITRE 4 : PRESENTATION DE L'APPLICATION ET

RESULTATS

1. Introduction

Au cours de cette phase de réalisation de l’application mobile, CatalogCity, j'ai travaillé

activement pour créer un produit final fonctionnel et convivial.
Ce chapitre est dédié à la présentation de certaines interfaces clés de l'application
CatalogCity, qui illustrent mon approche en termes de design et d'expérience utilisateur. Je vais
vous montrer quelques exemples soigneusement sélectionnés pour vous donner un aperçu de
l'apparence et des fonctionnalités de mon application CatalogCity.
Ces exemples mettront en évidence les principales caractéristiques de l'application, en
montrant comment j'ai intégré les retours des utilisateurs et les meilleures pratiques en matière de
design pour offrir une expérience utilisateur optimale.

2. Pour visiteur

2.1. Avant Authentification

La première interaction de l'utilisateur avec notre application commence par l'écran de

lancement (Splash Screen), suivi des pages d'onboarding. Ces éléments sont cruciaux pour offrir
une première impression positive et introduire les nouveaux utilisateurs à l'application, Après le
lancement de l'onboarding, les utilisateurs peuvent choisir de suivre les pages d'introduction ou de
cliquer sur "Skip" pour passer directement à la page d'authentification.

Page | 30
Chapitre 4 : Présentation de l'application et résultats

2.2. Authentification

À l'ouverture de
l'application, les
utilisateurs voient deux
options : login avec leur
e-mail et mot de passe
pour les comptes
existants, ou signup
avec leur nom, une
Figure25 : Page de Figure26: 1ére page de Figure24: 2ème page de bienvenue
nouvelle adresse e-mail et un mot de passe. Une connexion Internet
lancement
active
bienvenue
est nécessaire pour ces actions, sans quoi l'accès aux fonctionnalités de l'application est limité.

Page | 31
 Chapitre 4 : Présentation de l'application et résultats

exion Figure29 : Page d ´inscription Figure 28:Page de connexion

d’utilisateur

Lorsque l'utilisateur saisit une mauvaise forme de l'e-mail ou un mot de passe incorrect
lors du login, une snackbar s'affiche pour l'informer de l'erreur et lui permettre de réessayer. De
même, lors du signup, si l'utilisateur entre un e-mail déjà existant, une snackbar l'informe que l'e-
mail est déjà utilisé, l'invitant à utiliser une autre adresse ou à se connecter avec le compte existant.

Page | 32
Chapitre 4 : Présentation de l'application et résultats

Figure31: Saisie échouée Figure32: Inscription Figure33: Connexion

échouée échouée

2.3. Page d'accueil:

La page d'accueil de l'application est la première vue que les utilisateurs voient après avoir
franchi le processus d'authentification ou pour les visiteurs sans connexion ni inscription :

 Cas de l'utilisateur non authentifié :

Les visiteurs peuvent accéder à la page d'accueil, mais certaines actions comme aimer une
attraction, partager, ou réserver seront restreintes.

Page | 33
 Chapitre 4 : Présentation de l'application et résultats

Figure34: Accueil d’un utilisateur non authentifié Figure35: Menu d’un utilisateur non authentifié

 Cas de l'utilisateur authentifié :

Les utilisateurs authentifiés ont un accès complet aux fonctionnalités de l'application, y
compris aimer des attractions, partager des contenus, et effectuer des réservations.

teur authentifié Figure36: Accueil d’un utilisateur authentifié

Page | 34
Chapitre 4 : Présentation de l'application et résultats

2.3.1. Détails des Villes

Les utilisateurs peuvent sélectionner une catégorie spécifique avant de choisir une ville pour
obtenir des détails pertinents. Par défaut, la catégorie "Restaurant" est sélectionnée.

Après avoir sélectionné la catégorie et la ville, l'application affiche les détails de la ville
ainsi que les détails des restaurants, Il est possible de réserver une table dans les restaurants

Page | 35
Chapitre 4 : Présentation de l'application et résultats

Figure41: Détails du restaurant

L’application offre également la fonctionnalité de localisatio

d'artisanat sur une carte interactive. Cette fonctionnalité est essentie
facilement ces établissements et à planifier leurs visites.

Page | 36
 Chapitre 4 : Présentation de l'application et résultats

p Figure43: Partage via WhatsApp

lité de partager une image de la ville avec un texte personnalisé. Cette

Page | 37
ouhaitent partager leur expérience ou recommander une ville ou un lieu
ux sociaux.
Chapitre 4 : Présentation de l'application et résultats

2.3.2. Détails des pays :

Chaque pays est affiché avec ses détails spécifiques, similaires aux villes. Les détails
peuvent inclure le nom du pays, une description brève, ainsi que des images du pays. Les
utilisateurs peuvent également visualiser la localisation du pays sur une carte interactive et ont la
possibilité de partager ces photos avec un texte personnalisé via les réseaux sociaux. De plus, les
utilisateurs peuvent cliquer sur "See All" pour afficher la liste complète de tous les pays
disponibles dans l'application.

Figure44: Détails d’un pays Figure45: Liste des pays

Page | 38
Chapitre 4 : Présentation de l'application et résultats

L'application propose une fonctionnalité pratique permettant aux

utilisateurs d'ajouter des destinations à leurs favoris. Cette
fonctionnalité leur permet de marquer les endroits qu'ils trouvent
intéressants ou qu'ils aimeraient visiter ultérieurement.

Figure46 : Liste des favoris

Dans le cas où l'utilisateur n'a pas encore ajouté d'établissements à ses

favoris, l'application propose une expérience fluide en le redirigeant
vers la page d'exploration pour découvrir davantage de villes, de pays et
d'autres attractions intéressantes.

Figure47 : Exploration des attractions

Page | 39
Chapitre 4 : Présentation de l'application et résultats

2.4. Fonctionnalité de Support Multilingue :

L'application propose une expérience utilisateur localisée grâce à son support multilingue.
Cette fonctionnalité permet aux utilisateurs de choisir la langue dans laquelle ils souhaitent utiliser
l'application
L'application supporte plusieurs langues. Les utilisateurs peuvent choisir leur langue
préférée dans les paramètres. Les informations affichées sur la page d'accueil et d'autres sections
de l'application peuvent être traduites en français, arabe ou anglais. Si une langue comme le hindi,
qui n'est pas disponible dans la base de données, est sélectionnée, l'anglais est affiché par défaut.

 Langue Française :

 Langue Arabe :

Page | 40
Chapitre 4 : Présentation de l'application et résultats

2.5.

Figure52: Choix de la langue arabe

la Page de Déconnexion

Pour offrir une expérience utilisateur complète et personnalisée, notre application permet
aux utilisateurs de se déconnecter facilement à tout moment. En naviguant vers la page de
paramètres ou de profil, les utilisateurs peuvent accéder à l'option de déconnexion. En cliquant sur
cette option, l'utilisateur est automatiquement déconnecté de son compte et redirigé vers la page de
connexion.

Page | 41
Chapitre 4 : Présentation de l'application et résultats

Figure54: Déconnexion

3. Partie Admin :

3.1. Authentification d’Admin

Pour accéder à la section d'administration de l'application, l'administrateur doit d'abord

s'authentifier en utilisant son adresse e-mail et son mot de passe

Page | 42
Chapitre 4 : Présentation de l'application et résultats

Figure55: Connexion d’Admin

3.2. Gestion des villes :

Une fois que l'administrateur s'est authentifié avec succès en utilisant son adresse e-mail
et son mot de passe, il est redirigé vers l'interface de gestion de l'application. Dans cette interface,
l'administrateur dispose de la possibilité d'enrichir l'expérience des utilisateurs en ajoutant de
nouvelles villes. Cette fonctionnalité lui permet de saisir les informations relatives à la nouvelle
ville, telles que son nom, sa description et ses principales attractions, tout en ayant la possibilité de
télécharger des photos représentatives de la ville.

Page | 43
Chapitre 4 : Présentation de l'application et résultats

4.

Figure56: Ajoute d’une ville Figure57: Affichage du ville ajoutée

4. Conclusion
Dans ce chapitre, j'ai examinée les étapes clés de la réalisation du projet, en les divisant en
deux parties distinctes : la partie client et la partie administrateur, Ceci permet de donner une vue
d'ensemble de la solution réalisée dans son intégralité.

Page | 44
Conclusion général

CONCLUSION GENERAL

La réalisation de ce projet, visant à digitaliser les catalogues des villes pour les visiteurs et
les touristes, marque une avancée significative dans l'intégration de la technologie au service du
tourisme. L'application mobile CatalogCity, développée dans ce cadre, répond à un besoin
croissant de centralisation et d'accessibilité des informations pour divers types d'activités, allant
des hôtels et restaurants aux magasins d'artisanat et autres services.

CatalogCity, une application ambitieuse, vise à devenir l'outil indispensable pour les
grands événements mondiaux à venir, comme la Coupe du Monde de 2030 au Maroc. En intégrant
des fonctionnalités avancées telles que la réalité augmentée, l'intelligence artificielle, et en
établissant des partenariats stratégiques avec des entreprises locales et des offices de tourisme, elle
se positionne comme un leader dans le secteur.

Élargissant ses services pour inclure des secteurs comme les guides touristiques, la
location de voitures, les plages, les piscines et les services de beauté, Catalog City s'efforce de
répondre aux besoins des utilisateurs et de leur offrir une expérience optimale. En favorisant
l'interaction des utilisateurs et en restant à l'écoute de leurs besoins, cette application incarne
l'avenir du tourisme digital, contribuant à la diversité culturelle et soutenant le développement
économique des destinations locales.

Mon implication dans le développement de CatalogCity durant ce stage a été une

expérience exceptionnelle, me plongeant au cœur des défis du tourisme numérique. Contribuer à ce
projet innovant m'a offert une vision approfondie de cet univers en constante mutation. Ce qui a
particulièrement enrichi mon parcours, c'est mon étroite collaboration avec les technologies de
cloud, en particulier celles d'Amazon Web Services (AWS). Travailler avec ces technologies m'a
fourni bien plus qu'une simple opportunité professionnelle ; cela m'a offert une solide formation
dans un domaine crucial pour le succès de notre projet. Cette expérience m'a également permis de
comprendre l'importance croissante du cloud dans le domaine du tourisme numérique et son rôle
dans la création d'applications innovantes.

Page | 45
Webographie

WEBOGRAPHIE

https://docs.nestjs.com/openapi/types-and-parameters. Mai 25, 2024

https://learn.mongodb.com/learning-paths/data-modeling-for-mongodb. Mai 28, 2024

https://docs.aws.amazon.com/ec2/?icmpid=docs_homepage_featuredsvcs. Juin 01, 2024

https://docs.aws.amazon.com/lambda/?icmpid=docs_homepage_featuredsvcs. Juin 01, 2024

https://docs.nestjs.com/openapi/security#basic-authentication. Juin 02, 2024

https://www.keycloak.org/getting-started/getting-started-zip. Juin 02, 2024

Page | 46