rapport de stage de découverte

1
Institut national de
statistique et d'économie
appliquée
Société d’accueil
Période de stage
De 27/07/2020 à 04/09/2020
Elaboré par
EL KHYATI Samir
Année universitaire 2019-2020
Encadré par
Rachid EL GHACHI
Réalisation d’une API
pharmacies de garde - horaires de prières
Rapport de stage d’initiation
Le haut-commissariat du
plan

3
Dédicaces
Je dédie ce rapport à ma famille avec tous mes sentiments d'amour, de respect,
de gratitude et de reconnaissance pour tous les sacrifices déployés afin de
m’élever dignement et assurer mon éducation dans les meilleures conditions, à
mes professeurs sans exception, pour leurs efforts afin de m'assurer une formation
solide.
A tous mes amis ...

5
Remerciement
Au terme de ce stage d’initiation que j’ai effectué au sein de la société Evead group,
je tiens à exprimer mes reconnaissances, mon profond respect et mes sincères
remerciements au Monsieur le Directeur QARRI YOUSSEF et à mon encadrement
si particulier Monsieur Rachid EL GHACHI pour leur contribution à l’élaboration de
ce rapport.
Ainsi les personnes qui mon aidés durant cette période pour effectuer mon stage
dans les meilleures conditions, que ce soit les membres de la famille, étant donné
que mon stage s’est passé à distance à cause des conditions sanitaires imposé par
la pandémie covid-19, ou mon encadrant qui était joignable tout le temps.
Enfin, je remercie tous ceux qui ont contribué de près ou de loin à la réalisation de
ce travail.

7
Résumé
Depuis sa première apparition, le web n’a pas cessé d’évoluée, jour après jour les
sites web devient, de plus en plus, complexe, avancée, simple et facile à utiliser,
c’est grâce aux technologies utilisées et spécialement les API. Ces derniers sont
aujourd’hui au fond du fonctionnement du web et de nombreux sites les utilisent
pour fournir des services externes.
Mon projet du stage c’était de créer une API pour se renseigner sur les pharmacies
de garde et une autre API qui fournit les horaires de prières quotidiens, en utilisant
plusieurs technologies web à savoir Symfony, PHP, MYSQL, etc.
Les API sont utilisées par les développeurs web pour créer des applications aux
utilisateurs. Du coup la derrière étape de mon stage était la création des pages
web, à l’aide du HTML, CSS, JAVASCRIPT et AJAX, qui consomment ces deux API
afin de les tester d’un point de vue utilisateur.

9
Abstract
Since its first appearance, the web has not ceased to evolve, day after day,
websites become more and more complex and advanced as well as simple and
easy to use, thanks to the technologies used and especially the APIs, APIs are in
backbone of the functioning of the web today, many sites use them to provide
external services.
My internship project was to create an API about pharmacies on duty and another
API that provides daily prayer times Using several web technologies namely
Symfony, PHP, MYSQL etc.
APIs are used by web developers to create applications for users. So the back step
of my internship was the creation of web pages, using HTML, CSS, JAVASCRIPT and
AJAX, which consume these two APIs in order to test a user point of view.

11
Sommaire
Dédicaces.......................................................................................................................................................................................................3
Remerciement...............................................................................................................................................................................................5
Résumé ..........................................................................................................................................................................................................7
Abstract..........................................................................................................................................................................................................9
Sommaire.................................................................................................................................................................................................... 11
Liste des figures.......................................................................................................................................................................................... 13
Introduction générale ................................................................................................................................................................................ 15
Chapitre 1 : présentation de la société et du cadre de stage.................................................................................................................. 17
I. Introduction ................................................................................................................................................................................. 17
II. Présentation de la société d’accueil........................................................................................................................................... 17
III. Cadre de stage ............................................................................................................................................................................. 18
IV. Conclusion.................................................................................................................................................................................... 18
Chapitre 2 : notions et technologies utilisées........................................................................................................................................... 19
I. Introduction ................................................................................................................................................................................. 19
II. C’est quoi une API ?..................................................................................................................................................................... 19
1. Définition.................................................................................................................................................................................. 19
2. Exemples de quelques apis web ............................................................................................................................................. 20
3. Le format JSON......................................................................................................................................................................... 21
III. Le Protocole http......................................................................................................................................................................... 22
IV. Les technologies mise en œuvre pour réaliser le projet ........................................................................................................... 24
V. Conclusion.................................................................................................................................................................................... 29
Chapitre 3 : API pharmacies de garde et API horaires des prières .......................................................................................................... 31
I. Introduction ................................................................................................................................................................................. 31
II. Présentation du projet attribué.................................................................................................................................................. 31
III. Les grands découpages du projet............................................................................................................................................... 32
IV. Les connaissances qu’était nécessaire à apprendre au préalable ............................................................................................ 32
V. Préparation de l’environnement de travail................................................................................................................................ 33
VI. Structure adoptée ....................................................................................................................................................................... 35
VII. Les ressources des API................................................................................................................................................................. 37
VIII. Les entrées et sorties des API ..................................................................................................................................................... 38
IX. Les Pages de tests........................................................................................................................................................................ 41
X. Contraintes du projet .................................................................................................................................................................. 46
XI. Conclusion.................................................................................................................................................................................... 47
Conclusion générale................................................................................................................................................................................... 49
Bibliographie et Nétographie..................................................................................................................................................................... 51
Annexe.................................................................................................................................................................................................... 53

