vs0uz4 / tripplanner Goto Github PK

O Tripplanner é um aplicativo mobile, para você planejar suas viagens, podendo adicionar os locais por onde passou e os custos envolvidos. Alimentação, hospedagem, transporte, passeios tudo pode ser adicionado como um ponto da viagem. O aplicativo multiplataforma foi desenvolvido em Javascript, usando o framework React Native. Podendo ser disponibilizado para as plataformas IOS e ANDROID.

• NodeJS;
• Npm ou Yarn;
• Android SDK;
• Xcode;
• React Native;
• Google Maps API.

Para realizar o Build e gerarmos os .APK, aplicativos para a plataforma ANDROID se faz necessário a instalação e configuração do Android Studio

Para aplicativos .IPA, destinados a plataforma IOS temos a necessidade de um sistema operacional OSX além de instalar e configurar o XCode

• Criação de Viagens;
• Griação de Pontos de Viagem;
• Persistência dos Dados no AsyncStorage;
• Posicionamento GPS em Realtime;
• Adição de Imagem à Viagem - (18/12/2018);
• Validação dos Dados ao Serem Persistidos;
• Adição de Preços em Outras Moedas.

O posicionamento georeferencial em tempo real foi implementado na seção de adição de pontos de viagens, afim de que o MAPA utilize como parâmetro a sua localização atual. Esta funcionalidade foi adicionada por conta própria e com a finalidade de melhorar a usabilidade do aplicativo.

Para poder utilizar a localização em tempo real, foi necessário adicionar ao Android Manifest a permissão de geo localização.

O HandsOn foi todo baseado na criação do aplicativo para a plataforma IOS, porém por falta de um computador com sistema operacional OSX, focamos o desenvolvimento do projeto para a plataforma Android.

Para criar efetivamente o .Apk para distribuição e/ou efetuar testes nos dispositivos Android se fez necessário a crialçai de uma Key (Chave) para assinatura do aquivo final .APK, além de algumas configurações extas. As Configurações podem ser encontradas nos seguintes links abaixo:

• https://facebook.github.io/react-native/docs/signed-apk-android
• https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

Após instalar, configurar o Android Studio e posteriormente a ter criado e configurado a imagem a ser utilizada para testes durante o desenvolvimento do aplicativo através do AVD Manager, passei a utilizar o seguinte comando abaixo para iniciar o emulador:

emulator -avd nome_da_imagem_avd

Para iniciar a criação do bundle utilizei o seguinte comando abaixo:

react-native start

Para gerar a versão do aplicativo, automaticamente instala-la no emulador e já iniciar a mesma, basta usar o comando abaixo:

react-native run-android

O comando acima irá criar uma versão do aplicativo menos performática do que versão final de distribuição devido estar disponível junto a ela todas as funcionalidades de suporte a debug.

E por fim para efetivamente gerar o .apk, após as devidas configurações sejam efetivamente realizadas, basta executar o seguinte comando em seu shell

react-native run-android --variant=release

Algumas funcionalidades extras que não encontravam-se no escopo do treinamento estão na pendência de serem desenvolvidas afim de praticar e fixar os conhecimentos. Estas funcionalidades foram sugeridas como melhoria para o projeto de forma a constarem no portifólio de aplicações/projetos desenvolvidos. As funcionalidades a serem desenvolvidas são:

• [Android/IOS] Adição de Imagem à Viagem;
• [Android/IOS] Validação dos Dados ao Serem Persistidos.
• [Android/IOS] Adição de Preços em Outras Moedas.

Ultima atualização : 18/12/2018

Este projeto foi entregue como parte do Workshop, Hands On React Native (edição Tripplaner) promovido pelo DevPleno (www.devpleno.com).

Participante: Vitor de Souza Rodrigues

Chave do Certificado: ...

O certificado pode ser consultado em: https://certificados.devpleno.com