Rapport de stage d'été de premiére année génie informatique

1. 5, Avenue Taha Hussein – Tunis
B. P. 56, Bab Menara 1008
‫الهاتف‬:Tel. : 71 496 066
:‫فاكس‬Fax : 71 391 166
5‫تونس‬ ‫ـ‬ ‫حسين‬ ‫طه‬ ‫شارع‬
:.‫ب‬ .‫ص‬56‫منارة‬ ‫باب‬1008
‫التونسية‬ ‫الجمهورية‬
‫والبحث‬ ‫العالي‬ ‫التعليم‬ ‫وزارة‬‫العلمي‬
‫تونس‬ ‫جامعة‬
‫المدرسة‬‫الوطنية‬‫لل‬ ‫العليـا‬‫مهندسين‬‫بتونـس‬
DS-PG-RS-V1-9-2019
Rapport de Stage
Classe : Première année génie informatique
Présenté par
Jinen Abdelhak
Titre de stage :
Dashboard du site web dietleious.ae
Entreprise d’accueil :
Encadrant industriel : Mr Nader Zouaoui
Période du stage :
Début : 22/07/2019 Fin : 22/08/2019
Année Universitaire : 2018-2019

2. Remerciements
C’est avec un grand plaisir que je réserve cette page en signe de
gratitude et de profonde reconnaissance à tous ceux qui m’ont aidé à la
réalisation de ce travail.
Je tiens à manifester l’expression de mon respect le plus distingué à mon
encadrant Monsieur Nader Zouaoui, le gérant de EDonec pour sa
disponibilité, ses directives et ses conseils si enrichissants.
Je remercie cordialement Monsieur Zakaria Hatira, co-fondateur de
Edonec pour sa compréhension et ses encouragements.
Je tiens aussi à remercier Monsieur Belhassen Gharssalah pour ses
efforts fournis afin de m’aider à réussir ce travail.

3. Introduction générale.................................................................................................................. 7
Chapitre 1 Présentation du cadre de stage.................................................................................. 1
I. Présentation de la société d’accueil................................................................................. 1
1. Domaine d’activité....................................................................................................... 1
2. Objectifs de la société.................................................................................................. 1
II. Contexte du stage et objectifs du projet....................................................................... 2
Chapitre 2 Environnement de développement............................................................................ 3
I. Environnement matériel .................................................................................................. 3
II. Environnement de travail de l’équipe.......................................................................... 3
1. Gitlab ........................................................................................................................... 3
2. Slack ............................................................................................................................ 4
III. Environnement logiciel................................................................................................ 4
1. ES6............................................................................................................................... 4
2. ReactJS ........................................................................................................................ 5
3. Redux........................................................................................................................... 5
4. SASS/SCSS ................................................................................................................. 6
5. Firebase........................................................................................................................ 6
Chapitre 3 Base de données........................................................................................................ 8
I. Définition de NoSQL ...................................................................................................... 8
II. Types de base de données NoSQL .............................................................................. 8
1. Clef/Valeur .................................................................................................................. 8
2. Colonnes...................................................................................................................... 8
3. Document..................................................................................................................... 9
4. Graphe ......................................................................................................................... 9
III. La Base de données ..................................................................................................... 9
1. Meals ........................................................................................................................... 9
2. Users .......................................................................................................................... 10
3. Orders ........................................................................................................................ 12
Sommaire

4. 4. Dates.......................................................................................................................... 13
5. Payments.................................................................................................................... 13
Chapitre 4 Tâches effectuées.................................................................................................... 15
I. Afficher les données des plats....................................................................................... 15
II. Le formulaire d’ajout d’un plat.................................................................................. 16
1. Remplir les champs du formulaire............................................................................. 18
2. L’image...................................................................................................................... 21
III. Le formulaire de mise à jour d’un plat ...................................................................... 22
1. Remplir les champs du formulaire............................................................................. 22
2. L’image...................................................................................................................... 27
IV. La suppression d’un plat............................................................................................ 29
Conclusion générale ................................................................................................................. 30
Nétographie .............................................................................................................................. 31

