Support utilisé dans le cadre du cours destiné à initier des étudiants en école de commerce au développement d’applications Web. Ce cours leur fera découvrir les fondamentaux du développement pour le Web. Ils auront ainsi l’opportunité d’utiliser des outils modernes et des technologies de pointe pour concevoir leurs applications et les déployer dans le Cloud.
2. Introduction au développement Web
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
3. Introduction au développement 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
5. Introduction au développement Web
Internet est un réseau de réseaux
Créé durant
les années 60
Compte
aujourd’hui
50K réseaux
6. Introduction au développement Web
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
7. Introduction au développement Web
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
8. Introduction au développement Web
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 ✘
9. Introduction au développement Web
Première réalisation: un CV en HTML
Utiliser nos
six balises
En découvrir
de nouvelles
10. Introduction au développement 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
12. Introduction au développement Web
Découvrir l’architecture client-serveur
Les clients et
serveurs sont
des logiciels
Ils désignent
aussi la machine
qui l’exécute
13. Introduction au développement Web
Cinq bonnes raisons de choisir Node.js comme serveur
Open
Source
Moderne Puissant
Modulaire Accessible
Télécharger Node.js!
14. Introduction au développement Web
Echanger des données en HTTP: requêtes et réponses
Requête HTTP
Réponse, page
HTML
15. Introduction au développement Web
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
16. Introduction au développement Web
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
17. Introduction au développement Web
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
18. Introduction au développement Web
Seconde réalisation: une CVthèque avec Node.js
Comprendre la
gestion des
requêtes
Gérer la
position des
fichiers
19. Introduction au développement 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
21. Introduction au développement Web
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
22. Introduction au développement Web
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
23. Introduction au développement Web
Quelques caractéristiques du Cloud Computing
ElasticitéLibre-service
Ubiquité
Haute
disponibilité
Aucun
coût de
propriété
Evolutivité
24. Introduction au développement Web
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
25. Introduction au développement Web
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
26. Introduction au développement Web
Troisième réalisation: déployer notre application dans le Cloud
Découvrir
Cloud Foundry
et Bluemix
Préparer une
application
pour le Cloud
27. Introduction au développement 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
29. Introduction au développement Web
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
30. Introduction au développement Web
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
31. Introduction au développement Web
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
32. Introduction au développement Web
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
33. Introduction au développement Web
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
34. Introduction au développement Web
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
35. Introduction au développement 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
37. Introduction au développement Web
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