Notificaciones Push con Ionic

Muchos de nosotros nos gustaria elaborar proyectos con mayor facilidad, sin necesidad de ver un video y solo leer paso a paso.

Para poder realizar la siguiente actividad debemos tener instalado ionic en nuestra computadora y los siguientes programas Node JS y npm, para proceder realizar las instalaciones que necesitemos para nuestro proyecto. Para iniciar con el proyecto necesitaremos crear una carpeta en donde guardaremos nuestro proyecto que crearemos o en la carpeta que deseen.

Utilizaremos el editor de texto que deseemos, en mi caso voy a utilizar Visual Studio Code, abrimos nuestro editor de texto y ahi mismo abrimos nuestra terminal para crear el proyecto.

Buscamos la carpeta en la cual vamos a crear el proyecto, ya que tengamos la carpeta localizada; crearemos nuestro proyecto y sera con el este comando para hacer un proyecto en blanco. ionic start “nombreDelProyecto” blank
como podemos visualizar en la siguiente imagen.

Después de crear el proyecto nos dirigimos a nuestro proyecto.Para poder hacer la conexión y configuración y vamos a tomar en cuenta https://codigofacilito.com/videos/configurar-capacitor-con-ionicde esta pagina para utilizar lo nuevo.

Lo primero que vamos hacer es integrar el capacitor con ionic. Asi que vamos a la terminal donde esta nuestro proyecto y colocamos el siguiente comando npm run build para compilar nuestra aplicación.

En la cual lo va a colocar en una carpeta que se llama www, en la cual la necesitaremos para configurar capacitor.

Seguido de eso vamos a insertar el siguiente comando npm install --save @capacitor/core @capacitor/cli instalaremos estas dos depependencias y lo haremos dentro de nuestro proyecto.

Después de la instalación vamos a verificar en nuestro archivo de package.json para ver todas las dependencias y podemos observar que ahí están. Volveremos a ejecutar el comando npm run build para hacer actualizaciones.

Ahora ejecutaremos el siguiente comando que es como el hijo de npm, en esta ocasión vamos a ejecutar el comando npx el siguiente comando, con el AppId que es como el identificar único de tu aplicación. Se recomienda el inverso de tu dominio y un identificador unico de tu aplicacion. sie en dado caso no tienes un dominio, puedes crearte una.

• npx cap init nombreDeLaAplicacion dominioAplicacion.identificadorUnico

En la imagen anterior podemos observar un ejemplo. y para aseguras que relamnte hizo la instalacion nos vamos al archivo en nuestro proyecto que tiene por nombre capacitor.confing.json en donde visualizaremos lo que creamos en el comando.

Volveremos a ejecutar el comando npm run build para hacer actualizaciones.

Ahora lo que vamos hacer es comfigurar android y firebise y para eso vamos agregar android a nuestro programa y va hacer con el siguiente comando npx cap add android, en la cual va a crear una carpeta que se llama android y a qui la podemos visualizar:

Después de agregar android a nuestro proyecto vamos abrirlo con el siguiente comando npx cap open android pero para eso necesitaremos que tengamos Android Studio instalado.

Cuando ejecutemos el comando automaticamnete se abrirá Android Studio y podremos observar en android que estara la carpeta que creamos y es desde android estudio que podras ejecutar tu aplicación:

Ahora lo que vamos hacer es abrir Firebase en donde nos ayudara a guardar los tokens para enviar notificaciones Push con la base de datos Cloud Firestore y por otro lado enviar notificaciones de Cloud Messaging y poo último vamos a utilizar Cloud Funtions para ejecutar codigo del Back-end sin la necesidad de que nosotros programemos o configuremos el servidor.

Para poder iniciar en Firebase tendremos que ir a la consola, en donde tendremos que iniciar sesion, despuesde le damos en añadir un nuevo proyecto. Vamos a colocarle un nombre a nuetro proyecto, en este caso yo le ponde IonicPush, aceptamos los terminos y condiciones y le damos en aceptar y se creara nuestro proyecto; ya dentro del proyecto creado vamos a darle click en donde esta el ícono de andoid.

Y ya estando ahi pondremos los datos que pusimos al momento de crear la app de android.

En el nombre Nombre del paquete de Android vamos a colocar el nombre de la AppId, en Apodo de la aplicacción vamos a colocar el appName y le daremos registrar.

Descargaremos el .Json que va a conectar nuestra aplicación con la consola de Firebase

A continuación lo que vamos a hacer es copiar el archivo que acabamos de descargar a nuestro proyecto donde tenemeos, que será en la carpeta de android y dentro de ella hay una carpta que se llama app ahi vamos a colocar el archivo. Como se muestra en la imagen:

Ahora lo que vamos hacer es ejecuar nuestra aplicacion de android para ver si marcha todo bien.Si en dado caso tenemo errores con la iniciacion o al ejecutar nuestro proyecto de android recurrir al articulo Deploy de App con Ionic y Android. Cuando abrimos nuestro proyecto nos debe pedir una actualizazacion. y darle aceptar.

