Contenido


Envíe una notificación Push desde una aplicación móvil en 5 minutos o menos

Comments

Es posible que ya conozca algunos de los beneficios de IBM Cloud™, la plataforma abierta de IBM para desarrollar y desplegar aplicaciones móviles y web. Los diversos servicios previamente integrados en IBM Cloud facilitan la construcción y las mejoras de las aplicaciones. En este artículo, analizaremos los pasos sobre cómo usar las API de JavaScript para enviar una notificación Push desde su aplicación móvil.

Este artículo utiliza el proyecto de aplicación móvil híbrida Apache Cordova de origen abierto. Apache Cordova permite a los desarrolladores de aplicaciones móviles acceder a las funciones de dispositivos nativos a través de JavaScript. Las aplicaciones de Cordova se escriben utilizando tecnologías web estándares, como HTML, CSS y JavaScript.

Como desarrollador de aplicaciones móviles, deseo poner en marcha las funciones nativas tradicionales como las notificaciones Push lo antes posible. Con tecnologías abiertas como Apache Cordova y Cloud Foundry como parte de IBM Cloud, hallé el modo.

Qué necesitará para su aplicación

Creación de un proyecto Apache Cordova

Si ya tiene un proyecto móvil híbrido existente, como un proyectoIBM Worklight® , omita esta sección.

  1. Si aún no lo ha hecho, descargue el módulo empaquetado del nodo para Apache Cordova y configure el entorno para Apache Cordova.
  2. Una vez instalado Cordova, abra unindicador de comando.
  3. Cree un nuevo proyecto en el directorio de trabajo actual ejecutando el siguiente comando:
    cordova create bluemixpush com.example.bluemixpush IBM CloudPush
  4. Cambie al nuevo directorio del proyecto ejecutando el siguiente comando:
     cd bluemixpush
  5. Añada las plataformas sobre las que desea realizar las pruebas, ejecutando el siguiente comando:
     ex. cordova platform add android

Nota: Si esta es la primera vez que desarrolla un proyecto de Cordova para una plataforma específica, debe seguir algunos pasos adicionales para configurar el entorno de desarrollo de la plataforma.

Por ejemplo, para configurar unentorno Android , siga los siguientes pasos:

  1. Instale el SDK de Android.
  2. Añada la ubicación de las herramientas de Android y las herramientas de la plataforma en la variable de entorno RUTA .
  3. Descargue ANT y añádalo a la variable de entorno RUTA .
  4. Asegúrese de que la ruta Java™ está establecida en la variable de entorno RUTA . Nota: Asegúrese de que es un JDK completo, no solo un JRE.
  5. De manera opcional, descargue e instale Eclipse con ADT para ejecutar el emulador y depurar la aplicación con las capacidades de Eclipse LogCat.

Instale el paquete ibmbluemix npm

El servicio Push que se utiliza en este artículo, junto con los diferentes servicios en nube móviles proporcionados como parte de IBM Cloud, se encuentra disponible como módulo empaquetado del nodo. Instale el paquete ibmbluemix para inicializar el servicio Push con la aplicación móvil de IBM Cloud.

  1. En una línea de comandos, cambie al directorio www del proyecto móvil híbrido.
  2. Como se estableció en la documentación npm para el módulo ibmbluemix, para instalar una aplicación web o híbrida, use el gestor de paquetes Bower ejecutando el siguiente comando:
     bower install https://hub.jazz.net/git/bluemixmobilesdk/ibmbluemix-javascript/.git

Instale el paquete ibmpush npm

Instale el servicio Push de IBM desde npm:

  1. En una línea de comandos, cambie al directorio www del proyecto móvil híbrido.
  2. Como se estableció en la documentación npm del módulo ibmpush, para instalar una aplicación web o híbrida, use el gestor de paquetes Bower ejecutando este comando:
     bower install https://hub.jazz.net/git/bluemixmobilesdk/ibmpush-javascript/.git

La instalación correcta del paquete IBM Cloud ibmpush da como resultado la siguiente respuesta.

