¿Cómo crear una aplicación de inicio de sesión y registro en MIT App Inventor usando Firebase?

Requisito previo:

Hola geeks, hoy vamos a hacer un inicio de sesión de nivel muy básico y registraremos la aplicación usando MIT App Inventor y aprenderemos cómo podemos conectar MIT App Inventor a Firebase y almacenar los datos que hemos recopilado del usuario. Y utilizando esos datos podemos detectar que el nombre de usuario y la contraseña del usuario existen en nuestra base de datos o no.

Terminologías básicas utilizadas

• MIT App Inventor: MIT App Inventor es un entorno de programación visual e intuitivo que permite a todos, incluso a los niños, crear aplicaciones completamente funcionales para teléfonos inteligentes y tabletas.  
• Firebase: Firebase es una plataforma de código abierto (base de datos en tiempo real) desarrollada por Google para que los desarrolladores puedan usarla para almacenar los datos de las aplicaciones e implementar su trabajo fácilmente.

Entonces, después de conocer estas terminologías básicas, primero veremos cómo agregar un proyecto en firebase para que podamos recopilar datos de nuestra aplicación en ese proyecto.

Para agregar un proyecto en Firebase

Paso 1: abre el portal https://firebase.google.com/ y crea o abre tu cuenta.

Paso 2: después de crear una cuenta, haga clic en ir a la consola y aparecerá una pantalla de este tipo.

Paso 3: Haga clic en Agregar proyecto> asigne un nombre a su proyecto> haga clic en continuar> haga clic en crear proyecto. 

Paso 4: aparecerá dicha pantalla, así que seleccione la base de datos en tiempo real de la barra lateral

Paso 5: Después de seleccionar una base de datos en tiempo real, aparecerá una nueva pantalla. Haga clic en crear base de datos > siguiente > habilitar .

Paso 6: aparecerán diferentes opciones en la pantalla, así que haga clic en las reglas para que podamos realizar cambios en ellas según nuestros requisitos. Después de eso, use el siguiente código.

{
 "rules": 
 {
   ".read": true,
   ".write": true
 }
}

Después de usar el siguiente código, haga clic en publicar. Y hemos terminado con nuestro trabajo en firebase.

Trabajando en MIT App Inventor

Paso 1: Abra el portal http://ai2.appinventor.mit.edu/ y cree un nuevo proyecto. Nómbrelo de acuerdo a su conveniencia.

Paso 2: mientras diseña su aplicación, siga los siguientes pasos.

Paso 2.1: Seleccione Disposición vertical de la paleta y agregue otros componentes como se muestra a continuación.

Paso 2.2: Ahora ve a las propiedades de VerticalArrangement1 y desmarca la propiedad visible desde él. Y luego la pantalla se quedará en blanco.

Paso 2.3: arrastre un nuevo arreglo vertical desde la paleta y diséñelo como se muestra a continuación.

Paso 2.4: Ahora vaya a las propiedades de VerticalArrangement2 y desmarque la propiedad visible > vaya a las propiedades de VerticalArrangement1 y marque la propiedad visible.

Nota : no olvide agregar Firebase desde la paleta a VerticalArrangement1 ya que tenemos que usar firebase para almacenar datos desde aquí.

Paso 3: Vaya a bloques, donde tenemos que escribir la lógica para nuestra aplicación. Utilice la lógica como se muestra a continuación.

Ahora que también hemos terminado con la parte de diseño y bloques de MIT App Inventor, ahora veamos cómo podemos conectar Firebase (nuestra base de datos en tiempo real) a MIT App Inventor. Conexión de Firebase con MIT App Inventor.

Paso 1: vaya a su base de datos en tiempo real de Firebase y copie el enlace como se muestra a continuación

Paso 2: Seleccione FirebaseDB1 en MIT App inventor y en sus propiedades pegue el enlace que copiamos arriba.

¡Felicidades! Ha realizado con éxito la aplicación de inicio de sesión y registro utilizando Firebase. Y aquí está el resultado de nuestra aplicación.

Producción:

Cuando el usuario hace clic en registrarse, sus datos se envían a Firebase, donde podemos verificar que mientras el usuario inicia sesión, los datos existen en nuestra base de datos o no, si existen datos, el inicio de sesión es exitoso; de lo contrario, se muestra el mensaje «Nombre de usuario o contraseña incorrectos». Aquí puede ver que cuando el usuario hizo clic en el botón de registro, los datos llegaron a nuestra base de datos en tiempo real (firebase).

Por lo tanto, creamos una aplicación que usa firebase para la actualización de datos en tiempo real y el usuario puede iniciar sesión fácilmente a través de ella.