WEB3DEV

Cover image for DApps Web3 de Ponta a Ponta com NFTs da Algorand e Contratos Inteligentes
Paulo Gio
Paulo Gio

Posted on

DApps Web3 de Ponta a Ponta com NFTs da Algorand e Contratos Inteligentes

https://miro.medium.com/v2/resize:fit:1100/0*Xvbz05Leb6gp2uXN

Introdução

A Web3 é uma pilha de protocolos que permitem aplicativos totalmente descentralizados. A tecnologia Web3 é inerentemente sobre a internet controlada pelo usuário. Isso está sendo alcançado por meio de uma pilha crescente de tecnologias descentralizadas, como blockchains, contratos inteligentes, oráculos, carteiras de criptomoedas, redes de armazenamento e muito mais.

Compreensão do Negócio

O cliente neste projeto é a 10 Academy, que deseja encontrar uma solução para o problema de disponibilizar credenciais com segurança para todos os aprendizes e, idealmente, permitir que os detentores de certificados lucrem com ações de contratos inteligentes tanto agora quanto no futuro. No momento, os certificados são fornecidos como arquivos PDF simples, tornando impossível confirmar sua validade para que a 10 Academy tome decisões informadas sobre os trainees ou seus contratos.

A 10 Academy se uniu à Algorand para usar a Blockchain Algorand como o elemento fundamental do NFT, e isso agora deve ser implementado. O objetivo deste projeto foi criar dApps Web3 de ponta a ponta na Blockchain Algorand, que ajudarão a 10 Academy a criar e distribuir Tokens Não Fungíveis (NFTs) como certificados para os trainees que completarem com sucesso um desafio semanal. Esses NFTs também permitirão que os trainees que os possuem interajam com um contrato inteligente para realizar ações pré-definidas.

Web3

Atualmente, os termos “web2” e “web3” são conceitos relativamente novos, utilizados para comercializar tecnologias blockchain. Blockchain refere-se a uma tecnologia que armazena e compartilha informações digitais em uma rede ponto a ponto de servidores de computador. Aqueles que têm acesso a uma blockchain não podem alterar ou excluir nenhum dado existente, mas podem visualizá-la, utilizar dados existentes ou adicionar novos dados.

As duas tecnologias mais populares da blockchain são as criptomoedas e os NFTs. A tecnologia Web3 é inerentemente focada em uma internet controlada pelo usuário. A Web3 é atraente porque permite interações ponto a ponto sem o uso de plataformas centralizadas e intermediários. Ela usa uma pilha de tecnologias, baseadas em blockchains descentralizadas, que possibilitam novos modelos sociais e de negócios. Os usuários possuem seus dados, identidade, conteúdo e algoritmos e participam como “acionistas” ao possuir tokens ou criptomoedas do protocolo.

Um número crescente de tecnologias descentralizadas, incluindo blockchains, contratos inteligentes, oráculos, carteiras de criptomoedas, redes de armazenamento e outros, estão ajudando a alcançar esse objetivo. A Web3 usa uma pilha de tecnologias, baseadas em blockchains descentralizadas, que possibilitam novos modelos sociais e de negócios. Os usuários possuem seus dados, identidade, conteúdo e algoritmos e participam como “acionistas” ao possuir os tokens ou criptomoedas do protocolo. Computação confiável fora da cadeia, que preserva a privacidade, integrada com contratos inteligentes na cadeia.

https://miro.medium.com/v2/resize:fit:1100/format:webp/1*sW9ZYzE5mLkkoQERIjJ4bA.png

Tecnologia Web3

Algorand - É uma blockchain escalável e de código aberto projetada para tornar mais fácil para os desenvolvedores construírem em uma blockchain. Ela alcança confiança por meio da descentralização e de ferramentas criptográficas, que garantem a imutabilidade do livro-razão compartilhado.

Blockchain - É um sistema no qual um registro de transações feitas em bitcoin ou outra criptomoeda é mantido em vários computadores que estão ligados em uma rede ponto a ponto. Uma blockchain é um livro-razão digital de transações, mantido por uma rede ponto a ponto de nós.

Frontend - É um aplicativo do lado do cliente que o navegador busca no servidor de hospedagem e renderiza para o usuário. Geralmente escrito em Angular, React e qualquer outro framework moderno;

