Blog

iOS Push Certificate

Creación de Certificados Push en iOS

Antes de que se pueda generar un Certificado de Notificaciones o Push Certificate.

  • Haber generado un Certificado para nuestra aplicación o App Certificate.
  • Hay dos tipos de certificados Push: el desarrollo (push para dev) y de producción (push para la tienda). Le guía se explicara demodo tal de poder utilizar cualquiera de los dos ambientes.

Vamos a ir a Certificates, Identifiers & Profiles › Identifiers › App IDs en la página de Apple, Developer Center. Acá es donde veremos los distintos IDs de nuestras otras apps, si estamos queriendo agregar notificaciones a una aplicación que ya tenemos creada seleccionaremos ese ID y le haremos click en editar para habilitar las Push Notifications. Caso contrario harecemos click en el ícono de agregar arriba a la derecha y generaremos uno nuevo.

Hacemos click en ‘Create Certificate’, según el certificado que querramos crear en,  Development o Production SSL Certificate.

Seguimos los pasos que nos va indicando la página y nos pedirá que subamos el archivo .certSigningRequest que hemos creado en el primer paso. Luego de esto nos dejará descargar un nuevo certificado de extención .cer.

A continuación, vamos a necesitar para convertir el certificado de un archivo .cer en un archivo .p12 (que es el que usa Ionic Cloud). Para esto usaremos Acceso a Llaveros o Keychain en inglés, también se puede hacer con OpenSSL. Para esto debemos seguir los siguientes pasos sin saltarnos ninguno, caso contrario no funcionará.

  1. Arrastrar el archivo .cer en Acceso a Llaveros.
  2. Hacer clic derecho en el certificado que importamos y luego click en Exportar.
  3. Seleccione Intercambio de Información Personal (p.12) para el formato del archivo.
  4. Guardar el certificado, con una contraseña segura, guardarla para no olvidarla, dado que la vamos a necesitar luego.
No comments
Gabriel FiocchiiOS Push Certificate
read more

Status Bar Material Design en Cordova / Phonegap

Status bar Material Design

Más de una vez hemos visto como juegan las distintas aplicaciones con el Status Bar cambiando ese negro aburrido que tanto desentona en la mayoría de nuestras aplicaciones y que muchos desarrolladores optan por ocultarla en sus proyectos.

Desde la salida de Android L, Google ha añadido muchas de características nuevas en su interfaz de Android estableciendo una Guía de Diseño para emplear en estos dispositivos, una de ellas ha sido la posibilidad de cambiar el color de la barra de estado, o como se dice en el mundo de las aplicaciones, StatusBar.

Este tutorial nos va a servir para implementar una función que podamos reutilizar a lo largo de nuestro código, y sin importar el color que tengamos establecido en una sección vamos a poder simular este efecto sin tener que buscar el código exacto a mano.

Instalación

Es necesario contar en nuestro proyecto con el plugin de la barra de estado (cordova status bar), para poder cambiar el color de esta cuando deseemos.

$ cordova plugin add cordova-plugin-statusbar
 Lo que vamos a hacer ahora en nuestró código JavaScript es llamar a la función materialStatusBar(color, percent), en la cual a color vamos a pasarle cualquier color en hexadecimal y a percent el porcentaje en el que queremos modificar el color, el valor de 0% a 100% y puede ser positivo (aclara – 0 a 100%) o negativo (oscurece – 0 a -100%). 
function materialStatusBar(color, percent) {
 var R, G, B, RR, GG, BB;
 R = parseInt(color.substring(1, 3), 16);
 G = parseInt(color.substring(3, 5), 16);
 B = parseInt(color.substring(5, 7), 16);

 R = parseInt(R * (100 + percent) / 100);
 G = parseInt(G * (100 + percent) / 100);
 B = parseInt(B * (100 + percent) / 100);

 R = (R < 255) ? R : 255;
 G = (G < 255) ? G : 255;
 B = (B < 255) ? B : 255;

 RR = ((R.toString(16).length == 1) ? "0" + R.toString(16) : R.toString(16));
 GG = ((G.toString(16).length == 1) ? "0" + G.toString(16) : G.toString(16));
 BB = ((B.toString(16).length == 1) ? "0" + B.toString(16) : B.toString(16));

 if (window.StatusBar) {
   StatusBar.backgroundColorByHexString("#" + RR + GG + BB);
 }
}
No comments
Gabriel FiocchiStatus Bar Material Design en Cordova / Phonegap
read more

Android Firebase Project & Api Key

Creación de Proyecto en Firebase