13
Liste des figures
Figure 1 : interaction de javascript avec html via dom .....................................................................................20
Figure 2 : Fonctionnement d'une api web.........................................................................................................20
Figure 3 : comparaison du json avec xml et yml ...............................................................................................21
Figure 4 : interaction d'une api avec plusieurs platform...................................................................................22
Figure 5 : Interaction entre client et serveur via l'http......................................................................................22
Figure 6 : structure d'une requête http.............................................................................................................23
Figure 7 : structure d'une réponse http ............................................................................................................23
Figure 8 : l'architecture mvc de symfony ..........................................................................................................26
Figure 9 : procédure d'installation de wamp ....................................................................................................33
Figure 10 : tous les services de wamp sont en fonctionnement........................................................................33
Figure 11 : procédure d'installation de composer.............................................................................................34
Figure 12 : commande composer de creation un nouveau projet ....................................................................34
Figure 13 : procédure d'installation de postman ..............................................................................................35
Figure 14 : structure de l'application adoptee..................................................................................................36
Figure 15 : interface de postman......................................................................................................................36
Figure 16 : interface de phpmyadmin...............................................................................................................37
Figure 17 : mcd de pharmacy_db .....................................................................................................................38
Figure 18 : mcd de prayer_db...........................................................................................................................38
Figure 19 : communication entre guard pharmacies finder et l'api guard pharmacy.......................................42
Figure 20 : initialisation de guard pharmacies finder .......................................................................................42
Figure 21 : guard pharmacies finder - chois de la position ...............................................................................43
Figure 22 : guard pharmacies finder - chois de date de début, date de fin et type de permanence.................43
Figure 23 : guard pharmacies finder – résultat.................................................................................................44
Figure 24 : guard pharmacies finder carte d'un service de permanence ..........................................................44

14
Figure 25 : communication entre page prayer time et api prayer time ............................................................45
Figure 26 : prayer time page initialisation........................................................................................................45
Figure 27 : prayer time page interface .............................................................................................................46
Figure 28 : prayer time page barre de navigation ............................................................................................46

15
Introduction générale
Aujourd’hui, les APIs représentent une grande partie de l’évolution que connait le
monde du web, elles rendent le développement des applications web simple, rapide et plein
d’innovation, Ne pas avoir d’API aujourd’hui c’est comme ne pas avoir de site internet au début
du web.
Nous utilisons quotidiennement les APIs sans même nous en rendre compte. Par exemple,
c'est grâce aux APIs que nous pouvons comparer les meilleurs prix pour les vols ou les hôtels,
s’inscrire dans un site avec un compte google en un seul click, ou encore traiter de façon
transparente nos paiements par carte de crédit. En tant que développeurs, nous n’avons plus
besoin de réinventer la roue et de créer toutes les fonctionnalités from scratch, nous pouvons
donc profiter des APIs créées par des fournisseurs pour intégrer différents services et
fonctionnalités dans nos applications et sites web. Au-delà de l’utilisation des APIs, les
compagnies développent elles-mêmes des APIs afin de favoriser l’intégration de leurs produits
dans d’autres sites.
Du 27 juillet à 04 septembre, j’ai effectué mon stage de découverte au sein de l’entreprise
Evead group et pendant cette période j’ai développé deux APIs, la première pour les
pharmacies de garde, la deuxième s’occupe des horaires de prières. Plus largement, lors de
mon stage, j’ai eu l’opportunité d’intégrer la vie professionnelle et de mettre en œuvre mes
connaissances techniques pour réaliser un produit qui répond aux besoins du client.
Au cours de ce rapport, je commence par la présentation de la société Evead group et du cadre
de stage (chapitre I). Ensuite, je définis quelques notions et mots techniques et je présente
toutes les technologies mise en œuvre pour réaliser ce projet (chapitre II). Enfin, je décortique
le travail que j’ai effectué tout au long la période de stage à partir de la préparation de
l’environnement de travail, en passant par les APIs construites et les ressources qu’elles
utilisent jusqu’aux pages web créés pour faire les tests d’un côté utilisateur (chapitre III).

17
Chapitre 1 : présentation de la société et du cadre
de stage
I. Introduction
Dans ce chapitre, nous allons présenter la société au sein de laquelle mon stage
s’est déroulé, ainsi que le travail ou bien le projet qu’elle a proposé tout en précisant
ses objectives, les outils et les technologies nécessaire pour le réaliser.
II. Présentation de la société d’accueil
EVEAD Group est une entreprise montante fondée en 2013, basée à Casablanca, elle est
spécialisée dans le développement de logiciels innovants dans le domaine de la collecte
et l'analyse de données.
✓ Son Site sur internet : webhttp://www.evead.com
✓ Le numéro de téléphone : 0522981212
✓ Secteur : Logiciels informatiques
✓ Directeur : M. QARRI YOUSSEF
✓ Taille de l’entreprise : 11-50 employés
✓ Spécialisations : Génie logiciel, Big Data et IT
Elle se trouve à l’adresse : Résidence du CAF, 2 Bd Omar Al Khiam, Bureau 9, 3ème
étage, Casablanca, Casablanca 20200, MA

