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
¿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
¿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
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.
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
Elementos de una Push Notification
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
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
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)
Azure Notification Hub
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
• 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:
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
Demo: Creando un recurso de Azure
Notification Hub
Firebase
¿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
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.
¿Cómo funciona?
Registro de dispositivos cliente
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 
¿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
Consola de Firebase
Firebase tiene su consola para administrar
proyectos, los cuales utilizan uno o más
servicios
https://console.firebase.google.com
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.
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.
Creando un proyecto desde la Consola de
Firebase
Agrega un proyecto desde la Consola de Firebase
Coloca el nombre del proyecto
• Habilita Google Analytics
Elige o crea una cuenta de Google Analytics
• Añade una app de Android
• Coloca el nombre del paquete (nuevo o existente) de tu app de
Android
Descarga el archivo google-services.json
• Selecciona Descripción general  Configuración del proyecto.
• Elige la pestaña Cloud Messaging  Copia la clave de servidor
Demo: Creación de proyecto en Firebase
Cloud Messaging
Demo: Configuración de Notificaciones Push
en Azure Notification Hub con Firebase
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”
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)
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!
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!
Demo: Creación de backend Asp .NET Core para
registro de dispositivos y envío de notificaciones
Demo: Envío de Notificaciones Push a una
aplicación móvil
Demo: Tags, dispositivos y usuarios
¡Gracias por tu atención!
https://forms.office.com/r/KNEg3qE9ff
¿Cómo estuvo mi presentación?
Luis Beltrán
about.me/luis-beltran

Jornada 10 años ASP NET en Español - Implementación de Notificaciones Push mediante backend .NET y Azure Notification Hubs.pptx

  • 2.
    Luis Beltrán • Investigador/estudianteen 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 PushNotification? • 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 lasNotificaciones 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 Pushestá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 Pushson 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 unaPush Notification
  • 9.
    Ciclo de vidade 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 lasNotificaciones 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 lasNotificaciones 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.
  • 13.
    Azure Notification Hub Configurauna 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 Hubselimina 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: desdecualquier 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 unrecurso de Azure Notification Hub
  • 17.
  • 18.
    ¿Qué es Firebase? Esuna 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.
  • 21.
  • 22.
    Registro de dispositivoscliente • 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 eldispositivo 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 Firebasetiene 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 • Registraun 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 proyectodesde la Consola de Firebase Agrega un proyecto desde la Consola de Firebase Coloca el nombre del proyecto
  • 28.
    • Habilita GoogleAnalytics Elige o crea una cuenta de Google Analytics
  • 29.
    • Añade unaapp de Android
  • 30.
    • Coloca elnombre del paquete (nuevo o existente) de tu app de Android Descarga el archivo google-services.json
  • 31.
    • Selecciona Descripcióngeneral  Configuración del proyecto. • Elige la pestaña Cloud Messaging  Copia la clave de servidor
  • 32.
    Demo: Creación deproyecto en Firebase Cloud Messaging
  • 33.
    Demo: Configuración deNotificaciones 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 porel 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 • Lasapps 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 debackend Asp .NET Core para registro de dispositivos y envío de notificaciones
  • 39.
    Demo: Envío deNotificaciones Push a una aplicación móvil
  • 40.
  • 42.
    ¡Gracias por tuatención! https://forms.office.com/r/KNEg3qE9ff ¿Cómo estuvo mi presentación? Luis Beltrán about.me/luis-beltran

Notas del editor

  • #3 Before that, just a brief introduction about ourselves. I'm Luis, a Microsoft MVP in AI and Developer Technologies from Mexico. I work as a lecturer at Tecnologico Nacional de Mexico un Celaya although I'm currently pursuing my PhD at Tomas Bata University in Zlín, Czech Republic. I enjoy talking about cloud computing with Azure, mobile applications development with Xamarin, Artificial Intelligence with deep neural networks, and .NET as a platform in general. You can find me on twitter as @darkicebeam and here you also have my email in case you want to reach out and talk about any of these topics. My colleague Carla will introduce herself a bit later.
  • #4 Push notifications son mensajes que aparecen en el dispositivo en forma de pop up cuando la aplicación está ejecutándose actualmente o en segundo plano
  • #7 Otros ejemplos: Administración de la fuerza laboral Notificaciones: aprobaciones, tarjetas de asistencia, etc. Administración del almacén Llegadas, transporte de equipos Aprobación de documentos Punto de venta Check-in de entrada / check-out de salida
  • #17 https://docs.microsoft.com/es-mx/azure/notification-hubs/create-notification-hub-portal O https://docs.microsoft.com/es-mx/azure/developer/mobile-apps/notification-hubs-backend-service-xamarin-forms#create-a-notification-hub
  • #19 Analytics es una herramienta de análisis gratuita e ilimitada para ayudarlo a obtener información sobre el uso de la aplicación y la participación del usuario. No se necesita código adicional, solo consola Firebase Cloud Messaging te permite enviar y recibir mensajes a través de plataformas de manera confiable. Notifications: le ayuda a volver a interactuar con los usuarios en el momento adecuado. No se necesita código adicional, solo consola Authentication: una característica clave para proteger los datos en su base de datos y almacenamiento. BD: le permite sincronizar datos entre todos los clientes en tiempo real y permanece disponible cuando su aplicación se desconecta. Cloud firestore: Combina la base de datos y las funciones en la nube. Utiliza una base de datos escalable en la nube NoSQL para almacenar y sincronizar datos. Storage: le permite almacenar y ofrecer contenido generado por el usuario, como fotos o videos. Firebase Storage está respaldado por Google Cloud Storage
  • #33 https://docs.microsoft.com/es-mx/azure/developer/mobile-apps/notification-hubs-backend-service-xamarin-forms#create-a-firebase-project-and-enable-firebase-cloud-messaging-for-android
  • #34 https://docs.microsoft.com/es-mx/azure/notification-hubs/configure-notification-hub-portal-pns-settings?tabs=azure-portal O https://docs.microsoft.com/es-mx/azure/developer/mobile-apps/notification-hubs-backend-service-xamarin-forms#configure-your-notification-hub-with-fcm-information
  • #39 https://docs.microsoft.com/es-mx/azure/developer/mobile-apps/notification-hubs-backend-service-xamarin-forms#create-an-aspnet-core-web-api-backend-application
  • #40 https://docs.microsoft.com/es-mx/azure/developer/mobile-apps/notification-hubs-backend-service-xamarin-forms#create-a-cross-platform-xamarinforms-application
  • #41 https://github.com/Azure/azure-notificationhubs-xamarin O https://docs.microsoft.com/en-us/azure/notification-hubs/push-notifications-android-specific-devices-firebase-cloud-messaging + https://docs.microsoft.com/en-us/azure/notification-hubs/push-notifications-android-specific-users-firebase-cloud-messaging