Se requiere una clave de API de Google Firebase para el envío de notificaciones push a dispositivos Android.

  • Crear un nuevo proyecto en la consola de Firebase.
  • Se nos redireccionará a la página del proyecto, en la cual en la parte superior izquierda, junto al nombre escogido con anterioridad hay un ícono con forma de tuerca, clickeamos aquí y luego en configuración del proyecto.
  • Seleccionamos la pestaña Mensajería en la Nube, de aquí obtendremos:
    • Clave del Servidor (equivalente GCM API key).
    • ID del remitente (equivalente a SENDER_ID).
  • En el Dashbord de Ionic Cloud Accedemos a Ajustes (Settings) > Credenciales (Certificates).
  • Agregamos un Nuevo Perfil de Seguridad (New Security Profile), en caso de tener uno creado anteriormente, editaremos las credenciales de Android.
  • Ingrese su Clave del Servidor de Firebase.
2 comments
Gabriel FiocchiAndroid Firebase Project & Api Key
read more

Ionic Cloud

Introducción

La gente de Ionic se encuentra desde hace tiempo trabajando duro para brindarnos siempre buenas alternativas a la hora de desarrollar aplicaciones híbridas con un ecosistema de posiblidades asombrosas, las cuales podríamos aprovechar para desarrollar apps muy similares a las nativas.

Hace un tiempo que vengo experimentando y fastidiandome con el tema de las notificaciones push, siendo hoy en día una característica muy demandada en el mercado, luego de probar varios servicios decidí intentar implementar Ionic Push para mis apps, que justamente están hechas con Ionic.

Me ha tomado un tiempo y dolor de cabeza lograr hacerlo andar, si bien Ionic se caracteriza por tener una buena documentación hemos recibido actualizaciones de ambos lados tanto Ionic como las plataformas de mensajería push de Apple y Google, y esta documentación no está del todo actualizada y ni hablar del idioma.

Pre-Requisitos

En la guía utilizaremos un proyecto nuevo de las plantillas de Ionic pero tranquilamente podrán adaptar las instrucciones a un proyecto ya existente, recuerden siempre hacer una actualización de Ionic.

ionic start devIonicPush blank
$ cd devIonicPush

Instalación Ionic Cloud

Ionic Cloud nos permite interactuar nuestra aplicación con los servicios que nos proveen, en este caso utilizaremos el de Push.

$ npm install @ionic/cloud --save

Una vez instalado, tenemos que copiar el archivo de JavaScript ionic.cloud.min.js en el directorio www/lib de la aplicación:

cp node_modules/@ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib

 

A continuación, tenemos que incluirlo en el index.html de su proyecto después del archivo ionic.bundle.js, por ejemplo:

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>

Promises

Promise no tiene soporte universalmente, lo podemos usar en iOS Safari y Android 4.4.4+ (caniuse.com). Si necesitamos brindar soporte a dispositivos que no ofrecen Promise de forma nativa, tenemos alternativas como bluebird que puede ser instalado e incluirlo antes de Ionic.

npm install bluebird --save
$ cp node_modules/bluebird/js/browser/bluebird.min.js www/lib

Así quedaría el código en nuestro index.html:

<script src="lib/bluebird.min.js"></script>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>

Instalación

App ID

Antes de poder configurar los servicios Ionic Cloud, necesitaremos tener un ID de aplicación. En el directorio del proyecto, ejecutaremos:

$ ionic io init

 

Esto creará automáticamente una aplicación en el Panel de Control, y establecerá el ID de la aplicación generado en el archivo de ionic.config.json.

Si ya has creado una aplicación en el Panel de Control y desea sincronizar un proyecto local, pondremos el ID de aplicación en el archivo ionic.config.json.

{
  "name": "NOMBRE_APP",
  "app_id": "APP_ID"
}

Configuración

Para proporcionar su configuración, inyectaremos una dependencia angular. En el archivo www/js/app.js:

  • Añadir el módulo ionic.cloud al resto de las dependencias.
  • Inyectar $ionicCloudProvider en el .config de angular y acá haremos la configuración de Ionic Cloud. Reemplazar APP_ID con el ID de la aplicación, que se puede encontrar en el archivo de ionic.config.json.
angular.module('starter', ['ionic', 'ionic.cloud', 'starter.controllers'])
.config(function($ionicCloudProvider) {
  $ionicCloudProvider.init({
    "core": {
      "app_id": "APP_ID"
    }
  });
})

.run(function($ionicPlatform) {
  ...
})
No comments
Gabriel FiocchiIonic Cloud
read more

