Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Ionic
Code

Primeiros passos com o Ionic: Cordova

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by Rui Isidro (you can also view the original English article)

Final product image
What You'll Be Creating

Neste último fascículo da série "os primeiros passos com Ionic", vai aprender a usar o Cordova como um meio para adicionar as capacidades de hardware na sua app. Vamos ver como usar funcionalidades com geolocalização e vou também mostra-lhe como integrar com a livraria ngCordova para finalizar a sua app. Verifique que preparou a sua máquina para o Ionic antes de iniciar os trabalhos, verifique também que tem todas as ferramentas específicas para a plataforma escolhida.

Ficheiros de projeto

Os ficheiros necessários ao tutorial estão disponíveis no GitHub. A premissa principal da app é a de que vai apresentar alguma informação sobre instalações próximas de si. Neste tutorial, adicionamos a funcionalidade de procurar a sua posição actual e apresentar resultados correspondentes à sua proximidade. Pode ver o exemplo funcional aqui.

Se fizer o clone do projeto, pode codificar em simultâneo comigo usando o Git fazendo git checkout -b start. O código desta lição começa onde o post anterior, Getting Started With Ionic: Navigation, terminou. Pode também visualizar o ponto de partida ao vivo.

Configuração do Cordova

Antes de começar a escrever código, é necessário proceder à configuração do nosso projeto. O Ionic por si só já faz a configuração básica do Cordova, no entanto vamos ainda precisar de inicializar alguns detalhes adicionais.

Em primeiro lugar, precisamos de instalar a livraria ngCordova. Esta livraria é na verdade um módulo Angular que facilita sobremaneira o uso de alguns dos plugins mais populares do Cordova. (Ainda que nem todos os plugins sejam suportados pelo ngCordova) o Bower é usado para instalar esta dependencia.

Em segundo lugar, precisamos de adicionar uma plataforma ao nosso projeto. Que será ios ou android (ou os dois!), dependendo da(s) plataforma(s) que escolhermos suportar. Eu usei ios nos meus exemplos, mas pode substituir essa escolha por android para conseguir os mesmo resultados nessa plataforma.

Em terceiro lugar, vamos instalar o plugin geolocation para o Cordova. Esta operação atribui à sua app a capacidade de obter a posição corrente do utilizador (que requer permissão). Pode obter uma lista de todos os plugins em https://cordova.apache.org/plugins/ com detalhes sobre como proceder à respectiva instalação e configuração de cada um.

Os comandos seguintes devem ser executados a partir da raiz do projeto para cumprir cada um dos três passos.

Uma vez terminada a execução dos comandos, precisamos adicionar o ngCordova à aplicação por forma a que ele seja reconhecido pelo Ionic. Abra o ficheiro www/index.html e adicione a seguinte linha após a referência ao ficheiro ionic.bundle.js.

Depois é preciso atualizar o ficheiro www/js/app.js para incluir o módulo ngCordova. A primeira linha deve ser atualizada para aparecer da seguinte maneira.

Agora que já temos nossas dependências atualizadas, o nosso projeto está pronto para usar o plugin de geolocalização. O próximo passo é configurar uma nova view para começar a usá-lo!

Adicionar a view Location

Vamos criar uma nova página de abertura da app. Esta página mostra uma mensagem sobre como usar a localização do utilizador atual para encontrar lugares próximos. O utilizador deve tocar um botão para confirmar que permite que a app pode aceder à sua localização e em seguida, consultar a lista de lugares que reflete sua localização atual.

Dados de localização do utilizador devem ser vistos como uma preocupação de privacidade e as apps devem ser cuidadosas quando carregam esta informação, por esse motivo os dispositivos móveis não permitem que de forma automática uma app tenha acesso aos dados de geolocalização. As aplicações, têm de pedir permissão (que pode ser declinada ou revogado a qualquer momento) pelo que este é um aspecto a considerar ao usar determinados plugins que exigem permissões. (Usar esses dados com cuidado a fim de evitar a violação da privacidade dos seus utiliadores!)

Em primeiro lugar, vamos criar o template para a view de localização. Criar um novo ficheiro em www/views/location/location.html e inclua o seguinte. (Isto deve parecer-lhe familiar dos tutoriais anteriores, essencialmente cria uma nova view com um botão que irá chamar um método no controlador, que definiremos de seguida).

Vamos agora criar o controlador (vazio) e, de seguida, criar um método para lidar com a localização do utilizador. Criar um novo ficheiro www/views/location/location.js e incluir o seguinte código. Certifique-se de que também estabelece um link para este ficheiro no ficheiro www/index.html.

Neste momento temos uma nova view de localização, mas o botão ainda não vai funcionar. Neste momento já é possível fazer um preview da app no browser fazendo ionic serve. Pode visualizar o seu projeto navegando para http://localhost:8100/#/location.

Deve ter reparado no serviço $cordovaGeolocation no construtor do controller, que vai fornecer-nos o acesso aos dados de localização do utilizador. O resto dos serviços injetados são necessários apenas para lidar com a lógica de negócio do que fazer com os dados de localização.

