webinar-primer-frontend's Introduction

Primer frontend para Smart Contracts

Creado durante el webinar "Crea tu primer frontend para Smart Contracts"

Intro

Usamos el framework Truffle, que nos permite usar una blockchain local durante el desarrollo de nuestra aplicación. Creamos una aplicación React.js con create-react-app para nuestro front end. El usuario de la aplicación interactuará con la blockchain a travez de su billetera plugin. Recomendamos usar Nifty Wallet, Metamask también es comaptible.

El proyecto

/contracts contiene los contratos inteligentes. Migrations.sol es parte del framework Truffle.
/dapp contiene la aplicación front end React.js.
/migrations tiene los scripts de deploy que ejecuta Truffle con el comando truffle migrate
/test tiene todos los tests que performa Truffle con el comando truffle test
truffle-config.js is the required configuration file for Truffle framework.

Uso

Instalar dependencias
```
npm i
cd dapp
yarn
```
Para usar el front end:
1. Iniciar la blockchain local
```
npx truffle develop
```
1. Crear los contratos en esa blockchain
```
truffle(develop)> migrate
```
1. Copiar la dirección del contrato en contractAddress en /dapp/src/App.js
2. En otra terminal, lanzar el aplicativo en /dapp
```
cd dapp
yarn start
```

Para usar los contratos desde el terminal:

Luego de ejecutar truffle migrate

truffle(develop)> let helloWorld = await HelloWorld.deployed()
truffle(develop)> helloWorld.getMessage()
truffle(develop)> helloWorld.setMessage('Goodbye')

Para conectar el front-end a la testnet de RSK, en /dapp/src/App.js:
1. Cambiar nodeEndpoint por https://public-node.testnet.rsk.co
2. Cambiar contractAddress por 0xe1db8d54450c45e63f0e60a699cab992aaf8fac2
3. Cambiar la red en la wallet por RSK Testnet