Ejemplo de app con Ionic y Geolocalización

Marcos_J_ · ‎09-01-2015

Hola, estoy tratando de crear una app para Android utilizando AngularJS (Ionic) y tengo muchas dudas sobre cómo se inyecta el código del plugin de Geolocalización.

No estoy utilizando ngCordova, doy por supuesto que no es necesario descargar una librería externa para utilizar los plugins propios del XDK, pero no he encontrado un solo ejemplo funcional de Ionic con plugins de Cordova que pueda servir de referencia.

El código que utilizo es este:

HTML:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="ionic/css/ionic.min.css">
    <link rel="stylesheet" type="text/css" href="css/ionic21-geoloc_main.less.css" class="main-less">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <script src="intelxdk.js"></script>
    <script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>      
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    <script src="xdk/init-dev.js"></script>
    <script type="application/javascript" src="lib/jquery.min.js"></script>
    <script type="application/javascript" src="marginal/marginal-position.js"></script>
    <script type="application/javascript" src="js/ionic21-geoloc_init_services.js"></script>
  </head>

  <body ng-app="pr21" ng-controller='pr21Ctrl'>
    <div class="upage" id="mainpage">
      <div class="upage-outer">
        <div class="upage-content ac0 content-area vertical-col left">
          <ion-list class="widget uib_w_2 d-margins" data-uib="ionic/list" data-ver="0">
            <ion-item class="item widget uib_w_3" data-uib="ionic/list_item" data-ver="0">
                Longitud: {{ longitud }} </ion-item>
            <ion-item class="item widget uib_w_4" data-uib="ionic/list_item" data-ver="0">
                Latitud: {{ latitud }} </ion-item>
            <ion-item class="item widget uib_w_5" data-uib="ionic/list_item" data-ver="0">
                Altitud: {{ altitud }} </ion-item>
          </ion-list>
        </div>
        <ion-header-bar class="bar inner-element uib_w_1 bar-positive bar-header" data-uib="ionic/header" data-ver="0">
          <div class="buttons widget-container content-area horiz-area wrapping-col"></div>
          <h1 class="title">Practica 21- API de Geolocalización</h1>
          <div class="buttons widget-container content-area horiz-area wrapping-col"></div>
        </ion-header-bar>
      </div>
    </div>
  </body>

</html>

y el código del modulo y controlador AngularJS es este (sacado de un ejemplo de la web de ngCordova):

/* --------------
 initialization 
  the xdkFilter argument can be set to a function that
   receives the data of the service method and can return alternate data
   thus you can reformat dates or names, remove or add entries, etc.
   -------------- */

var pr21 = angular.module('pr21',['ionic']);

pr21.config(['$controllerProvider', function($controllerProvider) {
	$controllerProvider.allowGlobals();
}]);


pr21.controller('pr21Ctrl', function($scope,$cordovaGeolocation) {

  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  var coords = $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      $scope.latitud  = position.coords.latitude;
      $scope.longitud= position.coords.longitude;
    }, function(err) {
      // error
	  console.log("25.error en acceso a posicion del GPS");
    });

  var watchOptions = {
    frequency : 1000,
    timeout : 3000,
    enableHighAccuracy: false // may cause errors if true
  };

  var watch = $cordovaGeolocation.watchPosition(watchOptions);
  watch.then(
    null,
    function(err) {
      // error
		console.log("40.error en watchPosition");
    },
    function(position) {
      $scope.latitud = position.coords.latitude
      $scope.longitud = position.coords.longitude
  });


  watch.clearWatch();
  // OR
  $cordovaGeolocation.clearWatch(watch)
    .then(function(result) {
      // success
	  console.log("53. clearWatch completado OK");
      }, function (error) {
      // error
	  console.log("55. error en clearWatch");
    });
});

Al ejecutarlo en el emulador devuelve un error "unknown provider $cordovaGeolocationProvider <- $cordovaGeolocation" que probablemente se debe a que el plugin de XDK no utiliza estos métodos, pero no encuentro documentación que explique cómo acceder a estas funciones del plugin.

Gracias de antemano

PaulF_IntelCorp · ‎09-01-2015

You said:

Hi, I 'm trying to create an app for Android using angularjs (Ionic ) and have many questions about how the code is injected Geolocation plugin.

