Introduction au développement Web

Introduction au développement Web
Introduction au
développement Web
IBM Academic | Romain Willmann

Au programme
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web

Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud
4. Comprendre les bases de données
5. APIs & Services Web

Aujourd’hui
Internet Web
HTTP HTML

Internet est un réseau de réseaux
Créé durant
les années 60
Compte
aujourd’hui
50K réseaux

Un réseau
N >= 2
Un protocole
De
l’information
Le Web
Un serveur, au
moins un client
Hyper Text
Transfer Protocol
Des pages HTML
Le Web est un réseau ordinaire

Ecrire des pages Web avec l’HyperText Markup Langage
Un langage de
programmation
Structure des
pages Web
Fonctionne
avec des paires
de balises
Standard et
incontournable

Six premières balises HTML pour bien débuter
Un éditeur en ligne pour s’entraîner
Rôle Paramètres Obligatoire?
<html>…</html>
Définit une page
HTML ∅ ✔
<body>…</body>
Définit le contenu
visible de la page ∅ ✔
<p>…</p>
Délimite un
paragraphe ∅ ✘
<button>…</button> Crée un bouton ∅ ✘
<img>…</img> Insère une image src ✘
<a>…</a>
Crée un lien
hypertexte href ✘

Première réalisation: un CV en HTML
Utiliser nos
six balises
En découvrir
de nouvelles

Aujourd’hui
Architecture
client-serveur
Requête &
réponse HTTP
Node.js Javascript

Découvrir l’architecture client-serveur
Les clients et
serveurs sont
des logiciels
Ils désignent
aussi la machine
qui l’exécute

Cinq bonnes raisons de choisir Node.js comme serveur
Open
Source
Moderne Puissant
Modulaire Accessible
Télécharger Node.js!

Echanger des données en HTTP: requêtes et réponses
Requête HTTP
Réponse, page
HTML

Définition
 Objets qui portent un nom
et qui contiennent des
données
 Créées par nous
(« déclarées ») ou par le
programme
Subtilité
 Une variable peut contenir
d’autres variables
(« propriétés ») et des
fonctions (« méthodes »)
Javascript pour Node.js: les variables

Définition
 Ensemble d'instructions
effectuant une tâche
 Créées par nous
(« déclarées ») ou par le
programme
 Peut prendre des
paramètres et retourner un
résultat
Subtilités
 Anonymat: une fonction ne
porte pas nécessairement
de nom
 Callback: un paramètre
d’une fonction peut être
une fonction (dont les
paramètres peuvent être
une fonction :p)
Javascript pour Node.js: les fonctions

Gérer des requêtes avec Node.js
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.send('<h1>Notre première application Web</h1>');
res.end();
});
app.listen(80);
Réception Routage Réponse

Seconde réalisation: une CVthèque avec Node.js
Comprendre la
gestion des
requêtes
Gérer la
position des
fichiers

Aujourd’hui
Cloud PaaS
Bluemix
Cloud
Foundry

Pâte à pizza Pâte à pizza Pâte à pizza Pâte à pizza
Tomates Tomates Tomates Tomates
Fromage Fromage Fromage Fromage
Garniture Garniture Garniture Garniture
Ustensiles Ustensiles Ustensiles Ustensiles
Four Four Four Four
Electricité Electricité Electricité Electricité
Vaisselle Vaisselle Vaisselle Vaisselle
Table Table Table Table
Faite maison Surgelée Domino's Pizzeria
Moi Fournisseur

Réseau Réseau Réseau Réseau
Stockage Stockage Stockage Stockage
Serveur Serveur Serveur Serveur
Virtualisation Virtualisation Virtualisation Virtualisation
O/S O/S O/S O/S
Middleware Middleware Middleware Middleware
Runtime Runtime Runtime Runtime
Données Données Données Données
Application Application Application Application
Informatique
traditionnelle
Infrastructure
as a Service
Platform as a
Service
Software as a
Service
Client Fournisseur
Les quatre modèles de service informatique

Quelques caractéristiques du Cloud Computing
ElasticitéLibre-service
Ubiquité
Haute
disponibilité
Aucun
coût de
propriété
Evolutivité

Bluemix est la PaaS d’IBM
100+ services
intégrables
instantanément
Déploiement
d’applications en
quelques minutes
Bluemix s’intègre
avec tout outil ou
langage
Repose sur de
l’Open Source
Une application
est toujours
améliorable
Aller vite pour
répondre aux
opportunités
Libre choix des
outils de
développement
La qualité est
centrale
Bluemix est utilisable gratuitement dans un cadre pédagogique

Déployer une application en 60 secondes avec Cloud Foundry
Rôle
cf api https://api.ng.bluemix.net
Connecte Cloud Foundry sur
Bluemix
cf login
Lance l’authentification pour
accéder à votre espace
cf push
Lit le manifest de votre
application et ordonne son
déploiement
Découvrir le projet Cloud Foundry

Troisième réalisation: déployer notre application dans le Cloud
Découvrir
Cloud Foundry
et Bluemix
Préparer une
application
pour le Cloud

Aujourd’hui
Base de
données
SQL
NoSQL MongoDB

Une application avec une base de données
Une base de
données est un
fichier contenant
des informations
Une application la
manipule à l’aide
d’un SGBD

La première génération de base de données: SQL
Début des
années 70
Organisation
relationnelle
(tableau)
Structuration
forte
Evolutivité
verticale

Le NoSQL pour une information plus complexe
Début des
années 2000
Organisation
par document
(post-it)
Pas de
structure
prédéfinie
Evolutivité
horizontale

Open Source Simple
Bon couple
avec Node.js
Insert, Find,
Update,
Remove
Un document MongoDB
{
"_id": {
"$oid": "55d58c4be0cdcf1d0099cb6b"
},
"Prénom": "Romain",
"Nom": "Willmann",
“Twitter": “@rwillmann",
“Compagnie": “IBM",
"Alumni": "EMLYON",
}
Pourquoi MongoDB comme SGBD?
Une base de données de 500 Mo offerte avec Bluemix

Créer un document MongoDB avec Node.js
var mongodb = require('mongodb');
var url = 'mongodb://…';
mongodb.MongoClient.connect(url, function(err, db) {
var collection = db.collection('nom-collection');
collection.insert({"Champ 1":"Valeur 1","Champ 2":"Valeur 2"}, function(err, result) {
...
});
db.close();
});
Connexion Ecriture Fermeture

Quatrième réalisation: ajouter une base de données à la CVthèque
Configurer une
Database as a
Service
Intégrer
MongoDB dans
une application

Aujourd’hui
SOA API
Watson

La SOA rend les structures évolutives et adaptables
Architecture orientée service
Centrer le fonctionnement et l’offre de l’entreprise autour de l’orientation service
Orientation service
Penser l’entreprise comme étant et fournissant un ensemble de services
Service
Une tâche répétable

Implémenter la SOA en créant des APIs

Simplifier l’accès à des ressources complexes: le cas Watson
text_to_speech.synthesize()

Des questions?
@rwillmann
Romain Willmann
romain.willmann@fr.ibm.com

Introduction au développement Web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Introduction au développement Web

Similaire à Introduction au développement Web (20)

Dernier

Dernier (12)

Introduction au développement Web