No-code

Cómo conectar Firebase y Flutterflow en 2024

Descubre cómo integrar Firebase en Flutterflow en 2024 paso a paso y de forma sencilla.

La integración de Firebase en FlutterFlow proporciona una forma sencilla de mejorar tus aplicaciones con potentes funciones como autenticación de usuarios, almacenamiento en la nube, bases de datos en tiempo real y mucho más.

La integración de Firebase en FlutterFlow proporciona una forma sencilla de mejorar tus aplicaciones con potentes funciones como autenticación de usuarios, almacenamiento en la nube, bases de datos en tiempo real y mucho más. Si es la primera vez que intentas conectar Firebase con Flutterflow, puede ser un proceso un poco tedioso. Es por ello que en este artículo te explicamos todo lo que debes hacer para conectar Firebase y Flutterflow en 2024.

Crear cuenta en Firebase

Paso 1: Iniciar proyecto en Firebase

Lo primero que debemos hacer es crear una cuenta en firebase.com dándole a “comienza ahora” y posteriormente crearemos un proyecto. A continuación le pondremos un nombre a nuestro proyecto, le damos a siguiente, habilitamos o deshabilitamos Google Analytics (nosotros lo deshabilitaremos) y le daremos a “crear proyecto”.

Paso 2: Configurar permisos y roles

Cuando cargue la barrita de progreso le daremos a continuar y ya estaremos en nuestro proyecto. Iremos a ajustes y entraremos dentro de “usuarios y permisos”.

Una vez dentro agregaremos un nuevo miembro cuyo correo será firebase@flutterflow.io y tendrá la función de editor, esta acción permitirá a Firebase poder gestionar nuestro proyecto.

Sin embargo, necesitaremos darle a Firebase 2 roles extras, para ello iremos a “configuración avanzada de permisos”.

Una vez dentro editaremos la cuenta principal

Le daremos a “agregar otro rol” y seleccionaremos el rol “administrador de Cloud Functions” (buscándolo en el buscador).

Una vez agregado, volveremos a darle a “agregar otro rol” y esta vez seleccionaremos el rol “Usuario de cuenta de servicio” (buscándolo en el buscador nuevamente). Finalmente le daremos a guardar y ya tendremos todo lo necesario configurado.

Configurar Firestore Database

Paso 3: Crear y configurar la base de datos

Ahora volveremos a nuestro proyecto de Firebase y ahora lo que tendremos que hacer es crear nuestra base de datos, para en “compilación” iremos a Firestore Database.

Una vez dentro de Firestore Database le daremos a “crear base de datos”, iniciaremos en modo de producción, le daremos a “siguiente” y en “ubicación de Cloud Firestore” si estás en Europa deberás cambiarlo a “eur3 (Europe)” (si estás en Latam puedes dejarlo tal y como está) y le daremos a “habilitar”.

Conectar Firebase con FlutterFlow

Paso 4: Configuración en FlutterFlow

Ahora ya hemos creado nuestra base dentro de Firebase.

Continuaremos yendo a ajustes, a “configuración del proyecto” y…

… a continuación copiaremos la “ID del proyecto” (lo que necesitaremos para crear nuestro proyecto) y nos iremos a Flutterflow.

Dentro de nuestro proyecto en Flutterflow iremos a Settings (ajustes)

En settings, le daremos a Firebase y pegaremos el Project ID

Una vez pegado, le daremos a “connect” y posteriormente a “Auto generate config files” y “generate files”.

Una vez listo, nos quedará por configurar el Firebase Storage, para ello iremos a Firebase y entraremos dentro de Storage.

Dentro del Storage le daremos a “comenzar” en “iniciar en modo de producción”, le daremos a siguiente y le daremos a “listo”.

Ahora volveremos a Flutterflow, le daremos a “deploy” y ya estará listo.

Ahora ya tendremos configurada nuestra conexión de Firebase a Flutterflow correctamente.

Esperamos que este tutorial te haya servido de ayuda y hayas conseguido conectar Firebase a Flutterflow satisfactoriamente. Si prefieres ver el tutorial en video, aquí tienes nuestro tutorial subido a youtube.

Si quieres aprender Flutterflow desde 0 creando tu primera app, aquí tienes un curso completamente gratuito.