Crear una Dapp desde cero sin frameworks

¿Cómo programar una Dapp en Ethereum? Este es un tutorial para crear una Dapp que se conecte con una criptomoneda también programada por nosotros.

Si te gusta este artículo dale un aplauso :-) Y si no te quieres perder ningún otro artículo sígueme.

Conocimientos previos:

• Html, CSS y JavaScript.
• Conocimientos básicos de Node.js y npm.

LISTA DE PASOS

1. Estructura de directorios y archivos.
2. Inicializar un proyecto de npm.
3. Instalar dependencias de producción y desarrollo.
4. Creación de nuestra criptomoneda ERC-20.
5. Programar los archivos de compilación y deploy.
6. Programar el frontend.
7. Compilar y subir nuestro Smart Contract a Ganache-cli.
8. Levantar el frontend en nuestro navegador.

Vídeo => https://youtu.be/t10BiFG9Dfc

Paso 1º

Partimos de un directorio/carpeta padre llamada “DAPP” que a su vez se subdivide en 2 subdirectorios: “contracts” y “frontend”.

En “contracts” tendremos todo lo referente a la operativa con la blockchain de Ethereum: Archivos de código fuente (Solidity), archivos de compilación y archivos de deploy.

En “frontend” tenemos todo lo referente a la creación de una web al uso, con la única diferencia que incorporamos la librería Web3 (lo vemos mas adelante).

* Evidentemente puedes cambiar a tu gusto los nombres de las carpetas y archivos. Pero no te lo aconsejo para no perderte en la explicación.

Paso 2º

Desde tu terminal de comandos sitúate en el directorio principal “DAPP” y corre el comando “npm init -y”.

Paso 3º

Vamos a necesitar las siguientes dependencias:

• “npm i solc” => Este es el compilador para trasformar el código fuente de solidity a bytecode.
• “npm i truffle-hdwallet-provider” =>El modulo que gestiona las conexiones JSON-RPC y las address que usaremos.
• “npm i web3” => La librería web3.js que hará de puente para comunicar nuestro JavaScript con la Blockchain.
• “npm i — save-dev lite-server” => Instalamos en nuestro proyecto un servidor ligero para levantar nuestra web(Dapp). Como es para hacer pruebas localmente lo requerimos como una dependencia de desarrollo.

Paso 4º

No me voy a detener en este punto ya que sería otro artículo aparte. Aquí simplemente tenéis que crear un contrato inteligente siguiendo el esquema ERC-20 para que sea una criptomoneda (token ERC-20) estandarizada.

En mi caso lo he denominado “MyCoin.sol”. Lo tenéis que guardar dentro de la carpeta “contracts”.

Paso 5º

Nuestro contrato no sirve de mucho sino lo compilamos y subimos a Ethereum. Para eso, ahora tenemos que crear una sub-carpeta “js” dentro de “contracts” e insertar ambos archivos de JavaScript:

“compile.js” => Archivo de compilación del que obtendremos el “abi” y el “bytecode”. En el código buscamos la localización del archivo del contrato y luego leemos su código fuente. Después pasamos el código a un objeto de configuración del compilador. Y finalmente exportamos únicamente el “abi” y el “bytecode” de todo lo que nos retorna la compilación.

“deploy.js” => Archivo de deploy cuya finalidad es subir el bytecode a la blockchain para que se pueda usar.

• Tenéis que instalar ganache-cli a nivel global en vuestro ordenador. Y ejecutarlo desde una terminal. Esto os levantará una blockchain de pruebas dentro de vuestra maquina. Además os aporta un serie de cuentas con saldo (falso ETH) para hacer pruebas.
• La constante “mnemonic” es la frase semilla que os retornará Ganache al ejecutarse. No uséis la mía o no os funcionará.
• Requerimos “web3” y la instanciamos con le provider que nos proporciona “truffle-hdwallet-provider” que previamente hemos configurado con los datos de Ganache.
• Para hacer el deploy necesitamos de una address desde la que firmar la transacción y por eso llamamos al método “getAccounts()”. Nos retorna las cuentas (address) en un array. Mas adelante usaremos la primera address de ese array para hacer la transacción. Recordar que escribir código o datos en la blockchain requiere de una transacción firmada que consume gas.
• Por último, usamos web3 para estimar el gas que requerirá la transacción y finalmente la ejecutamos también con la ayuda de esta librería. Pasamos un array con los argumentos para los parámetros de la función constructora de nuestro Smart Contract, ya que de otra modo no podría inicializar el contrato.
• Como podéis observar, para hacer el deploy necesitamos el “abi” y el “bytecode” que este archivo obtiene al requerir “compile”. Igualmente, es importante fijarse que a la hora de hacer una transacción firmada con web3 usamos el método “send”.

Paso 6º

En la carpeta de “frontend” tenemos que incluir los archivos típicos de una página web, es decir: html, css y JavaScript. Nuestro archivo js deberá implementar la librería web3 para hacer de puente con la blockchain. Por lo tanto, mi consejo es que la busques en “node_modules” y la copies en esta carpeta.

No me voy a parar en el html y el css, ya que eso es maquetación a gustos y necesidades.

En el archivo js debemos instanciar nuestro contrato y para eso necesitamos el “abi” (puedes obtenerlo en la compilación) y la address del deploy. Una vez instanciado, a través de “methods” podemos llamar a cualquier función (external o public) de nuestro contrato. Básicamente existen dos tipos de funciones: De lectura o escritura.

La funciones de lectura no requieren transacciones con firma y por tanto no gastan gas. El nodo directamente nos aporta la información sin tener que esperar a que se mine o validen bloques. Para este tipo de funciones usamos “call()”.

Las funciones de escritura requieren transacciones firmadas y por consiguiente no son gratuitas en términos de gas. Los nodos tienen que incluir nuestra transacción y minarla. Pare este tipo de funciones usamos “send()”.

En el ejemplo no he usado eventos, pero web3 también nos permite escuchar eventos de la blockchain y que nuestra Dapp sea reactiva a determinadas informaciones o cambios del estado. En mi canal de Youtube tengo videos explicándolo.

A partir de aquí, es JavaScript normal y corriente para manipular el DOM del documento web: Esconder, mostrar, actualizar valores, etc..

En nuestro caso estamos interactuando con un ERC-20 y nos hemos limitado a obtener saldos y hacer transferencias. De esta manera podemos ver los dos casos de lectura o escritura.

Paso 7º

Obviamente para que nuestra Dapp funcione antes tenemos que compilar y subir nuestro contrato a Ethereum. Ademas, si no hacemos el deploy tampoco tenemos una address de contrato que pasar a web3 :)

Nuestro archivo de “deploy.js” ya incluye el de “compile.js” y basta con ejecutar el primero. Esto lo podríamos hacer con node directamente desde la terminal, pero yo prefiero usar los scripts de package.json:

Paso 8º

¡Enhorabuena! Ya lo tienes. Ahora solo tienes que levantar tu web con “lite-server” que es nuestro mini-servidor para hacer pruebas locales. En este paso también uso los scripts.

Espero que te haya sido de utilidad este artículo, muchas gracias por tu lectura. Saludos. Aaaaa!!!!! Si te ha gustado dame un aplauso ;)

Espero que te haya sido de utilidad este artículo, muchas gracias por tu lectura. Saludos. Aaaaa!!!!! Si te ha gustado dame un aplauso ;)

Sígueme también en:

• YouTube:

https://www.youtube.com/channel/UCGArGu3QXNolrJ63qGSrw6w

• Twitter:

JavaScript is not available.

https://twitter.com/LasaAlberto