Backend - É um aplicativo do lado do servidor. Geralmente é um aplicativo que assume toda a lógica pesada, incluindo o gerenciamento do banco de dados, interage com o lado do cliente por meio da API e é escrito usando uma das linguagens de backend populares: Java, NodeJS, C#, GO, Ruby, Python.

Contratos inteligentes - São trechos de código que vivem na blockchain. Eles operam dentro da blockchain e são imutáveis. Os contratos inteligentes são baseados em um acordo entre as partes. Uma transação ocorrerá se as regras escritas em contratos inteligentes forem executadas de acordo.

Carteira - Um endereço de carteira da blockchain serve como identidade de um indivíduo, além de armazenar as várias criptomoedas do proprietário. Esses programas armazenam as chaves públicas e privadas dos usuários e se comunicam com outras redes blockchain. Isso permite o rastreamento de ativos digitais, como Bitcoin, Ethereum e Litecoin.

Contas - São entidades na blockchain Algorand associadas a dados específicos da cadeia, como um saldo. Um endereço Algorand é um identificador para uma conta Algorand. Após a geração de uma chave privada e um endereço correspondente, o envio de Algos para o endereço na Algorand inicializará seu estado na blockchain Algorand.

Transações - Uma Transação de Transferência de Ativos é usada para aceitar o recebimento de um tipo específico de ativo do padrão Algorand, transferir um ativo do padrão Algorand ou revogar um ativo do padrão Algorand de uma conta específica.

NFT - Um token não fungível é um ativo financeiro composto de dados digitais mantidos em um livro-razão distribuído chamado blockchain. A blockchain registra a propriedade de um NFT, que pode ser transferido pelo proprietário, o que permite que os NFTs sejam vendidos e trocados.

Camadas da pilha de tecnologia da Web3

A Web3 é a pilha de protocolos que permite que aplicativos totalmente descentralizados e uma pilha de tecnologia descentralizada para começar a criar aplicativos descentralizados, que possuem suas próprias coleções de implicações e características. A pilha de tecnologia da Web3 é uma combinação de tecnologias e ferramentas distintas da pilha da Web2. A Web3 substitui bancos de dados e tecnologias centralizadas por tecnologias abertas e descentralizadas, como as blockchains. Essa é uma transição complexa e intrínseca. A transição de uma arquitetura cliente-servidor para uma web descentralizada não é radical.

https://miro.medium.com/v2/resize:fit:1100/0*_28vkJOa1e43oVrB

Camada de Protocolo — Localizada no fundo da pilha e composta pela arquitetura da blockchain subjacente, sobre a qual tudo o mais é construído. Após o Bitcoin, surgiram várias plataformas de contratos inteligentes de camada 1, como a Ethereum, a Solana, a Avalanche, a Cosmos, etc, que servem como base para muitas das aplicações Web3 atualmente em produção.

Primitivos de Infraestrutura / Categoria — A camada de infraestrutura fica logo acima da camada de protocolo e é composta de blocos de construção interoperáveis que são altamente confiáveis para realizar uma tarefa específica. Essa é uma camada densa e diversificada, com projetos construindo de tudo, desde softwares de auditoria de contratos inteligentes, armazenamento de dados, protocolos de comunicação, plataformas de análise de dados, ferramentas de governança de DAOs, soluções de identidade, primitivos financeiros e muito mais.

Camada de Serviços — Acima das camadas de protocolo e infraestrutura fica a camada de casos de uso, onde tudo se junta. Pegue um jogo baseado em blockchain como o Axie Infinity, que utiliza tokens Ethereum e NFTs que podem ser conectados a uma cadeia lateral de baixo custo/alto rendimento.

Camada de Acesso / Aplicações — É uma aplicação que serve como ponto de entrada para todos os tipos de atividades da Web3. A camada de aplicações da pilha Web3 inclui o navegador dapp, hospedagem de aplicativos, interfaces de usuário e dapp.

Implementação do Certificado Algorand Blockchain

O objetivo principal deste projeto é criar dApps Web3 de ponta a ponta na Blockchain Algorand, que ajudarão a 10 Academy a gerar e distribuir certificados de tokens não fungíveis (NFTs) que serão os símbolos da conclusão bem-sucedida dos desafios semanais pelos trainees e permitirão que os trainees com seus NFTs interajam com um contrato inteligente para realizar tarefas pré-definidas.

