Advertisement
  1. Code
  2. Ionic

Introducción a los servicios iónicos: Push

by
Read Time:14 minsLanguages:

Spanish (Español) translation by Charles (you can also view the original English article)

En este tutorial, aprenderás sobre Ionic Push, un servicio de Ionic que facilita el envío de notificaciones push a tus usuarios.

Ionic Push te permite enviar notificaciones push a los usuarios de tu aplicación. Estos se pueden activar siempre que elija. Por ejemplo, cuando es el cumpleaños del usuario, podría enviarle automáticamente una notificación de inserción para saludarlos.

Cómo funciona

Ionic Push sirve como intermediario entre el dispositivo del usuario y firebase cloud messaging. El primer paso es que la aplicación envíe su token de dispositivo al servidor de Ionic Push. Este token de dispositivo sirve como un identificador que hace referencia a ese dispositivo específico. Una vez que el servidor tiene ese token, ahora puede hacer una solicitud al servidor de Firebase Cloud Messaging para enviar una notificación de inserción al dispositivo. En cada dispositivo Android, se está ejecutando un servicio de Google Play, denominado servicio de mensajería en la nube de Google. Esto permite que el dispositivo reciba notificaciones push de la plataforma Firebase Cloud Messaging.

Este es un gráfico que muestra el flujo de notificaciones de inserción:

Push notification flowPush notification flowPush notification flow

Lo que vas a construir

Vas a crear una aplicación simple que puede recibir notificaciones push a través de Ionic Push. También utilizará el servicio Ionic Auth para iniciar sesión de los usuarios. Esto nos permite probar notificaciones push dirigidas que enviarán las notificaciones solo a usuarios específicos. La aplicación tendrá dos páginas: la página de inicio de sesión y la página de usuario. Los usuarios solo deben poder recibir notificaciones cuando hayan iniciado sesión.

Para que te hagas una idea de cómo se verían las notificaciones, aquí hay una captura de pantalla de la notificación que se recibe mientras la aplicación está abierta actualmente:

in-app notificationin-app notificationin-app notification

Por otro lado, este es el aspecto de una notificación cuando se cierra la aplicación:

closed-app notificationclosed-app notificationclosed-app notification

Configuración de notificaciones push para Android

En esta sección, configuraremos los servicios en la nube Firebase e Ionic para permitir notificaciones push. Las notificaciones push en Android son manejadas principalmente por el servicio de mensajería firebase cloud. Ionic Push es solo una capa en la parte superior de este servicio que facilita el trabajo con notificaciones push en aplicaciones Ionic.

Crear una aplicación Firebase

El primer paso es crear un nuevo proyecto de Firebase. Puede hacerlo yendo a la consola de Firebase y haciendo clic en el botón Agregar proyecto. Verá el siguiente formulario:

Create Firebase ProjectCreate Firebase ProjectCreate Firebase Project

Escriba el nombre del proyecto y haga clic en el botón Crear proyecto.

Una vez creado el proyecto, se le redirigirá al panel del proyecto. Desde allí, haga clic en el icono de engranaje justo al lado de la pestaña Descripción general y seleccione Configuración del proyecto.

En la página de configuración, haga clic en la pestaña Mensajería en la nube. Allí encontrará la clave del servidor y el ID del remitente. Tome nota de estos, ya que los necesitará más adelante.

Cloud messaging settingsCloud messaging settingsCloud messaging settings

Crear una aplicación Ionic

A continuación, debe crear una aplicación Ionic en el sitio web de Ionic. Esto le permite trabajar con el servicio Ionic Push y otros servicios Ionic también. Si aún no tienes una cuenta de Ionic, puedes crear una registrándose. Una vez que hayas creado una cuenta, se te redirigirá al panel donde podrás crear una nueva aplicación.

Create Ionic AppCreate Ionic AppCreate Ionic App

Crear un perfil de seguridad

Una vez creada la aplicación, vaya a Configuración > Certificados y haga clic en el botón Nuevo perfil de seguridad. Escriba un nombre descriptivo para el Nombre del perfil y establezca el Tipo en Desarrollo por ahora:

