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