Passo 1 - Configuração do Algorand-Sandbox na Rede de Testes (testnet)

Instale o Sandbox

A Algorand fornece uma instância do docker para configurar um nó, que pode ser usada para começar o desenvolvimento rapidamente. Para instalar e usar esta instância, siga estas instruções.​

git clone https://github.com/algorand/sandbox.git
cd sandbox
./sandbox up testnet
Enter fullscreen mode Exit fullscreen mode

Instale o SDK

A Algorand fornece um SDK para Python que está disponível como um pacote pip. Para instalar o Python SDK, abra um terminal e execute o seguinte comando:​

pip3 install py-algorand-sdk
Enter fullscreen mode Exit fullscreen mode

Configure o aplicativo React

git clone https://github.com/BirhanuGebisa/Algorand-dapps_smart-contract.git
cd Algorand-NFTs-smartContracts
npm start
Enter fullscreen mode Exit fullscreen mode

Execute o aplicativo no modo de desenvolvimento. Abra http://localhost:8080 para visualizá-lo em seu navegador. Inicie o executor de teste no modo de observação interativo.

https://miro.medium.com/v2/resize:fit:1100/format:webp/1*EW9k-sghNYJWEM6igieQKQ.png

Passo 2 - Tecnologias e Implementação

A Algorand foi a rede blockchain usada para este projeto. Uma rede privada local foi inicializada para o desenvolvimento.

Frontend

HTML

O HTML (HyperText Markup Language) é o código usado para estruturar uma página da Web e seu conteúdo. HTML é amplamente utilizado para formatar páginas da Web com a ajuda de diferentes tags disponíveis na linguagem HTML.

CSS

O Cascading Style Sheets é uma linguagem de folhas de estilo usada para descrever a apresentação de um documento escrito em uma linguagem de marcação como HTML ou XML. O CSS é usado para tornar as páginas da Web mais atraentes. O motivo para usar o CSS é simplificar o processo de tornar as páginas da Web apresentáveis. Ele permite que você aplique estilos em páginas da Web.

JavaScript

O JavaScript é uma linguagem de programação leve e interpretada. Ele é projetado para criar aplicativos centrados em rede. O JavaScript simplesmente adiciona conteúdo dinâmico a sites para torná-los mais atraentes.

React

O React é uma biblioteca JavaScript de frontend gratuita e de código aberto, utilizada para criar interfaces de usuário baseadas em componentes de interface do usuário. É mantido pela Meta e uma comunidade de desenvolvedores e empresas individuais. Seu objetivo é permitir que os desenvolvedores criem facilmente interfaces de usuário rápidas para sites e aplicativos. O React é um framework de desenvolvimento de frontend ou, mais especificamente, uma biblioteca, que se tornou a favorita dos desenvolvedores em todo o mundo.

https://miro.medium.com/v2/resize:fit:828/format:webp/1*hH7tVEQ1fFWRCFWYEPtQ6w.png

Backend

Scripts Python (Algorand Python SDK)

Este projeto fez uso da rede blockchain Algorand e uma rede privada local foi iniciada para o desenvolvimento. Três contas que podem ser usadas para financiar outras novas contas e o desenvolvimento do aplicativo já foram criadas na rede secreta.

O Python SDK fornece métodos de API simples para criar, fazer backup e restaurar contas. Além disso, o SDK pode ser usado para criar e assinar transações, bem como criar e assinar com contas multiassinaturas. Esses métodos podem ser usados em operações online e offline, oferecendo amplas opções de integração. Por fim, o SDK também fornece clientes de ponto de extremidade (endpoint) REST para os dois processos de nó primários (kmd para gerenciamento de carteira de nó e algod para processamento de protocolo).

Os comandos a seguir constroem um objeto de cliente algod conectado à rede de testes da Algorand.

purestake_key = 'SUBSTITUA PELA CHAVE DE API PURESTAKE'
endpoint_address = 'https://testnet-algorand.api.purestake.io/ps1'
purestake_header = {'X-Api-key': purestake_key}
acl = algod.AlgodClient(purestake_key, endpoint_address, headers=purestake_header)
Enter fullscreen mode Exit fullscreen mode

