Smart Contracts #5: Criando e publicando o dApp

Este é o quinto e último artigo de uma série titulada “Smart Contracts”, onde irei tratar de smart contracts com foco na plataforma Ethereum. Com esta série, meu objetivo é trazer conteúdo completo e de maneira compreensiva sobre o tema, que tratarei de forma teórica e prática. Um novo artigo será publicado toda terça-feira.

Caso você tenha interesse em aprender mais e tenha um conhecimento razoável da língua inglesa, toda quarta-feira publico também um artigo tratando de uma definição importante do mundo da tecnologia blockchain, em uma série titulada “Blockchain definition of the week”.

Artigos anteriores:

Smart Contracts #1: Introdução

Smart Contracts #2: Construindo contratos

Smart Contracts #3: Contratos mais avançados

Smart Contracts #4: Publicando e interagindo com contratos


Hoje vamos desenvolver nosso dApp, que será dividido em partes. Primeiramente, vamos usar HTML e CSS para fazer a UI, e depois utilizaremos JQuery e web3js para integrar a interface com o smart contract.

Mas antes de começar, quero introduzir um conceito:

Web3js

Coleção de libraries (bibliotecas) que permitem a interação com um nó da rede Ethereum, usando uma conexão HTTP ou IPC.

-

Para limitar o escopo desta série, eu não irei repassar o código HTML/CSS linha por linha. Iremos utilizar uma interface bem básica (feia), e aqueles com interesse ou conhecimento além do conteúdo poderão customizar sua interface para fazer um dApp mais complexo.

#1: IDE

Para começar, vamos precisar utilizar alguma IDE (Integrated Development Interface) para o código, ou seja, uma aplicação onde podemos programar. Até agora utilizamos apenas o Remix, mas para construir o dApp, vamos precisar de outra IDE. Caso você ainda não tenha nenhuma instalada, eu recomendo o Visual Studio:

O produto “Visual Studio Code” é gratuito e possui todas as funcionalidades que precisamos para construir nosso dApp.

#2: HTML/CSS

Abaixo vou colocar o código HTML/CSS referente à interface do dApp. Você pode simplesmente copiar e colar o código no seu editor. Por questões de simplicidade, coloquei o CSS no mesmo arquivo que o código HTML, dentro das tags <style> e </style> .

Salve o arquivo como “index.html”. O arquivo se refere à primeira — e também única — página do nosso website.

#3: Link de conexão com um nó da rede

Para podermos interagir com nosso contrato, precisamos estar conectados com um nó, que é a porta de entrada para a rede do Ethereum. Para fazer isso, vamos utilizar o website Infura.

Você vai precisar criar uma conta e seguir as instruções para criar um projeto, conseguir uma “API Key”, e então você vai ter acesso à uma URL que permite que você conecte com um nó. Assim como da última vez, vamos utilizar a rede Ropsten. Guarde essa URL, vamos precisar dela para os próximos passos.

#4: JavaScript/JQuery

Ok, agora estamos prontos para começar a integração do contrato com a interface. Veja abaixo o código:

Todo o código dentro das tags <script> e </script> deve ser copiado e colado entre as mesmas tags do código da interface. Os links dentro das tags <script src> determinam a importação das bibliotecas necessárias para o funcionamento do nosso código, que são web3js e jQuery. Também cole a URL que foi adquirida no passo #3 onde estiver escrito “SUA URL DO NÓ AQUI”. O código completo estará disponível abaixo, caso hajam dúvidas.

Com o código acima, primeiramente definimos se há uma injeção de web3 por parte do browser, ou seja, se o usuário está usando algum programa que permite a interação com a blockchain, por exemplo, o MetaMask. Depois, definimos que o primeiro endereço injetado pelo programa deve ser usado como o endereço para chamadas de funções do dApp. Com isso, ao mudar de “conta” no MetaMask, você precisará recarregar a página para que o dApp reconheça o novo endereço.

Ok, vamos então às partes que nos interessam mais:

  • var HodlContract = web3.eth.contract(SUA ABI AQUI);

