WEB3DEV

Cover image for Conectando a Metamask ao seu aplicativo da Web (Express)
Diogo Jorge
Diogo Jorge

Posted on • Atualizado em

Conectando a Metamask ao seu aplicativo da Web (Express)

  1. Introdução
  2. Configurando um esqueleto de aplicativo
  3. Atualizando as Visualizações
  4. Script para conectar a Metamask
  5. Conectando a Metamask via interface do usuário
  6. Mudando a conta
  7. Mudando a rede

Introdução

Sem experiência em codificação, aplicativos da web são a principal maneira pela qual a maioria dos usuários irá interagir com a blockchain. Este é especialmente o caso, dado o surgimento de carteiras de criptomoedas fáceis de usar, como Metamask, que permite aos usuários gerenciar facilmente suas chaves por meio de uma interface amigável. Como tal, o aplicativo da web atua como a camada intermediária através da qual os desenvolvedores podem implementar lógica adicional não-blockchain (ou contrato inteligente), que é acionada por meio da carteira criptográfica de um usuário.

Este é um guia rápido sobre como conectar a Metamask com seu aplicativo da Web Express. Não entraremos em detalhes sobre o Express, mas, para aqueles que não estão familiarizados, o Express nos permite inicializar rapidamente nosso próprio servidor de aplicativos da Web básicos. O repositório do Github para este guia pode ser encontrado aqui.

Para conectar a Metamask com uma biblioteca de conveniência, você pode consultar aqui:

Se você gostaria de configurar a Metamask, você pode consultar um guia separado:

Mais informações sobre como implantar e interagir com contratos inteligentes (tokens, NFTs, armazenamento descentralizado):

Configurando um esqueleto de aplicativo

Primeiro precisamos criar um diretório de projeto e instalar o Express:

mkdir Express
cd Express
npm install Express
Enter fullscreen mode Exit fullscreen mode

Com o pacote Express instalado, podemos utilizar o express-generator para configurar um modelo de aplicativo de forma rápida e conveniente. Antes de executar o express-generator, podemos visualizar as opções de configuração executando o seguinte:

npx express-generator --help
Enter fullscreen mode Exit fullscreen mode

Configurando um esqueleto de aplicativo

Para nossos propósitos, queremos inicializar nosso projeto usando EJS, pois isso minimiza a necessidade de troca de contexto devido às suas semelhanças com HTML. Assim, executaremos o express-generator com o sinalizador de visualização EJS:

npx express-generator -v ejs
Enter fullscreen mode Exit fullscreen mode

instalando as dependências necessárias

Conforme instruído, também instalaremos as dependências necessárias:

npm install
Enter fullscreen mode Exit fullscreen mode

Por uma questão de conveniência, usaremos nodemon para atualizar automaticamente nosso aplicativo sempre que fizermos alterações. O comando abaixo instalará o nodemon globalmente para que você possa usá-lo em seus outros projetos:

npm install -g nodemon
Enter fullscreen mode Exit fullscreen mode

Uma vez instalado, podemos iniciar nosso aplicativo da web executando o seguinte:

nodemon start
Enter fullscreen mode Exit fullscreen mode

Você poderá ver uma página de boas-vindas abaixo ao visitar a porta padrão em localhost:3000.

Visualizando o primeiro deploy no localhost

O Express agora está configurado e podemos prosseguir e fazer as alterações necessárias para conectar a Metamask à nossa instância do Express.

Atualizando as Visualizações

A primeira coisa que faremos é alterar a visualização para que a exibição da página seja mais intuitiva para o nosso propósito. Navegue até o arquivo index.ejs, localizado na pasta /views. Podemos substituir o <body> pelo código abaixo:

<body>
    <h1><%= title %></h1>
    <button class="enableEthereumButton">Connect to Metamask</button>
    <h2>Account: <span class="showAccount"></span></h2>
    <h2>Chain ID: <span class="showChainId"></span></h2>
    <script src="javascripts/index.js"></script>
  </body>
Enter fullscreen mode Exit fullscreen mode

Para este guia, acompanharemos a conta ativa e o ID da cadeia. De acordo com as boas práticas da Metamask, também incluímos um botão para o usuário iniciar a solicitação de conexão. A solicitação de conexão sempre deve ser iniciada pelo usuário e não no carregamento da página.

Além disso, também incluímos um script index.js que criaremos em breve. Este script conterá o código necessário para que a Metamask se conecte ao aplicativo.

Por fim, também alteramos o título que é inserido na página, modificando index.js na pasta /routes. O res.render alimenta os dados passados ​​na função para o nosso arquivo index.ejs para ser renderizado.

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: "'Connect Metamask to your Web Application' });"
});

module.exports = router;
Enter fullscreen mode Exit fullscreen mode

Salvando o acima, o nodemon teria atualizado automaticamente seu aplicativo e seu navegador deveria exibir o seguinte:

Atualizando a aparencia do aplicativo

Com a aparência fora do caminho, podemos mergulhar na substância real.

Script para conectar a Metamask

Conforme mencionado acima, criaremos um novo arquivo index.js que conterá o script de conexão. Como parte da inicialização de nosso projeto com o express-generator, foi criada uma pasta /public, que permite ao Express servir ativos estáticos ao nosso aplicativo. Assim, criaremos nosso arquivo no subdiretório /public/javascripts/:

toque em public/javascripts/index.js

Podemos então copiar e colar o seguinte em nosso arquivo index.js:

// Inicializa os objetos da página com os quais interagir
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');
const showChainId = document.querySelector('.showChainId');

// Inicializa a conta ativa e chain id
let activeAccount;
let activeChainId;

// Atualizar a conta e chain id quando o usuário clica no botão
ethereumButton.addEventListener('click', () => {
  getAccount();
  getChainId();
});

// Obtém a conta no objeto janela
async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  if (accounts.length === 0) {
    // MetaMask está bloqueado ou o usuário não conectou nenhuma conta
    console.log('Please connect to MetaMask.');
  } else if (accounts[0] !== activeAccount) {
    activeAccount = accounts[0];
  }
  showAccount.innerHTML = activeAccount;
}

// Obtém o chainId da rede conectada
async function getChainId() {
    activeChainId = await ethereum.request({ method: 'eth_chainId' });
    showChainId.innerHTML = activeChainId;
}

// Atualiza a conta selecionada e o ID da cadeia ao alterar
ethereum.on('accountsChanged', getAccount);
ethereum.on('chainChanged', getChainId);
Enter fullscreen mode Exit fullscreen mode

Começamos inicializando nossos componentes EJS, bem como as 2 variáveis ​​que iremos monitorar: activeAccount e activeChainId. Estes serão inicializados como nulos e somente receberão um valor quando o usuário iniciar a conexão com a Metamask clicando no botão “Conectar à Metamask”.

As variáveis getAccount()e getChainId() usam o objeto window.ethereum implementado por navegadores suportados (testado usando Chrome e Brave). O objeto ethereum é o canal principal através do qual o aplicativo irá interagir com a Metamask.

Além disso, também adicionamos observadores de eventos em accountsChanged e chainChanged para atualizar as respectivas variáveis ​​quando o usuário altera suas configurações da metamask. Observe que isso só funcionará quando o usuário der permissão para que o site se conecte à sua conta Metamask.

Esse é todo o código necessário para que possamos salvar o arquivo e iniciar a interface com nosso aplicativo via Metamask UI.

Conectando a Metamask via interface do usuário

Navegue até localhost:3000 e selecione o botão “Connect to Metamask”. Isso deve solicitar que você faça login na extensão Metamask do seu navegador:

Script para conectar a MetaMask

Depois de fazer login, você poderá ver a conta ativa e o ID da rede atualizados. Observe que a conta exibida no Metamask corresponde ao endereço exibido pelo nosso aplicativo (destacado em amarelo). Além disso, se você estiver conectado à “Ethereum Mainnet”, também verá o ID da cadeia representado em hexadecimal (destacado em verde).

Obtendo o ID da rede

Você pode ver a lista completa de IDs de cadeia em chainlist.org:

Lista de IDs de cadeia

Mudando a conta

Lembre-se de que também implementamos um observador de eventos para alterar a conta ativa quando um usuário troca sua conta Metamask. Para testar isso, podemos alterar a conta Metamask selecionando o círculo colorido no canto superior direito (consulte “Importando contas de teste”). Uma vez selecionado, tanto os endereços na Metamask quanto no nosso aplicativo seriam atualizados.

Mudando a conta

Mudando a rede

Também implementamos um observador de eventos para alterações de rede iniciadas pelo usuário na Metamask. Para completar, vamos nos conectar à nossa rede de teste Hardhat que configuramos no guia anterior, mas você ainda pode acompanhar se tiver outras redes configuradas na Metamask. Abra a guia de rede selecionando o menu suspenso “Ethereum Mainnet” na Metamask:

Mudando a rede

Ao selecionar "Hardhat", você também poderá ver que os logs foram impressos no console do seu Hardhat:

Selecionando a rede Ethereum Mainnet

Observe que o id da cadeia também foi atualizado com o valor hexadecimal e também podemos ver o teste HARDHATETH.

Chain ID atualizado

Colando este valor hexadecimal 7a69 em um conversor, podemos ver que isso corresponde a um valor decimal de 31337, que é a porta padrão do Hardhat que configuramos anteriormente!

Conversão de Hexadecimal para decimal

Parabéns, seu aplicativo da web Express agora está conectado à Metamask!

Obrigado por ficar até o fim. Adoraria ouvir seus pensamentos/comentários, então, deixe um comentário. Estou ativo no twitter @Aw Kai Shin, se você quiser receber petiscos mais digeríveis de informações relacionadas à criptografia, ou visite meu site pessoal se você gostaria de meus serviços :)

Este artigo foi escrito por Aw Kai Shin e traduzido por Diogo Jorge. O artigo original pode ser encontrado aqui.


Abrace a oportunidade de elevar sua jornada de desenvolvimento para um nível superior. A conexão com a MetaMask é apenas o começo; os builds incríveis da WEB3DEV representam a chave de entrada para o emocionante cenário web3. 🚀🧑‍💻

Não perca tempo, 👉inscreva-se👈 agora mesmo e comece a desbravar o universo Blockchain!
 
Seja também WEB3DEV!

Latest comments (0)