Ministère de l’enseignement supérieur et de la recherche scientifique

Et des technologies de l’information et de la communication

Direction générale des Etudes Technologiques :
Institut supérieur des Etudes Technologiques de Bizerte
Département Technologies de l’Informatique

RAPPORT DE STAGE DE PERFECTIONNEMENT

Sujet :
Développement d'une Application web ‘You Learn’.

Réalisé par : Ahmed Derouiche

Encadré par :Karim Mannai
Période du stage : Du 15/07/2020 au 15/08/2020

Organisme d’accueil : We Code

Adresse : 34 Rue de Soleil -La Marsa
Tel : 24.101.692
Email : We.code.20199@gmail.com

Année Universitaire :2020-2021

 REMERCIMENT

Avant tout développement sur cette expérience professionnelle, il m’apparait important de

commencer ce rapport de stage par exprimer ma profonde gratitude envers tous ceux qui
m’ont apporté leur soutien, leur expérience tout au long de ce stage.

Je remercie mon encadrant Monsieur Mannai Karim qui m’a accompagnée tout au
long de cette expérience professionnelle, pour son aide et ces précieux conseils. Je lui
souhaite plein de réussite et de perspective.

Egalement, je remercie toutes l’équipe pour m’avoir accompagné tout au long de cette
éxpérience avec beaucoup de patience et pédagogie .Que ces quelques mots puissent leur
exprimer la profonde admiration et la gratitude que j’éprouve à leur égard.

2
 Sommaire

Introduction Générale .................................................................................................................................. 1

Chapitre 1 : Etude de l’organisme ................................................................................................................. 2
Introduction :............................................................................................................................................. 3
1 Présentation de l’organisme : ........................................................................................................... 3
1.1 Présentation générale de l’organisme d’accueil : .................................................................... 3
1.2 Services de l’entreprise : ........................................................................................................... 3
1.3 Technologies Utilisés : ............................................................................................................... 4
2 Organigramme de l’organisme : ........................................................................................................ 4
3 Description du service du stage : ...................................................................................................... 5
4 Présentation du thème de stage : ..................................................................................................... 5
Conclusion : ............................................................................................................................................... 6
Chapitre 2: Etude Préalable........................................................................................................................... 7
Introduction............................................................................................................................................... 8
1 Description de l’existant : .................................................................................................................. 8
2 Critique de l’existant : ....................................................................................................................... 8
3 Solution Proposée : ........................................................................................................................... 8
4 Description détaillée de la solution finale: ........................................................................................ 9
5 Analyse des besoins :......................................................................................................................... 9
5.1 Spécification des besoins :....................................................................................................... 10
Conclusion ............................................................................................................................................... 15
Chapitre 3 : Réalisation ............................................................................................................................... 16
Introduction :........................................................................................................................................... 17
1 Environnement matériel : ............................................................................................................... 17
2 Environnement logiciel : .................................................................................................................. 17
3 Principales Interfaces Graphiques : ................................................................................................. 20
Conclusion : ............................................................................................................................................. 22
Conclusion Générale.................................................................................................................................... 22
Bibliographie et Netographie ...................................................................................................................... 23
 Liste des figures
Figure 1: Organigramme de la société........................................................................................................... 4
Figure 2: Diagramme de cas d'utilisation .................................................................................................... 11
Figure 3: Diagramme de classes .................................................................................................................. 12
Figure 4:Diagramme de séquence ‘Acheter cours’ ..................................................................................... 13
Figure 5:Diagramme de séquence ‘Ajouter Cours’ ..................................................................................... 14
Figure 6: Sign In .......................................................................................................................................... 20
Figure 7:Tableau de Bord ............................................................................................................................ 20
Figure 8: MesCours ..................................................................................................................................... 21
Figure 9: Ajouter cours................................................................................................................................ 21

4
 Liste des tableaux

Tableau 1: Identification des acteurs ........................................................................................................... 10

Tableau 2: :Configuration du PC ASUS ..................................................................................................... 17
 Introduction Générale

Attirer et influencer les consommateurs est le souci majeur de toute entreprise qui veut
augmenter sa part du marché ainsi que sa position.

C’est pour cela les méthodes de marketing et de commercialisation des produits se

développent continuellement en parallèle avec les nouvelles technologies qui les rendent faciles
et plus efficaces.

Le but de ce rapport n’est pas de faire uniquement une présentation exhaustive des tous les
aspects techniques que j’ai pu apprendre ou approfondir ,mais aussi, de manière synthétique et
claire, de faire un tour d’horizon des aspects techniques et humaines auxquels j’ai été confronté.

