DEPARTE MENT : INFORMATIQUEI

D U T: G E N I E I N F O R M A T I Q U E

Rapport de projet fin d’étude

Réalisation de l’application
mobile Club Sportif

PRÉP ARÉ PAR E N C A D R É PAR:

ZIZI Brahim
MR.IGGAN
JADID Mohamed
NAITBARKA Sara
Dédicace :
On dédie ce travail à :

Nos parents qui nous ont donné beaucoup de soutien

et d’encouragement tout au long de nos études.

Nos frères et sœurs qui nous ont beaucoup

encouragé par leurs souhaits et leurs sincères

invocations.

Nos formateurs qui nous ont dirigé vers le chemin de

succès, leurs compréhensions et leurs nous ont

Permis de mieux apprécier la formation disposée à

l’école.

1
Remerciement :
Tout d'abord, nous voulons remercier le Dieu "‫ "هللا‬Tout Puissant qui

nous a donné la force et la volonté de réaliser au maximum de notre

travail.

Nous tenons à remercier sincèrement notre encadreur, l'enseignant :

« Mr.IGGAN» d’avoir accepté de nous diriger, et pour tous les

conseils et informations qu'il nous a fournis. Et pour tous les

enseignants du département informatique.

Nous remercions les membres du jury pour cet honneur qu'ils nous

font en jugeant cette humble œuvre.

Enfin, nous n'oublions pas nos enseignants qui ont supervisé notre

enseignement tout au long du cycle d’études, et un grand merci

également à tous ceux qui ont contribué directement ou indirectement

à l'aboutissement de ce travail.

2
 Table des matiè res

Dédicace ................................................................................................... 1
Remerciement ............................................................................................ 2
Table des matières....................................................................................... 3
Liste des figures .......................................................................................... 5
Introduction générale ................................................................................... 7
Chapitre 1 :Contexte générale ........................................................................ 8
1. Problématique ...................................................................................................................... 8
2. Présentation de projet............................................................................................................8
3. Objectifs ................................................................................................................................9
Chapitre 2 :Analyse & Conception ..................................................................10
I. Introduction ............................................................................................................................10
1. Besoins fonctionnels ........................................................................................................................... 10
2. Besoins non fonctionnels .................................................................................................................... 11
3. Choix de la démarche .......................................................................................................................... 11
4. La conception...................................................................................................................................... 12
5. Modélisation de notre système ........................................................................................................... 12
a. Diagramme de cas d’utilisation ........................................................................................... 13
b. Diagramme de classe .......................................................................................................... 15
c. Diagramme de séquence……………………………………………………………………………………………………………………………16
Chapitre 3 :Réalisation ................................................................................17
I. Outil de travail ......................................................................................... 17
1. StartUML ............................................................................................................................................ 17
2. Android Studio .................................................................................................................................... 17
3. Le SDK ................................................................................................................................................. 18
4. Firebase .............................................................................................................................................. 18
5. Flutter ................................................................................................................................................. 19
6. Langage Dart ....................................................................................................................................... 20

II. Présentation des interfaces de l’application ........................................................................................ 20

1. Les interfaces d’authentification ............................................................................................. 21

2. Les interfaces d’étudiant…………………………………………………………………………………………………………………………………………..22
3. Les interfaces de l’Admin………………………………………………………………………………………………………………………………………….23
4. La base de donnée(Firebase)………………………………………………………………………………………………………………………………….24
3
5. Conclusion………………………………………………………………………………………………………………………………………………………………………...25

4
 Table des figures
Figure 1: Logo du UML.................................................................................................................................. 11

Figure 2: Diagramme de cas d’utilisation ...................................................................................................... 13

Figure 3 : Diagramme de classe ..................................................................................................................... 15

Figure 4 : Diagramme de séquence ................................................................................................................ 18

Figure 5 : Logo de StartUML......................................................................................................................... 19

Figure 6: Logo d’Android Studio ................................................................................................................... 20

Figure 7: Logo de Firebase. ............................................................................................................................ 21