Para instruir o browser como interagir com o contrato, é necessário especificar a ABI do smart contract no código. Quando publicarmos nosso contrato, vamos colar a ABI dele dentro dos parênteses.

  • window.alert(‘Sua mensagem aqui.’);

Essa linha é desnecessária, mas permite que você coloque uma mensagem que aparecerá como alerta para aqueles que acessarem o site por meio de uma pop-up. Você pode colocar algo como: “Website para uso exclusivo de teste” ou remover essa linha de código caso ela não tenha propósito para você.

  • var Hodl = HodlContract.at(‘ENDEREÇO DO CONTRATO’);

Define a variável Hodl, que indica o endereço do nosso smart contract, que deve ser incluído dentro dos parênteses e aspas quando publicado.

  • console.log(Hodl);

O console vai indicar qual é o endereço do contrato com o qual o usuário está interagindo. Isto não estará visível na página, mas pode ser facilmente acessado por qualquer um.

  • address = account

Define o endereço que vamos utilizar.

  • $(“#button1”).click(function(web3) { } )

Define o que deve acontecer quando o botão identificado por “button1” quando clicado, que é uma transação com especificações definidas.

var tx = Hodl.depositarInvestimento({   
from: address,
gas: "300000",
to: "ENDEREÇO DO CONTRATO",
value: 1000000000000000000*($("#valor")[0].value),
data: ""

from: address determina o endereço que assina a transação, que no caso é o endereço do usuário do dApp.

gas: "300000", define o gas limit da transação. Não é necessário estabelecer este limite, mas isso contribui para uma UX melhor, já que o usuário final não precisa se preocupar com isso.

to: "ENDEREÇO DO CONTRATO", determina o destino da transação, que no nosso caso é o contrato.

value: 1000000000000000000*($("#valor")[0].value), determina o valor da transação, que deve ser definido na interface, e é capturado pelo identificador “valor”. A multiplicação serve para converter o valor de wei para Ether.

data: "" este campo pode ser utilizado para incluir metadados na transação.

Também temos no código as linhas abaixo, que definem que caso haja algum erro, a função irá retornar o erro, e o hash da transação, e caso contrário, apenas o hash da transação.

}, function(err, transactionHash) {  if (!err)                              
console.log(transactionHash);
  • $(“#button2”).click(function(web3) { } )

Funciona quase da mesma maneira que o código para o primeiro botão, com algumas modificações.

No nosso smart contract, a função retirarInvestimento possui um parâmetro do tipo string, e esse parâmetro precisa ser repassado no nosso front-end.

Fazemos isso da seguinte maneira:

var tx = Hodl.retirarInvestimento("\"" + $("#senha")[0].value + "\"", {

Acima, repassamos o parâmetro necessário, e a cadeia de caracteres virá do input identificado por “senha”, que terá aspas duplas adicionadas, para que o smart contract consiga ler a informação.

definirSenha

Assim como mencionado anteriormente, imaginando que estamos criando um dApp que fosse realmente ser usado, não estamos oferecendo uma maneira de definir a senha no dApp, e o usuário teria que usar a MyEtherWallet para essa finalidade, trazendo mais segurança. Assim, para acessar os fundos, alguém precisaria ter acesso ao endereço “dono” do contrato, e ter um entendimento mais avançado de blockchain para descobrir a senha ou mudá-la. Porém, caso você queira incluir essa função no seu dApp, basta adicionar as seguintes linhas de código:

No código HTML:

No código JavaScript:

Código completo

#5: Publicando o smart contract

Utilizando os métodos ensinados no artigo anterior, publique seu smart contract, e então modifique o código para se referir ao contrato. Ou seja, copie e cole a ABI e endereço do contrato nos campos designados. Verifique também que os nomes das funções no código JavaScript são os mesmos que você utilizou no seu código Solidity (ex: depositarInvestimento, retirarInvestimento).

#6: Publicando o dApp

IMPORTANTE: O possível uso deste dApp para guardar investimentos reais é responsabilidade do usuário. Este dApp foi criado para efeito didático, e seu código não foi auditado nem testado na mainnet. Não é recomendada a utilização do mesmo para fins que não de teste, e eu não me responsabilizo por perda de Ether causada pelo seu uso. É recomendado que o usuário estude o tópico mais à fundo antes de aplicar os conhecimentos passados por esta série de artigos em aplicações de uso real.

Como nosso objetivo com essa série é criar, publicar e utilizar um dApp funcional, vamos direto ao ponto.

Existem maneiras de testar o dApp apenas dentro da sua máquina, usando por exemplo o ganache-cli. Porém, vamos publicar nosso dApp diretamente em um website e fazer os ajustes necessários depois.

#6.1: Hosting

Precisamos então de um site para fazer o hosting do nosso site, e um domínio para o mesmo. Não precisamos de muitas funcionalidades, então as opções gratuitas disponíveis são o suficiente. Uma opção limitada, mas que serve muito bem para nosso propósito é a InfinityFree:

Faça seu registro e siga os passos para criar uma conta e conseguir um domínio gratuito.

#6.2: FTP

Também vamos precisar de um software para utilizar FTP (File Transfer Protocol), que é a maneira de enviar os arquivos necessários para nosso servidor de hosting. Existem algumas opções gratuitas, como:

Escolha a opção melhor para você e faça o download do software.

#6.3: Upload de arquivos via FTP

Acesse sua conta do hosting e busque as informações necessárias para FTP, como usuário, senha, port e hostname. Importante: Seu usuário e senha não são os mesmos que você utiliza para fazer login no site!

Copie e cole essa informação nos campos designados no seu software de FTP e estabeleça uma conexão. Se você estiver utilizando o InfinityFree, é necessário entrar no seu cPanel (Control Panel) para isso funcionar.

Agora, faça upload do seu arquivo ‘index.html’ na pasta designada (ex: htdocs) usando FTP.

Pronto! Se tudo foi executado como deveria, seu site deveria estar pronto e funcionando.

#7: Testando o dApp

Você pode agora acessar a URL do seu dApp e testá-lo! Lembre-se de desbloquear seu MetaMask e também de escolher a rede certa. Para mudar de conta no MetaMask e utilizar a aplicação, lembre-se de recarregar a página.

Para fazer ajustes no dApp, basta editar o arquivo no seu computador, salvar e substituir o arquivo anterior no servidor usando o software FTP. Caso você queira fazer um website mais bonito, basta editar o HTML e CSS. Se você não possuir experiência com front-end, uma opção é experimentar templates gratuitos e implementá-los no site.

Para entender melhor o que está acontecendo, ou se o dApp está com algum erro, clique no botão direito do mouse (Mac: control + clique) e clique em ‘Inspecionar’, depois ‘Console’. O console vai mostrar o que está acontecendo por trás do dApp, como transações, erros, etc.

E agora?

Agora você possui as habilidades necessárias para começar a construir aplicações descentralizadas. Com treino, você poderá construir aplicações mais complexas.

Para acessar todo o código tratado durante esta série de artigos, clique no link abaixo:

Este é o artigo final da série “Smart Contracts”, porém pretendo continuar a publicação de conteúdo técnico regular por meio do Medium. Feedback é sempre bem-vindo, e estou também aberto à sugestões de tópicos para próximos artigos.

Gostaria de agradecer:

  • Victor Silveira, pela revisão dos artigos e feedback.
  • Narcélio Filho, pelo encorajamento e recomendação do uso de gists para exemplos utilizando código, ao invés dos blocos de código do Medium.
  • Rodrigo Ferreira, por me ajudar na passagem de parâmetros de Solidity para jQuery, quando criei meu primeiro dApp.
  • Daniel Martins, pelos comentários referentes à indentação do código.
  • Toda a comunidade, pelo suporte e feedback.

Agradeço também aqueles que puderem compartilhar esta série de artigos, ou deixar algumas palmas.

Para perguntas referentes ao conteúdo da série, por favor use os comentários abaixo.

Contato por email: yakko@blockchainbh.com.br .

http://javascript-html5-tutorial.com/wp-contentgalleryfun-memes/coders-gonna-code-hell-yeah.png