Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK
Code

Notificaciones Push iOS Fáciles Con back4app

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Introducción

En este tutorial, estaré mostrándote cómo implementar fácilmente notificaciones push en tu aplicación iOS usando un servicio basado en la nube de un tercero. Comenzaré viendo los pasos necesarios para que cualquier aplicación iOS implemente notificaciones push y después usar back4app (basado en la plataforma Parse) como nuestro servicio back-end.

Este tutorial requiere que estés ejecutando al menos Xcode 8 con el SDK de iOS 10. Esto es porque estaremos usando el nuevo framework UserNotifications para manejar el recibir notificaciones en la app. Si quieres aprender más sobre este framework, puedes revisar mi tutorial cubriéndolo aquí:

También necesitarás un dispositivo físico para ejecutar tu aplicación. Esto es porque el simulador iOS no soporta notificaciones push.

1. Configuración de Aplicación iOS

Para comenzar, abre Xcode y crea un nuevo proyecto basado en la plantilla iOS > Aplicación > Aplicación de Vista sencilla:

Application Template

En la siguiente pantalla, una vez que has llenado toda la información (puedes usar la misma información que tengo), asegúrate de que tomes nota del Bundle Identifier ya que lo necesitaremos después:

App Info and Bundle Identifier

Una vez que Xcode ha creado tu proyecto, abre tu archivo AppDelegate.swift y agrega la siguiente línea de código en la parte superior:

Después, reemplaza el método application(_:didFinishLaunchingWithOptions:) con lo siguiente:

Con este código, solicitamos permiso del usuario para mostrar notificaciones usando el framework UserNotifications. Si el usuario acepta esto, entonces registramos las notificaciones remotas (push) llamando el método registerForRemoteNotifications.

Para el último paso de la configuración de la app, da clic sobre el nombre del proyecto en la parte superior del Navegador de Archivos de Xcode y después ve a la pestaña Capacidades. En esta pantalla, enciendo el interruptor de Notificaciones Push para agregar los derechos apropiados a tu app:

Push Notifications Entitlements

2. Configuración de Certificado

Servicio de Notificaciones Push de Apple

A un nivel básico, el sistema de notificaciones push para iOS funciona a través de los siguientes pasos:

  • El servidor del tercero envía una carga de notificación al servicio de Notificación Push de Apple (APNs).
  • El APNs valida la carga para asegurar que proviene de una fuente legítima.
  • Si es válida, la APNs entonces envía la carga al dispositivo iOS correcto.

Para autenticar apropiadamente una carga de notificación debes crear un certificado firmado. Para comenzar el proceso de crear este certificado, necesitarás iniciar sesión con tu ID de Apple en el sitio de desarrollador de Apple.

Registrando un Identificador de Aplicación

Una vez que haz iniciado sesión, da clic en Certificados, IDs y Perfiles en la barra lateral izquierda:

Developer Portal Sidebar

En la siguiente pantalla, selecciona Identificadores > IDs de Aplicación en la barra lateral izquierda y después da clic sobre el botón más en la esquina superior derecha:

Add New iOS App ID

Cuando creas tu identificador de aplicación, puedes ingresar cualquier cosa que quieras para tu Nombre en la sección Descripción de ID de Aplicación. En la sección de Sufijo de ID de Aplicación, selecciona la opción ID Explícito de Aplicación e ingresa el identificador de paquete que hiciste cuando creaste el proyecto en el campo ID de Paquete. Por último, la sección de Servicios de App, asegúrate de que seleccionas la casilla para habilitar Notificaciones Push. Una vez que has ingresado toda la información, deslízate hacia abajo al fondo de la pantalla y selecciona el botón Continuar.

Ahora se te presentará una vista general de tu nueva ID de app como se muestra en la captura de abajo:

App ID Overview

Revisa que toda la información sea correcta (en esta etapa, las Notificaciones Push deberían mostrarse como Configurable) y después da clic en Registrar al fondo de la pantalla.

Creando Certificados

Ve a Certificados en la barra lateral izquierda y da clic al botón más en la esquina superior derecha de nuevo. En la siguiente pantalla, en la sección Desarrollo, selecciona la opción SSL de Servicio de Notificación Push de Apple (Sandbox) y da clic a Continuar en el fondo.

En la siguiente pantalla, selecciona tu ID de app desde el menú desplegable y después da clic en Continuar.

Si no tienes aún un archivo de petición de firma de certificado (CSR) , sigue las instrucciones en la siguiente pantalla para crear uno. Una vez que tienes un CSR, puedes continuar a la siguiente pantalla y subirlo.

Una vez que tu certificado ha sido creado, da clic en el botón Descargar y después abre el archivo con la app Keychain Access en tu computadora. Si se te pregunta cuál keychain quieres agregar al certificado, selecciona la opción login.

Aún en la aplicación Keychain Access, selecciona la opción Certificados en la sección del fondo de la barra lateral izquierda:

Keychain Access Sidebar

Ahora necesitarás encontrar el certificado que acabas de hacer; tendrá el nombre Servicios Push de Desarrollo IOS de Apple: { Bundle ID }. Una vez que has encontrado tu certificado, da clic derecho a esta llave y selecciona la opción Exportar. En la ventana emergente que aparece, puedes llamar al archivo como quieras, pero asegúrate de que el Formato de Archivo está establecido a Intercambio de Información Personal (.p12):

Certificate Exporting Options

Cuando se exporta el certificado, no proporciones una contraseña para el archivo p12. Esto porque back4app requiere un archivo de certificado sin protección de contraseña.

El servicio de Notificación Push de Apple tiene dos entornos separados: uno para aplicaciones en desarrollo y otro para aplicaciones en producción.