Figure 8: Logo de Flutter. .............................................................................................................................. 21

Figure 9: Logo de Dart. .................................................................................................................................. 22

Figure 10: Interface 1 ..................................................................................................................................... 23

Figure 11: Interface 2 ..................................................................................................................................... 23

Figure 12: Interface 3 ..................................................................................................................................... 24

Figure 13: Interface 4 ..................................................................................................................................... 25

Figure 14: Interface 5 ..................................................................................................................................... 25

Figure 15: Interface 6 ..................................................................................................................................... 26

Figure 16: Interface 7 ..................................................................................................................................... 26

Figure 17: Interface 8 ..................................................................................................................................... 27

Figure 18: Interface 9 ..................................................................................................................................... 27

Figure 19: connexion de l’admin .................................................................................................................... 28

Figure 20: Interface 8 ..................................................................................................................................... 28

Figure 21: les réservations. ............................................................................................................................ 29

Figure 22:gestion des réservations ................................................................................................................ 29

Figure 23: inscription au tournoi. ................................................................................................................. 30

5
 Introduction générale
Lors de la conception d'une application pour un club sportif, plusieurs éléments clés doivent être
pris en compte pour garantir une expérience utilisateur optimale et répondre aux besoins
spécifiques de la communauté sportive ciblée. Cette introduction se concentrera sur les
différentes étapes impliquéesdans la création d'une telle application, allant de l'analyse des
besoins des utilisateurs à la conception de fonctionnalités personnalisées, en passant par le
développement et les tests. Nous explorerons également l'importance de l'accessibilité, de la
convivialité et de la sécurité dans la conception de l'application, ainsi que l'intégration de
technologies innovantes pour améliorer l'engagement des membres du club et optimiser la gestion
des activités sportives. En combinant une approche centrée sur l'utilisateur avec dessolutions
technologiques de pointe, l'objectif ultime est de créer une application qui enrichit l'expérience
sportive, favorise la communication et renforce le sentiment d'appartenance au club.

Notre rapport de fin d'études explore en détail le processus de développementde cette

application mobile. Nous abordons les différentes étapes, des premières phasesde conception à

la réalisation pratique en passant par la présentation des interfaces graphiques. Nous mettons

l'accent sur les langages de programmation, les outils et les techniques utilisés pour créer une

application fluide, sécurisée et attrayante.

6
 Chapitre 1: Contexte générale

1. Problématique:
Face à la demande croissante d'utilisation des installations sportives dans la Province Orientale,
le défi se pose d'améliorer les processus de réservation, d'assurer un accès équitable pour tous et
d'éviter les problèmes suivants :
 Manque de superviseur disponible pour validation
 Conflits entre équipes pour réserver le stade
 Réservations multiples par semaine par certains étudiants
 Difficulté à former des équipes pour les tournois
 Organisation traditionnelle de tournois
Alors Comment garantir la gestion efficace des réservations de terrains pour éviter les doubles
réservations et assurer que le terrain est disponible au moment où l’étudiant souhaite l’utiliser ?

2. Solution:

Implémentez un système de réservation équitable en faisant alterner les créneaux de réservation

entre les groupes d'élèves ou les équipes. Ce système garantit que tous les groupes ont des

chances égales d'utiliser les installations et le matériel sportifs, évitant les conflits et promouvant

une utilisation juste des ressources

7
3.Objectifs :

 L'objectif principal dans le développement d'une application mobile pour un club sportif est
de fournir une plateforme centralisée qui facilite la communication et la coordination entre les
membres du club, les entraîneurs et les responsables. Cette application propose des
fonctionnalités telles que la gestion des horaires, les inscriptions et les paiements en ligne, le
suivides performances, la communication en temps réel, le contenu personnalisé et la gestion
des installations. L'objectif est d'améliorer l'expérience des membres en simplifiant les processus
administratifs, en favorisant l'engagement et en renforçant le sentiment d'appartenance à la
communauté sportive.

8
 Chapitre 2: Analyse & conception

1. Introduction:

 Le but principal de l'application est d'être utile à ses utilisateurs. Par conséquent il est important de