5. Table de figures
Figure 1:Logo de la société eDonec ........................................................................................... 2
Figure 2:Logo GitLab................................................................................................................. 3
Figure 3:Logo slack.................................................................................................................... 4
Figure 4:Logo JavaScript ........................................................................................................... 4
Figure 5:Logo React................................................................................................................... 5
Figure 6:Logo Redux.................................................................................................................. 5
Figure 7:Logo SCSS................................................................................................................... 6
Figure 8:Logo FireBase.............................................................................................................. 6
Figure 9:Extrait Firebase d'un document de la collection meals.............................................. 10
Figure 10:Extrait Firebase d'un document de la collection users ............................................. 11
Figure 11:Extrait Firebase d'un document de la collection orders ........................................... 12
Figure 12:Extrait Firebase d'un document de la collection orders ........................................... 13
Figure 13:Extrait Firebase de la collection payments .............................................................. 14
Figure 14 : Affichage des plats................................................................................................. 16
Figure 15:Extrait du formulaire d’ajout d’un plat .................................................................... 17
Figure 16:Champs de saisie de l’attribut name d’un nouveau plat........................................... 18
Figure 17:Zones du texte de l’attribut desc d'un nouveau plat................................................. 18
Figure 18:Liste déroulante de l’attribut type d’un nouveau plat .............................................. 19
Figure 19:Champs du saisie de propriétés de l’attribut nutrients d’un nouveau plat ............... 19
Figure 20:Champs de saisie de l’attribut defaultIngredients d'un nouveau plat....................... 20
Figure 21: Champs de saisie de l’attribut suppIngredients d'un nouveau plat ......................... 20
Figure 22:Champs de saisie de l’attribut tags d'un nouveau plat ............................................. 21
Figure 23 :Choix d’une image d’un nouveau plat.................................................................... 22
Figure 24 : Image d’un plat choisie.......................................................................................... 22
Figure 25:Extrait du formulaire de mise à jour d'un plat.......................................................... 23
Figure 26:Extrait Firebase du plat à mettre à jour.................................................................... 23
Figure 27:Mise à jour l’attribut nom d'un plat.......................................................................... 24
Figure 28:Mise à jour l’attribut desc d'un plat.......................................................................... 24
Figure 29: Mise à jour l’attribut type d'un plat......................................................................... 24
Figure 30: Mise à jour l’attribut nutrients d'un plat.................................................................. 25
Figure 31: Mise à jour de l’attribut defaultIngredients d'un plat.............................................. 26
Figure 32 Mise à jour l’attribut suppIngredients d'un plat ....................................................... 26
Figure 33: Mise à jour l’attribut tags d'un plat ......................................................................... 27
Figure 34:Télechargement d’une nouvelle image réussi.......................................................... 27
Figure 35:Extrait du document aprés mise à jour (1)............................................................... 28
Figure 36:Extrait du document aprés mise à jour (2)............................................................... 28
Figure 37:Boite de confirmation de suppression d'un plat ....................................................... 29

6. Table des tableaux
Tableau 1:La collection meals.................................................................................................. 10
Tableau 2:La collection users................................................................................................... 11
Tableau 3:La collection orders ................................................................................................. 12
Tableau 4:La collection dates................................................................................................... 13
Tableau 5:La collection payments............................................................................................ 14

7. Introduction générale
Apparu avec Internet, le développement web fait référence au processus d’écriture d’un site
ou d’une page web dans un langage technique. Il s’agit d’une étape incontournable pour qu’un
contenu soit mis en ligne et atteigne ses lecteurs.
Le développement web a connu une véritable progression principalement avec l’apparition de
l’e-commerce et l’acquisition d’un site web est devenu indispensable pour les sociétés et les
organisations.
C'est dans ce cadre que s'inscrit ce travail qui consiste à réaliser un tableau de bord pour le
site web dietlecious.ae afin d’offrir une interface de visualisation et de contrôle pour ce site.
Ce rapport comporte quatre chapitres. Le premier chapitre présentera le cadre du stage et
l’entreprise d’accueil et ses objectifs. Le deuxième chapitre décrira l’environnement de
développement du projet y compris l’environnement matériel, l’environnement de travail de
l’équipe et l’environnement logiciel. Le troisième chapitre définira la notion NoSql et
détaillera la base de données du projet. Le dernier chapitre présentera les tâches réalisées.

