Modul #1 Web 3.0 mit Waves
Modul #1 Vorbereitung: Benötigte Tools und Tutorials
1.1 How to: simple Node.JS application. Localhost;
1.2 How to: simple React.JS application;
1.3 How to: Git, GitHub, and Heroku;
1.4 How to: Waves Keeper;
1.5 Die erste Herausforderung (ein Boilerplate Projekt)
In dieser Lektion werden wir lernen, wie man eine einfache Web-(html)-Anwendung mit dem NodeJS-Paket — express.js — startet.
Wir verwenden hierzu den Sublime Code Editor.
1.1 How to: einfache Node.JS-Anwendung. Localhost
Schritt 0: Erstellen Sie einen neuen Ordner — mweb3waves, öffnen Sie den sublimen Editor in diesem Ordner.
Schritt 1: Erstellen Sie eine neue HTML-Datei — index.html im Ordner mweb3waves.
<!DOCTYPE html><html><head><meta charset=”UTF-8" /><title>Mastering Web3 with Waves boilerplate</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>
Schritt 2: Installieren Sie die NodeJS Software wie auf folgender Website beschrieben.
Schritt 3: Öffnen Sie das Terminal-/Befehlszeilen-Tool und überprüfen Sie die NodeJS Version und die Version Ihres Paketverwaltungstools npm.
Schritt 4: Erstellen Sie eine package.json-Datei. Diese Datei enthält alle NodeJS-Pakete, die in unserer Anwendung verwendet werden.
{“name”: “mweb3-demo-waves”,“version”: “0.1.0”,“dependencies”: {“express”: “⁴.16.4”}}
Schritt 5: Installieren Sie das express.js-Paket! Öffnen Sie das Terminal und führen Sie “npm install” im mweb3waves-Ordner aus.
Wie Sie sehen können, enthält der neue Ordner — node_modules den Quellcode aller unserer Abhängigkeiten und Module).
Schritt 6: Wir sind jetzt bereit, unsere erste einfache “One-Page”-Anwendung, inklusive eines eigenen Servers, zu erstellen. Erstellen Sie hierzu die Datei server.js. Unser Server hat nur eine Funktion — die Datei index.html an den Browser zu senden, wenn der Benutzer die Seite der Website geöffnet hat.
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);});
Schritt 7: Lassen Sie uns nun unsere Anwendung server.js mit dem Befehl “node server.js” ausführen.
Wir können die Anwedung jetzt im Browser unter der URL http://localhost:5000/ öffnen.
1.2 Eine einfache React.JS Applikation
Unsere SinglePage Anwendung ist cool, aber gleichzeitig etwas wertlos. Lassen Sie uns hier eine Logik der Benutzerinteraktion hinzufügen!
JavaScript ist eine Sprache, die verwendet wird, um “statische HTML”-Seiten in dynamische Seiten mit verschiedenen Anwendungsfällen und interaktiven UI-Komponenten (User Interface) zu verwandeln. ReactJS ist ein sehr leistungsfähiges JavaScript Framework für den Aufbau von umfangreichen interaktiven Einzelseiten-Webanwendungen (SPA).
In der vorherigen Lektion dieses Moduls “Vorbereitung” haben wir unsere Serveranwendung aus Paketen mit dem Paketmanager “npm” und der Paketkonfigurationsdatei “package.json” zusammengestellt. Eine ähnliche Logik funktioniert auch mit client-seitigem (Browser) JavaScript-Code.
Schritt 0: Lassen Sie uns die anfängliche Struktur erstellen. Hierzu erstellen sie die folgenden Dateien: webpack.config.js,.babelrc, main.js, app.js; und die Ordner: src, components
Schritt 1: Um UI-Komponenten richtig zu erstellen, sollten wir einige neue Pakete zur “package.json” hinzufügen und “npm install” ausführen.
{“name”: “mweb3-demo-waves”,“version”: “0.1.0”,“scripts”: {“build”: “webpack”,“watch”: “webpack — watch”},“dependencies”: {“@babel/preset-env”: “⁷.1.0”,“@babel/preset-react”: “⁷.0.0”,“babel”: “⁶.23.0”,“babel-core”: “⁶.26.3”,“react”: “¹⁶.5.2”,“react-dom”: “¹⁶.5.2”,“express”: “⁴.16.4”},“devDependencies”: {“@babel/core”: “⁷.1.2”,“@babel/runtime-corejs2": “⁷.0.0”,“babel-loader”: “⁸.0.4”,“babel-preset-es2015”: “⁶.24.1”,“cross-env”: “⁵.2.0”,“webpack”: “⁴.17.2”,“webpack-cli”: “³.1.0”}}
Schritt 2: Lassen Sie uns eine UI-Komponente und eine die Logik zur Zusammenstellung der Komponenten erstellen.
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”]}
Schritt 3: Nun fügen wir unserer Anwendung etwas Logik hinzu.
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’;Schritt 4: Lassen Sie unsdie JavaScript-Module mit dem Befehl — “npm run build” — erstellen.
Wir sehen einen neuen automatisch generierten Ordner “dist” und eine neue Datei “build.js” — das Ergebnis der Code-Assembly.
Schritt 5: Nun sollten wir die assemblierte build.js-Logik in die HTML-Hauptseite integrieren.
Schritt 6: Starten Sie den Server und öffnen Sie http://localhost:5000/, klicken Sie auf die Schaltfläche.
Viel Spaß!
Unsere erste ReactJS+NodeJS Webanwendung ist fertig!
1.3 Wie man: Git, GitHub und Heroku.
In dieser Lektion üben wir den Umgang mit dem “must have”-Tool für Entwickler — Git.
Git ist ein verteiltes Versionskontrollsystem zur Verfolgung von Änderungen im Quellcode während der Softwareentwicklung. Es ist für die Koordination der Arbeit zwischen Programmierern konzipiert, aber es kann verwendet werden, um Änderungen in beliebigen Dateien zu verfolgen.
Lassen Sie uns ein Repository für unsere Boilerplate Web-App erstellen! Wir werden GitHub nutzen — den beliebtesten Online-Service für Git-Repositories.
Schritt 0: Git installieren und Git-Version überprüfen
Schritt 1: Erstellen eines Repos auf GitHub
Schritt 2: Ordner umbenennen und dieses Repo klonen
mv mweb3waves/ mweb3waves_/git clone https://github.com/AlekseiPupyshev/mweb3waves.git
und verschieben Sie Projektdateien/Ordner in das Root Verzeichnis des Repos.
mv mweb3waves_/dist/ mweb3waves/dist/mv mweb3waves_/node_modules/ mweb3waves/node_modules/mv mweb3waves_/src/ mweb3waves/src/mv mweb3waves_/index.html mweb3waves/index.htmlmv mweb3waves_/package.json mweb3waves/package.jsonmv mweb3waves_/package-lock.json mweb3waves/package-lock.jsonmv mweb3waves_/server.js mweb3waves/server.jsmv mweb3waves_/webpack.config.js mweb3waves/webpack.config.jsmv mweb3waves_/.babelrc mweb3waves/.babelrc
(! — Dieser Ansatz ist nicht die beste Vorgehensweise bei der Verwendung von git mit entferntem Ursprung. Das Beherrschen von Git und anderen Tools ist etwas außerhalb des Umfangs unseres Mastering Web3-Online-Kurses. Es steht Ihnen jedoch frei, Best Practices für Ihre persönlichen Projekte oder Code-Herausforderungen zu verwenden.)
Schritt 3: Erstellen Sie eine.gitignore Datei im Stammverzeichnis des Repo-Ordners.
package-lock.jsonnode_modules/
Schritt 4: Hinzufügen von Dateien zum git diff tracker und Push-Commit auf den Remote-GitHub-Server.
git add -Agit commit -m ‘add project files’git push origin master
Das GitHub Repo ist fertig!
How-To Heroku
Localhost ist nett, aber um Ihre Webanwendungen mit neuen Benutzern oder Freunden teilen zu können, müssen wir sie irgendwo in der Cloud bereitstellen.
Heroku — ist eine containerbasierte Cloud Platform-as-a-Service (PaaS). Entwickler nutzen Heroku, um moderne Anwendungen bereitzustellen, zu verwalten und zu skalieren. Es ist kostenlos für bis zu 5 einfachen Projekte. Lassen Sie es uns benutzen!
Schritt 1: Registrieren Sie sich und öffnen Sie das Dashboard, um ein neues Projekt zu erstellen. Wählen Sie “Aus GitHub importieren”.
Schritt 2: Klicken Sie auf Deployment aus dem Master-Zweig und hier auf “Ansicht”.
Fertig!
1.4 How-To: Waves Keeper
In der letzten Lektion dieses Vorbereitungsmoduls lernen wir wie man mit Waves Keeper umgeht. Waves Keeper ist eine Browser-Erweiterung, die es Benutzern ermöglicht, ihre Konten (Schlüssel) zu verwalten und sicher und nahtlos mit Waves-fähigen Webservices und dApps zu interagieren.
Schritt 0: Installieren Sie Waves Keeper und erstellen oder importieren Sie ein Konto.
Folgen Sie der Anleitung hier.
Schritt 1: Fügen Sie der Datei app.js die folgenden Code-Änderungen hinzu. Wir rufen Waves Keeper zur Authentifizierung auf, wenn der Benutzer die auth-Taste drückt.
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);}
Erstellen Sie dann den Javascript-Code auf der Clientseite neu:
npm run buildStarten sie unseren Server neu:
node server.jsUnd öffnen Sie nun die neue Version unserer App auf http://localhost:5000/. Öffnen Sie dann “Entwicklungswerkzeuge: Console” und Sie können das zurückgegebene Objekt von Waves Keeper sehen.
Schritt 2: Fügen Sie Änderungen zum Git-Tracker hinzu, übertragen Sie Änderungen und verschieben Sie sie auf das Remote-GitHub-Repo. Öffnen Sie Heroku und klicken Sie erneut auf “Deploy” aus dem Master-Zweig und öffnen Sie erneut die Webanwendung.
git add -Agit commit -m ‘Waves Keeper Auth integrated’git push origin master
Schritt 3: Fügen Sie die Heroku-Domäne zu den vertrauenswürdigen Ressourcen in den Datenschutzeinstellungen des Waves Keepers hinzu, um Ablehnungsfehler zu verhindern.
Fertig!
Herzlichen Glückwunsch!
Dies ist Ihre erste Online-Herausforderung auf diesem Kurs:
“Wie in den bisherigen Lektionen erstellen Sie eine “boilerplate” Webanwendung, schieben Sie sie auf Github, stellen Sie sie auf Heroku bereit und teilen Sie Links zu Github Repo und Heroku.
Senden Sie die Ausgaben der Browserkonsole.
Viel Glück!”