comprendre leurs désirs et leurs besoins. Donc, une étape essentielle pour tout programme ou cycle de

développement conceptuel est de mener une étude préliminaire.

 L'objectif principal de cette étape est de comprendre le contexte du système, de mieux illustrer les

besoins fonctionnels et non fonctionnels, de montrer les acteurs et de définir des cas d'utilisation. Dans

ce chapitre, nous choisissons l'approche UML pour la modélisation des différents diagrammes d’une

façon claire et plus compréhensible.

2. Besoins fonctionnels:

Cette partie est réservée à la description des exigences fonctionnelles des différents acteursde

l’application. Le système doit permettre à l’utilisateur :

□ Authentification de l’Admin et les étudiants.

□ Réservation de terrain.
□ Inscription au tournoi.

9
 3. Besoins non fonctionnels:

Ce sont les besoins qui caractérisent le système, les spécifications supplémentaires c’est-à-dire tout ce

qui concerne la qualité, la fiabilité, les performances, les aspects juridiques, ….

 L’utilisabilité : fait référence aux aspects de l’interface utilisateur.

 La Performance : les performances d’exécution du système en termes de tempsde

réponse, de facilité de maintenance à long terme.

 La disponibilité : possibilité d’utiliser l’application par n’importe quel utilisateur.
 La fiabilité : les données qui sont fournies par l’application doivent être fiables.

En cas d’indisponibilité du système, au moins une solution locale

provisoire doit être mise en place.

 La sécurité : le système doit être sécurisé (une sécurité totale) surtout auniveau

de gestion des accès aux données

4. Choix de la démarche:

Pour représenter graphiquement les modèles, il existe plusieurs langages de modélisation. Parmi lesquels,

on va utiliser le langage UML. En effet, le choix d’UML n’est pas aléatoire ; il s’agit d’un standard très

répandu et qui a fait ses preuves dans le domaine de la modélisation. UML n’est, toutefois, qu’un langage

permettant de modéliser un problème d’une façon standard (contrairement à MERISE qui est un langage

assorti d’une méthode). Donc, Il doitêtre accompagné d’un processus ou d’une méthode qui devra

guider la modélisation, étapepar étape jusqu’à la réalisation.

10
 5. La conception:
□ Présentation du langage UML:

UML est l’acronyme anglais pour « Unified Modeling Language ». On le traduit par «

Langage de modélisation unifié ». La notation UML est un langage visuel constitué d’un

ensemble de schémas, appelés des diagrammes, qui donnent chacun une vision différente du

projet à traiter. UML nous fournit donc des diagrammes pour

représenter le logiciel à développer : son fonctionnement, sa mise en route, lesactions

susceptibles d’être effectuées par le logiciel, etc.

Figure 1: Logo du UML

6. Modélisation de notre système:

Pour la modélisation de notre travail, nous avons utilisés trois diagrammes : le diagramme de

classe pour modéliser l’aspect statique et les diagrammes de cas d’utilisation pour modéliser

l’aspect dynamique et les diagrammes de séquence.

a. Diagramme de cas d’utilisation :

Ce diagramme est destiné à représenter les besoins des utilisateurs par rapport ausystème.

Il constitue un des diagrammes les plus structurants dans l’analyse d’un système. Lareprésentation

d’un diagramme de cas d’utilisation met en jeu les concepts suivants :

11
Acteur : Représente un rôle joué par une entité externe (utilisateur humain, dispositifmatériel ou autre
système) qui interagit directement avec le système étudié.

Cas d’utilisation (use case) : Représente un ensemble de séquences d’actions qui sont réalisées
par le système et qui produisent un résultat observable intéressant pour un acteur particulier.

Les relations entre les acteurs : La seule relation entre les acteurs est la relation de
généralisation. Quand un acteur fils hérite d’un acteur père, il hérite en réalitéde toutes les
associations du père.

Les relations entre cas d’utilisation : on peut distinguer les trois types de relationsentre cas
d’utilisation.