8. 1
Chapitre 1 Présentation du cadre de stage
Nous présentons dans ce chapitre une présentation du cadre de stage. Dans un premier
temps, nous présentons la société d’accueil. Par la suite, nous détaillerons le contexte du stage
ainsi que les principaux objectifs du projet.
I. Présentation de la société d’accueil
1. Domaine d’activité
eDonec est une société tunisienne créé en octobre 2017 totalement exportatrice œuvrant dans
le domaine de l'IT.
La société regroupe un département de développement web et un deuxième de développement
mobile.
Le stage a été effectué dans le département de développement web.
2. Objectifs de la société
Parce que les grands de demain sont les enfants d’aujourd’hui, et parce qu’il est plus facile et
plus efficace de faire grandir des enfants forts que de réparer des adultes brisés, eDonec a créé
une plate-forme mobile polyvalente qui engage les parents dans la croissance et le
développement personnel de leurs enfants à la fois dans le jardin d’enfants et à la maison.
La principale caractéristique est de l’application est de permettre au responsable de garderie
de prendre des photos de l’enfant qui effectue diverses activités de garderie et de les envoyer
au parent pendant qu’il exécute leur routine quotidienne. En ayant une vision quotidienne de
la journée de l’enfant, les parents sont en mesure d’aller au-delà de la conversation typique
après le travail.
eDonec a comme but de propager la culture de protection de l’enfant et met à la disposition
des responsables dans le secteur d’éducation différents packs avec des prix raisonnables qui

9. 2
assure la communication entre les parents et les différents agents contribuant à l’éduction de
l’enfant.
Figure 1:Logo de la société eDonec
II. Contexte du stage et objectifs du projet
Dans le cadre de notre formation à l’Ecole nationale supérieur d’ingénieurs de Tunis nous
avons eu l’occasion de réaliser notre stage d’initiation au sein de la société eDonec afin de
compléter notre formation académique et de s’intégrer dans la vie professionnelle.
L’objectif de ce stage est de réaliser un tableau de bord pour un site marchand.
Le site est en deux versions : en anglais et en arabe.
Le tableau de bord permettra au futur administrateur du site d’ajouter, mettre à jour ou
supprimer des produits pour les deux versions de sites d’une façon parallèle.
Dans ce chapitre nous avons présenté la société d’accueil en précisant son secteur d’activité et
en détaillant ses missions, le contexte de stage et l’objectif du projet.
Le deuxième chapitre contiendra les notions théoriques indispensables pour la réalisation de
notre application.

10. 3
Chapitre 2 Environnement de développement
Avant d’entamer le travail, nous présentons l’environnement de développement du notre
projet. Nous commençons par décrire les caractéristiques du matériel utilisé, puis nous
passons à détailler l’éspace de travail de l’équipe et nous finissons par définir l’environnement
logiciel et les technologies utilisées.
I. Environnement matériel
Pour la réalisation de notre projet, nous avons utilisé les équipements suivants :
• Ordinateur : Lenovo IdeaPad 300,
• Processeur : Intel Core i5,
• Mémoire vive : 8 GB,
• Disque dur : 500 GB,
• Système d’exploitation : Windows 10 Professionnel 64 bits.
II. Environnement de travail de l’équipe
1. Gitlab
Gitlab, est une plateforme permettant d’héberger et de gérer des projets web de A à Z.
Présentée comme la plateforme des développeurs modernes, elle offre la possibilité de gérer
ses dépôts Git et ainsi de mieux appréhender la gestion des versions de vos codes sources. [1]
Figure 2:Logo GitLab

11. 4
2. Slack
Slack est une plateforme collaborative qui vous permet de mieux travailler en équipe.
Dans Slack, le travail se déroule dans des chaînes de conversations.
Vous pouvez créer des chaînes par équipe, par projet ou même par site de travail. Les
membres d’un espace de travail ou d’une organisation peuvent rejoindre et quitter les chaînes
comme ils le souhaitent. [2]
Figure 3:Logo slack
III. Environnement logiciel
1. ES6
JavaScript a pas mal changé ces dernières années. Ces nouveaux ajouts au langage sont
appelés ECMAScript 6, ou encore ES6, ou ES2015. ECMAScript est une norme arrivée en
1997 pour orienter JavaScript, et a publié des versions : ES3, ES5, ES6, ES7, ES8 et ES9.
Il y a eu un saut particulièrement important entre ES5 et ES6:Fonctions fléchées, Classes,
Modules …
C’est une vraie révolution du Javascript. [3]
Figure 4:Logo JavaScript