O valor de purestake_key deve ser sua chave, conforme mostrado na página inicial do aplicativo PureStake API Services (Serviços de API da Purestake). O cabeçalho X-Api-key é especificamente necessário ao usar o PureStake API Service. Ele substitui o cabeçalho X-Algo-API-Token necessário ao acessar a API do nó da Algorand diretamente.

Os comandos abaixo definem vários desses valores úteis de transação:

params = acl.suggested_params()
gen_hash = params["genesishashb64"]
first_valid_round = params["lastRound"]
last_valid_round = first_valid_round + 1000
tx_fee = params["fee"]
tx_amount = 10000
Enter fullscreen mode Exit fullscreen mode

Observe que este código define o first_valid_round para a rodada ou a altura do bloco atual e o last_valid_round como 1000 blocos no futuro. Ao criar transações Algorand, elas têm validade máxima de 1000 rodadas ou blocos. Especificamos o valor da transação como 10.000.

Prepare e assine a transação:

tx = transaction.PaymentTxn(account_a, tx_fee, first_valid_round, last_valid_round, gen_hash, account_b, tx_amount)
signed_tx = tx.sign(account_a_private_key)
Enter fullscreen mode Exit fullscreen mode

Esses comandos preparam a transação tx e a assinam usando o mnemônico de chave privada. Neste ponto, o objeto signed_tx está pronto para ser enviado à rede.

Envie a transação:

tx_confirm = acl.send_transaction(signed_tx, headers={'content-type': 'application/x-binary'})
acl.status_after_block(first_valid_round + 2)
Enter fullscreen mode Exit fullscreen mode

A chamada acl.send_transaction envia a transação assinada.

Observe que o tipo de conteúdo para esta chamada precisa ser alterado para application/x-binary. Isso é necessário especificamente ao usar o PureStake API Service, mas não é necessário ao usar diretamente a API do nó. A chamada acl.status_after_block bloqueará a execução do programa até que dois blocos tenham passado (aproximadamente 9 segundos). Fazemos isso para garantir que nossa transação tenha sido registrada na blockchain antes de prosseguir com a execução de nosso programa. Sem essa espera, as leituras subsequentes podem não refletir a transação que acabamos de enviar.

Leia novamente o saldo da conta:

result = acl.account_info(account_a)
print(result["address"] + ": " + str(result["amount"]) + " microalgo")
Enter fullscreen mode Exit fullscreen mode

https://miro.medium.com/v2/resize:fit:1100/format:webp/1*XFFNklXdJeZVztvwrG2peQ.png

Lições Aprendidas

Fui capaz de adquirir muitos conceitos e implementações em apenas uma semana, como:

  • Os fundamentos da criação de um projeto React;
  • Criando um projeto no Flask com um padrão de design de fábrica;
  • Construindo componentes React relacionados a formulários;
  • Por que precisamos da WEB3, o que é e como funciona;
  • Empilhamento da WEB3;
  • Configurar o sandbox com docker-compose;
  • Por que as carteiras WEB3 são importantes;
  • Transações da Blockchain Algorand;
  • Como as carteiras podem ser utilizadas para autenticação única em dApps WEB3;
  • O que é uma blockchain e o que torna a Algorand única;
  • Transacionando na blockchain da Algorand.

Trabalhos Futuros

Finalmente, temos um plano para concluir o desenvolvimento do projeto acima adicionando os seguintes recursos:

  • Implementar a Rede Principal (Mainnet) para a geração de certificados;
  • Implementar totalmente o contrato inteligente com a blockchain da Algorand;
  • Gere a imagem do certificado diretamente usando uma entrada de formulário;
  • Uma maneira de associar privilégios para acessar mais do que apenas links de recursos com os NFTs do certificado.

Referências

  1. https://www.gartner.com/en/articles/what-is-web3
  2. https://www.leewayhertz.com/an-overview-of-web3-stack/
  3. https://developer.algorand.org/docs/get-started/dapps/
  4. https://edgeandnode.com/blog/definindo-the-web3-stack
  5. https://blog.coinbase.com/a-simple-guide-to-the-web3-stack-785240e557f0
  6. https://edgeandnode.com/blog/definindo-the-web3-stack
  7. https://www.purestake.com/blog/algorand-python-sdk/

Artigo original publicado por Birhanu Gebisa. Traduzido por Paulinho Giovannini.

Top comments (0)