Image shows successful response for installation of IBM Cloud ibmpush package
Image shows successful response for installation of IBM Cloud ibmpush package

Configuración de IBM Cloud

Ahora que la aplicación híbrida está lista y cuenta con su propio servicio Push instalado desde npm, debe configurar IBM Cloud para usar el servicio:

  1. Inicie sesión en IBM Cloud.
  2. En el panel de instrumentos de Aplicaciones, haga clic en CREAR UNA APLICACIÓN.Screenshot shows Create Application highlighted
  3. En la página nueva, seleccione Mobile Cloud debajo de Texto estándar.Boilerplate application
    Boilerplate application
  4. Complete la información y el nombre como se muestra aquí: Create an application details
    Create an application details
  5. Haga clic en CREAR.
  6. Se lo redirigirá al panel de instrumentos, donde ahora podrá ver la aplicación. El indicador de estado verde de la nueva aplicación móvil en ejecución en IBM Cloud indica que la aplicación se trasladó al proceso de transferencia y se inició. Screenshot shows dashboard now showing your app and that it started
  7. Haga clic en la aplicación. Se lo redirigirá a la página de Aplicaciones, donde puede ver el ID y el secreto de la aplicación, y determinar qué servicios están vinculados a la aplicación. El ID de la aplicación, tal como se ve en la siguiente figura, se debe conectar a los servicios de IBM Cloud. Anote el ID. Screenshot shows your app's ID shown on the Applications page
    Screenshot shows your app's ID shown on the Applications page

Familiarícese con el servicio Push

En la página de información de aplicaciones móviles de IBM Cloud de su nueva aplicación móvil, debajo de Servicios, vea el servicio Push vinculado a la aplicación.

Screenshot shows the Services section and the Push service bound to the application
Screenshot shows the Services section and the Push service bound to the application

Haga clic en el servicio Push.

Esta sección de Servicios es el panel de instrumentos para todos los temas relacionados con Push para la aplicación IBM Cloud. Incluso puede usar esta pantalla para enviar una notificación de prueba a los dispositivos registrados.

Integre Push de IBM Cloud a la aplicación móvil

Ahora que ha creado una aplicación IBM Cloud y ha guardado el ID de la aplicación, vuelva al modo de desarrollo. Añada las API de IBM Cloud Push JavaScript a la aplicación móvil híbrida para insertar mensajes:

  1. Abra la aplicación híbrida dentro de su IDE favorito.
  2. Apunte el navegador hacia la página index.html (o página HTML principal) dentro del directorio www.
  3. Incluya la siguiente etiqueta de script para comenzar a usar el componente npm de Push instalado anteriormente.
     <script src="bower_components/ibmpush/js/IBMPush.min.js"></script>
  4. Incluya el archivo JavaScript para inicializar IBM Mobile Backend como servicio (ibmbluemix).
     <script src="bower_components/ibmbluemix/js/IBMBluemix.min.js"></script>
  5. Inicialice el SDK IBMBluemix.
     var values = { applicationId: "____bluemix_appid_________", applicationRoute: "____bluemix_approute_________", applicationSecret: "____bluemix_appsecret_________", }; IBMBluemix.initialize(values);
  6. Antes de llamar a cualquier comando de Push, inicialice el servicio incluyendo el siguiente JavaScript en la aplicación.
     var push = IBMPush.initializeService();
  7. Envíe un mensaje de prueba desde dentro de la aplicación invocando el siguiente JavaScript:
     // Push Notification content var message = { alert : "Hello Bluemix World", url : "https://www.bluemix.net" } // Send the notification push.sendBroadcastNotification(message).then(function(response) { alert("Push sent!" + JSON.stringify(response)); },function(err) { console.log(err); alert('error sending push message: ' + JSON.stringify(err)); });

Para obtener ejemplos de Push más complicados con las API de IBM Push JavaScript, consulte la sección de API de JavaScript de la Guía del desarrollador de SDK de IBM Mobile Cloud Services.

