Projeto Final: OneBitCoin – Aula 9 | Curso React Native (aprendiz)

Parte 1

Parte 2

Parte 3

Parte 4

Implementando a lógica em App.js

1 – Function addZero – vamos utilizar essa função para formatar o zero a esquerda em datas menores ou igual a 9, deixando assim formatado corretamente conforme pede a api.

//insert zero to the left
function addZero(number) {
  if (number <= 9) {
    return "0" + number;
  }
  return number;
}

//insert zero to the left

function addZero(number) {

if (number <= 9) {

return "0" + number;

}

return number;

}

2 – Function url(qtdDias) – essa função vai receber uma quantidade de dias e vai subtrair dos dias atual até a data solicitada.
Exemplo: -10 dias hoje = 15/02/2021 data hoje – 10 dias = 05/02/2021

Porém se subtrairmos um pelo outro simplesmente, iremos ter um undefined. Para isso criaremos uma função que recebe o parâmetro de dias e subtrai corretamente.

//Date formatting to get API
function url(qtdDias) {
  const date = new Date();
  const listLastDays = qtdDias;
  const end_date = 
  `${date.getFullYear()}-${addZero(date.getMonth() + 1)}-${addZero(date.getDate())}`;
  date.setDate(date.getDate() - listLastDays);
  const start_date = 
  `${date.getFullYear()}-${addZero(date.getMonth() + 1)}-${addZero(date.getDate())}`;
  //URL  GET API
  return `https://api.coindesk.com/v1/bpi/historical/close.json?start=${start_date}&end=${end_date}`;;
}

//Date formatting to get API

function url(qtdDias) {

const date = new Date();

const listLastDays = qtdDias;

const end_date =

`${date.getFullYear()}-${addZero(date.getMonth() + 1)}-${addZero(date.getDate())}`;

date.setDate(date.getDate() - listLastDays);

const start_date =

`${date.getFullYear()}-${addZero(date.getMonth() + 1)}-${addZero(date.getDate())}`;

//URL GET API

return `https://api.coindesk.com/v1/bpi/historical/close.json?start=${start_date}&end=${end_date}`;;

}

Com a nossa função url(qtdDias) implementada vamos agora fazer as funções que irão fazer as buscas na api

A primeira função vai ser a getListCoins(url), ela irá receber nossa url como parâmetro e fazer fetch, buscando os dados da API de acordo com os dias passados, depois faremos um map gerando um novo array para tratarmos os dados que vieram da API e montarmos esse novo array da forma que iremos precisar para usar em nosso FLatList.

Nossa função ficará assim :

async function getListCoins(url) {
  let response = await fetch(url);
  let retunrApi = await response.json();
  let selectListQuotations = retunrApi.bpi;
  const queryCoinsList = Object.keys(selectListQuotations).map((key) => {
    return {
      data: key.split("-").reverse().join("/"),
      valor: selectListQuotations[key],
    };
  });
  let data = queryCoinsList.reverse();
  return data;
}

async function getListCoins(url) {

let response = await fetch(url);

let retunrApi = await response.json();

let selectListQuotations = retunrApi.bpi;

const queryCoinsList = Object.keys(selectListQuotations).map((key) => {

return {

data: key.split("-").reverse().join("/"),

valor: selectListQuotations[key],

};

});

let data = queryCoinsList.reverse();

return data;

}

Na segunda função, iremos fazer o mesmo só que montaremos os dados conforme a documentação do gráfico nos pede, que é uma lista de dados somente de valores, veja que na função podemos aproveitar a mesma, vamos adicionar um G no final de cada variável criada para referenciarmos que se trata de um ” return dataG” ( dados do Gráfico).

O que muda de fato é nosso map() que irá retornar somente um array de valores.

async function getPriceCoinsGraphic(url) {
  let responseG = await fetch(url);
  let returnApiG = await responseG.json();
  let selectListQuotationsG = returnApiG.bpi;
  const queryCoinsListG = Object.keys(selectListQuotationsG).map((key) => {
    return selectListQuotationsG[key];
  });
  let dataG = queryCoinsListG;
  return dataG;
}