18
III. Cadre de stage
Afin d’approfondir et bien maitriser les connaissances que nous avons acquis à INSEA,
notamment tous ce qui est développement web, et de les appliquer dans un contexte
professionnel, la société nous a proposé comme sujet de réaliser deux APIs :
✓ La première api s’occupe des horaires de prières.
✓ La deuxième propose comme service la détermination des pharmacies de garde.
La société propose aussi d’utiliser le Framework Symfony pour développer ces APIs, et
de créer des pages de teste avec javascript et notamment l’AJAX pour consommer ces apis.
La période de stage s’est passé à distance à cause de la situation pandémique de
coronavirus, tout en maintenant un contact permanant avec l’encadrant.
IV. Conclusion
A travers ce premier chapitre, nous avons présenté la société la forme du stage, à savoir
à distance à cause de la situation pandémique, ainsi que le projet réalisé, et qu’on va
détailler tout au long les chapitres suivants.

19
Chapitre 2 : notions et technologies utilisées
I. Introduction
A travers ce chapitre, nous allons éclaircir et l’expliquer quelques notions et
terminologies nécessaires à la compréhension du travail effectué, et nous présentons aussi
les différentes technologies utilisées.
II. C’est quoi une API ?
1. Définition
API, abréviation de Application Programming Interface (interface de programmation
d’application, en français), se définissent comme un ensemble de fonctions informatiques par
lesquelles deux logiciels vont interagir sans intermédiation humaine et selon des conditions
déterminées, que ce soit entre différents composants d’une application ou entre deux
applications différentes. D’une autre manière, une API est un ensemble de services offert par
un logiciel à d'autres logiciels afin de communiquer entre eux.
L’API expose un service utile pour un développeur et non pour un simple utilisateur. En
parallèle, les développeurs écrivent des programmes qui consomment ces APIs et qui vont
être par la suite utiliser par les utilisateurs
Par exemple Le DOM est une API, il définit une manière de représenter une page HTML et
fournit un certain nombre de services qui permettent à nos programmes JavaScript d'interagir
avec la page et ses éléments.

20
Dans notre projet, afin de répondre aux exigences de l’entreprise, nous avons travaillé avec
des API web.
Une API web, est une API accessible via les technologies du Web, notamment le protocole
HTTP ou sa version sécurisée HTTPS.
Le client va envoyer une requête http à l’API pour demander une information, celle-ci va aller
chercher cette information dans la base de données, puis l’envoyer dans une réponse Http
(généralement sous forme du JSON).
2. Exemples de quelques apis web
De nos jours, il existe un très grand nombre d’API, certaines sont gratuites et d’autres
payantes.
✓ Instagram, Facebook, Google et Twitter
Grâce à leurs APIs, on peut par exemple accéder aux images, aux vidéos,
voir les récents commentaires, les likes, envoyées des emails mais à partir
d’une application ou une page web externes.
✓ OpenWeatherMap
FIGURE 1 : INTERACTION DE JAVASCRIPT AVEC HTML VIA DOM
FIGURE 2 : FONCTIONNEMENT D'UNE API WEB

21
st un site collectant des données de plus de 40 000 stations météo dans
le monde.
On peut récupérer les données (météo du jour/semaine, vents, pression
atmosphérique, nuages, précipitations, etc.…) via le nom d'une ville ou
ses coordonnées GPS.
✓ TheMovieDB
Cette API permet de rechercher des films ou des séries TV, des acteurs.
✓ Zippopotamus
L'API de Zippopotamus vous retourne, à partir d'un code postal, des
informations sur la ville, les coordonnées GPS, le pays, l'état.
3. Le format JSON
Dans un environnement hétérogène, la communication entre deux applications se fait
souvent en forme de JSON, car il est indépendant du langage de programmation (plusieurs
dizaines de langages de programmation ont intégré JSON). par exemple Il est utilisé comme
langage de transport de données par AJAX et les services Web.
Le JSON (l’acronyme de JavaScript Object Notation) est un format de données textuelles
dérivé de la notation des objets du langage JavaScript. Il permet de représenter les
informations structurées comme le permet XML par exemple. La transformation des données
au format JSON s’appelle la sérialisation.
FIGURE 3 : COMPARAISON DU JSON AVEC XML ET YML

