Archivos de la categoría phonegap

Tutorial de Ionic – Firebase – parte 2: Database – Guardar nuestros sitios en la nube.

En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:

Hola a todos:

El el post anterior vimos como autenticar un usuario en firebase con email y contraseña, hoy vamos ha ver como utilizar Firebase Database para guardar nuestros sitios en la nube.

Para ello vamos a crear un provider para gestionar nuestros sitios en firebase Database, por lo tanto desde consola nos situamos dentro de la carpeta de nuestro proyecto y creamos en nuevo provider:

ionic g provider firebaseDb

Ahora editamos el archivo firebase-db.ts que se acaba de generar dentro de la carpeta providers/firebase-db, eliminamos el import Http y rxjs/add/operator/map e importamos AngularFireDatabase, FirebaseListObservable  y nuestro provider AuthProvider quedando de la siguiente manera:

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AuthProvider } from '..auth/auth';
/*
  Generated class for the FirebaseDbProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class FirebaseDbProvider {

  constructor(public afDB: AngularFireDatabase, public auth: AuthProvider) {
    console.log('Hello FirebaseDbProvider Provider');
  }
}

Como necesitamos el id del usuario lo primero que vamos ha hacer es añadir la función getUser al provider auth que creamos en el post anterior, por lo tanto editamos auth.ts y añadimos esta función:

// Obtenemos el id de usuario.
 getUser(){
    return this.afAuth.auth.currentUser.uid;
 }

Bien, ahora que ya podemos obtener el id de usuario vamos a añadir en el archivo firebase-db.ts un método para guardar nuestros sitios en Firebase database:

guardaSitio(sitio){
     sitio.id  = Date.now();
     return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio)
  }

Como vemos la función recibe como parámetros  sitio que será un objeto con los datos de nuestro sitio.

Al objeto sitio le añadimos un campo id para identificarlo y así poder luego modificarlo. Como necesitamos que el id sea diferente cada vez vamos a utilizar Date.now() que nos devuelve los milisegundos transcurridos desde el 1 de enero de 1970, con esto  nos aseguramos que no se repita el id, a no ser que seas capaz de guardar dos sitios en menos de un milisegundo ;-P.

En firebase se guarda la información con estructura de árbol en formato JSON. Para acceder a ella tenemos que hacer referencia a la “ruta” a la que queremos acceder.

En este caso le estamos diciendo que guarde nuestro sitio con esta estructura ‘sitio/_id_usuari_/_id_sitio_/_sitio_’.

El id de usuario lo obtenemos con la función que acabamos de definir en  AuthProvide  this.auth.getUser().

Dentro de sitio colgarán los diferentes id de usuarios de los cuales a su vez colgarán los diferentes sitios de cada usuarios.

Para verlo mas claro en el modal nuevo-sitio vamos a modificar el método guardarSitio para que en lugar de guardar el sitio en la base de datos local SQlite lo guarde en firebase y podamos ver la estructura de como se guarda la información en firebase.

Editamos modal-nuevo-sitio.ts y hacemos los siguientes cambios:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController  } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
 * Generated class for the ModalNuevoSitioPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal-nuevo-sitio',
  templateUrl: 'modal-nuevo-sitio.html',
})
export class ModalNuevoSitioPage {

  coords : any = { lat: 0, lng: 0 }
  address: string;
  description: string = '';
  foto: any = '';

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private viewCtrl : ViewController,
    private camera: Camera,
    // private db: DbProvider
    private dbFirebase :FirebaseDbProvider,
  ) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalNuevoSitioPage');
      this.coords.lat = this.navParams.get('lat');
      this.coords.lng = this.navParams.get('lng');
       this.getAddress(this.coords).then(results=> {
        this.address = results[0]['formatted_address'];
      }, errStatus => {
          // Aquí iría el código para manejar el error
      });
  }

  cerrarModal(){
    this.viewCtrl.dismiss();
  }

  getAddress(coords):any {
    var geocoder = new google.maps.Geocoder();

    return new Promise(function(resolve, reject) {
        geocoder.geocode({'location': coords} , function (results, status) { // llamado asincronamente
            if (status == google.maps.GeocoderStatus.OK) {
                resolve(results);
            } else {
                reject(status);
            }
        });
    });
  }

  sacarFoto(){

    let cameraOptions : CameraOptions = {
        quality: 50,
        encodingType: this.camera.EncodingType.JPEG,
        targetWidth: 800,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.CAMERA,
        correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarSitio(){
    let sitio = {
      lat: this.coords.lat,
      lng: this.coords.lng ,
      address: this.address,
      description: this.description,
      foto: this.foto
    }
  
this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio guardado en firebase:');
        this.cerrarModal();
    })
   }
}

Como ahora vamos a guardar nuestros sitios en firebase he comentado el import de DbProvider ya que ahora no lo vamos a utilizar, y en la función guardarSitio hemos sustituido la linea this.db.addSitio… por this.dbFirebase.guardaSitio…

Como vemos llamamos a la función guardaSitio del provider FirebaseDbProvider que hemos creado más arriba y le pasamos como parámetro el objeto sitio con los datos de nuestro sitio.

Ahora ejecutamos nuestra aplicación y vamos a la consola de firebase, antes de guardar ningún sitio si seleccionamos Database en el menú de la izquierda de la consola de firebase veremos algo como esto:

Ahora vamos a guardar un nuevo sitio desde nuestra app, rellenamos los campos del formulario del modal nuevo sitio y le damos a guardar, si todo ha ido bien ahora en la consola de firebase veremos algo como esto (pulsa en el icono ‘+’ para desplegar los campos):

Como vemos los datos de guardan en una estructura de árbol, en el primer nivel esta sitio, de sitio ‘cuelga’ los id de usuario, en este caso solo tenemos el nuestro pero si distribuís la aplicación por cada usuario habrá un nodo, de cada usuario ‘cuelgan’ los ids de cada sitio, y de cada id a su vez cuelgan los campos del sitio.

Ahora que ya podemos guardar nuestros sitios en firebase vamos a ver como podemos obtener todos los sitios que tenemos guardados para mostrarlos en el listado:

Lo primero que vamos ha hacer es crear una función en firebase-db.ts para obtener el listado de sitios guardados en firebase database:

getSitios(){
    return this.afDB.list('sitios/'+this.auth.getUser()).valueChanges();
  }

Para obtener el listado de sitios guardados utilizamos el método list de AngularFireDatabase pasando como parámetro la ruta a partir de la cual queremos obtener los datos, en este caso queremos obtener todo lo que cuelgue de sitios/id_usuario,  es decir todos los sitios de nuestro usuario, el id de usuario una vez más lo obtenemos con this.auth.getUser() que hemos creado en nuestro provider AuthProvider.

Con .valueChanges() devolvemos un observable cuando se produzcan cambios en la base de datos.

Bien, llegados a este punto vamos a modificar el controlador de la página listado para que en lugar de obtener los datos de la base de datos local los obtenga directamente de firebase.

Editamos listado.ts e importamos FirebaseDbProvider:

import { Component } from '@angular/core';
import { AlertController, IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';


/**
 * Generated class for the ListadoPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-listado',
  templateUrl: 'listado.html',
})
export class ListadoPage {

  sitios: any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public db : DbProvider,
    public modalCtrl : ModalController,
    public alertCtrl : AlertController,
    public dbFirebase :FirebaseDbProvider,

  ) {

  }

Ahora en la función ionViewDidEnter() vamos a sustituir this.db.getSitios().then((res)=>{…}) por lo siguiente:

ionViewDidEnter(){
   
    this.dbFirebase.getSitios().subscribe(sitios=>{
      this.sitios = sitios;
    })

}

La función getSitios() que como hemos visto a su vez llama al método list de AngularFireDatabase nos devuelve un observable, por lo que nos suscribimos al resultado. Aquí podemos ver claramente la diferencia entre un observable y una promesa.

Guardamos en this.sitios la lista de sitios que obtenemos lo que hará que se refresque automáticamente en la vista del listado.

Como ya sabemos una promesa ejecuta lo que tengamos definido en  then(res=>{ …}) una vez tenga listo el resultado, pero esto se ejecuta una única vez, sin embargo un observable va a ejecutar lo que tengamos definido en .subscribe(res=>{…}) cada vez que haya un cambio en el resultado. Por ejemplo si desde la consola de firebase cambiamos a mano el campo description de nuestro sitio, este se verá automáticamente reflejado en nuestra aplicación, es interesante hacer la prueba.

En este momento ya podemos guardar sitios en firebase y mostrarlos en el listado:

Lo siguiente que vamos ha hacer es la modificación de los sitios guardados.

Para ello primero vamos ha hacer una pequeña modificación a la función guardaSitio() de nuestro provider firebase-db.ts:

guardaSitio(sitio){
   if(!sitio.id){
      sitio.id  = Date.now();
    }
    return this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+sitio.id).set(sitio)
  }

Hemos añadido un if para comprobar si el sitio que recibimos en la función tiene el campo id definido.

Como utilizamos el id del sitio para establecer la ruta del registro, si el sitio que recibimos para guardar no tiene id significa que es un sitio nuevo y entonces le damos un id, si ya tiene un id significa que es un sitio que ya existe y hay que modificar.

Modificar un registro en firebase se hace exactamente igual que crear uno nuevo, si la ruta a la que hacemos referencia no existe crea el registro, si ya existe entonces modifica el registro existente en firebase.

Ahora vamos a  modificar el archivo modal-detalle-sitio.ts para hacer que al guardar los cambios al editar un sitio existente se guarden los cambios en firebase, para ello vamos a importar FirebaseDbProvider para poder llamar a la función guardaSitio que acabamos de modificar, y vamos también a modificar la función guardarCambios para que guarde los cambios en firebase en lugar de en la base de datos local:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { LaunchNavigator } from '@ionic-native/launch-navigator';
import { Camera, CameraOptions } from '@ionic-native/camera';
// import { DbProvider } from '../../providers/db/db';
import { FirebaseDbProvider } from '../../providers/firebase-db/firebase-db';

/**
 * Generated class for the ModalDetalleSitioPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-modal-detalle-sitio',
  templateUrl: 'modal-detalle-sitio.html',
})
export class ModalDetalleSitioPage {

  sitio: any;
  edit : boolean = false;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private viewCtrl : ViewController,
    private launchNavigator : LaunchNavigator,
    private camera: Camera,
  //  private db: DbProvider,
    private dbFirebase :FirebaseDbProvider

  ) {
     this.sitio = this.navParams.data;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ModalDetalleSitioPage');
  }

  cerrarModal(){
    this.viewCtrl.dismiss();
  }

  comoLlegar(){
    let destino = this.sitio.lat+', '+this.sitio.lng;
    this.launchNavigator.navigate(destino)
    .then(
      success => console.log('Launched navigator'),
      error => console.log('Error launching navigator', error)
    );
 }

 editar(){
   this.edit = true;
 }

 sacarFoto(){

    let cameraOptions : CameraOptions = {
        quality: 50,
        encodingType: this.camera.EncodingType.JPEG,
        targetWidth: 800,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.CAMERA,
        correctOrientation: true
    }


    this.camera.getPicture(cameraOptions).then((imageData) => {
      // imageData is a base64 encoded string
        this.sitio.foto = "data:image/jpeg;base64," + imageData;
    }, (err) => {
        console.log(err);
    });
  }

  guardarCambios(){

     let sitio = {
      id : this.sitio.id,
      lat: this.sitio.lat,
      lng: this.sitio.lng ,
      address: this.sitio.address,
      description: this.sitio.description,
      foto: this.sitio.foto
    }

    this.dbFirebase.guardaSitio(sitio).then(res=>{
        console.log('Sitio modificado en firebase');
        this.cerrarModal();
    })
   }

}

Hemos comentado el import de DbProvider porque ya no lo estamos utilizando.

Ahora si pruebas la aplicación con el panel de firebase abierto podrás ver que si modificas un sitio que tengas guardado automáticamente se verá reflejado este cambio en el registro de firebase.

Para concluir solo nos queda eliminar sitios.

Vamos a añadir a  FirebaseDbProvider en el archivo firebase-db.ts una función para eliminar un sitio de la base de datos de firebase:

public borrarSitio(id){
        this.afDB.database.ref('sitios/'+this.auth.getUser()+'/'+id).remove();

}

Como puedes ver es muy sencillo, solo necesitamos recibir el id del sitio que queremos eliminar y haciendo referencia a la ruta de nuestro sitio (que una vez más es sitios/_id_usuario_/id_sitio) utilizamos la función remove() para eliminar el sitio.

Ahora en el listado solo tenemos que sustituir la llamada a borrarSitio() de la base de datos local  de DbProvider por la función que acabamos de crear en FirebaseDbProvider, por lo tanto editamos el archivo listado.ts y dejamos la función borrarSitio() de la siguiente manera:

borrarSitio(id){

    let alert = this.alertCtrl.create({
      title: 'Confirmar borrado',
      message: '¿Estás seguro de que deseas eliminar este sitio?',
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            // Ha respondido que no así que no hacemos nada
          }
        },
        {
          text: 'Si',
          handler: () => {
               // AquÍ borramos el sitio en firebase
              this.dbFirebase.borrarSitio(id);
           }
        }
      ]
    });

    alert.present();

 }

Como podemos observar ya no necesitamos obtener de nuevo los sitios una vez borrado para que se refresque el listado ya que al ser firebase una base de datos en tiempo real el listado se actualiza automáticamente.

Podéis probar a borrar un sitio y veréis como el sitio se elimina automáticamente en el panel de firebase y el listado se actualiza.

Eso es todo por hoy, con esto ya podemos hacer muchas cosas interesantes utilizando firebase, seguro que se os ocurren grandes ideas para realizar apps utilizando firebase como backend. Podéis dejarme en los comentarios  esas grandes ideas, no se lo contaré a nadie ;-P

 

Evitar rotación de pantalla en android

Hola a todos:

Hoy vamos a ver como podemos impedir que la aplicación que estemos desarrollando para android no rote al cambiar de posición el dispositivo móvil.

Para ello tenemos que editar el archivo AndroidManifest.xml de nuestro proyecto android y en la etiqueta activity lo siguiente:

android:screenOrientation=”portrait”

Con esto le estamos indicando que nuestra aplicación se mostrará solo en vertical.

Un ejemplo de como quedaría el archivo AndroidManifest.xml seria:

<?xml version='1.0' encoding='utf-8'?>

<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" android:windowSoftInputMode="adjustPan" package="com.reviapps.prueba" xmlns:android="http://schemas.android.com/apk/res/android">

<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" /><uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:allowBackup="true">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:screenOrientation="portrait" android:launchMode="singleTop" android:name="Prueba" android:theme="@android:style/Theme.Black.NoTitleBar">

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
</activity>
</application>
</manifest>

Marcado en rojo vemos el parametro que tenemos que añadir.

Si en lugar de verticalmente queremos forzar que el contenido de nuestra app se muestre horizontalmente sustituiremos portrait por landscape:

  android:screenOrientation=”landscape”

Como vemos es algo muy sencillo pero es una duda muy común cuando nos enfrentamos por primera vez a un proyecto android.

 

Ocultar barra de estado en Android

Hola a todos:

Hace algún tiempo escribí una entrada sobre como Ocultar barra de estado en iOS, hoy vamos a ver como hacer lo mismo en Android:

Por defecto cuando hacemos un proyecto en Eclipse para Android este se ejecuta con la barra de estado superior quitándonos espacio para la aplicación. En este caso vamos a hacer que nuestro programa se ejecute en pantalla completa ocultando la barra de estado. Para este ejemplo usamos un proyecto creado con Apache Cordova (PhoneGap).

En nuestro proyecto nos vamos al directorio src → nombre-proyecto → archivo.java y lo editamos. Añadimos la línea import android.view.WindowManager;  en los imports y luego añadimos después de savedInstanceState lo siguiente:

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN |WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

Eso debe bastar para que al ejecutar nuestra aplicación se abra en pantalla completa, sin la barra de estado superior (reloj, estado de red, etc).

Un ejemplo de como quedaría el código completo seria:

package com.reviapps.prueba;
import android.os.Bundle;
import android.view.WindowManager;
import org.apache.cordova.*;
public class Prueba extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
          getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,        WindowManager.LayoutParams.FLAG_FULLSCREEN |        WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);               // Set by <content src="index.html" /> in config.xml        super.loadUrl(Config.getStartUrl());        //super.loadUrl("file:///android_asset/www/index.html");   
    }
}

Las lineas marcadas en rojo son las que tenemos que añadir.

De esta sencilla manera conseguiremos que no aparezca la barra de estado ganando espacio en nuestra app o juego.

Abrir mapa nativo en iOS, Android y Windows Phone desde un link

 

Hola a todos:

A veces nos interesa poner el típico enlace de “Como llegar” en nuestra web, o en una app que estemos construyendo por ejemplo con Phonegap, y nos interesa que la dirección que le indicamos se abra en la aplicación nativa  de mapas del móvil, que suele funcionar mejor y la interfaz resulta mas familiar para el usuario que esta acostumbrado a utilizar su plataforma móvil.

Veamos las diferentes tipos de url que podemos utilizar en los liks para abrir mapas.

Por defecto:

Sabemos que tenemos el link estándar de google maps que podría ser algo así:

<a href="http://maps.google.com?q=laubideta+16+matiena+abadiano">Mostrar mapa</a>

iOS:

Sin embargo para que nos abra la aplicacion de mapas nativa de iOS (iPhone) deberemos poner una url como esta:

<a href="http://maps.apple.com/maps?q=laubideta+16+matiena+abadiano">Mostrar Mapa en iOS</a>

Y si queremos que nos trace una ruta  desde el punto en el que nos encontramos hasta un punto  de destino tenemos que usar una url como esta:

 <a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao">como llegar Ios</a>

En el parámetro saddr ponemos Current%20Location para indicar que el punto de inicio es el sitio donde nos situamos en este momento, podemos indicar una dirección de inicio de la ruta en lugar de “Current Location” , y en saddr ponemos la dirección de destino.

Tambien podemos indicarle la dirección mediante coordenadas de latitud y longitud:

<a href="http://maps.apple.com/maps?saddr=Current%20Location&daddr=43.12955890000001,-2.542329300000006">Como  llegar en IOs - coordenadas</a>

Android:

Para que se abra directamente la aplicación de mapas de Android usaremos:

<a href="geo:0,0?daddr=Laubideta+16+Abadiano+bizkaia">como  llegar Android</a>

Si lo que queremos es indicar la dirección por sus coordenadas seria:

<a href="geo:43.1689947,-2.608256200000028">Como llegar Android - Coordenada</a>

Por desgracia este tipo de url no permite indicarle un punto de inicio para establecer una ruta, una vez abierto el mapa el usuario deberá seleccionar en la aplicación  que le indique la ruta si así lo desea.

Windows Phone:

Las urls anteriores no funcionan en Windows Phone, que utilizan su propio formato:

<a href="maps:Elorrio+Bizkaia">Abrir mapa en Windows Phone</a>

Por coordenadas sería:

<a href="maps:43.1689947,-2.608256200000028">Abrir mapa en Windows phone por coordenadas</a>

De esta manera podemos elegir que url nos interesa.

Si estamos trabajando con Phonegap/Apache Cordova elegiremos la que se ajuste a la plataforma para la que estemos utilizando.

A modo de información os comento que otra forma de hacerlo en Phonegap puede ser utilizar InAppBrowser de la siguiente manera:

window.open("http://maps.google.com/?q="+ address,"_system");

Si estamos desarrollando una web en php  una  opción es detectar la plataforma y mostrar el link con la url que corresponda dependiendo de este.

Para detectar dispositivos móviles en php se puede utilizar la clase php-mobile-detect que dispone de los siguientes metodos: isAndroid(), isAndroidtablet(), isIphone(), isIpad(), isBlackberry(), isBlackberrytablet(), isPalm(), isWindowsphone(), isWindows(), isGeneric(), isMobile().

Un ejemplo de como la  podríamos usar para mostrar un enlace dependiendo del dispositivo seria  este:

<?php
include('Mobile_Detect.php');
$detect = new Mobile_Detect();
if( $detect->isAndroid() ) {
 // Android
 $url="geo:0,0?daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isIphone() ) {
 // iPhone
 $url="http://maps.apple.com/maps?saddr=Current%20Location&daddr=Universidad+de+deusto+bilbao";
} elseif ( $detect->isWindowsphone() ) {
 // Windows Phone
 $url="maps:Universidad+de+deusto+bilbao";
} else{
 // Por defecto
 $url = 'http://maps.google.com?daddr=Universidad+de+deusto+bilbao';
}
 echo '<a href="'.$url.'">Mostrar Mapa</a>';
?>

 

Ahora os mostraré un sencillo ejemplo de como podemos hacer esto con javascript:

Primero vamos a crear una función en javascript  que he llamado showMap:

Para hacer un ejemplo de forma rápida podéis pegar este código en el head.

 // ****************************************************************//
 // * Función: showMapa() *//
 // * Descripción: Abre el mapa nativo del dispositivo móvil *//
 // * Autor: Eduardo Revilla Vaquero *//
 // ****************************************************************//

 showMap=function(q)
 {
 var device = navigator.userAgent;
 var url = 'http://maps.google.com?daddr='+q;
 if (device.match(/Iphone/i) || device.match(/iPhone|iPad|iPod/i))
 {
 // iOs
 url='http://maps.apple.com/maps?saddr=Current%20Location&daddr='+q;
 }
 else if(device.match(/Android/i))
 {
 // Android
 url='geo:0,0?q='+q;
 }
 else if(device.match(/Windows Phone/i))
 {
 // windows phone
 url='maps:'+q;
 }

 window.location.href = url;
 }

