Slides for my talk about Push Notifications using Azure Notification Hubs and ASP .NET Core at Jornada 10 años ASP.NET en Español community

2. Luis Beltrán
• Investigador/estudiante en Tomas Bata
University in Zlín, República Checa
• Docente en Tecnologico Nacional de
Mexico en Celaya, Mexico
• Microsoft MVP en IA y Tecnologías de
Desarrollador

4. ¿Qué es Push Notification?
• Es una tecnología de comunicación que
trabaja bajo una arquitectura cliente –
servidor, en la cual el servidor envía
mensajes en forma de notificaciones a
cada uno (o solo a algunos) de sus
clientes.
• Los clientes pueden ser smartphones,
smartwatches, tablets y otros tipos de
dispositivos
¿Qué es Push Notification?
• Es una tecnología de comunicación que
trabaja bajo una arquitectura cliente –
servidor, en la cual el servidor envía
mensajes en forma de notificaciones a
cada uno (o solo a algunos) de sus
clientes.
• Los clientes pueden ser smartphones,
smartwatches, tablets y otros tipos de
dispositivos

5. ¿Qué son las Notificaciones Push?
Push Notifications
Motor de notificaciones móviles para apps existentes
Mejora la experiencia de cualquier app con personalización y localización
Promueve la retención del usuario entregando contenido relevante más rápido

6. Las Notificaciones Push están por doquier
Cambios en reservas, ofertas
Viajes / Aerolíneas / Hospedaje
Reemplazo de SMS
Operaciones bancarias / seguros
Órdenes, Productos
Estado de la orden / envío
Prescripciones, Citas
Seguro médico
Noticias de última hora
Noticieros / Medios de comunicación
Ofertas, Órdenes
Ventas
Cuando el usuario hace clic en la notificación, se ejecuta la app.

7. Las Notificaciones Push son esenciales en las
aplicaciones móviles
Para apps
empresariales
Mantén a los usuarios actualizados
Más que una simple
alerta
Notificaciones ‘push to sync’
Para apps de consumo
Formato enriquecido, mejor que un SMS
10000 veces más económico

8. Elementos de una Push Notification

9. Ciclo de vida de una Notificación Push
Registro al ejecutar la app
1.
2.
Enviando la notificación
1.
2.
Mantenimiento
1.
Platform
Notification
Service
App back-end
APNs
WNS
FCM

10. Retos de las Notificaciones Push
Dependencia de plataforma
• Cada servicio push (APNs para iOS, FCM para Android, WNS para Windows) tiene
diferentes protocolos de comunicación (HTTP vs TCP, payload xml)
• Formatos de presentación y capacidades diferentes (tiles vs toasts vs badges)
Enrutamiento
• PNS proporcionan una forma de enviar un mensaje a un dispositivo/canal
• Segmentar las notificaciones en base a usuarios específicos o grupos de interés
(empleados asignados a una cuenta de cliente específica)
• El back-end debe mantener un registro asociando los manejadores de
dispositivo con grupos / usuarios de interés

11. Retos de las Notificaciones Push
Escala
• El back-end debe almacenar los manejadores actuales para cada dispositivo 
costos de almacenamiento y VMs altos
• Hacer un broadcast a millones de dispositivos con baja latencia requiere
procesamiento en paralelo (DB y VM)

12. Azure Notification Hub

13. Azure Notification Hub
Configura una vez
Crea un Notification Hub
La app cliente retorna su manejador del PNS
La app cliente (o su backend) registra el
manejador con el Notification Hub
Envía Notificación
El back-end de la app envía un mensaje al
Notification Hub.
Notification Hub la envía al PNS
APNs WNS
Notification Hub
App back-end
iOS app Windows 8.x
app
Android app
MPNS
FCM
Notification Hub

14. • Notification Hubs elimina todas las complejidades asociadas al envío de
notificaciones push por su cuenta desde el back-end de una aplicación.
• Su infraestructura de notificaciones push multiplataforma y escalada
horizontalmente reduce la codificación relativa a la inserción y simplifica el
back-end.
• Con Notification Hubs, los dispositivos solo son responsables de registrar
identificadores de PNS con un centro, mientras que el back-end envía
mensajes a usuarios o grupos de interés:

15. Ventajas
• X-plat: desde cualquier back-end a cualquier plataforma móvil
• El backend puede ser local o en la nube, .NET / Node / Java / PHP / Node.js / etc.
• Compatible con UWP / iOS / Android / Kindle Fire.
• No es necesario almacenar información del dispositivo en el back-end de la aplicación
• Notification Hub mantiene el registro de dispositivos y las asociaciones a usuarios / grupos de interés
• Enrutamiento y grupos de interés
• Es posible enviar notificaciones a usuarios específicos y/o grandes grupos de interés mediante Tags
• Personalización y localización
• Mantenga su back-end libre de problemas de presentación, como la localización y las preferencias del
usuario, utilizando plantillas.
• Difusión a escala (broadcast), multicast, unicast
• Notificaciones push a millones de dispositivos (a través de plataformas) con una sola llamada
• Telemetría
• Telemetría enriquecida disponible a través del portal o las API

16. Demo: Creando un recurso de Azure
Notification Hub

17. Firebase

18. ¿Qué es Firebase?
Es una plataforma de Google que permite realizar varias tareas:
• Analytics
• Cloud Messaging
• Notifications
• Authentication
• Realtime Database
• Cloud Firestore
• Storage
• AdWords
• AdMob
• Y mucho más

19. Firebase Cloud Messaging
• Es un servicio de la nube que nos
permite enviar notificaciones push a
cualquier cliente móvil Android, iOS y
web.
• Sencillo de configurar y administrar.
• Es un servicio gratuito.
• Puedes enviar notificaciones a
usuarios particulares, grupos de
usuarios o a un tema.
• Eficiencia de 95%, tiempo menor a
250 ms.
• Previamente conocida como GCM.

