DIPLOME UNIVERSITAIRE DE TECHNOLOGIE

GENIE INFORMATIQUE

RAPPORT DE PROJET DE FIN D’ETUDES

Sous le thème :

Sport news Mobile Application

Réalisé par :
 Idbaba Asmae
 Erraha Malouha
 Kazaz Mariam

Encadré par :
 Dr Salek RIADI : Enseignant-chercheur à l’EST de Laâyoune


Soutenu devant le Jury composé de :

 Dr Salek RIADI : Enseignant-chercheur à l’EST de Laâyoune


Période de projet :
 Du 20/02/2022 au 20/03/2022

Année universitaire 2022/2023

 Remerciement

Avant de commencer la présentation de ce projet, nous tenons à profiter de cette occasion

pour remercier toutes les personnes qui ont contribué de près ou de loin à la réalisation de ce
projet.

Tout d'abord, nous tenons à exprimer notre profonde gratitude à tous nos professeurs,
enseignants et à tous ceux qui travaillent à EST pour les soutiens et l'accueil cordial qu'ils
nous ont reçus.

Ainsi que PR. SALEK Raidi, mon professeur et superviseur pour tous ses conseils et son
soutien tout au long du projet et pour avoir partagé avec nous toute son expérience et ses
compétences.

Enfin, nos remerciements particuliers vont à nos familles pour l'amour, le soutien, la patience
et les encouragements sans fin, non seulement au cours des deux dernières années, mais tout
au long de notre éducation.

1
1 Table des matières
Remerciement.......................................................................................................................................1
Chapitre 1. Introduction..................................................................................................................4
1.1 Présentation de la plateforme Sportnews............................................................................4
1.2 Présentation de Sportnews Mobile Application.................................................................5
Chapitre2. Analyse et conception de Sportnews Mobile Application...............................................6
2.1 Architecture globale de la plateforme.......................................................................................6
2.2 Architecture de Sportnews Mobile Application.................................................................7
2.2.1 Diagramme de classe...........................................................................................................7
2.2.2 Diagramme de cas d’utilisation..........................................................................................8
2.2.3 Diagramme de séquence......................................................................................................8
2.2.4 Diagramme d’activité..........................................................................................................8
Chapitre 3. Choix techniques...........................................................................................................10
3.1 Outils de développement..........................................................................................................10
3.1.1 Java.....................................................................................................................................10
3.1.2 Spring-mvc.........................................................................................................................10
3.1.3 MySQL...............................................................................................................................11
3.1.4. JavaScript..........................................................................................................................11
3.1.5 CSS3...................................................................................................................................11
3.1.6 HTML5...............................................................................................................................12
3.1.7 Bootstrap............................................................................................................................12
3. 2 Outils de tests...........................................................................................................................13
3.2.1 Apache Maven...................................................................................................................13
3.2.2 Xampp................................................................................................................................13
3.2.3 Apache Tomcat..................................................................................................................13
Chapitre 4. Réalisation.......................................................................................................................15
Chapitre 5. Conclusion.......................................................................................................................20
Conclusion.......................................................................................................................................20
Références...........................................................................................................................................21

2
 Liste des figures

Figure 1 : Logo IOS....................................................................................................................5

Figure 2 : Logo d’Android..........................................................................................................5

Figure 3 : Diagramme de classe..................................................................................................8

Figure 4:Diagramme de cas d'utilisation.....................................................................................9

Figure 5:Diagramme de séquence...............................................................................................9

Figure 6:Diagramme d’activité.................................................................................................10

Figure 7:Logo de java...............................................................................................................11

Figure 8:Logo de Spring...........................................................................................................12

Figure 9:Logo de MYSQL........................................................................................................12

Figure 10:Logo de JavaScript...................................................................................................12

Figure 11:Logo de css...............................................................................................................13

Figure 12:Logo de Html............................................................................................................13

Figure 13:Logo de Bootstrap....................................................................................................13

Figure 14:Logo de Maven.........................................................................................................14

Figure 15:Logo de Xampp........................................................................................................14

Figure 16:Apache Tomcat.........................................................................................................15

3
Chapitre 1. Introduction
C’est grâce à ce projet de fin d’études que nous avons eu l’opportunité de cumuler les
connaissances théoriques avec celles de la pratique. Tout ça en vue de l’obtention du diplôme
universitaire de technologie (DUT) en génie informatique au sein de l’Ecole Supérieure de
Technologie à Laâyoune. Le projet qui nous a été proposé « Sport news Mobile » une
application mobile utile pour consulter les actualités des compétitions de football.

Cette Etude entre dans l’objet de la conception et le développement d’une application mobile.

1.1 Présentation de la plateforme Sportnews

Une création application mobile à également besoin d’une plateforme pour fonctionner,
ANDROID et IOS sont deux principaux systèmes d’exploitation mobile du marché.

Le système d’exploitation IOS est utilisé seulement sur les supports Apple tels que les IPhone
et les IPAD. La société Apple Inc., ne délivre pas de licence IOS pour l’exploitation de
matériel tiers, de sorte que système est disponible uniquement sur leurs propres appareils.