22
Du coup, l’utilisation du JSON permet la consommation des APIs par une page web (en
utilisant Javascript et AJAX), une application mobile (Android / iOS) ou une application
desktop (Windows/Mac/Linux).
III. Le Protocole http
La plupart des APIs sont basées sur HTTP, qui signifie HyperText Transfer Protocol. C’est
ce qui est au cœur du web ! C’est un protocole qui définit la communication entre les
différentes parties du web. L’échange est basé sur des requêtes client et serveur. Un client
lance une requête HTTP, et le serveur renvoie une réponse HTTP.
✓ La requête
OS
Android
Mac
Windows
Réponse JSON
FIGURE 4 : INTERACTION D'UNE API AVEC PLUSIEURS PLATFORM
FIGURE 5 : INTERACTION ENTRE CLIENT ET SERVEUR VIA L'HTTP

23
Une requête est un message qui va du client au serveur. Elle est structurée de la manière
suivante.
o Le verbe que vous utiliserez va déterminer l’interaction avec le serveur : est-ce que vous
allez récupérer un fichier, envoyer des données avec, modifier un objet (GET, POST,
DELETE, PUT).
o Les en-têtes sont là pour donner des informations sur l’échange, souvent sur le client
qui fait la requête.
o Dans le corps de la requête. vous aurez des détails selon la nature de la requête. Par
exemple, si une requête envoie des données à une API avec POST les attributs seront
envoyés dans ce corps. Il n’y a pas toujours de corps dans une requête ! Cela dépend de
la méthode HTTP utilisez.
✓ La réponse
Une réponse du serveur est structurée de la manière suivante
o Le code http Indique l'état de la réponse.
o Dans les en-têtes réponses, on trouve les infos sur le serveur lui-même comme son type
ou sa localisation le type MIME de la ressource et sa taille en octets etc.
o le corps contient les données envoyées par le serveur.Quand vous regardez un site web
sur votre ordinateur, il s’agit de HTML. par contre, dans une situation API, quand deux
FIGURE 6 : STRUCTURE D'UNE REQUETE HTTP
FIGURE 7 : STRUCTURE D'UNE REPONSE HTTP

24
applications communiquent entre elles, le corps de la réponse est souvent en forme de
JSON.
IV. Les technologies mise en œuvre pour réaliser le projet
a. WampServer
Afin de réaliser le projet, nous avons eu besoin d’installer d’un serveur web, un langage
côté serveur et un serveur de base de données pour créer un environnement de
développement en local, pour faciliter la tâche nous avons choisi WampServer qui rassemble
tous ces outils.
WampServer est une plate-forme de développement Web sous Windows pour des
applications Web dynamiques à l’aide du serveur Apache2, du langage de scripts PHP et d’une
base de données MySQL, Il possède également PHPMyAdmin pour gérer plus facilement vos
bases de données.
i. APACHE
Apache est un logiciel de serveur web gratuit et open-source qui alimente environ 46%
des sites web à travers le monde. Le nom officiel est Serveur Apache HTTP et il est maintenu
et développé par Apache Software Foundation.
Il permet aux propriétaires de sites web de servir du contenu sur le web – d’où le nom «
serveur web » -. C’est l’un des serveurs web les plus anciens et les plus fiables avec une
première version sortie il y a plus de 20 ans, en 1995.
Quand quelqu’un souhaite visiter un site web, il saisit un nom de domaine dans la barre
d’adresse de son navigateur. Puis le serveur web fournit les fichiers demandés en agissant
comme un livreur virtuel.

25
ii. PHP
Le PHP, pour Hypertext Preprocessor, désigne un langage informatique, ou un langage de
script, utilisé principalement pour la conception de sites web dynamiques.
Sur un plan technique, il s'utilise la plupart du temps côté serveur. Il génère du code HTML,
CSS ou encore XHTML, des données (en PNG, JPG, etc.) ou encore des fichiers PDF.
le langage PHP est souvent associé au serveur de base de données MySQL et au serveur
Apache. Avec le système d'exploitation Windows, il fait partie intégrante de la suite de
logiciels libres WAMP.
iii. MYSQL
MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est
distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de
base de données les plus utilisés au monde, autant par le grand public (applications web
principalement) que par des professionnels, en concurrence avec Oracle, PostgreSQL et
Microsoft SQL Server.
Le nom vient de l’association de « My » – le nom de la fille du co-fondateur – avec SQL –
l’abréviation de Structured Query Language, qui est un langage de programmation qui vous
aide à accéder et gérer les données dans une base de données relationnelle.

26
b. Symfony
La société a proposé d’utiliser Symfony comme un Framework de développement afin de
gagner le temps en développement et faciliter le traitement des requêtes et réponse http
grâce à son composent HttpFondation
Symfony est un ensemble de composants PHP ainsi qu'un Framework MVC libre écrit en PHP.
Il fournit des fonctionnalités modulables et adaptables qui permettent de faciliter et
d’accélérer le développement d'un site web.
MVC pour Model-vue-Controller :
✓ Modèle : il gère les données de votre site. Son rôle est d'aller récupérer les informations
« brutes » dans la base de données pour qu'elles puissent ensuite être traitées par le
contrôleur.
✓ Vue : cette partie se concentre sur l'affichage. Elle ne fait presque aucun calcul et se
contente de récupérer des variables pour savoir ce qu'elle doit afficher. On y trouve
essentiellement du code HTML est un langage de template comme Twig.
✓ Contrôleur : C'est en quelque sorte l'intermédiaire entre le modèle et la vue : le
contrôleur va demander au modèle les données, les analyser, prendre des décisions et
renvoyer le texte à afficher à la vue. Le contrôleur contient exclusivement du PHP et
c'est notamment lui qui gère les droits d'accès.
L'architecture MVC de Symfony peut être représentée de cette façon :
FIGURE 8 : L'ARCHITECTURE MVC DE SYMFONY

