l consulti

1
Formation Certifiante Développement WEB na

ng
ternatio

CANADA
- In

-
Ce
rtificate

Yellow Belt Certification

International Consulting Canada

Introduction

Développement Full-Stack JS

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
2
Formation Certifiante Développement WEB

Plan de la Séance
1. Introduction au Développement Full-Stack
2. Avantages et Défis
3. Présentation des langages et Frameworks
• HTML/CSS/JavaScript
• React JS
• Node JS
• React Native

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
3
Formation Certifiante Développement WEB

C’est quoi le développement web ?

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
4
Formation Certifiante Développement WEB

Développement web
• Le développement Web est le codage ou la programmation qui permet de faire
fonctionner un site Web , selon les exigences (cahier de charge) du client.

• Le mot « Développement Web» désigne toutes les étapes de la création d’un site
web, d’une application ou encore d’un logiciel.

• Le développement web consiste à créer des solutions techniques, créatives et

fonctionnelles pour répondre à une idée, un besoin ou une problématique du
monde réel, le tout en utilisant les technologies et les infrastructures du web.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
 5
Formation Certifiante Développement WEB

C’est quoi le métier de développeur web ?

❖ Un développeur ou programmeur Web est une personne qui prend un projet

Web, qui a été pensée et réfléchie par un client ou une équipe de conception, et
la transforme en site Web.
❖ Les développeurs Web doivent prendre des besoins et la traduire dans une
langue qu’un ordinateur comprend, comme HTML,CSS ,JavaScript, Mysql ,NodeJS
….
❖ On travaille généralement en équipes dans les quelles chacun peut avoir une
spécialité (front end, back end, full stack, …)

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
 6
Formation Certifiante Développement WEB

Qui peut devenir développeur web ?

Tout le monde !

Tout le monde peut devenir développeur web. C’est l’avantage de ce métier. S’il te passionne,
tu as la possibilité de le devenir.

Il n’y a pas besoin de diplômes ou certificats particulier comme les autres metiers…

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
7
Formation Certifiante Développement WEB

3 Types de Développeurs web !!!

Les trois principaux types de développeurs sont front-end, back-end et full-stack..
• Les développeurs front-end s’occupent de la partie d’un site Web que les gens
voient et avec laquelle ils interagissent.
• Les développeurs back-end sont responsables eux, du code en arrière-plan. Ce
code va servir à contrôler la partie dynamique de site Web.
• Les développeurs full-stack font un peu de tout .

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
8
Formation Certifiante Développement WEB

Développement FullStack : Une Approche Complète pour les

Applications Web Modernes

Introduction : Le développement FullStack est devenu une approche

incontournable pour la création d'applications web robustes et évolutives. Cette

présentation fournira un aperçu approfondi des aspects techniques du

développement FullStack, en mettant en lumière ses technologies clés, ses

avantages et ses défis.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
9
Formation Certifiante Développement WEB

Définition
Le développement FullStack englobe à la fois le développement
du côté client (frontend) et du côté serveur (backend) d'une
application web. Les développeurs FullStack sont capables de
concevoir, développer et déployer des applications de bout en
bout, offrant ainsi une expertise complète dans le cycle de
développement.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
10
Formation Certifiante Développement WEB

Pour quoi

je serais un développeur FullStack

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
11
Formation Certifiante Développement WEB

Avantages, Défis et Conclusion

Avantages du Développement FullStack :

• Polyvalence : Les développeurs peuvent travailler sur toutes les parties
de l'application, ce qui permet une meilleure compréhension et une
résolution plus rapide des problèmes.

• Efficacité : Moins de dépendances entre les équipes frontend et

backend, ce qui accélère le processus de développement.

• Réduction des coûts : Moins de ressources nécessaires, car une équipe

FullStack peut gérer l'ensemble du projet.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
12
Formation Certifiante Développement WEB

Avantages, Défis et Conclusion

Défis du Développement FullStack :

• Complexité : Le développement FullStack exige une expertise dans une variété
de technologies et de concepts.

• Mises à jour et Évolutions : Les technologies évoluent rapidement, et les

développeurs doivent rester à jour pour maintenir leurs compétences
pertinentes.

• Sécurité : La gestion des données et des interactions avec l'utilisateur nécessite

une attention particulière pour éviter les failles de sécurité.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
13
Formation Certifiante Développement WEB

Un salaire intéressant
❖ Le dernière raison d’être développeur web, est le salaire, quand vous travaillez dans ce
métier, vous avez bien payé et il est facile de trouver un emploi.

➢ Le salaire annuel moyen en europe d’un développeur Front est compris entre
30 000 et 35 000 €
➢ Alors que le salaire annuel moyen en europe d’un développeur FullStack est
compris entre 45 000 et 50 000 €.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
14
Formation Certifiante Développement WEB

Comment devenir développeur web

FullStack JS?

Pour dévenir développeur FullStack JS il faut maîtriser :

* Intégartion web (HTML,CSS , JS et Bootstrap )
* Framework JS Pour la partie Front
* Framework JS Pour la partie Base de données

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
 15
Formation Certifiante Développement WEB

Les principes de fonctionnement d’une Application FullStack

Serveur Réseau
Navigateur
2- réception de
1- Envoyer la commande
la commande
3- préparer
la réponse

4- renvoyer la réponse 5- afficher la réponse

Framework API-REST Framework

Back-end Front-end

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
16
Formation Certifiante Développement WEB

Technologies et Outils
Technologies Frontend :

➢HTML/CSS/JavaScript : Les langages de base pour la création d'interfaces

utilisateur web.

➢Frameworks JavaScript : React.js, Angular, ou Vue.js, pour la construction

d'interfaces réactives et dynamiques.