□ Relation d’inclusion : Une relation d’inclusion d’un cas d’utilisation A

par rapport à un cas d’utilisation B signifie qu’une instance de A
contient le comportement décrit dans B
□ Relation d’extension : Une relation d’extension d’un cas d’utilisation A
par un cas d’utilisation B signifiée qu’une instance de A peut êtreétendue
par le comportement décrit dans B.

12
Figure 2: Diagramme de cas d’utilisation

13
 b. Diagramme de classe :

Le diagramme de classes est considéré comme le plus important de la modélisation orientée objet, il

est le seul obligatoire lors d’une telle modélisation.

Alors que le diagramme de cas d’utilisation montre un système du point de vue des acteurs, le

diagramme de classes en montre la structure interne. Il permet de fournir une représentation abstraite

des objets du système qui vont interagir ensemble pour réaliser les cas d’utilisation. Il est important de

noter qu’un même objet peut très bien intervenir dans la réalisation de plusieurs cas d’utilisation. Les

cas d’utilisation ne réalisent donc pas une partition des classes du diagramme de classes. Un diagramme

de classes n’est donc pas adapté (sauf cas particulier) pour détailler, décomposer, ou illustrer la

réalisation d’un cas d’utilisation particulier.

Il s’agit d’une vue statique car on ne tient pas compte du facteur temporel dans le comportement du

système. Le diagramme de classes modélise les concepts du domaine d’application ainsi que les concepts

internes créés de toutes pièces dans le cadre de l’implémentation d’une application. Chaque langage de

Programmation Orienté Objets donne un moyen spécifique d’implémenter le paradigme objet

(pointeurs ou pas, héritage multiple ou pas, etc.), mais le diagramme de classes permet de

modéliser lesclasses du système et leurs relations indépendamment d’un langage de programmation

particulier.

Les principaux éléments de cette vue statique sont les classes et leurs relations :

 Association.

 Généralisation.

 Plusieurs types de dépendances, telles que la réalisation et l’utilisation.

14
Figure 3 : Diagramme de classe

15
 C. Diagramme de séquence :

 Le diagramme de séquence permet de montrer les interactions d'objets dans

le cadre d'un scénario d'un diagramme des cas d'utilisation. Dans un souci de
simplification, on représente l'acteur principal à gauche du diagramme, et les acteurs
secondaires éventuels à droite du système. Le but est de décrire comment se déroulent les
interactions entre les acteurs ou objets.
La dimension verticale du diagramme représente le temps, permettant de visualiser l'enchaînement
des actions dans le temps, et de spécifier la naissance et la mort d'objets. Les périodes d'activité
des objets sont symbolisées par des rectangles, et cesobjets dialoguent à l'aide de messages.

Plusieurs types de messages (actions) peuvent transiter entre les acteurs et objets.
message simple : le message n'a pas de spécificité particulière d'envoi et de réception.
•
message avec durée de vie : l'expéditeur attend une réponse du récepteur pendant uncertain
•
temps et reprend ses activités si aucune réponse n'a lieu dans un délai prévu.
message synchrone : l'expéditeur est bloqué jusqu'au signal de prise en compte par le
•
destinataire. Les messages synchrones sont symbolisés par des flèches barrées.
message asynchrone : le message est envoyé, l'expéditeur continue son activité que le
•
message soit parvenu ou pris en compte ou non. Les messages asynchrones sont
Symbolisés par des demi-flèches.
message dérobant : le message est mis en attente dans une liste d'attente de
•
traitement chez le récepteur.
Le langage permet de décaler l'envoi et la réception des messages, pour montrerles
délais de communication non négligeables. La plupart des ateliers UML ne prennent
cependant pas en compte cette spécificité.

16
17
Figure 4 : Diagramme de séquence

18
 Chapitre 3: Réalisation

I. Outils de travail:

1. StartUML :
Est un logiciel de modélisation UML, qui a été « cédé comme open source » parson

éditeur, à la fin de son exploitation commerciale (qui visiblement continue ...), sous une

licence modifiée de GNU GPL.

