Criando serviço de Geolocalização

Olá pessoal,  Aqui neste post estarei mostrando como criar um serviço de armazenamento de posição.  A idéia é fazer o usuário dar checkins de sua pósição atual, e armazenar em uma fonte de dados, suas localizações para verificações posteriores. 

Antes de tudo, entre na plataforma.   

Siga os passos a seguir: 

1. Criar App 

2. Criar New Service 

3. Criar BD 

4. Criar Colums 

5. Import DB services 

6. Criar Pages 

7. Model and Storage 

8. Design Pages 

9. Data Configure

1. Criar App 

Antes de tudo, lógico, vamos criar um App na plataforma. 

2. Criar new Service 

Vamos então clicar em Create New e criar um novo serviço. Serviço este que fará para nós todo o backend de mapeamento de geolocalização.  Veja a figura: 

3. Criar um BD 

É muito importante salvar nossos dados, e para isso vamos criar a nossa fonte de dados na plataforma. Lembre-se de que toda a comunicação é feita utilizando a tecnologia JQuery. Então, clique no menu acima Database e crie um novo banco. 

4. Criar Colecctions e Columns 

Para agrupar nossos itens de geolocalização, vamos precisar criar uma Coleção. Coleção esta que será responsável por guardar nossos dados, e assim esta fonte de dados poderá nos fornecer o JSON de nossos dados. 

O nosso MODEL Geolocalização (Geolocation) será composto por um _id, latitude, longitude e descrição. Portando é importan que criemos essas colunas na nossa collection. 

E assim nosso banco está preparado para receber nossos dados. 

5. Import DB Services 

Voltamos ao dashboard de criação de nossa aplicação, e com isso vamos importar os serviços de comunicação com a nossa fonte de dados criada. Para isso, clicamos em Create New, e escolhemos a opção Import database services. 

6. Criar Pages 

Vamos dar vida a nossa aplicação. Começamos então criando as Paginas. Sinta-se livre com sua criatividade. 

7. Model and Storage 

Aqui vamos criar os nossos modelos que virão da fonte de dados, e que também fará o controle de instâncias. Estas instâncias, são para controle de Geolocation Selecionadas, que serão exibidas na tela 3 de nossa aplicação.  Portanto, vamos criar o nosso Model Geolocation, com os itens tipo String: Latitud, Longitud, Description. 

Em Storage, vamos salvar um model, e strings de controle para variar entre paginas. Aqui em Storage estaremos salvando também no famoso LocalStorage, bastante usado para salvar cookies nos navegadores. São bastante importantes para quem deseja trabalhar com apps Offline. 

8. Design Pages 

Aqui voltei a mexer nas paginas para verificar a disposição dos componentes. portanto libere sua criatividade. 

9. Data Configure 

Passo mais importante até aqui. O Data configure consiste em você pré-programar a aplicação para executar tarefas a baixo nível (REST). 

Iniciemos na Page 1: 

Aqui em Data adicionei dois serviços. Um de geolocalização no tipo Devices (pois é o sistema de celular ou navegador que irá capturar a localização com permissão de usuário), e outro do tipo Device que irá salvar no banco os dados de Checkin quando for clicado o botão Check na Screen 1. 

Iniciando pelo Serviço de Geolocalização, observe a disposição de relacionamentos, em Mapping do item Sucess:  Pego o response e salvo a latitude e longitude, bem como o que o usuário tiver escrito no input, e atualizo as variáveis que criamos lá em Storage. (latitude, longitude, e description). 

Nós reutilizaremos essas variaveis atualizadas no próximo serviço. 

No serviço Create_Geolocation, observe a disposição de relacionamentos, em Mapping do item create, Before send event:  Pego elementos salvos no Storage, e jogo no corpo da requisição (request). 

Observe também que no Sucess do create, eu adicionei um Navigate to Page, para redirecionar para a Screen 2. 

Em Screen 2, Eu adicionei um serviço de List_geolocations, que fará uma requisição pedindo todos os itens salvos na collection.  Observe a disposição dos relacionamentos: 

Clico, então em JS, e configuro para que o item na lista presente na view Screen 2, seja composto internamente por um Model do tipo Geolocation. Script na imagem abaixo: 

Quando o item é clicado, ele terá que redirecionar para a pagina 3, e mostrar os detalhes. Para isso coloco na View um evento de Navigation to Page em cima do item, e na Screen 3, deve ser trabalhado a disposição quando receber os itens do model. 

Lembro-vos que toda alteração que é feita eu clico em SAVE, para que caso a plataforma fique fora do ar, estarei tranquilo quanto ao conteúdo que ja foi todo trabalhado. 

Em Screen 3: 

Faço o mapeamento o item vindo do model. Para isso, como a função javascript (JQuery), seta o valor do item geoselected, pego então este model, e mapeio com relaçao ao itens presentes no google maps presente na view 3. 

Por fim, adiciono os eventos nas views. 

Duvidas, Comente. 

App de exemplo na PLAY STORE: https://play.google.com/store/apps/details?id=io.appery.project275172