RAPPORT DE STAGE

Stage en développement web

Juillet 2021- Août 2021

Fedi Baccouche
Etudiant 4ème année en cycle d’ingénieur en informatique -
Option : Data Science

Année universitaire :
2020/2021
Encadré par :
Mme Rihab Zayani
Remerciements :

Je tiens à remercier tout particulièrement Mme Rihab Zayani

pour m’avoir accueilli dans son entreprise pour réaliser mon
stage d’été.

1
 Table des matières

1 Introduction..................................................................................................................... 4
1.1 Présentation de PiLand :..........................................................................................4
1.1.1 Piland : la start-up.............................................................................................4
1.1.2 Les activités de PiLand.....................................................................................4
1.2 Mission..................................................................................................................... 5
1.2.1 Présentation :....................................................................................................5
1.2.2 Origine du besoin :............................................................................................5
1.3 Solution proposée....................................................................................................6
1.4 Choix de la méthodologie de travail.........................................................................6
1.4.1 Pourquoi RUP ?................................................................................................6
1.5 Conclusion............................................................................................................... 7
2 Analyse globale............................................................................................................... 8
2.1 Introduction.............................................................................................................. 8
2.2 Identification des acteurs..........................................................................................8
2.3 Identification des exigences fonctionnelles...............................................................8
2.4 Identification des exigences non fonctionnelles........................................................9
2.5 Diagramme des cas d’utilisation.............................................................................10
2.6 Diagramme de séquences.....................................................................................11
2.7 Diagramme de classes...........................................................................................15
2.8 Conclusion :...........................................................................................................15
3 Conception.................................................................................................................... 16
3.1 Description de quelques cas d’utilisation................................................................16
3.2 L’architecture logicielle...........................................................................................19
4 Réalisation.................................................................................................................... 20
4.1 Environnement de développement.........................................................................20
4.2 Langages et librairies.............................................................................................22
4.3 Description du projet..............................................................................................23
5 Conclusion.................................................................................................................... 29

2
 Table des figures

Figure 1 : diagramme des cas d’utilisation............................................................................11

Figure 2: authentification diagramme des séquences...........................................................12
Figure 3 : lancer un quiz diagramme des séquences...........................................................13
Figure 4 : check answer diagramme de séquences..............................................................14
Figure 5 : diagramme de classes..........................................................................................15
Figure 6 : schéma de l’architecture MVC..............................................................................19
Figure 7 : interface d’accueil.................................................................................................23
Figure 8 : interface authentification.......................................................................................24
Figure 9 : interface choix du rôle..........................................................................................24
Figure 10 : interface s’inscrire en tant que student...............................................................25
Figure 11 : interface s'inscrire en tant que teacher...............................................................26
Figure 12 : interface d’accueil teacher..................................................................................27
Figure 13 : interface afficher les statistiques et le score des enfants....................................27
Figure 14 : interface passer un quiz.....................................................................................28
Figure 15 : interface chercher les camarades de classe / afficher la liste des élèves avec
leurs scores.......................................................................................................................... 28

3
1 Introduction

Dans le cadre de ma formation d’ingénieur à ESPRIT j’ai

réalisé un stage d’été chez PiLand, entre les mois de juillet
2021 et Août 2021 Pendant ce stage, j’ai eu l’opportunité de
participer à des missions diverses qui m’ont permis
d’apprendre le métier de développeur et de m’épanouir aussi
bien dans le plan professionnel que personnel.

1.1 Présentation de PiLand :

1.1.1 Piland : la start-up

Piland est une start-up innovante créée en 2018.

Piland a acquis une compétence dans la conception graphique
et le développement Web front-end où plusieurs références en
Tunisie et à l’international ont été enregistrées.

1.1.2 Les activités de PiLand

Piland est une start-up spécialisée dans le développement du

contenu numérique pour enfants. Elle a participé à l’animation
d’ateliers technologiques visant à doter les participants (entre 5
et 12 ans) des capacités à développer des jeux en utilisant le
langage Scratch. En outre, Piland a organisé, en parallèle avec
l’événement annuel Hackfest, la compétition CryptoKid Party
2018.

4
1.2 Mission

1.2.1 Présentation :

J’avais pour mission de développer une application web e-

