Aprendendo React Native #2 – Obtendo dados da API do Covid-19

Neste artigo mostro como obter dados de uma API pública com dados atualizados do Covid-19, o Corona Vírus. Estes dados serão exibidos em uma tela de celular, usando React Native. Será necessário também ter instalado em sua máquina o Node.js e um celular com Android pra testar (não usarei nem o Expo nem o Android Studio, pra simplificar o exemplo, apesar deste último ser necessário estar instalado em sua máquina).

Em um artigo anterior desta série mostrei como realizar as configurações para rodar uma aplicação básica do React Native em uma tela de celular Android, confira o artigo caso precise configurar ou instalar algo, esse artigo já supõe o seu prévio conhecimento inicial destas configurações, além é claro do conhecimento básico de Javascript.

Agora imaginando que você irá criar seu projeto no caminho C:\Users\<SeuUsuário>\Desktop, rode o seguinte comando (ele irá criar uma pasta para o projeto automaticamente).

npx react-native init ExemploCovid

Citei no artigo anterior do problema que tive no VS Code após criar o projeto, caso você tenha o mesmo problema dê uma passada lá que coloquei a solução que encontrei.

Agora entre em seu editor de códigos de preferência, eu utilizo o Visual Studio Code, e abra a pasta do seu projeto, você terá uma visão parecida com essa, talvez com menos arquivos mas é pra ser algo como isso.

Entendendo o básico do React Native

Ao abrir o arquivo App.js temos o código padrão gerado, após mandar o React criar o projeto. Se você quiser pode fazer um backup do código pra fins de aprendizado, vou seguir o exemplo com uma tela vazia. Caso queira o código fonte desse arquivo basta rodar novamente o comando pra criar o projeto, apontando pra outra pasta.

PS: Ao final do artigo terá o código fonte completo para download no Github.

Começando com a estrutura básica padrão de um arquivo em React Native:

Primeira coisa pra começar a desenvolver pro React Native é importar a biblioteca do React para poder utilizar o JSX (Javascript XML), que é basicamente uma extensão de sintaxe baseada em XML para fins de simplicidade e elegância do código. É possível não utilizar JSX para montar a sintaxe usando React ou mesmo React Native, mas é o que o mercado utiliza e a forma mais facilitada para escrever códigos em RN, então vou seguir com ele.

Como bem explicado na documentação do JSX, ao invés de separar tecnologias artificialmente colocando markup e lógica em arquivos separados, o React separa conceitos com unidades pouco acopladas chamadas “componentes” que contém ambos.

Note que o primeiro import busca da biblioteca do React enquanto o segundo busca do próprio RN, para montar os campos que serão exibidos no celular.

Depois é declarado uma classe que neste caso funciona e poderia ser igual a uma função do Javascript (lembrando que no fim das contas é tudo Javascript), que por sua estende (herda) do objeto Component.

Logo no início desta classe chamo o método render(), que é uma chamada obrigatória e necessária no início de cada componente, como explicado na documentação do link. Dentro do render tenho a minha função, e é aí que entra o JSX, onde utilizo os componentes do RN para renderizar uma View com um Text dentro dela exibindo o clássico Hello World.

Pra mandar rodar em seu Android (já conectado via USB ao seu computador e configurado corretamente seguindo o artigo anterior) basta digitar no terminal:

npx react-native run-android

Após alguns segundos o resultado deverá aparecer em seu celular.

Tranquilo né? Agora vamos incrementar essa classe incluindo um pouco de CSS.

Notou no segundo import uma referência a StyleSheet? É a forma de dizer ao arquivo que iremos utilizar CSS.

Ao final do arquivo, criei o seguinte CSS

E adicionei chamada a ele em minha View.

Resultado:

Como dá pra ver, CSS definitivamente não é o meu forte! Mas tudo bem, a intenção foi só mostrar como aplicar CSS a um arquivo JS em RN. Daí pra ficar bonito depende da criatividade (e skill) da pessoa.