27
Lorsqu'un client demande une URL, celle-ci est d'abord recrever et traitée par le contrôleur
frontal de Symfony avant d'être envoyée au noyau.
Quand le noyau reçois la demande d'une URL, il appelle le service de routing, celui-ci va alors
lui indiquer le contrôleur à appeler pour l'URL que le client demande.
Le noyaux appel alors le contrôleur qui va s’il en a besoin, appeler le modèle qui est
représenté en Symfony par des repositorys et va générer la vue.
Quand le contrôleur fini de générer la vue, il retourne le résultat au noyau, qui va par la suite
transmettre la réponse au client.
c. Postman
Nous avons eu besoin d’interroger et tester les API et parmi de nombreuses solutions,
Postman propose de nombreuses fonctionnalités, une prise en main rapide et une interface
graphique agréable.
Postman existe sous la forme d’une Chrome App et d’une App (Windows/MacOs/Linux) qui
est recommandé d’être utilisé. Postman permet de construire et d’exécuter des requêtes
HTTP, de les stocker dans un historique afin de pouvoir les rejouer.
d. HTML, CSS
Les pages conçues afin de tester les deux APIs sont créés par le HTML5 et styliser par le
CSS3.
Le HyperText Markup Language, généralement abrégé HTML ou dans sa
dernière version HTML5, est le langage de balisage conçu pour représenter les pages web.
C’est un langage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également
de structurer sémantiquement la page, de mettre en forme le contenu, de créer des
formulaires de saisie, d’inclure des ressources multimédias dont des images, des vidéos, et des
programmes informatiques.

28
Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage
qui permet de gérer la présentation d'une page Web Les styles permettent de définir des
règles appliquées à un ou plusieurs documents HTML. Ces règles portent sur le
positionnement des éléments, l'alignement, les polices de caractères, les couleurs etc.
e. JavaScript et AJAX
Afin de rende nous page de tests interactives et dynamiques, capable d’interroger et
communiquer avec nous APIs nous, nous nous sommes servis du Javascript et de l’Ajax
JavaScript est un langage de programmation de scripts principalement employé dans les
pages web interactives et à ce titre est une partie essentielle des applications web. Avec les
technologies HTML et CSS, JavaScript est aussi employé pour les serveurs avec l'utilisation par
exemple de Node.js ou de Deno.
javascript peut être utilisé pour apporter une touche interactive ou dynamique à un applicatif
(page ou site web) en s’appuyant sur le DOM, par exemple afficher ou cacher un paragraphe,
une image selon les interactions de l'utilisateur.

29
Ajax, l'acronyme d'asynchronous JavaScript and XML : JavaScript et XML asynchrones,
s’agit d’une architecture informatique. qui permet de construire des applications Web et des
sites web dynamiques interactifs sur le poste client en se servant de différentes technologies
ajoutées aux navigateurs web.
Ajax combine JavaScript et DOM, qui permettent de modifier l'information présentée dans le
navigateur en respectant sa structure et XMLHttpRequest qui servent au dialogue asynchrone
avec le serveur Web ; ainsi qu'un format de données (XML ou JSON).
V. Conclusion
Tout au long ce chapitre, nous avons défini les notions nécessaires et les technologies
mise en œuvre pour réaliser le projet. Décortiquons-nous dans le chapitre suivant le travail
réalisé.

31
Chapitre 3 : API pharmacies de garde et API
horaires des prières
I. Introduction
Après avoir présenté les technologies utilisées et défini les principales terminologies,
nous allons, à travers ce chapitre, décortiquer le travail réalisé, présenter les apis construites
en définissant ses points d’entrées, ses points de sorties et les données utilisées. Nous allons
présenter aussi les pages créés qui utilisent l’AJAX, pour tester les apis d’un point de vue
utilisateur.
II. Présentation du projet attribué
Durant la période de stage, ma mission était de réaliser deux API web, à l’aide du
Framework Symfony.
✓ La première api, intitulé Guard Pharmacies, a pour objectif de fournir les informations
nécessaires à propos des pharmacies de garde à leur utilisateur. L’utilisateur précise le
pays, la ville et le district à partir des chois supporter par l’API, ainsi que la date de début,
la date de fin et le type de permanence, à savoir, jour, nuit ou tous les deux, l’API va par
la suite, lui fournir les services disponibles en respectant ces paramètres.
✓ La deuxième api, intitulé Prayer Time, prend comme paramètres le pays et la ville à
partir des chois supporter par l’API, ainsi que la date de début et la date de fin, et fournit
par la suite, les horaires de prière dans cette zone entre les dates précisées.
Les APIs doivent être dans une seul application Symfony qui va interagir avec deux bases
de données différentes selon chaque API, elles doivent être capable de recevoir des requêtes
HTTP, les traiter et envoyer par la suite des réponses HTTP contenant les informations brutes
formater en JSON.
La société à proposer aussi de créer des pages web avec HTML et CSS, et qui font tourner
un programme javascript pour consommer ces APIs et de les tester d’un point de vue
utilisateur.

