Push Notification en Android e iOS (Parte 2 Programación Appcelerator)

Bien, ya que tenemos toda la parte de la configuracíon del ACS (Appcelerator Cloud Services) procederemos a crear un app donde podamos recibir Push Notifications.

Empezaremos creando un nuevo Mobile App Proyect. Importante: No olviden activar  CLOUD

Ahora abrimos el tiapp.xml, y en la sección de modulos debemos de tener ti.cloud y ti.couldpush, si no los tenemos los agregamos.

Ahora en la parte inferior a un lado de Overview damos clic en tiapp.xml y editaremos el codigo manualmente. Agregaremos las siguientes tres lineas arriba del los tags <id>....</id>:

    <property name="acs-push-type-development" type="string">gcm</property>
    <property name="acs-push-type-production" type="string">gcm</property>
    <property name="acs-push-type" type="string">gcm</property>

Con esto tenemos configurado para que funcione el GCM que sirve para que trabajen los Push Notification con android.

Ahora bien procedemos a escribir el siguiente código, yo he hecho un solo codigo para que funcione en Android e iOS a la vez, practicamente solo cambia la función Ti.Platform.osname que separo mediante un if  para identificar el Sistema Operativo.

El codigo es el siguiente:


//Variable que guarda el tipo de Sistema Operativo
var osname = Ti.Platform.osname;



 
//Inicializamos el Cloud
var Cloud = require('ti.cloud');
Cloud.debug = true; 



//Esta variable contendra el Token
var deviceToken;


//Si el Sistema Operativo es android, iniciamos el cloudpush
if(osname == 'android'){
   var CloudPush = require('ti.cloudpush');
   CloudPush.debug = true;
   CloudPush.enabled = true;
   CloudPush.showTrayNotificationsWhenFocused = true;
   CloudPush.focusAppOnPush = false;
}

//Ventana de INICIO
var win = Titanium.UI.createWindow({
   title:'TestPush App',
   backgroundColor:'#fff'
});
win.open();

//Con esta función inicializamos el APP
setTimeout(buildUI,500);

function buildUI(){

   //Boton de resitro local push
   var register_local_push = Ti.UI.createButton({
     width:200,
     top:'10%',
     title:"GET TOKEN & REGISTER LOCAL PUSH"
   });
   win.add(register_local_push);

   //Acción del Boton local push
   register_local_push.addEventListener('click',getDeviceToken);

   //Boton registro
   var register_user_btn = Ti.UI.createButton({
     width:200,
     top:'25%',
     title:"REGISTER USER"
   });
   win.add(register_user_btn);

   //Acción del Boton registro
   register_user_btn.addEventListener('click',registerUser);

   //Boton login
   var login_btn = Ti.UI.createButton({
     width:200,
     top:'40%',
     title:"LOGIN"
   });
   win.add(login_btn);

   //Acción del Boton login
   login_btn.addEventListener('click',login);

   //Boton server push
   var register_server_push_btn = Ti.UI.createButton({
     width:200,
     top:'55%',
     title:"REGISTER SERVER PUSH"
   });
   win.add(register_server_push_btn);

   //Acción del Boton server push
     register_server_push_btn.addEventListener('click',subscribeToServerPush);
   }

   //REGISTRAR USUARIO EN CLOUD
   function registerUser(){
     Ti.API.info("REGISTER");
     Cloud.Users.create({
       username: "prueba",
       password: "1234",
       password_confirmation: "1234",
       first_name: "Kike",
       last_name: "Kenobi"
     }, function (e) {
         if (e.success) {
           //Usuario creado correctamente       
           alert("Usuario creado correctamente");
         } else {
           //oops, algo salio mal
           alert("El usuario no se creo, hubo un error: "+e);
         }
      });
   }

  //Logue de Usuario en CLOUD  function login(){
    Cloud.Users.login({
      login: 'prueba',
      password: '1234'
    }, function (e) {
        if (e.success) {
          var user = e.users[0];
          alert('Success:\\n' +
          'id: ' + user.id + '\\n' +
          'first name: ' + user.first_name + '\\n' +
          'last name: ' + user.last_name);
        } else {
          alert('Error: ' +((e.error && e.message) || JSON.stringify(e)));
        }
     });  }  //Registro Local al Push Notification  function getDeviceToken(){

  //El registro funciona diferente para android que para iOS aquí elegimos que función
    if(osname == 'android'){

      CloudPush.retrieveDeviceToken({
        success: function deviceTokenSuccess(e) {     
         alert('Device Token: ' + e.deviceToken);
         deviceToken = e.deviceToken;        },
        error: function deviceTokenError(e) {
          alert('Hubo error al registrar: ' + e.error);
        }
      });

    } else {

      Titanium.Network.registerForPushNotifications({
        types: [
          Titanium.Network.NOTIFICATION_TYPE_BADGE,
          Titanium.Network.NOTIFICATION_TYPE_ALERT,
          Titanium.Network.NOTIFICATION_TYPE_SOUND
        ],
        success:function(e){
          deviceToken = e.deviceToken;
          Ti.App.Properties.setString("device_token",deviceToken);
          alert("Token recibido "+deviceToken);
        },
        error:function(e){
          alert("Error durante el registro: "+e.error);
        }
      });
    }
  }  //Registro Push Notification Server  function subscribeToServerPush(){
    //Validamos el tipo de dispositivo a registrar esto es muy importante porque cin esto checa el tipo de token
    var typeDevice = (osname == 'android')?'android':'ios';
    Cloud.PushNotifications.subscribe({
      channel: 'friend_request', //Es un valor que podemos cambiar al que queramos, sirve para clasificar.
      type: typeDevice,
      device_token: deviceToken
    }, function (e) {
      if (e.success) {
        alert('Correcto '+((e.error && e.message) || JSON.stringify(e)));
      } else {
        alert('Error: ' + ((e.error && e.message) || JSON.stringify(e)));
      }
    });  }


NOTA: No es necesario tener crear una cuenta de usuario si el app solo recibira notificaciones, se usa para poder interactuar entre dispositivos, yo lo anexo ya que más adelante usare unos ejemplos con usuarios a partir de Push Notifications desde un Servidor. (Observación de Eagle)

Todos los valores subrayados en amarillo pueden ser cambiados, esta es la pantalla de como se debe ver el app una vez compilada y corriendo. (Para iOS no se puede hacer pruebas desde el simulador, se necesita un dispositivo).

 

El proceso para registrar el APP a el uso de Push Notification es:

1. Obtener Token (Obtiene el token del dispositivo)
2. Registramos el Usuario (Se registrara un nuevo usuario en el ACS).
3. Hacemos login una vez que el usuario haya sido creado.
4. Y finalmente registramos el Usuario al Push Notification. (Necesita haberte creado el usuario con anterioridad si no simplemente no se podra registrar).

Una vez que hayamos registrado a Push Notification, vamos a el ACS en la sección de Push Notifications vere un nuevo dispositivo registrado para recibir Notificaciones.

Desde esta misma pantalla podemos enviar las notificaciobes y opciones dependiendo el dispositivo.

Esto es todo, espero les haya sido de mucha utilidad tambien tengo un script para mandar los Push Notifications desde la consola, es muy util si quieres trabajar desde un servidor, se los puedo pasar si es que me lo piden. Además estoy trabajando en la retroalimentación del app a traves de los Push, espero pronto subir esta parte.

Saludos.