12. 5
2. ReactJS
React (aussi appelé React.js ou ReactJS) est une bibliothèque JavaScript libre développée
par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la création
d'application web monopage, via la création de composants dépendant d'un état et générant
une page (ou portion) HTML à chaque changement d'état. React est une bibliothèque qui ne
gère que l'interface de l'application, considéré comme la vue dans le modèle MVC. Elle peut
ainsi être utilisée avec une autre bibliothèque ou un framework MVC comme AngularJS. La
bibliothèque se démarque de ses concurrents par sa flexibilité et ses performances, en
travaillant avec un DOM virtuel et en ne mettant à jour le rendu dans le navigateur qu'en cas
de nécessité. [4]
Figure 5:Logo React
3. Redux
Redux est une bibliothèque JavaScript open-source pour la gestion de l'état d'application. Il
est le plus souvent utilisé avec des bibliothèques telles que React ou Angular pour créer des
interfaces utilisateur. [5]
Figure 6:Logo Redux

13. 6
4. SASS/SCSS
Sass (Syntactically Awesome Stylesheets) est un préprocesseur Css. Il permet une génération
dynamique de feuilles de style. De ce fait, on peut styliser facilement nos pages html et éviter
la répétition de certaines règles. [6]
Figure 7:Logo SCSS
5. Firebase
Firebase est une plateforme mobile de Google qui facilite la création de Backend à la fois
scalable et performant. En d’autres termes, il s’agit d’une plateforme qui permet de développer
rapidement des applications pour mobile et pour le web. L’objectif de la création de Firebase
est d’éviter aux professionnels et aux particuliers de s’engouffrer dans un processus complexe
de création et de maintenance d’une architecture serveur. De plus, la plateforme peut être
exploitée par plusieurs utilisateurs en même temps sans connaître un quelconque bug. [7]
Figure 8:Logo FireBase

14. 7
Au cours de ce chapitre nous avons présenté l’environnement de développement. Nous avons
présenté les caractéristiques du matériel utilisé, les applications qui assurent la communication
entre les membres de l’équipe de travail et les différents outils de développement de notre
application.
Le chapitre suivant listera les tâches réalisées le long de ce stage.

15. 8
Chapitre 3 Base de données
Dans ce chapitre nous allons définir la notion de NoSQL utilisée pour réaliser le backend de
notre application. Nous présentons les différents types de base de données NoSQL. Nous
détaillerons aussi les différentes collections de la base de données.
I. Définition de NoSQL
Le NoSQL, pour "not only SQL", désigne les bases de données qui ne sont pas fondées sur
l'architecture classique des bases de données relationnelles. Développé à l'origine pour gérer
du big data. Il faut savoir qu'il existe plusieurs types de bases de données "NoSQL".
II. Types de base de données NoSQL
Dans cette section nous présentons les types de base de données NoSQL et leurs
caractéristiques.
1. Clef/Valeur
Les bases clef/valeur, permettent de stocker des informations sous forme d'un couple
clef/valeur.
2. Colonnes
Les bases orientées colonnes, ressemble aux bases de données relationnelles, car les données
sont sauvegardées sous forme de ligne avec des colonnes, mais se distingue par le fait que le
nombre de colonnes peut varier d'une ligne à l'autre.

16. 9
3. Document
Les bases orientées document, représente les informations sous forme d'objet XML ou JSON.
L'avantage est de pouvoir récupérer simplement des informations structurées de manière.
4. Graphe
Les bases orientées graphe, présentent les données sous forme de nœud et de relation. Cette
structure permet de récupérer simplement des relations complexes. [8]
Dans notre projet, nous avons choisi le type document pour la réalisation de notre base de
données.
III. La Base de données
Dans cette section nous présentons les différentes collections de la base de données du projet.
Nous présentons pour chaque collection un exemple extrait du Firebase.
1. Meals
Le tableau ci-dessous, présente la collection meals, ses différents attributs et leurs types.
Il est accompagné par un exemple d’un document détaillé du Firebase.

