Cómo construir tu primera aplicación a través de web3.js

Ðapp es la forma abreviada de aplicación descentralizada, cuyo código de fondo se ejecuta en la red p2p (peer-to-peer). En este artículo, nos centramos en la ejecución de runapp en la red Ethereum (si desea obtener más información sobre ethereum, puede leer la publicación anterior). Una Ðapp consta de dos partes:

Frontend proporciona una interfaz de usuario

Backend ejecuta el cálculo y el almacenamiento.

Architectureapp Architecture

Existen varios métodos para implementar Ðapp / smart contract. Puede aprender cómo implementar contratos inteligentes en la red privada a través de trufa en la publicación anterior. Aprenderá a usar web3.js para implementar una Ðapp y crear una interfaz de usuario para la Ðapp en este artículo.

  1. Instalar MetaMask

Metamask permite a los desarrolladores ejecutar Ethereum ÐApps en su navegador sin ejecutar un nodo Ethereum completo. Incluye una bóveda de identidad segura, que proporciona una interfaz de usuario para administrar sus identidades en diferentes sitios y firmar transacciones de blockchain.

Sin embargo, solo es compatible con Google Chrome. Descargar.

2. Instalar Meteor

Meteor es un entorno de JavaScript de pila completa que ayuda a los desarrolladores a crear la aplicación web. Permite a los desarrolladores desarrollar en un idioma, JavaScript, en todos los entornos: servidor de aplicaciones, navegador web y dispositivo móvil. Puede descargarlo en su línea de comando (en Linux o en OSX):

$ curl https://install.meteor.com/ | sh

Pero meteorito es solo un entorno que proporciona una manera fácil de manipular el frontend y el backend. Si está muy familiarizado con otros entornos como jQuery, AngularJS, etc., también son buenas herramientas para construir su aplicación.

3. Construye tu Ðapp

$ meteorito crea dappDemo
$ cd dappDemo
$ meteorito

Luego, vaya a localhost: 3000. Puede ver una demostración predeterminada de meteorito. Puede verificar si web3.js se ha instalado en su meteorito abriendo la consola de su navegador y escribiendo

web3.eth.accounts

Si web3.js no se ha instalado, puede agregar el paquete usted mismo

$ meteorito agregar ethereum: web3

Después de compilar su Ðapp, su carpeta dappDemo debería verse así

Antes de hacer la interfaz de usuario, tenemos que construir el contrato inteligente al principio. En este artículo, construimos el contrato inteligente básico que recibe el Ether del remitente y lo transfiere al receptor. Es muy simple pero nos ayuda a conocer la estructura del contrato ethereum. Podemos programar el contrato a través de trufa o el compilador en línea remix. El código de solidez

solidez de pragma ^ 0.4.0;
tiempo de pago del contrato {
 abordar remitente público;
 dirigirse al remitente privado;
 valor de uint;
/ * Solo el propietario puede usar estas funciones * /
 modificador onlyOwner () {
 if (msg.sender! = remitente) throw;
 _;
 }
/ * Inicializar el propietario * /
 función payontime (receptor de dirección) pagadero {
 valor = msg.value;
 remitente = receptor;
 remittee.transfer (valor);
 }
/ * Obtenga el remitente * /
 función getRemitee () public onlyOwner devuelve (dirección) {
 remitente enviado;
 }
}

pragma solidity ^ 0.4.0 declara que la versión del compilador no es anterior a 0.4.0 y no funciona en 0.5.o (esta segunda condición se agrega usando ^). payontime es el nombre del contrato. Y hay varios tipos de tipos de datos básicos en solidez.

dirección: valores de 160 bits, no permite la operación aritmética

uint / int: enteros sin signo y con signo de varios tamaños

uint8: el entero sin signo con el tamaño de 8 bits. Además, uint es alias para uint256.

booleano: verdadero, falso

byte / bytes32: matrices de bytes de tamaño fijo

bytes: matriz de bytes de tamaño dinámico

cadena: matriz de caracteres de tamaño dinámico

modificador onlyOwner () restringe que solo el propietario del contrato pueda usar la función. El modificador se puede utilizar para cambiar fácilmente el comportamiento de las funciones. Podemos ver cómo se usa en la función getRemittee.

Puede establecer parámetros para cada función, al igual que nuestra función principal payontime. Debido a que es para transferir el éter en la función payontime, tenemos que agregar pagable en el encabezado de la función para decirle al compilador que la función se usa para pagar.

