Dominando Web 3.0 con Waves — Módulo #1
Módulo #1 Preparación: Herramientas necesarias y tutoriales.
1.2 Cómo: crear una aplicación simple con React.JS
1.1 Cómo: crear una aplicación simple con Node.JS. Localhost
En esta lección aprenderemos cómo crear una simple aplicación web (html) utilizando el paquete NodeJS — express.js.
Usaremos el editor de código Sublime , pero usted puede usar cualquiera de su preferencia.
Paso 0: crea una nueva carpeta llamada — mweb3waves y abre el editor Sublime en esta carpeta.
Paso 1: cree un nuevo archivo HTML — index.html en la carpeta mweb3waves.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Implementando Web3.0 con Waves platform</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>Paso 2: instale la aplicación Node.js como se describe en este sitio web
Paso 3: Abra el terminal/linea de comando y revise las versioes instaladas para node.js y su herramienta de gestión de paquetes npm
Paso 4: cree un archivo package.json. Este archivo contiene todos los paquetes de node.js a ser utilizados en vuestra aplicación.
{
"name": "mweb3-demo-waves",
"version": "0.1.0",
"dependencies": {
"express": "^4.16.4"
}
}Paso 5: Ahora instalemos el paquete express.js! Abra la linea de comandos y corra “npm install” en la carpeta mweb3waves.
Como podra ver la carpeta — node_modules contiene el codigo base con todas las dependencias necesarias (packages and modules).
Paso 6: Entonces, estamos listos para crear nuestra primera aplicación de servidor de “una pagina” . Cree un archivo server.js. Nuestro servidor solo tiene una funcionalidad: enviar el archivo index.html al navegador una vez que el usuario haya abierto la página del sitio 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);
});
Paso 7: ejecutemos nuestra aplicación de servidor node.js con el comando “node server.js”
Podemos abrirlo en un navegador ahora usando la url http://localhost:5000/.
1.2 Cómo: crear una aplicación simple con React.JS
Nuestra aplicación de una sola página es genial, pero, al mismo tiempo, es un poco inútil. ¡Vamos a agregar un poco de interacción lógica para el usuario!
Mientras JavaScript — es un lenguaje utilizado para convertir “html estatico” en páginas dinámicas, con diversas aplicaciones de uso y componentes de UI (Interfaz de usuario). ReactJS es un marco de JavaScript muy potente que permite crear aplicaciones web de una pagina(SPA) interactivas.
En la lección anterior de este módulo de “preparación” hemos considerado: cómo se podría ensamblar una aplicación de servidor utilizando el administrador de paquetes “npm” y el archivo de configuración de paquetes — “package.json”. Una lógica similar funciona también con el código JavaScript necesario a implementar en el lado del cliente (navegador).
Paso 0: Creemos la estructura inicial. Creee los archivos: { webpack.config.js, .babelrc, main.js, app.js } y las carpetas: { src, components }
Paso 1: Para construir los componentes UI apropiadamente, nuevos paquetes deben agregarse a “package.json” e instalarse con “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"
}
}Paso 2: Creemos la UI y ensamblemos los componentes logicos.
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"]
}Paso 3: Añadamos algo de lógica a la aplicación.
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';Paso 4: Construyamos los módulos de JavaScript usando el comando — “npm run build”.
Podremos ver ahora la carpeta autogenerada “dist” y el archivo “build.js” dentro de ella — como resultado del ensamblaje del codigo.
Paso 5: Ahora, debemos integrar la logica de ensamblado de build.js en la pagina HTML principal.
Paso 6: Corra el servidor y abra http://localhost:5000/, presione el boton y disfrute!
¡Nuestra primera aplicación web ReactJS + NodeJS está lista!
Cómo: utilizar Git y GitHub
En esta lección practicaremos la herramienta “imprescindible” para desarrolladores.- Git.
Git es un sistema distribuido de control de versiones para rastrear cambios realizados en el código fuente durante el desarrollo de software. Está diseñado para coordinar el trabajo entre programadores, pero se puede usar para rastrear cambios en cualquier conjunto de archivos a utilizar.
¡Vamos a crear un repositorio para nuestra aplicación web! Utilizaremos GitHub — El servicio en línea más popular para los repositorios de Git.
Paso 0: Instalar git y revisar la versión instalada
Paso 1: Crear un nuevo repositorio en GitHub.
Paso 2: Renombrar la carpeta y git clone este repositorio
mv mweb3waves/ mweb3waves_/git clone https://github.com/AlekseiPupyshev/mweb3waves.git
mover los archivos y carpetas del proyecto al repositorio madre.
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;(! — este enfoque no es la mejor practica de utilizacion de .git con origenes remotos. Dominar git o otras herramientas estan un poco fuera del area de este curso en linea de Web3.0. Sin embargo, no dude en utilizar las mejores prácticas que usted estime conveniente en sus proyectos personales o desafíos de código)
Paso 3: Cree un archivo .gitignore en la raiz de la carpeta del repositorio.
package-lock.json
node_modules/Paso 4: Agregue los archivos al git diff tracker y envie el commit al servidor remoto de GitHub
git add -A;
git commit -m 'add project files';
git push origin master;¡El repositorio de GitHub está listo!
Cómo: utilizar Heroku
Localhost es bueno, pero para poder compartir sus aplicaciones web con otros usuarios o amigos, tenemos que implementar el servicio en algún lugar en la nube.
Heroku — es una plataforma en linea basada en contenedores diseñada como Platforma de Servicio (PaaS por sus siglas en Ingles). Los desarrolladores utilizan Heroku para implementar, administrar y escalar aplicaciones modernas. Es gratis para hasta 5 proyectos basicos. ¡Vamos a usarlo!
Paso 1: Regístrate y abre el panel de control, crea un nuevo proyecto. Seleccione “Importar desde GitHub”.
Paso 2: Haga clic en desplegar desde la rama maestra, luego haga clic en “View” (Ver).
¡Todo listo!
Cómo: usar Waves Keeper
La lección final de este módulo de preparación es “Cómo integrar Waves Keeper”.
Waves Keeper es una extensión del navegador que permite a los usuarios administrar sus cuentas (claves) e interactuar de forma segura y sin problemas con los servicios web y dApps habilitadas para Waves .
Paso 0: Instalar Waves Keeper y crear o importar una cuenta. Siga las instrucciones aquí descritas.
Paso 1: Agregar los siguientes cambios en el archivo app.js. Llamaremos Waves Keeper para Auth (autorizacion) cuando el usuario presione el boton de autorizar.
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: "Autorizar en mi sitio" };
if (WavesKeeper) {
WavesKeeper.auth( authData )
.then(auth => {
console.log( auth ); // muestra los resultados en la consola
/*...procesando la informacion */
}).catch(error => {
console.error( error ); // muestra los resultados en la consola
/*...procesando errores */
})
} else {
alert("Para autorizar, WavesKeeper debe estar instalado.");
}
}
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);
}
Luego reconstruya el código JavaScript a ser ejecutado del lado del cliente:
npm run buildCorrer el codigo y abrir http://localhost:5000/. Abrir “Consola: Herramientas de desarrollo:” para ver el objeto devuelto por Waves Keeper.
node server.jsPaso 2: Agregue cambios al rastreador de git, confirme e inserte cambios en el repositorio remoto de GitHub en el módulo 1.3. Abra Heroku y haga clic en “Implementar” (Deploy) en la rama maestra nuevamente. Abra la aplicación web.
git add -A;
git commit -m 'Waves Keeper Auth integrated';
git push origin master;Paso 3: Agregue el dominio de su aplicacion de Heroku en la configuración de privacidad de Keeper para evitar errores tales como “rechazos” (rejected).
¡Todo hecho!
¡Felicitaciones!
Este es tu primer desafío en línea en este curso:
“Según las lecciones anteriores, cree una aplicación web “boilerplate”, envíela a GitHub, desplieguela en Heroku y comparta los enlaces a su repositorio de GitHub y a la implementación de Heroku.”
Envie los resultados impresos desde la consola del navegador.
¡Buena suerte!