Dans le cadre de ce stage, il m’a été proposé de créer une application web qui permet aux
internautes de prendre de cours en ligne. Après certaines recherches préliminaires ,j’ai eu
l’occasion d’effectuer une étude approfondi sur l’architecture et les outils et les technologies
appropriés afin de développer cet application.

Le présent rapport est composé de trois chapitres :le premier a pour but de présenter la société,
son organigramme et le thème du stage .Pour le deuxième ,il s’agit d’une étude de l’existant avec
les critiques ainsi que les solutions. Quant à la dernière partie ,c’est à propos de a réalisation de
l’application en précisant l’environnement de travail et les scénarios d’exécution.

1
Chapitre 1 : Etude de l’organisme

2
Chapitre 1 : Etude de l’organisme

Introduction :

Ce chapitre est consacré à la présentation de l’organisme d’accueil, ses divers services et

technologie utilisées ainsi que son organigramme. En effet, il donne un aperçu sur le thème de
stage.

1 Présentation de l’organisme :
1.1 Présentation générale de l’organisme d’accueil :
We Code est une Start-up fondé en 2019 par deux amis passionnés par le
développement informatique animés par la même volonté de créer des projets uniques. Elle
assure :

-Lamise en place d'équipes d'experts techniques sur mesure pour mieux répondre aux besoins
clients.

- Une communication transparente : travailler avec votre équipe dédiée comme s'ils étaient
dans vos locaux.

-Une gamme complète de services de conception, de développement, de maintenance et de

support d'applications.

-La gestion de tous les aspects du cycle de vie du projet : implémentation, tests, évolution,
validation etc.

-La prise en compte régulière des feed-back des utilisateurs finaux afin de faire évoluer
efficacement votre produit.

1.2 Services de l’entreprise :

- Développement Web: Grâce à son expertise en développement web, We Code permet de

créer des solutions techniques de haute qualité qui dépasseront les attentes des clients.

3
Chapitre 1 : Etude de l’organisme

- Expertise Web : S'appuyant sur une vaste expertise Front et Back-end, les développeurs
d'applications Web chez We Code offrent à leurs clients une expérience utilisateur riche et
une performance technique avancée.

1.3 Technologies Utilisés :

- Framework Symfony: pour un développement web riche en fonctionnalités afin de

fournir aux clients une solution sur mesure hautement fonctionnelle.

- FrontEnd: aider à optimiser l'expérience utilisateur grâce à des conceptions réactives,

conviviales et interactives. Les solutions proposées sont compatibles avec plusieurs
navigateurs et appareils.

- BackEnd: Offrir un ensemble de services qui couvrent le développement de couches

backend personnalisées en garantissant leur extensibilité et leurs performances.

2 Organigramme de l’organisme :

Figure 1: Organigramme de la société

4
Chapitre 2 : Etude Préalable

3 Description du service du stage :

Etant donné que l’encadrant est le directeur général de la société et que le sujet
comprend une partie de Back-End et partie de Front-End, on a été durant le stage en relation
avec presque tous les services.

4 Présentation du thème de stage :

Au cours de ce stage, j’ai eu l’opportunité de découvrir un métier sous toutes ses
formes et de comprendre de manière globale les difficultés que les développeurs pouvaient
rencontrer dans l’exercice de leurs métiers. Pour une meilleure compréhension des tâches que
j’ai pu effectuer, il apparaît approprié de traiter en premier lieu des outils qui étaient mis à ma
disposition, puis de traiter de manière détaillée les tâches que j’ai pu effectuer.

En effet, j’ai passé le plus clair de mon temps à apprendre le langage de programmation
NodeJS(ses principes fondamentaux, ses composants, ses API, ..). Grâce à la plateforme
logicielle libre en JavaScript orientée.

Passant à la tâche la plus importante affectée dans ce stage :

Dans un souci de concevoir une application avec plus de fonctionnalités et dans le but de
faciliter l’apprentissage en ligne et améliorer les connaissances, on a conçu une application
qui regroupe les points cités ci-dessus. Le travail se résume dans les fonctionnalités suivantes :

➢ Offrir une interface aux internautes pour s’inscrire et devenir abonné afin de profiter
des fonctionnalités de l’application.
➢ Offrir une interface à l’utilisateur de s’identifier.
➢ Donner à l’internaute d’acheter et suivre un cours.
➢ Donner aux formateurs d’ajouter, modifier et supprimer les cours.