Figure 5 : Logo de StartUML

2.Android Studio :
Est un environnement de développement pour développer des applications mobiles

Android. Il est basé sur IntelliJ IDEA et utilise le moteur de production Gradle. Il peut être

téléchargé sous les systèmes d'exploitation Windows, MacOset Linux. Android Studio est

annoncé le 15 mai 2013 lors du Google I/O et une version Early Access Preview est

disponible le jour même. Le 8 décembre 2014, Android Studio passe de version bêta à

version stable 1.0. L'environnement devient alors conseillé par Google, et Eclipse est

délaissé. Il permet principalement d'éditer les fichiers Java/Kotlin et Dart et les fichiers

de configuration XML d'une application Android.

19
 Figure 6: Logo d’Android Studio

2. Le SDK (Software Development Kit):

Le Kit de développement logiciel Android (Android SDK) contient les outils

nécessaires pour créer, compiler et déployer les applications Android.

La plupart de ces outils sont en ligne de commande. Les outils sont :

□ Les librairies Java pour créer des logiciels.□

□ Les outils de mise en boîte des logiciels.□

□ AVD : Android Virtual Device, un émulateur de tablettes pour tester les applications

il y a aussi SDK Manager ou le gestionnaire du SDK, une application qui permet de

choisir les composants à installer et mettre à jour.

3. Firebase :
Est un ensemble de services d'hébergement pour n'importe quel type d'application

(Android, iOS, JavaScript, Node.js, Java, Unity, PHP, C++ ...). Il propose d'héberger en

NoSQL et en temps réel des bases de données, du contenu, de l'authentification sociale

(Google, Facebook, Twitter et GitHub), etdes notifications, ou encore des services, tel

que par exemple un serveur decommunication temps réel. Firebase a été lancé en 2011

sous le nom d'Envolve, par Andrew Lee et par James Templin.

20
 Figure 7: Logo de Firebase.

4. Flutter:
Est un ui (user interface) Framework de développement d'applications mobiles open

source créée par Google. Il est utilisé pour développer des applicationspour Android

et iOS et constitue également la méthode principale de création d'applications pour

Google Fuchsia. La première version de Flutter s'appelait "Sky" et fonctionnait sous le

système d'exploitation Android. Il a été dévoilé lors du sommet des développeurs de Dart

2015, avec l'intention déclarée de pouvoir restituer régulièrement à 120 images par

seconde. Lors du discours des Google Développer Days à Shanghai, Google a annoncé la

sortie de Flutter Release Preview 2, la dernière version la plus importante avant Flutter

1.0. Le 4 décembre 2018, Flutter 1.0 a été publié lors de l'événement Flutter Live,

désignant la première version "stable" du Framework.

Figure 8: Logo de Flutter.

21
 5. Dart:
Est un langage de programmation web développé par Google. Son but initial estde

remplacer JavaScript, la priorité actuelle des développeurs est que le codeDart puisse

être converti en code JavaScript compatible avec tous les navigateurs modernes. Dart

peut aussi être utilisé pour la programmation côtéserveur, ainsi que le développement

d'applications mobiles (via l'API Flutter). Dart est un langage orienté objet, il est

productif, rapide et portable, conçu pourêtre familier et donc accessible à de nombreux

développeurs existants, grâce àses aspects orientés objet et sa syntaxe qui (selon ses

utilisateurs) permet àtout développeur C++, C, Objective-C ou Java d'être productif en

quelques jours.

Figure 9: Logo de Dart.

II. Présentation des interfaces de l’application :

Dans cette partie du mémoire, nous allons présenter les principales fonctionnalités de notreapplication

par la description de quelques interfaces.

1.Interface d’authentification:

22
 Figure 10: Interface 1 Figure 11: Interface 2

 Figure 10 : présente premier interface d’application, auquel l’utilisateur doit

sélectionner un bouton :

 Etudiant :si l’utilisateur est un étudiant.

 Admin :si l’utilisateur est un admin.

 Figure 11 : cette interface est pour la connexion si l’étudiant a déjà un compte ,sinon l’étudiant

