¿Es posible crear una DAPP (Aplicación descentralizada) con Angular? La respuesta es sí, y es más fácil de lo que creerías. Pero antes necesitamos tener en claro algunos conceptos claves:
¿Qué es una DAPP?
Es una aplicación que no depende de un sistema central, sino que depende de la comunidad de usuarios que la utilizan, una DAPP puede ser una app móvil o una aplicación web que interactúa con un contrato inteligente, el cual ejecuta todas las funciones.
¿Qué dependencias necesito?
- Git
- Node & NPM
- Ganache
- Metamask
- Angular-Cli
Instalamos el CLI de Angular y Truffle para descargar la "truffle box"en la cual estará todo lo que necesitemos para nuestra DAPP.
npm install -g truffle
npm install -g @angular/cli
npm install -g ganache-cli
- Descargamos la truffle box En la terminal nos aparecerá un mensaje de éxito una vez que todo finalice y nos mostrara los comandos necesarios para nuestra aplicación truffle unbox ng-es/angulartruffledapp
- Lanzamos el cliente de Ethereum, podemos usar la terminal o descargarlo desde : https://truffleframework.com/ganache
ganache-cli
Si tienes instalada una versión antigua es recomendable actualizar debido a que versiones antiguas tienen un bug que marca como 0 el gas y la transacción no se podrá llevar a cabo
4.Compilar y migrar el contrato inteligente
Para migrar el contrato inteligente de la truffle box debemos ejecutar el siguiente comando en la terminal dentro de el directorio blockchain/contracts :
npm install dotenv && npm install truffle-hdwallet-provider
truffle compile && truffle migrate
En el cli veremos la información de compilación y migración de nuestro contrato así como en ganache los una vez compilado nuestro contrato veremos dentro de build/contracts dos archivos .JSON uno de ellos es el de migración y el otro nuestro contrato, ahora tenemos menos ether debido a la comisión por transacción.
- Cambiar el puerto de ganache
Cambiar el puerto en truffle-config.js 8545 en windows el puerto es 7545 pero en linux el puerto es 8545, también puede variar si se usa el cli o la version gráfica.
- Instalar Metamask Ingresa en la página https://metamask.io/ y descarga el plugin para el navegador de tu preferencia.
Metamask es un plugin que hace de puente entre varias DAPS y tu navegador, es un monedero virtual en el cual puedes conectarte sin comprometer la seguridad de nuestras cuentas usando varias cuentas y sin necesidad de usar un nodo de Ethereum completo.
Una vez creada la cuenta nos conectaremos a la cuenta con un RPC personalizado el cual es HTTP://127.0.0.1:7545 o 8545, en el icono de la llave obtendremos la clave privada con la que importaremos una nueva cuenta.
7.Ahora debemos instalar dependencias y Desplegar el servidor local de Angular, navegamos a la carpeta Frontend usando el comando
npm install && ng serve
Si seguiste todos los pasos y el mensaje en la consola de truffle durante el unbox es: Unbox successful. Sweet! Felicidades, todo está bien.
Al iniciar la aplicación encontrarás un mensaje de bienvenida y en la sección de cuenta la cuenta actual de metamask , y listo ya tendrás preparada una aplicación descentralizada con angular la cual podrás modificar, mejorar y adaptar a tus necesidades. Sólo debes cambiar el contrato en la carpeta Blockchain\contracts\Payment.Sol y también en la carpeta Frontend\src\app\services\contract\contract.service.ts en el cual cambias el nombre con tu propio contrato ademas de cambiar las funciones y directivas para interactuar con el contrato ,en nuestras próximas entradas veremos cómo modificar estos archivos.
Puedes ver mas proyectos en :
https://www.trufflesuite.com/boxes/angulartruffledapp
Un proyecto bien cool creado a partir del código basé :
Pagina de el evento https://hackathonmunon.web.app/
La aplicación https://hackathonmunon.web.app/ si deseas probarla conectate a la red de prueba rinkeby en metamask.
También puedes unirte a nuestra comunidad donde hablamos de temas de desarrollo y blockchain
https://discord.gg/kkPeavTNDy
Top comments (0)