Le développement IOS fait référence au processus de développement pour les appareils

mobiles/tablettes basés sur APPLE IOS.

Figure 1 : Logo IOS

ANDROID est le système d'exploitation mobile crée par Google. Il équipe la majorité des
téléphones portables du moment (smartphones). Son principal concurrent est Apple avec

4
l'iPhone. Android est un système vous permettant de personnaliser votre téléphone,
télécharger des applications (navigateur Internet, GPS, Facebook...). Android équipe
également l.

Figure 2 : Logo d’Android

1.2 Présentation de Sportnews Mobile Application

Tout d’abord une application mobile est un logiciel à télécharger et à installer sur
Smartphone, la tablette. Elle fonctionne comme un logiciel classique sur l‘ordinateur, elle
requiert un développement particulier pour chaque type de système d’exploitation sur lesquels
les utilisateurs veulent utiliser l’application (ANDROID, IOS, Windows phone).

Application mobile sportnews est un programme téléchargeable sur des smartphone ou des
tablettes, il occupe une place très importante dans notre vie quotidienne car il permet aux
utilisateurs de consulter les actualités des compétitions sportives.

5
Chapitre2. Analyse et conception de
Sportnews Mobile Application

2.1 Architecture globale de la plateforme

✓ Architecture d’Android

Au niveau technique, le système d’exploitation Android est composé de 5 couches distinctes

(Lee, 2012) comme illustré dans l’image au-dessous Le noyau Linux (Kernel) permet de faire
le lien entre l’aspect logiciel d’Android et l’aspect matériel.

Nous pouvons y retrouver, par exemple, un pilote pour contrôler la caméra.

La couche librairies contient un panel de librairies natives au smartphone comme SQLite, un

gestionnaire pour des bases de données. Une de ces couches, appelées Android runtime,
contient un panel de plusieurs librairies afin que les développeurs puissent écrire des
applications Android en Java. Cette couche comporte une machine virtuelle, Dalvik, qui
exécutera les applications écrites en Java. Les API (Application Programming Interface) sont
fournis par la couche Applications Framework. La dernière couche, applications, correspond
aux nombreuses applications se trouvant sur le smartphone tel que les contacts, les sms ou le
calendrier.

✓ Architecture d’IOS Comme expliqué précédemment, les appareils d’Apple tournent sous
un système d’exploitation appelé IOS.

6
La première couche, Corê OS, est la couche basse du système. C’est elle qui gère par exemple
le système sécurité ou bien même les certificats (Martin, 2012).

Les Corés Services peuvent supporter, par exemple, l’accès vers une base de données SQLite.
La couche Média, comme son nom l’indique, permet de gérer les médias audios ou vidéo.

La dernière, quant à elle, est l’API qui est constituée de plusieurs programmes pré-écrits. Elle
est dédiée à l’écriture des applications (Martin, 2012).

2.2 Architecture de Sportnews Mobile Application

2.2.1 Diagramme de classe
Le diagramme de classe est une étape nécessaire pour la conception de la base, il va nous
aider à l’implémenter des différentes tables de notre base de données.

La figure suivante représente le diagramme de classe de notre application, dévoilant la

manière avec laquelle la base de données est construite :

Figure 3 : Diagramme de classe

7
2.2.2 Diagramme de cas d’utilisation
Le diagramme des cas d’utilisation est une représentation du comportement du système
de point de vue de l’utilisateur, c’est une définition des besoins qu’attend un utilisateur du
système, il contient tous les cas d’utilisation en liaison directe ou indirecte avec les acteurs
(utilisateur, admin).

Figure 4:Diagramme de cas d'utilisation

2.2.3 Diagramme de séquence

Lorsqu’un admin souhaite ajouter, modifier ou supprimer un article

Il se connecte et traite par base de données

Figure 5:Diagramme de séquence

8
2.2.4 Diagramme d’activité
Lors authentification alors le mot de passe et l’e-mail sont corrects. Les questions peuvent
gérer l’article (ajouter, modifier ou supprimer) et gérer compétition gérer catégorie.

Figure 6:Diagramme d’activité

9
Chapitre 3. Choix techniques
3.1 Outils de développement
3.1.1 Java
Java est un langage de programmation et une plate-forme informatique créée par Sun
Microsystems. Utilisé par 9 millions de développeurs dans le monde, ce langage est
nécessaire pour le fonctionnement de beaucoup d’applications et de sites Web. Il est la base
de la plupart des applications en réseau : des jeux, des téléphones portables à Internet, du
contenu web et des logiciels entreprises.

Grâce aux technologies Java, les développeurs peuvent écrire des logiciels sur une plate-
forme, les exécuter sur d’autres plateformes, créer des programmes qui peuvent être exécutés
dans un navigateur web, développer des applications côté serveur, combiner des applications
ou des services basés sur le langage Java et écrire des applications efficaces pour les
téléphones portables.