Existem na verdade duas etapas envolvidas no sentido de obter a localização do utilizador nesta app, primeiro obtém-se os dados de geolocalização a partir do plugin Cordova (que retorna apenas um valor de latitude e longitude), e depois é necessário fazer uma pesquisa inversa na API de Geocode da Google para encontrar os detalhes do lugar da localização atual (que funciona bem com nossas outras chamadas de API).

Adicione o seguinte método ao controlador. Já o vamos analisar em detalhe mais abaixo.

A primeira coisa é usar o serviço de $ionicLoading que apresenta um loader enquanto o local atual é detectado.

Em seguida, usamos o serviço $cordovaGeoposition, que tem um método chamado getPosition para obter a posição atual. Especificam-se opções, que são valores de padrão razoáveis. Pode ler mais sobre getPosition na documentação.

O método getPosition retorna uma promessa, por isso usamos o then para tratar a resposta. Supondo que o utilizador concorda em partilhar a sua localização, ele devolve um objeto que contém as coordenadas de latitude e longitude. Então usaremos esses valores para chamar o API para fazer um reverse geocode para obter o local mais próximo. Se ele falhar, o catch handler usará o $ionicPopup para apresentar um alerta em como falhou.

O serviço $http é usado para procurar o reverse geocode , e se for bem sucedido precisamos verificar se todos os resultados foram devolvidos. Se foi encontrado, o conteúdo de value no serviço de geolocation é atualizado e o utilizador é redirecionado para a lista de lugares usando $state.go. Caso contrário, usa-se o $ionicPopup para mostrar um alerta dizendo que não foram encontrados lugares próximos.

É tudo o que tínhamos que fazer para as funcionalidades do geolocation do dispositivo na nossa app. No entanto, ainda temos que fazer alguns pequenos ajustes na view de lugares e ao ficheiro app.js.

Primeiro, abra o ficheiro www/js/app.js e atualize o serviço Geolocation para o seguinte. Isto é necessário para limpar o valor definido por omissão do serviço geolocalização que nós tínhamos inicialmente codificado para Chicago e ativar o ciclo de gerir corretamente o sincronismo das alterações.

De seguida, modificar a view default da app, atualizando a última linha de configuração para o seguinte. Isto fará a app iniciar na view de localização.

Por último, queremos ajustar a view de lugares por forma a que não faça cache (assim o local atualizado é sempre reflectido), e redirecionar para a view location se nenhum local for encontrado. Abra o ficheiro www/views/places/places.html e atualize a primeira linha da seguinte forma.

Então abra o ficheiro www/views/places/places.js e atualize o início do controlador para coincidir com o seguinte.

Fazemos uma verificação rápida, antes que o controlador seja acionado para detectar se a localização geográfica foi encontrada, se não podemos redirecionar para o local para redefini-la.

Isto vai realmente trabalhar também no seu navegador, já que o browser tem suporte a recursos de geolocalização. Na próxima seção falaremos brevemente sobre como visualizar o aplicativo num emulador.

Pré-visualizar num emulador

O CLI do Ionic tem um comando que permite facilmente emular a aplicação numa versão de software de um dispositivo. Nem todos os recursos de hardware estão disponíveis, mas muitos são emulados, incluindo a localização geográfica.

Usando ionic emulate ios, o Ionic irá iniciar o emulador e carregar o app (da mesma forma para o Android). Se ocorrerem erros, é provável que sua máquina não tenha sido totalmente configurada para a plataforma que você está a tentar emular.

Este comando irá arrancar uma versão real da plataforma do sistema operativo e simula um dispositivo muito realista. Não tendo um dispositivo real para testar, esta é uma ótima maneira para rapidamente verificar a forma como diferentes dispositivos funcionam com sua aplicação.

Você pode precisar reiniciar o emulador algumas vezes para garantir que as alterações feitas não persistirem. Por exemplo, se negar a permissão da app para geolocalização, provavelmente terá que encontrar as configurações para permitir que ele mais tarde, ou você possa redefinir o emulador para remover quaisquer configurações.

Conclusão

Neste tutorial estudamos como usar o Cordova para criar uma app que usa os recursos de hardware e sensores. Com a utilização do ngCordova, é muito fácil aceder a essas informações nas suas apps Ionic. Agora tem acesso a diversos recursos do seu dispositivo como a câmara, geolocalização, leitores de impressões digitais e o calendário. Quando possível, deve aproveitar a biblioteca ngCordova pois facilita imenso a integração de recursos de hardware, mas há outros plugins de Cordova que não são expostos pelo ngCordova.

E terminamos aqui eta série Introdução ao Ionic. Agora deve ter uma compreensão dos princípios básicos e ser capaz de seguir em frente com o Ionic. Se estiver interessado em mais informação similar, veja também alguns dos nossos cursos e tutoriais sobre a framework Ionic.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.