20. ¿Cómo funciona?

21. Registro de dispositivos cliente

22. Registro de dispositivos cliente
• Sender ID: Valor numérico asignado cuando el proyecto
de Firebase es creado y asociado a una app.
• Api Key: Clave que da acceso al servidor de la app para
poder utilizar los servicios Firebase.
• App ID: Valor que representa el identificador de la app
cliente.
• Registration Token: Token de registro del dispositivo.
Un valor único que representa al dispositivo en los
servicios de la nube 

23. ¿Cómo sabe el dispositivo que llegó una
notificación?
Cuando se construye la app cliente es necesario agregar un servicio
que se encuentre corriendo en segundo plano, esto con la finalidad de
estar escuchando el canal de comunicación y así poder emitir la
notificación push recibida desde el servidor a nivel de interfaz gráfica.
Importante en Android:
Google Play Services debe estar instalado

24. Consola de Firebase
Firebase tiene su consola para administrar
proyectos, los cuales utilizan uno o más
servicios
https://console.firebase.google.com

25. Firebase Cloud Messaging
• Permite enviar una notificación a todos (o algunos)
dispositivos donde tu aplicación esté instalada.
• Requiere instalar paquetes / dependencias de
Firebase.
• Se crea un mensaje en la sección de notificación, se
envía y debe aparecer en los dispositivos.

26. Pasos básicos
• Registra un proyecto en Firebase Cloud Messaging.
• La app obtendrá un token, individual para cada dispositivo.
• Envía un mensaje específico a ese token, a todos los tokens o a
grupos de dispositivos.
• Se requiere un backend (puede ser la plataforma de Google o tu
propio API de servicios REST) para el envío de mensajes en
producción.

27. Creando un proyecto desde la Consola de
Firebase
Agrega un proyecto desde la Consola de Firebase
Coloca el nombre del proyecto

28. • Habilita Google Analytics
Elige o crea una cuenta de Google Analytics

29. • Añade una app de Android

30. • Coloca el nombre del paquete (nuevo o existente) de tu app de
Android
Descarga el archivo google-services.json

31. • Selecciona Descripción general  Configuración del proyecto.
• Elige la pestaña Cloud Messaging  Copia la clave de servidor

32. Demo: Creación de proyecto en Firebase
Cloud Messaging

33. Demo: Configuración de Notificaciones Push
en Azure Notification Hub con Firebase

34. Tags
• Tags = Grupos de interés
1. La app cliente puede suscribirse a uno o varios tags
2. Tags = cadenas de texto
3. El back-end de la app puede notificar a todos los clientes
suscritos al tag
• También puedes usar tags para
• Múltiples tipos de grupos de interés, por ejemplo:
• Seguir bandas: tag “followband:Beatles”
• Seguir usuarios: tag “followuser:Alice”
• Etiquetar dispositivos con un id de usuario
• Preferencias de usuario
• Información de sistema
Notification Hub
App back-end
Tag:”Beatles”
Tag:”Wailers”
Tag:”Beatles”

35. Tags manejados por el backend
Usa un tag para identificar a un usuario
1. El back-end típicamente se refiere a usuarios y
no a dispositivos
2. Registra dispositivos con un tag estilo
‘userid:{id}’
El back-end actualiza tags
1. Devuelve los dispositivos registrados por un by
userid
2. Actualiza el tag
Nota
1. No guardes información del dispositivo en el
backend
2. El back-end solo se refiere a usuarios
Notification Hub
App back-end
getByTag(userid)
update(tags)

36. Templates: push multiplataforma
Registro
• Las apps cliente pueden registrarse con una plantilla
específica de plataforma. Por ejemplo:
• Las tablets de Windows se registran con el template
Windows Store ToastText01
• Los iPhones se registran con el Apple JSON template:
{ aps: {alert: “$(message)”}}
Envía notificación
• El backend envía un mensaje independiente de plataforma:
{message: “Hello!”}
Notas
• Se pueden especificar múltiples templates por dispositivo
• Cada template puede tener un conjunto diferente de tags
Notification Hub
App back-end
<toast>
<visual>
<binding template="ToastText01">
<text id="1">$(message)</text>
</binding>
</visual>
</toast>
{
aps: {
alert: “$(message)”
}
}
{
message: “Hello!”
}
Hello!
Hello!

37. Templates: localización
Registro
• Las apps cliente se pueden registrar con plantillas
personalizadas, por ejemplo:
• Las tablets de Windows recibirán noticias en
inglés
• En iPhone será en italiano
Envía la notificación
• El backend envía un mensaje incluyendo ambos
idiomas: {news_en: “Hello!”, news_it: “Ciao!”}
Template Expressions
• Los templates soportan una expresión de idioma:
• E.g. {‘Elio, ’+$(friend)+’ added you to ’+$(groupName)}
Notification Hub
App back-end
<toast>
<visual>
<binding template="ToastText01">
<text id="1">$(news_en)</text>
</binding>
</visual>
</toast>
{
aps: {
alert: “$(news_it)”
}
}
{
news_en: “Hello!”,
news_it: “Ciao!”
}
Hello!
Ciao!

38. Demo: Creación de backend Asp .NET Core para
registro de dispositivos y envío de notificaciones

39. Demo: Envío de Notificaciones Push a una
aplicación móvil

40. Demo: Tags, dispositivos y usuarios

42. ¡Gracias por tu atención!
https://forms.office.com/r/KNEg3qE9ff
¿Cómo estuvo mi presentación?
Luis Beltrán
about.me/luis-beltran