fbpx
 

Utilizando Notificaciones Locales en iOS 10 [Parte 2]

Utilizando Notificaciones Locales en iOS 10 [Parte 2]

1. Introducción

 

En el tutorial de la semana pasada revisamos los conceptos fundamentales sobre notificaciones locales.

Pudimos ver como con el lanzamiento de iOS 10, los desarrolladores iOS habíamos tenido que cambiar la forma de trabajar con esta funcionalidad.

Vimos que la base de todo se encuentra en el framework UserNotifications.

Repasamos los conceptos teóricos mas importantes y sobre todo, pusimos en práctica lo aprendido desarrollando una aplicación muy sencilla que lanzaba una notificación local, 10 segundos después de que el usuario pulsara un botón.

Considero que el framework UserNotifications ofrece muchas posibilidades, por lo que esta semana vamos a continuar con la segunda parte de ese tutorial.

Veremos aspectos más avanzados de las notificaciones locales que te permitirán incorporar algunos aspectos muy útiles para los usuarios de tus aplicaciones.

Si no has visitado la primera parte, puedes acceder ahora desde aquí.

Continuemos entonces con la segunda parte del tutorial sobre notificaciones locales.

 

2. ¿Qué vamos a ver en este Tutorial?

 

Estos son los puntos más importantes en los que nos centraremos en la segunda parte del tutorial:

  • Añadir imágenes a nuestras notificaciones
  • Trabajando con Acciones y Categorías
  • Como añadir Acciones a una Notificación
  • Añadiendo funcionalidad a nuestras acciones
  • Implementando el protocolo UNUserNotificationCenterDelegate

 

3. La Aplicación que vamos a Desarrollar

 

Vamos a continuar desarrollando la aplicación que comenzamos la semana pasada. Mejoraremos la notificación que creamos en la primera parte del tutorial, añadiéndole una imagen y acciones que el usuario podrá realizar.

Este será el aspecto de la aplicación lanzando la notificación:
notificaciones locales con acciones personalizadas

4. Nuestro Proyecto de Inicio

 

Como se trata de la segunda parte de nuestro tutorial sobre notificaciones locales, no vamos a tener un proyecto de inicio sino que vamos a continuar con la aplicación que desarrollamos la semana pasada.

Por tanto, tu primer paso debe ser descargar el proyecto desde aquí.

Una vez que lo has bajado, descomprímelo y ábrelo con Xcode.

Se trata de un proyecto extremadamente sencillo.

Accede a Main.storyboard y verás que la interfaz consta de un botón con el texto Lanzar Notificación.

 

notificaciones comenzando proyecto

 

Abre la clase ViewController.swift y verás los dos métodos en los que trabajamos la semana pasada:

notificaciones locales two methods

Si quieres puedes ejecutar la aplicación para comprobar que funciona perfectamente.

Comencemos entonces echando un vistazo al proceso que debemos seguir para añadir una imagen a nuestra notificación local.

 

5. Añadiendo imagen a Notificaciones Locales

 

Ahora mismo, nuestra aplicación muestra una notificación que únicamente consta de texto.

Vamos a realizar algunas modificaciones para que además muestre una imagen al usuario.

 

Añadiendo la imagen a nuestra Aplicación

 

El primero paso será añadir la imagen que vamos a utilizar, a nuestro proyecto.

Puedes añadir la imagen que prefieras.

En el caso de que quieras seguir los mismos pasos que yo, puedes descargar la imagen que voy a usar desde aquí.

[caja-gris]La imagen que voy a utilizar se basa en el universo Zelda. He utilizado esta temática para el tutorial porque es probablemente mi saga favorita de videojuegos.[/caja-gris]

Nota Legal: The Legend of Zelda es es una marca registrada de NINTENDO Co. Ltd. El uso de su marca en este Tutorial obedece únicamente a propósitos didácticos.

Una vez que tienes la imagen que vas a utilizar, el siguiente paso es añadirla al proyecto.

Para ello, aunque podríamos añadirla a la carpeta de Assets, vamos a hacerlo más sencillo, simplemente arrastrándola a nuestro proyecto directamente.

 

notificaciones locales adding image to project

 

Una vez arrastrada la imagen, Xcode nos preguntará si queremos añadir la imagen al proyecto:

 

notificaciones locales accept adding image

 

Cuando quieras añadir cualquier imagen a tus proyectos deberás asegurarte que estas dos opciones estén activadas:

  • Copy items if needed
  • Add to targets

Para terminar pulsa en el botón Finish.

Una vez que hemos añadido nuestra imagen al proyecto, veamos como mostrarla en la notificación.

 

Mostrando la imagen en la Notificación

 

El framework UserNotification nos ofrece la clase UNNotificationAttachment para que podamos añadir elementos a nuestra notificación.

Estos elementos puede ser imágenes, sonidos y videos.

Esta clase soporta una gran variedad de formatos. Puedes consultar los formatos disponibles accediendo aquí.

