React Native e Celo: Crie Facilmente DApps React Native no Celo.

Desenvolva rapidamente aplicativos para Android e iOS no Celo usando o Celo Composer para React Native.

O Celo Composer é um conjunto de modelos criados pela Celo para reduzir o tempo até a primeira saída para desenvolvedores que criam dApps no ecossistema Celo. O objetivo é melhorar a experiência do desenvolvedor. O modelo está configurado para funcionar imediatamente, mas também torna a personalização o mais fácil possível.

Neste artigo, você passará pela versão React Native do modelo. Você aprenderá como interagir com contratos inteligentes implantados na blockchain Celo usando um dApp React Native. Se você planeja construir ou já está construindo dApps móveis no Celo, considere ler até o final.

Aqui está uma lista de coisas que iremos abordar neste artigo:

• Pré-requisitos;
• Configurando o projeto;
• Implantação de contratos inteligentes;
• Baixando o Expo Go​;
• Baixando a testnet Valora;
• Financiar Valora com moedas testnet;
• Explorando o dApp móvel;
• Personalizando o dApp

Pré-requisitos

Antes de começarmos, você precisará instalar alguns pacotes e dependências, aqui está uma lista deles.

• Node v12+
• Yarn / NPM
• Python (requer node-gyp)
• windows-build-tools (somente para Windows)

Uma vez instaladas as dependências, é hora de começarmos a configurar o modelo.

Configurando o projeto

therealharpaljadeja/celo-composer no Github

• Acesse o repositório aqui.
• Clique no botão Use this template para obtê-lo em seu perfil no GitHub.

Uma vez feito, clone o repositório para trabalhar nele em sua máquina local.

Isto é o que eu recebo quando eu cliquei no botão Use this template

Uma vez clonado, precisamos instalar expo e expo-cli globalmente, pois estamos usando o Expo para construir nosso aplicativo. Abra um terminal e use o comando abaixo yarn global expo expo-cli para instalar globalmente expo e expo-cli.

npm i -g expo expo-cli

É hora de instalarmos as dependências do pacote. No seu terminal, navegue até <your_repo_name>/packages/react-native-app e use o comando abaixo em seu terminal.

yarn install --ignore-engines

Neste ponto, você está pronto para começar a executar o aplicativo em seu servidor local, use o comando abaixo.

expo start

Uma vez que o comando for executado, você verá um código QR no terminal.

Código QR que recebi quando executei *expo start no meu terminal*

Graças a Expo, existem várias maneiras de acessar seu aplicativo.

Maneiras de executar o aplicativo, dependendo do dispositivo.

Se você quiser usar o Android Studio digite A no teclado e ele iniciará o Android Studio.

Observação: Se você deseja acessar usando o Android Studio, certifique-se de ter um dispositivo virtual com suporte à play store.

Se você pressionar W, ele será aberto no seu navegador. Neste tutorial, você acessará o aplicativo usando um dispositivo móvel. Porque é assim que o usuário do seu app vai acessar, não é?

Para isso, precisamos instalar o Expo Go App em nosso dispositivo de escolha. Antes de começarmos a usar o aplicativo, também precisamos implantar os contratos inteligentes com os quais planejamos interagir, então vamos fazer isso agora.

Implantando contratos inteligentes

Contratos inteligentes são como o back-end do seu dApp. A maior parte da lógica reside em contratos inteligentes. Vamos implantar contratos na testnet Alfajores, pois não espero que você use fundos reais para seguir este tutorial.

Você pode ver isso no arquivo hardhat.config.json que está na pasta /packages/hardhat

hardhat.config.json

Antes de implantarmos nossos contratos, vamos ver qual conta usaremos para isso. Você pode usar o comando abaixo no seu terminal para fazer isso. Verifique se você está na pasta /packages/hardhat.

npx hardhat accounts

Você pode adicionar sua própria conta, se quiser. Vamos implantar os contratos inteligentes usando o comando abaixo em seu terminal.

npx hardhat deploy --network alfajores

Especificamos a rede na qual queremos implantar no comando.

Saída do terminal para implantação de contrato inteligente.

Você pode ver o hash da transação e o endereço onde o contrato reside na cadeia Alfajores.

Quando você quiser implantar novos contratos, precisará excluir a respectiva pasta de rede.

Você não precisa se preocupar em copiar os endereços do contrato no projeto react-native-app, porque nós o conectamos de tal forma que pegamos o endereço dos arquivos JSON.

Apenas para recapitular, terminamos da seguinte forma:

• Configuração do projeto;
• Servidor de aplicativos ativado;
• Contratos inteligentes implantados.

Agora iremos aprender sobre as seguintes etapas:

• Obtenha uma carteira Celo (Valora para este tutorial)
• Obtenha alguns fundos testnet.
• Baixe o aplicativo Expo Go no seu dispositivo móvel de escolha

Para interagir com contratos inteligentes na blockchain, precisamos de uma carteira, especificamente a carteira Celo neste caso. Para este tutorial, você usará a carteira Valora, que é a carteira preferida da Celo, você pode usar outras carteiras como Metamask, mas não poderá usar stablecoins como taxas de gas.

Baixando a Testnet Valora

Neste post, você usará a testnet Alfajores com o aplicativo Valora. Isso permite que você crie dApps usando fundos de teste, o que permite evitar gastar dinheiro real durante o desenvolvimento.

Baixe a Carteira Celo Alfajores na Play Store ou App Store.

Uma vez baixada, clique no botão Create New Account (recomendado). Caso você tenha uma conta de teste na testnet, clique no botão Restore my account.

Em seguida, configure sua conta.

Se você criou uma nova conta, seu saldo será zero e precisamos ter alguns fundos para começar a interagir com os contratos implantados na testnet.

