<style>
.reveal h1 {
font-size: 1.5em;
color: #00B520!important;
}
.reveal h2 {
font-size: 1.3em;
color: #00B520!important;
}
.reveal h3 {
font-size: 1.2em;
color: #00B520!important;
}
.reveal h4 {
font-size: 1em;
color: #00B520!important;
}
.reveal p, .reveal td {
color: #000;
font-weight: 100;
font-size: 0.8em;
}
.reveal li {
color: #000;
font-weight: 100;
font-size: 0.6em;
}
.reveal section img {
border: 0 solid #fff;
box-shadow: 0 0 0 0;
background: transparent;
}
.reveal section pre.part {
color: #000;
background-color: #eee;
}
</style>
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
# Crea tu primer front-end para contratos inteligentes
Ilan Olkies
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## Sobre mí
<div >
<div style="width: 50%; float: left;">
<ul>
<li>Dos años y medio en IOV</li>
<ul>
<li>Un año en RSK</li>
<li>Un año developer de RNS</li>
<li>Un medio año PO de RNS</li>
</ul>
<li>Solidity + Javascript</li>
<li>Otros lenguajes</li>
</ul>
</div>
<div style="width: 50%; float: left;">
<ul>
<li>Ciencias de la computación</li>
<li>Mate y café</li>
<li>Botánica y jardinería</li>
<li>Guitarra</li>
</ul>
</div>
</div>
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## Agenda
1. Cómo funcionan las aplicaciones descentralizadas?
2. Setup del entorno de desarrollo
3. Creación de un contrato inteligente
4. Simple aplicación React para operar con el contrato inteligente
5. Deploy a la testnet de RSK (si alcanza el tiempo)
6. Conectar aplicación a la testnet de RSK
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## 1. Cómo funcionan las aplicaciones descentralizadas?
Web2.0
![](https://i.imgur.com/CEM5Zft.png)
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
El stack de tecnología
<img src="https://i.imgur.com/Bb7g3mp.png" style="width: 45%; float:left; margin: 2.5%" />
<img src="https://i.imgur.com/wUY0I4m.png" style="width: 45%; float:left; margin: 2.5%" />
<img src="https://i.imgur.com/Uo33HIe.png" />
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Web3.0
![](https://i.imgur.com/0U4bVTz.png)
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
### Beneficios
![](https://i.imgur.com/ncfFfkd.png)
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## 2. Setup del entorno de desarrollo
<img src="https://i.imgur.com/ankSy0d.png" style="max-width: 33%; float: center; max-height: 200px" />
<img src="https://i.imgur.com/ThVvdKD.png" style="max-width: 33%; float: center; max-height: 200px" />
<img src="https://i.imgur.com/yGmR3xr.png" style="max-width: 33%; float: center; max-height: 200px" />
<hr />
### Ambiente Node
<table>
<th>
<td>Node v12.16.1</td>
<td>npm v6.14.3</td>
<td>yarn v1.19.1</td>
</th>
</table>
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
```
mkdir webinars-2020
cd webinars-2020
npm init
npm i --save-dev truffle create-react-app
npx truffle init
npx create-react-app dapp
code .
```
![](https://i.imgur.com/Bhh8RCb.png)
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
### A probarlo!
```
npx truffle develop
```
![](https://i.imgur.com/ezz8M2G.png)
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## 3. Creación de un contrato inteligente
Un _contrato inteligente_ es un programa público con una unidad de almacenamiento independiente.
<img src="https://i.imgur.com/1B2Z52e.png" style="max-height: 350px;" />
Los usuarios de la red RSK, además de enviarse fondos, pueden también usarlos para ejecutar estos programas.
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Contrato, test unitario y script de deploy.
<img src="https://i.imgur.com/fWOn6VN.png" style="width: 58%; float: left; margin: 1%;" />
<img src="https://i.imgur.com/YdZX086.png" style="width: 38%; float: left; margin: 1%;" />
![](https://i.imgur.com/tHsEI6n.png)
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Contrato inteligente
```solidity
pragma solidity >= 0.5.0 < 0.7.0;
contract HelloWorld {
string private message;
constructor() public {
message = "Hello world!";
}
function getMessage() external view returns(string memory) {
return message;
}
function setMessage(string calldata newMessage) external {
message = newMessage;
}
}
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Script de deploy
```javascript
const HelloWorld = artifacts.require('HelloWorld');
module.exports = deployer => deployer.deploy(HelloWorld);
```
Pruebalo con
```
npx truffle develop
truffle(develop)> migrate
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Tests unitarios
```javascript
const assert = require('assert');
const HelloWorld = artifacts.require('HelloWorld');
contract('Hello World', () => {
beforeEach(async () => {
this.helloWorld = await HelloWorld.new();
});
it('should have initial message', async () => {
const message = await this.helloWorld.getMessage();
assert.equal(message, 'Hello world!');
});
it('should allow to set message', async () => {
await this.helloWorld.setMessage('Goodbye.');
const message = await this.helloWorld.getMessage();
assert.equal(message, 'Goodbye.');
});
});
```
Pruebalo con
```
npx truffle test
```
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## 4. Simple aplicacion React para operar con el smart contract
Conceptos clave:
- No necesitamos pagar para obtener datos de la red.
- Para modificar datos hay que pagar un costo transaccional. El usuario lo pagará con su billetera.
- Cualquiera puede utilizar nuestro contrato. Todo está definido en el programa que escribamos.
Interfaz para conectarse a contratos:
- Los nodos tienen un endpoint http/https/ws
- La API de los contratos se representa con un _ABI_
- Los contratos, como las cuentas, tienen un identificador único: la dirección
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
### Confección del componente
```jsx
render () {
const { message, value, setting, transactionHash, confirmed } = this.state;
return (
<div style={{ padding: 50 }}>
<h2>Hello World</h2>
<label>message: {message}</label><br />
<button onClick={this.getMessage}>get message</button>
<hr />
<label>new message: </label>
<input type="text" value={value} onChange={this.handleChange} disabled={setting} />
<button onClick={this.setMessage} disabled={setting}>set message</button>
{
transactionHash && (
<>
<br />
<label>
{`transactionHash: ${transactionHash} - ${confirmed ? 'confirmed' : 'wait for confirmation'}`}
</label>
</>
)
}
</div>
);
}
```
Pruebalo con
```
yarn start
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
El endpoint del nodo local es
```
http://localhost:9545
```
<hr />
El ABI del contrato está en la carpeta _build/_
Es un arreglo de objetos que describen el nombre de los métodos, los tipos de parametros de entrada y tipos de salida.
<hr />
La dirección se reporta en el momento de deploy. Es única en la red.
Cuando alguien envie una transacción a su dirección, se ejecutará su programa automaticamente.
La transacción contiene los valores de los parámetros de entrada.
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
### Para obtener información
- No necesitamos transacciones
- Usamos un nodo como API de consultas
```javascript
new Web3('http://localhost:9545')
```
```javascript
getMessage () {
this.setState({ message: '...' });
const web3 = new Web3(rskEndpoint);
const helloWorld = new web3.eth.Contract(helloWorldABI, helloWorldAddress);
helloWorld.methods.getMessage().call()
.then(message => this.setState({ message }));
}
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
### Para almacenar información
- Debemos emitir transacciones
- Usaremos la billetera del navegador del usuario
```jsx
new Web3(window.ethereum)
```
```javascript
setMessage() {
this.setState({ setting: true, transactionHash: null, confirmed: false });
const { value } = this.state;
window.ethereum.enable()
.then(accounts => {
console.log(accounts)
const web3 = new Web3(window.ethereum);
const helloWorld = new web3.eth.Contract(helloWorldABI, helloWorldAddress);
return helloWorld.methods.setMessage(value).send({ from: accounts[0] })
.on('transactionHash', transactionHash => this.setState({ transactionHash }))
.on('receipt', _ => this.setState({ confirmed: true, setting: false }));
})
.then(() => this.getMessage())
}
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Pruebalo con Nifty wallet (o Metamask)
https://chrome.google.com/webstore/detail/nifty-wallet/jbdaocneiiinmjbjlgalhcelgbejmnid
<hr />
Link útil:
[resetear billetera cuando se vuelve a lanzar la blockchain](https://metamask.zendesk.com/hc/en-us/articles/360015488891-Resetting-an-Account)
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Te quedaste atrás?
<iframe width="100%" height="500" src="//jsfiddle.net/ilanolkies/nudzLp69/12/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## 5. Deploy a la testnet de RSK
- Los contratos se crean haciendo una transacción que tiene el programa que utilizará el mismo.
- Para esto necesitamos pagar el costo tansaccional.
- En la red testnet de RSK los fondos son gratis. Es una red _igual_ a la productiva.
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
1. Crea an cuenta nueva con https://iancoleman.io/bip39/ (12 palabras)
`march help taste inherit believe dentist worth wet firm junk balance message`
Crear archivo `.secret` con las 12 palabras.
2. Instalar `@truffle/hdwallet-provider`
```
npm i @truffle/hdwallet-provider
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
3. Conectarse a RSK testnet. Editar `truffle-config.js`
```javascript
const HDWalletProvider = require('@truffle/hdwallet-provider');
const fs = require('fs');
const mnemonic = fs.readFileSync(".secret").toString().trim();
const rskTestnetEndpoint = 'https://public-node.testnet.rsk.co';
module.exports = {
networks: {
rskTestnet: {
provider: () => new HDWalletProvider(mnemonic, rskTestnetEndpoint),
network_id: 31,
gasPrice: 60000000,
},
},
};
```
Pruebalo con
```
npx truffle console --network rskTestnet
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Obten fondos en tu cuenta
1. Obten tu dirección
```
truffle(rskTestnet)> const myAccount = await web3.eth.getAccounts().then(accounts => accounts[0])
undefined
truffle(rskTestnet)> myAccount
'0x...'
```
2. Navega a https://faucet.rsk.co, completa con tu dirección y espera la confiramción. Puedes consultar tu balance con
```
truffle(rskTestnet)> web3.eth.getBalance(myAccount)
```
----
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Deploy!
```
truffle(rskTestnet)> migrate
```
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## 6. Conectar app a la testnet de RSK
- Cambiar las direcciones de los contratos la local por la publica
[0xe1db8d54450c45e63f0e60a699cab992aaf8fac2](https://explorer.testnet.rsk.co/address/0xe1db8d54450c45e63f0e60a699cab992aaf8fac2)
- Cambiar endpoints de los nodos
http://localhost:9545 → https://public-node.testnet.rsk.co
- Conecta tu billetera con la red de RSK
Selector de arriba a la derecha en Nifty
Metamask: https://developers.rsk.co/develop/apps/wallets/metamask/
- Obten fondos para tu billetera en https://faucet.rsk.co
- Prueba la app!
Puedes correr
```
yarn start
```
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
## Resumen
1. Creamos un contrato inteligente, que contiente la lógica pública de nuestra aplicación.
2. Desarrollamos un front end que se conecta a este contrato sin servidores.
3. Publicamos el contrato en una red pública, que permite a cualqueira utilizar nuestra aplicación.
---
<!-- .slide: data-background-image="https://i.imgur.com/ueaYN7a.png" -->
Gracias!
- \+ sobre rsk? developers.rsk.co
- \+ webinars? https://developers.rsk.co/webinars/
- Github? github.com/rsksmart
Ilan Olkies
- Twitter: [@ilanolkies ](https://twitter.com/ilanolkies)
- Mail: ilan@iovlabs.org
- Blog: ilanolkies.com
- Github: [@ilanolkies](https://github.com/ilanolkies)
{"metaMigratedAt":"2023-06-15T06:46:15.859Z","metaMigratedFrom":"YAML","title":"Crea tu primer front-end para contratos inteligentes","breaks":"true","contributors":"[{\"id\":\"007de64f-203d-43bb-ad0a-84d90c155e77\",\"add\":15523,\"del\":2043}]"}