En nuestro caso, vamos a añadir la imagen zelda.jpg.

Para ello, tendremos que crear una instancia de UNNotificationAttachment y añadirla a la propiedad attachments del objeto content.

Si recuerdas la primera parte del tutorial, el objeto content nos permitía añadir el título, subtítulo y contenido a la aplicación. Ahora también lo usaremos para añadir la imagen.

Por tanto, para añadir la imagen, tendrás que escribir el siguiente código en el método send10SecsNotification() justo antes de la parte en la que creamos el objeto request:

Lo único que hemos hecho aquí ha sido convertir la ruta de nuestra imagen en un objeto de tipo URL, para después añadirlo como adjunto (UNNotificationAttachment) a nuestro objeto content.

También hemos tenido que utilizar un bloque catch, debido a que el inicializador de UNNotificationAttachment puede producir excepciones.

 

Probando la App

 

Después de añadir este código ha llegado el momento de comprobar si la notificación muestra la imagen por pantalla.

Para ello, ejecuta la aplicación en el simulador y pulsa en el botón central que lanza la notificación.

Espera 10 segundos y…

notificaciones locales mostrando imagen en la notificacion

 

Como has podido comprobar, se muestra la notificación junto con una miniatura en la parte derecha de nuestra imagen.

Además, si deslizas la notificación hacia abajo, verás como la imagen se muestra en un tamaño mayor.

notificaciones locales mostrando imagen en grande

 

Genial, ¿no?

La característica de poder añadir imágenes a las notificaciones fue introducida por Apple en el lanzamiento de iOS 10.

Ahora ya sabes como utilizarla para tus propias notificaciones locales.

Veamos que más opciones nos ofrece el framework UserNotifications.

 

6. Como añadir Acciones a una Notificación Local

 

Además de añadir imágenes a una notificación local, también podemos añadir acciones.

Estas acciones permiten al usuario seleccionar algunas opciones relacionadas con la notificación.

Por si no tienes claro a que me estoy refiriendo con ACCIONES, aquí tienes una imagen de la notificación creada por nosotros, después de añadirle las acciones de Recordar y Eliminar:

notificaciones locales con acciones personalizadas

Acciones y Categorías

 

Para poder añadir estas acciones a la notificación, tendremos que trabajar con:

  • Acciones (Objetos de tipo UNNotificationAction)
  • Categorías (Objetos de tipo UNNotificationCategory)

Esta claro, que si queremos añadir 2 acciones diferentes a una notificación, tendremos que crear un objeto de tipo UNNotificationAction para cada una de ellas.

Pero además, tendremos que crear un objeto de tipo UNNotificationCategory que englobe a ambas.

Debes pensar en las Categorías, como objetos que representan un grupo de acciones.

Una categoría puede estar formada por 1..N acciones.

En nuestro caso, la categoría estará formada por 2 acciones:

  • Recordar
  • Eliminar

Veamos entonces, como crear nuestras 2 acciones y la categoría que las agrupa.

 

Creando 2 acciones y una Categoría

 

Para ello, añade el siguiente código al método send10SecsNotification(), justo antes del bloque de código del apartado anterior:

Como puedes ver, hemos creado 2 objetos de tipo UNNotificationAction, asignándoles un identificador y un título.

Después hemos creado un objeto de tipo UNNotificationCategory, al que le hemos asignado también un identificador y las 2 acciones que lo componen.

Por último hemos añadido esta categoría al Centro de Notificaciones.

El último paso que tenemos que dar es añadir esta categoría al objeto content de nuestra notificación.

Para ello, añade a continuación del bloque anterior, la siguiente linea:

Esto nos permite especificar que vamos a usar la categoría con nuestra notificación.

Prueba ahora a ejecutar la aplicación. Pulsa en el botón y cuando se lance la notificación, tira de ella hacia abajo. Deberías ver exactamente esto:

notificaciones locales con acciones personalizadas

 

Como puedes ver, con solamente 5 líneas de código hemos sido capaces de añadir 2 acciones a nuestra notificación.

El problema es que si pulsas cualquiera de esas 2 notificaciones, lo único que sucede es que la notificación desaparece.

En el siguiente apartado veremos como escribir el código para que las acciones realicen sus funciones.

 

7. Añadiendo Funcionalidad a nuestras Acciones

 

Si recuerdas, en la primera parte del tutorial, en uno de los apartados finales, tuvimos que implementar un método del protocolo UNUserNotificationCenterDelegate.

Concretamente tuvimos que hacerlo para que la notificación se mostrase cuando nuestra aplicación estaba ejecutándose en primer plano.

Para añadir funcionalidad a las acciones que hemos creado en la notificación, tendremos que hacer lo mismo.

Implementaremos otro método que nos ayudará a gestionar las acciones que hemos creado.

El nombre completo del método que usaremos es este:

  • userNotificationCenter(_:didReceive:withCompletionHandler:)

Cuando el usuario pulse alguna de las 2 acciones, se ejecutará este método.