async function getPriceCoinsGraphic(url) {

let responseG = await fetch(url);

let returnApiG = await responseG.json();

let selectListQuotationsG = returnApiG.bpi;

const queryCoinsListG = Object.keys(selectListQuotationsG).map((key) => {

return selectListQuotationsG[key];

});

let dataG = queryCoinsListG;

return dataG;

}

Criando os States.

const [coinsList, setcoinsList] = useState([]);
  const [coinsGrafichList, setcoinsGrafichList] = useState([0]);
  const [days, setdays] = useState(30);
  const [updateData, setupdateData] = useState(true);

const [coinsList, setcoinsList] = useState([]);

const [coinsGrafichList, setcoinsGrafichList] = useState([0]);

const [days, setdays] = useState(30);

const [updateData, setupdateData] = useState(true);

Vamos criar uma função que será responsável por alterar os dias que iremos passar para nossa chamada à api.

function updateDay(number) {
    setdays(number);
    setupdateData(true);
}

function updateDay(number) {

setdays(number);

setupdateData(true);

}

E por fim, nosso useEfect, para sempre que houver alteração ele recarregar nosso componente.

useEffect(() => {
    getListCoins(url(days)).then((data) => {
      setcoinsList(data);
    });
    getPriceCoinsGraphic(url(days)).then((dataG) => {
      setcoinsGrafichList(dataG);
    });
    if (updateData) {
      setupdateData(false);
    }
  }, [updateData]);

useEffect(() => {

getListCoins(url(days)).then((data) => {

setcoinsList(data);

});

getPriceCoinsGraphic(url(days)).then((dataG) => {

setcoinsGrafichList(dataG);

});

if (updateData) {

setupdateData(false);

}

}, [updateData]);

Props nos components

Em nosso HistoryGraphic vamos passar nosso state que está com os dados para nosso gráfico.

<HistoryGraphic infoDataGraphic={coinsGrafichList} />

1	<HistoryGraphic infoDataGraphic={coinsGrafichList} />

Vamos implementar as props no QuotationsList passando coinsList.

<QuotationsList 
  filterDay={updateDay} 
  listTransactions={coinsList}//props
/>

<QuotationsList

filterDay={updateDay}

listTransactions={coinsList}//props

No compomente QuotationsList vamos fazer as seguintes alteraçõe:

export default function QuotationsList(props) {
  const daysQuery = props.filterDay;// vamos criar uma const que vai chamar nosso  propsfilterDay
  return (...

export default function QuotationsList(props) {

const daysQuery = props.filterDay;// vamos criar uma const que vai chamar nosso propsfilterDay

return (...

Os Botões irão agora ter dentro do onpress nosso const daysQuery e irá receber um parâmetro, o número de dias.

<TouchableOpacity
          style={styles.buttonQuery}
          onPress={() => daysQuery(7)}
 >
 <Text style={styles.textestylo}>7D</Text>
</TouchableOpacity>

<TouchableOpacity

style={styles.buttonQuery}

onPress={() => daysQuery(7)}

</TouchableOpacity>

No no final do nosso componente, vamos implementar nossa FlatList passando dentro do nosso renderItem o nosso component QuotationsItem, passando como props o valor e a data que foi gerado apartir do map() no retorno da nossa api e foi passado como props em app.js para nosso componente QuotationsList.

//....
<ScrollView style={styles.listQuotationBitcoins}>{/*adicionar um estilo */}
        <FlatList
          data={props.listTransactions}
          renderItem={({ item }) => {
            return <QuotationsItem valor={item.valor} data={item.data} />;
          }}
        />
 </ScrollView>
<Fragment/>

//....

<ScrollView style={styles.listQuotationBitcoins}>{/*adicionar um estilo */}

<FlatList

data={props.listTransactions}

renderItem={({ item }) => {

return <QuotationsItem valor={item.valor} data={item.data} />;

}}

</ScrollView>

Vamos Adicionar um estilo no style.js do QuotationList.

listQuotationBitcoins:{
    paddingTop:10,
    width: "100%",
  },

listQuotationBitcoins:{

paddingTop:10,

width: "100%",

Agora precisamos configurar nosso QuotationItem. Vamos passar as props para que os valores fiquem dinâmicos.

<View style={styles.cardPrincipal}>
      <View style={styles.contextLeft}>
        <View style={styles.boxLogo}>
          <Image
            style={styles.logBitcoin}
            source={require("../../../images/bitcoinredpng.png")}
          />
         <Text style={styles.dayCotacion}>{props.data}</Text>
        </View>
        
      </View>
      <View style={styles.contextRigth}>
        <Text style={styles.price}>$ {props.valor}</Text>
      </View>
    </View>

<Image

style={styles.logBitcoin}

source={require("../../../images/bitcoinredpng.png")}

<Text style={styles.dayCotacion}>{props.data}</Text>

</View>

<Text style={styles.price}>$ {props.valor}</Text>

</View>

Configurando o Gráfico

Para utilizarmos o grafico em nosso app iremos utilizar o projeto react-native-chart-kit, você pode acompanhar detalhes acessando:
https://github.com/indiespirit/react-native-chart-kit

Se estiver rodando o app, pare o código e rode os seguintes comandos no seu terminal:

npm install react-native-chart-kit
npm install react-native-svg

1 2	npm install react-native-chart-kit npm install react-native-svg

Dentro de App .js vamos passar os dados do gráfico como props.

<HistoryGraphic infoDataGraphic={coinsGrafichList} />

1	<HistoryGraphic infoDataGraphic={coinsGrafichList} />

O componente do gráfico fica assim:

import React from "react";
import { View, Dimensions } from "react-native";
import { LineChart } from "react-native-chart-kit";

export default function HistoryGraphic(props) {
  return (
    <View >
      <LineChart
        data={{
          datasets: [
            {
              data: props.infoDataGraphic,
            },
          ],
        }}
        width={Dimensions.get("window").width} // from react-native
        height={220}
        yAxisLabel="$"
        yAxisSuffix="k"
        withVerticalLines={false}
        yLabelsOffset={1}
        withVerticalLabels={false}
        chartConfig={{
          backgroundColor: "#000000",
          backgroundGradientFrom: "#232323",
          backgroundGradientTo: "#3F3F3F",
          decimalPlaces: 0, // optional, defaults to 2dp
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          propsForDots: {
            r: "1",
            strokeWidth: "1",
            stroke: "#f50d41",
          },
        }}
        bezier//ondas suaves do grafico
      />
    </View>
  );
}

import React from "react";

import { View, Dimensions } from "react-native";

import { LineChart } from "react-native-chart-kit";

export default function HistoryGraphic(props) {

return (

<View >

<LineChart

data={{

datasets: [

{

data: props.infoDataGraphic,

}}

width={Dimensions.get("window").width} // from react-native

height={220}

yAxisLabel="$"

yAxisSuffix="k"

withVerticalLines={false}

yLabelsOffset={1}

withVerticalLabels={false}

chartConfig={{

backgroundColor: "#000000",

backgroundGradientFrom: "#232323",

backgroundGradientTo: "#3F3F3F",

decimalPlaces: 0, // optional, defaults to 2dp

color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,

labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,

propsForDots: {

r: "1",

strokeWidth: "1",

stroke: "#f50d41",

}}

bezier//ondas suaves do grafico

</View>

);

}

Com isso nós finalizamos nosso app e implementamos todas as nossas features.

Na próxima aula vamos configurar o splash screen do nosso projeto e gerar o apk utilizando o expo.

0 0 votes

Article Rating

junho 9, 2021

3 Comentários

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Rafael Arantes

7 meses atrás

Poderia me passar o repositório do projeto? Revisei tudo e mesmo assim o meu não funcionou, não estou achando onde está o problema.

Responder

daniel

1 mês atrás

Reply to Rafael Arantes

esta na api acabei de “resolver” o meu
tem que achar uma api atual

Responder

Fabrício Corrêa

6 meses atrás

A API está fora do ar? não funcionou o meu.

Responder