Create new security profileCreate new security profileCreate new security profile

Perfiles de seguridad sirve como una forma de almacenar de forma segura las credenciales de Firebase Cloud Messaging que obtuvo anteriormente. Una vez creado, se mostrará en una tabla. Haga clic en el botón Editar junto al perfil de seguridad recién creado. A continuación, haga clic en la pestaña Android. Pegue el valor de la clave del servidor que obtuvo anteriormente de la consola de Firebase en el campo Clave del servidor FCM. Finalmente, haga clic en Guardar para guardar los cambios.

Add Firebase Cloud Messaging credentialsAdd Firebase Cloud Messaging credentialsAdd Firebase Cloud Messaging credentials

Arranque de una nueva aplicación Ionic

Cree un nuevo proyecto Ionic 2 usando la plantilla en blanco:

Una vez creado el proyecto, instale el plugin phonegap-plugin-push. Proporcione el ID de remitente que obtuvo de la consola de Firebase anteriormente:

A continuación, debe instalar el complemento Ionic Cloud. Esto hace que sea fácil trabajar con los servicios de Ionic dentro de la aplicación:

Por último, debe actualizar los archivos de configuración de Ionic para que Ionic sepa que este proyecto específico debe asignarse a la aplicación Ionic que creó anteriormente. Puede hacerlo copiando el ID de la aplicación en la página de panel de la aplicación Ionic. Puede encontrar el IDENTIFICADOR de la aplicación justo debajo del nombre de la aplicación. Una vez que lo haya copiado, abra los archivos .io-config.json e ionic.config.json y pegue el valor de la app_id.

Creación de la aplicación

Ahora está listo para compilar la aplicación. Lo primero que debe hacer es activar el servidor de desarrollo Ionic para que pueda ver inmediatamente los cambios a medida que desarrolla la aplicación:

Una vez realizado el proceso de compilación, acceda a la URL de desarrollo en su navegador.

Agregar la aplicación Ionic y la configuración de inserción

Abra el archivo src/app/app.module.ts y agregue la configuración de la aplicación (núcleo) y las notificaciones de inserción (inserción). El app_id es el identificador de la aplicación Ionic que creó anteriormente. El sender_id es el ID de remitente que obtuvo anteriormente de la consola de Firebase. En el objeto pluginConfig, puede establecer opcionalmente la configuración de notificaciones de inserción. A continuación, solo configuramos la configuración de sonido y vibración en true para indicarle al hardware que puede reproducir sonidos de notificación de inserción o vibrar si el dispositivo está en modo silencioso. Si desea saber más sobre qué opciones de configuración están disponibles, consulte los documentos en las opciones de notificación de inserción para Android.

A continuación, deje que Ionic sepa que desea usar cloudSettings:

página principal

La página de inicio predeterminada en la plantilla en blanco servirá como la página de inicio de sesión. Abra el archivo pages/home/home.html y agregue lo siguiente:

Para mantener las cosas simples, solo tenemos un botón de inicio de sesión en lugar de un formulario de inicio de sesión completo. Esto significa que las credenciales que vamos a usar para iniciar sesión están incrustadas en el propio código.

A continuación, abra el archivo src/pages/home/home.ts y agregue lo siguiente:

Desglosando el código anterior, primero importamos los controladores necesarios para trabajar con navegación, cargadores y alertas:

A continuación, importe los servicios necesarios para trabajar con Push y Auth.

Una vez que se agregan, importe la página usuario. Comente por ahora, ya que aún no hemos creado esa página. No olvide descomentar esto más tarde una vez que la página de usuario esté lista.

En el constructor, compruebe si el usuario actual está autenticado. Navegue inmediatamente a la página de usuario si son:

Para la función de inicio de sesión, muestre el cargador y configurémoslo para que se descarte automáticamente después de 5 segundos. De esta manera, si algo sale mal con el código de autenticación, el usuario no se queda con una animación de carga infinita:

Después de eso, inicie sesión el usuario con las credenciales codificadas de forma impresa de un usuario que ya se haya agregado en la aplicación:

Si aún no tiene un usuario existente, el panel de Ionic realmente no le permite crear nuevos usuarios, aunque puede crear usuarios adicionales una vez que ya tenga al menos un usuario. Por lo tanto, la forma más fácil de crear un nuevo usuario es llamar al método signup() desde el servicio Auth. Simplemente descomente el código de inicio de sesión anterior y reemplácelo con el de abajo. Tenga en cuenta que puede crear el usuario desde el explorador, ya que el esquema de autenticación de correo electrónico / contraseña solo hace uso de las solicitudes HTTP.

Ahora que tiene un usuario que puede iniciar sesión, puede seguir adelante y quitar el código de registro y quitar el comentario del código de inicio de sesión.

Dentro de la función de devolución de llamada success para el inicio de sesión, debe llamar al método register() desde el servicio Push. Este paso crucial permite al dispositivo recibir notificaciones push. Realiza una solicitud al servicio Ionic Push para obtener un token de dispositivo. Como se mencionó anteriormente en la sección Cómo funciona, este token de dispositivo actúa como un identificador único para el dispositivo para que pueda recibir notificaciones de inserción.

Lo bueno de Ionic Push es su integración con Ionic Auth. La razón por la que estamos registrando los tokens de dispositivo justo después de iniciar sesión es debido a esta integración. Cuando se llama al método saveToken(), es lo suficientemente inteligente como para reconocer que un usuario ha iniciado sesión actualmente. Por lo tanto, asigna automáticamente este usuario al dispositivo. Esto le permite enviar específicamente una notificación de inserción a ese usuario.

Página de usuario

La página de usuario es la página que recibe notificaciones de inserción. Crélo con el comando Ionic generate:

Esto creará el directorio src/pages/user-page con tres archivos. Abra el archivo user-page.html y agregue lo siguiente:

Para mantener las cosas simples, todo lo que tenemos es un botón para cerrar la sesión del usuario. El propósito principal de esta página es recibir y mostrar solo notificaciones de inserción. El botón de cierre de sesión simplemente se agrega debido a la necesidad de cerrar la sesión del usuario y probar si aún podría recibir notificaciones después de cerrar la sesión.

A continuación, abra el archivo user-page.ts y agregue lo siguiente:

El código anterior es bastante autoexplicativo, por lo que solo repasaré la parte que se ocupa de las notificaciones. El código siguiente controla las notificaciones. Utiliza el método subscribe() para suscribirse a cualquier notificación push entrante o abierta. Cuando digo "abierto", significa que el usuario ha tocado la notificación en el área de notificaciones. Cuando esto sucede, se inicia la aplicación y se llama a la función de devolución de llamada que pasó al método subscribe(). Por otro lado, una notificación de inserción entrante se produce cuando la aplicación está abierta actualmente. Cuando se envía una notificación de inserción, también se llama a esta función de devolución de llamada. La única diferencia es que ya no va al área de notificación.

Para cada notificación, el argumento pasado a la función de devolución de llamada contiene la carga del objeto:

Push notification payloadPush notification payloadPush notification payload

En el código anterior, solo usamos el título y el texto que se va a proporcionar como contenido de la alerta. Sin embargo, no estamos limitados solo a alertas, como puede ver en la captura de pantalla anterior, existe este objeto de carga útil que almacena datos adicionales que desea pasar a cada notificación. En realidad, puedes usar estos datos para indicar lo que tu aplicación va a hacer cuando reciba este tipo de notificación. En el ejemplo anterior, is_cat se establece en 1 y podemos hacer que la aplicación cambie su fondo a una imagen de gato si recibe esta notificación. Más adelante, en la sección Envío de notificaciones de inserción, aprenderá a personalizar la carga para cada notificación.

Ejecución de la aplicación en un dispositivo

Ahora es el momento de probar la aplicación en un dispositivo. Siga adelante y agregue la plataforma y compile la aplicación para esa plataforma. Aquí estamos usando Android:

Copie el archivo .apk dentro de la carpeta platforms/android/build/outputs/apk en su dispositivo e instálelo.

Resolución de errores de compilación

La primera vez que intenté ejecutar el comando build, obtuve el siguiente error:

Android build errorAndroid build errorAndroid build error

Si tienes el mismo error, entonces sigue adelante. Si no ha encontrado ningún error, puede pasar a la siguiente sección.

El problema aquí es que los componentes del SDK mencionados no se instalaron o puede haber una actualización importante que deba instalarse. Sin embargo, el mensaje de error es un poco engañoso, ya que sólo dice que el acuerdo de licencia debe ser aceptado.

Por lo tanto, para resolver el problema, inicie el instalador del SDK de Android y luego verifique el Repositorio de soporte de Android y el Repositorio de Google. Después de eso, haga clic en el botón Instalar y acepte el acuerdo de licencia para instalar los componentes.

Envío de notificaciones push

Ahora que ha instalado la aplicación en su dispositivo, ahora es el momento de enviar algunas notificaciones push. Aquí hay algunos escenarios que puede probar:

  • Cuando un usuario no ha iniciado sesión actualmente
  • Cuando un usuario ha iniciado sesión
  • a todos los usuarios
  • a usuarios que coinciden con una consulta específica
  • Cuando se abre la aplicación
  • Cuando se cierra la aplicación

El primer paso para enviar una notificación push es ir al panel de la aplicación Ionic y hacer clic en la pestaña Push. Dado que esta es la primera vez que utiliza el servicio, debería ver la siguiente pantalla:

create your first pushcreate your first pushcreate your first push

Siga adelante y haga clic en el botón Crear su primer pulsador. Esto le redirigirá a la página para crear una notificación de inserción. Aquí puede ingresar el nombre de la campaña, el título y el texto de la notificación, y cualquier dato adicional que desee pasar. Aquí estamos estableciendo is_cat en 1.

push detailspush detailspush details

A continuación, puede establecer opcionalmente las opciones de notificación de inserción para iOS o Android.Next, you can optionally set the push notification options for iOS or Android. Dado que solo vamos a enviar a dispositivos Android, solo establecemos las opciones para Android:

android push optionsandroid push optionsandroid push options

El siguiente paso es seleccionar los usuarios que recibirán la notificación. Aquí puede seleccionar Todos los usuarios si desea enviar la notificación a todos los dispositivos que están registrados para notificaciones push.

Select users to push toSelect users to push toSelect users to push to

Si solo desea enviar a usuarios específicos, también puede filtrar a ellos:

push to selected userspush to selected userspush to selected users

Tenga en cuenta que la lista de usuarios se rellena a partir de los usuarios que están registrados a través del servicio de autenticación.

El paso final es seleccionar cuándo enviar la notificación. Ya que solo estamos probando, podemos enviarlo inmediatamente. Al hacer clic en el botón Enviar este comando, se enviará la notificación a los usuarios seleccionados.

Schedule pushSchedule pushSchedule push

Conclusión y próximos pasos

En este tutorial, ha aprendido sobre Ionic Push y cómo facilita la implementación de las notificaciones push. A través del panel de control de Ionic, pudiste personalizar las notificaciones que estás enviando a los usuarios. También le permite seleccionar a qué usuarios desea enviar las notificaciones.

Esto funciona muy bien si aún no tiene un back-end existente. Pero si ya tiene un back-end, es posible que se pregunte cómo puede usar Ionic Push con su aplicación web existente. Bueno, la respuesta para eso es la API HTTP Ionic. Esto le permite enviar una solicitud HTTP desde su servidor web al servidor de Ionic siempre que se cumpla una condición específica. La solicitud que envíe desencadenará una notificación de inserción que se enviará a los usuarios. Si desea obtener más información, puede consultar los documentos del servicio Ionic Push.

Y mientras estás aquí, echa un vistazo a algunos de nuestros otros cursos y tutoriales sobre Ionic 2!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.