32
III. Les grands découpages du projet
Il est nécessaire de décomposer le projet en partie simples pour mieux gérer sa
complexité et son risque, estimer le coût et la durée de sa réalisation. Voici le découpage que
j’ai fait :
✓ Etude du projet, choix de la structure et la documentation sur les techniques utilisées.
✓ Préparation de l’environnement de travail.
✓ La configuration et La liaison de l’application Symfony avec les deux bases de données
qui présentent les ressources des API.
✓ Programmation des composant de l’application, à savoir les contrôleurs et les
repositorys.
✓ Création des deux pages de tests.
✓ Rédaction du rapport.
IV. Les connaissances qu’était nécessaire à apprendre au
préalable
La réalisation du projet a nécessité la mise en œuvre de nouveaux technologies et
connaissances. Alors, j’avais d’abord besoin de :
✓ Etudier les API, leurs utilisations, leur fonctionnement et comment créer une API avec
le Framework Symfony de PHP.
✓ Se documenter sur le format JSON, sa structure et comment l’utiliser.
✓ Apprendre à programmer avec le langage Javascript et l’utiliser au côté navigateur avec
le DOM pour créer des pages interactives et dynamique.
✓ Apprendre comment utiliser l’AJAX et faire un dialogue asynchrone avec un serveur.

33
V. Préparation de l’environnement de travail
La réalisation du projet a nécessité un environnement de travail approprié que j’ai préparé
à travers les étapes suivantes
Etape 1 : Installation de WampServer
j’ai téléchargé WampServer à partir du site officiel et je l’ai installé, j’ai installé
également les prérequis, à savoir les packages Microsoft Visual C++, afin de garantir le
bon fonctionnement.
La couleur verte du logo de Wamp signifie que tous les services, à savoir le serveur
web apache et le serveur de base de données MySQL, fonctionnent bien
FIGURE 10 : TOUS LES SERVICES DE WAMP SONT EN FONCTIONNEMENT
FIGURE 9 : PROCEDURE D'INSTALLATION DE WAMP

34
Etape 2 : Installation de Symfony
Il faut savoir qu’il existe deux méthodes principales pour installer Symfony 5 :
✓ en utilisant l'application « Symfony Installer »
✓ en utilisant l'application « Composer ».
la deuxième me parait simple, donc j’ai téléchargé « Composer » du site officiel et je l’ai
installé vu que j’utilise Windows.
FIGURE 12 : PROCEDURE D'INSTALLATION DE COMPOSER
Enfin, j’ai ouvert la fenêtre de commande (cmd) dans le dossier des projets de Wamp et
j’ai exécuté la commande « composer create-project symfony/skeleton PharmacyPrayer
» pour créer un nouveau projet intitulé PharmacyPrayer.
Etape 3 : Installation de Postman
Avant de commencer le travail, il me fallait installer Postman, ça servira à tester et
interroger nos API lors de développement. Donc je l’ai téléchargé et l’installé.
FIGURE 11 : COMMANDE COMPOSER DE CREATION UN NOUVEAU PROJET

35
Etape 4 : navigateur et éditeur de texte
La dernière chose qui reste est de choisir un navigateur web et un choisir un bon
éditeur de texte qui me permette d'éditer les fichiers sources efficacement. J'ai choisi
l’éditeur Visual Studio Code et le navigateur Microsoft Edge Chromium.
Après avoir suivre ces étapes, j’étais enfin prêt à commencer le travail.
VI. Structure adoptée
Pour que les APIs soient dans une seul application Symfony, j’ai adopté la structure suivante
✓ créer deux contrôleur et deux repository.
✓ chaque contrôleur et repository représentent une API.
✓ chaque contrôleur est associé à un seul repository.
✓ chaque repository est connecté à une seule base de données.
On n’a pas besoin de créer les vues car les API envoi des données en JSON et non pas des
page HTML. On indique que le contenu de la réponse est en JSON par l’entête Content-
Type :application/json
Visual Studio Code Microsoft Edge Chromium
FIGURE 13 : PROCEDURE D'INSTALLATION DE POSTMAN

36
La figure suivante schématise la structure de l’application adoptée
FIGURE 14 : STRUCTURE DE L'APPLICATION ADOPTEE
D’abord il faut savoir qu’un contrôleur en Symfony est une classe qui contient des
méthodes. A l’arrivé d’une requête HTTP, le Kernel transmit l’URL reçue par le contrôleur
frontal au routeur, à chaque url le routeur revoie le contrôleur et la méthode à exécuter, le
contrôleur demande les données au repository auquel il est associé, ce dernier va les
récupérer de la base de données à laquelle il est connecté, à la fin le contrôleur sérialise les
données en JSON et envoi de la réponse HTTP avec le code statut et les entêtes convenable.
Les tests des API lors de développement sont effectués avec Postman.
FIGURE 15 : INTERFACE DE POSTMAN