Ahoralo que vamos a realizar es empezar a editar. En este caso nos vamos a ir en donde se encuentra nuestro proyecto que es Visual Studio Basic en donde haremos los cambios que requieras.

por cada modificacion que realices en el proyecto tienes que ejecutar el siguiente comando npx cap copy en lo cual el capacitor copiara cada vez que modifiques algo. Despues nos vamos de nuevo a nuetro proyecto android y volvemos a ejecutarlo para que nos muestre los cambios. pero antes haremos nustra actualizacion que es con el comando npm run build y luego haremos el npx cap copy. Pero para que no estemos haciendo eso de los comandos a cada rato que modifiquemos algo; utilizaremos el sImguriguiente comando ionic cap run android -l lo que hara es actualizar automaticamnete cada vez que realicemos alguna modificacion. Tambien podremos visualizar que en nuestro archivo de capacitor.config.json nos agrego una dirección url, como podemos observar en la imagen.

SOLICITAR PERMISOS
Vamos a empezar a trabajar en nuestro proyecto, es este caso vamos necesitar los archivos de home.page.html y home.page.ts para hacer las modificaciones que sean necesarias.
En mi caso para dar los permisos coloque las siguientes lineas de codigo.

En la imagen se muestra como debe quedar el codigo para obtener los permisos. Después de eso en nuestraapp de android nos va a envriar un token en la cual vamos a copiar y lo vamos a guardar ya que más adelante lo vamos a utilizar. Enviar nuestra primera notificación

Ahora lo que vamos hacer es irnos a nuestro Firebase y en la seccion de Crecimiento seleccionaremos la opcion de Cloud Messaging y en la seccion vamos a irnos en el botón de enviar mensaje. Nos aparecera un formulario en la cual la vamos a rellenar; pero antes tenemos que cerrar nustra aplicacion para que se vea reflrejado la notificación. Y se realiza las modificaciones necesarias. y le damos publicar, En la cual se verá reflejado y si nos aparece en nuestr app quiere decir que ya tenemos los permisos. Ahora lo que vamos hacer es configurar para que envie en varios dispositivos. Pero para no andar copiando todos los token.

Integrar angularFire

Vamos a crear nuestra base de datos para que almacene los tokens. Así que nos vamos a la cosolo de firebise seleccionamos la opcion de Database y crearemos nuestra base de datos. Seleccionamos en modo prueba y le damos habilitar y esto nos va a generar la base.

Vamos a configurar AngularFire, para eso vamos a instalar dentro de nuestro proyecto de Visual Studio el siguinete comando: npm install @angular/fire firebase --save después de que ya se haya realizado la nstalación para poder comunicarnos con nuestra aplicacion de la parte web, vamos a crear una aplicación web, la cual nos dara una llave

y la colocaremos la carpeta que se llama environments y se encuentra el archivo que se llama environment, como podemos ver en la siguiente imagen:

Despuéspara seguir con el registro de nuestra aplicación, vamos a nuestro archivo app.module.ts. lo que haremos en nuestro archivo es que vamos a integrar firbase, asi que vamos a importar las librerías en el archivo home.module.ts

Si en dado caso nos encontramos con algun error, hay que ver si importamos todas las librerías requeridas.

Guardar tokens en Firestore

Iremos al archivo home.page.ts y vamos agregar un metodo lo puedes hhamr como quieras, ese metodo nos va ayudar a guardar los tokens de todos los dispositvos que deseemos usar. si en dado casono le entiendes, te recomiendo que veas curos profesionales de Angular, para que te sea mas facil realizarlo. Y así es como va a quedar
para ver si realmente funciono, hay que ir en nuestra base de datos y visualizaremos que tenemos un token registrado.

Consultar Tokens

Para poder soncultar nuestro tokens o que aparezcan dentro de una lista colocaremos las siguientes líneas de codigo como se muestra en nuestra imágen:

Después de realizar eso, nos vamos a nustro archivo de home.page.html para poder llamar nuestra lista de tokens.

vamos a ver a nuestra app y visualizaremos que ahi esta nuestro token. ya la visualizacion de como quieran verlo ya depende de ustedes.

colocaremos un boton en la cual nos enviara la notificacion al dispositivo que le pertenezca a ese token.

Configurar Cloud Funtions de Firebase

Vamos a crear nuestro servidor.Pero para eso vamos a crear una nueva carpeta en la cual debe estar fuera de nustro poryecto de Ionic. ya que estamos fuera del proyecto de Ionic de nuestra terminal lo primero que vamos a realizar es instalar firebase de manera global, y para eso ejecutaremos el siguinete comando npm install -g firebase-tools que nos permitirá configurar proyectos desde nuestra computadora. Ya que se instalo es iniciar sesion desde la terminal con el comando firebase login y colocamos los datos que se nos pide. Después de eso automaticamente nos debe abrir nuestro explorador si en dado caso no lo hace, copiamos el link y lo pegamos en nuestro explorador en la cual nos aparecera la sesion de inicio de la cuenta. La seleccionamos y le damos permitir, en donde nos mostrara el siguiente mensaje de que fue exitoso