Hasta ahora, hemos creado un certificado para ser usado para el entorno de desarrollo, el cuál funcionará cuando pruebes tu aplicación por medio de Xcode.

Cuando liberas tu app en la App Store, necesitarás crear un certificado de producción. Para hacer esto, repite los pasos que hicimos en la sección Creando Certificados de este tutorial, pero selecciona SSL Servicio Notificación Push de Apple (Sandbox & Producción). Por favor nota que en Keychain Access, el nombre del certificado será: Apple Push Services: {Bundle ID }.

Por favor nota que podrías no necesitar crear dos certificados separados, dependiendo de que implementación de notificación estés usando. Desde inicios de este año, Apple ha permitido la creación de certificado doble propósito--el tipo SSL Servicio de Notificación Push de Apple (Sandbox & Producción)--el cuál puede ser usado para conectar ambos entornos. Desafortunadamente, algunos servicios como back4app no han sido actualizados aún para sacar ventaja de estos nuevos certificados y requieren uno dedicado para cada entorno.

3. Configuración back4app

Para este tutorial, vamos a usar back4app para proporcionar la implementación de lado del servidor para nuestras notificaciones push. back4app es un servicio que proporciona un back-end fácil de usar y gratuito (con límites) para tu app. Este funciona como un servidor de hospedaje para el proyecto Parse Server.

Para configurar con back4app, necesitarás ir a back4app.com y registrarte con una cuenta si aún no lo has hecho.

Una vez que te has registrado, serás llevado a una pantalla vacía en donde todas tus aplicaciones serán mostradas. Para crear una nueva, da clic en el botón Construir nueva app Parse en la esquina superior izquierda. En la siguiente pantalla, ingresa el nombre para tu app y después da clic en Siguiente.

Una vez que tu aplicación ha sido creada, serás llevado a una pantalla con un montón de identificadores y llaves diferentes. De los que necesitamos tomar nota son App Id, Parse API Adress, y Llave de Cliente. Una vez que tienes una copia de estos, puedes dar clic en el botón Cerrar de la página.

Ahora deberías estar en la pantalla del tablero principal de tu app. Para poder configurar la implementación de notificaciones push, ve a la página de Ajustes de Notificación Push iOS. Aquí, presiona el botón Elegir Archivo y sube el archivo .p12 que has creado antes. Da clic en Enviar y tu paquete de ID debería entonces mostrarse en la lista como se muestra en la siguiente captura:

Uploaded Certificate Information

4. Configuración de Parse SDK

Como la última etapa de nuestra configuración, necesitamos descargar y agregar el SDK Parse a nuestra aplicación. Para hacer esto, puedes seguir los primeros tres pasos de la guía de inicio rápido de iOS de back4app.

Una vez que has completado la configuración de Parse SDK y agregado el código de configuración requerido a tu método application(_:didFinishLaunchingWithOptions:), agrega el siguiente método a tu clase AppDelegate:

Este método será llamado si el usuario acepta la petición de tu app para mostrar aplicaciones. Específicamente, el método registerForRemoteNotifications que llamamos previamente en nuestro delegado de app llamará al método application(_:didRegisterForRemoteNotificationsWithDeviceToken:) una vez que ha terminado de procesar. En nuestra implementación de este método, solo obtenemos los datos del dispositivo y subimos esto a la app back4app Parse.

5. Enviando una Notificación

Ahora que toda nuestra configuración está completa, puedes construir y ejecutar tu app en un dispositivo iOS. Una vez que se abre la app, verás la siguiente alerta:

Notification Authorisation Alert

Presiona el botón Permitir y tu aplicación se registrará a sí misma para notificaciones remotas.

Ahora, puedes ir al Tablero Parse para tu aplicación. Una vez que estés en el tablero para tu aplicación, da clic sobre Core en la barra lateral izquierda si no está ya seleccionada. Una vez que la sección Core se ha expandido, serás capas de ver el número total de objetos de Instalación para tu app. De momento, esto debería estar mostrando 1 como en esta captura:

Parse Dashboard Installation Object Count

Si este número aún es 0, entonces necesitarás regresar y revisar que hayas copiado todo el código en tu clase AppDelegate correctamente, incluyendo identificador de app back4app y llave de cliente.

Después de asegurarte de que tu app ha guardado sus datos de instalación sobre Parse, va a la sección Push en la barra lateral izquierda del Tablero Parse. Deberías estar ahora en una pantalla en donde puedes enviar tu propia notificación personalizada. Por ahora, puedes dejar todos los ajustes como están y solo teclear un mensaje personalizado sobre el sub-encabezado Escribe tu menaje.

Cuando estés listo, bloquea la pantalla de tu dispositivo iOS y después presiona el botón Enviar push en la esquina inferior derecha del Tablero Parse. Después de unos pocos segundos, deberías ver tu notificación push aparecer en tu pantalla de bloqueo:

Successful Push Notification

Conclusión

¡Felicidades! Has configurado las notificaciones push de manera exitosa para una aplicación iOS! Como puedes ver, aparte de la tediosa creación de certificados SSL, usar un servicio como back4app hace implementar las notificaciones push bastante sencillo.

Por supuesto, hay otros servicios además de back4app que puedes usar para notificaciones push, incluyendo Backendless, Firebase de Google e incluso CloudKit del propio Apple. Elegí back4app ára este tutorial ya que la mayoría de configuraciones de notificaciones push siguen un proceso similar. También ofrece muchas otras características gratuitas de las que cualquier app podría sacar ventaja.

Como siempre, por favor asegúrate de dejar tus comentarios y retroalimentación en la sección de comentarios de abajo. ¡Y revisa algunos de nuestros otros tutoriales sobre servicios back-end basados en la nube para aplicaciones móviles!

Advertisement
Advertisement
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.