37
VII. Les ressources des API
Les ressources sont vraiment le cœur d’une API, ce sont les données que les
utilisateurs reçoivent grâce aux requêtes HTTP. L’entreprise m’a proposé deux bases de
données prêtes à l’emploi, contenant un ensemble de données pour mes tests.
les deux bases de données sont recrevées sous forme de fichiers SQL.
J’ai utilisé l’interface phpMyAdmin pour les importer sur mon serveur SQL.
Ces ressources doivent être mises à jour régulièrement pour que les API puissent être
utilisées à tout moment.
Pharmacy_db.sql Prayer_db.sql
FIGURE 16 : INTERFACE DE PHPMYADMIN

38
✓ Le MCD de la base de données Pharmacy_db
FIGURE 17 : MCD DE PHARMACY_DB
✓ Le MCD de la base de données Prayer_db
FIGURE 18 : MCD DE PRAYER_DB
J’ai configuré l’application Symfony pour qu’elle puisse se connecter à ces deux bases
de données et j’ai créé par la suite les deux repositorys en se basant sur des requêtes SQL.
VIII. Les entrées et sorties des API
1. Prayer Time API :
1. liste des pays :
GET : /prayer-api/countrys

39
2. liste des villes :
POST : /prayer-api/citys
o country_id : id d’un pays (all pour une liste de toutes les villes existantes
dans bd)
3. liste des horaires :
POST : /prayer-api/timing-of-prayers
o city_id : id d'un district
o start_date : date de début à partir de laquelle la recherche commence sous
la forme YYYY-MM-DD
o end_date : la date à laquelle s'arrête la recherche sous YYYY-MM-DD
2. Guard Pharmacy API :
1. liste des pays :
GET : / pharmacy -api/countrys

40
2. liste des villes :
POST : / pharmacy -api/citys
o country_id : id d’un pays (all pour une liste de toutes les villes
existantes dans bd)
3. liste des districts :
POST : /pharmacy-api/districts
o city_id : id d'une ville (all pour une liste de tous les districts existants dans bd)
4. liste des pharmacies de garde :
POST : /pharmacy-api/phamacy-stats
o district_id : id d'un district ou all pour tous les districts existants dans bd
o start_date : date de début à partir de laquelle la recherche commence sous la
forme YYYY-MM-DD

41
o end_date : la date à laquelle s'arrête la recherche sous YYYY-MM-D
o permanence : prend les valeurs nuit, jour ou jours_nuit pour les deux
IX. Les Pages de tests
Les apis sont créées par des développeurs et sont destinées aux d’autre
développeurs qui vont se servir d’elle pour crées des applications pour les
utilisateurs simples.
Pour tester nos API d’un point de vue utilisateur, j’ai créé deux pages web avec
l’HTML, CSS, Javascript ainsi que l’AJAX pour communiquer avec les API.
1. Guard Pharmacies Finder :
Il s’agit de l’application qui consomme l’API Guard Pharmacy, l’utilisateur
détermine la position voulue ainsi que le type de permanence, date début et date fin,
et reçoie par la suite une liste des pharmacies de garde en tenant en compte ces choix.
la figure suivante représente la communication entre la page et l’api

42
FIGURE 19 : COMMUNICATION ENTRE GUARD PHARMACIES FINDER ET L'API GUARD PHARMACY
Premièrement, l’application fait l’initialisation, elle reçoit la liste des pays, la liste des
villes et la liste des districts, et détermine des valeurs par défaut.
FIGURE 20 : INITIALISATION DE GUARD PHARMACIES FINDER

43
Elle demande à l’utilisateur de déterminer la position de recherche voulue en
modifiant les valeurs en questions
L’utilisateur détermine par la suite la date de début, la date de fin ainsi que le type de
permanence.
FIGURE 22 : GUARD PHARMACIES FINDER - CHOIS DE DATE DE DEBUT, DATE DE FIN ET TYPE DE PERMANENCE
FIGURE 21 : GUARD PHARMACIES FINDER - CHOIS DE LA POSITION

44
Enfin,l’utilisateur reçoit une liste des services disponibles
FIGURE 23 : GUARD PHARMACIES FINDER – RESULTAT
chaque service est représenté par une carte qui contient le nom , l’addresse et le
numero de téléphone de la pharmacie, le type de permanence et le jour du service
FIGURE 24 : GUARD PHARMACIES FINDER CARTE D'UN SERVICE DE PERMANENCE
2. Prayer Time :
Il s’agit de l’application qui consomme l’API Prayer Time, l’utilisateur obtient
l’horaire de prière dans un jour donnée à un emplacement donné en utilisant la
base de navigation qui permet la modification du pays, la ville ainsi que la date du
jour.
la figure suivante représente la communication entre la page et l’api