➢Responsive Design : Assure une expérience utilisateur optimale sur une

variété de dispositifs et tailles d'écran.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
17
Formation Certifiante Développement WEB

Technologies et Outils
Technologies Backend :

➢Langages de Programmation : Node.js (JavaScript), Python avec Django ou

Flask, Ruby avec Ruby on Rails, etc.

➢Base de Données : SQL (MySQL, PostgreSQL) ou NoSQL (MongoDB,

Firebase) pour la gestion des données.

➢API RESTful : Pour la communication efficace entre le frontend et le

backend.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
18
Formation Certifiante Développement WEB

HTML
L'HyperText Markup Language, HTML, désigne un type de langage informatique
descriptif. Il s'agit plus précisément d'un format de données utilisé dans l'univers d'Internet
pour la mise en forme des pages Web

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
19
Formation Certifiante Développement WEB

Les balises
Les balises correspondent à des éléments du code d’une page web sur Internet.
Elles sont une partie intégrante de la composition de la page puisqu’elles permettent de
mettre en forme et de structurer les contenus.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
20
Formation Certifiante Développement WEB

Structure page web en HTML

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
21
Formation Certifiante Développement WEB

Exemple HTML

déclaration définit que ce

document est un document HTML5
l'élément racine d'une page HTML

élément contient des méta-

informations sur la page HTML

élément spécifie un titre pour la

page HTML

élément définit le corps du

document est un conteneur pour
tous les contenus visibles, tels que
les paragraphes, les images, les
hyperliens, les tableaux, les listes
International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
22
Formation Certifiante Développement WEB

CSS

Le CSS (feuilles de style en cascade) est un langage qui permet de décrire l’apparence
d’une page .Il permet de cibler différents éléments HTML pour décrire ensuite

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
23
Formation Certifiante Développement WEB

Exemple
Intégration du langage CSS dans une page web en HTML

1/ utilise l’ attribut style

dans la balise HTML

2/CSS interne est défini dans

la <head>de document html

3/ajoutez-y un lien dans la <head> de

chaque page HTML

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
24
Formation Certifiante Développement WEB

JavaScript

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
25
Formation Certifiante Développement WEB

Initiation au JavaScript
JavaScript est un langage de programmation qui permet d'implémenter des
mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus
que simplement afficher du contenu statique , permet d’ afficher des objets animées,
des animations 2D/3D, des menus vidéo …

Les bases de JavaScript

• Stockage et utilisation des variables
• les fonctions en JavaScript
• Les boucles , les evenements

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
26
Formation Certifiante Développement WEB

Exemple
Intégration du langage JavaScript dans une page web en HTML

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
27
Formation Certifiante Développement WEB

Bootstrap

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
28
Formation Certifiante Développement WEB

Bootstrap
• Bootstrap est un framework développé par l'équipe du réseau social Twitter. Proposé
en open source (sous licence MIT),
• Bootstrap est une boîte à outils utilise les langages HTML, CSS et JavaScript fournit
aux développeurs des outils pour créer un site facilement.
• Ce Framework est pensé pour développer des sites avec un design responsive, qui
s'adapte à tout type d'écran, et en priorité pour les smartphones.
• Il fournit des outils avec des styles déjà en place pour des typographies, des boutons,
des interfaces de navigation et bien d'autres encore.
• On appelle ce type de framework un "Framework de présentation".

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
29
Formation Certifiante Développement WEB

React js ?

React (également connu sous le nom de React.js ou ReactJS) est un

framework JavaScript frontale à code source ouvert permettant de créer
des interfaces utilisateur ou des composants d'interface utilisateur.
Elle est maintenue par Facebook et une communauté de développeurs
individuels et d'entreprises.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
30
Formation Certifiante Développement WEB

Structure d’un Projet Front-End (ReactJS)

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
31
Formation Certifiante Développement WEB

Exemple de Consommation d’un API GET dans React avec axios

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
32
Formation Certifiante Développement WEB

Exemple de Consommation d’un API-POST dans React avec axios

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
33
Formation Certifiante Développement WEB

Node js ?

Node.js est un framework Back-End, un environnement d’exécution single-

thread, open-source et multi-plateforme permettant de créer des applications
rapides et évolutives côté serveur et en réseau.
Il fonctionne avec le moteur d’exécution JavaScript V8 et utilise une
architecture d’E / S non bloquante et pilotée par les événements, ce qui le
rend efficace et adapté aux applications en temps réel.

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
34
Formation Certifiante Développement WEB

Structure d’un Projet Back-End (NodeJS)

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
35
Formation Certifiante Développement WEB

Exemple Construction des API-REST (dans NodeJS)

API Pour enregistrer des projets dans la BD

Nom Controller

Afficher les
Valeurs de Form

Requete SQL

Resultat Format
JSON

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
36
Formation Certifiante Développement WEB

API Pour recupérer les projets dans la BD

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
37
Formation Certifiante Développement WEB

React Native

❖ Créé par Facebook.

❖ Commencez par publier la version iOS en Mars 2015 et version Android
en septembre 2015
❖ Framework JavaScript
❖ Basé sur la bibliothèque Web JavaScript populaire appelé React
❖ REACT Native vous aide à créer des applications mobiles réelles et
performantes
❖ Ne codez qu'une seule fois

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
38
Formation Certifiante Développement WEB

Applications Mobiles développés par React Native

International www.karray-group.com
www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
39
Formation Certifiante Développement WEB
al c
onsultin

ternation

gC
ANADA -
- In
Cer
tificate

Yellow Belt Certification

International Consulting Canada

MERCI

00216 – 25 555 090

International
Consulting
www.karray-group.com
Intissar
www.karray-group.com ATB Building, SELMI
Gremda Road Km 6, – KARRAY GROUP
3022
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5