NOTE: Swapy Network together with Ethereum-BH Meetup Group is hosting the second Ethereum-BH Workshop in Belo Horizonte, Brazil. This repository is based on Pet Shop tutorial and aims to clarify all the process of creating a decentralized application.
- Introdução
- Ambiente
- Desenvolvimento
- Estrutura de pastas
- Escrevendo os Smart Contracts
- Criando o contrato e definindo a versão do compilador
- Criando variáveis
- Criando a primeira função: Adicionar um animal para adoção
- Criando a segunda função: Retornar o número total de animais
- Criando nosso primeiro modificador de funções
- Criando nossa terceira função: Retornar os dados de um animal
- Criando nossa quarta função: Adotar um animal
- Compilando e publicando os contratos
- Testando o contrato
- Criando uma interface para interagir com o smart contract
- Interagindo com o dapp no browser
- Iniciando o servidor http local
- Usando o dapp
- Parte final
Nossa aplicação consiste em um sistema para o controle de adoções de animais em um Pet Shop e, para isso, esse tutorial aborda o processo de:
- Configurar o ambiente de desenvolvimento
- Escrever os smart contracts
- Compilar e publicar os contratos
- Testar os contratos
- Criar uma interface web para o usuário
- Interagir com o aplicativo descentralizado através do browser
Antes de começarmos a desenvolver nossa aplicação existem alguns requisistos técnicos. Instale o que segue:
- Node.js v6+ LTS e npm e npm (é instalado junto com o Node)
- Git
Após isso, nós precisamos somente instalar o Truffle, o framework que auxiliará no desenvolvimento do nosso DApp:
npm install -g truffle
Para verificar se o Truffle está instalado corretamente, digite truffle version no seu terminal. Caso veja algum erro, certifique-se que seus módulos npm estão visíveis nas variáveis de ambiente
Utilizaremos também a Ganache, uma blockchain privada que permite a publicação dos nossos contratos em ambiente de desenvolvimento e dará suporte para o uso e teste da nossa aplicação. Faça o download da mesma em http://truffleframework.com/ganache.
Primeiramente, utilize o Git para clonar este repositório em sua máquina, na pasta que desejar
git clone git@github.com:SwapyNetwork/pet-shop-box.git
Navegue até a pasta raiz do projeto e instale as dependências locais com
npm install
A estrutura inicial de pastas fornecida pelo Truffle possui:
contracts/: Contém o código fonte dos nossos contratos na linguagem Soliditymigrations/: Responsável por migrar nossos contratos para o ambiente desejado. O Truffle possui um sistema de controle de alterações.test/: Contém os testes em Javascript e Soliditytruffle.js: Arquivo de configuração onde é descrito, por exemplo, o host dos contratos. Utilizaremos a rede local fornecida pela Ganache
Esse repositório possui outras pastas que não importam no momento e serão descritas no decorrer do tutorial.
Nós começaremos nosso aplicativo descentralizado escrevendo os contratos, que atuam como o "back-end" e criam a interface para o armazenamento na blockchain.
-
Crie um novo arquivo de nome
Adoption.solna pastacontracts/. -
Adicione esse conteúdo ao arquivo:
pragma solidity ^0.4.17;
contract Adoption {
}
Observações:
- A versão mínima requerida do Solidity é descrita no ínicio do contrato:
pragma solidity ^0.4.17;. A palavra-chavepragmasignifica "informação adicional que importa somente ao compilador", enquanto o símbolo^significa "A versão indicada ou superior". - Assim como em outras linguagens, a sintaxe exige
;ao final de cada comando.
O Solidity é uma linguagem estaticamente tipada, isso significa que dados do tipo string, integer e array devem ser definidos. Nesse tutorial utilizaremos um tipo de variável único da linguagem, chamado address. Esse tipo representa um endereço Ethereum, uma string de 20 bytes com funcionalidades específicas. Toda carteira (wallet) e smart contract possui um endereço e pode enviar Ethers através/para ele ou mesmo realizar chamadas para funções.
- Para representar um animal a ser adotado, definiremos uma estrutura
Pet. Insira a StructPetque segue na próxima linha apóscontract Adoption {.
struct Pet {
bytes name;
address adopter;
}
- Após isso, precisamos definir nossa lista de animais. Cole o código abaixo após a definição de
Pet:
Pet[] public pets;
Observações:
-
Definimos uma única variável
pets. Arrays possuem um tipo e podem ter tamanho fixo ou variável. No caso, nossa lista é do tipoPete possui tamanho variável. -
Nossa variável é do tipo
public. Variáveis públicas possuem automaticamente um método getter associado a elas. Entretanto, no caso de arrays, o acesso é restrito a um item por vez, pela necessidade de passar uma chave na chamada do getter.
Vamos permitir a inserção de animais na nossa lista pets.
- Adicione a seguinte função abaixo da variável que definimos anteriormente
// adding a pet
function addPet(bytes name) public returns(uint) {
Pet memory newPet = Pet(name, address(0));
pets.push(newPet);
return pets.length - 1;
}
Observações:
-
Precisamos definir o tipo dos parâmetros e do retorno, quando existir, das funções no Solidity. Nesse caso, recebemos uma cadeia de
bytes(string) que representa o nome do novo animal e retornamos um inteiro que indica o índice do novo registro na lista. -
Criamos um novo registro do tipo
Peta partir do nome recebido e inicializamos o endereço do possível adotante com um valor vazioaddress(0), pois o mesmo ainda não está definido quando o animal é inserido para adoção. -
A palavra-chave
memoryaparece por uma necessidade da linguagem de se explicitar que essa variável está sendo criada na memória, até o momento. -
Inserimos então o animal à lista e retornamos seu índice.
Como já foi dito ao definirmos nossa lista de animais, só conseguimos acessar os itens individualmente. Dessa forma, incluiremos uma função para saber o tamanho da nossa lista e facilitar futuros controles através da aplicação cliente.
- Adicione a seguinte função abaixo de
addPet, definida no passo anterior
// Retrieving number of pets
function getNumberOfPets() public view returns (uint) {
return pets.length;
}
Observações:
- A presença do modificador
viewsignifica que essa função não altera o estado de nenhuma variável do nosso contrato ou realiza chamadas internas a outros contratos com esse propósito.
Ao buscar um animal e/ou agir sobre ele, precisamos checar se o índice recebido por parâmetro é compreendido no array, ou seja, se o animal existe. Aproveitaremos então um recurso do Solidity que é o modifier.
- Adicione a definição do modificador
validPetacima da primeira função presente no contrato.
modifier validPet(uint petId) {
require(petId >= 0 && petId < pets.length);
_;
}
Observações:
- O
require(<check>)é utilizado para lançar uma exceção e reverter a execução do código se<check>for falso. - O símbolo
_serve para injetar a execução da função interceptada pelo modificador após a validação, isso será melhor entendido no passo seguinte.
Vamos permitir que nossa aplicação tenha acesso aos dados de um animal inserido.
- Adicione a função descrita abaixo após a função
addPet.
// Retrieving a pet
function getPet(uint petId)
validPet(petId)
public
view
returns(bytes, address)
{
return (pets[petId].name, pets[petId].adopter);
}
Observações:
- Inserimos o modificador
validPetna assinatura do método, passando o índice do animal requerido. Sendo assim, ele agirá como um interceptador da função e continuará sua execução se o animal existir na lista. - Tipos não primários da linguagem, como é o caso da nossa Struct
Pet, não conseguem ser lidos pelo client até o momento, por uma deficiência da tecnologia. Para contornar isso, precisamos retornar o animal em forma de tupla, representada por(pets[petId].name, pets[petId].adopter). Perceba que os tipos dos elementos que compõem a tupla também precisam ser descritos no retorno da funçãoreturns(bytes, address)
Após adicionar um animal e conseguir visualiza-lo externamente, precisamos criar a funcionalidade de adotar.
- Adicione o que segue após a declaração da função
getPet.
// Adopting a pet
function adopt(uint petId)
validPet(petId)
public
returns (uint)
{
Pet storage pet = pets[petId];
pet.adopter = msg.sender;
pets[petId] = pet;
return petId;
}
Observações:
- A palavra-chave
storageindica que essa variável está sendo trabalhada no storage do contrato, ao contrário dememory. - O Solidity possui uma variável global
msgque é preenchida a cada transação. Utilizamos a propriedademsg.senderpara pegarmos o endereço da carteira que realizou essa transação e preenchermos como o adotante do animal em questão.
Agora que já desenvolvemos o contrato, os próximos passos são compilar e publicar na nossa rede local.
A partir desse momento utilizaremos o Truffle, que possui um console de desenvolvimento embutido com funções que nos auxiliam nos testes, compilação e publicação.
O Solidity é uma linguagem compilada, o que significa que temos que transformar nosso contrato em bytecodes para que EVM (Máquina virtual Ethereum) consiga executa-lo.
- Navegue até a pasta raiz do projeto e digite o comando
truffle compile
O resultado deve ser parecido com o que segue
Compiling ./contracts/Migrations.sol...
Compiling ./contracts/Adoption.sol...
Writing artifacts to ./build/contracts
Após compilarmos nosso contrato, resta agora publica-lo na blockchain!
- Navegue até a pasta
migrations/, você deve ver um arquivo JavaScript1_initial_migration.js - Crie um arquivo de nome
2_deploy_contracts.jsnesse mesmo diretório. - Adicione o conteúdo que segue no arquivo criado anteriormente
var Adoption = artifacts.require("Adoption");
module.exports = function(deployer) {
deployer.deploy(Adoption);
};
- Antes de publicarmos nosso contrato, precisamos que a nossa blockchain local esteja rodando. Como dito na configuração do ambiente, utilizaremos a Ganache como blockchain de desenvolvimento. Certifique-se que ela está instalada em sua máquina e dê um clique duplo em seu ícone. Após isso, ela iniciará e criará nossa rede local na porta 7545.
- Voltando ao terminal, digite o comando
truffle migrate --reset
O resultado deve ser parecido com o que segue
Using network 'development'.
Running migration: 1_initial_migration.js
Deploying Migrations...
... 0xcc1a5aea7c0a8257ba3ae366b83af2d257d73a5772e84393b0576065bf24aedf
Migrations: 0x8cdaf0cd259887258bc13a92c0a6da92698644c0
Saving successful migration to network...
... 0xd7bc86d31bee32fa3988f1c1eabce403a1b5d570340a3a9cdba53a472ee8c956
Saving artifacts...
Running migration: 2_deploy_contracts.js
Deploying Adoption...
... 0x43b6a6888c90c38568d4f9ea494b9e2a22f55e506a8197938fb1bb6e5eaa5d34
Adoption: 0x345ca3e014aaf5dca488057592ee47305d9b3e10
Saving successful migration to network...
... 0xf36163615f41ef7ed8f4a8f192149a0bf633fe1a2398ce001bf44c43dc7bdda0
Saving artifacts...
Ao lado do nome de cada contrato temos o endereço dele na rede.
- Na Ganache, note que o estado da blockchain alterou. Agora a rede mostra que o bloco atual é o 4, e não mais o 0. Além disso, verificamos que o saldo anterior de 100 Ethers foi reduzido, devido ao custo para realizar transações na rede (GAS).
Agora que temos nosso contrato disponível na blockchain, é o momento de interagirmos com ele.
O Truffle é bastante flexível no que se refere aos testes de smart contracts. O desenvolvedor é livre para criar os testes em JavaScript ou na própria linguagem Solidity. Nesse tutorial escreveremos os testes em Solidity.
-
Navegue até a pasta
test/e crie um arquivo de nomeTestAdoption.sol -
Adicione o código abaixo no arquivo criado
pragma solidity ^0.4.17;
import "truffle/Assert.sol";
import "truffle/DeployedAddresses.sol";
import "./ThrowProxy.sol";
import "../contracts/Adoption.sol";
contract TestAdoption {
Adoption adoption = Adoption(DeployedAddresses.Adoption());
ThrowProxy throwProxy = new ThrowProxy(address(adoption));
Adoption throwableAdoption = Adoption(address(throwProxy));
}
Assim, iniciamos o contrato com quatro importantes importações:
Assert.sol: Provê funções para testes de igualdade, desigualdade ou retornos errôneos. Aqui você pode consultar a lista completa de funções para teste incluidas no Truffle.DeployedAddresses.sol: Quando rodamos os testes, o Truffle publica temporariamente os contratos na blockchain. Esse contrato é responsável por armazenar os endereços desses contratos no ambiente de teste.ThrowProxy.sol: Por enquanto não conseguimos capturar exceções lançadas na linguagem Solidity. Entretanto, utilizando o contrato ThrowProxy, já fornecido na pastatest/, conseguimos verificar quando uma função chamada através dele foi executada ou não. Para um melhor entendimento dessa solução em outro momento, acesse esse tutorialAdoption.sol: O Contrato que será testado.
No escopo do contrato TestAdoption utilizaremos a instância adoption para testarmos o sucesso das funções e throwableAdoption para testarmos as falhas.
Observação:
- O caminho
trufle/<contract>.solrefere-se à dependência instalada no momento de configuração do ambiente, portanto, não crie uma pastatruffle/dentro do diretório de testestest/
- Adicione o código que segue após as declarações iniciais do contrato
TestAdoption
// Testing the addPet() function
function testUserCanAddPet() public {
uint returnedId = adoption.addPet("Dog Test");
uint expected = 0;
Assert.equal(returnedId, expected, "pet ID 0 should be recorded.");
}
Observações:
- Nesse teste criamos um animal de nome "Dog Test"
- Então, esperamos que esse novo animal seja o primeiro da lista.
- Adicione o código que segue ao final do contrato
TestAdoption
// Testing the getNumberOfPets() function
function testUserCanGetTheNumberOfPets () public {
uint expectedPetLength = 1;
uint petLength = adoption.getNumberOfPets();
Assert.equal(petLength, expectedPetLength, "Number of pets should be 1.");
}
Observações:
- Nesse teste buscamos o número de animais existentes para adoção.
- Então, esperamos que só exista um animal na lista.
- Adicione o código que segue ao final do contrato
TestAdoptionpara o teste de busca de um animal válido.
// Testing the getPet() function
function testUserCanGetPet() public {
// Expected adopter is null
address expectedAdopter = address(0);
var (,adopter) = adoption.getPet(0);
Assert.equal(adopter, expectedAdopter, "Adopter of pet ID 0 should be empty.");
}
Observações:
- Nesse teste buscamos o primeiro animal da lista.
- Então, esperamos que esse animal ainda não tenha sido adotado.
- Podemos fazer referências a tuplas omitindo variáveis que não desejamos, como em
var (,adopter) = adoption.getPet(0);
- Adicione o código que segue ao final do contrato
TestAdoptionpara o teste de busca de um animal inválido.
// Testing invalid retrieval of a pet
function testUserCannotGetAnInvalidPet() public {
throwableAdoption.getPet(1);
throwProxy.shouldThrow();
}
Observações:
- Nesse teste buscamos o segundo animal da lista.
- Então, esperamos que essa função dispare uma exceção pois esse animal não existe.
- Adicione o código que segue ao final do contrato
TestAdoptionpara o teste de adoção de um animal válido.
// Testing the adopt() function
function testUserCanAdoptPet() public {
uint returnedId = adoption.adopt(0);
uint expectedId = 0;
address expectedAdopter = this;
Assert.equal(returnedId, expectedId, "Adoption of pet ID 0 should be recorded.");
var (,adopter) = adoption.getPet(0);
Assert.equal(adopter, expectedAdopter, "Adopter of pet ID 0 should be the TestAdoption contract.");
}
Observações:
- Nesse teste adotamos o primeiro animal da lista.
- Então, esperamos que o animal adotado ao final do processo seja o mesmo.
- Quando um contrato executa uma chamada de alto nível a outro contrato, a variável global
msgtambém é alterada, ou seja, omsg.senderdesse teste é o endereço do próprio contratoTestAdoption. Isso torna oTestAdoptiono adotante do animal.
- Adicione o código que segue ao final do contrato
TestAdoptionpara o teste de adoção de um animal inválido.
// Testing invalid adoption
function testUserCannotAdoptAnInvalidPet() public {
throwableAdoption.adopt(1);
throwProxy.shouldThrow();
}
Observações:
- Nesse teste adotamos o segundo animal da lista.
- Então, esperamos que essa função dispare uma exceção pois esse animal não existe.
Semelhante aos procedimentos compile e migrate, utilizaremos o comando
test fornecido pelo Truffle para rodarmos os testes.
- Navegue até a pasta raiz do projeto e execute
truffle test
- Se todos os testes passarem, você verá um resultado similar ao que segue
Using network 'development'.
Compiling ./contracts/Adoption.sol...
Compiling ./test/TestAdoption.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...
TestAdoption
✓ testUserCanAddPet (50ms)
✓ testUserCanGetTheNumberOfPets (50ms)
✓ testUserCanGetPet (50ms)
✓ testUserCanAdoptPet (50ms)
✓ testUserCannotGetAnInvalidPet (50ms)
✓ testUserCannotAdoptAnInvalidPet (50ms)
6 passing (300ms)
Agora que nós criamos o smart contract, fizemos o deploy para nossa blockchain local e interagimos com ele via console, é hora de criar uma UI para que os donos de petshop possam utilizá-lo.
Junto com os smart contracts, nesse repositório, há uma pasta src/ com o código para o front-end.
O front-end não usa nenhum sistema de build (webpack. grunt, etc) e nenhum framework ou biblioteca javascript (Angular, React, Vue, etc) para ser o mais simples possível para começar. A estrutura do app já está disponível nessa pasta; na próxima etapa do tutorial nós vamos preencher as funções relevantes para interagir com o Ethereum. Dessa forma, você pode pegar esse conhecimento e aplicar da forma como preferir no seu workflow.
- Abra
src/js/app.jsno seu editor de texto. - Leia o arquivo. Note que há um objeto global
Apppara gerenciar a aplicação, carregar os dados do petshot na funçãoinit()e chamar a funçãoinitWeb3(). A biblioteca JavaScript web3 interage com a blockchain do Ethereum. Ela pode acessar carteiras, assinar e enviar transações, interagir com os smart contracts, etc. - Remova o comentário de dentro de
initWeb3()e cole o seguinte código:
// Is there an injected web3 instance?
if (typeof web3 !== 'undefined') {
App.web3Provider = web3.currentProvider;
} else {
// If no injected web3 instance is detected, fall back to Ganache
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
}
App.web3 = new Web3(App.web3Provider);
return App.initContract();Observações:
- Primeiro, nós checamos se há alguma instância do web3 ativa. Browsers Ethereum como o Mist ou a extensão MetaMask injetam sua própria instância da web3. Se há alguma instância na
window, nós pegamos o seuprovidere usamos para criar a nossa instância da web3. - Se nenhuma instância da web3 está presente, nós criamos a nossa usando o nosso provider local.
Agora que nós podemos interagir com o Ethereum via web3, nós precisamos instanciar os nossos smart contracts para que o web3 saiba encontrá-lo e utilizá-lo. Nesse tutorial, estamos utilizando uma biblioteca do Truffle chamada truffle-contract. Ela mantém as informações do contrato sincronizadas com as migrations, assim você não precisa alterar os endereços dos contratos manualmente.
Nessa etapa, é interessante destacar como o web3 consegue entender o smart contract e se comunicar com ele: ao compilar o código solidity um arquivo .json é criado. Esse arquivo é chamado de ABI (Application Binary Interface). Ele contém metadados do contrato, como as suas variáveis, sua funções e os respectivos tipos e retornos. Dessa forma, se o seu contrato possui a seguinte função:
function sum(uint x, uint y) public returns (uint) {
return x + y;
}Através da ABI, o web3 vai entender que o contrato possui uma função sum que deve receber dois inteiros por parâmetro e retornar outro inteiro:
myContractInstance.sum.call(x, y, (error, result) => {
assert(!error);
assert(result).equals(x + y);
});Prosseguindo com o tutorial:
- Ainda no arquivo
src/js/app.js, remova o bloco de comentários de dentro da funçãoinitContract()e inclua o seguinte trecho de código:
$.getJSON('Adoption.json', function(data) {
// Get the necessary contract artifact file and instantiate it with truffle-contract
var AdoptionArtifact = data;
App.contracts.Adoption = TruffleContract(AdoptionArtifact);
// Set the provider for our contract
App.contracts.Adoption.setProvider(App.web3Provider);
// Use our contract to retrieve and mark the adopted pets
return App.loadPets();
});
return App.bindEvents();Observações:
- Primeiro pegamos a ABI do contrato.
- Após recebermos o JSON no callback, nós o passamos para
TruffleContract(). Isso irá criar a instância do contrato com a qual podemos interagir. - Com o nosso contrato instanciado, nós setamos o seu web3 provider usando o
App.web3Providerque havíamos iniciado quando configuramos o web3. - Depois nós chamamos a função
loadPets()para carregar os pets que ja foram cadastrados anteriormente. Nós encapsulamos isso em uma função separada já que vamos precisar de atualizar a UI toda vez que fizermos alguma modificação na blockchain.
- Ainda em
src/js/app.js, remova o bloco de comentário emloadPetse altere para:
var adoptionInstance;
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
return adoptionInstance.getNumberOfPets.call();
}).then(function(res) {
var numberOfPets = res.toNumber(); // number of pets is a BigNumber
if (numberOfPets > 0) {
$('#add-one').hide();
$('.btn-addPet').show();
var promises = [];
for(i = 0; i < numberOfPets; i++) {
promises.push(adoptionInstance.getPet.call(i))
}
Promise.all(promises).then(function(result) {
var petsRow = $('#petsRow');
var petTemplate = $('#petTemplate');
petsRow.empty();
for(i = 0; i < numberOfPets; i++) {
petTemplate.find('.panel-title').text(App.web3.toAscii(result[i][0]));
petTemplate.find('img').attr('src', App.images[Math.floor(Math.random() * App.images.length)]);
petTemplate.find('.btn-adopt').attr('data-id', i);
result[i][1] != '0x0000000000000000000000000000000000000000' ?
petTemplate.find('.btn-adopt').text('Adopted').attr('disabled', true) :
petTemplate.find('.btn-adopt').text('Adopt').attr('disabled', false);
petsRow.append(petTemplate.html());
}
});
} else {
$('.btn-addPet').hide();
$('#add-one').show();
}
}).catch(function(err) {
console.log(err.message);
});Observações:
- Nós acessamos o contrato
Adoptionque foi feito deploy em nossa blockchain local e chamamosgetNumberOfPetsnessa instância. - Primeiro, nós declaramos a variável
adoptionInstancefora da chamada do smart contract, para que possamos acessar a instância depois de recuperá-la da blockchain. - Usar a função
call()nos permite ler os dados da blockchain sem alterar o seu estado, ou seja, sem enviar uma "transação completa". Dessa forma, não gastamos gas. - Após chamar
getNumberOfPets(), nós fazemos um loop e chamamos a funçãogetPet()para buscar os dados de cada pet. - Por padrão, os valores são instanciados com um endereço vazio no Solidity, portanto quando o valor retornado é um endereço diferente de
0x0000000000000000000000000000000000000000, sabemos que há um endereço e portanto o pet foi adotado.
Inicialmente, o nosso contrato não possui nenhum pet cadastrado, portanto precisamos adicionar. Para isso vamos usar a função addPet do contrato.
- Ainda em
src/js/app.js, substitua o bloco de comentário pelo seguinte código:
event.stopPropagation();
var petName = $('#petName').val();
var adoptionInstance;
App.web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}
var account = accounts[0];
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
return adoptionInstance.addPet(petName, { from: account });
}).then(function(result) {
$('#addPetModal').modal('hide');
setTimeout(function() {
return App.loadPets();
}, 3000);
}).catch(function(err) {
console.log(err.message);
});
});Observações:
- Essa operação irá escrever no nosso smart contract, logo é necessário enviar uma transação completa e assinada. Para isso precisamos da chave privada e de Ether para pagar o gas. Com o MetaMask, não precisamos lidar diretamente com a chave privada do usuário, basta informar qual o endereço a ser utilizado pela transação e internamente a extensão cuidará da assinatura.
web3.eth.getAccountsretorna as contas presentes no web3. Como dito acima, o MetaMask seta automaticamente a conta selecionada.adoptionInstance.addPet(petName, { from: account })chama a função do smart contract, assinando com o endereçofrom.- Observe que no retorno, utilizamos um
setTimeout. Ele foi utilizado com propósito didático para simular o tempo de resposta da blockchain.
- Novamente em
src/js/app.js, substitua o bloco de comentário pelo seguinte código:
event.preventDefault();
var petId = parseInt($(event.target).data('id'));
App.web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}
var account = accounts[0];
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
return adoptionInstance.adopt(petId, {from: account});
}).then(function(result) {
setTimeout(function() {
return App.loadPets();
}, 2000);
}).catch(function(err) {
console.log(err.message);
});
});Ok! O seu frontend já está pronto para ser utilizado.
Agora estmoas prontos para usar o dapp!
O jeito mais fácil de interagir com o nosso dapp no browser é utilizando a extensão MetaMask.
- Instale o MetaMask no seu browser
- Após finalizar a instalação, você verá o ícone da raposa próximo a barra de endereço. Clique nele e você verá essa tela:
- Clique em
Acceptpara aceitar a Privacy Notice. - Após isso você verá os Termos de Uso. Leia-os, role até o final e clique em
Accept.
- Agora você verá a tela inicial o MetaMask. Clique em Import Existing DEN.
- Na caixa de texto
Wallet Seed, coloque o mnemônico que é mostrado no ganache
candy maple cake sugar pudding cream honey rich smooth crumble sweet treat
WARNING:
Não use esse mnemônico na mainnet. Se você enviar ETH para qualquer conta criada com esse mnemônico você provavelmente irá perder tudo!
Digite uma senha abaixo e clique em OK.
- Agora precisamos conectar o MetaMask na blockchain do Ganache. Clique no menu que mostra
Main Networke selecione Custom RPC.
- Na caixa de texto chamada "New RPC URL" digite
http://127.0.0.1:7545e clique em Save.
O nome da network no topo irá mudar para "Private Network".
- Clique na seta para retornar para a página de "Accounts".
Cada carteira criada com o comando Truffle Develop possui 100 ether. Você irá perceber um pouco menos do que isso na primeira conta, porque para fazer o deploy do contrato e rodar os testes, um pouco de ether foi gasto.
A configuração está completa agora!
O repositório está configurado com o pacote lite-server que irá iniciar um servidor HTTP estático em localhost:3000.
Para iniciá-lo utilize o comando npm run dev.
- Rode o servidor local com
npm run dev.
O servior irá iniciar e abrir automaticamente uma nova tab no seu browser com o dapp.
-
Clique em add one, coloque o nome do novo pet e clique no botão Add pet
-
Automaticamente, o MetaMask irá abrir um popup contendo informações sobre a transação a ser feita. Clique em Submit para aprovar a transação.
- Após isso, você verá a transação listada na sua conta do MetaMask
Pronto! Agora que você viu como tudo funciona na prática, vamos propor um desafio.
Agora que você já entendeu a dinâmica do desenvolvimento para Ethereum, antes de atualizar o seu LinkedIn, vamos aprofundar um pouco mais o conhecimento com alguns desafios.
Implemente a opção de adicionar uma doação opcional ao adotar o pet.
Cuidar de animais não é barato... há gastos com veterinário, comida, etc. Por isso, seria interessante adicionar a opção de incluir um valor em Ether ao realizar a adoção.
Funções envolvendo transferência de Ether são muito importantes, por isso, tente criar essa nova funcionalidade!
Dica: estude o modificador
payable
Implemente a funcionalidade de aceitar/recusar a adoção de um pet.
Essa atividade é um pouco mais desafiadora! Será necessário implementar um controle de estados para cada pet.
O fluxo deve ser o seguinte:
- O usuário vai solicitar a adoção e incluir um valor em Ether (pode ser 0)
- O dono do petshop vai aceitar a adoção e retirar o valor em Ether ou recusar a adoção e devolver o valor.
Observações:
- Um pet não pode ser adotado duas vezes.
- Somente o dono do petshop pode adicionar pet e aceitar/recusar as adoções.
Dica: estude a definição de uma lista enumerável
enum
Implemente um log de adoções no smart contract. Toda vez que um pet for adotado emita um evento que poderá ser lido no frontend.
Bônus:
- Implemente uma página de log no frontend.
Dica: estude a criação de um
event
Rinkeby Address: 0x1d2b1082226d079e18bbf4beb5ee4c75383db041
- Crie um pet com o seu nome no contrato da Rinkeby.