5
Chapitre 1 : Etude de l’organisme

Conclusion :

Après avoirprésenté la société We Code ainsi que le thème de stage, on parlera dans le
chapitre suivant de l’étude préalable.

6
Chapitre 2: Etude Préalable

7
Chapitre 2 : Etude Préalable

Introduction
Ce chapitre a pour objectif de décrire l’existant et ses critiques ainsi que de proposer des
solutions pour résoudre ce problématique. De plus, on procédera dans ce chapitre dans le but de
déterminer la solution finale adoptée. Dans un second temps onva spécifier ces besoins à travers
des diagrammes de cas d’utilisation qui représentent les unités d’interaction entre les utilisateurs
et le système.

1 Description de l’existant :
Vu que l’objectif du sujet de stage est de développer une application qui facilite
l’apprentissage et les formations en lignes dans plusieurs domaines. C’est pour cela dans ce
paragraphe on va focaliser sur la solution utilisée actuellement dans la société.

En effet, faire appel à des formateurs dans le domaine technologies de l’informatique

pour former l’équipe de développement et les stagiaires de la société est quelque choses un
peux couteuses et n’est pas une solution optimal.

2 Critique de l’existant :
Vu que d’amener des formateurs pour faire la même formation chaque fois n’est pas
une solution ainsi qu’elle est très cher sur le plan de financement pour la société et elle ne peut
pas être accessible à tout le monde .

3 Solution Proposée :
Pour cela on a eu recours à une solution une plateforme E-learning ou elle contient des
cours publiés par des formateurs et les clients en acheter les cours et les suivre en ligne.

8
Chapitre 2 : Etude Préalable

4 Description détaillée de la solution finale:

Au niveau de ce chapitre, on va analyser, spécifier les besoins et faire la conception de
notre application, dont nous avons utilisé le langage de modélisation UML (Unified Modeling
Language-Langage de modélisation unifié) qui est aujourd’hui le langage standard utilisé en
informatique pour la modélisation orientée objets.

5 Analyse des besoins :

Danscette phase on est appelée à analyser les besoins et les exigences de l’entreprise .

➢ Besoins fonctionnels :
❖ Authentification

✓ Email

✓ Mot de passe

✓ Validation

❖ Pour le client

✓ Authentification

✓ Acheter un cours

✓ Suivre un cours

✓ S’exercer avec des QCM

❖ Pour le formateur (aussi présente client)

✓ Ajouter ,modifier et supprimer un cours

✓ Ajouter ,modifier et supprimer une leçon (une leçon est une vidéo ou un QCM)

9
Chapitre 3 : Réalisation

➢ Besoins non-fonctionnels :
Ce sont les besoins qui permettraient d’améliorer la qualité de l’application.

❖ Ergonomie et souplesse

✓ L'application offre une interface conviviale et ergonomique exploitable par l'utilisateur en

envisageant toutes les interactions possibles à l'écran du support tenu.

❖ Efficacité

✓ L'application est fonctionnelle indépendamment de toutes circonstances pouvant entourer

l'utilisateur.

❖ Maintenabilité et scalabilité

✓ Le code de l'application est bien lisible et compréhensible.

5.1 Spécification des besoins :

Dans cette partie, on va définir les acteurs, ses rôles et ses interactions avec le système
ainsi les cas d’utilisation.

i. Identification des acteurs

Tableau 1: Identification des acteurs

Acteurs Description
Client C’est un internaute qui s’inscrit au
sein de l’application qui lui permet
d’acheter un cours en ligne et le
suivre.
Formateur C’est aussi un client mais qui a la
possibilité de publier des cours ,les
modifier et les supprimer.

10
Chapitre 2 : Etude Préalable

ii. Diagramme de Cas d’utilisation :

Figure 2: Diagramme de cas d'utilisation

iii. Diagramme de Classes :

11
Chapitre 3 : Réalisation

Figure 3: Diagramme de classes

iv. Diagrammes séquences :

Dans cette partie on a choisi des cas d’utilisation (acheter cours, ajouter cours, login…) et on a
réalisé les diagrammes de séquences ci-dessus.

12
Chapitre 2 : Etude Préalable

Figure 4:Diagramme de séquence ‘Acheter cours’

13
Chapitre 3 : Réalisation

Figure 5: Diagramme de séquence ‘Authentification’

14
Chapitre 2 : Etude Préalable