Java est disponible dans tous les systèmes d’exploitation tels que Windows, Mac, Linux et
dans les téléphones portables sous Android. Cette multiplicité de support est avantageuse, car
cela permet aux développeurs de créer un programme et de le faire fonctionner sur plusieurs
ordinateurs sans devoir recréer un nouveau programme.

Figure 7:Logo de java

3.1.2 Spring-mvc
Spring MVC permet de construire des applications Web en Java. Comme son nom le suggère,
il utilise le principe du Modèle/Vue/Contrôleur (MVC) en association avec le modèle IoC
(Inversion of Control) du Spring Framework.

10
11
 Figure 8:Logo de Spring

3.1.3 MySQL
Le système de gestion de base de données relationnelle (SGBDR) open source Oracle MySQL
s'appuie sur le langage de requête structuré SQL (Structured Query Language). Il est
compatible avec presque toutes les plateformes notamment Linux, UNIX et Windows. Utilisé
pour toutes sortes d'applications.

Figure 9:Logo de MYSQL

3.1.4. JavaScript
JavaScript est un langage de script incorporé dans un document HTML. Historiquement il
s'agit même du premier langage de script pour le Web. Ce langage est un langage de
programmation qui permet d'apporter des améliorations au langage HTML en permettant
d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur et non du
serveur web.

Figure 10:Logo de JavaScript

3.1.5 CSS3
Le terme CSS est l’acronyme anglais de Cascading Style Sheets qui peut se traduire par «
feuilles de style en cascade ». Le CSS est un langage informatique utilisé sur l’internet pour
12
mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelé les
fichiers CSS, comprennent du code qui permet de gérer le design d’une page en HTML.

Figure 11:Logo de css

3.1.6 HTML5
Le langage de balisage hypertexte (HTML) est le langage de balisage standard pour les
documents conçus pour être affichés dans un navigateur Web. Il peut être assisté par des
technologies telles que les feuilles de style en cascade (CSS) et les langages de script tels que
JavaScript.

Figure 12:Logo de Html

3.1.7 Bootstrap
Bootstrap est un projet open source créé à l'origine par Twitter pour permettre la création de
premières pages Web mobiles et réactives. Bootstrap dispose d'un ensemble standard de
classes qui permet aux développeurs de créer rapidement des applications qui s'adaptent aux
périphériques de toutes tailles et incorporent des composants communs tels que les boîtes de
dialogue et la validation. Bootstrap est devenu un standard de facto pour la conception Web.

Figure 13:Logo de Bootstrap

13
3. 2 Outils de tests
3.2.1 Apache Maven
Apache Maven (couramment appelé Maven) est un outil de gestion et d'automatisation de
production des projets logiciels Java en général et Java EE en particulier. Il est utilisé pour
automatiser l'intégration continue lors d'un développement de logiciel

Figure 14:Logo de Maven

3.2.2 Xampp
XAMPP est un ensemble de logiciels permettant de facilement créer une interface web
interagissant avec une base de données SQL !

o X pour cross-plateforme (LAMPP pour Linux, WAMPP pour Windows,)

o A pour Apache
o M pour MySQL
o P pour PHP
o P pour Perl

Xampp : MYSQL

MySQL est un système de gestion de bases de données SQL

Figure 15:Logo de Xampp

3.2.3 Apache Tomcat

Apache Tomcat est un logiciel de serveur d'applications web open source conçu pour la
programmation en Java et développé et maintenu par Jakarta, le groupe de projets open source

14
Java de la fondation Apache. L'objectif initial du logiciel Apache Tomcat est d'héberger et de
déployer les servlets Java

Figure 16:Apache Tomcat

15
Chapitre 4. Réalisation
Page user :
Cette page affiche la page d'accueil de l'application

16
Page de post :
Cette page affiche l'article d'un post

17
Login d’admin :
L'accès aux pages de l'application est interdit sans connexion au compte d'admin

Dashboard :
L'admin a la possibilité de supprimer ou modifier le post

18
Ajouter article :
L'admin a la possibilité d'ajouter un post

Ajouter catégories :
L'admin peut ajouter une catégorie

19
Ajouter compétition :
L'admin a la possibilité d'ajouter une compétition

Chapitre 5. Conclusion
Conclusion
Ce travail a été réalisé dans le cadre de notre projet de fin d'études, et s'est basé sur la
réalisation d'une application mobile, ceci qui nous amené à découvrir la plateforme de
développement et à enrichir notre savoir et notre expérience.

Au cours de la phase de réalisation de notre application, nous avons entamé par une étude
préalable sur le domaine de sports et ses catégories pour assimiler le système, cette phase a
constitué le point de départ à l'étape d'analyse pour créer une meilleure application possible.
Puis nous avons procédé à la phase de l'analyse qui a permis la conception d'une architecture
de base qu'est le point de départ à la conception dans laquelle on utilise les diagrammes UML
pour décrire et visualiser les différentes parties de l’application. Cependant dans la phase de
réalisation, on utilise les langages des programmations pour traduire ces diagrammes UML en
code pour que l’application puisse fonctionnes.

20
Références
_ https://www.wikipedia.org/
_ https://www.beinsports.com/en/
_ https://www.google.com/

21