I'm not using ngCordova, I assume you do not need to download an external library to use XDK own plugins, but I have not found a single example of Ionic functional Cordova plugins that can serve as a reference.

The code I use is this:

HTML:

and:

and code of the module and the controller is angularjs ( out of a sample web ngCordova ):

and:

Running on the emulator returns an error "unknown provider $ cordovaGeolocationProvider <- $ cordovaGeolocation " probably due to plugin XDK not use these methods, but can not find documentation on how to access these functions plugin.

I believe you cannot use Angular web examples in a Cordova app. What you need to search for is a Cordova Angular example, not a web Angular example. I'll see if there is someone here who has more experience using Angular in this environment.

Marcos_J_ · ‎09-02-2015

Hi Paul, thank you for your comments.

My problem right now is that I'not able to find one single example of Cordova app using Ionic other than ngCordova apps that people made using CLI commands.

I want to use Intel XDK IDE and tools from the begginning to the end in order to document how to build fully-compatible mobile applications for Android and Windows Phone 8 that include camera, geolocation, push notification and some other funcions and plugins, from the bottom to the top without having to install any other products or environments (and I assume ngCordova is a different library), and whithout having to write CLI commands.

Surprisingly, what I've found so far are examples made with Intel XDK using App Framework and JQuery, but nothing with Ionic (or AngularJS-based hybrid apps anyway) and I can figure out this should not be that complicated to build them. There are examples of Ionic apps but without using plugins (in fact I have written a complete catalog of ionic-based examples for different purposes, but all of them are web apps, they don't access hardware resources).

What I need to know is a couple of things:

- What JS libraries are required to be included in my index.html file in order to be able to use Cordova plugins, assuming that cordova.js library cannot do the work. Being more specific, I want to know if every single Cordova plugin needs to be included individually or, in the other hand, the initial code provided by XDK is able to find all pluings resources when needed. For instance: I want my app to capture images but I don't know how to tell it where are located the javascript files which make up the Camera plugin inside the file tree.

- What are the dependencies I need to inject into angular modules and controllers so I can access the required plugin methods. As I said before, I don't know if all plugins share a common library or I do need to inject each one of them individually,

- What else I need to do/change to provide all these functionalities (i.e. XML files and so on), if any, when using Ionic with plugins.

I assume that all these concerns should be easily solved using a working example, which is what I am looking for.

Regards

PaulF_IntelCorp · ‎09-02-2015

Take a look at this example app, it shows you one way to initialize an app for Cordova and setup the app for use with a variety of standard Cordova plugins. This app is designed to be a teaching app (see the tutorial in the docs directory of the repo and the comments in the code). You may choose to structure and write your code differently, this app was written to be easy to read and understand, it is not designed to be clever or opaque with JavaScript, so it may seem to be a little archaic or wordy.

The cordova.js file is a special file that handles the enumeration and initialization of Cordova plugins. It does not direct your app in any way or control your app (other than initialization). The important thing to understand about a Cordova app (whether built with Cordova CLI, PhoneGap or the Intel XDK), is that you must accommodate the initialization of the underlying native code that is part of each plugin. That is why you must wait for an additional "ready" event, waiting for an "onload" event (or similar) is not sufficient. In the example I point to see the file named init-dev.js inside the www/xdk directory, which is simply an "event aggregator" I created to generate an event I named "app.Ready" as a way of capturing the Cordova ready event, the old XDK ready event and the standard document ready event. Once these have been satisfied the "app.Ready" event is triggered and your app can "go to work." Attempting to do things before these are ready will usually result in problems, because the native code runs on a different thread. You can set the "dev.LOG" variable to "true" to see how that file executes.

Cordova plugins can be though of as additional JavaScript APIs, the kind you get by adding any JavaScript library. The difference is they have underlying native code dependencies. Those native code dependencies run in parallel with the webview (embedded browser) thread, they are not interlocked. So most of these APIs are asynchronous.

As far as adding Angular or other libraries, keep in mind that attempting to access any Cordova plugin API before the initialization is complete will not work. You must allow the native code initialization to complete. In some cases this can take several seconds, depending on the plugins you have included. Inspect the variables inside the dev.isDeviceReady object to see just how long it takes. Note that the time it takes to init will vary with the device and the operating system (iOS, Android, etc.)

Hope this helps.

PaulF_IntelCorp · ‎09-02-2015

See also this thread: https://software.intel.com/en-us/forums/topic/550920