Gijón Vinos y Tapas

Gijón Vinos y Tapas es una aplicación que desarrollé un fin de semana para practicar con phonegap y probar el Intel’s App Framework, un framework que desde mi punto de vista es bastante completo, rápido y fácil de usar, para mi es bastante mejor que el popularmente conocido y usado jQuery Mobile.

La aplicación lee un JSON de los bares proporcionado por el ayuntamiento de Gijón a través de su plataforma de datos abiertos (Ver Catálogo completo), y muestra la posición de dichos bares usando la API de Google Maps.

La aplicación solo está publicada en Google Play

Como lo interesante de esta aplicación era aprender, no solo yo si no todo el mundo que quiera, el código está publicado en github para que lo podais ojear y modificar a vuestro gusto

 

 

 

Notificaciones Push en Android. Parte 3a. Crear un servidor para enviar notificaciones Push con NodeJS

Para poder enviar notificaciones Push necesitamos un servidor, en este tutorial vamos a hacerlo desde NodeJS, pero se podría usar Java, PHP, o cualquier otro lenguaje de servidor. Hemos llamado a esta parte como 3a por si en un futuro hacemos otros tutoriales de como enviar las notificaciones Push usando otro servidor.

Esta parte también ha sido elaborada por Eloy Fernández, basandose en el tutorial en inglés de Holly Schinsky

Para poder seguir este tutorial debemos tener Node.js instalado, cosa que ya deberíamos tener porque es necesario para crear las aplciaciones phonegap

También deberíamos tener instalada la libreía node-gcm y conectada con node.js
Para instalarla haremos:
npm install node-gcm-service

Y para linkar la librería con el servidor
npm link node-gcm

-Ahora para enviar nuestro primer mensaje de notificación crearemos un archivo javascript (donde creamos más oportuno) llamado notify.js (el nombre es arbitrario, pero es un buen nombre). Este archivo contendrá el siguiente código:

var gcm = require('node-gcm');

var sender = new gcm.Sender('XXXXXX');//API key de la parte 1 del tutorial

var registrationIds = [];

//Creamos el mensaje a enviar
var message = new gcm.Message();
message.addData('message',"\u270C Peace, Love \u2764 and PhoneGap \u2706!");
message.addData('title','Push Notification Sample' );
message.addData('msgcnt','3'); // Se muestra en la notificación en la barra de tareas.
message.addData('soundname','beep.wav'); //Sonido en el dispositivo para avisar de la llegada
message.timeToLive = 3000;// Duración en segundos que permanecerá en GCM e intentarlo de nuevo antes de finalizar. Por defecto son 4 semanas (2,419,200 segundos) si no se especifica.

registrationIds.push('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');//Id del dispositivo obtenida en la parte 2 del tutorial

sender.send(message, registrationIds, 4, function (result) {
   console.log(result);
});

gcm.Sender(‘XXXXXXXXX’) es el API Sender Key conseguido en la parte 1 del tutorial
registrationIDs.push(‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’); será el número de registro del dispositivo obtenido en la parte 2 del tutorial.

Para ejecutar el notify.js y así enviar el mensaje push al dispositivo tan solo tenemos que escribir esto por consola (estando en la misma carpeta donde esté creado el notify.js):
node notify.js
Y la notificación debería aparecer en nuestro dispositivo.

El notify.js al final del tutorial debería quedar tal que así

Este es un servidor muy sencillo que solo envía una notificación a nuestro dispositivo, como deberes os dejo que modifiqueis el notify.js para poder mandar las notificaciones a todos los usuarios de vuestra aplicación, cogiendo los ids de todos los dispositivos de vuestra base de datos.

Notificaciones Push en Android. Parte 2. Instalación y uso de Push Plugin en phonegap.

Nota: este tutorial ha sido elaborado en su mayor parte por Eloy Fernández, basandose en el tutorial en inglés de Holly Schinsky

Pre requisitos:

Para poder seguir este tutorial deberemos tener instalado phonegap en una versión 3.X.X, asi como nodeJS, git, ant, el JDK java y el SDK android y sus rutas añadidas al PATH, en caso de duda consultar tutoriales anteriores.
También es importante haber seguido la parte 1 del tutorial en la que obtuvimos el Google Cloud Messaging Project ID

Empezamos:

Paso 1: Crear el proyecto y configurarlo.

-Para la creación básica de un proyecto con phonegap para Android hacemos:

phonegap create PushNotificationSample com.pushapp PushNotificationApp

-Entramos dentro de la nueva carpeta creada

cd PushNotificationSample

-Constrimos el proyecto para Android

phonegap local build android

