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







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 ✘

https://ibm.biz/html-online


Première réalisation: un CV en HTML

Utiliser nos six balises

En découvrir de nouvelles


Agenda







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!

https://ibm.biz/node-officiel


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


Agenda







Aujourd’hui

Cloud PaaS

BluemixCloud

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

http://ibm.biz/sitebluemix


Déployer une application en 60 secondes avec Cloud Foundry

Rôle

cf api https://api.ng.bluemix.netConnecte Cloud Foundry sur

Bluemix

cf loginLance l’authentification pour

accéder à votre espace

cf pushLit le manifest de votre

application et ordonne son déploiement

Découvrir le projet Cloud Foundry

https://ibm.biz/cf-windows


Troisième réalisation: déployer notre application dans le Cloud

Découvrir Cloud Foundry

et Bluemix

Préparer une application

pour le Cloud


Agenda







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

https://console.ng.bluemix.net/catalog/


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


Agenda







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

https://ibm.biz/BdXU8Q

https://ibm.biz/BdXU8T

https://ibm.biz/BdXU8w

https://ibm.biz/BdXU86

https://www.twilio.com/docs/api/rest


Simplifier l’accès à des ressources complexes: le cas Watson

text_to_speech.synthesize()

https://ibm.biz/BdXUgR


Des questions?

@rwillmann

Romain Willmann

[email protected]

https://fr.linkedin.com/in/rwillmann

https://twitter.com/rwillmann

Education

Introduction au développement Web