17. 10
Tableau 1:La collection meals
2. Users
Le tableau ci-dessous, présente la collection users, ses différents attributs et leurs types.
Il est accompagné par un exemple d’un document détaillé du Firebase.
Attribut Type
name Objet
desc Objet
defaultIngredients Tableau
suppIngredients Tableau
rating Objet
type Chaîne de caractères
tags Tableau
nutrients Objet
imgUrl Chaîne de caractères
Figure 9:Extrait Firebase d'un document de la collection meals

18. 11
Attribut Type
name Chaîne de caractères
birthday Entier
adress Chaîne de caractères
email Chaîne de caractères
gps Objet
phone Entier
zone Chaîne de caractères
createdAt Date
language Chaîne de caractères
note Chaîne de caractères
role Chaîne de caractères
Tableau 2:La collection users
Figure 10:Extrait Firebase d'un document de la collection users

19. 12
3. Orders
Le tableau ci-dessous, présente la collection orders, ses différents attributs et leurs types.
Il est accompagné par un exemple d’un document détaillé du Firebase.
Attribut Type
amount Réel
createdAt Entier
delevieryDate Chaîne de caractères
isPaid Boolean
meals Tableau
user Objet
Tableau 3:La collection orders
Figure 11:Extrait Firebase d'un document de la collection orders

20. 13
4. Dates
Le tableau ci-dessous, présente la collection dates, ses différents attributs et leurs types.
Il est accompagné par un exemple d’un document détaillé du Firebase.
Tableau 4:La collection dates
Figure 12:Extrait Firebase d'un document de la collection orders
5. Payments
Le tableau ci-dessous, présente la collection payments, ses différents attributs et leurs types.
Il est accompagné par un exemple d’un document détaillé du Firebase.
Attribut Type
breakfast Tableau
defaultMeals Objet
lunchAndDinner Tableau
nbrOf Orders Entier
snackAndSoups Tableau

21. 14
Dans ce chapitre nous avons défini la notion NoSQL de la base de données, ainsi que ses
différents types et les différentes collections de la base de données .
Attribut Type
amount Réel
currency Chaîne de caractères
description Chaîne de caractères
items Tableau
orderId Chaîne de caractères
telrRef Chaîne de caractères
telrStatus Chaîne de caractères
userId Chaîne de caractères
Tableau 5:La collection payments
Figure 13:Extrait Firebase de la collection payments

22. 15
Chapitre 4 Tâches effectuées
Dans ce chapitre nous allons lister les différentes tâches effectuées afin de réaliser le tableau
de bord. Premièrement, nous détaillerons l’étape d’affichage des plats. Ensuite, nous passons
à l’ajout et la mise à jour des plats. Et enfin, nous présentons l’étape de suppression des plats.
I. Afficher les données des plats
Dans cette étape, nous affichons pour tous les documents de la collection meals les
champs suivants sous forme d’un tableau :
• id,
• name,
• rating,
• tags,
• type.
Nous avons pour chaque document affiché dans le tableau deux boutons. Le premier bouton
est le bouton edit sous forme d’un stylo qui permettra de mettre à jour les données du
document et le deuxième bouton est le bouton delete sous forme de corbeille qui permettra de
supprimer le document.
Le bouton + en bas de la page permet d’ajouter un nouveau document à la collection meals.

23. 16
II. Le formulaire d’ajout d’un plat
Pour permette au responsable de tableau de bord d’ajouter un nouveau plat dans la collection
meals, un formulaire s’ouvre en cliquant sur le bouton + en bleu.
Après avoir terminé la saisie des données nous devons valider l’ajout des informations en
cliquant sur la disquette. Si nous fermons le formulaire l’ajout de document ne sera pas pris
en compte.
Figure 14 : Affichage des plats

