Introduction au développement Web
Introduction au
développement Web
IBM Academic | Romain Willmann
Introduction au développement Web
Au programme
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au...
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud...
Introduction au développement Web
Aujourd’hui
Internet Web
HTTP HTML
Introduction au développement Web
Internet est un réseau de réseaux
Créé durant
les années 60
Compte
aujourd’hui
50K résea...
Introduction au développement Web
Un réseau
N >= 2
Un protocole
De
l’information
Le Web
Un serveur, au
moins un client
Hyp...
Introduction au développement Web
Ecrire des pages Web avec l’HyperText Markup Langage
Un langage de
programmation
Structu...
Introduction au développement Web
Six premières balises HTML pour bien débuter
Un éditeur en ligne pour s’entraîner
Rôle P...
Introduction au développement Web
Première réalisation: un CV en HTML
Utiliser nos
six balises
En découvrir
de nouvelles
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud...
Introduction au développement Web
Aujourd’hui
Architecture
client-serveur
Requête &
réponse HTTP
Node.js Javascript
Introduction au développement Web
Découvrir l’architecture client-serveur
Les clients et
serveurs sont
des logiciels
Ils d...
Introduction au développement Web
Cinq bonnes raisons de choisir Node.js comme serveur
Open
Source
Moderne Puissant
Modula...
Introduction au développement Web
Echanger des données en HTTP: requêtes et réponses
Requête HTTP
Réponse, page
HTML
Introduction au développement Web
Définition
 Objets qui portent un nom
et qui contiennent des
données
 Créées par nous
...
Introduction au développement Web
Définition
 Ensemble d'instructions
effectuant une tâche
 Créées par nous
(« déclarées...
Introduction au développement Web
Gérer des requêtes avec Node.js
var express = require('express');
var app = express();
a...
Introduction au développement Web
Seconde réalisation: une CVthèque avec Node.js
Comprendre la
gestion des
requêtes
Gérer ...
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud...
Introduction au développement Web
Aujourd’hui
Cloud PaaS
Bluemix
Cloud
Foundry
Introduction au développement Web
Pâte à pizza Pâte à pizza Pâte à pizza Pâte à pizza
Tomates Tomates Tomates Tomates
From...
Introduction au développement Web
Réseau Réseau Réseau Réseau
Stockage Stockage Stockage Stockage
Serveur Serveur Serveur ...
Introduction au développement Web
Quelques caractéristiques du Cloud Computing
ElasticitéLibre-service
Ubiquité
Haute
disp...
Introduction au développement Web
Bluemix est la PaaS d’IBM
100+ services
intégrables
instantanément
Déploiement
d’applica...
Introduction au développement Web
Déployer une application en 60 secondes avec Cloud Foundry
Rôle
cf api https://api.ng.bl...
Introduction au développement Web
Troisième réalisation: déployer notre application dans le Cloud
Découvrir
Cloud Foundry
...
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud...
Introduction au développement Web
Aujourd’hui
Base de
données
SQL
NoSQL MongoDB
Introduction au développement Web
Une application avec une base de données
Une base de
données est un
fichier contenant
de...
Introduction au développement Web
La première génération de base de données: SQL
Début des
années 70
Organisation
relation...
Introduction au développement Web
Le NoSQL pour une information plus complexe
Début des
années 2000
Organisation
par docum...
Introduction au développement Web
Open Source Simple
Bon couple
avec Node.js
Insert, Find,
Update,
Remove
Un document Mong...
Introduction au développement Web
Créer un document MongoDB avec Node.js
var mongodb = require('mongodb');
var url = 'mong...
Introduction au développement Web
Quatrième réalisation: ajouter une base de données à la CVthèque
Configurer une
Database...
Introduction au développement Web
Agenda
1. Découvrir le HTML
2. Programmation d’applications Web
3. Introduction au Cloud...
Introduction au développement Web
Aujourd’hui
SOA API
Watson
Introduction au développement Web
La SOA rend les structures évolutives et adaptables
Architecture orientée service
Centre...
Introduction au développement Web
Implémenter la SOA en créant des APIs
Introduction au développement Web
Simplifier l’accès à des ressources complexes: le cas Watson
text_to_speech.synthesize()
Introduction au développement Web
Des questions?
@rwillmann
Romain Willmann
romain.willmann@fr.ibm.com
Prochain SlideShare
Chargement dans…5
×

Introduction au développement Web

1 757 vues

Publié le

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.

Publié dans : Formation
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 757
Sur SlideShare
0
Issues des intégrations
0
Intégrations
835
Actions
Partages
0
Téléchargements
24
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction au développement Web

  1. 1. Introduction au développement Web Introduction au développement Web IBM Academic | Romain Willmann
  2. 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. 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
  4. 4. Introduction au développement Web Aujourd’hui Internet Web HTTP HTML
  5. 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. 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. 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. 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. 9. Introduction au développement Web Première réalisation: un CV en HTML Utiliser nos six balises En découvrir de nouvelles
  10. 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
  11. 11. Introduction au développement Web Aujourd’hui Architecture client-serveur Requête & réponse HTTP Node.js Javascript
  12. 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. 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. 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. 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. 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. 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. 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. 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
  20. 20. Introduction au développement Web Aujourd’hui Cloud PaaS Bluemix Cloud Foundry
  21. 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. 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. 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. 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. 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. 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. 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
  28. 28. Introduction au développement Web Aujourd’hui Base de données SQL NoSQL MongoDB
  29. 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. 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. 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. 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. 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. 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. 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
  36. 36. Introduction au développement Web Aujourd’hui SOA API Watson
  37. 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
  38. 38. Introduction au développement Web Implémenter la SOA en créant des APIs
  39. 39. Introduction au développement Web Simplifier l’accès à des ressources complexes: le cas Watson text_to_speech.synthesize()
  40. 40. Introduction au développement Web Des questions? @rwillmann Romain Willmann romain.willmann@fr.ibm.com

×