Tutorial app de criptomoedas com React Native

Mobile

Tutorial app de criptomoedas com React Native

Luiz Duarte
Escrito por Luiz Duarte em 28/03/2022
Junte-se a mais de 22 mil profissionais de TI

Entre para minha lista e receba conteúdos exclusivos e com prioridade

As criptomoedas estão com tudo atualmente e neste tutorial eu vou juntar elas com outra de minhas paixões que é o desenvolvimento mobile. Eu não sei se você sabe mas minha pós-graduação foi neste assunto, em 2012-13 e anos mais tarde o primeiro livro que escrevi também foi sobre desenvolvimento mobile, o Criando apps para Empresas com Android. Já criptomoedas entraram na minha vida em 2017, no bull run que o Bitcoin teve naquela época e quando escrevi originalmente este tutorial de bot cripto.

Para o tutorial de hoje eu quero criar com você um app de criptomoedas que funcione em Android e iOS, ajudando você a acompanhar o mercado. Nada muito elaborado, mas que sirva de primeiros passos para algo inédito e mais bacana que você tenha a ideia de construir. Usaremos aqui a tecnologia React Native, que permite criar apps nativos para estas duas plataforma usando apenas a linguagem JavaScript.

Não apenas isso, usaremos o pacote Expo para React Native, uma plataforma que simplifica bastante o desenvolvimento e principalmente os testes e build e sem a necessidade de ter um Mac para isso.

Eu ensino o básico de React Native e de Expo nesta série de tutoriais que é leitura obrigatória para conseguir acompanhar este tutorial.

Dito isso, vamos ao tutorial. Se preferir, você pode assistir ele no vídeo abaixo ao invés de ler.

1 – Setup do Projeto

O primeiro passo é você criar seu projeto usando o Expo. Para isso, use o comando abaixo em uma pasta na sua máquina.

Eu chamei meu projeto de CryptoWatch, pois é isso que basicamente ele vai ser, um “observador de criptos”, mas renomeie conforme julgar melhor.

Após todas as dependências serem baixadas e instaladas, convém entrar na pasta cryptowatch e rodar o projeto para ver se deu tudo certo na criação.

Como quero receber as informações em tempo real sobre a cripto que estou interessado, vamos usar as streams da Binance para isso. A Binance é a maior exchange do mundo e suas informações são públicas e facilmente acessíveis através de websockets, que eu já expliquei outras vezes aqui no blog como funciona.

Para conectar no app React Native a uma das várias streams da Binance podemos usar pacotes JavaScript para isso, em especial aqueles feitos para ReactJS, a versão web do React. Eu particularmente gosto bastante do pacote react-use-websocket que vamos instalar no projeto usando o seguinte comando.

E para criar a interface do nosso app eu gosto bastante da biblioteca React Native Elements, que é tipo um Bootstrap do mundo React Native, muito prático de usar e com uma aparência bem bacana. Instale com o seguinte comando.

Agora sim, temos as dependências que vamos precisar!

Livro Node.js

2 – Conectando na Stream

A primeira coisa que vamos fazer é a que o pessoal costuma errar mais que é na conexão à stream de websockets da Binance. Para fazer isso vamos importar o hook fornecido pelo pacote react-use-websocket e vamos usá-los para estabelecer a conexão, inicialmente  fixa no par BTCUSDT.

Isso deve ser feito no App.js, o arquivo central da nossa aplicação. Usaremos um state para que a cada atualização de dados o nosso front reaja exibindo o que recebeu.

A configuração mais importante do hook useWebSocket é a URL onde ele vai se conectar e a função onMessage que vai ser disparada toda vez que ele receber um dado atualizado, o que vem via o objeto lastJsonMessage. Mais à frente, vamos fazer ele se conectar na stream de dados da cripto que interessa ao usuário, ao invés de deixá-la fixa como fizemos.

O resultado é que quando você abrir o app ele vai se conectar na Binance e passar a receber os dados atualizados de uma cripto a cada segundo, que estamos apenas colocando na tela, como abaixo.

Cada uma dessas informações retornadas pela Binance é melhor descrita na documentação oficial deles, mas tem muita coisa de valor aí que podemos usar para construir uma tela bacana.