Lo que haremos en este método es comprobar que acción ha pulsado el usuario. Podemos saber esto gracias al identificador de cada acción, que se encuentra en el parámetro response.

En el caso de que el usuario pulse en la opción Recordar más tarde, haremos que la notificación se retrase 60 segundos. Es decir, justo 1 minuto después de que el usuario pulse en recordar mas tarde, la notificación volverá a mostrarse. Para hacer esto tendremos que hacer algunos cambios en el código que veremos a continuación.

Por otro lado, si el usuario pulsa en la opción Eliminar Notificación, lo que haremos obviamente será eliminar la notificación del Centro de Notificaciones.

Veamos ahora los cambios en el código que debemos hacer para implementar la opción Recordar más tarde.

 

Modificando nuestro Código

 

Como acabamos de decir, cuando el usuario pulse en el botón Recordar más tarde, tendremos que volver a lanzar la notificación pero esta vez con un retardo de 60 segundos.

Para esto, necesitaremos una variable que controle el tiempo de retardo.

Añade la siguiente variable justo al comienzo de la clase ViewController.swift:

También tendremos que modificar la primera linea del método send10SecsNotification().

Ahora mismo, tenemos esto:

Y debes sustituirlo por esta otra linea:

Como ves, unicamente hemos cambiado el valor 10 por la variable timeToRemember que acabamos de crear.

Una vez realizado este cambio, ya podemos trabajar en el método del protocolo UNUserNotificationCenterDelegate.

Este sería el método completo que deberías añadir.

Lo puedes colocar justo antes del método send10SecsNotification(), en tu clase ViewController.swift:

El código de este método ya lo hemos explicado antes, por tanto no es necesario volver a repetir su funcionamiento.

 

Ejecutando la Aplicación

 

Una vez realizadas estas modificaciones, ha llegado el momento de probar que la notificación con acciones que hemos creado funciona perfectamente.

Ejecuta la aplicación en el simulador y cuando arranque pulsa el botón para lanzar la notificación.

En el momento en que aparezca la notificación en pantalla, deslízala hacia abajo y pulsa en el botón Recordar más tarde.

Ahora tendrás que esperar 60 segundos para comprobar que la notificación se retrasa un minuto, tal y como esperamos.

Para que no se te haga tan larga la espera, te adelanto el video/tontería de esta semana:

 

 

Después de que pasen esos 60 segundos, verás como la notificación se muestra por segunda vez. Justo lo que queríamos.

 

8. Resumen Final

 

En la segunda parte de nuestro tutorial hemos repasado opciones avanzadas que te permitirán utilizar notificaciones locales mucho más completas en tus aplicaciones.

Has comprobado por ti mismo, que podemos hacer esto de forma muy sencilla.

Espero que este tutorial te pueda servir siempre que necesites utilizar notificaciones locales en tus aplicaciones iOS.

 

9. Descarga el Proyecto

 

10AppsBanner

 

Consigue el proyecto completo y muchos más con el Pack de Aplicaciones de EfectoApple que puedes descargar totalmente gratis desde aquí.

 

10. ¿Donde ir ahora?

 

Puedes acceder a más tutoriales disponibles en EfectoApple desde aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Y como siempre, para cualquier duda, tienes los comentarios a tu disposición.

Recuerda, cada lunes un nuevo Tutorial sobre Desarrollo iOS.

Gracias por leer EfectoApple.

 

6 Comentarios
  • Alejandro Ochoa
    Publicado a las 21:42h, 24 abril Responder

    La verdad estoy muy agradecido con tus tutoriales, son claros perfectos y objetivos. Felicitaciones por tu dedicacion y esfuerzo!

    • Luis R
      Publicado a las 08:54h, 25 abril Responder

      Muchas gracias Alejandro!
      Siempre se agradecen comentarios como el tuyo.

      Un abrazo.

  • Cesar Palma
    Publicado a las 01:24h, 02 mayo Responder

    Estupendo tutorial… muchas gracias!

    Una pregunta: cuando ejecutas la acción la consola tira una mensaje:
    “Warning: UNUserNotificationCenter delegate received call to -userNotificationCenter:didReceiveNotificationResponse:withCompletionHandler: but the completion handler was never called.”

    Este mensaje se elimina al colocar al final de los if statements colocas un completionHandler().

    ¿Es esto recomendado?

    • Luis R
      Publicado a las 16:51h, 10 mayo Responder

      Buen aporte César.

      Puedes hacerlo así sin ningún problema.

      Gracias por el comentario!

  • valeria
    Publicado a las 03:12h, 04 febrero Responder

    Tendrás algún tutorial (si se paga no hay problema …!) ¿Cómo hacer un chat como este entre dos usuarios usando Json y Alamofire? serían mensajes entre dos usuarios pero con
    swift 4 – ¿Alamofire y Json?

  • Pablo Díaz
    Publicado a las 00:00h, 23 marzo Responder

    Mil gracias por el aporte.
    Excelente tutorial, aprendí mucho

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.