Tutoriais passo a passo para criar um novo dApp personalizado com o Celo Composer.

Olá Devs!

Vamos dividir um tópico da blockchain em pedaços pequenos na postagem de hoje para facilitar o estudo e colocar seu novo conhecimento em uso.

Aprenderemos como usar o Celo composer para desenvolver e lançar novos dApps.

Aqui está uma lista do que iremos cobrir

• Instalar a CLI do Celo composer
• Configurar um novo dApp
• Desenvolver novo projeto
• Instalar e configurar a Metamask
• Financiar sua carteira testnet
• Desenvolver o contrato inteligente
• Implantar contrato inteligente
• Interagir com seu dApp

Ao final desta postagem, você poderá criar, implantar, interagir e hospedar seu novo dApp usando o Celo Composer.

Vamos lá!

Passo 1: Instalar a CLI do Celo composer

Abra seu terminal para instalar a CLI do Celo composer globalmente em seu computador. Isso permite que você crie rapidamente novos dApps usando o Celo composer!

Execute npm install @celo/celo-composer -g

DICA:

Você pode visualizar a lista de pacotes NPM instalados globalmente.

Execute npm list -g

Se você tiver o pacote Celo composer npm instalado em seu computador. Desenvolver novos dApps com sua estrutura de front-end preferida torna-se rápido.

Passo 2: Configurar um novo dApp

Navegue até a pasta do seu projeto

cd project-folder-example

Crie um novo projeto do Celo composer

npx @celo/celo-composer create

Selecione a estrutura de front-end desejada

React (com exemplos, requer a implantação do hardhat) é o padrão. No meu caso, selecionarei o padrão.

Escolha a estrutura de contrato inteligente

Hardhat (padrão)

Criar um Sub-gráfico

No (padrão)

Inserir o nome do projeto

custom_celo_dapp

Você sempre pode usar os processos descritos acima para criar um novo dApp que pode ser implantado na blockchain Celo e em qualquer outra rede de sua escolha.

DICA:

Um novo dApp pode ser configurado em apenas seis etapas usando as estruturas escolhidas. Isso torna o projeto menos volumoso. Nenhuma outra estrutura será criada. Ambas as estruturas podem ser encontradas no diretório /package.

Passo 3: Desenvolver um novo projeto

Navegue até o novo diretório do projeto cd custom_celo_dapp

Inicie seu editor de código code.

Passo 4: Instalar e configurar a Metamask

Se você já possui a Metamask instalada em seu navegador, sinta-se à vontade para pular esta seção.

Visite o URL da Metamask

Visite metamask.io

• Selecione download
• Selecione Instalar Metamask para Chrome
• Clique em Adicionar ao Chrome para adicionar a extensão Metamask
• Concorde com a Política de Privacidade da Metamask
• Selecione Criar uma carteira para criar uma nova carteira Metamask
• Concorde com o termo de uso
• Frase secreta de recuperação

Atenção: Esta é a chave principal para recuperar sua conta Metamask. Mantenha-a confidencial.

• Confirme sua Frase de Recuperação. Insira a frase em ordem e clique em Confirmar

Bum! Sua extensão Metamask foi configurada com sucesso.

Conecte-se a uma rede de teste

• Clique no menu suspenso de rede no canto superior direito da Metamask
• Selecione mostrar/ocultar rede
• Ative a opção Mostrar rede de teste
• Fechar a página de configurações da Metamask

Conecte a rede de teste Celo à Metamask

• Visite chainlist.org
• Ativar redes de teste
• Pesquise alfajores na barra de pesquisa
• Selecione Adicionar à Metamask
• Clique em Aprovar para habilitar a conexão com a Metamask
• Selecione Alternar rede

A rede de teste Alfajores da Celo foi adicionada com sucesso às suas redes de teste da Metamask.

Passo 5: Financiar sua carteira testnet

Receba fundos da torneira (faucet) Celo

Receba fundos adicionais

