O que você irá construir, veja a na rede de testes Bitfinity e no . demonstração ao vivo repositório git Introdução Bem-vindo a este guia abrangente onde construiremos uma plataforma de caridade descentralizada Web3 usando Next.js, Solidity e TypeScript. Ao final deste tutorial, você terá uma compreensão clara de: Construindo interfaces dinâmicas com Next.js Elaborando contratos inteligentes Ethereum com Solidity Incorporando verificação de tipo estático usando TypeScript Implantando e interagindo com seus contratos inteligentes Compreender os fundamentos das plataformas de caridade baseadas em blockchain Como bônus por participar deste tutorial, você pode facilmente ganhar uma cópia de nosso prestigiado livro sobre como se tornar um desenvolvedor requisitado. Esta oferta é gratuita para as primeiras . Para obter instruções sobre como ganhar, assista ao pequeno vídeo abaixo. de solidez 300 pessoas Pré-requisitos Você precisará das seguintes ferramentas instaladas para construir comigo: Node.js Fio Git Bash MetaMask Próximo.js Solidez Kit de ferramentas Redux CSS do vento favorável Para configurar o MetaMask para este tutorial, assista ao vídeo instrutivo abaixo: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true Depois de concluir a configuração, você estará qualificado para receber uma cópia gratuita de nosso livro. Para reivindicar seu livro, . preencha o formulário para enviar sua prova de trabalho Assista aos a seguir para receber até 3 meses de cursos premium gratuitos em vídeos instrutivos Academia de Mentores Dapp, incluindo: Curso Fullstack de cunhagem NFT Curso Fullstack NFT Marketplace Curso Blockchain Fullstack etc. Comece sua jornada com Bitfinity hoje. Experimente um processo de desenvolvimento rápido, simples e descomplicado ao criar seu primeiro dApp de rastreamento de doações de caridade. Implante seus contratos inteligentes na rede Bitfinity e cause um impacto positivo. Dito isso, vamos pular para o tutorial e configurar nosso projeto. Configurar Começaremos clonando um repositório frontend preparado e configurando as variáveis de ambiente. Execute os seguintes comandos: git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain A seguir, crie um arquivo na raiz do projeto e inclua as seguintes chaves: .env NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret Substitua e pelos seus respectivos IDs de projeto. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID Obtenha a chave aqui WALLET_CONNECT_PROJECT_ID Obtenha a chave aqui Finalmente, execute para iniciar o projeto. yarn dev Nosso frontend para este projeto é sólido e pronto para alguma integração de contrato inteligente, mas precisaremos do Reduxify nosso aplicativo para permitir um espaço de dados compartilhado. Construindo a Loja Redux A imagem acima representa a estrutura da nossa loja Redux, será simples já que não estamos criando um projeto muito complexo. Configuraremos o Redux para gerenciar o estado global de nosso aplicativo. Siga esses passos: Crie uma pasta na raiz do projeto. store Dentro , crie duas pastas: e . store actions states Dentro , crie um arquivo . states globalStates.ts https://gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true Dentro , crie um arquivo . actions globalActions.ts https://gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true Crie um arquivo dentro da pasta . globalSlices.ts store https://gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true Crie um arquivo dentro da pasta . index.ts store https://gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Atualize o arquivo com o provedor Redux. pages/_app.ts https://gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true Nosso aplicativo foi empacotado com o kit de ferramentas Redux e revisitaremos o Redux ao integrar o backend com o frontend. Desenvolvimento de Contrato Inteligente A seguir, desenvolveremos o contrato inteligente para nossa plataforma: Crie uma pasta na raiz do projeto. contracts Dentro de , crie um arquivo e adicione o código do contrato abaixo. contracts DappFund.sol https://gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true O contrato facilitará a criação, atualização e doação para instituições de caridade, bem como funções administrativas como alteração do imposto de caridade e proibição de uma instituição de caridade. DappFund Aqui está uma análise função por função: : esta função define o imposto de caridade inicial quando o contrato é implantado. É executado apenas uma vez durante a implantação do contrato. constructor() : Esta função permite aos usuários criar uma nova instituição de caridade. Requer vários parâmetros como nome, descrição, imagem, perfil e valor da instituição de caridade. Ele verifica se esses parâmetros são válidos e, em seguida, cria um novo e o adiciona ao mapeamento de . createCharity() CharityStruct charities : Esta função permite que o proprietário de uma instituição de caridade atualize seus detalhes. Ele verifica se a instituição de caridade existe e se o remetente é o proprietário da instituição de caridade antes de atualizar os detalhes da instituição de caridade. updateCharity() : Esta função permite que o proprietário de uma instituição de caridade marque-a como excluída. Ele verifica se a instituição de caridade existe e se o remetente é o proprietário da instituição de caridade antes de marcá-la como excluída. deleteCharity() : Esta função permite ao proprietário do contrato banir ou cancelar o banimento de uma instituição de caridade. Ele verifica se a instituição de caridade existe antes de alterar seu status de banido. toggleBan() : Esta função permite aos usuários doar para uma instituição de caridade. Ele verifica se a instituição de caridade existe, não está banida e ainda não atingiu sua meta de arrecadação de fundos. Em seguida, ele aumenta a contagem total de doações, cria um novo e o adiciona ao mapeamento . Ele também atualiza o valor arrecadado e a contagem de doações da instituição de caridade. donate() SupportStruct supportersOf : Esta função permite que o proprietário do contrato altere o imposto de caridade. Verifica se o novo percentual do imposto é válido antes de atualizar o imposto. changeTax() : Esta função permite que qualquer pessoa obtenha os detalhes de uma instituição de caridade. Ele retorna o associado ao ID fornecido. getCharity() CharityStruct : Esta função permite que qualquer pessoa obtenha os detalhes de todas as instituições de caridade ativas. Ele retorna uma matriz de objetos . getCharities() CharityStruct : Esta função permite ao usuário obter os detalhes de todas as suas instituições de caridade ativas. Ele retorna uma matriz de objetos . getMyCharities() CharityStruct : Esta função permite que qualquer pessoa obtenha os detalhes de todos os apoiadores de uma instituição de caridade específica. Ele retorna uma matriz de objetos . getSupports() SupportStruct : Esta função interna é usada para transferir fundos. Ele envia a quantidade especificada de Ether para o endereço fornecido. payTo() : Esta função interna retorna o tempo atual em segundos desde a época Unix. É usado para registrar a data e hora de doações e criações de caridade. currentTime() Implantação e propagação de contrato Agora, vamos implantar nosso contrato inteligente e preenchê-lo com alguns dados fictícios: Crie uma pasta na raiz do projeto. scripts Dentro , crie um arquivo e um e adicione os seguintes códigos. scripts deploy.js seed.js Implantar script https://gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true Script Semente https://gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true Execute os seguintes comandos para implantar o contrato e propagá-lo com dados: yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2 Se você fez isso corretamente, deverá ver uma saída semelhante a esta abaixo: Neste ponto podemos iniciar a integração do nosso contrato inteligente ao nosso frontend. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true Integração de front-end Primeiro, crie uma pasta na raiz do projeto e, dentro dela, crie um arquivo . Este arquivo conterá funções para interagir com nosso contrato inteligente. services blockchain.tsx https://gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true O código fornecido é uma implementação TypeScript do nosso serviço blockchain para interagir com nosso contrato inteligente. Este serviço permite que os usuários realizem ações em nossa plataforma de caridade, incluindo criar e atualizar instituições de caridade, fazer doações e muito mais. Aqui está uma análise função por função: : esta função obtém as instâncias do contrato Ethereum com as quais o serviço irá interagir. Ele verifica se o usuário possui uma conta Ethereum conectada e a utiliza para interagir com o contrato, caso contrário, utiliza uma carteira criada aleatoriamente. getEthereumContracts() : Esta função retorna o proprietário do contrato. getAdmin() , , : Essas funções buscam todas as instituições de caridade, as instituições de caridade criadas pelo usuário atual e uma instituição de caridade específica por seu ID, respectivamente. getCharities() getMyCharities() getCharity() : Esta função busca os apoiadores de uma instituição de caridade específica por seu ID. getSupporters() , : Essas funções permitem que um usuário crie uma nova instituição de caridade ou atualize uma instituição de caridade existente, respectivamente. createCharity() updateCharity() : Esta função permite que um usuário faça uma doação para uma instituição de caridade específica. makeDonation() : Esta função permite que o proprietário de uma instituição de caridade a exclua. deleteCharity() : Esta função permite ao proprietário do contrato banir uma instituição de caridade. banCharity() , : Estas são funções auxiliares que estruturam os dados retornados do contrato em um formato mais utilizável. structuredCharities() structuredSupporters() Atualize o arquivo dentro para incluir a rede usando os códigos a seguir. provider.tsx services bitfinity https://gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true Página interagindo com contrato inteligente A seguir, vincularemos as funções do serviço blockchain às suas respectivas interfaces no frontend: para obter dados da função . Nº 1: Exibindo todas as pages/index.tsx getCharities() https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true Observe como o Redux é usado para armazenar dados do blockchain antes de serem exibidos na tela. Atualize para usar o gancho para obter as instituições de caridade do usuário atual. Nº 2: Exibindo as instituições de caridade do usuário pages/projects.tsx useEffect() https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true Observe o uso do gancho para recuperar as instituições de caridade do usuário atual e como o Redux é usado para manipular e exibir dados do blockchain em vários componentes. Este será um padrão repetido nas páginas e componentes. useEffect() Atualize para usar a função para envio de formulários. Nº 3: Criando novas instituições de caridade pages/donations/create.tsx createCharity() https://gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true de atualização de caridade única para usar as funções , e para recuperar instituições de caridade e apoiadores por ID. Nº 4: Exibindo pages/donations/[id].tsx getServerSideProps() getCharity() getSupporters() https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true Atualize para usar a função para recuperar caridade por ID e preencher os campos do formulário. Nº 5: Editando instituições de caridade existentes pages/donations/edit/[id].tsx getCharity() https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true Você viu como a função foi usada para recuperar caridade por Id e também como foi usada para preencher os campos do formulário? getCharity() Componentes com Contrato Inteligente Assim como fizemos nas páginas acima, vamos atualizar os seguintes componentes para interagir com o contrato inteligente: Atualize para usar a função para chamar a função . Nº 1: Tratamento do banimento de caridade components/Ban.tsx handleBanning() banCharity() https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true o arquivo para usar as funções e para executar um procedimento de exclusão de caridade. Nº 2: Tratamento de exclusão de caridade Atualize components/Delete.tsx handleDelete() deleteCharity() https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true Atualize o arquivo para usar a função para enviar o pagamento ao contrato inteligente usando a função . Nº 3: Fazendo doações para instituições de caridade components/Donor.tsx handleSubmit() makeDonation() https://gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true Outros componentes Aqui estão os demais componentes que você também deve atualizar devido à integração do Redux neles. Revise e atualize o componente que permite aos usuários navegar, excluir e editar informações de caridade. Utilize Redux para acionar o modal de exclusão ao clicar. O componente NavBtn https://gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true Revisar e atualizar a implementação do Redux para acionar os modais de doação, apoiadores e banimento ao clicar em seus respectivos botões. O Componente de Pagamento https://gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true Revise e atualize a implementação do Redux para fechar o modal de apoiadores quando o botão Fechar for clicado. O Componente de Suporte https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true Ao implementar essas atualizações, todos os componentes e páginas ficam agora conectados ao contrato inteligente, marcando a conclusão do projeto. Se o seu servidor ficou inativo durante todo esse tempo, você pode ativá-lo novamente executando . Nextjs yarn dev Para aprender mais, recomendamos assistir ao vídeo completo desta construção em nosso . canal no YouTube Conclusão Neste tutorial, construímos uma plataforma de caridade descentralizada usando Next.js, Solidity e TypeScript. Configuramos o ambiente de desenvolvimento, construímos a loja Redux e implantamos o contrato inteligente no blockchain. Ao integrar o contrato inteligente ao frontend, criamos uma experiência de usuário perfeita. Ao longo do tutorial, você adquiriu habilidades valiosas na construção de aplicativos Web3, na elaboração de contratos inteligentes e na incorporação de verificação de tipo estático. Agora você está pronto para criar sua própria plataforma de caridade descentralizada. Boa codificação e libere sua inovação no mundo da Web3!