23
 A besoin d’une inscreption(figure13).

Figure 12: Interface 3

 Figure 12 : Représente l’interface d’inscription, qui contient trois champs Email ,Mot de passe et

confirmation du mot de passe . Dans cette interface, l’utilisateur doit spécifier est ce qu’il est un admin,

un étudiant à travers l’email. Tel que :

Admin : leur email doit se terminer par @admin.com.

 Etudiant : leur email doit se terminer par @university.edu.

2.Les interface d’étudiant:

24
 Figure 13: Interface 4 Figure 14: Interface 5

 Figure 13 : Présente première interface d’étudiant .

 Figure 14 :l’interface de réservations, premièrement l’ étudiant choisie le numéro du terrain,

puis il saisie le nom d’équipes , la date et les joueurs (10 au max). .

25
 Figure 15: Interface 6 Figure 16: Interface 7

 Figure 15 : le profile d’ étudiant contient Nom , Prénom ,E-mail et l’Age .

 Figure 16 :l’interface des paramètres , l’ étudiant modifier ses informations et aussi changer

le mot de passe de son compte .

26
 Figure 17: Interface 8 Figure 18: Interface 9

 Figure 17 : c’est l’interface calendrier permet a l’étudiant de voir les dates des terrains

Réservées .

27
  Figure 18 :l’interface des notifications, l’ étudiant recevoir des messages qui contient la réponse

d’admin si la réservation acceptée au refusée , les équipes inscrits au tournoi , le scores de

matches …etc.

3.Les interfaces de l’Admin :

Figure 19: connexion de l’admin Figure 20: Interface 8

28
 Figure 19 : : l’interface de connexion de l’admin qui as un comptes uniques , ce comptes donné par

l’administration .

 Figure 20 :la première interface de l’admin .

Figure 21: les réservations. Figure 22:gestion des réservations

 Figure 21 : représente les informations sur les réservations effectuées .

 Figure 22 : cette interface permet a l’admin de confirmer ou refuser la réservation du terrain.

29
 Figure 23: inscription au tournoi.

 Figure 23 : cette interface permet a l’admin d’effectues l’inscription des équipes qui ont déjà payé

Tarifs du tournoi , sur une limite des équipes (16 équipes au max ) .

30
 4.La base de données (firebase):

On a la base de données contient deux parties principales dans notre projet , une partie

d’authentification (les comptes des étudiants et le compte de l’admin ) . Une partie sur le stockages

(les données stockées).

1.partrie authentification :

31
2.partie stockages :

Les données sont stockées comme des collections , la 1ere collection (réservations) :

la 2 éme collection (inscriptions au tournoi ) :

32
33
 Conclution :
A la fin de ce rapport, nous avons présenté la démarche complète suivie pour

réaliser le projet de "Conception et développement d'une application mobile

multiplateforme" dans le cadre de la réalisation du projet de fin d'étude pour

l'obtention du diplôme 'DUT' pour l'année académique 2022/2023.

Pour pouvoir finaliser notre rapport, nous avons commencé notre travail, en

replaçant le projet dans son contexte général, où nous avons étudié et exposé le

problème. Dans un deuxième temps, nous tenté d'étudier cette problématique, et ce

en en extrayant les besoins fonctionnels et non fonctionnels qui seront le repère de

notre travail dans les différentes étapes du projet. Dans la troisième partie, analyse

et conception, où une présentation conceptuelle du projet a été donnée. Dans une

dernière étape, nous sommesarrivés à la réalisation du projet en nous référant aux

études développées auniveau des étapes précédentes.

La préparation de ce projet a été une expérience très importante, sur le plan

technique et sur le plan professionnel. Pour le niveau technique, cela représentait

une bonne opportunité de mettre en œuvre les connaissances théoriques que nous

avons acquises tout au long du cursus universitaire, et aussi de les enrichir en utilisant

une stratégie de travail bien étudiée ; cette stratégie nous a permis d'appliquer les

différentes étapes de la modélisation UML unifiée.

34