24. 17
Le responsable est demandé à fournir :
• Un nom en anglais,
• Un nom en arabe,
• Une description en anglais,
• Une description en arabe,
• Un type,
• Quantité de calories,
• Quantité de graisses,
• Quantité de protéines,
• Quantité de glucides,
• Une liste des ingrédients par défaut,
• Une liste des ingrédients supplémentaires,
• Une liste de mots-clés.
Il est aussi invité à choisir une image et la valider pour la télécharger. L’image choisie sera
stockée en storage de Firebase.
Figure 15:Extrait du formulaire d’ajout d’un plat

25. 18
1. Remplir les champs du formulaire
Dans cette section, nous présentons les différents champs à remplir afin d’alimenter la
collection meals de notre base de données par de nouveaux plats avec les attributs
correspondants.
a. L’attribut name
Afin d’ajouter un nom à un nouveau plat, nous disposons de deux champs de saisie.
Le premier est pour écrire un nom en anglais, le deuxième est pour un équivalent en arabe.
Figure 16:Champs de saisie de l’attribut name d’un nouveau plat
b. L’attribut desc
Afin d’ajouter une description à un nouveau plat, nous disposons de deux zones de texte.
La première est pour écrire une description en anglais, la deuxième est pour une équivalente
en arabe.
c. L’attribut type
Afin de choisir un type pour le nouveau plat, nous disposons d’une liste déroulante de trois
choix :
Figure 17:Zones du texte de l’attribut desc d'un nouveau plat

26. 19
• Breakfast,
• Snack & Soups,
• Lunch & Dinner
Le type par défaut est Breakfast.
d. L’attribut nutrients
L’attribut nutrients est un objet qui comporte quatre propriétés : cals, fats, prots et carbs.
Pour remplir cet objet, nous avons recours à remplir les quatre champs de saisie de type
nombre.
Figure 19:Champs du saisie de propriétés de l’attribut nutrients d’un nouveau plat
Figure 18:Liste déroulante de l’attribut type d’un nouveau plat

27. 20
e. L’attribut defaultIngredients
Pour remplir la liste des ingrédients par défaut, nous disposons d’un bouton plus qui permet
d’ajouter à chaque clique deux champs de saisie du nom de l’ingrédient. Le premier est pour
un nom en anglais, le deuxième est pour un équivalent en arabe. Ils sont suivis par une
corbeille cliquable pour les supprimer en cas de besoin.
f. L’attribut suppIngredients
Pour remplir la liste des ingrédients supplémentaires, nous disposons d’un bouton plus qui
permet d’ajouter à chaque clique trois champs de saisie du nom de l’ingrédient. Les deux
premiers sont pour la saisie des noms, le troisième est pour la saisie d’un prix. Ils sont ausssi
suivis par une corbeille.
Figure 20:Champs de saisie de l’attribut defaultIngredients d'un nouveau plat
Figure 21: Champs de saisie de l’attribut suppIngredients d'un nouveau plat

28. 21
g. L’attribut tags
Pour remplir la liste des tags par défaut, nous disposons des champs de saisie identiques à
ceux de defaultIngredients
2. L’image
Le formulaire nous donne aussi la possibilité de choisir une image pour le plat suggéré.
Après avoir cliqué sur choisir un fichier, nous choisissons une image puis nous cliquons sur
Upload pour la valider. Nous pouvons aussi visualiser l’avancement de téléchargement.
Lorsque le téléchargement est effectué avec succès, l’image s’affichera et sera stockée dans
le storage de Firebase et l’url de téléchargement est stockée dans l’attribut imgUrl de la table
meals.
Figure 22:Champs de saisie de l’attribut tags d'un nouveau plat

29. 22
Figure 24 : Image d’un plat choisie
III. Le formulaire de mise à jour d’un plat
Pour permette au responsable de tableau de bord de modifier un plat existant plat dans la
collection meals, un formulaire s’ouvre en cliquant sur le bouton stylo en oranger.
Après avoir terminé la saisie des données, il est indispensable de valider l’ajout des
informations comme dans le formulaire précédent.
Il est aussi possible de choisir une nouvelle image pour le plat.
1. Remplir les champs du formulaire
Dans cette section, nous présentons les différents champs à remplir afin de mettre à jour les
attributs du plat.
Figure 23 :Choix d’une image d’un nouveau plat

