Aplicatiovo da empresa fantasma SP Medical Group.
Tem o objetivo de mostrar as consultas para os usuarios.
- 1 Instalação
- 1.1 Preparação
- 1.2 Bibliotecas
- 1.3 Google API
- 2 Telas
- 3 Cronograma
- 4 Bibliografia
Para que o projeto funcione você precisará ter :
- Banco de dados
- API (E todos seus requisitos)
- Node.js , JDK e Android SDK
Todos eles tem uma documentação propria, então é só seguir as instruções. - O ultimo requisito é ter um celular android ou uma AVD com google play services instalado para que possa saber sua localização e da consulta.
Antes de iniciar o projeto você deve fazer tudo que está nos links acima. Então você deverá :
- Executar a API (verifique se ela esta funcionando ou não no endpoint /swagger/index.html testando o login)
- Caso tudo esteja funcionando, abra o cmd na pasta do projeto (aperte F4 , apague todo o caminho da pasta e digite cmd)
- Execute o primeiro comando : npm install (irá instalar tudo que o projeto precisa (Veja:Bibliotecas))
- Você vai precisar ir no arquivo APIService.js e mudar a variavel baseURL para o ip da sua API.
Exemplo :
const baseURL = "http://{coloque seu ip aqui}/api/v1/"//mude para o seu ip aqui- Você tambem devera ir para a API e setar o mesmo ip para ela no arquivo Properties/launchSettings
- O proximo comando sera : react-native run-android
- O projeto ira abrir na avd ou no seu celular (depende qual você esta usando)
Aqui está todas as bibliotecas que serão instaladas ao ser digitado o comando npm install na pasta do projeto (alem do react-native)
- react-navigation - navegação entre paginas
- react-native-gesture-handler - lidar com scroll e gestos de zoom e rolagem
- @react-native-community/async-storage - armazenar dados do usuario localmente
- jwt-decode - validar dados do usuario
- react-native-maps - gerar mapas
- react-native-maps-direction - exibir rota entre 2 pontos
- react-native-google-maps-directions - Enviar dados para o google maps
Essas bibliotecas também deverão ser linkadas ao projeto utilizando o comando:
react-native link {nome da biblioteca}
Caso a minha API do google não esteja funcionando (porque há um limite de requisições). Você devera criar uma nova, neste link.
Lá você tera que gerar uma key para as seguintes APIs.
- Directions API
- Geocoding API
- Maps SDK for Android
Apos iniciar o projeto a primeira tela sera a de login (você precisa pelo menos ter um valor cadastrado no banco de dados (Veja: Banco de dados- Valores inicias) ou insira algum usando a API/Site)
Ao logar você poderá apenas visualizar suas consultas, ou clicar em uma delas e ver todas as suas informações.
Todas as telas só são acessiveis depois de o usuario estar logado.
Tela de login
Caso ocorra algum problema (com a API por exemplo) será retornado apenas um erro sem muitos detalhes.
O mesmo acontece com erro de autenticação e validação.
Ao entrar na tela de visualizar consultas, você verá todas as consultas (caso você logue como administrador você podera ver todas , mas não podera altera-las porque esta função só é disponivel no Site da SPMedicalGroup)
Tela de listagem de consultas
Na tela de visualizar terá apenas alguns detalhes a mais. Como por exemplo a descrição completa (que na listagem de todas as consultas apenas mostra no maximo 114 caracteres).
Tela de listagem de consulta
Você podera ver a sua localização atual e o caminho para a clinica onde a consulta foi marcada. Para isso voce deverá permitir que o aplicativo use a função GPS do seu celular e estar com ela ligada.
O projeto foi iniciado no dia 13/05/2019 e finalizado no dia 23/05/2019.
Aqui ficara meu cronograma do projeto com todas minhas atividades.
- Dia 0
Eu ja tinha o layout pronto do mobile que foi feito na criação do site (então deixei isso como dia 0 porque não aconteceu no dia do projeto em si, mas foi usado nele (um pouco)) - Dia 1
- Iniciei a arquitetura do projeto criando todas as paginas (apenas com um Text nela com o nome da pagina).
- Instalei quase todas as bibliotecas necessarias (AsyncStorage foi instalada no dia 3).
- Iniciei a pagina de login. Fiz os primeiros testes de login.
- Dia 2
- Importei meu arquivo de services padrão (Conexão com API e Validação de token).
- Recebi o token e lidei com os erros de email/senha.
- Criei as rotas entre as telas e fiz a o usuario ser redirecionado para a pagina de listar consultas ao logar.
- Iniciei a pagina de visualização de consultas.
- Componentizei a consulta assim poderia buscar os valores.
- Dia 3
- Iniciei a estilização do projeto.
- Adicionei uma Splashscreen ao projeto e um icone.
- Estilizei a pagina de Login e o StackNavigator.
- Instalei a biblioteca para o AsyncStorage e iniciei o login automatico.
- Iniciei a função de deslogar o usuario (ainda não estava 100% funcional).
- Dia 4
- Finalizei a visualização de consultas.
- Finalizei a função de logout.
- Iniciei a visualização de apenas uma consulta.
- Adicionei um indicador de carregamento nas telas de login e listagem de consulta.
- Dia 5
- Finalizei a listagem de uma consulta.
- Iniciei a documentação colocando informações ate aqui (fui incrementando esse cronograma a cada dia)
- Adicionei feedback aos usuarios que não tem consultas
- Adicionei uma pagina inicial para verificar dados do usuario e API
- Dia 6
- Passei o dia inteiro retocando o projeto (testando vulnerabilidades).
- Arrumei o design do aplicativo
- Fixei alguns problemas de UX
- Dia 7
- Iniciei a parte de localização do usuario.
- Tentei resolver problemas com permissão do usuario para acessar o GPS.
- Finalizei os requisitos minimos do aplicativo
- Dia 8
- Resolvi problemas do GPS e permissão do usuario
- Inicei o mapa
- Modifiquei a status bar
- Dia 9
- Adicionei o mapa com a localização da consulta e do Usuario
- Criei a API no google maps
- Dia 10
- Fiz a rota da localização do usuario até a da clinica Utilizando a API do google
- Fiz o feedback caso a API não esteja funcionando ou o local da consulta não exista
- Não adicionei a opção de redirecionar ao google maps p