Guía completa para implementar Ionic Push en nuestras Apps

Introducción

La gente de Ionic se encuentra desde hace tiempo trabajando duro para brindarnos siempre buenas alternativas a la hora de desarrollar aplicaciones híbridas con un ecosistema de posiblidades asombrosas, las cuales podríamos aprovechar para desarrollar apps muy similares a las nativas.

Hace un tiempo que vengo experimentando y fastidiandome con el tema de las notificaciones push, siendo hoy en día una característica muy demandada en el mercado, luego de probar varios servicios decidí intentar implementar Ionic Push para mis apps, que justamente están hechas con Ionic.

Me ha tomado un tiempo y dolor de cabeza lograr hacerlo andar, si bien Ionic se caracteriza por tener una buena documentación hemos recibido actualizaciones de ambos lados tanto Ionic como las plataformas de mensajería push de Apple y Google, y esta documentación no está del todo actualizada y ni hablar del idioma.

Requisitos previos

  • Ionic Cloud instalado y configurado.
  • Un dispositivo físico Android o iOS, hay que tener en cuenta que no funcionan las notificaciones push en simuladores.
  • Un Perfil de Seguridad (como lo llama Ionic) con sus respectivas credenciales, aquí esta la diferencia con la documentación de Ionic Push y que tantos dolores de cabeza nos puede producir con el tedioso error GCM_INVALID_AUTH (Google ha dejado de utilizar GCM  para migrar a Firebase). Necesitaremos el ID del remitente y un API Key de Firebase, mientras que para Apple necesitamos un Certificado Push.

Instalación

Plugin de Push

Utilizaremos el plugin Push de Phonegap para recibir notificaciones push nativas en dispositivos iOS y Android. Al instalar el plugin, es necesario suministrar una variable ID del remitente (SENDER_ID), que es el equivalente a número de proyecto GCM en la documentación de Ionic Cloud.

$ cordova plugin add phonegap-plugin-push --variable SENDER_ID=12341234 --save

Configuración de Ionic Cloud

También es necesario que agregemos el ID del Remitente que obtuvimos en la creación del proyecto en Firebase. Además, podemos agregar configuraciones que tiene el plugin de push de Phonegap.

.config(function($ionicCloudProvider) {
  $ionicCloudProvider.init({
    "core": {
      "app_id": "APP_ID"
    },
    "push": {
      "sender_id": "SENDER_ID",
      "pluginConfig": {
        "ios": {
          "badge": true,
          "sound": true
        },
        "android": {
          "iconColor": "#343434"
        }
      }
    }
  });
})

Implementación Ionic Push

Especificamos ionic.cloud como una dependencia para su módulo. Esto nos dará acceso a $ionicPush.

angular.module('myapp.controllers', ['ionic.cloud'])

.controller('MyCtrl', function($scope, $ionicPush) {
  ...
})

Manipulación del Token del dispositivo

Antes de que un dispositivo pueda recibir notificaciones push nativas, debe estar registrado en Ionic Cloud. Desde Ionic se recomienda llamar a la función de register() cada vez que se abre la aplicación para que el dispositivo siempre se encuentre registrado y listo para recibir las notificaciones, recordemos que esta acción tiene que ejecutarse una vez que el dispositivo está listo.

$ionicPlatform.ready(function() {
  $ionicPush.register().then(function(t) {
    return $ionicPush.saveToken(t);
  }).then(function(t) {
    console.log('Token saved:', t.token);
  });
});

Almacenamos el token dispositivo generado con el usuario actual. Si usted no quiere que ellos se asocien, se puede pasar la opción ignorar usuario ignore_user. Se pueden ver los documentos de la API saveToken() para obtener más información.

Sería una buena idea almacenar de manera local una variable en la cual el usuario pueda configurar si desea recibir notificaciones. Se puede anular el registro de un dispositivo llamando a la función el unregister().

Manipulación de Notificaciones

Para manejar las notificaciones push en la aplicación, es necesario escuchar al evento cloud:push:notification usando el método $on de AngularJS.

$scope.$on('cloud:push:notification', function(event, data) {
  var msg = data.message;
  alert(msg.title + ': ' + msg.text);
});

Enviar Notificaciones Puh

Se pueden crear notificaciones desde el Panel de Control de la App, dirigiéndose a Push > Nueva notificación (New Notificación).

También podemos utilizar los endpoints de la API de Ionic Cloud para crear notificaciones push.

No comments
Gabriel FiocchiGuía completa para implementar Ionic Push en nuestras Apps
read more