Agora que uma parte básica do básico foi explicado vamos de fato ao exemplo do título do artigo, finalmente. Recomendo fortemente a leitura de alguns dos links postados, principalmente da documentação do React Native, que é bem completa.

Obtendo os dados da API

Irei utilizar os dados desta API. Começando vou usar o conceito de state, que é a forma do RN usar variáveis mutáveis, ou seja, variáveis que irão sofrer alterações de valor durante o ciclo de vida da aplicação. Pra fins de simplicidade irei declarar dentro do state apenas 4 variáveis e iniciá-las com valores vazios.

Agora a parte mais importante enfim que é a obtenção dos valores da API e atribuição nas variáveis declaradas anteriormente. Antes disso eu vou buscar a rota da API que utilizarei no exemplo no Postman (app muito útil para buscar APIs, o Insomnia também é muito bom) e mostrar o resultado, pra facilitar o entendimento dos campos a serem buscados e exibidos no celular.

Acompanhe a explicação após a imagem.

Declarei o método que logo de cara usa a API Fetch, desenvolvida pela Mozilla mas muito utilizada no RN, inclusive na documentação é usada um exemplo com ele, que é responsável por fazer requisições HTTP e perfeita pra este exemplo.

É utilizado o método GET, indicando que é uma requisição de obtenção de dados. Logo em sequencia é capturado o retorno do JSON de resposta desta API (exibida na imagem do Postman) e, utilizando o método setState, é setado os valores desta API para as variáveis criadas anteriormente no state. E no final é incluindo um bloco catch caso dê erro pra exibir no console.

Agora só precisamos exibir esses valores em tela, pra isso basta incluir as variáveis dentro do render().

O método de obtenção de dados e consequentemente as variáveis do state são preenchidas. Dentro do Text é possível concatenar texto simples com variáveis usando as chaves e o this.state. Abaixo vemos o resultado.

Note que no rodapé da tela apareceu um warning, abrindo ele vemos o seguinte texto: “Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method” .

Não é desculpa pra encerrar o artigo mas como está muito grande vou deixar pra incrementar o aplicativo e também procurar como resolver esse warning para a próxima parte. Caso algum desenvolvedor React saiba do que se trata comenta aí mas eu suspeito o que possa ser.

É isso, espero ter clareado as dúvidas iniciais de quem está começando com React Native e se ficou alguma dúvida, tem sugestões ou críticas posta aí.

O projeto pode ser baixado aqui. Se você nunca baixou nada do Github, basta clicar ali em Clone or Download (botão verde a direita) e em Download ZIP.

Aprendendo React Native #1 – Configurações Iniciais

De volta a escrever (pra quem não me conhece tenho um blog desatualizado que criei em 2010) e voltando com tudo no aprendizado de React Native. Mas antes precisamos configurar e instalar algumas coisas.

Eu iria publicar um artigo já mostrando um exemplo prático usando React Native (ainda vou, está ficando pronto) mas pelo tanto de coisas que precisei configurar e instalar só pra começar a programar o básico decidi antes fazer esse artigo.

Fiz baseado na documentação do React Native, que pode ser vista aqui (irei usar a opção sem o Expo, que é outra ferramenta útil pra começar no RN mas quero começar de maneira “pura”, sem auxílios externos). Se o seu inglês é bom pode seguir o guia original, vou basicamente traduzir o processo e colocar alguns prints do que fiz em meu note.

PS: Se você já trabalha, conhece ou já tem um ambiente pronto pra usar o React ou React Native pode pular este artigo e ir direto para um exemplo prático aqui.

Antes um pouco de explicações básicas sobre tudo que será instalado e utilizado posteriormente.