Agora que aprendemos a fazer a conexão, vamos construir a nossa tela!

Curso Node.js e MongoDB

#3 – Input de Dados

Eu sou péssimo em frontend. Não me leve à mal, eu sei construir, mas falando de criatividade, de design, eu sou uma negação, hehe. Por isso que gosto de bibliotecas como Bootstrap para a web e para o React Native eu costumo usar o React Native Elements, que comentei e que deixamos instalado anteriormente. Agora vamos usá-lo!

Ainda no app.js, vamos ajustar a tela para que tenhamos um campo de texto e um botão. O usuário digitará o par de moedas no campo e pressionará o botão, mudando a conexão para a nova stream. Não vou colocar a conexão enquanto ele digita para não ficar fazendo conexões erradas na Binance, o que poderia prejudicar a reputação do nosso IP.

Primeiro vamos falar das novas importações: trouxe o Input e o Text da biblioteca React Native Elements e também o Feather, que renomeei para Icon, da biblioteca interna do Expo. Por padrão o Expo oferece várias bibliotecas de ícones pra gente e a Feather Icons é uma das mais populares. Vamos usá-los em nosso projeto.

Adicionamos agora dois novos states, um para o texto que o usuário estará digitando e outro para o symbol (par de moedas) já digitado, e que é usado para fazer a conexão no lugar certo (repare a URL no useWebSocket). Importante frisar também que colocamos valores default nesses states.

E a última alteração e mais drástica foi no JSX de retorno da interface, onde coloquei um Text com propriedade h1 para ser o título da tela, coloquei um input com ícone na esquerda e ícone clicável na direita (já vou falar dele) e logo abaixo ficou o texto que já tínhamos antes.

O ícone clicável à direita do Input serve como botão de confirmação do texto digitado. Enquanto o usuário vai digitando, a propriedade onChangeText vai disparando a atualização do state text. Quando o botão é clicado, o onPress do Icon.Button é disparado, alterando o state de symbol.

E como em toda boa aplicação React, quando um state muda, o componente é renderizado novamente.

Repare também que adicionei vários estilos em cada componente, usando a propriedade style. Essa propriedade funciona de maneira idêntica ao CSS do mundo web, que se você não conhece, recomendo este ebook gratuito.

O resultado atualizado você confere abaixo. Experimente digitar outro par e clicar na lupa e verá que as informações abaixo passam a corresponder ao novo par.

Curso FullStack

#4 – Listagem das Informações

Agora vamos para a última parte do nosso app, onde vamos pegar aquelas informações que estão chegando e que hoje jogamos de qualquer jeito na tela e vamos transformar em uma tabela mais amigável para o usuário ler e entender.

Usaremos aqui uma combinação de componentes Text, já que são textos alterados via programação, sem interferência do usuário. A base é essa aqui e será repetida à exaustão:

No exemplo acima, temos uma view com um estilo de linha (que vou mostrar abaixo), um text com estilo negrito pro rótulo da informação (estilo bold) e outro text com a informação que vem da stream (sem estilo algum).

Para os estilos, você deve importar o StyleSheet do pacote react-native e criar um objeto styles definindo os estilos citados acima, como abaixo.

Agora, o bloco completo com todas as tags para composição das informações na tela.

Repare que acima tem dois campos que eu uso uma função getSignal para colocar um sinal de positivo ou negativo no número. Esta função está abaixo e é bem simples. Aliás, é por causa desse ajuste que quando recebemos os campos de preço eu faço um parseFloat lá no useWebSocket.

O resultado você confere abaixo.

E com isto finalizamos este tutorial. Se você fez as outras séries de React Native que tem aqui no blog como a básica e a do CRUD agora sua cabeça está fervendo com as possibilidades. Abaixo eu listo alguns pacotes famosos que podem lhe ajudar na criação de mais funcionalidades ou mesmo de outros apps ligados a este mundo de criptomoedas.

Aliás, esse EthersJS eu já usei em outro tutorial aqui do blog e é facilmente utilizável com React Native também!

Até a próxima!

Olá, tudo bem?

O que você achou deste conteúdo? Conte nos comentários.