Nota: Utilizo la transferencia aquí para enviar el dinero al remitente porque se revertirá y el contrato actual se detendrá con una excepción cuando esa ejecución se quede sin gasolina o falle de alguna manera. Sin embargo, si utilizamos enviar, solo devolverá falso cuando la ejecución falle. Por lo tanto, los diseñadores tienen que verificar el valor de retorno del envío para asegurarse de que el contrato funcione bien. Desafortunadamente, la función de transferencia solo admite la versión posterior a 4.0.10. Truffle no es compatible con 4.0.10 en este momento. Entonces, si desea usar la función, debe usar otros compiladores.

Después de terminar nuestro código de contrato inteligente, necesitamos el bytecode y el ABI. Hay una manera fácil de llevarlos a través de remix. A continuación, cree un archivo llamado Payontime.json para guardar la interfaz.

Modifique el código de demostración en client / main.html y client / main.js


  Enviar Ether 


 

Enviar éter

  {{> sendEther}}

Entonces tendríamos la interfaz de usuario básica de nuestra Ðapp.

Después de lograr la interfaz de usuario, tenemos que modificar el cliente / main.js para que el Ðapp sea ejecutable.

importar {Plantilla} desde "meteorito / plantilla";
importar {ReactiveVar} desde "meteor / reactive-var";
importar payontime_artifacts desde ‘./lib/Payontime.json’;
import ‘./main.html’;
var payontime = web3.eth.contract (payontime_artifacts);
var bytecode = "your_bytecode";
Template.sendEther.onCreated (
 función helloOnCreated () {
 this.start_balance = new ReactiveVar (0);
 this.end_balance = new ReactiveVar (0);
 }
);
Template.sendEther.helpers ({
 startBalance () {
 return Template.instance (). start_balance.get ();
 },
 endBalance () {
 return Template.instance (). end_balance.get ();
 },
});
Template.sendEther.events ({
 "Haga clic en # enviar" (evento, instancia) {
 let sender = web3.eth.accounts [0];
 let receptor = $ (‘# receptor’). val ();
 let eth_amount = $ ('cantidad'). val ();
 let cantidad = web3.toWei (eth_amount, "ether");
web3.eth.getBalance (receptor, función (error, resultado) {
 if (! error) {
 console.log ("Antes de la transferencia:" + resultado);
 instance.start_balance.set (web3.fromWei (resultado, "éter"));
 }más{
 console.log (error);
 }
 });
// desplegar nuevo contrato, la función de devolución de llamada se ejecutará dos veces
 var newContract = payontime.new (receptor, {datos: bytecode, de: remitente, valor: cantidad}, función (error, resultado) {
 si (! err) {
 console.log (newContract);
 if (! result.address) {
 console.log (result.transactionHash); // El hash de la transacción, que implementa el contrato
 // verifica la dirección en la segunda llamada (contrato implementado)
 } más {
 var addr = result.address;
 console.log (addr);
 web3.eth.getBalance (receptor, función (error, resultado) {
 if (! error) {
 console.log ("Después de la transferencia:" + resultado);
 instance.end_balance.set (web3.fromWei (resultado, "éter"));
 }más{
 console.log (error);
 }
 });
 }
 }más{
 console.log (err);
 }
 });
 }
});

payontime.new () es implementar el contrato inteligente en la red. En la función principal del contrato payontime (receptor de dirección), requiere un parámetro, receptor. Por lo tanto, tenemos que pasar el parámetro cuando implementamos Ðapp; mientras tanto, asignamos de dónde es el contrato y cuánto desea enviar el remitente al contrato.

Después de implementar el contrato, recibiremos una devolución de llamada dos veces. La primera vez, devuelve una cadena de 64 longitudes, que es el hash de la transacción. Puede usarlos para realizar un seguimiento de una transacción en curso. Hay un sitio web Etherscan que ayuda al usuario a rastrear sus transacciones. Después de eso, devuelve la dirección del contrato inteligente en la red. Cuando desee llamar al contrato la próxima vez, la dirección le indica al compilador qué contrato desea usar porque hay varios contratos similares en la red.

La aplicación works funciona bien cuando el saldo del remitente aumenta después de que enviamos Ether.

El artículo muestra la aplicación básica de Ðapp. Sin embargo, las aplicaciones pueden hacer más que enviar dinero, se pueden utilizar en la transparencia de la organización, la cadena de suministro, la atención médica, etc.

Puede descargar el código fuente aquí.