-Instalamos el PushPlugin desde su localización en el github:

phonegap local plugin add https://github.com/phonegap-build/PushPlugin

Paso 2: Registrar la aplicación con el servicio Google Cloud Messaging.

– Abrimos el archivo de nuestra aplicación www/js/index.js y en la función receivedEvent pegamos las siguientes dos líneas de script:

var pushNotification = window.plugins.pushNotification;
pushNotification.register(app.successHandler, app.errorHandler,{"senderID":"XXXXXXXXXXXX","ecb":"app.onNotificationGCM"});

donde el senderID será el Google Cloud Messaging Project ID que obtuvimos en la parte 1 del tutorial

-El siguiente código hace referencia a las funciones de callback referenciadas en la anterior llamada de registro:
1- Llamada successHandler “todo correcto”:

successHandler: function(result) {
    alert('Todo Correcto! Resultado = '+result)
},

2-Llamada errorHandler de error:

errorHandler:function(error) {
    alert(error);
},

3-Llamada que se producirá cuando el mensaje sea recivido del GCM, pero también al inicio de la aplicación:

onNotificationGCM: function(e) {
    switch( e.event ) {
        case 'registered':
            if ( e.regid.length > 0 ) {
                console.log("Id registro: " + e.regid);
                alert('Id registro:  '+e.regid);
            }
        break;
        case 'message':
            alert('Mensaje:  '+e.message+' Contenido: '+e.msgcnt);
        break;
        case 'error':
            alert('GCM error = '+e.msg);
        break;
        default:
           alert('Ocurrió un evento desconocido de GCM');
        break;
    }
}

Paso 3: Ejecutar la aplicación:

-Tan simple como escribir dentro de la carpeta de la aplicación:

phonegap local run android

-Si todo ha salido bien, en este momento te saldrán dos alertas:

1- Generada por la función succesHandler que dirá que todo está correcto.

2- Generada por onNotificationGCM respecto al case registered con el código de registro del dispositivo (e.regid)
Nos guardamos ese código, pero como copiar a mano todo el texto es imposible lo que podemos hacer es tener abierto el LogCat, bien desde el IDE eclipse, o desde la app “Monitor” que viene con el SDK android
Si usais eclipse y no os sale la pestaña de LogCat, podéis hacerla aparecer en Window->Show View->Other, y buscarla con el filtro, poniendo solamente log será suficiente para encontrarla.

Una vez que haya aparecido la alerta en la aplicación, podéis buscar en el LogCat poniendo en el buscador de mensajes de logs la frase “Id registro:”, la copíáis. Puede ser que no llegue a aparecer la alerta en el dispositivo que muestre este código de registro, aún así, si buscamos en los logs del  LogCat, porque es posible que la encontremos igualmente. Cuando lo tengamos ya podrémos pasar a la parte 3 del tutorial.

Al finalizar el tutorial, nuestro index.js debería quedar tal que asi

 

Notificaciones Push en aplicaciones Android. Parte 1. Registro de la aplicación en Google Cloud Messaging (GCM)

Esta primera parte del tutorial no tiene nada de programación, tan solo vamos a hablar del alta y configuración de la aplicación en el Google Cloud Messaging (GCM)

Este paso es necesario ara poder enviar notificaciones Push a nuestra aplicación, ya sea nativa  android o phonegap.

En este tutorial enseñaremos como conseguir la API key y el identificador de aplicación “Google Cloud Messaging Project ID” que usaremos en los siguientes tutoriales.

Lo primero de todo será acceder a https://console.developers.google.com y allí pulsamos Create Project

createProject

Nos saldrá un popup para rellenar los datos de la aplicación, el nombre y el id, nosotros usaremos los siguientes para el tutorial, vosotros usad vuestro propio nombre e id.

newProject

Al pulsar Create se empezará a crear vuestra aplicación, y después del rato que tarda en crearla os llevará a la pantalla de dicha aplicación. Ahi es muy importante que os apunteis el número que sale en project number, ya que es el “Google Cloud Messaging Project ID” que se usará en la parte 2 del tutorial.

overview

Ahora en el menú izquierdo pulsaid en APIs & auth y os saldrá el listado de todos los servicios que ofrece google. Buscais el Google Cloud Messaging for Android y cambiais el interruptor de Off a On pulsandolo y ya quedará activado el servicio para enviar notificaciones push a la aplicación.

Ya solo queda obtener la API key para que nuestro servidor que crearemos en la parte 3 del tutorial pueda mandar las notificaciones al GCM de google y este a su vez las envíe al teléfono. Para ello en el menú de la izquierda pinchamos en Credentials y allí en Create new Keycredentials