30. 23
a) L’attribut name
Afin de mettre à jour le nom du plat, nous disposons de deux champs de saisie pour saisir un
en anglais et un deuxième en arabe.
Figure 25:Extrait du formulaire de mise à jour d'un plat
Figure 26:Extrait Firebase du plat à mettre à jour

31. 24
Nous supposant qu’on va mettre à jour le nom du plat salad à salad with corns.
a. L’attribut desc
Afin de mettre à jour la description du plat, nous disposons de deux zones de texte pour saisir
une en anglais et une en arabe. On a choisi de mettre à jour que la description en anglais.
Figure 28:Mise à jour l’attribut desc d'un plat
b. L’attribut type
Afin de choisir un nouveau type pour le plat, nous disposons d’une liste déroulante de trois
choix identiques à celle du formulaire précédent. Le nouveau type choisi est Lunch & Diner.
Figure 27:Mise à jour l’attribut nom d'un plat
Figure 29: Mise à jour l’attribut type d'un plat

32. 25
c. L’attribut nutrients
Pour mettre à jour l’attribut nutrients, nous pouvons modifier les valeurs de : cals, carbs, fats
et prots. Les anciennes valeurs sont affichées avant de les modifier.
d. L’attribut defaultIngredients
Les ingrédients par défauts qui existent déjà sont affichés suivis par une corbeille cliquable
pour les supprimer. Pour ajouter d’autres ingrédients par défauts, nous disposons d’un bouton
plus qui permet d’ajouter à chaque clique deux champs de saisie du nom de l’ingrédient. Le
premier est pour un nom en anglais, le deuxième est pour un équivalent en arabe. Ils sont
suivis par une corbeille cliquable permettant la suppression.
Figure 30: Mise à jour l’attribut nutrients d'un plat

33. 26
e. L’attribut suppIngredients
Les ingrédients supplémentaires qui existent déjà sont affichés suivis par une corbeille
Pour ajouter d’autres ingrédients supplémentaires, nous disposons d’un bouton + qui permet
d’ajouter à chaque clique trois champs de saisie. Les deux premiers pour la saisie de noms en
anglais et en arabe, le troisième pour la saisie d’un prix.
Figure 32 Mise à jour l’attribut suppIngredients d'un plat
Figure 31: Mise à jour de l’attribut defaultIngredients d'un plat

34. 27
f. L’attribut tags
Les mots-clés qui existent déjà sont affichés suivis par une corbeille. Pour ajouter d’autres
mots clés, nous disposons d’un bouton qui a la même fonctionnalité que celui de l’attribut
defaultIngreients. Dans ce cas nous avons supprimé le mot clé New et le remplacé par
Tasty.
Figure 33: Mise à jour l’attribut tags d'un plat
2. L’image
Le formulaire nous donne aussi la possibilité de changer l’image d’un plat. Si le plat possède
déja une image elle sera affichée. Lorsque le téléchargement est effectué avec succès, l’image
sera remplacée dans le storage de Firebase. La nouvelle url de téléchargement sera stockée
dans l’attribut imgUrl de la table meals.
Figure 34:Télechargement d’une nouvelle image réussi

35. 28
Nous remarquons bien que les attributs du document ont été mise à jour comme prévu.
L’attribut imgUrl est changé et l’ancienne image est aussi remplacée en storage.
Figure 35:Extrait du document aprés mise à jour (1)
Figure 36:Extrait du document aprés mise à jour (2)

36. 29
IV. La suppression d’un plat
La suppression d’un plat se fait en cliquant sur la corbeille en rouge.
Après avoir cliqué sur le bouton correspondant, une boite de confirmation s’affichera.
L’utilisateur aura le choix entre la suppression et la validation de l’opération. Dans le
deuxième cas le plat sera définitivement supprimé.
Figure 37:Boite de confirmation de suppression d'un plat

