Aula 11 - React Native - APIs

Programação para
Dispositivos Móveis
Aula 11
React Native
Trabalhando com API's
Clima, Geolocation, Maps, Criptos
Prof. Dr. Juliano Gaspar
Programação para Dispositivos Móveis
API Clima - Open Weather Map
Prof. Juliano Gaspar

Fonte: https://www.youtube.com/watch?v=ye0XSzbU2so
Fonte: https://openweathermap.org/api
API - Preparando projeto
Vamos usar o mesmo projeto da aula anterior com

as páginas e navegação TAB.

Criar uma conta gratuita.

https://openweathermap.org/api
Leva entre 10 a 15 minutos para ativar a chave.

Biblioteca que permite fazer chamadas para WEB

npm install axios
API - Clima
Troquei os ícones e as cores.

API - Clima
Usei esse site para escolher uma paleta de cores. Prof. Juliano Gaspar
API - Clima
-> useState para atualizar uma variável que

atualizará sempre a interface.
-> usar Image
-> import do axios
-> transformar a função para receber código JS

API - Clima
-> Criar o conteúdo JSX

-> Variáveis X serão substituídas.
-> e alguns estilos

API - Clima
Estilos completos.
-> falta só o do ícone.

API - Clima
Coordenadas fixas para este

exemplo, mas no futuro
podemos usar outra API para
acessar as coordenadas do
celular.
-> CONST WEATHER vai conter

o clima importado da API.

API - Clima
-> getWeather é uma variável que recebe uma

função assíncrona, que espera resposta da API
com o clima de uma coordenada (lat, long)
-> setWeather salva em WEATHER e altera a

interface automaticamente.
-> getWeather executa a função.

API - Clima
PESQUISAR E CONHECER A API
https://openweathermap.org/forecast5#JSON
API - Clima
Ao chamar a variável weather e tentar acessar os valores vindo no JSON da API,

o aplicativo apresenta um erro.
Sempre que se trabalha com funções assíncronas temos que tratar os

resultados, pois nem sempre que o aplicativo vai usar o objeto, ele já está
preenchido/criado.
Ou seja, a API pode ainda não ter respondido.
O return com o bloco JSX tem de ficar dentro de IF para testar se a variável já foi
respondida.

Já está mostrando a descrição do clima
API - Clima
vindo da API para Belo Horizonte.

API - Clima

API - Clima
Incluindo um objeto do tipo IMAGE com com ícone do clima.
API Geolocation - localização

API - Clima

https://heartbeat.fritz.ai/how-to-use-the-geolocation-api-in-a-react-native-app-b5e611b00a0c Prof. Juliano Gaspar
API - Geolocation

API - Geolocation
https://github.com/react-native-geolocation/react-native-geolocation
npm install @react-native-community/geolocation --save
React Native Geolocation
Para conseguir a LATITUDE E LONGITUDE da localização do dispositivo.

API - Geolocation
Mas antes temos que pedir a autorização para utilizar esse recurso no Android.
Temos de adicionar a permissão adequada no AndroidManisfest.xml
android > app > src > main > AndroidManisfest.xml
+/- Linha 6 -> adicionar

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
Em versões antes do SDK 23, as permissões são concedidas automaticamente se

aparecerem no AndoridManisfest.xml.
Após a versão SDK 23, temos de pedir permissão em tempo de execução também. Então
temos de permissão via código adicionalmente.

API - Geolocation
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

API - Geolocation
Apenas preparada a interface.

JSX e estilos da tela B.

API - Geolocation
Fazer os imports necessários.

Criar 3 variáveis de estado:
- latitude
- longitude
- watchID
latitude e longitude do usuário e a

watchID para monitorar a localização do usuário,
caso ele se mova, retornado pela função
watchPosition do Geolocation. Prof. Juliano Gaspar
API - Geolocation
Vamos Criar 2 botões:

1. Obter localização (com a função callLocation)
2. Cancelar monitoração
neste trecho chamamos a função que executa o

ALERT só pra testar se executou até aí sem erros.
1º parâmetro, Função callBack de sucesso
vai pegar as coordenadas
API - Geolocation
2º parâmetro, Função callBack de erro
3º parâmetro, solicita utilização do GPS e não do wifi,

máximo de 20 segundos, e uso de valores em cache no
máximo de 1 segundo.
No watchPosition vai monitorar sempre que o celular

se movimentar e também vai atualizar as variáveis e
consequentemente a interface.

API - Geolocation
Essa função será chamada no

botão para parar o
monitoramento da localização.

API - Geolocation
Preparamos o template JSX.

API - Geolocation
Inclui as variáveis de estado.

E faz as chamadas das funções nos botões.

API - Geolocation

API Mapas - MapBox

Fazer um cadastro na API do MapBox
https://www.mapbox.com/
API - MapBox
No meu caso tive um problema de versão, e adicionei

a diretiva --legacy-peer-deps, para ele usar versões
anteriores.
Além do cadastro, deve ser instalado esse pacote:
npm install @react-native-mapbox-gl/maps --legacy-peer-deps

API - MapBox

API - MapBox
Preparando o ambiente para

novas funcionalidades.

API - MapBox
Preparando a interface para

receber o mapa.

