Bienvenidos, nuevamente. En esta actividad, vamos a aprender cómo enviar notificaciones al usuario, usando el servicio de Google Firebase, que es un servicio que se integra tanto con Android como con iOS. Para esto, vamos a realizar diversos pasos. Lo primero que vamos a hacer es dar de alta un proyecto y registrar la aplicación que previamente publicamos en Google Play, o, al menos, dimos de alta por más que nunca hayamos publicado una versión productiva. Y, lo que vamos a ver aquí, en el Google Play Console, es, cuando vamos al listado de todas las aplicaciones, lo que figura como código de la aplicación. No el nombre para mostrar, sino el código. Esto que yo acá le puse "org.nativescript.mydrawerng". Luego, nos vamos a dirigir a Firebase, nos vamos a loguear, se van a loguear con la misma cuenta de Google que están logueados en Google Play. Así es la cuenta que Google toma como parte de su Google Cloud Platform, de la plataforma Cloud de Google. Por ende, la están usando en ambos servicios, Google Play Console, que es el que estábamos antes, y el Firebase Console, que es donde estamos ahora. Aquí van a crear un proyecto, siguen el asistente para crear el proyecto, y una vez que tienen uno creado, como yo ya tengo este aquí, lo que van a hacer es agregar una "app". Yo ya tengo una agregada, como ven, le pone un nombre nuevamente, un nombre amigable dentro de Firebase. Pero, lo que finalmente termina importando siempre, en los diferentes servicios de Google, es el nombre en código, "org.nativescript.mydrawerng", se los va a preguntar cuando ustedes agreguen una aplicación. Ustedes vienen a "agregar aplicación"; en este caso, sería una aplicación que está en Google Play. O sea, si nuestra aplicación la publicamos a Google Play y también a iOS, tenemos que primero agregar aquí la referencia, la vinculación entre Firebase y la instancia de la aplicación en Google Play para Android. Aquí ponemos el nombre en código, seguimos este asistente, y luego tendremos que agregar la aplicación para iOS, y seguir con el otro asistente. Una vez que tenemos agregada la aplicación, nosotros, puntualmente, lo que vamos a utilizar es el servicio de Cloud Messaging. Cuando ustedes van a estar en el asistente dando de alta a la aplicación, en el paso anterior, se les va a descargar un archivo llamado "google-services.json". Ese archivo lo tienen que descargar, y lo tienen que llevar a "App_Resources", "Android", "google-services.json". Dentro de "app_resources.android", tal cual se descarga de la web. Esto tienen unas "keys" de configuración y demás, que, luego, el plugin que vamos a instalar, va a leer automáticamente por convención ese archivo, "google-services.json" dentro de "app_resources/android", lo va a buscar ahí a través de un "hook" que hay en la aplicación, "after-prepare", dentro de "hooks", "firebase-copy-google-services". Aquí, este "hook", que se va a agregar automáticamente cuando agreguemos el "plugin", que todavía no agregamos, por esta línea que está aquí, va a buscar "google-services.json". Es interesante ver que también busca ".prod" y ".dev", si es que existen. Y esto es una buena práctica si uno tiene variables de configuración para hacer un "build" para producción o para hacer un "build" para desarrollo que cambian seguramente el proyecto, las "keys" del proyecto en Firebase. Entonces, de esta manera, uno, en esta misma carpeta donde pusimos el "google-services.json", puede diferenciar la configuración de producción de la de desarrollo usando estos nombres, que, por convención, son así. De esta manera, dimos de alta la aplicación, y lo próximo que vamos a tener que hacer es mandar notificaciones. Pero, como por ahora dimos de alta las aplicaciones solamente en Firebase, y pusimos el "google-services.json" en nuestra aplicación, todavía faltan otros pasos. El siguiente paso es ejecutar "tns plugin add nativescript-plugin-firebase", que vamos a ver a continuación, este comando. Con este comando sobre el "root" de nuestro aplicativo, obviamente, como siempre, cerrando nuestro aplicativo para que no esté ejecutándose, agregamos este "plugin" que por debajo agrega varios paquetes de NPM. Y, antes de agregar los paquetes NPM, lo que va a hacer es hacer un cuestionario, nos va a hacer como una docena de preguntas, donde tenemos que responder sí y no. Esas preguntas son para guardar la configuración de qué servicios usamos de Firebase. Eso se guarda en otro archivo, que se va a guardar en la raíz de la aplicación, como ven ahí, "mydrawer.ng/firebase.nativescript.json". Este archivo es creado automáticamente cuando ejecutamos este comando y respondemos todas las preguntas. Al terminar de responder todas las preguntas, guarda las respuestas en este archivo y luego prosigue a terminar de instalar el "plugin". Como ven, les va a preguntar si se va a usar solamente como cliente de "push" y no vamos a usar los servicios de Firebase. En este caso, es falso, nosotros vamos a mandar notificaciones por Firebase. Nos pregunta si vamos a usar iOS, si vamos a usar Android. Le respondemos que sí, que estamos haciendo una aplicación para más plataformas. Luego, nos pregunta del resto de los servicios, cuáles vamos a usar. Les ponemos a todos que no. Solamente vamos a usar el Messaging. Pero, como ven, hay diferentes servicios: Firestore, que es una base de datos NoSQL, una base de datos tiempo real; el módulo de autenticación para hacer "a out" con servicios como Google o Facebook; el servicio para enviar configuraciones remotamente desde la nube; "pushear" configuraciones a los dispositivos Mobile; monitoreo de performance; "crash lytics", que es cuando hay una excepción no controlada en nuestro aplicativo que se ha informado a la nube de Firebase y luego desde la consola lo podemos ver en Firebase; etcétera, etcétera,etcétera. Vamos a usar Messaging. Es a lo único que le contestamos que sí. De esta manera tenemos instalado ya Firebase con la integración de NativeScript, pero faltan un par de pasos más. El siguiente paso es configurar en el "Manifest" el servicio de "Firebase Messaging Service" con esta notación que es necesaria para poder integrarse a la librería de Firebase. Tenemos que ver esto en nuestro "Manifest". Luego, el siguiente paso es utilizarlo, inicializarlo, porque, hasta ahora, hicimos sólo configuraciones. La configuración de Google Services, Firebase, qué servicios de Firebase usamos, y una integración en el Android Manifest. El siguiente y último paso es configurarlo a nuestro aplicativo. En nuestro aplicativo, en el "app.component", es lo que recomiendan los desarrolladores del "plugin" de NativeScript plugin Firebase, recomiendan que para Angular lo pongamos en el "app.component", o como se llame el componente raíz de todo nuestro aplicativo, y puntualmente en el "ngOnInit", en el "ngOnInit" de nuestro componente raíz. Lo que hacemos es invocar a Firebase. Como vemos, tenemos un "require" de "nativescript-plugin-firebase". Y, además, como vamos a usar la mensajería, vamos a recibir como parámetro un mensaje; por ende, necesitamos importar Message de "nativescript-plugin-firebase". El método de inicialización es muy sencillo. El "Init" recibe un objeto de configuración, que aquí le ponemos todas las configuraciones de todos los servicios que tiene Firebase, que usemos. De los 10, 12 servicios que tiene, nosotros vamos a usar solamente el de notificaciones. Esto retorna un "promise", en donde podemos loguear si la conjuración si inicializó bien o si la configuración tuvo error. De la inicialización, lo que vamos a configurar son dos "callbacks". Un primer "callback", que es cuando a nuestro celular el servicio del Firebase nos asigna un "token". Esto es, todo celular que se conecte a Firebase va a tener un "token" de conexión único. Si ese "token", esa conexión se cae, y vuelve a restaurar conexión con Internet, ese "token" es susceptible de seguir siendo usado. Eso lo decide Firebase. Pero, si alguna vez caduca el token, nuevamente se va a asignar a través de este "callback". Y nosotros acá, en este momento, lo estamos logueando. En verdad, lo que haríamos en una aplicación sería guardarlo en el "storage" local que estemos usando, coach, race, preferencias, Local Storage, SQLite, y, seguramente, también se lo notificaríamos a una API nuestra. ¿Por qué? Porque este token, luego, a nuestro "backend" se lo notificamos. Y nuestro "backend", que sabe qué usuarios somos nosotros en nuestra aplicación de "backend", se guarda diciendo: "Bueno, este usuario, Sebastián, le tocó este token en este celular". Es más, quizás el usuario Sebastián recibe más de un "token" al mismo tiempo, porque está logueado en más de un celular. Entonces, en nuestro "backend" tendríamos un usuario, y para ese usuario, tres "token". ¿Por qué nos guardamos los "tokens"? Porque estos "token" son necesarios cuando les queremos mandar una notificación específica a usuarios puntuales. La manera que tiene Firebase de identificar a los dispositivos es con ese "token". Entonces, por eso, nosotros en nuestro "backend" nos los tendríamos que guardar, para luego notificárselo a través de Firebase dicho "token", y la notificación enviar, y eso le va a llegar al usuario que nosotros queremos. El otro "callback" que tenemos que usar, es "onMessageRecievedCallback", el "callback" del mensaje recibido. Esto recibe un objeto Message, de tipo "message", de tipo mensaje. Viene con dos propiedades, "Title" y "Body", siempre, que son obligatorias. Y, si desde el "backend" nos mandaron un objeto adicional con información adicional, eso llega en "data". Imagínense una aplicación de mails, nos va a mandar el título del mail, un resumen de lo que está en el cuerpo del mail, y en "data" nos va a mandar al menos un "id" de email. ¿Por qué? Porque cuando nos hagan "clic", por ejemplo en esa notificación, a nosotros nos llega el mensaje de "push". Nosotros, acá, solamente lo que podemos estar haciendo es mostrar un "toast". Pero imagínense que aquí debajo uno usa Redux, muestra alguna notificación un poco más sofisticada por la pantalla, y uno tiene que saber seguramente el "id" de eso que acaba de disparar la notificación. Es información adicional iría acá en "data". Nosotros solamente vamos a mostrar un "toast". Entonces, ¿qué es lo que sigue? Bueno, levantar esto con Run o Debug, yo aquí lo levanté con Debug, está corriendo. Aquí tenemos el aplicativo. Acuérdense que el "NgOnInit" es el del "app-component", así que ese "toast" está siempre activo, ese "Init" de Firebase que hicimos. Entonces, ahora, lo próximo que vamos a hacer es disparar una notificación. Para eso, vamos a hacer una notificación, "prueba 06", un cuerpo, "prueba 06 cuerpo", "probar en un dispositivo". Yo aquí lo que hice fue "agregar". Ustedes, acá, se pueden parar, y escriben el "token". El "token" recuerden que, como vimos recién, lo estamos logueando cuando lo recibimos. Ven que acá dice "Firebase push token". Yo a esto lo copié desde "elg" hasta este "fFy" del final. Lo copié todo, lo agregué acá arriba, y uno le da al "más". Yo a eso ya lo hice antes, entonces recuerda el "token" que usamos recientemente. Lo elijo, vamos a mostrar el dispositivo, y enviamos la prueba. Y ahí acaba de llegar, "Notificación prueba 06". Como ven, estos son todos los pasos necesarios para configurar notificaciones. Hay varias configuraciones más, como, por ejemplo, si queremos que sólo nos muestre una notificación aquí arriba. También tenemos un "plugin" hermano de éste que estamos usando ahora, que se llama "NativeScript Local Notifications". Hay una API también para usar; obviamente, como yo recién disparé esta notificación desde aquí, desde esta consola de prueba, este servicio de Firebase tiene una API que desde nuestros "backend" podemos llamar para enviar notificaciones. Obviamente, ahí haremos un "post" con "json" y le pasaremos el título de notificación, el texto de la notificación, y le pasarán, como en este caso, los "tokens" a los cuales les tiene que llegar esta notificación. Otra prueba también es querer segmentar usuarios, mandar una notificación segmentando a todos los usuarios que están usando tal versión de la aplicación. Por ejemplo, todos estos. De esta manera, uno puede configurar también para que esta notificación llegue a todos los usuarios de dicha aplicación. A mí ya me la habían mandado, así que ya me había llegado anteriormente cuando la mandamos a mano.