creamos una nueva carpeta que llamaremos notifications.function ya sea por comado o desde nuestro explorador de archivos. Ahora nos dirigimos a nuestra carpeta que acabamos de crear dede nuestra terminal. Ya estando el la direccion de nuestra carpeta en la cual ejecutaremos el siguiente comado firebase init functions y ese va inicar un asistente que va a configurar el proyecto. en la cual debemos seleccionar con que proyecto tenemos que trabajar
y despues nos pregunta que tipo de lenguaje vamos a utilizar y vamos a seleccionar TypeScript despues decimos que si a lo demas que si para que instale las dependencias y listo.

Despues abrimos nuestra carpeta en la misma como podemos ver aquí
asi en el mismo nivel que de nuestro proyecto de Ionic.

Enviar Notificaciones con push con Cloud Messaging de Firebase

Para crear nustro servidor va hacer mucho mas fácil, asi que nos vamos a la carpeta que creamos de notifications y el archico index.ts que se encuentra en la carpeta src se van a importar las librerias se cors y express y empezaremos hacer las moficaciones correspondientes.

De esta manera podemos visualizar las importaciones que realizamos, como la inicializacion de nuestro proyecto. Para eso vamos a enviar nuestra primera notificacion configurando nuestro archivo en la cual vamos a enviar token, en la cual nos va a proporcionar el mensaje.

En donde utilizaresmos funciones acincronas. Cuando las promesas se terminen de realizar lo va a guardar y enviare el mensaje.Y lo último que vamos hacer es retornar esa respuesta y listo. En caso de que algo salga mal podemos encerrar nuestra funcion dentro de un try/catch, para que nos pueda mostrar el error que nos esta acosionando. Ya quedo la configuracion para un dispositivo en especifico. Vamos a exportar un identificador, en la cual vamos a pasarle un prametro en donde colocaremos nuestra funcion de app.

Y ahora ya que tenemos todo configurado, vamos hacer nuestro deploy para que sea subido a Firebase. Abrímos nuestra terminal y colocamos el siguiente comado firebase deploy --only functions en la cual eso nos ayudara a subir las funciones hacia firebase para que ya las puedas utilizar. Cuando termine de ejecutarse nos dará una url en donde se encuentra nuestras funciones.Para ver si funciona las peticiones, abrimos Postman para hacer las pruebas necesarias. En este caso vamos a utilizar la petición Post por que asi lo creamos en nuestro archivo. Pegamos la url. Vamos a nuestra base de datos para copiar el token. Y vamos a pegarlo dentro del Postman y nos va a quedar de la siguiente manera:

Y damos en enviar. En la cual en nuestra app nos llegara el mensaje.

Envíar notificaciones a Cloud Functions

Ahora nos vamos a ir a nuestro proyecto de Ionic y lo que queremos hacer es una petición a la red que vaya a la misma dirección que pusimos en Postman. Así que vamos a copiar nuestra dirección, nos vamos a nuestro archivo environments y vamos a agregar nuesto url

Las petciones de hacen a través desde Angular aun Back-end a través de algo que se llama del modulo http, el modulo http no viene precinfigurado hay que configurarlo, entonces vamos abrir el archivo app.module.ts y vamos a importar HttpModule que debe ser importado de @angular/http y HttpClientModule de @angular/comon/http; despues los vamos agregar en los imports. Ahora vamos a ver en donde vamos a utilizar las importaciones y lo vamos a utilizar en un servicio. Nos vamos a nuestra terminal donde tenemos nuestro proyecto de Ionic y vamos a utilizar un generador que se ejecuta con el comado ionic g service nombreDeSevicio es donde vamos a envíar las peticiones y nos envien las notificaciones push. Los servicios. Así que vamos a crear una metodo donde retornaremos nuestro sevicio y poder comunicarnos con nuestro Back-end. Vamos a configurar el archivo en home.page.html y home.page.ts en la cual nos va a quedar asi, en donde editaremos la peticion de nuestro botón de envíar

y también vamos agregar datos en el archivo de home.page.ts para hacer las conexiones. ASsi que vamos agregar nuestro método, en este caso el nombre que quieran colocarle.

Para poder llamar nuestra clase de nuestro servicio Vamos a ejecutar nuestro coamdo para actualizar nuestro archivo ionic cap run android -l vamos a nuestra aplicaciónde android, ejecutamos, pero no se visualizara la notificación así que vamos a ir a la página de firbase y en la opcion de functions y en la pestaña de register, ahi la vilisuaremos.

Leer notificaciones recibidas en la app
Ahora lo que vamos hacer es enviar notificaciones miestras la app esta abierta.
Para eso solo tenemos que agregar un nuevo Listener como la que tenemos anteriormente. pero esta vez vamos a pasar como parametros la clase que es notification: PushNotification que importaremos de capaticor/core. el codigo quedara de la siguinte manera