Nos saldrá un popup para elegir que tipo de API Key queremos, es importante elegir la opción Server key, ya que lo que queremos es una Key para que el servidor que creemos en la parte 3 del tutorial pueda comunicarse con el GCM.

serverKey

En la siguiente ventana podemos rellenar con que direcciones IPs queremos que puedan comunicarse con el GCM, de momento no lo rellenamos, simplemente damos a create y ya habríamos terminado, pero sería conveniente en un futuro poner la IP o IPs de servidores que podrían comunicarse, sobre todo por motivos de seguridad, para evitar que cualquiera que consiguiera nuestra API key y nuestro número de proyecto pueda mandar notificaciones push sin nuestro consentimiento. Os pongo capturas de las mias para que veais que formato tienen y os resulte mas fácil identificarlas en las siguientes partes del tutorial, por favor, cread las vuestras propias y no useis las mias.

apikey

Pues ya estaría todo, asi que nos apuntamos nuestra API Key para cuando la necesitemos en la parte 3 del tutorial.

En la siguiente parte tutorial veremos como crear nuestra aplicación phonegap android, instalar el PushPlugin y configurarlo para que nuestra aplicación pueda recibir notificaciones push.

Como usar los anuncios de amazon con phonegap (Android). Parte 2, mostrar los anuncios

Para ver como añadir la librería ver la parte 1 del tutorial

Lo primero de todo es añadir una actividad en el AndroidManifest.xml

<activity android:name="com.amazon.device.ads.AdActivity" android:configChanges="keyboardHidden|orientation|screenSize"/>

Y añadir los permisos necesarios

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

Y posteriormente hacer que nuestra clase implemente AdListener

implements AdListener

Creamos una propiedad para el anuncio de tipo AdLayout

    private AdLayout adView;

Creamos una variable estática para almacenar la key de la aplicación y otra para que nos ayude a identificar los mensajes de login de nuestra aplicación

    private static final String APP_KEY = "appkey"; // Reemplazar con la key de tu aplicación
    private static final String LOG_TAG = "prefijoLog";

Ahora ponemos esté código dentro del método oncreate, después del super.loadUrl, es el código que se encargará de crear y mostrar el anuncio

try {
            AdRegistration.setAppKey(APP_KEY);
        } catch (Exception e) {
            Log.e(LOG_TAG, "Exception thrown: " + e.toString());
            return;
        }
        AdRegistration.enableTesting(true); // Poner a true para pruebas, cambiar a false antes de subir a la app store
        adView = new AdLayout(this);
        adView.setListener(this);
        LinearLayout layout=(LinearLayout)super.root;
        layout.addView(adView);

        AdTargetingOptions opt = new AdTargetingOptions().enableGeoLocation(true);//necesita permiso de GPS
        /** Si no queremos localizar al usuario podemos usar esta funcion
        **  AdTargetingOptions opt = new AdTargetingOptions(); 
        **/
        adView.loadAd(opt);

Y finalmente añadimos los métodos que debe tener nuestra clase por implementar AdListener

   /**
     * Método que se llama al minimizar un anuncio que anteriormente se había expandido
     */
    @Override
    public void onAdCollapsed(AdLayout view) {
        Log.d(LOG_TAG, "Ad collapsed.");
    }

    /**
     * Método que se llama cuando un anuncio falla al cargar. Lo podríamos usar para cargar un anuncio de admob al fallar el de amazon
     */
    @Override
    public void onAdFailedToLoad(AdLayout view, AdError error) {
        Log.w(LOG_TAG, "Ad failed to load. Code: " + error.getCode() + ", Message: " + error.getMessage());
    }

    /**
     * Método que se llama cuando un anuncio se muestra correctamente
     */
    @Override
    public void onAdLoaded(AdLayout view, AdProperties adProperties) {
        Log.d(LOG_TAG, adProperties.getAdType().toString() + " Ad loaded successfully.");
    }

    /**
     * Método que se llama cuando un anuncio se expande
     */
    @Override
    public void onAdExpanded(AdLayout view) {
        Log.d(LOG_TAG, "Ad expanded.");
    }

Cosas que no debemos olvidar:

  1. Añadir la actividad y los permisos al AndroidManifest.xml
  2. Poner nuestra propia key de la aplicación
  3. Quitar la linea de AdRegistration.enableTesting(true); o ponerla a false

Si quereis ver una aplicación con los anuncios en funcionamiento podeis ver mi Othello Classic
De momento mi experiencia no está siendo muy buena, solo estoy teniendo un relleno del 20%, pero es una opción a tener en cuenta frente a admob.