Agora você pode obter alguns fundos faucet da Celo para que possamos interagir com os contratos inteligentes implantados. Mesmo que você esteja usando o aplicativo, eventualmente, você acaba interagindo diretamente com os contratos inteligentes, o aplicativo é apenas uma interface para facilidade de uso.

Carteira de financiamento com moedas de teste

Copie seu endereço.

No navegador acesse — https://celo.org/developers/faucet

Cole seu endereço, complete o captcha e toque em Get Started.
Após alguns segundos, se você voltar ao seu aplicativo, deverá ver o token faucet recebido.

Tenha em mente que estes não são fundos reais, eles são necessários para interagir com a testnet. Você está finalmente pronto para brincar com o aplicativo inicial.

Explorando o DApp Móvel

Digitalize o código QR mostrado no terminal usando o Expo App para abrir o aplicativo em seu dispositivo. No momento em que você vir o Metro Bundler começará a agrupar o código e, uma vez feito isso, seu dispositivo começará a baixá-lo.

Uma vez feito, você deve ver uma tela como esta.

Observação: neste ponto, se você for redirecionado para um navegador e para o site WalletConnect, isso significa que você está usando o Android 11 ou superior. Existe etapas para resolver isso no readme do repositório do Github.

Toque em Connect Wallet para obter um prompt para selecionar a carteira de sua escolha. (Para este tutorial a carteira Alfajores)

Você verá uma tela solicitando permissão para o aplicativo inicial obter os detalhes da sua conta, como o endereço da conta. Clique em Allow.

Se for bem-sucedido, você verá uma notificação como esta.

Se você voltar para o Expo App, verá que nossa conta está conectada.

Você pode usar a interface para interagir com o contrato de saudação padrão. O endereço sublinhado é o endereço do contrato de saudação. O toque o levará ao explorador.

Tente tocar no botão Read Greeter Contract e veja se você recebe uma saudação. Sua saída pode ser diferente, uma vez que já a usou antes.

Você pode atualizar a saudação usando o campo de entrada. Depois de inserir sua saudação no campo, toque em Update Greeter Contract.

Uma vez que você está fazendo uma operação de escrita no contrato, precisamos assinar esta transação e isso lhe custará fundos, não se preocupe, estamos na testnet, então não usaremos dinheiro real.

Você deverá ver uma tela como esta, Alfajores está perguntando se deseja prosseguir com a transação.

Clique em Allow para continuar, isto irá realizar uma atualização no contrato de saudação.

Uma vez feito, se você voltar para o Expo App, podemos clicar em Read Greeter Contract para ver nossa atualização de saudação.

Da mesma forma, há uma tela para Storage Contract e uma tela para Account Info, para visualizar o endereço da sua conta e desconectar a carteira.

Por enquanto, essas são todas as telas que temos, mas estamos planejando adicionar mais. Espere mais atualizações neste modelo inicial. Mas espere que há mais!

Personalizando o DApp

Tentamos fornecer uma quantidade razoável de personalizações que podem ser feitas no modelo inicial e nós da Celo estamos trabalhando duro para facilitar cada vez mais, personalizar e também temos planos para ter vários componentes que podem ajudar no desenvolvimento de dApps móveis.

Estrutura de pastas para acessar rapidamente o arquivo que você deseja modificar.

Por enquanto, aqui está uma lista de coisas que você pode fazer:

• Adicionar uma tela inicial: adicione a imagem da tela inicial dentro de /assets/images
• Alterar as cores do aplicativo: Edite Colors.ts em /constants
• Adicione opacidade aos botões: Dentro de /components, você verá que adicionei alguns componentes modificados TouchableOpacity para parecer um botão com cor, fique à vontade para editá-lo como quiser.
• Organizar estilos de componentes: Há também um ThemeProvider.ts em /context que usa React Native StyleSheet para organizar estilos de componentes, brinque com ele como quiser.
• Organize seus estilos: Não é necessário levar o modelo como está para fins de design, você pode ter sua própria maneira de organização de código para cores e estilos.
• Adicionar mais telas: Para adicionar mais telas ao seu aplicativo, há uma pasta /screens para adicionar mais arquivos de tela, para fins de organização do código.
• Adicionar à interface: No entanto, para adicioná-lo à interface, confira o LinkingConfiguration.ts em /navigation
• Adicionar abas: index.tsx dentro de /navigation tem o código para o BottomTab de navegação onde você pode adicionar mais abas para várias telas.
• Adicionar *drawer navigation*: após 3 a 4 telas BottomTab pode não ser a escolha certa para adicionar mais guias, então confira os documentos para Drawer Navigator.
• Alterar nomes de aplicativos: consulte para editá-lo dentro de index.js da linha número 15.
• Adicionar contratos: adicione arquivos solidity em /hardhat/contracts

No final, é um projeto React Native baseado em Expo, para que possa ser personalizado como você quiser. Sinta-se à vontade para relatar quaisquer problemas na guia Issues no repositório do Github e, se você planeja contribuir, receberemos você de mãos abertas.

Referências externas

Aqui estão alguns links que podem ajudar se você quiser explorar mais.

React Native — Biblioteca para criar aplicativos multiplataforma.
Expo — Framework React Native.
React Navigation — Biblioteca para ajudar na navegação de telas.
Hardhat — Biblioteca para ajudar com testes e implantação de contratos inteligentes.
Solidity — Linguagem usada para escrever contratos inteligentes.
WalletConnect — Biblioteca para acessar carteiras de instalação móvel em nossos dApps.

---

Este artigo foi escrito por Harpal Jadeja e traduzido por Marcelo Panegali. O artigo original pode ser encontrado aqui.