A Web3 tem sido tendência desde o início de 2022, assim como os NFTs estavam explodindo no ano passado. Ainda assim, a noção de criar aplicativos descentralizados para casos de uso mainstream como Facebook, Instagram e Google tem sido uma longa ambição da comunidade cripto. No entanto, embora algumas empresas de blockchain já tenham desenvolvido alguns DApps, a indústria web3 só recentemente começou a ganhar popularidade. Neste artigo, estaremos criando um sistema de rastreamento de adoção para uma pet shop no Ethereum do zero.
Index du contenu:
Resumo (TL;DR)
- A Web3 tem sido tendência desde o início de 2022, assim como os NFTs estavam explodindo no ano passado.
- Experiência prévia em ferramentas de Solidity e Desenvolvimento de Blockchain como Ganache, Truffle etc., não é necessária.
- Um DApp é um aplicativo de software que opera em uma rede distribuída.
- Precisamos instalar VS Code, NodeJS, Git, Truffle e Ganache.
- Depois disso, vamos montar nosso ambiente de desenvolvimento usando a Truffle Box, ou seja, pet shop.
- O próximo passo é criar um contrato inteligente usando solidez.
- Compilaremos o contrato inteligente usando o comando de compilação de trufas e, em seguida, migraremos usando o comando trufa migrate.
- Criaremos um arquivo TestAdoption.sol para testar nosso contrato inteligente junto com o comando de teste de trufas.
- Criaremos uma interface de usuário com o Web3.js e algum código existente na caixa de trufas.
- Finalmente, vamos interagir com nosso DApp usando MetaMask e Ganache.
Declaração de problema
Vamos dar o exemplo do Pete. Pete é dono de uma pet shop em Nova Deli, Índia.
Como podemos ver, a Tecnologia blockchain e a criptomoeda estão ganhando aceitação mainstream. Em 1º de fevereiro de 2022, a ministra das Finanças Nirmala Sitharaman anunciou que o Banco da Reserva da Índia emitiria uma Rupia Digital usando a Tecnologia Blockchain a partir de 2022-23. Este é um passo positivo na direção da adoção de criptomoedas. Agora, a Índia reconheceu a tecnologia blockchain.
Então Pete também está interessado em usar a Tecnologia Blockchain. Ele quer usar a Tecnologia Blockchain para sua loja. Depois de fazer algumas pesquisas por conta própria, Pete é fascinado com o Ethereum Blockchain e a ideia de Contratos Inteligentes. Ele está interessado em usá-lo para gerenciar adoções de animais de estimação de forma mais eficiente. Seu negócio pode acomodar até 16 animais de estimação a qualquer momento. Ele já tem um banco de dados de animais pronto. Pete quer alguém para criar um DApp para ele.
O objetivo do DApp é conectar um Endereço Ethereum com um animal de estimação a ser adotado.
Este é um exemplo de como uma declaração de problema típico se parece em um Negócio blockchain. Agora, vamos para o próximo passo.
Pré-requisitos
Este artigo é destinado a pessoas que têm um entendimento básico do Ethereum e Contratos Inteligentes. Se você não tem conhecimento prévio sobre o Ethereum, comece daqui.
Alguma experiência de codificação de HTML e JavaScript ajudará a entender facilmente a lógica de codificação. Se alguém é novo em DApps ou inicia sua jornada de Desenvolvimento Web, ele pode facilmente seguir este artigo. Experiência prévia em ferramentas de Solidity e Desenvolvimento de Blockchain como Ganache, Truffle etc., não é necessária. No entanto, explicaremos cada passo à medida que avançamos.
Este artigo será útil para cada novato, e construiremos um DApp passo a passo. Agora, vamos passar para o próximo passo e entender o que é um DApp.
O que é um DApp?
Um Aplicativo Descentralizado é um aplicativo de software que opera em uma rede distribuída. Ele não está hospedado em um Servidor Centralizado, mas em uma rede peer-to-peer descentralizada, como o IPFS. Para implantar ou interagir com um DApp, não há necessidade de revelar qualquer identificação do mundo real.
DApp = FrontEnd + Smart Contract BackEnd
BackEnd Code é escrito principalmente em Solidity (ou Vyper). No entanto, não há um idioma específico para o Código FrontEnd. Agora, vamos passar para o próximo passo e entender como os DApps funcionam.
Como funcionam os DApps?
No diagrama abaixo, podemos ver como funciona um DApp típico. Agora vamos mergulhar fundo neste diagrama para entendê-lo de uma maneira melhor.
- Navegador do Cliente: É um Navegador Normal escrito em HTML, CSS e JS.
- Web3.js: É uma coleção de bibliotecas que nos permitem interagir com um nó Ethereum local ou remoto usando HTTP, IPC ou WebSocket.
- Provedor Web3: A rede Ethereum contém nós e todos os nós compartilham a cópia idêntica dos dados. Definir um provedor web3 no web3.js informa nosso código de qual nó leremos e escreveremos dados. Estamos usando metamask em nosso DApp para injetar seu provedor web3 no navegador.
- Máquina Virtual Ethereum (EVM): Cada nó Ethereum na rede tem sua implementação EVM e é responsável por executar as mesmas instruções de Contrato Inteligente na rede.
Instalação de Dependências
Existem alguns requisitos técnicos antes de começarmos a criar o DApp. Nesta seção, instalaremos todas as dependências necessárias.
1. Instalação do Código VS
Em primeiro lugar, precisamos de um IDE, ou seja, ambiente de desenvolvimento integrado. Um IDE permite que os programadores simplifiquem o processo de construção de um programa de computador. Ele aumenta a produtividade de um programador mesclando tarefas típicas de desenvolvimento de software, como editar código-fonte, construir executáveis e depurar em um único lugar.
Usaremos o Visual Studio Code em nosso artigo. É um editor de código-fonte leve ideal para uso diário com recursos como destaque de sintaxe, correspondência de suporte, recuo automático, seleção de caixas, trechos, etc. Ele mistura a facilidade de uso de um editor de código-fonte com recursos avançados do desenvolvedor, como a conclusão e depuração de código intelliSense. Está disponível para macOS, Linux e Windows.
2. Instalação de NodeJS e npm
Em segundo lugar, precisamos de um ambiente de tempo de execução. Usaremos NodeJS e npm. npm vem com NodeJS.
Node.js é um ambiente de tempo de execução JavaScript que é de código aberto e multiplataforma. É uma ferramenta amplamente utilizada para quase qualquer projeto. É uma plataforma de linguagem leve, escalável e de código aberto que torna simples construir aplicativos no nível corporativo. O NPM contém pacotes que utilizamos em nossos aplicativos para acelerar e melhorar o processo de desenvolvimento.
3. Instalação de Git
Terceiro, precisamos do Git. É um sistema de controle de versão distribuída de código aberto e gratuito projetado para gerenciar tudo com velocidade e eficiência. Ele mantém as mudanças que fazemos nos arquivos, então temos um registro do que foi feito.
4. Instalação de Trufas
Em quarto lugar, precisamos de Truffle. É um ambiente de desenvolvimento de classe mundial, estrutura de testes e pipeline de ativos para blockchains baseados na Máquina Virtual Ethereum (EVM).
Para baixar Truffle, siga este guia passo a passo.
- Passo 1: Abra vs código.
- Passo 2: Clique em Terminal.
- Passo 3: Clique em Novo Terminal.
- Passo 4: Cole este comando no terminal.
npm install -g truffle
- Passo 5: Para verificar se trufa está instalada corretamente, cole este comando no terminal.
truffle version
5. Instalação de Ganache
Por último, precisamos de Ganache. É uma blockchain local para rápido desenvolvimento de aplicativos Ethereum e Corda. Podemos usar o Ganache em todo o ciclo de desenvolvimento: desenvolvimento, implantação e teste de DApps em um ambiente seguro e seguro. Todas as versões do Ganache estão disponíveis para Windows, Mac e Linux.
Ganache está disponível em dois modos: GUI e CLI. Ganache UI é um aplicativo de desktop que suporta ethereum e corda. Ganache CLI só está disponível para o desenvolvimento do Ethereum.
Neste artigo, usaremos Ganache CLI porque é simples e fácil de usar. Para baixar Ganache CLI, siga este guia passo a passo.
- Passo 1: Abra vs código.
- Passo 2: Clique em Terminal.
- Passo 3: Clique em Novo Terminal.
- Passo 4: Cole este comando no terminal.
npm install ganache –global
- Passo 5: Para começar Ganache, cole este comando no terminal.
ganache
Agora instalamos todas as dependências. O próximo passo é configurar e otimizar nosso Ambiente de Desenvolvimento.
Criação do Ambiente de Desenvolvimento
Nesta seção, vamos montar nosso ambiente de desenvolvimento. Para configurar o ambiente de desenvolvimento, siga este guia passo a passo.
- Passo 1: Vá para VS Code e Crie um tutorial de pet shop folder.
- Passo 2: Agora clique no tutorial do pet-shop e clique em Abrir no Terminal Integrado.
A equipe trufa criou trufas. Estas são as caldeiras que contêm módulos úteis, contratos de solidez & bibliotecas, vistas front-end e muito mais.
- Passo 3: Neste artigo, usaremos uma Truffle Box, ou seja, pet shop, que inclui a estrutura básica do projeto e o código para a interface do usuário. Cole este comando no terminal.
truffle unbox pet-shop
Depois de executar o comando acima, o comando baixará os arquivos que podemos ver na imagem acima.
- Método alternativo para o passo 3: Se alguém deseja criar a interface do usuário do zero, mas quer uma caldeira de trufa. Cole este comando no terminal.
truffle init
- Passo 4: Vamos instalar a extensão VS Code Solidity de Juan Blanco para escrever o código Solidity em VS Code. Abra o Código VS e Vá para extensões na barra lateral direita e clique nele. Busca por Solidity e Clique em Extensão, cujo autor é Juan Blanco. Clique em Instalar.
Agora, nosso ambiente de desenvolvimento foi criado com sucesso. O próximo passo é criar um contrato inteligente.
Criação de Contrato Inteligente
Nesta seção, criaremos um contrato inteligente para o nosso DApp. Essa lógica funcionará como backend e armazenamento para o nosso DApp. Para criar um contrato inteligente, siga este guia passo a passo.
Passo 1: Vá para o diretório de contratos na pasta pet-shop-tutorial
Este diretório conterá nosso código de contrato inteligente escrito em solidez. Agora crie um novo arquivo Adoção.sol.
Passo 2: Agora, vamos começar a escrever nosso código de solidez
Cole este código no arquivo Adoption.sol.
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.0 <0.9.0;
contract Adoption {
}
Agora, vamos entender o significado do código escrito acima.
- SPDX-License-Identifier: GPL-3.0 : A versão Solidity 0.6.8 introduziu identificadores de licença SPDX, permitindo que os desenvolvedores definam a licença que o contrato usa. Os desenvolvedores devem adicionar isso no topo. Se isso faltar no arquivo do contrato, o compilador exibirá um aviso. Além disso, se o arquivo do contrato tiver vários identificadores de licença, o compilador mostrará um erro.
- solidez pragma >=0,4,0 <0,9,0; : Este comando informa ao compilador que o código-fonte está escrito para as versões Solidity 0.4.0 a 0.9.0. A palavra-chave pragma é usada para ativar recursos e verificações do compilador.
- adoção de contrato {} : Este comando especifica a coleta de código e dados em um endereço específico na blockchain Ethereum.
Passo 3: Agora, vamos declarar uma variável para o nosso contrato inteligente
Cole este código após o contrato Adoção { no arquivo Adoption.sol.
address[16] public adopters;
Agora, vamos entender o significado do código escrito acima.
- endereço[16] : Esta declaração é uma matriz de endereços Ethereum. As matrizes contêm um tipo e podem ter um comprimento fixo ou variável. Neste caso, o tipo é endereço, e o comprimento é 16.
- público : As funções públicas fazem parte da interface do contrato e podem ser chamadas externamente ou internamente. Para variáveis públicas, é gerada uma função de getter automático.
- adotantes : Esta afirmação é uma variável que é um recipiente para armazenar valor.
Passo 4: Agora, adicionaremos a função de adoção ao nosso contrato inteligente
Precisamos de uma função para permitir que os usuários façam suas solicitações de adoção. Então, criaremos uma função de adoção(). Cole este código após a declaração variável no arquivo Adoção.sol.
// Adopting a pet
function adopt(uint256 petId) public returns (uint256) {
require(petId >= 0 && petId <= 15);
adopters[petId] = msg.sender;
return petId;
}
Agora, vamos entender o significado do código escrito acima.
- função adotar (uint256 petId) retornos públicos (uint256) {} : Temos que especificar os parâmetros de função e os tipos de saída em Solidity. Neste caso, tomamos a entrada petId como um inteiro e devolvemos-a como um inteiro. Para saber mais sobre Funções em Solidez, clique aqui.
- requerem (petId >= 0 && petId <= 15); : Estamos usando a função require() para verificar se o petID está dentro do intervalo. Como as matrizes são indexadas a partir de 0 em Solidity, estamos tomando o valor petID entre 0 e 15.
- adotantes[petId] = msg.sender; : Se o ID estiver dentro do intervalo, a função adiciona o endereço que fez a chamada para a matriz de adotantes. msg.sender denota o endereço da pessoa ou contrato inteligente que chamou essa função.
- voltar petId; : Estamos devolvendo o petId como saída.
Passo 5: Agora, adicionaremos a função getAdopters ao nosso contrato inteligente
Precisamos de uma função para recuperar os adotantes. Esta função deve atualizar todos os status de adoção de animais de estimação. Assim, criaremos uma função getAdopters() que retorna toda a matriz. Cole este código após a função adotar() no arquivo Adoption.sol.
// Retrieving the adopters
function getAdopters() public view returns (address[16] memory) {
return adopters;
}
Agora, vamos entender o significado do código escrito acima.
- função getAdopters() retornos de exibição pública (endereço[16] memória) {} : Explicação da declaração de função é semelhante ao Passo 4. A palavra-chave de exibição indica que a função não mudará o estado do contrato. a memória especifica a localização dos dados da variável.
- adotantes de retorno : Uma vez que já declaramos a variável adotantes na Etapa 3. Podemos devolvê-lo.
Passo 6: Aqui está nosso código de solidez completo
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.0 <0.9.0;
contract Adoption {
address[16] public adopters;
// Adopting a pet
function adopt(uint256 petId) public returns (uint256) {
require(petId >= 0 && petId <= 15);
adopters[petId] = msg.sender;
return petId;
}
// Retrieving the adopters
function getAdopters() public view returns (address[16] memory) {
return adopters;
}
}
Agora nosso contrato inteligente foi criado com sucesso. O próximo passo é compilar o contrato inteligente.
Compilação de Contrato Inteligente
Nesta seção, vamos compilar nosso contrato inteligente. Uma vez que solidity é uma linguagem compilada. Portanto, devemos compilá-lo para bytecode antes que o EVM possa executá-lo. Para compilar o contrato inteligente, siga este guia passo a passo.
- Passo 1: Vá para a pasta vs Code pet-shop-tutorial. Agora clique no botão direito do mouse sobre ele e clique em abrir em terminal integrado.
- Passo 2: Cole este comando no terminal. Este comando compilará todos os contratos no diretório de contratos.
truffle compile
Depois de executar o comando acima, veremos a saída como mostrado na imagem abaixo.
Agora nosso contrato inteligente foi compilado com sucesso. O próximo passo é migrar o contrato inteligente.
Migração de Contrato Inteligente
Nesta seção, migraremos nosso contrato inteligente. Migrações são arquivos JavaScript que ajudam a implantar contratos na rede Ethereum. Para migrar o contrato inteligente, siga este guia passo a passo.
Passo 1: Vá para o diretório de migrações na pasta pet-shop-tutorial.
Veremos um arquivo JavaScript já está presente, ou seja, 1 migração inicial.js. Este arquivo lida com a implantação do contrato inteligente Migrations.sol. Precisamos de um arquivo semelhante para nosso contrato de Adoção.sol. Criaremos um novo arquivo, ou seja, 2_deploy_contracts.js, semelhante ao nosso 1_initial_migration.js. A parte de codificação será semelhante em ambos os arquivos. As únicas mudanças serão as funções de exigir() e implantar(). Aqui escreveremos Adoção no lugar das Migrações. Cole este código no arquivo 2_deploy_contracts.js.
var Adoption = artifacts.require(“Adoption”);
module.exports = function(deployer) {
de
Passo 2: Agora é hora de executar Ganache.
Precisamos ter uma blockchain operacional antes de migrar nosso contrato inteligente para ele. Como discutido acima, usaremos Ganache CLI. Também agora vamos precisar de dois terminais. O primeiro será para os Comandos Ganache, e o segundo será para comandos de trufas. Então temos que abrir nossos terminais integrados duas vezes. Para começar Ganache, cole este comando no terminal.
ganache
Este comando criará uma blockchain que funcionará localmente na porta 8545.
Passo 3: Agora, vamos alterar o número da porta
A principal diferença entre Ganache GUI e CLI é que Ganache GUI funciona na porta 7545, mas Ganache CLI funciona na porta 8545. Então agora vamos alterar o número da porta no arquivo trufa-config.js, que está presente na parte inferior da pasta pet-shop-tutorial.
Passo 4: Agora, é hora de migrar o contrato inteligente para o blockchain
Cole este comando no terminal. Este comando migrará todos os contratos no diretório de migrações.
truffle migrate
Depois de executar o comando acima, veremos a saída como mostrado na imagem abaixo.
Agora, se voltarmos para Ganache, podemos ver que o estado da blockchain mudou. O blockchain agora mostra o bloco número 4. Antes, era 0.
Agora nosso contrato inteligente migrou com sucesso. O próximo passo é testar o contrato inteligente.
Testando o Contrato Inteligente
Nesta seção, vamos testar nosso contrato inteligente. Testar um contrato inteligente é essencial porque um bug pode custar milhões de dólares. Para testar o contrato inteligente, siga este guia passo a passo.
Passo 1: Vá para o diretório de testes na pasta pet-shop-tutorial
Este diretório conterá código escrito em solidez para testes de contrato inteligente. Agora crie um novo arquivo TestAdoption.sol. Cole este código no arquivo TestAdoption.sol.
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.0 <0.9.0;
import “truffle/Assert.sol”;
import “truffle/DeployedAddresses.sol”;
import “../contracts/Adoption.sol”;
contract TestAdoption {
Adoption adoption = Adoption(DeployedAddresses.Adoption());
uint expectedPetId = 8;
address expectedAdopter = address(this);
}
Agora, vamos entender o significado do código escrito acima.
- importação “trufa/Assert.sol”; : Estamos importando o Assert.sol do diretório global de trufas. Isso nos dá várias verificações de afirmação para usar em nossos testes.
- importar “trufa/ImplantadoAddresses.sol”; : Estamos importando o DeployedAddresses.sol do diretório global de trufas. Truffle implantará uma nova instância do contrato sendo testado para o blockchain ao executar testes. Este arquivo obtém o endereço do contrato implantado.
- importação “.. /contratos/Adoção.sol”; : Estamos importando adoção.sol do diretório de contratos, pois este é o contrato inteligente no qual queremos realizar testes.
- Adoção = Adoção(ImplantadoAddresses.Adoção()); : Este código contém o endereço do contrato inteligente a ser testado, ou seja, contrato de adoção.
- uint expectedPetId = 8; : Esta variável contém o ID de animal de estimação esperado, que o contrato TestAdoption usará para testes.
- endereço esperadoAdopter = endereço(este); : Definimos o endereço de adotante esperado para isso, que recupera o endereço do contrato atual porque o contrato de TestAdoption será o envio da transação para o contrato de Adoção.
Passo 2: Agora, vamos testar a função adotar()
Cole este código após a declaração do esperadoPetid no arquivo TestAdoption.sol.
// Testing the adopt() function
function testUserCanAdoptPet() public {
uint returnedId = adoption.adopt(expectedPetId);
Assert.equal(returnedId, expectedPetId, “Adoption of the expected pet should match what is returned.”);
}
Agora, vamos entender o significado do código escrito acima.
- uint returnedId = adoção.adotar(esperadoPetId); : Chamamos o contrato inteligente previamente declarado, ou seja, contrato de adoção com o ID esperado.
- Assert.equal (returnedId, expectedPetId, “A adoção do animal de estimação esperado deve corresponder ao que é devolvido.”); : Passamos o valor real, ou seja, retornamosId, o valor esperado, ou seja, esperadoPetId e uma mensagem de falha que é impressa se o teste não tiver a função Assert.equal().
Passo 3: Agora, vamos testar a recuperação do dono de um único animal de estimação
Cole este código após a função testUserCanAdoptPet() no arquivo TestAdoption.sol.
// Testing retrieval of a single pet’s owner
function testGetAdopterAddressByPetId() public {
address adopter = adoption.adopters(expectedPetId);
Assert.equal(adopter, expectedAdopter, “Owner of the expected pet should be this contract”);
}
Agora, vamos entender o significado do código escrito acima.
- adotante de endereço = adoção.adotantes(esperadoPetId); Estamos recebendo o endereço adotante armazenado pelo contrato de adoção depois de passar pelo EsperadoPetid.
- Assert.equal (adotante, esperadoAdopter, “Dono do animal de estimação esperado deve ser este contrato”); Estamos passando o valor real, o valor esperado e uma mensagem de falha que é impressa se o teste resultar em falha na função Assert.equal().
Passo 4: Agora, vamos testar a recuperação de todos os donos de animais
Cole este código após a função testGetAdopterAddressByPetId() no arquivo TestAdoption.sol.
// Testing retrieval of all pet owners
function testGetAdopterAddressByPetIdInArray() public {
address[16] memory adopters = adoption.getAdopters();
Assert.equal(adopters[expectedPetId], expectedAdopter, “Owner of the expected pet should be this contract”);
}
Agora, vamos entender o significado do código escrito acima.
- endereço[16] adotantes de memória = adoção.getAdopters(); : Estamos armazenando adotantes na memória em vez do armazenamento do contrato.
- Assert.equal (adotantes[expectedPetId], espera-seAdopter, “Dono do animal de estimação esperado deve ser este contrato”); : Estamos passando o valor real, o valor esperado e uma mensagem de falha que é impressa se o teste resultar em falha na função Assert.equal().
Passo 5: Aqui está nosso Código de Solidez Completa
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.0 <0.9.0;
import “truffle/Assert.sol”;
import “truffle/DeployedAddresses.sol”;
import “../contracts/Adoption.sol”;
contract TestAdoption {
// The address of the adoption contract to be tested
Adoption adoption = Adoption(DeployedAddresses.Adoption());
// The id of the pet that will be used for testing
uint256 expectedPetId = 8;
// Testing the adopt() function
function testUserCanAdoptPet() public {
uint256 returnedId = adoption.adopt(expectedPetId);
Assert.equal(returnedId, expectedPetId, “Adoption of the expected pet should match what is returned.”);
}
// Testing retrieval of a single pet’s owner
function testGetAdopterAddressByPetId() public {
address adopter = adoption.adopters(expectedPetId);
Assert.equal(adopter, expectedAdopter, “Owner of the expected pet should be this contract”);
}
// Testing retrieval of all pet owners
function testGetAdopterAddressByPetIdInArray() public {
// Store adopters in memory rather than contract’s storage
address[16] memory adopters = adoption.getAdopters();
Assert.equal(adopters[expectedPetId], expectedAdopter, “Owner of the expected pet should be this contract”
);
}
// The expected owner of adopted pet is this contract
address expectedAdopter = address(this);
}
Passo 6: Agora, é hora de testar o contrato inteligente
Cole este comando no terminal.
truffle test
Depois de executar o comando acima, veremos a saída como mostrado na imagem abaixo.
Agora nosso contrato inteligente foi testado com sucesso. O próximo passo é criar uma interface frontend para o nosso DApp.
Criação de uma interface de usuário para contrato inteligente
Nesta seção, criaremos uma interface de usuário. O código para a frente do DApp também está na pet-shop Truffle Box. Está presente dentro do diretório da SRC. Só adicionaremos essas funções exclusivas do Ethereum. Para criar uma interface de usuário para contrato inteligente, siga este guia passo a passo.
Passo 1: Instantaneação do web3
Vá para o arquivo .js aplicativo no diretório de testes da pasta pet-shop-tutorial. Agora, remova o comentário multi-linha da função initWeb3() e cole o código abaixo.
// {Part 1}
if (window.ethereum) {
App.web3Provider = window.ethereum;
try {
// Request account access
await window.ethereum.request({ method: “eth_requestAccounts” });;
} catch (error) {
// User denied account access…
console.error(“User denied account access”)
}
}
// {Part 2}
else if (window.web3) {
App.web3Provider = window.web3.currentProvider;
}
// {Part 3}
else {
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:8545’);
}
web3 = new Web3(App.web3Provider);
Agora, vamos entender o significado do código escrito acima.
- Parte 1, ou seja, se condição : Estamos verificando se usamos navegadores DApp onde um provedor de ethereum é injetado no objeto da janela. Nós o usamos para criar nosso objeto web3, mas também precisamos solicitar acesso às contas explicitamente com ethereum.enable().
- Parte 2, ou seja, se condição : Se o objeto ethereum não existir, verificamos se há uma instância web3 injetada. Se ele existir, isso indica que estamos usando um navegador DApp mais antigo. Então, pegamos seu provedor e o usamos para criar nosso objeto web3.
- Parte 3 condição: Se não houver uma instância web3 injetada, criamos nosso objeto web3 usando nosso provedor local.
Passo 2: Instanteação do contrato
Precisamos instanciar nosso contrato inteligente, para que o Web3 entenda onde encontrá-lo e como ele funciona. Agora, remova o comentário multi-linha da função initContract() e cole o código abaixo.
$.getJSON(‘Adoption.json’, function(data) {
// Get the necessary contract artifact file and instantiate it with @truffle/contract
var AdoptionArtifact = data;
App.contracts.Adoption = TruffleContract(AdoptionArtifact);
// Set the provider for our contract
App.contracts.Adoption.setProvider(App.web3Provider);
// Use our contract to retrieve and mark the adopted pets
return App.markAdopted();
});
Agora, vamos entender o significado do código escrito acima.
- var AdoptionArtifact = dados; : Estamos recuperando o arquivo artefato para o nosso contrato inteligente.
- App.contracts.Adoção = TruffleContract(AdoçãoArtifact); : Agora passaremos o arquivo Artefato para TruffleContract(), que cria uma instância do contrato para interagir.
- App.contracts.Adoption.setProvider(App.web3Provider); : Definiremos o provedor web3 do contrato usando o valor App.web3Provider que armazenamos anteriormente ao configurar o Web3.
- retorno App.markAdopted(); : Vamos chamar a função markAdopted() se os animais de estimação já forem adotados a partir de uma visita anterior.
Passo 3: Obtenção dos animais de estimação adotados e updation de interface do usuário
Agora, remova o comentário multi-linha da função markAdopted() e cole o código abaixo.
// Part 1
var adoptionInstance;
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
return adoptionInstance.getAdopters.call();
// Part 2
}).then(function(adopters) {
for (i = 0; i < adopters.length; i++) {
if (adopters[i] !== ‘0x0000000000000000000000000000000000000000’) {
$(‘.panel-pet’).eq(i).find(‘button’).text(‘Success’).attr(‘disabled’, true);
}
}
}).catch(function(err) {
console.log(err.message);
});
Agora, vamos entender o significado do código escrito acima.
- Parte 1 : Declararemos a adoção variávelInstância fora das chamadas de contrato inteligente para acessar a instância facilmente depois de recuperá-la pela primeira vez. Depois disso, usaremos a função call() que nos permite ler dados do blockchain sem uma transação.
- Parte 2: Depois de chamar a função getAdopters() usaremos o loop para verificar se um endereço está armazenado para cada animal de estimação. Por fim, verificamos todos os possíveis erros.
Passo 4: Manusear a função adotar()
Agora, remova o comentário multi-linha da função handleAdopt e cole o código abaixo.
// Part 1
var adoptionInstance;
web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}
var account = accounts[0];
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
// Execute adopt as a transaction by sending account
return adoptionInstance.adopt(petId, {from: account});
}).then(function(result) {
// Part 2
return App.markAdopted();
}).catch(function(err) {
console.log(err.message);
});
});
Agora, vamos entender o significado do código escrito acima.
- Parte 1 : Usaremos o web3 para recuperar as contas de usuário. Após a verificação de erro, selecionamos a primeira conta no retorno de chamada. Depois disso, vamos obter o contrato implantado e armazenar a instância em adoçãoInstância. Então enviaremos uma transação em vez de uma chamada. As transações requerem um endereço a partir e têm um custo associado. Enviamos a transação executando a função adote() com petID e um objeto contendo o endereço da conta, ou seja, conta.
- Parte 2 : O objeto de transação é o resultado do envio de uma transação. Se não ocorrerm problemas, executamos nossa função markAdopted() para sincronizar a interface do usuário com nossos dados recém-armazenados.
Passo 5: Aqui está o código completo do arquivo .js aplicativo
App = {
web3Provider: null,
contracts: {},
init: async function() {
// Load pets.
$.getJSON(‘../pets.json’, function(data) {
var petsRow = $(‘#petsRow’);
var petTemplate = $(‘#petTemplate’);
for (i = 0; i < data.length; i ++) {
petTemplate.find(‘.panel-title’).text(data[i].name);
petTemplate.find(‘img’).attr(‘src’, data[i].picture);
petTemplate.find(‘.pet-breed’).text(data[i].breed);
petTemplate.find(‘.pet-age’).text(data[i].age);
petTemplate.find(‘.pet-location’).text(data[i].location);
petTemplate.find(‘.btn-adopt’).attr(‘data-id’, data[i].id);
petsRow.append(petTemplate.html());
}
});
return await App.initWeb3();
},
initWeb3: async function() {
// Modern dapp browsers…
if (window.ethereum) {
App.web3Provider = window.ethereum;
try {
// Request account access
await window.ethereum.request({ method: “eth_requestAccounts” });;
} catch (error) {
// User denied account access…
console.error(“User denied account access”)
}
}
// Legacy dapp browsers…
else if (window.web3) {
App.web3Provider = window.web3.currentProvider;
}
// If no injected web3 instance is detected, fall back to Ganache
else {
App.web3Provider = new Web3.providers.HttpProvider(‘http://localhost:7545’);
}
web3 = new Web3(App.web3Provider);
return App.initContract();
},
initContract: function() {
$.getJSON(‘Adoption.json’, function(data) {
// Get the necessary contract artifact file and instantiate it with @truffle/contract
var AdoptionArtifact = data;
App.contracts.Adoption = TruffleContract(AdoptionArtifact);
// Set the provider for our contract
App.contracts.Adoption.setProvider(App.web3Provider);
// Use our contract to retrieve and mark the adopted pets
return App.markAdopted();
});
return App.bindEvents();
},
bindEvents: function() {
$(document).on(‘click’, ‘.btn-adopt’, App.handleAdopt);
},
markAdopted: function() {
var adoptionInstance;
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
return adoptionInstance.getAdopters.call();
}).then(function(adopters) {
for (i = 0; i < adopters.length; i++) {
if (adopters[i] !== ‘0x0000000000000000000000000000000000000000’) {
$(‘.panel-pet’).eq(i).find(‘button’).text(‘Success’).attr(‘disabled’, true);
}
}
}).catch(function(err) {
console.log(err.message);
});
},
handleAdopt: function(event) {
event.preventDefault();
var petId = parseInt($(event.target).data(‘id’));
var adoptionInstance;
web3.eth.getAccounts(function(error, accounts) {
if (error) {
console.log(error);
}
var account = accounts[0];
App.contracts.Adoption.deployed().then(function(instance) {
adoptionInstance = instance;
// Execute adopt as a transaction by sending account
return adoptionInstance.adopt(petId, {from: account});
}).then(function(result) {
return App.markAdopted();
}).catch(function(err) {
console.log(err.message);
});
});
}
};
$(function() {
$(window).load(function() {
App.init();
});
});
Agora, nossa interface de usuário foi criada com sucesso. O próximo passo é interagir com o DApp.
Interação com o DApp
Este é o passo final. Nesta seção, vamos interagir com o DApp. Para interagir com o DApp, siga este guia passo a passo.
Passo 1: Instalação do MetaMask
MetaMask é uma carteira cripto e porta de entrada da Web3 para DApps blockchain. Atualmente está disponível como uma extensão do navegador e um aplicativo móvel em dispositivos Android e iOS. Para baixar MetaMask, siga este guia passo a passo.
Passo 2: Adicionar Ganache ao MetaMask
Agora, vamos conectar metamask à blockchain criada pela Ganache CLI. Clique no ícone que mostra o Ethereum Mainnet. Em seguida, veremos uma opção para Adicionar rede. Clique em Adicionar botão de rede.
Agora, adicionaremos os seguintes parâmetros dados abaixo e clicaremos em Salvar.
- Nome: Ganache
- RPC-URL: http://127.0.0.1:8545
- ID em cadeia: 1337
Depois de salvar, veremos esta tela como mostrado abaixo. Cada conta criada por Ganache CLI recebe 1000 éter. Vamos notar menos éter como algum gás foi usado quando implantamos o contrato e executamos os testes.
Passo 3: Executando o DApp
Agora é hora de executar nosso DApp. Vamos para o segundo Terminal. Este comando lançará um novo servidor web local e abrirá uma nova guia de navegador com o nosso DApp. Cole este comando no terminal.
Depois de executar o comando acima, veremos a saída como mostrado na imagem abaixo.
Passo 4: Usando o DApp
- Agora, é hora de usar nosso DApp. Vamos adotar Gina. Clique no botão Adotar.
- Uma notificação metamask aparecerá e verá uma transação. Agora, clique em confirmar.
- Veremos uma nova notificação para transação confirmada.
- Agora, se voltarmos à seção de atividades da carteira MetaMask, podemos ver uma transação.
- Se voltarmos ao nosso DApp. Podemos ver que o botão adotar agora é alterado para sucesso.
Conclusão
Tentamos explicar tudo do zero de uma maneira passo a passo. Demos explicações e raciocínio para cada passo. Estamos felizes por todos que leram este artigo e criaram este DApp do zero sem experiência prévia de desenvolvimento de DApp. Criaremos um novo DApp emocionante do zero no próximo tutorial. Todos os créditos de código usado pertencem à Documentação trufá.
Perguntas frequentemente feitas
Quais são alguns DApps famosos?
CryptoMines, Bomb Crypto, Splinterlands e Axie Infinity são alguns DApps populares no mercado.
Como o DApp ganha dinheiro?
Os DApps podem ganhar dinheiro através de um lançamento de ICO, Anúncios, Taxas de Transação, Assinaturas, etc., e muito mais.
DApps tem futuro?
Os DApps continuarão a expandir-se a uma taxa exponencial no futuro. Embora esse processo leve tempo, 2022 é projetado para ver melhorias significativas e a disseminação da tecnologia blockchain e suas aplicações.
Por que a Web3 é o futuro?
A privacidade é a maior preocupação para usuários regulares em 2022. Na Web3, os usuários terão total propriedade de seus ativos. Ao contrário de agora, onde gigantes da tecnologia controlam a maioria das plataformas.
Onde podemos encontrar DApps?
Podemos encontrar todos os DApps populares no DApp Radar. É uma das melhores lojas de DApp disponíveis no mercado.
