Roteiro de trabalho

Após realizar este roteiro de trabalho, o aluno terá criado uma aplicação para monitorar a variação de diferentes tipos de criptomoedas.

A aplicação é constituída de duas camadas: backend e frontend.

A camada de backend tem como objetivo buscar informações sobre diferentes criptomoedas.

A camada de frontend tem como objetivo permitir a visualização dos dados capturados pelo backend em uma página HTTP.

Pré requisitos:

• Instalar o Git.
• Instalar o NodeJS.
• Editor de texto a sua escolha

Parte 1 - Clonar o projeto de backend e frontend localmente

1. Vá até a página com os projetos backend e frontend da Ages Winter: https://tools.ages.pucrs.br/workshop-ages-winter-2021
2. Selecione o projeto frontend
3. Clique no botão azul Clone no lado direito da tela
4. Copie a URL Http
5. Em um terminal de sua preferência, escolha uma pasta
6. Nessa pasta, digite git clone <url que você copiou>. O git bai baixar o projeto para você, criando uma pasta com o nome dele.
7. Entre na pasta criada pelo git e verifique os arquivos do projeto
8. Repita os passos do 1 ao 7 para o projeto backend.

Parte 2 - Comandos básicos para trabalhar no repositório

Entre na pasta baixada pelo git na parte anterior e rode npm install. Faça isso tanto para o frontend quanto para o backend. Após estarem instalados, rode o comando npm start em cada um para subir localmente o código.

Comandos node

npm install - para instalar as dependências e preparar o código.

npm start - para rodar o projeto.

Parte 3 - Criar uma regra de negócio na API de backend

Parte 4 - Criar um componente no frontend

Criaremos um botão de refresh para atualizar nossos cards de Crypto. Alguns links que podem ajudar:

https://pt-br.reactjs.org/docs/components-and-props.html

https://pt-br.reactjs.org/docs/handling-events.html

Parte 5 - Integrar backend e frontend

Agora que você criou um novo endpoint no backend, precisa atualizar o seu front para mostrar isso na tela. O arquivo principal para a integração é o serviço CryptoService. Também é necessário adicionar os novos dados na tela, criando seu card no componente MainPage.