learning destinée aux enfants . Cette application permet
de augmenter l’assimilation et d’accompagner l’apprentissage
des enfants qui participent aux différentes formations
proposées par l’entreprise PiLand .
Les différentes interfaces de l’application seront très faciles à
utiliser et les formateurs pourront suivre l'évolution et le progrès
des enfants à l’aide d’un espace Teacher .
L’espace Teacher permettra aux formateurs d’afficher les
statistiques des quizz et d’analyser les scores .

1.2.2 Origine du besoin :

Le besoin d’une telle application n’est pas né d’une demande

explicite d’un client . En effet , l’entreprise a décidé selon sa
politique d’amélioration continue de ses prestations à décider
d’ajouter plusieurs services et plateformes.

5
1.3 Solution proposée
Pour bien encadrer les enfants, la création d’une plateforme e-
learning demeure une élément important à bien maîtriser . En
effet il s’agit de concevoir et développer une plateforme qui
contient des quiz à plusieurs niveaux et par rapport à plusieurs
thèmes (culture générale, math, géographie, …) .
Le progrès de chaque enfant est contrôlé et surveillé par son
formateur qui lui est associé.
La plateforme nommé PiLand offre plusieurs fonctionnalités qui
sont les suivantes :
→ L’application offre plusieurs niveaux à chaque thème avec un
score sur 100 .
→ Elle encourage l’enfant à développer l’esprit de la concurrence en
affichant les résultats des autres enfants.
→Elle permet aux formateurs de faire le suivi des enfants en affichant
des statistiques et des chartes graphiques .

1.4 Choix de la méthodologie de travail

Tout projet ayant un niveau de complexité considérable rend
l’adoption d’une méthodologie du développement une
nécessité pour garantir une qualité acceptable.

1.4.1 Pourquoi RUP ?

Nous avons choisi la méthode puisqu’elle nous permet de bien

gérer notre projet dans les délais prévus.
Cette méthodologie nous permettra d'élever le niveau
d’abstraction et de formaliser le problème afin d'implémenter
une approche itérative en intégrant progressivement les
différentes fonctionnalités de notre plateforme.

6
Tout au long du projet , chaque intégration est faite étape par
étape d’une manière continue pour s'assurer tôt d’un certain
niveau de qualité.

1.5 Conclusion

Ce chapitre a été consacré à la spécification du projet , à

travers lequel nous avons présenté son cadre général ainsi que
l’origine du besoin et la solution proposée que nous allons
traiter son analyse , sa conception ainsi que sa réalisation au
niveau des chapitres suivants .

7
2 Analyse globale

2.1 Introduction

Dans ce chapitre on va identifier les acteurs ainsi que les

exigences fonctionnelles et non fonctionnelles. Cette
identification nous permettra d’établir une vision globale du
produit.

2.2 Identification des acteurs

Un acteur est un rôle joué par une entité externe (utilisateur ,
dispositif matériel ou autre système ) .
Il peut consulter ou/et modifier l'état du système , en émettant
ou/et en recevant des messages éventuellement porteur de
données selon le cahier des charges .
Les différents types d’acteurs sont :
→ Administrateur : le rôle de l’administrateur est la gestion des
utilisateurs qui peuvent accéder au système qui sont l’enfant
( Student ) et le formateur ( Teacher )
→ Formateur (Teacher) : Le rôle du formateur est la gestion de
quiz et des thèmes de la plateforme et la surveillance et le
contrôle continue du résultat et du score des enfants.
→ Enfant ( Student ) : L’enfant lance les quiz, il peut filtrer les
quiz selon son thème préféré et il peut afficher les résultats des
autres enfants .

2.3 Identification des exigences fonctionnelles

8
Ces exigences englobent la représentation abstraite des
services que la plateforme Piland est censée fournir aux
différents utilisateurs.
Celle de notre système est les suivants :

➤ La gestion de l’inscription : Notre système doit permettre

au formateur et à l’enfant de créer un compte.
➤La gestion de l’authentification : Notre système doit
permettre aux utilisateurs de s'authentifier et de réinitialiser
leurs mots de passe en cas d’oubli.
➤La gestion des quiz : Notre système doit permettre aux
formateurs d’ajouter, modifier et supprimer des quiz et les
thèmes qui sont associés avec ces quiz
➤L’affichage des statistiques : Notre système permet aux
formateurs d’afficher les statistiques qui reflètent le progrès de
leurs élèves.
➤ Un moteur de recherche élève : Note système permettra
aux enfants d'effectuer des recherches par nom afin d’afficher
les résultats de leurs camarades en classe .

2.4 Identification des exigences non fonctionnelles

