- Introdução
- Configurando um esqueleto de aplicativo
- Atualizando as Visualizações
- Script para conectar a Metamask
- Conectando a Metamask via interface do usuário
- Mudando a conta
- 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):
- ERC20 Usando Hardhat: Um Guia Abrangente Atualizado
- ERC721 Usando Hardhat: Um Guia Abrangente Atualizado para NFTs
- Criando NFTs verdadeiramente descentralizados - um guia abrangente para ERC721 e IPFS
Configurando um esqueleto de aplicativo
Primeiro precisamos criar um diretório de projeto e instalar o Express:
mkdir Express
cd Express
npm install Express
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
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
Conforme instruído, também instalaremos as dependências necessárias:
npm install
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
Uma vez instalado, podemos iniciar nosso aplicativo da web executando o seguinte:
nodemon start
Você poderá ver uma página de boas-vindas abaixo ao visitar a porta padrão em localhost:3000.
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>
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;
Salvando o acima, o nodemon teria atualizado automaticamente seu aplicativo e seu navegador deveria exibir o seguinte:
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);
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:
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).
Você pode ver a lista completa de IDs de cadeia em chainlist.org:
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 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:
Ao selecionar "Hardhat", você também poderá ver que os logs foram impressos no console do seu Hardhat:
Observe que o id da cadeia também foi atualizado com o valor hexadecimal e também podemos ver o teste HARDHATETH.
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!
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)