37. 30
Conclusion générale
L’objectif de ce projet est de concevoir et réaliser un tableau de bord pour un site marchand.
Cette application web consiste à visualiser et contrôler la base de données du site. Elle donne
la possibilité d’ajouter, de mettre à jour et de supprimer les données.
Les fonctionnalités offertes par le tableau du bord sont élémentaires ce qui rend l’opération
de modification des données simple en cachant la complexité des traitements par rapport à
l’utilisateur final de l’application.
Notre solution est fonctionnelle et elle a pu répondre aux besoins de client. L’emploi de
nouvelles technologies a rendu une telle application performante et sans défauts.
L’apprentissage de technologies tels que React et la notion NoSql en base de données est très
utile vu qu’elles sont très demandées dans le marché du travail.
Ce stage était vraiment une opportunité pour améliorer nos capacités en développent web.
Cette expérience si enrichissante nous a offert une ouverture sur le monde professionnel et
nous a appris à assumer une responsabilité.

38. 31
Nétographie
[1] https://blog.axopen.com/2017/02/gitlab-cest-
quoi/?fbclid=IwAR1tM05Lj8mcpcxHSzJtkD9XXO2wJnuD74sPy22hctC3A0CFQqlAKYRX
5K0 (Septembre 2019)
[2] https://slack.com/intl/fr-fr/help/articles/115004071768 (Septembre 2019)
[3] https://web.developpez.com/tutoriels/fonctionnalite-javascript-es6/ (Septembre 2019)
[4] https://fr.wikipedia.org/wiki/React_(JavaScript) (Septembre 2019)
[5] https://iron-
network.gitbook.io/reactify/?fbclid=IwAR3dZ_Z6eFtlt0rE3ja_rQRoY01nNWa8ZJTBjYOCN
QZc-7FO-Uf1roLk89I (Septembre 2019)
[6] https://www.supinfo.com/articles/single/2067-sass-preprocesseur-css
(Septembre 2019)
[7] https://junto.fr/blog/firebase/ (Septembre 2019)
[8] https://www.grafikart.fr/blog/sql-
nosql?fbclid=IwAR3ONnk2PGVLSMmeZcsEjHjiiacxr2tmvLjZ9Kb7VfhJUql43IOhZiryVD4
#targetText=Le%20NoSQL%2C%20pour%20"not%20only,a%20explosée%20depuis%20que
lques%20années (Septembre 2019)

39. 32
Résumé
Ce travail s’inscrit dans le cadre de stage d’été de première année génie informatique à l'Ecole
Nationale Supérieure d'Ingénieurs de Tunis-ENSIT.
Il consiste en fait à concevoir et réaliser un tableau du bord d’un site web e-commerce.
L’application permet de visualiser et contrôler les données du site web.
Elle offre les fonctionnalités suivantes : l’ajout, la mise à jour et la suppression des données.
Mots clés : React, Redux ,Firebase, JavaScript, ES6, NoSql.
Abstract
This work is part of the summer internship of first year computer engineering at the Higher
National School of Engineers of Tunis-ENSIT.
It consists in designing and creating a dashboard of an e-commerce website. The application
allows to view and control the data of the website.
It offers the following features: adding, updating and deleting data.
Keywords : React, Redux, Firebase, JavaScript, ES6, NoSql.
‫الملخص‬
‫ي‬‫في‬ ‫األولى‬ ‫السنة‬ ‫في‬ ‫االعالمية‬ ‫لهندسة‬ ‫الصيفي‬ ‫التدريب‬ ‫إطار‬ ‫في‬ ‫العمل‬ ‫هذا‬ ‫ندرج‬‫الم‬‫درس‬‫العليا‬ ‫الوطنية‬ ‫ة‬‫بتونس‬
.ENSIT-
.‫الويب‬ ‫على‬ ‫إلكترونية‬ ‫تجارة‬ ‫لموقع‬ ‫معلومات‬ ‫لوحة‬ ‫وإنشاء‬ ‫تصميم‬ ‫من‬ ‫يتألف‬ ‫وهو‬‫موقع‬ ‫بيانات‬ ‫بعرض‬ ‫التطبيق‬ ‫يسمح‬
. ‫الم‬ ‫توفر‬ ‫وهي‬ ‫فيها‬ ‫والتحكم‬ ‫الويب‬‫وحذف‬ ‫وتحديثها‬ ‫البيانات‬ ‫إضافة‬ :‫التالية‬ ‫يزات‬‫ه‬‫ا‬
.NoSql, ES6, JavaScript, Firebase, Redux, React : ‫الكلمات‬‫المفاتيح‬