En esta sección, aprenderás cómo configurar Firebase para tu proyecto. Este proceso incluye la creación de un proyecto en la consola de Firebase, la integración de Firebase en tu aplicación y la configuración de los servicios que planeas utilizar.

  1. Creación de un Proyecto en Firebase

Paso 1: Acceder a la Consola de Firebase

  1. Abre tu navegador web y ve a la Consola de Firebase.
  2. Inicia sesión con tu cuenta de Google.

Paso 2: Crear un Nuevo Proyecto

  1. Haz clic en el botón "Agregar proyecto".
  2. Ingresa un nombre para tu proyecto y haz clic en "Continuar".
  3. (Opcional) Habilita Google Analytics para tu proyecto y selecciona una cuenta de Google Analytics.
  4. Haz clic en "Crear proyecto" y espera a que Firebase configure tu proyecto.

  1. Integración de Firebase en tu Aplicación

Paso 1: Agregar Firebase a tu Aplicación

  1. En la consola de Firebase, selecciona tu proyecto.
  2. Haz clic en el ícono "Agregar aplicación" (puede ser Android, iOS o Web).

Para una Aplicación Web:

  1. Selecciona el ícono de Web.

  2. Ingresa un nombre para tu aplicación web y haz clic en "Registrar aplicación".

  3. Copia el fragmento de código de configuración que se te proporciona. Este código se verá algo así:

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
    
    <!-- TODO: Add SDKs for Firebase products that you want to use
         https://firebase.google.com/docs/web/setup#available-libraries -->
    
    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_PROJECT_ID.appspot.com",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
        appId: "YOUR_APP_ID"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
    
  4. Pega este código en el archivo HTML de tu aplicación, justo antes de la etiqueta </body>.

Para una Aplicación Android:

  1. Selecciona el ícono de Android.

  2. Ingresa el nombre del paquete de tu aplicación y haz clic en "Registrar aplicación".

  3. Descarga el archivo google-services.json y colócalo en el directorio app de tu proyecto Android.

  4. Agrega las siguientes líneas a tu archivo build.gradle (nivel de proyecto):

    buildscript {
        dependencies {
            // Add this line
            classpath 'com.google.gms:google-services:4.3.5'
        }
    }
    
  5. Luego, agrega esta línea al archivo build.gradle (nivel de aplicación):

    apply plugin: 'com.google.gms.google-services'
    

Para una Aplicación iOS:

  1. Selecciona el ícono de iOS.

  2. Ingresa el ID del paquete de tu aplicación y haz clic en "Registrar aplicación".

  3. Descarga el archivo GoogleService-Info.plist y agrégalo a tu proyecto Xcode.

  4. Abre el archivo AppDelegate.swift y agrega la inicialización de Firebase:

    import Firebase
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate {
    
        func application(_ application: UIApplication,
                         didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            FirebaseApp.configure()
            return true
        }
    }
    

  1. Configuración de Servicios de Firebase

Habilitar Servicios en la Consola de Firebase

  1. En la consola de Firebase, navega a la sección "Desarrollar" en el menú de la izquierda.
  2. Selecciona el servicio que deseas habilitar (por ejemplo, Authentication, Firestore, Storage, etc.).
  3. Sigue las instrucciones específicas para configurar cada servicio.

Ejemplo: Habilitar Autenticación por Correo Electrónico y Contraseña

  1. En la consola de Firebase, ve a Authentication.
  2. Haz clic en la pestaña "Método de inicio de sesión".
  3. Habilita el proveedor de Correo electrónico/Contraseña y haz clic en "Guardar".

Ejercicio Práctico

Ejercicio 1: Configuración de un Proyecto Firebase para una Aplicación Web

  1. Crea un nuevo proyecto en la consola de Firebase.
  2. Agrega una aplicación web a tu proyecto.
  3. Copia el código de configuración y pégalo en un archivo HTML.
  4. Habilita la autenticación por correo electrónico y contraseña en la consola de Firebase.

Solución del Ejercicio 1

<!DOCTYPE html>
<html>
<head>
    <title>Mi Aplicación Firebase</title>
</head>
<body>
    <h1>Bienvenido a Mi Aplicación Firebase</h1>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>

    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_PROJECT_ID.appspot.com",
        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
        appId: "YOUR_APP_ID"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
</body>
</html>

Conclusión

En esta sección, has aprendido cómo crear un proyecto en Firebase, integrar Firebase en tu aplicación y configurar los servicios necesarios. Esta configuración es fundamental para aprovechar las capacidades de Firebase en tus proyectos. En el próximo módulo, profundizaremos en la autenticación de Firebase, comenzando con una introducción a los conceptos clave y la implementación de la autenticación por correo electrónico y contraseña.

Curso de Firebase

Módulo 1: Introducción a Firebase

Módulo 2: Autenticación de Firebase

Módulo 3: Base de datos en tiempo real de Firebase

Módulo 4: Cloud Firestore

Módulo 5: Almacenamiento de Firebase

Módulo 6: Mensajería en la nube de Firebase

Módulo 7: Análisis de Firebase

Módulo 8: Funciones de Firebase

Módulo 9: Monitoreo de rendimiento de Firebase

Módulo 10: Laboratorio de pruebas de Firebase

Módulo 11: Temas avanzados de Firebase

© Copyright 2024. Todos los derechos reservados