¿Qué es Firebase? Firebase es una plataforma de desarrollo de aplicaciones web y móviles (Android o iOS) que proporciona un conjunto de herramientas y servicios basados en la nube ofrecidos por Google . Es un backend como servicio ( BaaS ) que permite a los desarrolladores crear e implementar aplicaciones de manera rápida y eficiente, con funciones integradas para autenticación, bases de datos en tiempo real, almacenamiento en la nube, hospedaje y más. En este tutorial, crearemos una aplicación Java Android simple con Firebase para la autenticación que permite a los usuarios crear cuentas. iniciar sesión y cerrar sesión en las cuentas. También cubriremos cómo usar su teléfono Android como emulador. requisitos previos Antes de comenzar este tutorial, debe conocer los conceptos básicos del desarrollo de aplicaciones de Android. Además, debe tener el siguiente software instalado en su computadora: Estudio de Android: es el IDE oficial para desarrollar aplicaciones de Android. Tiene un gran conjunto de características que incluyen edición de código, diseño de diseño, depuración y un emulador para pruebas. Estudio Android Java Development Kit (JDK): En este tutorial, usaremos para construir nuestra aplicación. Android Studio requiere JDK 8 o superior. Java SDK de Android (kit de desarrollo de software): el SDK de Android es una colección de herramientas y bibliotecas proporcionadas por Google para desarrollar aplicaciones de Android. Administrador de dispositivos virtuales de Android (AVD): AVD Manager es una herramienta proporcionada por Android Studio que le permite crear y administrar dispositivos virtuales para probar sus aplicaciones. Paso 1: crea una nueva aplicación de Android Abra Android Studio y haga clic en "Iniciar un nuevo proyecto de Android Studio" en la pantalla de bienvenida. Si no ve esta opción, puede ir a Archivo>Nuevo>Nuevo proyecto para crear un nuevo proyecto. A continuación, elegirá una plantilla para su proyecto. Android Studio proporciona varias plantillas para diferentes tipos de aplicaciones, como "Actividad vacía", "Actividad básica", "Actividad de pantalla completa" y más. Elija "Actividad vacía" y haga clic en "Siguiente". En el cuadro de diálogo "Actividad vacía", puede establecer configuraciones adicionales para la aplicación. Verá un mensaje para configurar varias configuraciones para su proyecto, como el nombre del proyecto, el nombre del paquete, la ubicación, el SDK mínimo y el idioma. Complete la información requerida; en este caso, el nombre del proyecto es `FirebaseAuthApp" y haga clic en "Finalizar". Android Studio creará un nuevo proyecto con la plantilla elegida y generará los archivos y carpetas necesarios. Puede tardar un par de minutos dependiendo del rendimiento y la capacidad de su sistema. Una vez que se haya creado el proyecto, verá la estructura del proyecto en la pestaña Proyecto, el archivo de diseño activity_main.xml en el editor de diseño y el archivo mainactivity.java en el editor. Haga clic en `Crear` en la barra de herramientas y seleccione `Crear proyecto` para generar el archivo APK que contiene el código y los recursos de su aplicación. NB: Es posible que vea "Reconstruir proyecto" en lugar de "Crear proyecto" si anteriormente activó una compilación o si realizó cambios en su proyecto que requieren una compilación completa. Paso 2: Ejecute y pruebe la aplicación. Para hacer esto, puede conectar un dispositivo Android físico o iniciar un emulador. Para usar un emulador, siga estos pasos: Haga clic en Administrador de dispositivos en la barra de herramientas de Android Studio para abrir el Administrador de dispositivos virtuales de Android (AVD). si ya tiene un dispositivo virtual, haga clic en el botón de reproducción para iniciar el emulador en el AVD. Si no tiene uno, haga clic en `Crear dispositivo` para crear un nuevo emulador o dispositivo virtual. Seleccione su configuración de hardware preferida (tamaño, resolución, densidad, etc.), luego seleccione siguiente. Después de eso, seleccione una imagen del sistema y una versión de Android. Deje que se descargue y luego configure los ajustes del emulador. Cree o seleccione un dispositivo virtual existente: Cuando se crea el dispositivo virtual, haga clic en el botón de reproducción para iniciar el emulador. Una vez que el emulador se esté ejecutando, navegue hasta la barra de herramientas y haga clic en el botón "ejecutar" para ejecutar su proyecto en el emulador. Creará e instalará automáticamente la aplicación en el emulador. Deberías ver `Hello World` en el emulador. Para conectarse a un dispositivo Android físico, siga los siguientes pasos: En su dispositivo Android (teléfono o tableta), abra la configuración y vaya a "Acerca del teléfono". Haga clic en 'Información del software'. Una vez que lo abra, desplácese hacia abajo y busque "Número de compilación". Tóquelo siete veces (el número puede variar según el teléfono; estoy usando un teléfono Samsung) y se activará el modo de desarrollo. En esta etapa, puede solicitar su contraseña; ingrésalo, y listo. Regrese a la página de inicio de configuración y debería ver las opciones de desarrollador. Haga clic en Opciones de desarrollador y luego active la depuración de USB. Conecte su dispositivo a su computadora enchufándolo con un cable USB. Verá un mensaje emergente que le pedirá que permita la depuración de USB desde la computadora. Vuelva a su Android Studio y navegue hasta el administrador de AVD. En la barra de herramientas, debería aparecer su dispositivo; selecciónelo y ejecute la aplicación. La aplicación debería abrirse en su dispositivo Android después de unos minutos y verá la página de inicio `Hello World`. NB: Hay otras formas de conectar su dispositivo físico a su estudio de Android como un emulador, como la depuración inalámbrica, pero en este tutorial usaremos la depuración USB. Paso 3: Cree la interfaz de usuario En este paso, crearemos la interfaz de usuario y el diseño. Navega a la carpeta `app/res`; aquí es donde se llevarán a cabo la mayoría de los cambios en la interfaz de usuario. abra el archivo `app/res/values/colors.xml` y agregue los códigos de color para nuestra aplicación. Agregar colores: <?xml version="1.0" encoding="utf-8"?> <resources> <color name="slateblue"> #6F58C9</color> <color name="black">#FF000000</color> <color name="white"> #FFFFFFFF</color> </resources> clic derecho en la carpeta `res` y haga clic en 'Nuevo', desplácese hacia abajo hasta 'Carpeta' y seleccione 'Carpeta de fuente' en el menú desplegable. O cree una nueva carpeta y asígnele el nombre 'fuente'. Descargar y copia esto en la carpeta de fuentes. Agregar fuente: haga fuente : crearemos y agregaremos el inicio de sesión, los cuadros de diálogo, los cuadros de entrada de formulario, los botones, las imágenes de fondo y los activos vectoriales en las páginas de inicio de sesión y registro. Para hacer esto, siga los pasos a continuación: Crear recursos dibujables descargue y copie esta en la carpeta dibujable. Agregue una imagen de fondo: imagen en la carpeta `res`, navegue hasta la carpeta "dibujable", haga clic con el botón derecho en ella, haga clic en "Nuevo" y seleccione "Archivo de recursos dibujable". Guarde el nombre como "texto de edición personalizado" y cambie el elemento raíz del selector a la forma, luego haga clic en 'Aceptar'. Agregue archivos de recursos dibujables personalizados: Abra el archivo y agregue estas líneas de código: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="2dp" android:color="@color/slateblue"/> <corners android:radius="30dp"/> </shape> Añadir imágenes vectoriales: En la carpeta `res`, navegue hasta la carpeta 'drawable', haga clic con el botón derecho en ella, haga clic en 'Nuevo' y seleccione 'Activo vectorial'. Aquí descargaremos imágenes vectoriales para los formularios. Haga clic en la imagen prediseñada y escriba 'persona' en la barra de búsqueda. Seleccione el arte de la 'persona', haga clic en 'siguiente' y seleccione 'finalizar'. Repita los pasos pero descargue la imagen vectorial para 'bloquear'. Abra el código XML para cada uno de ellos y cambie el tinte a burdeos. 'android:tint="@color/azul pizarra"'. Paso 4: Crear nuevas actividades. Vaya a la carpeta 'app/java/com.example.firebaseauthapp', haga clic derecho sobre ella y seleccione 'Nuevo'. Desplácese hacia abajo y haga clic en "Actividad", luego seleccione "Actividad vacía". Cambie el nombre de la actividad a 'SignUpActivity', marque la casilla que dice 'Launcher Activity' y luego haga clic en 'Finalizar'. Repita los pasos excepto convertirlo en una actividad de inicio, esta vez para 'Actividad de inicio de sesión'. Abra el archivo 'app/manifests/AndroidManifest.xml' y elimine el filtro de intención del bloque Actividad principal, también cambie 'android:exported="true"' a 'android:exported="false"'. Debe tener un aspecto como este: <activity android:name=".LoginActivity" android:exported="false" /> <activity android:name=".SignUpActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity" android:exported="false"> </activity> a so 5: Edite el P diseño de la actividad. Abra el archivo 'app/res/layout/activity_main.xml'. Agrega el siguiente código: <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/wallbg" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textColor="@color/slateblue" android:textSize="26sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout> Abra el archivo 'app/res/layout/activity_sign_up.xml'. Agrega el siguiente código: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".SignUpActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Sign Up" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Sign Up" android:id="@+id/signup_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/loginRedirectText" android:text="Already a user. Login" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout> Vaya a app/res/layout/activity_login.xml. Agrega el siguiente código: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".LoginActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Login" android:id="@+id/login_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/signUpRedirectText" android:text="Not yet registered? Sign Up" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout> Paso 6: Configurar la autenticación de Firebase Navegue a la barra de menú y haga clic en 'Herramientas', luego seleccione Firebase. Una vez que hagas eso, verás una barra emergente lateral. Desplácese y haga clic en y, a continuación, seleccione ' '. Recuerde, este es un tutorial de Java Android, así que asegúrese de que la opción que está seleccionando no use KOTLIN. Autenticación Autenticación mediante un sistema de autenticación personalizado Conéctese a Firebase haciendo clic en el botón. Te redirigirá a tu consola Firebase. Si no ha creado una cuenta, asegúrese de crear una. Es probable que haya iniciado sesión; si no, entonces inicie sesión. Cuando cree un nuevo proyecto, sugerirá un nombre basado en el nombre del proyecto en Android Studio. Puede optar por conservarlo o cambiarle el nombre. El mío es 'FirebaseAuthApp'. En el siguiente mensaje, deshabilite Google Analytics para el proyecto y luego cree el proyecto. Una vez que se haya creado el proyecto, verá un mensaje que le pedirá que conecte Android Studio a Firebase. Seleccione 'Aceptar' y listo. Regrese a la consola de Firebase y abra su proyecto recién creado. Haga clic en 'Crear' y luego seleccione 'Autenticación'. Haga clic en el botón 'Comenzar'. Agregue un método de inicio de sesión seleccionando 'Correo electrónico/Contraseña' y habilitándolo. Esto creará su sistema de autenticación personalizado utilizando su método preferido, en este caso, correo electrónico o contraseña. Vuelve a Android Studio. Debería ver un mensaje emergente que dice que su aplicación, com.example.firebaseauthapp, ahora está conectada a su proyecto de Firebase. Agregue el SDK de autenticación de Firebase a su aplicación haciendo clic en el botón en la barra de herramientas del asistente y seleccionando 'aceptar cambios'. Una vez hecho esto, verá un mensaje en la barra de herramientas del asistente que indica que las dependencias se configuraron correctamente. Cierre la barra de herramientas y abra Gradle. Haga clic en el icono de Gradle en la esquina superior izquierda de la barra de herramientas de Gradle. Escriba 'signingRedport' en la barra de búsqueda y presione enter. Una vez que los resultados de Build Analyzer estén disponibles, copie el hash SHA1. Vuelva a la consola de Firebase y haga clic en la descripción general del proyecto, luego seleccione Configuración del proyecto. Nota: si tiene más de una aplicación en el proyecto, vaya a la descripción general del proyecto, luego haga clic en 'aplicación' y seleccione la aplicación que desea autenticar. Navegue a la base del proyecto y agregue una huella digital. Pegue el hash SHA1 y luego seleccione Guardar". Recibirá un mensaje que dice 'Se agregaron nuevas huellas digitales de certificado'. Paso 7: Agregar autenticación al proyecto. Abra el archivo 'com/example/firebaseauthapp/SignUpActivity.java'. Agregue las importaciones necesarias, declare la instancia de FirebaseAuth e inicialícela en el método "onCreate" de la actividad de registro. Debe tener un aspecto como este: package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnCompleteListener; import com.google.android.gms.tasks.Task; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class SignUpActivity extends AppCompatActivity { // Declare any other necessary variables. private FirebaseAuth auth; private EditText signupEmail, signupPassword; private Button signupButton; private TextView loginRedirectText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sign_up); //Initialize the FirebaseAuth instance in the onCreate() auth = FirebaseAuth.getInstance(); signupEmail = findViewById(R.id.signup_email); signupPassword = findViewById(R.id.signup_password); signupButton = findViewById(R.id.signup_button); loginRedirectText = findViewById(R.id.loginRedirectText); signupButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String user = signupEmail.getText().toString().trim(); String pass = signupPassword.getText().toString().trim(); if (user.isEmpty()){ signupEmail.setError("Email cannot be empty"); } if(pass.isEmpty()){ signupPassword.setError("Password cannot be empty"); } else{ auth.createUserWithEmailAndPassword(user, pass).addOnCompleteListener(new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { if(task.isSuccessful()){ Toast.makeText(SignUpActivity.this, "Signup Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } else{ Toast.makeText(SignUpActivity.this, "Signup Failed" + task.getException().getMessage(), Toast.LENGTH_SHORT).show(); } } }); } } }); loginRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } }); } } Abra el archivo 'com/example/firebaseauthapp/LoginActivity.java'. Agrega el siguiente código: package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.util.Patterns; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnFailureListener; import com.google.android.gms.tasks.OnSuccessListener; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class LoginActivity extends AppCompatActivity { private FirebaseAuth auth; private EditText loginEmail, loginPassword; private TextView signupRedirectText; private Button loginButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); auth = FirebaseAuth.getInstance(); loginEmail = findViewById(R.id.login_email); loginPassword = findViewById(R.id.login_password); loginButton = findViewById(R.id.login_button); signupRedirectText = findViewById(R.id.signupRedirectText); loginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String email = loginEmail.getText().toString(); String pass = loginPassword.getText().toString(); if(!email.isEmpty() && Patterns.EMAIL_ADDRESS.matcher(email).matches()) { if (!pass.isEmpty()) { auth.signInWithEmailAndPassword(email, pass) .addOnSuccessListener(new OnSuccessListener<AuthResult>() { @Override public void onSuccess(AuthResult authResult) { Toast.makeText(LoginActivity.this, "Login Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(LoginActivity.this, MainActivity.class )); finish(); } }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception e) { Toast.makeText(LoginActivity.this, "Login Failed", Toast.LENGTH_SHORT).show(); } }); } else { loginPassword.setError("Password cannot be empty"); } } else if (email.isEmpty()) { loginEmail.setError("Email cannot be empty"); } else { loginEmail.setError("Please enter a valid email"); } } }); signupRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(LoginActivity.this, SignUpActivity.class)); } }); } } Ejecute la aplicación e inicie el emulador. Debería ver una aplicación en pleno funcionamiento. Vaya a la consola de Firebase y haga clic en 'Autenticación. En la pestaña 'usuarios', verá la lista de usuarios recién registrados. Al seguir estos pasos, integró Firebase con éxito y configuró la autenticación de usuario para su aplicación. Conclusión En este tutorial, usamos Firebase para agregar autenticación de usuario a nuestra aplicación Android Java. Desarrollamos una aplicación donde los usuarios pueden crear cuentas, registrarse y cerrar sesión. También cubrimos cómo usar un teléfono Android como emulador. Para ampliar su conocimiento de Firebase en el desarrollo de aplicaciones de Android, consulte la documentación de Android y Firebase.