• Copie o endereço da sua conta para a torneira Celo
• Cole o endereço da carteira Alfajores da Celo
• Selecione Não sou um robô
• Iniciar

Sua conta será creditada com 1 token nativo CELO.

Passo 6: Desenvolver o contrato inteligente

Conecte sua carteira ao contrato inteligente

• Abra a Metamask
• Clique nos três pontos no canto superior direito
• Selecione os detalhes da conta
• Selecione exportar chave privada para revelar a chave privada
• Copie a chave privada e clique em concluído para fechar a configuração da conta
• Navegue para /packages/hardhat/
• Renomeie /packages/hardhat/.envexample para /packages/hardhat/.env
• Cole sua chave privada como um valor de PRIVATE_KEY

PRIVATE_KEY="242a32639923e6292c2d92fcd10853809e9246850b0ee6b2680f6232122b435a"

Crie seu arquivo de contrato inteligente

• Navegue para /packages/hardhat/contracts
• Crie um novo arquivo chamado /Messanger.sol
• Abra /packages/hardhat/contracts/Greeters.sol, copie todo o código nele
• Cole o código em /Messanger.sol
• Refatore o código

Escreva seu script de implantação

• Abra /packages/hardhat/deploy/00-deploy.js
• Adicione o script de implantação como o contrato Greeter
• Inclua o novo contrato na matriz module.exports

Passo 7: Implantar seu contrato inteligente

• Abra seu terminal e navegue até /packages/hardhat
• Execute yarn install para instalar as dependências do projeto
• Execute yarn deploy para compilar e implantar contratos

Verifique seu saldo

Abra a Metamask e verifique sua carteira para ver seu saldo, você notará que agora tem menos tokens CELO. Isso se deve ao custo do gás para implantar seus contratos inteligentes na blockchain.

Verificar contrato inteligente

Para verificar seu contrato inteligente, acesse Celo Block Explorer. Qualquer pessoa pode visualizar seu contrato e se envolver com suas funções usando o Celo Block Explorer.

• Visite www.explorer.celo.org
• Selecione a rede de teste Alfajores da Celo no menu suspenso de rede na navegação
• Cole o endereço da sua carteira na barra de pesquisa
• Selecione a conta carregada para visualizar suas transações

Veja a ABI do contrato inteligente

Por fim, você pode visualizar a ABI (interface binária de aplicação) do seu contrato inteligente em /deployments/alfajores/Messanger.json.A ABI é a interface que permite acessar as funções do seu contrato inteligente a partir do front-end do seu dApp.

Passo 8: Interagir com seu dApp

Iniciar o front-end

• Abra seu terminal e navegue até /packages/react-app
• Execute yarn install para instalar as dependências front-end
• Execute yarn dev para iniciar seu ambiente de desenvolvimento
• Visite http://localhost:3000 para visualizar seu projeto

Testar contrato inteligente

• Selecione o novo contrato na navegação
• Abra a função writeMessage
• Valor de entrada e transação
• Autorizar Metamask
• Verifique o contrato usando o Celo block explorer

Parabéns!

Isso conclui a discussão de Criar um novo dApp personalizado na blockchain Celo usando o Celo composer. Você pode revisar cada um dos tópicos que discutimos abaixo para garantir que está pronto para usar suas novas habilidades.

Aqui está uma lista do que cobrimos

• Instalar a CLI do Celo composer
• Configurar um novo dApp
• Desenvolver um novo projeto
• Instalar e configurar a Metamask (opcional)
• Financiar sua carteira testnet
• Desenvolver o contrato inteligente
• Implantar contrato inteligente
• Interagir com seu dApp

Contribua com o projeto

Celo agradece contribuições ao repositório! Se você decidir tentar isso e encontrar algo confuso, considere abrir um pull request para deixar as coisas mais claras para o próximo desenvolvedor. Se você melhorar a interface do usuário ou criar novos componentes que possam ser úteis para outros desenvolvedores, considere abrir um pull request.

Artigo escrito por Azeez Abidoye e traduzido por Marcelo Panegali