1 Προετοιμασία: Απαιτούμενα Εργαλεία και Tutorials
1.1 απλή εφαρμογή Node.JS. Localhost
Σε αυτό το μάθημα θα μάθουμε πώς να ξεκινήσετε μια απλή εφαρμογή web (html) χρησιμοποιώντας το πακέτο NodeJS — express.js.
Θα χρησιμοποιήσουμε τον επεξεργαστή Sublime code αλλά μπορείτε να χρησιμοποιήσετε όποιον προτιμάτε.
Βήμα 1: δημιουργήστε ένα νέο φάκελο — mweb3waves και ανοίξτε τον επεξεργαστή Sublime σε αυτόν το φάκελο.
Βήμα 2: δημιουργήστε ένα νέο αρχείο HTML — index.html στο φάκελο 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>Βήμα 2: Εγκαταστήστε το λογισμικό Node.js όπως περιγράφεται σε αυτόν τον ιστότοπο
Βήμα 3: ανοίξτε το τερματικό / γραμμή εντολών και ελέγξτε τις εκδόσεις που έχουν εγκατασταθεί για το node.js και το εργαλείο διαχείρισης πακέτων npm
Βήμα 4: Δημιουργήστε ένα αρχείο package.json . Αυτό το αρχείο περιέχει όλα τα πακέτα node.js που θα χρησιμοποιηθούν στην εφαρμογή μας.
{
"name": "mweb3-demo-waves",
"version": "0.1.0",
"dependencies": {
"express": "^4.16.4"
}
}Βήμα 5: Ας εγκαταστήσουμε αυτό τοπακέτο express.js ! Ανοίξτε ένα τερματικό και εκτελέστε το “npm install” στο φάκελο mweb3waves
Όπως μπορείτε να δείτε στον νέο φάκελο — το node_modules περιέχει τον πηγαίο κώδικα για όλες τις εξαρτήσεις μας ( πακέτα και ενότητες ).
Βήμα 6: Έτσι, είμαστε έτοιμοι να δημιουργήσουμε την πρώτη μας απλή εφαρμογή “one page” . Δημιουργήστε ένα αρχείο server.js . Ο διακομιστής μας έχει μόνο μία λειτουργικότητα — για να στείλει το αρχείο index.html στο πρόγραμμα περιήγησης μόλις ο χρήστης ανοίξει τη σελίδα του ιστότοπου.
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);
});
Βήμα 7: ας τρέξουμε την εφαρμογή node.js του διακομιστή μας με την εντολή “node server.js”
Μπορούμε να το ανοίξουμε σε ένα πρόγραμμα περιήγησης χρησιμοποιώντας το http: // localhost: 5000 / url.
Η πρώτη εφαρμογή node.js “single page” -application (SPA) είναι έτοιμη τώρα!
1.2 απλή εφαρμογή React.JS
1 out of 1 step passed
Η εφαρμογή μιας σελίδας είναι ωραία, αλλά, ταυτόχρονα, είναι λίγο άχρηστη. Ας προσθέσουμε κάποια λογική αλληλεπίδρασης χρήστη εδώ!
Ενώ το JavaScript — είναι μια γλώσσα που χρησιμοποιείται για να μετατρέψει τις σελίδες “static html “ σε δυναμικές σελίδες με ποικίλες περιπτώσεις εφαρμογών και διαδραστικά στοιχεία UI (User Interface). Το ReactJS είναι ένα πολύ ισχυρό πλαίσιο JavaScript για την κατασκευή πλούσιων διαδραστικών εφαρμογών ιστού σελίδας (SPA).
Στο προηγούμενο μάθημα αυτής της ενότητας “προετοιμασία” εξετάσαμε: πώς θα μπορούσε η εφαρμογή διακομιστή να συγκεντρωθεί από πακέτα χρησιμοποιώντας τον διαχειριστή πακέτων “npm” και το πακέτο config — “package.json” . Παρόμοια λογική λειτουργεί επίσης με τον κώδικα JavaScript του πελάτη (browser).
Βήμα 0: ας δημιουργήσουμε την αρχική δομή. Δημιουργία αρχείων: { webpack.config.js , .babelrc , main.js , app.js } και φακέλων: { src ,components }
Βήμα 1: Για να δημιουργήσετε σωστά τα στοιχεία UI, θα πρέπει να προστεθούν νέα πακέτα στο πακέτο “package.json” και να εγκατασταθούν με “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"
}
}Βήμα 2: Ας δημιουργήσουμε τα στοιχεία του UI και της λογικής συναρμολόγησης.
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"]
}Βήμα 3: Ας προσθέσουμε κάποια λογική στην εφαρμογή.
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';Βήμα 4: Ας φτιάξουμε τις λειτουργικές μονάδες javascript χρησιμοποιώντας την εντολή “npm run build”.
Μπορούμε να δούμε έναν νέο αυτόματο φάκελο “dist” και ένα νέο αρχείο “build.js” μέσα σε αυτό — που προκύπτει από τη συναρμολόγηση κώδικα.
Βήμα 5: Τώρα, θα πρέπει να ενσωματώσουμε τη συναρμολογημένη λογική build.js στην κύρια σελίδα HTML.
Βήμα 6: Εκτελέστε το διακομιστή και ανοίξτε το http: // localhost: 5000 / , κάντε κλικ στο κουμπί. Απολαύστε!
Η πρώτη μας εφαρμογή ReactJS + NodeJS είναι έτοιμη!
1.3 Git, GitHub και Heroku
1 out of 1 step passed
Σε αυτό το μάθημα θα δούμε το απαραίτητο εργαλείο για τους προγραμματιστές — Git .
Το Git είναι ένα κατανεμημένο σύστημα ελέγχου έκδοσης για την παρακολούθηση αλλαγών στον πηγαίο κώδικα κατά την ανάπτυξη λογισμικού. Έχει σχεδιαστεί για το συντονισμό των εργασιών μεταξύ προγραμματιστών, αλλά μπορεί να χρησιμοποιηθεί για την παρακολούθηση αλλαγών σε οποιοδήποτε σύνολο αρχείων.
Ας δημιουργήσουμε ένα αποθετήριο για την εφαρμογή μας web boilerplate! Θα χρησιμοποιήσουμε τη δημοφιλέστερη υπηρεσία GitHub για τις αποθήκες Git.
Βήμα 0: Εγκαταστήστε το git και ελέγξτε την έκδοση git
Βήμα 1: Δημιουργήστε ένα νέο αποθετήριο στο GitHub .
Βήμα 2: Μετονομάστε το φάκελο και αντιγράψτε με git clone αυτό το αποθετήριο
mv mweb3waves/ mweb3waves_/git clone https://github.com/AlekseiPupyshev/mweb3waves.git
μετακινήστε τα αρχεία έργου / φακέλους σε αυτή την αρχική 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;(- αυτή η προσέγγιση δεν είναι η βέλτιστη πρακτική της χρήσης .git με απομακρυσμένη προέλευση.Το Mastering git ή άλλα εργαλεία είναι λίγο έξω από το πεδίο αυτού του μαθήματος Web3.Ωστόσο, παρακαλώ να χρησιμοποιήσετε τις βέλτιστες πρακτικές για εσας.)
Βήμα 3: Δημιουργήστε ένα αρχείο .gitignore στη ρίζα του φακέλου repo
package-lock.json
node_modules/Βήμα 4: Προσθήκη αρχείων στο git diff tracker και πατήστε commit στο απομακρυσμένο διακομιστή GitHub
git add -A;
git commit -m 'add project files';
git push origin master;Το αποθετήριο GitHub είναι έτοιμο!
1.4 waves keeper
1 out of 1 step passed
Το τελικό μάθημα αυτής της ενότητας προετοιμασίας είναι “Πώς να ενσωματώσετε το Waves keeper ;”.
Το Waves Keeper είναι μια επέκταση του προγράμματος περιήγησης που επιτρέπει στους χρήστες να διαχειρίζονται τους λογαριασμούς τους (κλειδιά) και να αλληλεπιδρούν με ασφάλεια και ευκολία με υπηρεσίες Waves web και dApps .
Βήμα 0: Εγκαταστήστε το Waves Keeper και δημιουργήστε ή εισαγάγετε έναν λογαριασμό
Ακολουθήστε τις οδηγίες εδώ .
Βήμα 1: Προσθέστε αλλαγές κώδικα στο αρχείο app.js. Θα καλέσουμε το Waves Keeper για Auth όταν ο χρήστης πιέσει το κουμπί 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);
}
Στη συνέχεια, ανοικοδομήστε τον κώδικα javascript από την πλευρά του υπολογιστή-πελάτη:
npm run buildΑς το ανοίξουμε στο http: // localhost: 5000 / . Ανοίξτε το “ Εργαλεία ανάπτυξης : Κονσόλα” για να δείτε το επιστρεφόμενο αντικείμενο από το Keeper.
node server.jsΒήμα 2: Προσθέστε αλλαγές στο git tracker, δεσμεύστε και πιέστε αλλαγές στο απομακρυσμένο αποθετήριο GitHub στην ενότητα 1.3. Ανοίξτε το Heroku και κάντε ξανά κλικ στο “Deploy” από τον κύριο κλάδο. Ανοίξτε την εφαρμογή Ιστού.
git add -A;
git commit -m 'Waves Keeper Auth integrated';
git push origin master;Βήμα 3: Προσθέστε τον τομέα Heroku στους αξιόπιστους πόρους στις ρυθμίσεις απορρήτου του Keeper για να αποτρέψετε τους “απορριφθέντες” χαρακτήρες
Εγινε!
1.5 Η πρώτη πρόκληση (a boiler project)
1 out of 1 step passed
Συγχαρητήρια!
Αυτή είναι η πρώτη σας online πρόκληση σε αυτό το μάθημα:
“Σύμφωνα με τα προηγούμενα μαθήματα, δημιουργήστε μια εφαρμογή ιστού” boilerplate “, σπρώξτε την στο GitHub, αναπτύξτε το στο Heroku και μοιραστείτε τους συνδέσμους με το GitHub αποθετήριο και την ανάπτυξη του Heroku.
Υποβάλετε τα εκτυπωμένα αποτελέσματα από την κονσόλα του προγράμματος περιήγησης.
Καλή τύχη!”
