Definicao

This is an old version of this page. You can view the most recent version or browse the history.

Frontend

O frontend é a parte responsável pela interação com o usuário,coleta e adequação de informações que serão utilizadas no backend. A seguir serão listadas as tecnologias utilizadas no desenvolvimento do frontend assim como uma breve descrição do framework utilizado.

Frontend Supermilhas: http://www.tools.ages.pucrs.br/milhas/Mobile

Tecnologias

React Native
HTML
Javascript

React Native

Site Oficial: https://facebook.github.io/react-native/
Documentação: https://facebook.github.io/react-native/docs/getting-started.html
Guia Básico: https://facebook.github.io/react-native/docs/tutorial.html

O que é React Native?

React Native é um framework de Javascript para escrever aplicações Mobile realmente nativas para iOS e Android.É baseado em React, a biblioteca de Javascript desenvolvida pelo Facebook para construir interfaces mas ao invés de simular uma aplicação nativa através de um browser, com React native é possível escrever aplicações nativas de fato.

Pontos positivos de se utilizar React Native:

Portabilidade entre iOS e Android.Ou seja, o mesmo programa funciona em ambos sistemas.
Escrever aplicações nativas.
Possibilidade de utilizar Javascript dentro do próprio código.

Pontos negativos de se utilizar React Native:

Curva de aprendizado muito ingrime, React Native exige conhecimentos prévios de várias tecnologias como React,JavaScript e JSX.
A tecnologia ainda é muito nova logo, a documentação e suporte ainda é escassa.
Devido a natureza da tecnologia acrescentar mais uma camada ao projeto, o debbug pode ser um pouco complicado.

Links uteis

Curso recomendado para React native:

https://www.udemy.com/the-complete-react-native-and-redux-course/learn/v4/overview
Valor: R$ 21,99

Instalação do Projeto:

Dependências:

Node.js: https://nodejs.org/en/
VSCode: https://code.visualstudio.com/

Extensão necessária:

Flow Language Support

Deve-se alterar o settings.json para: { "flow.useNPMPackagedFlow": true, "javascript.validate.enable": false }

Depois de instalar as dependencias e alterar o settings.json, caso você use Windows, recomendo instalar o Git Bash:
Link GitBash: https://gitforwindows.org/
Acesse o link: http://www.tools.ages.pucrs.br/milhas/Mobile
Copie o seu respectivo link
Após isso, escolha onde irá deixar seu projeto e utilize o GitBash no caminho escolhido
Use o comando: git clone link copiado do site: http://www.tools.ages.pucrs.br/milhas/Mobile
Abra seu VSCode na pasta superMilhasApp
Abra o terminal nessa pasta e utilize o comando: npm i
Pronto, agora utilize o comando npm start
Baixe o Expo no seu celular e leia o QRCode gerado, para que funcione é necessário que seu computador e celular estejam na mesma rede, também é possível rodar em um emulador, apenas utilizar o comando: a
Emulador recomendado: https://www.genymotion.com/