Les besoins non fonctionnels décrivent toutes les contraintes

techniques et esthétiques auxquelles est soumis le système
pour sa réalisation et pour le bon fonctionnement . En ce qui
concerne notre application , nous avons dégagé les besoins
suivants :
➯ La sécurité de l'accès aux informations critiques : Nous devons
prendre en considération la confidentialité des données des utilisateurs
surtout au niveaux de l’authentification . Pour cela nous devons
restreindre l'accès à ces informations à l’administrateur .

9
➯Performance : La plateforme doit être performante . C’est à
dire que le système doit réagir dans un délai , qu'elle soit
l’action de l'utilisateur
➯Portabilité , maintenance et évolution : la plateforme doit être
multiplateforme , c’est à dire fonctionnelle sur n’importe quel
système d’exploitation . Le code doit être bien lisible ,
compréhensible et modulaire pour garantir la souplesse ,
l'évolution et la maintenance de la solution
➯Ergonomie et convivialité : la plateforme doit fournir une
interface simple et élégante pour l’utilisateur afin de faciliter
l’exploitation des services de l’application
➯Extensibilité : dans le cadre de ce projet , la plateforme doit
être extensible c’est à dire qu’il peut y avoir une possibilité
d’ajouter ou/et modifier de nouvelles fonctionnalités pour
répondre aux changement et évolutions du marché

2.5 Diagramme des cas d’utilisation

Le diagramme de cas d’utilisation représente les fonctionnalités

nécessaires pour l’utilisateur . Le context et les différentes
interactions entre les acteurs sont décrites dans la figure
suivante :

10
 Figure 1 : diagramme des cas d’utilisation

2.6 Diagramme de séquences

11
Figure 2: authentification diagramme des séquences

12
Figure 3 : lancer un quiz diagramme des séquences

13
Figure 4 : check answer diagramme de séquences

14
2.7 Diagramme de classes

Figure 5 : diagramme de classes

2.8 Conclusion :

Ce chapitre a été consacré à l’identification des acteurs ainsi

que les exigences fonctionnelles et non fonctionnelles de notre
projet . Le suivi de l’étude technique , et la planification des

15
différentes tâches . Dans le chapitre suivant , nous allons
élaborer la conception du projet .

3 Conception

3.1 Description de quelques cas d’utilisation

Titre S’inscrire
Précondition Connexion internet disponible
(s)
Postcondition(s) Avoir un compte
Initiation Formateur/enfant décide de
créer un compte
Acteur(s) Formateur/enfant
Scénario nominale 1) Accéder à l’application
Piland
2) Cliquer sur le bouton
s’inscrire
3) Choisir le rôle Teacher ou
Student
4) Saisir les informations
personnelles
5) cliquer sur le bouton
s’inscrire
6) Accéder au menu principal
Teacher ou Student

16
 Titre Lancer le quiz
précondition(s) Authentification

Postcondition(s) Obtenir un score sur 100

Initiation L’enfant choisit un thème et
décide de lancer un quiz
Acteur(s) Enfant
Scénario nominal 1) L’enfant clique sur le
bouton lancer le quiz dans
le menu principal
2) L’enfant coche sa réponse
et cliquez sur next avant la
fin du temps
3) Le score de l’enfant
s’affiche avec les bonnes
réponses du quiz

Titre Afficher les dashboard des

scores
Initiation L’enfant décide de comparer son
score avec celui des autres
enfants
Précondition(s) Authentification
Postcondition(s) Une liste des enfants avec leurs
scores qui s’affiche avec l’ option
de rechercher par nom
Acteur(s) Enfant
Scénario nominal 1) Cliquer sur le bouton
students dans la barre

17
 latérale
2) Faire une recherche avec le
nom du camarade de classe
sinon la liste s’affiche par
défaut

Titre Consulter les statistiques

Précondition(s) Authentification
Postcondition(s) Avoir des chartes et des
statistiques par rapport au
scores des enfants
Initiation Authentification en tant que
formateur
Acteur(s) Formateur
Scénario nominal 1) Accéder à la liste des
quiz
2) Cliquer sur le bouton
view results

18
3.2 L’architecture logicielle

Figure 6 : schéma de l’architecture MVC

Le MVC (modèle/vue /contrôleur) est une architecture de

développement visant à séparer le code source en modules .
Ainsi ,comme le démontre la figure précédente , il y a 3
couches distinctes dans l’architecture MVC :
⟶ Le modèle est chargé de gérer les données
⟶ La vue est chargée de la mise en forme pour l’utilisateur
⟶ Le contrôleur est chargé de gérer l’ensemble