Conclusion

Dans ce chapitre, on a présenté les différents besoins(fonctionnels et non-fonctionnels) de la

solution finale ainsi que déterminer les utilisateurs du futur système . Dans ce qui suit nous allons
entamer la phase de réalisation.

15
Chapitre 3 : Réalisation

16
Chapitre 3 : Réalisation

Introduction :

Après avoir achevé la phase de l’étude de l’existant, on va entamer dans la partie réalisation,
dans laquelle on doit s’assurer que l’application soit prête à être livrée et utilisée.

On se préoccupera ainsi, de l’exploitation de l’environnement logiciel de l’application, par la

suite on va faire une démonstration de quelques interfaces.

1 Environnement matériel :

Pour développer l’application, j’ai utilisé comme environnement matériel un ordinateur ASUS
R558UQ i5 7è Génération dédiée qui possède comme caractéristiques :

Tableau 2: :Configuration du PC ASUS

Processeur IntelCore i5-7500U - 7 ème Génération (2.7

GHz up to 3.5 GHz Turbo, 4 Mo de mémoire
cache)
Systèmed’éxploitation
free Dos

Mémoire RAM
8Go DDR4

Disque Dur
1To (5400 RPM)

Ecran
15.6" Full HD LED

2 Environnement logiciel :

❖ Visual Studio Code :

17
Chapitre 3 : Réalisation

✓ Visual studio code est IDE pour les langages Web (HTML,CSS,JavaScript …)développé
par Microsoft.

❖ MongoDB :
✓ MongoDB Compass : L'interface graphique de MongoDB. Explorez visuellement vos
données. Exécutez des requêtes ad hoc en quelques secondes. Interagissez avec vos
données avec la fonctionnalité CRUD complète. Affichez et optimisez les performances
de vos requêtes. Disponible sur Linux, Mac ou Windows. Compass vous permet de
prendre des décisions plus intelligentes concernant l'indexation, la validation de
documents.

❖ NodeJS :

✓ NodeJS : Node.js est une plateforme logicielle libre en JavaScript orientée vers les
applications réseau événementielles hautement concurrentes qui doivent pouvoir monter
en charge. Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle
d'évènements, et implémente sous licence MIT les spécifications CommonJS.

18
Chapitre 3 : Réalisation

❖ TypeScript :

✓ TypeScript : TypeScript est un langage de programmation libre et open source développée

par Microsoft qui a pour but d'améliorer et de sécuriser la production de code JavaScript.
C'est un sur-ensemble de JavaScript.

❖ Angular :

✓ Angular est un cadriciel côté client open source basé sur TypeScript dirigée par l'équipe
du projet Angular à Google et par une communauté de particuliers et de sociétés. Angular
est une réécriture complète de AngularJS, cadriciel construit par la même équipe.

19
Chapitre 3 : Réalisation

3 Principales Interfaces Graphiques :

Figure 6: Sign In

Figure 7:Tableau de Bord

20
Chapitre 3 : Réalisation

Figure 8: MesCours

Figure 9: Ajouter cours

21
Chapitre 3 : Réalisation

Conclusion :

Dans ce chapitre, on a présenté tout d’abord l’environnement de travail utilisé pour la

réalisation de l’application. Ensuite, on a illustré et testé quelques interfaces de l’application.

22
 Conclusion Générale
Ce rapport est le fruit d’un travail réalisé durant un stage au sein de la société We Code pour
un projet de perfectionnement qui a pour objectif la réalisation d’une application d’apprentissage.

En fait, le travail réalisé se résume dans les points suivants : Offrir à l’utilisateur une interface
pour s’inscrire et devenir un abonné afin de profiter des fonctionnalités de l’application, lui offrir
une interface pour s’identifier, lui donner la possibilité d’acheter un cours et le suivre afin de
faciliter la tâche au sein de l’entreprise .

Ce stage de perfectionnement m’a permis d’enrichir mes connaissances dans le domaine de

développement informatique . De plus, c’est une occasion pour mieux s’intégrer dans la vie
professionnelle et améliorer mes compétences de travail en équipe à travers les différentes
réunions et les discussions réalisées.

.
Par conséquent, ce stage est une excellente expérience pour mon parcours académique et ma
vie professionnelle.

22
 Bibliographie et Netographie

https://www.mongodb.com/
https://fr.wikipedia.org/wiki/Node.js
https://fr.wikipedia.org/wiki/TypeScript
https://fr.wikipedia.org/wiki/Angular

23