API - MapBox
Ajustes nos estilos

API - MapBox
A API do MapBox define a

longitude antes da latitude.
Ao contrário da API do Google Maps.

API - CoinGecko

API - CoinGecko

Vamos usar:
● simple/price
● coins/markets
API - CoinGecko
Você pode usar o coins/list para consultar qual

é o ID para cada moeda.

API - CoinGecko
Objeto JSON resposta.
Definido os parâmetros, exeute e copie a REQUEST URL.

Programação para Dispositivos Móveis Programação para Dispositivos Móveis
API - CoinGecko API - CoinGecko
Preparação do template JSX.

Objeto JSON resposta.

API - CoinGecko
useState para setar a variável.

async para função assíncrona
await para aguardar a resposta da API
setToken salva o conteúdo com useState
warn para testar se o valor está chegando.
https://api.coingecko.com/api/v3/
simple/price?ids=bitcoin&vs_curre
ncies=brl

API - CoinGecko
Ao tentar mostrar TOKEN ao criar a tela, como a função

assíncrona ainda não foi executada ou não se chegou a
resposta. Dá o erro ao tentar renderizar a interface.

Token foi inicializado com false,
já pensando em resolver esse
API - CoinGecko
problema no futuro.
Só acessa o token se já estiver carregado,

no caso TRUE, com algum conteúdo.
https://api.coingecko.com
/api/v3/coins/markets?vs_
currency=brl&ids=bitcoin&
order=market_cap_desc&per
_page=100&page=1&sparklin
e=false
API - CoinGecko
Criamos uma nova chamada para a API, como exemplo.

Variável MARKET vai receber o objeto com todo os
dados do market do bitcoin.

API - CoinGecko
Podemos escolher o que quiser mostrar.

API - CoinGecko
Deixei apenas uma chamada de API, MARKET

Função para formatar números;
Formatar os números antes de mostrar.
Percentagem foi formatada diferente.

Obrigado!
Prof. Dr. Juliano Gaspar
julianogaspar@gmail.com
http://lattes.cnpq.br/3926707936198077

API - CoinGecko
npm install react-number-format --save --legacy-peer-deps
import NumberFormat from 'react-number-format';
Especificações da biblioteca:
https://github.com/s-yadav/react-number-format Prof. Juliano Gaspar
API Externa - Preparando projeto
https://codeburst.io/react-native-navigation-stack-navigator-inside-tab-navigator-inside-drawer-navigator-b2f21836708d
Navegação - Outro exemplo
Este exemplo combina as 3

formas de navegação.

Aula 11 - React Native - APIs

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 11 - React Native - APIs

Enviado por

Direitos autorais:

Formatos disponíveis

Programação para

Prof. Dr. Juliano Gaspar

Programação para Dispositivos Móveis

API Clima - Open Weather Map

Prof. Juliano Gaspar

Vamos usar o mesmo projeto da aula anterior com

Prof. Juliano Gaspar

Criar uma conta gratuita.

Leva entre 10 a 15 minutos para ativar a chave.

Prof. Juliano Gaspar

Biblioteca que permite fazer chamadas para WEB

Troquei os ícones e as cores.

Prof. Juliano Gaspar

-> useState para atualizar uma variável que

Prof. Juliano Gaspar

-> Criar o conteúdo JSX

Prof. Juliano Gaspar

-> falta só o do ícone.

Prof. Juliano Gaspar

Coordenadas fixas para este

-> CONST WEATHER vai conter

Prof. Juliano Gaspar

-> getWeather é uma variável que recebe uma

-> setWeather salva em WEATHER e altera a

-> getWeather executa a função.

PESQUISAR E CONHECER A API

Ao chamar a variável weather e tentar acessar os valores vindo no JSON da API,

Sempre que se trabalha com funções assíncronas temos que tratar os

Ou seja, a API pode ainda não ter respondido.

Prof. Juliano Gaspar

vindo da API para Belo Horizonte.

Prof. Juliano Gaspar

Prof. Juliano Gaspar

Incluindo um objeto do tipo IMAGE com com ícone do clima.

Prof. Juliano Gaspar

Programação para Dispositivos Móveis

API Geolocation - localização

Prof. Juliano Gaspar

Ou seja, a API pode ainda não ter respondido.

Prof. Juliano Gaspar

React Native Geolocation

Para conseguir a LATITUDE E LONGITUDE da localização do dispositivo.

Temos de adicionar a permissão adequada no AndroidManisfest.xml

android > app > src > main > AndroidManisfest.xml

+/- Linha 6 -> adicionar

Em versões antes do SDK 23, as permissões são concedidas automaticamente se

Prof. Juliano Gaspar

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Prof. Juliano Gaspar

Apenas preparada a interface.

Prof. Juliano Gaspar

Fazer os imports necessários.

latitude e longitude do usuário e a

Vamos Criar 2 botões:

neste trecho chamamos a função que executa o

2º parâmetro, Função callBack de erro

3º parâmetro, solicita utilização do GPS e não do wifi,

No watchPosition vai monitorar sempre que o celular

Prof. Juliano Gaspar

Essa função será chamada no

Prof. Juliano Gaspar

Preparamos o template JSX.

Prof. Juliano Gaspar