45
FIGURE 25 : COMMUNICATION ENTRE PAGE PRAYER TIME ET API PRAYER TIME
Premièrement, l’application fait l’initialisation, elle reçoit la liste des pays, la liste des
villes, et détermine des valeurs par défaut
FIGURE 26 : PRAYER TIME PAGE INITIALISATION

46
L’application demande l’horaire des prières de l’API, en tenant en compte les valeur choix,
et affiche par la suite les données reçues.
FIGURE 27 : PRAYER TIME PAGE INTERFACE
La barre de navigation permet l’utilisateur de choisir d’autre jour et d’autre Sposition
FIGURE 28 : PRAYER TIME PAGE BARRE DE NAVIGATION
X. Contraintes du projet
✓ A cause de la situation pandémique, le stage s’est passé à distance loin de
l’environnement de l’entreprise.
✓ Le stage s’est passé en même période de préparation aux exams du S2 reportés au mois
de septembre à cause du covid-19.

47
✓ L’ordinateur utilisé est de performance moyenne, il plante fréquemment quand tous les
outils utilisés sont en fonctionnement, parfois l’ouverture d’un logiciel prend plus de
temps. Du coup, la progression en travail a été relativement lente.
✓ Des erreurs sont rencontrées lors de développement, ce qui a demandé plus de temps
pour les corrigés.
✓ La rédaction du rapport de projet s’est effectuée en parallèle avec les modules de S3, vue
qu’après avoir terminé le stage les exams sont venus immédiatement.
XI. Conclusion
Ce chapitre, représente tout le travail que j’ai effectuée pendant la période de stage, les
étapes par lesquelles j’ai passé, les produits créés ainsi que les difficultés rencontrées. Cela
montre qu'à la fin j’ai réussi le projet et également le stage.

49
Conclusion générale
Dans le cadre du stage de découvert, j’ai fait la réalisation de deux APIs en se
basant sur le Framework Symfony de PHP. La première fournit les informations
nécessaires à propos des pharmacies de garde dans un endroit donné et à un
moment précis. La deuxième permet aux utilisateurs de consulter les horaires de
prières quotidiennes à une ville précise. J’ai créé également, en utilisant l’HTML,
CSS et Javascript, deux pages web qui consomment ces deux API afin de les tester
et assurer leur fonctionnement.
En fin, ce stage était une opportunité pour découvrir le milieu professionnel,
d’apprendre à répondre aux besoins du client et créer un bon produit pour lui
satisfaire, Il m’a permet d’enrichir mon savoir-faire et appliquer mes
connaissances techniques. Il m’a offert l’occasion de s’initier au Monde des APIs
qui constituent aujourd’hui le cœur du fonctionnement du web.

51
Bibliographie et Nétographie
[1] https://www.journaldunet.fr/web-tech/dictionnaire-du-webmastering/1203597-php-
hypertext-preprocessor-definition/
[2] https://www.agencedebord.com/api-definition-utilisation/
[3] https://openclassrooms.com/fr/courses/6573181-adoptez-les-api-rest-pour-vos-projets-
web/6816951-initiez-vous-au-fonctionnement-des-api
[4] https://blog.webnet.fr/presentation-de-postman-outil-multifonction-pour-api-web/
[5] https://www.lafabriquedunet.fr/blog/definition-api/
[6] https://medium.com/@mercier_remi/c-est-quoi-une-api-f37ae350cb9#.944u4j7qq
[7] https://www.wampserver.com/
[8] https://kinsta.com/fr/base-de-connaissances/qu-est-ce-que-mysql/
[9] https://fr.wikipedia.org/wiki/MySQL
[10] https://www.hostinger.fr/tutoriels/quest-ce-quapache-serveur-web-apache/
[11] https://fr.wikipedia.org/wiki/Hypertext_Markup_Language
[12] https://www.futura-sciences.com/tech/definitions/internet-css-4050/
[13] https://fr.wikipedia.org/wiki/JavaScript
[14] http://igm.univ-mlv.fr/~dr/XPOSE2014/Symfony/structure.html
[15] https://openclassrooms.com/fr/courses/4670706-adoptez-une-architecture-mvc-en-
php/467s8736-comment-fonctionne-une-architecture-mvc
[16] https://formip.com/xml-json-yaml/
[17] https://blog.shevarezo.fr/post/2015/03/17/10-apis-gratuites-utiles
[18] https://openclassrooms.com/fr/courses/3449001-utilisez-des-api-rest-dans-vos-projets-
web/3501921-les-requetes
[19] https://openclassrooms.com/fr/courses/3449001-utilisez-des-api-rest-dans-vos-projets-
web/3501941-les-reponses

53
Annexe
Voici quelques erreurs gérer par les pages de testes :
✓ lorsqu’il n’ya pas de services disponibles corespondant aux choix de l’utilisateur
✓ lorsque l’application rencontre un problème à communiquer avec le serveur

rapport de stage de découverte

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à rapport de stage de découverte

Similaire à rapport de stage de découverte (20)

rapport de stage de découverte