Esse artigo é uma tradução de Annie Azaña feita por Felipe Gueller. Você pode encontrar o artigo original aqui.
Se você ultimamente tem prestado a atenção no universo Blockchain, sabe que no momento a Ethereum é o centro das atenções.
A Ethereum não é uma reserva de valor como o Bitcoin; é uma rede computacional descentralizada e distribuída, rodando em um conjunto de nós públicos. Os desenvolvedores frontend podem imaginá-la como um banco de dados público, sendo capaz de ser acessada por uma API.
Você pode criar aplicações frontend para web totalmente funcionais com autenticação integrada, funções lambda e armazenamento, apenas utilizando a frontend da Ethereum como seu backend! É como uma versão pública e distribuída da AWS ou Google Cloud. A API mais popular para trabalhar com a Ethereum hoje é fornecida pela Metamask, uma extensão do navegador.
Na Crowdbotics, ajudamos as pessoas a criar software blockchain, Dapps e contratos inteligentes — entre outras coisas — e podemos ver em primeira mão todas as maneiras interessantes pelas quais as pessoas estão aplicando a tecnologia blockchain a problemas do mundo real.
Nosso objetivo na Crowdbotics é ajudar todos os tipos de pessoas a construir aplicativos de software complexos, de maneira melhor e mais rápida. É por isso que estamos fornecendo este guia completo sobre como construir DApps Ethereum com MetaMask.
Nós iremos cobrir os seguintes tópicos:
- O que é MetaMask?
- Como obter a MetaMask
- Financiando a MetaMask com Ether
- O que é blockchain?
- O que é uma blockchain Ethereum?
- Aplicativos descentralizados (DApps)
- O ecossistema Ethereum
- Web3 - A API Javascript da Ethereum
- Detectando a MetaMask e lidando com possíveis estados de erro
- Evitando condições de corrida com onLoad()
- Ouvintes de eventos VS Polling da interface
O que é a MetaMask?
A MetaMask é uma extensão do navegador que permite aplicações web interagirem com a blockchain da Ethereum. Para os usuários, funciona como uma carteira de Ethereum, permitindo que eles armazenem e enviem qualquer padrão de token compatível com a Ethereum (os chamados tokens ERC-20).
Para os desenvolvedores, ela permite projetar e executar DApps da Ethereum diretamente em seu navegador, sem que seja necessário executar um nó completo da Ethereum (que é o que os desenvolvedores tiveram que fazer antes da Metamask estar disponível). A MetaMask conversa com a blockchain da Ethereum para seu aplicativo da web.
A MetaMask inclui um processo seguro de autenticação, fornecendo uma interface de usuário para gerenciar suas identidades em diferentes sites e assinar transações de blockchain. É fácil de usar em quase todos os navegadores.
Obtendo a MetaMask
Para usar a MetaMask, você precisará instalá-la em seu navegador. Você pode escolher entre Google Chrome, Mozilla Firefox, Opera ou Brave. No nosso caso, iremos usar o navegador Google Chrome. Como primeiro passo, nós precisamos acessar o link na loja de extensões do Google Chrome e assim podemos baixar a extensão da MetaMask. Uma vez que você está na loja web do Chrome, apenas clique em “Adicionar ao Chrome” para adicionar a extensão no seu navegador. Após isso clique em “Adicionar extensão” e imediatamente você verá o ícone da MetaMask no canto direito da barra de navegação do Google Chrome.
Quando a Metamask é instalada no navegador, você verá o ícone no mesmo nível da barra de endereço do seu navegador. Você deve selecionar o ícone e proceder com o processo de login.
Antes de fazer login, você deve aceitar os Termos de uso, Aviso de privacidade e Aviso de phishing. Role dentro do painel para ter o botão aceitar disponível. Ao aceitar cada um deles, a janela de login da MetaMask aparecerá.
Financiando a MetaMask com Ether
Agora, iremos aprender como obter uns Ethers de teste para nossa MetaMask. Um Ether verdadeiro custa dinheiro e deve ser comprado em algum site, como por exemplo o Coinbase. Mas para testes, o Ether é disponibilizado gratuitamente. Primeiro, você precisa acessar a sua conta da MetaMask, e então você deve trocar a sua rede clicando em “Main Network”, que está localizada no lado esquerdo do menu principal, e assim finalmente selecionar a rede “Ropsten Test Network”.
Certifique-se de verificar se você está na rede correta. O próximo passo é clicar no botão de comprar. Deverá aparecer um painel chamado “Compre ETH”, após isso clique sobre o botão “Ropsten Test Faucet”.
Quando você clicar sobre o botão “Ropsten Test Faucet”, você será redirecionado para a seguinte página: https://faucet.metamask.io/. Lá você poderá clicar no botão verde “request 1 ether from faucet”, então espere alguns segundos e você receberá o endereço da transação, que na verdade é uma confirmação. Agora clique no ícone da MetaMask e verifique seu 1 ETH para fins de teste.
O que é a Blockchain?
Existem várias definições sobre “Blockchain”. Vamos compartilhar apenas uma:
A tecnologia Blockchain significa: “tecnologia de livro-razão distribuído que usa um livro-razão distribuído, descentralizado, compartilhado e replicado, o qual pode ser público ou privado, permissionado ou não permissionado, ou conduzido por criptoeconomia tokenizada ou sem tokens. Os dados no livro-razão são protegidos com criptografia, é imutável e auditável e fornece uma verdade sem censura”.
Em uma blockchain, os dados são descentralizados e são distribuídos através de todos os dispositivos conectados na blockchain. É um ponto no qual qualquer pessoa tem a possibilidade de configurar um nó que replica os dados necessários para que todos os nós cheguem a um acordo, e sejam compensados por usuários e desenvolvedores de aplicativos. Isso permite que os dados do usuário permaneçam privados e os aplicativos sejam descentralizados.
O que são Aplicativos Descentralizados (DApps)?
Aplicativos descentralizados são similares aos aplicativos web convencionais, mas eles são executados em uma blockchain. Enquanto aplicativos web frontend usam APIs para se comunicarem com Servidores e Bancos de Dados, os DApps utilizam interfaces de contratos inteligentes para interagir com a blockchain.
O código de um DApp é um código do lado do cliente (normalmente JavaScript), executado em um navegador.
O backend de um DApp é um ou mais de um contrato inteligente implantado em uma blockchain.
Normalmente, para usar um contrato inteligente, você paga com tokens criptográficos como ETH em vez de (por exemplo) créditos da AWS ou do Google Cloud.
O ecossistema Ethereum
Plataformas descentralizadas que executam contratos inteligentes.
Fornece aos desenvolvedores uma camada fundamental: uma blockchain com uma linguagem de programação Turing-completa integrada.
Funciona com protocolos de rede ponto a ponto, onde cada banco de dados da blockchain é mantido e gerenciado por vários nós.
Web3 - A API Javascript da Ethereum
Uma coleção de bibliotecas que permitem você interagir com um nó ethereum local ou remoto, usando uma conexão HTTP ou IPC.
Usada para se comunicar com um nó Ethereum ou realizar transações com um contrato inteligente implantado na blockchain, diretamente de uma aplicação JavaScript ou Web.
A extensão da MetaMask expõe a API da web3 por um objeto web3 injetado, que você pode acessar via JavaScript e não suporta a maioria dos métodos síncronos de APIs da web3.
Gerenciando estados de erro na MetaMask
Usaremos a biblioteca web3 JS e suas estruturas condicionais para gerenciar os estados de erro. Abordaremos nos seguintes 4 casos de uso:
- Caso a MetaMask não esteja instalada.
- Caso a MetaMask esteja instalada, porém encontra-se bloqueada.
- Caso a MetaMask esteja instalada e desbloqueada, mas se não tiver saldo suficiente para realizar uma transação.
- Caso você faça uma transação na MetaMask, mas rejeita a transação.
Caso 1: Verificar se a MetaMask está instalada ou não.
Caso 2: Verificar se a MetaMask está bloqueada ou não.
function isInstalled() {
if (typeof web3 !== 'undefined'){
console.log('A MetaMask está instalada.')
}
else{
console.log('A MetaMask não está instalada.')
}
}
function isLocked() {web3.eth.getAccounts(function(err, accounts){if (err != null) {console.log(err)}else if (accounts.length === 0) {console.log('A MetaMask está bloqueada.')}else {console.log('A MetaMask está desbloqueada')}});}
Caso 3: Verificar se a MetaMask possui saldo ou não.
function checkBalance() {
tokenInst.balanceOf(
web3.eth.accounts[0],
function (error, result) {
if (!error && result) {
var balance = result.c[0];
if (balance < balanceNeeded * (100000000)) {
console.log('A MetaMask exibiu um saldo insulficiente')
return false;
}
console.log('A MetaMask exibiu um saldo suficiente.')
// Inclua aqui a sua função de transação
}
else {
console.error(error);
}
return false;
});
}
Caso 4: Caso você faça uma transação na MetaMask, mas você acabe rejeitando a transação.
tokenInst.approve(
addrHOLD,
truePlanCost,
gasPrice: web3.toWei('50', 'gwei') },
function (error, result) {
if (!error && result) {
var data;
console.log('Aprovação enviada para a rede.');
var url = 'https://etherscan.io/tx/' + result;
var link = '<a href=\"" +
url +
"\" target=\"_blank\">View Transaction</a>';
console.log('Esperando pela aprovação ...');
data = {
txhash: result,
account_type: selectedPlanId,
txtype: 1, // Approval
};
apiService(data, '/transaction/create/', 'POST')
.done(function (response) {
location.href = response.tx_url;
});
}
else {
console.error(error);
console.log('Você rejeitou a transação.');
}
});
Todos os casos juntos no mesmo código:
var transactionApproval = true;
function validate() {
if (typeof web3 !== 'undefined'){
console.log('A MetaMask está instalada.')
web3.eth.getAccounts(function(err, accounts){
if (err != null) {
console.log(err)
}
else if (accounts.length === 0) {
console.log('A MetaMask está bloqueada.')
}
else {
console.log('A MetaMask está desbloqueada.')
tokenInst.balanceOf(
web3.eth.accounts[0],
function (error, result) {
if (!error && result) {
var balance = result.c[0];
if (balance < dappCost * (100000000)) {
console.log('A MetaMask está com saldo insulficiente')
return false;
}
console.log('A MetaMask está com saldo sulficiente.')
if (transactionApproval == true ){
requestApproval();
transactionApproval = false;
}
}
else {
console.error(error);
}
return false;
});
}
});
}
else{
console.log('A MetaMask não está instalada.')
}
}
// solicitar aprovação do usuário da MetaMask
function requestApproval() {
tokenInst.approve(
addrHOLD,
truePlanCost,
{ gasPrice: web3.toWei('50', 'gwei') },
function (error, result) {
if (!error && result) {
var data;
console.log('A aprovação foi enviada para a rede.');
var url = 'https://etherscan.io/tx/' + result;
var link = '<a href=\"" +
url +
"\" target=\"_blank\">View Transaction</a>';
console.log('Esperando a aprovação...');
data = {
txhash: result,
account_type: selectedPlanId,
txtype: 1, // Approval
};
apiService(data, '/transaction/create/', 'POST')
.done(function (response) {
location.href = response.tx_url;
});
}
else {
console.error(error);
console.log('Você rejeitou a transação.');
}
});
}
Evitando condições de corrida com onLoad()
As condições de corrida surgem no software quando um aplicativo depende da sequência ou tempo de processos ou encadeamentos para que funcione corretamente.
Ouvintes de eventos VS Polling a interface
Você deve decidir entre definir um horário para realizar polling na interface ou usar ouvintes de eventos. Veja um exemplo:
- Realizar polling na interface usando um intervalo para verificar alguma mudança na conta. Essa é a maneira recomendada pelo provedor da MetaMask, que tem o intuito de evitar a atualização da página para que as atualizações da UI (interface do usuário) possam ser visualizadas. Clique aqui para ver mais.
var account = web3.eth.accounts[0];
var accountInterval = setInterval(function() {
if (web3.eth.accounts[0] !== account) {
account = web3.eth.accounts[0];
updateInterface();
}
}, 100);
- Usando a web3 na versão 1.0.0, o provedor da MetaMask expõe um ouvinte de eventos de “atualização”.
web3.currentProvider.publicConfigStore.on('update', callback);
Seu retorno de chamada receberá um objeto que contém { selectedAddress, networkVersion }. Você pode modificar a interface de acordo com a alteração ou atualização desses atributos.
Selecionar ouvintes de eventos é uma opção melhor do que realizar o polling, isso porquê você irá melhorar o desempenho, o método “.on('update')” é acionado sem a necessidade de loop.
Conclusão
Muitas pessoas estão se familiarizando com a tecnologia, o potencial criativo para o desenvolvimento de DApps continua crescendo como uma bola de neve.
A MetaMask é uma ferramenta que torna o desenvolvimento desta tecnologia mais acessível, ela está sendo atualizada com novos recursos o tempo inteiro.
A MetaMask é uma ponte que permite que você acesse a web distribuída do amanhã, em seu navegador no presente. Ela permite que você execute DApps da Ethereum diretamente no seu navegador sem ter a necessidade de executar um nó Ethereum completo.
Dentre outras coisas, a MetaMask está desenvolvendo opções de prevenção para possíveis ataques. Para se manter atualizado com todos os recursos que estão sendo desenvolvidos no momento, assine a newsletter da MetaMask por aqui.
Caso você tenha dúvidas sobre a construção de DApps com a MetaMask ou se tiver sugestões de tópicos adicionais, deixe-me saber nos comentários!
Agradecimentos especiais àqueles que ajudaram a revisar e editar os rascunhos deste post: Aleksa Miladinovic, William Wickey e Anand Kulkarni.
Top comments (0)