¿Cómo agregar notificaciones push a tu proyecto de FlutterFlow?

Paso 1: Cree su proyecto de FlutterFlow

Antes de agregar notificaciones push a su proyecto, debe tener un proyecto existente en FlutterFlow. Para crear uno, visite el sitio web de FlutterFlow, inicie sesión con su cuenta, vaya al tablero y haga clic en "Nuevo proyecto". Nombre su proyecto y elija una plantilla si es necesario, o comience desde cero.

Paso 2: Navegue a la configuración del proyecto

Una vez que haya creado su aplicación, navegue a la sección del proyecto. En la barra lateral izquierda, haga clic en el último ícono llamado "Configuración", lo redireccionará a la página de configuración del proyecto.

Paso 3: Habilitar notificaciones push

Desplácese hasta la sección "Notificaciones push". Aquí verá un botón de alternar para habilitar o deshabilitar las notificaciones para su proyecto. Una vez que lo haya habilitado, aparecerán dos campos de entrada, solicitando la clave de API del servidor y el ID del remitente.

Paso 4: Obtenga la clave de API del servidor y el ID del remitente desde Firebase

Para obtener estas claves, debe configurar un proyecto en Firebase:

• Vaya a la consola de Firebase y cree un nuevo proyecto. Si ya tiene un proyecto para su aplicación, puede usarlo.
• Después de que se haya creado su proyecto, haga clic en la configuración del proyecto (el ícono de engranaje junto a "Descripción general del proyecto").
• Vaya a la pestaña "Mensajería en la nube", aquí encontrará su clave del servidor y el ID del remitente.

Paso 5: Agregar clave de API del servidor e ID del remitente a FlutterFlow

Vuelva a su proyecto de FlutterFlow y pegue la clave del servidor y el ID del remitente en los campos correspondientes. Después de esto, guárdelo.

Paso 6: Descargar el archivo google-services.json

• Vuelva a su Consola de Firebase y haga clic en el ícono de Android en la descripción general de su proyecto (para agregar una aplicación de Android a su proyecto de Firebase).
• Registre su aplicación proporcionando el nombre del paquete de la aplicación. El nombre del paquete de su aplicación es el ID de la aplicación con la que su aplicación se identifica de manera única. Puede encontrar el nombre de su paquete en el archivo AndroidManifest.xml de su proyecto.
• Descargue el archivo google-services.json proporcionado por Firebase.

Paso 7: Agregar el archivo google-services.json a FlutterFlow

Regrese a su proyecto de FlutterFlow:

• Navegue a la configuración del proyecto.
• Desplácese hasta la sección de Configuración de Firebase.
• Haga clic en el botón "Subir archivo" y seleccione el archivo google-services.json que acaba de descargar de Firebase.

Después de esto, guárdelo, y ya está listo.

Paso 8: Enviar notificación push de prueba

Para probar si sus notificaciones están funcionando como se esperaba, puede enviar una notificación de prueba desde FlutterFlow:

• Vuelva a su proyecto.
• En la barra lateral izquierda, haga clic en el ícono de la campana para abrir la página de "Notificaciones push".
• Haga clic en "Nueva notificación" y complete los detalles para su notificación de prueba.
• Haga clic en "Enviar notificación de prueba" y revise su dispositivo móvil para la notificación.

Paso 9: Configuración de notificaciones dentro de su aplicación

Recuerde, también necesita configurar partes específicas de su aplicación para manejar estas notificaciones push. Este paso implica programar en su aplicación Flutter. A continuación se muestra un ejemplo básico de cómo configurar un controlador para cuando un usuario toca una notificación:

• Use el paquete firebase_messaging de Flutter para configurar el controlador.

FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  print('¡Mensaje clickeado!');
});

Esto imprimirá "¡Mensaje clickeado!" en la consola cada vez que un usuario toque una notificación que los devuelva a la aplicación.

¡Ahora ha configurado las notificaciones push para su proyecto FlutterFlow!