Conceitos

  • React Native é uma biblioteca Javascript criada pelo Facebook em 2015 para desenvolvimento de aplicativos mobile, para Android e iOS. Com ele usando o mesmo código fonte (e algumas pequenas modificações) é possível publicar o mesmo app tanto na loja da Apple Store quanto na loja da Google. Ele foi criado usando a base do React, que é outro framework Javascript, mas utilizado para desenvolvimento de páginas Web, que será estudado e posteriormente descrito com exemplos práticos aqui futuramente.
  • Node JS é um ambiente de execução de Javascript server-side, ou seja, é basicamente um servidor Web baseado em Javascript. Ele é muito mais poderoso que isso mas a grosso modo é isso.
  • Android Studio é um ambiente de desenvolvimento integrado (IDE), seguindo os mesmos moldes de outras como Visual Studio, Visual Studio Code, Sublime, Atom, etc. Ele é um ambiente feito para desenvolvimento nativo de aplicações para Android, utiliza como linguagem o Java. Não irei usá-lo pra programar, já que farei em React Native mas preciso instalá-lo para utilizar suas dependências para que a aplicação rode (mesmo que eu rode direto em um dispositivo físico preciso instalar o Android Studio).
  • Python é uma linguagem de programação bastante conhecida, de alto nível, interpretada, de script, imperativa, orientada a objetos, funcional, de tipagem dinâmica e forte. Foi lançada por Guido van Rossum em 1991.
  • JDK é a sigla para Java Development Kit e é um SDK (kit de desenvolvimento de software), para desenvolvimento de aplicações em geral, de diversos tamanhos, meio que utilizado em todo tipo de aplicação hoje em dia que utiliza a JVM, máquina virtual do Java.
  • Chocolatey é um gerenciador de pacotes para o Windows, parecido com o npm e o Yarn.

Instalações e Configurações no Android Studio

Com o Chocolatey citado acima é bem fácil instalar quase todos os itens com exceção do Android Studio, que será instalado da maneira clássica (famoso NNF).

Se você já tem instalado em seu sistema o Node.JS se certifique que é a versão 8.3 ou maior, e se já tem o JDK certifique que é a 8.0 ou maior, do contrário, uma vez tendo instalado o Chocolatey, basta abrir o prompt de comando do Windows mesmo, em modo de administrador, e executar.

choco install -y nodejs.install python2 jdk8

Agora a parte meio chata, as configurações no Android Studio. Na hora de instalar o editor o tutorial do site do RN diz pra selecionar uma instalação customizada mas pra mim não teve essa opção, só esta tela e os botões pra continuar e instalar.

Ao instalar o Android Studio ele automaticamente instala o último SDK disponível. O RN exige que seja utilizado o SDK do Android Pie (9.0). Para isso é necessário abrir o SDK Manager, que pode ser acessado pela tela de boas vindas do Android Studio, ao clicar em Configure.

Note que veio instalado o 10.0 mas preciso instalar o 9.0 também.

Agora é necessário configurar uma variável do sistema para trabalhar com o RN. Digite na pesquisa do Windows variáveis do sistema e irá aparecer uma sugestão escrita Editar as variáveis de ambiente do sistema. Na tela que abrir clique em Variáveis de Ambiente… no rodapé. Clique em Novo para criar uma variável de usuário para trabalhar com o Android.

Essa variável deverá apontar para o caminho físico onde está localizado o Android SDK, que por padrão é instalado em C:\Users\<SeuUsuário>\AppData\Local\Android\Sdk.

Mas confirme que o seu SDK está localizado mesmo nesse caminho, caso não encontre procure no Android Studio, indo na mesma tela de configurações acessada anteriormente e olhando o caminho no alto da tela.

Agora volte a tela de variáveis de ambiente e clique em editar na linha escrita Path, no grid de cima, de variáveis de usuário.

Clique em Novo e adicione o caminho para o platform-tools, que geralmente por padrão fica em C:\Users\<SeuUsuário>\AppData\Local\Android\Sdk\platform-tools. Neste trecho o artigo diz que o caminho é outro mas aqui e pelas pesquisas que fiz ele geralmente fica no AppData mesmo. Aproveite e confirme que dentro desta pasta o arquivo adb.exe está incluído. Caso não esteja instale aqui.

Criação de um projeto e execução no Android

Para criar seu projeto do RN basta digitar no terminal:

npx react-native init NomeProjeto

