Maîtriser le Web 3.0 avec Waves
Module #1 Préparation : Outils requis et Tutoriaux
1.1 Pratique : simple application Node.JS en Localhost
1.2 Pratique : simple application en React.JS
1.3 Pratique : Git, GitHub et Heroku
1.4 Practice : Waves Keeper
1.5 Le premier challenge (un template de projet)
Dans cette leçon nous allons apprendre comment démarrer une application web (html) simple utilisant NodeJS et express.js.
Nous utiliserons l’éditeur de code Sublime.
1.1 Pratique : simple application Node.JS en Localhost
Etape 0: créez un nouveau dossier — mweb3waves, ouvrez ce dossier dans l’éditeur de texte sublime.
Etape 1: créez un nouveau fichier HTML — index.html dans le dossier mweb3waves.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mastering Web3 with Waves boilerplte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1 class="display-3 text-center text-info">Hello Waves!</h1>
</body>
</html>Etape 2: intaller l’application node js scomme expliqué sur ce lien site web de Nodejs
Etape 3: ouvrez votre terminal de commande et vérifiez la version installée de node.js et de son application de gestion des paquets (packages) npm
Etape 4: créez un fichier package.json. Ce fichier contient tous les paquets nodejs qui seront utilisés dans notre application.
{
"name": "mweb3-demo-waves",
"version": "0.1.0",
"dependencies": {
"express": "^4.16.4"
}
}Etape 5: Installons maintenant le paquet express.js ! Ouvrez le terminal et entrez “npm install” depuis le dossier mweb3waves
Comme vous pouvez le voir, le nouveau dossier — node_modules contient le code source de toutes nos dépendances (packages and modules).
Etape 6: Nous sommes donc maintenant prêt à créer notre première application simple “one page”. Create server.js file. Notre server n’a pour le moment qu’une seule fonctionnalité, ouvrir le fichier index.html dans le navigateur quand l’utilisateur appel la page web.
const express = require('express');const app = express();app.get('/', (req, res) => {
res.sendFile('index.html', { root : __dirname});
});let port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(__dirname);
console.log("Listening Port " + port);
});
Etape 7: Lançons notre application server node.js avec la commande “node server.js”
Nous pouvons maintenant ouvrir le navigateur avec l’adresse http://localhost:5000/
La première application node.js “page unique” (SPA ou Page Unique) et prête!
1.2 Pratique : simple application en React.JS
Notre application “single page” ou page unique est cool mais est également un peu inutile. Ajoutons quelques logiques d’interaction utilisateur.
Alors que Java Script — est un langage utilisé pour rendre des pages statiques plus dynamiques avec différents cas d’applications et des composant UI interactif (Interface Utilisateur). ReactJS est un framework javascript très puissant pour construire des applications riches interactive en page unique (SPA).
Dans la leçon précédente à ce module de “préparation” nous avons vue comment notre application server pouvait être assemblée avec des paquets (packages) en utilisant “npm”, l’application qui gères les différents paquets (package manager) ainsi que le fichier de config — “package.json”. Une logique similaire existe également pour le code Java Script côté client (navigateur)
Etape 0: Création de la structure initiale. Créez les fichiers : { webpack.config.js, .babelrc, main.js, app.js } ainsi que les dossiers: { src, components }
Etape 1: Pour développer des composants UI correctement nous devons ajouter quelques nouveaux paquets supplémentaires au fichier”package.json” et relancer la commande “npm install”…
{
"name": "mweb3-demo-waves",
"version": "0.1.0",
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
"dependencies": {
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"express": "^4.16.4"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/runtime-corejs2": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"cross-env": "^5.2.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0"
}
}Etape 2: Créons un composant UI ainsi que la logique d’assemblage des composants.
webpack.config.js
module.exports = {
entry: [
'./src/main.js'
],
output: {
filename: 'build.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}Etape 3: Ajoutons quelques logiques à l’application.
app.js
import ReactDOM from "react-dom";
import React from 'react';class App extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div className="container">
<input className="btn btn-primary" type="submit" value="Alert" onClick={() => {alert("Alert button onClick");}}/>
</div>
)
}
}const app = document.getElementById('app');
if(app){
ReactDOM.render(<App/>, app);
}
main.js
import './components/app';Etape 4: Compilons les modules Java Scripts ensemble avec la commande — “npm run build”.
Nous pouvons voir le nouveau dossier auto-généré “dist” et le nouveau fichier “build.js” — résultat du code compilé.
Etape 5: Maintenant nous devons intégrer le code compilé build.js dans la page HTML.
Etape 6: Lancez le server et ouvrez la page http://localhost:5000/, cliquez sur le bouton. Enjoy!
Notre première application web ReactJS+NodeJS est prête!
1.3 Pratique : Git, GitHub et Heroku
Dans cette leçon nous allez voir l’outil “indispensable” à tous développeur — Git.
Git est un gestionnaire de version permettant de suivre l’ensemble des changements dans le code source durant les phases de développement d’une application. Il est conçu pour coordonner le travail entre différents développeurs et peut être utilisé pour identifier le moindre changement dans l’ensemble des fichiers d’une application.
Créons tout d’abord un repository pour notre template d’application ! Nous allons utiliser GitHub — le service de repository Git le plus populaire.
Etape 0: Installer git et vérifier sa version
Etape 1: Créez un repo sur GitHub.
Etape 2: Renommez le dossier et clonez ce repo
mv mweb3waves/ mweb3waves_/git clone https://github.com/AlekseiPupyshev/mweb3waves.git
Déplacez vos fichiers et dossiers précédemment créés à la racine de ce repo.
mv mweb3waves_/dist/ mweb3waves/dist/;
mv mweb3waves_/node_modules/ mweb3waves/node_modules/;
mv mweb3waves_/src/ mweb3waves/src/;
mv mweb3waves_/index.html mweb3waves/index.html;
mv mweb3waves_/package.json mweb3waves/package.json;
mv mweb3waves_/package-lock.json mweb3waves/package-lock.json;
mv mweb3waves_/server.js mweb3waves/server.js;
mv mweb3waves_/webpack.config.js mweb3waves/webpack.config.js;
mv mweb3waves_/.babelrc mweb3waves/.babelrc;(! — Cette approche n’est pas la meilleur pratique quand à l’utilisation de Git et le remote origins. Maîtriser Git et autres outils est un peu hors sujet par rapport à cette formation du Web 3.0. Cependant n’hésitez pas à utiliser les “best practices” pour vos projets personnels ou pour les test de notre formation.)
Etape 3: Créez le fichier .gitignore à la racine du dossier/repo
package-lock.json
node_modules/Etape 4: Ajouter vos fichiers au tracker Git et envoyez (push) vos modifications (commit) sur le server distant GitHub.
git add -A;
git commit -m 'add project files';
git push origin master;Le repository GitHub est prêt!
Heroku
Localhost c’est bien, mais pour pouvoir partager votre application avec de nouveau utilisateurs ou amis ils nous faut la déployer quelque part en ligne.
Heroku — est un cloud fonctionnant en mode Platform as a Service (PaaS). Les développeurs utilisent Heroku pour déployer, gérer et étendre les applications modernes. C’est gratuit jusqu’à 5 projects simples. Utilisons le!
Etape 1: Enregistrez vous et ouvrez le dashboard (page d’accueil), créez un nouveau projet. Sélectionnez “import from GitHub”.
Etape 2: Cliquez sur “Deploy Branch” depuis la branche “Master’. Cliquez sur “View”.
Terminé!
1.4 Pratique : Waves Keeper
La dernière leçon de ce cours préparatoire est “comment intégrer Waves Keeper ?”.
Keeper est une extension navigateur qui permet au utilisateurs de gérer leurs différents comptes (clés et adresses) et d’interagir de manière entièrement sécurisée et transparente avec les applications, web-services et dApps utilisant la blockchain Waves.
Etape 0: Installer Waves Keeper et créez ou importez un compte
Suivez les instructions ici.
Etape 1: Ajoutez les changements de code ci dessous au fichier app.js. Nous allons maintenant appeler Waves Keeper pour Authentifier l’utilisateur lorsqu’il presse le bouton “Auth”.
import ReactDOM from "react-dom";
import React from 'react';class App extends React.Component {
constructor(props) {
super(props);
this.state = {}
this.authFunc = this.authFunc.bind(this);
}
authFunc() {
const authData = { data: "Auth on my site" };
if (WavesKeeper) {
WavesKeeper.auth( authData )
.then(auth => {
console.log( auth ); //displaying the result on the console
/*...processing data */
}).catch(error => {
console.error( error ); // displaying the result on the console
/*...processing errors */
})
} else {
alert("To Auth WavesKeeper should be installed.");
}
}
render() {
return (
<div className="container">
<input className="btn btn-primary" type="submit" value="Auth" onClick={this.authFunc}/>
</div>
)
}
}const app = document.getElementById('app');
if(app){
ReactDOM.render(<App/>, app);
}
Re compilez le code Java Script côté client:
npm run buildLancez le server et ouvrez l’adresse http://localhost:5000/. Ouvrez la console de développement du navigateur : vous pouvez voir la réponse de l’objet retourné par Keeper.
node server.jsEtape 2: Ajoutez les changements au tracker Git, faites vos commit et envoyez (push) les changements sur le repository distant Github. Ouvrez Heroku et cliquez sur “Deploy” depuis la branche master. Ouvrez l’application web..
git add -A;
git commit -m 'Waves Keeper Auth integrated';
git push origin master;Etape 3: Ajoutez le domaine heroku en tant que source de confiance dans les options “privacy setting” de Keeper afin d’éviter des erreur du type “rejected”
Terminé!
Felicitation!
Voici votre premier challenge en ligne pour cette formation :
“Sur la base des éléments précédents vus dans cette formation, créez un “template” d’application web, envoyez (push) les éléments sur GitHub et déployer l’ensemble sur Heroku et partagez les liens du repo Github et de l’application Heroku.
Postez le résultat affiché dans la console de votre navigateur.
Bonne chance!