19
4 Réalisation

Après l'étude conceptuelle de notre projet, nous avons utilisé

les outils et l'environnement de développement que nous avons
utilisé pour la réalisation du projet .

4.1 Environnement de développement

Cette partie est dédiée à notre environnement de

développement avec lequel nous avons réalisé notre
application . Cet environnement est l’ensemble des outils de
développement que nous avons utilisés tout au long de notre
projet .

➤ Visual Studio Code : l'éditeur de code open-source

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

20
➤ Git : un outil qui permet de gérer différents projets en les
envoyant sur un serveur. Ce dernier est connecté à l'ordinateur
d'autres développeurs qui envoient leur code et récupèrent le
vôtre. Toute personne qui travaille sur un projet est connectée
avec les autres, tout est synchronisé

➤ Django : Django est une infrastructure d'application (aussi

appelé Framework) côté serveur extrêmement populaire et
dotée de beaucoup de fonctionnalités, écrite en Python .Tout
est pensé de base. Inutile de réinventer la roue à chaque projet
web: les bases sont déjà présentes. Il vous fournira les outils
nécessaires à sécuriser votre application, à gérer la structure
de vos modèles avec un ORM , etc. Vous n'avez plus qu'à vous
consacrer au code métier, à vous concentrer sur l'essence
même de votre projet et rien d'autre Django s'inspire du
modèle MVC (disons plutôt MVT), c'est-à-dire que la structure
du Framework sépare les données ( models ) qui sont
séparées des traitements ( controlleur ) qui sont eux-mêmes
séparés de la vue ( view / template ). On vous oblige à bien
coder, une structure doit être respectée et cela ne peut être
que profitable au travail collaboratif ou simplement la
cohérence / communication entre différents projets.

21
➤ SQLite3: SQLite est un système de base de données ou
une bibliothèque proposant un moteur de base de données
relationnelles. Avec SQLite, la base de données est
intégralement stockée dans un fichier indépendant du logiciel.

➤ StarUML : StarUML est un logiciel de modélisation UML,

qui a été « cédé comme open source » par son éditeur .

4.2 Langages et librairies

● HTML : L'HyperText Markup Language, HTML, désigne

un type de langage informatique descriptif,
Il est ce qui permet à un créateur de sites Web de gérer la
manière dont le contenu de ses pages Web va s'afficher
sur un écran, via le navigateur .
● Javascript : JavaScript est un langage de
programmation de scripts principalement employé

22
 dans les pages web interactives et à ce titre est une
partie essentielle des applications web.
● CSS : Les feuilles de style en cascade,
généralement appelées CSS de l'anglais Cascading
Style Sheets, forment un langage informatique qui
décrit la présentation des documents HTML et XML .
● Django-crispy-forms : Une bibliothèque qui permet
de gérer les formulaire Django , elle permet d’ajuster
les propriétés tel que les méthodes , send buttons et
classes CSS ).

4.3 Description du projet

Figure 7 : interface d’accueil

23
Figure 8 : interface authentification

Figure 9 : interface choix du rôle

24
Figure 10 : interface s’inscrire en tant que student

25
Figure 11 : interface s'inscrire en tant que teacher

26
 Figure 12 : interface d’accueil teacher

Figure 13 : interface afficher les statistiques et le score des

enfants

27
 Figure 14 : interface passer un quiz

Figure 15 : interface chercher les camarades de classe /

afficher la liste des élèves avec leurs scores

28
5 Conclusion

En guise de conclusion , nous avons présenté notre projet

d’été qui nous a permis de d'acquérir des nouvelles
compétences dans le domaine du développement web en
utilisant le fameux Framework Django .
La partie de conception nous a permis de réaliser les
fonctionnalités de notre application dans les délais prévus,
cela en respectant la méthodologie RUP .
Dans le cadre d’une plateforme e-learning, nous avons
développé nos connaissances dans les bonnes pratiques de
programmation notamment l’utilisation des Frameworks et
l’utilisation de l’architecture MVT spécifique à Django .
Finalement , ce projet ne s'arrête pas à ce niveau , il est prêt
pour toute amélioration envisageable .
En effet , plusieurs fonctionnalités qui peuvent être ajoutées à
l’application notamment des niveaux avancés et des challenges
d'entraînement .

29