A primeira vez vai demorar alguns minutos pra criar o projeto (no meu teste baixou por volta de 300mb de conteúdo, ele baixa um template básico pra auxiliar, além dos arquivos que compõem a estrutura inicial do React Native).

Estou usando a versão 1.44.2 do Visual Studio Code. Abrindo o arquivo App.js pra mim apareceu o seguinte erro, não sei se pra vocês também irá aparecer o erro abaixo.

O problema aparentemente só ocorre no VS Code (no Sublime ou Atom não). Como prefiro usar o VS Code tentei resolver, ao pesquisar me deparei com uma resposta que me ajudou. Precisei desabilitar a pré-validação de Javascript do VS Code para resolver esse problema, indo em File > Preferences > Settings> Extensions > TypeScript e desabilitando a opção Enable/disable JavaScript validation.

Ao desmarcar essa opção as validações pré-criadas para Javascript deixam de funcionar, mas ao menos o erro é corrigido. Para voltar a validar o seu código fonte sugiro usar o ESLint. Basta baixá-lo pelo botão lateral esquerdo de extensões, procurando na busca e clicando em Install, ou instalando via algum gerenciador de pacote, como o npm por exemplo.

Nesta parte final do artigo irei usar este post que explica como rodar o RN no dispositivo físico, passe lá dar uma olhada caso fique alguma dúvida, vou só citar um resumo aqui.

Finalmente, agora basta configurar seu celular Android para aceitar depuração via USB. Para fazer isso, primeiro é necessário habilitar o modo desenvolvedor nele.

Pra isso vá nas configurações do celular até encontrar Sistema, depois toque em Sobre o dispositivo e desça até a opção Número da versão. Toque 7 ou mais vezes nessa opção até aparecer que o modo desenvolvedor foi ativado.

Agora volte uma opção, novamente em Sistema, desça em Avançado e abra Opções do desenvolvedor, o novo item que apareceu no menu. Finalmente desça até Depuração e ative a Depuração USB.

Agora conecte seu celular no USB do seu computador, abra uma janela de comando e cheque se o mesmo está habilitado para ser utilizado para o RN, incluindo o texto adb devices, deverá aparecer algo tipo isso.

Se tudo deu certo é pra aparecer device, como na imagem acima. Isso significa que há um dispositivo conectado, para testes só devemos ter um conectado por vez.

Para rodar uma aplicação já criada no RN em seu celular basta digitar no terminal

npx react-native run-android

PS: Eu obtive erros que a variável JAVA_HOME não estava definida (mas estava) nas variáveis de ambiente, ao tentar rodar o comando acima pelo VS Code. Fechei o VS Code e rodei o mesmo comando no Powershell e funcionou, a tela abriu em meu celular. Neste artigo tem algumas dicas do que fazer caso você passe pelo menos erro.

Tudo correndo bem deve aparecer esta tela em seu celular,

Após abrir o aplicativo, fechei o Powershell e abri o VS Code, rodei o comando acima e não deu erro, devia ser algo que o Powershell instalou quando rodou e o VS Code não, sei lá.

Enfim, é isso, dúvidas comentem aí, o próximo artigo será mão na massa mostrando uma aplicação básica rodando com React Native buscando dados de uma API.

Olá, mundo!

Após uns bons anos sem escrever nada, voltei pra escrever algo haha, e agora com o domínio configurado certinho do jeito que queria.

Aqui você irá encontrar posts técnicos sobre programação em geral, não se focando muito em um stack específico de tecnologias mas sim em como resolver problemas cotidianos de desenvolvimento de software usando sugestões de linguagens ou tecnologias e você irá escolher o que for melhor pro seu caso.

Meu objetivo aqui é um só: compartilhar o máximo de conteúdo técnico que conseguir, porque assim como eu me beneficio todo dia de blogs, respostas no Stack Overflow (quem nunca), vídeo técnicos do Youtube e artigos do Medium, desejo devolver um pouco a comunidade com meus poucos conhecimentos.

É isso, bora codar!