Y después en el body donde queramos mostrar el enlace al mapa podremos algo como esto:

<a href="#" onclick="showMap('Universidad+de+Deusto+Bilbao')">Mostrar mapa</a>

Y solo con este pequeño código podemos redirigir la petición y abrir el mapa nativo del móvil independientemente de la plataforma en la que nos encontremos.

Sencillo ¿no? 😉

Y…. eso es todo por hoy.

Espero vuestros comentarios.

Un saludo.

Índice   –   <– Capítulo Anterior

Como abrir Google Play y App Store desde Phonegap (Apache Cordova)

 

Hola a todos,

En ocasiones nos puede interesar enlazar con otra aplicación nuestra o que muestre todas las apps que tenemos publicadas en Google Play o en la App Store de apple desde nuestra aplicación creada con Phonegap.

En Android:

Para acceder nuestras aplicaciones en Google Play desde javascript  usamos:

window.location.href="market://search?q=pub:<nombre_publicador>";

En mi caso escribiría:

window.location.href="market://search?q=pub:Eduardo+Revilla+Vaquero";

Tenéis que sustituir lógicamente  “Eduardo+Revilla” por vuestro nombre de publicador.

Si lo que queremos es enlazar con una app en concreto tenemos que escribir lo siguiente:

window.location.href="market://details?id=<nombre_paquete>"

Por ejemplo:

window.location.href="market://details?id=com.revigames.SnowSoccer"

En iOS:

Si estamos desarrollando para iOS y queremos enlazar con otra aplicación en la App Store tenemos que escribir algo como esto:

window.location.href="itmss://itunes.apple.com/us/app/galactic-insects/id806472599?ls=1mt=8"

Una forma de saber la url que debemos poner es:

  1.  Desde iTunes Connect seleccionamos Manage your Apps.
  2. Selecciónamos la app a la que queremos enlazar y en links pulsamos botón derecho sobre View in App Store.
  3. Copiamos la dirección del enlace.
  4. sustituimos https:// por itmss://

Por cierto, os animo a que probéis mis juegos: 😉