Afficher/cacher Sommaire
NodeJS
Nom du fichier information : 2019-04-25-Node.js_Stack_Virtual_Machine(VirtualBox).md
Machine virtuelle (VirtualBox) : bitnami-node
Utilisateur : bitnami
Mot de passe : bitnami49450
Accès SSH : ssh bitnami@192.168.0.29
Accès par http://192.168.0.29 ou http://nodejs
Machine virtuelle (node.js VirtualBox)
Télécharger la machine virtuelle Node.js Stack (ova)
Vérifier le ckecksum :
MD5 → ff51f348e18893ab04f4dc1e737290f9
SHA1 → 94ca4d4c52d6bb65a77616bac9bbb69b942e40f6
SHA256 → dea3ba9fba328ca68938d925c157a4f58dca07ea3d10a40bb28a5df5d47eb269
sha1sum bitnami-node-12.0.0-0-linux-debian-9-x86_64.ova
94ca4d4c52d6bb65a77616bac9bbb69b942e40f6 bitnami-node-12.0.0-0-linux-debian-9-x86_64.ova
Ouvrir “Oracle VM VirtualBox” → Fichier → Importer un appareil virtuel…
Cliquer sur “Démarrer”
ATTENTION!!! Clavier en qwerty
Changer le mot de passe de bitnami → bitnami49450
Passer em mode su : sudo -s
Installer nano comme éditeur de texte : apt install nano
Installer le paquet pour configurer le clavier fr :
apt-get install console-data
Relever l’adresse ip : ip a → 192.168.0.29
Effacer le fichier : rm /etc/ssh/sshd_not_to_be_run pour autoriser l’accès par ssh
Activer et lancer ssh
systemctl enable ssh
systemctl start ssh
Connexion par ssh : ssh bitnami@192.168.0.29
Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
___ _ _ _
| _ |_) |_ _ _ __ _ _ __ (_)
| _ \ | _| ' \/ _` | ' \| |
|___/_|\__|_|_|\__,_|_|_|_|_|
*** Welcome to the Bitnami Node.js 12.0.0-0 ***
*** Documentation: https://docs.bitnami.com/virtual-machine/infrastructure/nodejs/ ***
*** https://docs.bitnami.com/virtual-machine/ ***
*** Bitnami Forums: https://community.bitnami.com/ ***
Last login: Thu Apr 25 11:08:14 2019
Tester Node.js avec un programme minimal
Pour commencer, ouvrez votre éditeur de texte favori (vim, Emacs, Sublime Text, Notepad++…) et rentrez le code JavaScript suivant :
console.log('Bienvenue dans Node.js !');
Enregistrez votre fichier sous l’extension .js. Par exemple test.js.
Ensuite, ouvrez une console dans le dossier où se trouve votre fichier test.js et entrez la commande node test.js. Vous devriez avoir le résultat suivant dans la console :
$ node test.js
Bienvenue dans Node.js !
Application météo simple avec Node.js
Appeler l’ API OpenWeatherMap.org et à afficher le résultat sur la console. Voici ce dont vous aurez besoin:
- Compte OpenWeatherMap.org
- Node.js: Visitez le site web officiel de Node.js pour télécharger et installer Node.
Étape 1: OpenWeatherMap
OpenWeatherMap utilise les API (11 API différentes toutes liées à la météo) auxquelles vous pouvez accéder.
Pour ce projet, nous utiliserons l’API gratuite «Météo actuelle». Rendez-vous sur ce lien et créez un compte. Tout ce dont vous avez besoin est une adresse email et un mot de passe.
Une fois connecté, sélectionnez l’onglet API keys (Clés API) . À partir de là, vous pouvez créer une clé sur le côté droit de la page. Entrez un nom (tout fonctionne) et sélectionnez générer. Votre clé API apparaîtra à gauche. Copiez cette clé pour plus tard.
Étape 2: Configuration du projet
1-Créez un répertoire vide nommé “node-weather” et exécutez:
mkdir node-weather
cd node-weather
npm init
2-Remplissez les informations requises pour initialiser le projet.
Le fichier package.json après l’initialisation du projet.
{
"name": "nodejs-weather-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \\\" Erreur: aucun test spécifié \\ \"&& exit 1"
},
"author": "yann",
"license": "ISC"
}
3-Créez un fichier nommé index.js
touch index.js
ce fichier hébergera le code de notre application.
Maintenant que nous avons toutes les pièces, on commence à construire!
Faire l’appel API
Pour faire notre appel API, nous utiliserons un module npm populaire appelé request . request a des millions de téléchargements et est un module qui simplifie le code nécessaire pour effectuer une requête http dans un nœud.
Demande d’installation en exécutant:
npm install request --save
Comme je l’ai dit, la demande est assez facile à utiliser. Nous avons juste besoin de transmettre notre URL cible, et request renvoie une fonction de rappel. Notre code de démarrage ressemble à ceci:
const request = require('request');
request(url, function (err, response, body) {
if(err){
console.log('error:', error);
} else {
console.log('body:', body);
}
});
Permet de décomposer ce code:
- Nous avons besoin du paquet de demande
- Nous passons dans une URL et request renvoie une fonction de rappel avec trois arguments: err , response et body
- Nous vérifions s’il y a une erreur dans notre demande. S’il y en a une, nous enregistrons l’erreur et nous avons terminé.
- S’il n’y a pas d’erreur, nous enregistrons tout le contenu du corps de la réponse.
Alors quelle est l’URL à laquelle nous faisons la demande?
En lisant la documentation OpenWeatherMap, nous sommes en mesure de déterminer l’URL à laquelle nous devons adresser nos demandes: http://api.openweathermap.org/data/2.5/weather
L’URL contient également deux paramètres de requête obligatoires.
Les paramètres de requête sont des paires clé/valeur qui nous permettent de transmettre des données à une URL
Dans ce cas, nous devons inclure la ville que nous recherchons et notre clé API.
Voici à quoi ressemblera le code:
let apiKey = '****************************';
let city = 'portland';
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
Nous avons fait 3 choses ci-dessus:
- Créez une variable nommée apiKey et lui assignez la clé API OpenWeatherMap
- Créez une variable city et lui attribuez une valeur chaîne de la ville à tester
- Créez une variable nommée url et attribuez-lui l’url OpenWeatherMap avec nos deux paramètres de requête requis. Notez que les paramètres de requête commencent par un ? point d’interrogation. Ils sont ensuite indiqués avec des paires clé / valeur séparées par un signe = égal. Différentes paires clé / valeur sont séparées par un & esperluette.
Voici le code:
nano index.js
let request = require('request');
let apiKey = '*****************************';
let city = 'portland';
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
request(url, function (err, response, body) {
if(err){
console.log('error:', error);
} else {
console.log('body:', body);
}
});
Nous pouvons maintenant exécuter notre code dans la console en tapant:
noeud index.js
est renvoyé le texte suivant:
body: {"coord":{"lon":-122.67,"lat":45.52},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":278.95,"pressure":1021,"humidity":66,"temp_min":275.93,"temp_max":282.15},"visibility":16093,"wind":{"speed":2.1,"deg":340},"clouds":{"all":1},"dt":1556196456,"sys":{"type":1,"id":5321,"message":0.0096,"country":"US","sunrise":1556197688,"sunset":1556248130},"id":5746545,"name":"Portland","cod":200}
Ça marche! Comme vous pouvez le constater, nous avons envoyé avec succès une demande à l’API d’OpenWeatherMap et récupéré les données suivantes. Il y a beaucoup de bonnes informations éparpillées: je vois la température, l’humidité et la vitesse du vent pour n’en nommer que quelques-unes.
IMPORTANT: Dans les prochains tutoriels, je vous montrerai comment masquer votre clé API à l’aide de variables d’environnement . Pour l’instant, sachez qu’il n’est pas standard que votre clé API soit exposée de la sorte.
Améliorer la réponse
La première chose à faire est de convertir le texte renvoyé (appelé JSON) en un objet JavaScript. (JavaScript Object Notation) est un moyen de stocker des informations de manière organisée et facile d’accès - cela ressemble à un objet JavaScript avec des guillemets supplémentaires.
Nous pouvons effectuer cette conversion avec une seule ligne de code:
let weather = JSON.parse(body)
Maintenant que nous avons un objet JavaScript, nous pouvons accéder aux données de cet objet avec une notation par points ou par crochets. Ci-dessous, nous construisons une chaîne de message en accédant aux données de notre objet météo:
let message = `It's ${weather.main.temp} degrees in
${weather.name}!`;
console.log(message);
Si nous devions exécuter notre application à ce stade, nous aurions:
node index.js
→ It’s 300.4 degrees in Portland
OpenWeatherMap modifie sa température par défaut à Kelvin. Nous devons donc ajouter un autre paramètre de requête.
- Celsius, vous ajouterez: units=metric
- Fahrenheit, vous utiliserez units=imperial .
Maintenant si nous exécutons:
nodeindex.js
→ It’s 23.39 degrees in Portland!
Voici le code à ce stade:
let request = require('request');
let apiKey = '***********************************';
let city = 'portland';
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`
request(url, function (err, response, body) {
if(err){
console.log('error:', error);
} else {
let weather = JSON.parse(body)
let message = `It's ${weather.main.temp} degrees in ${weather.name}!`;
console.log(message);
}
});
Ajouter de l’interactivité
Nous avons uniquement accès au climat à Portland, Oregon.Pour ajouter une interactivité nous utiliserons des “yargs” . Yargs est un outil d’interface interactif qui permet de définir des variables à partir de la ligne de commande.
Installez yargs avec:
npm install yargs --save
Yargs fonctionne en exposant toutes les variables que nous utilisons dans la console sur l’objet argv . Nous configurons et accédons à cet objet comme suit:
const argv = require('yargs').argv;
Nous utiliserons le drapeau “c” comme ville:
Si notre variable city est égale à argv.c OU si aucune variable n’est entrée, nous aurons une valeur de ville par défaut de Portland
let city = argv.c || 'portland';
Maintenant, pour exécuter l’application, au lieu de simplement dire:
node index.js
Nous devons passer une variable nommée “c” comme ceci:
node index.js -c Boston
→ It’s 30.39 degrees in Boston!
Nous utilisons un drapeau pour indiquer que nous passons dans la variable. Puisque nous configurons notre variable comme étant la lettre “c” nous passons dans notre variable avec “-c” . Après un espace, nous pouvons utiliser n’importe quel nom de ville!
node index.js -c Anchorage
Voici le code à ce stade:
const request = require('request');
const argv = require('yargs').argv;
let apiKey = '*****************************';
let city = argv.c || 'portland';
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`
request(url, function (err, response, body) {
if(err){
console.log('error:', error);
} else {
let weather = JSON.parse(body)
let message = `It's ${weather.main.temp} degrees in ${weather.name}!`;
console.log(message);
}
});
Site Web météo (Node.js + Express + OpenWeather)
Nécessité d’un proxy nginx
Pour un accès web extérieur ,il faut utiliser un proxy
Installer nginx et l’outil tree
sudo apt install nginx tree
Configurer le proxy
sudo nano /etc/nginx/sites-enabled/default
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
location / {
proxy_pass http://localhost:3000;
}
}
Vérifier et relancer nginx
sudo nginx -t
sudo systemctl restart nginx
Accès par http://192.168.0.29
Si vous ajoutez à /etc/hosts du PC1 la ligne suivante
192.168.0.29 nodejs
L’accès se fera via http://nodejs
Configuration du projet
Le code de ce projet se trouve dans le Repo GitHub
- Créez un répertoire vide nommé weather-app ,
mkdir ~/weather-app - Ouvrez votre console, accédez à notre nouveau répertoire et exécutez
npm init. - Remplissez les informations requises pour initialiser le projet.
- Dans notre répertoire weather-app , créez un fichier nommé server.js :
touch server.js
Ce fichier hébergera le code de notre application.
le fichier /home/bitnami/weather-app/package.json:
{
"name": "web-weather-app",
"version": "1.0.0",
"description": "application web météo",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "yann",
"license": "ISC"
}
Création du serveur (Express JS)
Express est un framework Web minimaliste pour Node.js. Express facilite grandement la création et l’exécution d’un serveur Web avec Node.
Pour utiliser express, installez-le dans la console:
npm install --save express
Une fois installé, nous allons copier l’application de démarrage boilerplate Express à partir de la documentation Express :
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World!')
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
Vous trouverez ci-dessus un exemple d’application la plus simple que nous puissions créer avec Express. Nous avons d’abord besoin du paquet express qui vient d’être installé. Ensuite, nous créons une instance nommée app en appelant Express.
app.get(‘/’… signifie que nous nous concentrons spécifiquement sur l’URL racine ( / ). Si nous visitons l’URL racine, Express répondra par «Hello World!».
app.listen(… indique que nous créons un serveur qui écoute sur le port 3000 pour les connexions.
Nous pouvons tester notre serveur en exécutant:
node server.js
Example app listening on port 3000!
Maintenant, ouvrez votre navigateur et visitez: localhost:3000 et vous devriez voir Hello World!
Si proxy , http://192.168.0.29 ou http://nodejs
Impressionnant! Vous venez de créer un serveur avec Node.js et Express! Configuration de la vue d’index
Au lieu de répondre avec du texte lorsque quelqu’un visite notre route racine, nous aimerions répondre avec un fichier HTML. Pour cela, nous utiliserons EJS ( Embedded Javascript [JavaScript incorporé] ). EJS est un langage de template.
Pour utiliser EJS dans Express, nous devons configurer notre template engine (moteur de modèle):
Un template engine (moteur de modèle) vous permet d’utiliser des fichiers de modèle statiques dans votre application. Au moment de l’exécution, le moteur de modèle remplace les variables d’un fichier de modèle par les valeurs réelles et transforme le modèle en un fichier HTML envoyé au client. Cette approche facilite la conception d’une page HTML.
EJS nous permet d’interagir avec des variables et de créer dynamiquement notre code HTML à partir de ces variables!
Tout d’abord, nous allons installer ejs dans le terminal:
npm install ejs --save
Nous pouvons ensuite configurer notre moteur de template avec cette ligne de code (juste en dessous de nos instructions require) dans notre fichier server.js :
app.set('view engine', 'ejs')
EJS est accessible par défaut dans le répertoire views . Créez donc un nouveau dossier nommé views dans votre répertoire. Dans ce dossier de views , ajoutez un fichier nommé index.ejs . Considérez notre fichier index.ejs comme un fichier HTML pour le moment.
notre structure de fichiers jusqu’à présent:
weather-app/
├── package.json
├── server.js
└── views
└── index.ejs
Le fichier index.ejs devrait être assez simple ,c’est juste un formulaire avec une entrée pour une ville et un bouton d’envoi:
nano views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<fieldset>
<form action="/" method="post">
<input name="city" type="text" class="ghost-input" placeholder="Enter a City" required>
<input type="submit" class="ghost-button" value="Get Weather">
</form>
</fieldset>
</div>
</body>
</html>
Une fois que le code ci-dessus est copié dans votre fichier index.ejs , vous avez presque terminé!
La dernière chose à faire est de remplacer notre code app.get dans le fichier server.js :
app.get('/', function (req, res) {
// OLD CODE
res.send('Hello World!')
})
Ci-dessus l’ancien code où nous envoyons le texte “Hello World!” au client. Au lieu de cela, nous voulons envoyer notre fichier index.ejs :
app.get('/', function (req, res) {
res.render('index');
})
Au lieu d’utiliser res.send , nous utilisons res.render lorsque nous travaillons avec un langage de template.
res.render rendra notre vue, puis enverra le code HTML équivalent au client.
Le fichier server.js
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.get('/', function (req, res) {
res.render('index');
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
tester à nouveau en exécutant:
node server.js
// Example app listening on port 3000!
Ouvrez maintenant votre navigateur et visitez: localhost:3000 (http://nodejs) et vous devriez voir notre fichier index.ejs être affiché!
Ajouter fichier CSS
Le vôtre sera un peu moins “joli” que le mien. C’est parce que je me sers d’un fichier CSS pour styliser mon HTML. Voici comment nous faisons fonctionner notre CSS:
Vous devrez ajouter un nouveau dossier à notre projet appelé public . Dans ce dossier, créez un dossier css , puis un fichier nommé style.css .
mkdir -p ~/weather-app/public/css
touch ~/weather-app/public/css/style.css
nouvelle structure de fichier:
weather-app/
├── package.json
├── public
│ └── css
├── server.js
└── views
└── index.ejs
Express n’autorisera pas l’accès à ce fichier par défaut. Nous devons donc l’attribuer avec la ligne de code suivante:
app.use(express.static('public'));
Ce code nous permet d’accéder à tous les fichiers statiques du dossier “public”.
Le fichier CSS ~/weather-app/public/css/style.css
/*
Styles from this codepen:
https://codepen.io/official_naveen/pen/rgknI
*/
body {
width: 800px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 600px;
margin: 0 auto;
}
fieldset {
display: block;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-before: 0em;
-webkit-padding-start: 0em;
-webkit-padding-end: 0em;
-webkit-padding-after: 0em;
border: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
min-width: -webkit-min-content;
padding: 30px;
}
.ghost-input, p {
display: block;
font-weight:300;
width: 100%;
font-size: 25px;
border:0px;
outline: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #4b545f;
background: #fff;
font-family: Open Sans,Verdana;
padding: 10px 15px;
margin: 30px 0px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.ghost-input:focus {
border-bottom:1px solid #ddd;
}
.ghost-button {
background-color: transparent;
border:2px solid #ddd;
padding:10px 30px;
width: 100%;
min-width: 350px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.ghost-button:hover {
border:2px solid #515151;
}
p {
color: #E64A19;
}
Mise en place de notre route POST
Le fichier ~/weather-app/server.js :
const express = require('express')
const app = express()
app.use(express.static('public'));
app.set('view engine', 'ejs')
app.get('/', function (req, res) {
res.render('index');
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
Nous avons un itinéraire “get” sur la racine app.get(‘/’… , puis nous créons notre serveurapp.listen(3000….
Cependant, pour que notre application fonctionne, nous avons également besoin d’un itinéraire “post”.
Dans le fichier index.ejs , vous pouvez voir que notre formulaire envoie une demande de publication (post request) à la racine ( / ):
<form action="/" method="post">
Maintenant que nous savons où notre formulaire est affiché, nous pouvons configurer l’itinéraire! Une demande de publication (post request) ressemble à une demande d’obtention (get request), avec une modification mineure:
app.post('/', function (req, res) {
res.render('index');
})
Mais au lieu de simplement répondre avec le même modèle html, il faut accéder également au nom de la ville saisie par l’utilisateur. Pour cela, nous devons utiliser un Express Middleware .
Express est un cadre minimaliste. Cependant, nous pouvons utiliser un Middleware (fonctions qui ont accès aux corps de req et de res ) afin de réaliser des tâches plus avancées.
Nous allons utiliser le middleware body-parser . body-parser nous permet d’utiliser les paires clé-valeur stockées sur l’objet req-body . Dans ce cas, nous pourrons accéder au nom de la ville saisie par l’utilisateur du côté client.
Pour utiliser body-parser , il faut d’abord l’installer:
npm install body-parser --save
Une fois installé, pour utiliser notre middleware ajoutez les 2 lignes de code au fichier server.js
const bodyParser = require('body-parser');
// ...
// ...
app.use(bodyParser.urlencoded({ extended: true }));
Sachez simplement qu’en utilisant body-parser nous pouvons utiliser l’objet req.body
Enfin, nous pouvons maintenant mettre à jour notre demande de publication pour consigner la valeur de city (ville) dans la console.
app.post('/', function (req, res) {
res.render('index');
console.log(req.body.city);
})
test !
node server.js
Example app listening on port 3000!
Ouvrez maintenant votre navigateur et visitez: localhost:3000 , tapez un nom de ville dans le champ et appuyez sur Entrée!
Si vous revenez à votre invite de commande, vous devriez voir le nom de la ville affiché dans l’invite!
node server.js
Example app listening on port 3000!
paris
Vous avez maintenant passé avec succès les données du client au serveur!
Le fichier server.js :
const express = require('express');
const bodyParser = require('body-parser');
const app = express()
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs')
app.get('/', function (req, res) {
res.render('index');
})
app.post('/', function (req, res) {
console.log(req.body.city);
res.render('index');
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
Finition app.post
Pour terminer le projet,on utilise le code de Application météo simple avec Node.js
Ce que nous allions faire, c’est faire une demande à l’API OpenWeatherMap dans notre demande app.post
Voici à quoi ressemble le code:
const request = require('request');
const apiKey = '*****************';
//...
//...
app.post('/', function (req, res) {
let city = req.body.city;
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${apiKey}`
request(url, function (err, response, body) {
if(err){
res.render('index', {weather: null, error: 'Error, please try again'});
} else {
let weather = JSON.parse(body)
if(weather.main == undefined){
res.render('index', {weather: null, error: 'Error, please try again'});
} else {
let weatherText = `It's ${weather.main.temp} degrees in ${weather.name}!`;
res.render('index', {weather: weatherText, error: null});
}
}
});
})
1. Configurer notre URL:
La première chose que nous faisons lorsque nous recevons le post request est de “req.body”” city
Ensuite, nous créons une chaîne d’ url que nous utiliserons pour accéder à l’API OpenWeatherMap
app.post('/', function (req, res) {
let city = req.body.city;
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=imperial&appid=${apiKey}`
2. Faites notre appel API:
Maintenant que nous avons notre URL, nous pouvons faire notre appel API. Lorsque nous recevons notre rappel, la première chose à faire est de rechercher une erreur. Si nous avons une erreur, nous allons rendre notre page d’index. Mais remarquez que j’ai aussi ajouté dans un deuxième argument. res.render a un second argument optionnel - un objet où nous pouvons spécifier les propriétés à gérer par notre vue ( index.ejs ).
Dans ce cas, j’ai ajouté une chaîne d’erreur:
request(url, function (err, response, body) {
if(err){
res.render('index', {weather: null, error: 'Error, please try again'});
3. Afficher le temps météo:
Maintenant que nous savons que nous n’avons aucune erreur d’API, nous pouvons analyser notre code JSON dans un objet JavaScript utilisable.
La première chose à faire est de vérifier si weather.main == undefined
La seule raison pour laquelle ce ne serait pas défini, c’est si notre utilisateur saisit une chaîne qui n’est pas une ville (‘3’, ‘afefaefefe’, etc.).
Dans ce cas, nous allons rendre la vue d’index et nous renverrons également une erreur.
Si weather.main != undefined , nous pouvons enfin renvoyer la météo au client!
Nous allons créer une chaîne qui clarifie la météo et la renvoyer avec la vue index.
} else {
let weather = JSON.parse(body)
if(weather.main == undefined){
res.render('index', {weather: null, error: 'Error, please try again'});
} else {
let weatherText = `It's ${weather.main.temp} degrees in ${weather.name}!`;
res.render('index', {weather: weatherText, error: null});
}
}
Utiliser EJS
Il ne reste plus qu’une chose à faire à ce stade…
Utiliser toutes les variables que nous avons renvoyées avec notre appel res.render
Ces variables ne sont pas disponibles sur le client, c’est ici que nous finissons par utiliser EJS.
Il existe trois scénarios possibles dans notre code:
{weather: null, error: null}{weather: null, error: 'Error, please try again'}{weather: weatherText, error: null}
Nous devons apporter deux modifications simples à notre index.ejs pour gérer ces trois scénarios. Voici le code:
<% if(weather !== null){ %>
<p><%= weather %></p>
<% } %>
<% if(error !== null){ %>
<p><%= error %></p>
<% } %>
Il est utile de se rappeler que EJS signifie Embedded JavaScript.
Dans cet esprit, EJS a des crochets d’ouverture et de fermeture:
<% CODE HERE %>Tout ce qui est entre les crochets est exécuté.
Si le crochet d’ouverture inclut également un signe égal:
<%= CODE HERE ADDS HTML %>, ce code ajoutera du code HTML au résultat.
Si vous regardez notre EJS que nous avons ajouté, nous testons pour voir si nos variables weather ou error sont nulles. Si elles sont toutes deux nulles , rien ne se passe.
Cependant, si l’une n’est pas nulle (c’est-à-dire qu’elle a une valeur), nous ajouterons un paragraphe à l’écran avec la valeur de la variable respective.
index.ejs
Voici à quoi devrait ressembler votre index.ejs :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<fieldset>
<form action="/" method="post">
<input name="city" type="text" class="ghost-input" placeholder="Enter a City" required>
<input type="submit" class="ghost-button" value="Get Weather">
</form>
<% if(weather !== null){ %>
<p><%= weather %></p>
<% } %>
<% if(error !== null){ %>
<p><%= error %></p>
<% } %>
</fieldset>
</div>
</body>
</html>
server.js
Voici à quoi devrait ressembler votre server.js :
const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const app = express()
const apiKey = '*****************';
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs')
app.get('/', function (req, res) {
res.render('index', {weather: null, error: null});
})
app.post('/', function (req, res) {
let city = req.body.city;
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`
request(url, function (err, response, body) {
if(err){
res.render('index', {weather: null, error: 'Error, please try again'});
} else {
let weather = JSON.parse(body)
if(weather.main == undefined){
res.render('index', {weather: null, error: 'Error, please try again'});
} else {
let weatherText = `It's ${weather.main.temp} degrees in ${weather.name}!`;
res.render('index', {weather: weatherText, error: null});
}
}
});
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
Exécutez votre code
Exécution
bitnami@debian:~$ cd ~/weather-app/
bitnami@debian:~/weather-app$ node server.js
Example app listening on port 3000!
Ouvrez maintenant votre navigateur et visitez: localhost:3000 , tapez un nom de ville dans le champ et appuyez sur Entrée! Vous devriez voir la météo apparaître sur votre écran!
Vous venez de créer un site Web permettant de passer des appels API et de répondre au client en temps réel!