Angular + Truffle = 💓 ÐAPPS

¿Es posible crear una DAPP (Aplicación descentralizada) con Angular? La respuesta es sí, y es mas 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

1.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

2. 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

3. Lanzamos el cliente de Ethereum, podemos usar la terminal o descargarlo desde : https://truffleframework.com/ganache

ganache-cli

Si tienes instalada una version 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 informacion de compilacion y migracion de nuestro contrato asi 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.

5. Cambiar el puerto de ganche

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.

6. 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 DAAPS 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 tambien 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 apartir 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.