Pruebe la aplicación

Ahora está listo para probar la aplicación. Si está utilizando una aplicación Apache Cordova pura, utilice la línea de comandos. Por ejemplo, yo estoy probando una aplicación Android y utilizando Eclipse para supervisar la salida del registro con LogCat.

  1. Ejecute la aplicación, por ejemplo:
     cordova emulate android
  2. Es posible que vea el mensaje de error de credenciales GCM & APNS que aparece a continuación. Screenshot shows an example of the GCM & APNS credentials error message
    Screenshot shows an example of the GCM & APNS credentials error message

    Tal como lo indica el error, faltan las credenciales GCM & APNS de la aplicación móvil de IBM Cloud. No se ingresó la credencial Google Cloud Messaging o Apple Push Notification Service (o ambas) para la aplicación de IBM Cloud. Si recibe este error, consulte Ingresar credenciales de notificación de Push en IBM Cloud. Si no ve este error, siga con el siguiente paso.
  3. Una vez resueltos los errores, verá un mensaje de éxito de Push en la consola LogCat. Screen shot shows a success message example
    Screen shot shows a success message example

    Si cuenta con dispositivos registrados con el servicio de Push, verá el mensaje insertado en esos dispositivos. Para ver la lista de dispositivos registrados, vaya a la consola IBM Cloud de la aplicación, haga clic en el servicio de Push, y cambie a la etiqueta Registraciones .

Si los dispositivos están registrados, se muestran en una tabla.

Con el SDK de JavaScript para las API de Push de IBM Cloud Mobile Backend como Servicio, no es posible registrar dispositivos para recibir mensajes de Push; debe usar el SDK de Android y de IBM Cloud nativo de iOS.

Para registrar un dispositivo con Push para ver las notificaciones, consulte "Extender una aplicación Android con el servicio de nube de Push", que incluye un ejemplo de código completo que se puede descargar e instalar en el dispositivo para probar la capacidad de recibir mensajes de Push.

Ingrese credenciales para notificaciones de Push en IBM Cloud

Si un mensaje de error indica que faltan credenciales de GCM & APNS, siga estos pasos para corregir el problema:

  1. Regrese al panel de instrumentos de IBM Cloud de la página de aplicaciones móviles.
  2. Seleccione el servicio de Push para abrir el panel de instrumentos de Push.
  3. Haga clic en la etiqueta Configuración . Si no se ingresan credenciales, no verá ninguna credencial de Push. Screenshot shows the configuration tab page for your applicatin showing no configurations entered
    Screenshot shows the configuration tab page for your applicatin showing no configurations entered
  4. Haga clic en Editar en el servicio de Push que desea habilitar.
  5. Si tiene las credenciales, ingréselas en los campos adecuados y guárdelas. Si no tiene credenciales y no está seguro de cómo obtenerlas, haga clic en el ícono de información junto al campo, tal como se muestra. Screenshot shows the info icon that can provide help for entering credentials
    Screenshot shows the info icon that can provide help for entering credentials

    El recuadro de diálogo de información incluye un enlace sobre cómo registrarse para obtener las credenciales de Push.

    Nota: puede ingresar dos conjuntos diferentes de credenciales: una para el Recinto de seguridad y otra para la Producción. Es fácil conmutar el modo de servicio entre el Reciento de seguridad y la Producción cuando está listo para cambiar.

  6. Una vez guardadas las credenciales, está listo para volver a probar la aplicación móvil siguiendo los pasos anteriores.

Conclusión

Ahora puede añadir las capacidades de Push de IBM Cloud a una aplicación móvil híbrida existente o nueva utilizando el módulo npm ibmpush y las API de JavaScript disponibles.


Recursos para Descargar


Tema relacionado


Comentarios

Inicie Sesión o Regístrese para agregar comentarios.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Cloud computing
ArticleID=1013761
ArticleTitle=Envíe una notificación Push desde una aplicación móvil en 5 minutos o menos
publish-date=02272018