lunes 9 diciembre 2024

Cómo usar Firebase en Vue

Firebase es una plataforma desarrollada por Google que ofrece servicios backend como base de datos en tiempo real, autenticación de usuarios, almacenamiento de archivos y hosting. En combinación con Vue.js, Firebase permite desarrollar aplicaciones web modernas, interactivas y escalables de manera sencilla.

Instalación de Firebase en Vue

Antes de comenzar, asegúrate de tener un proyecto Vue configurado. Luego, sigue estos pasos:

1. Instalar Firebase

Primero, instala la biblioteca oficial de Firebase usando npm o yarn:

npm install firebase
# o
yarn add firebase

2. Configurar Firebase en tu proyecto

1. Ve al panel de Firebase, crea un nuevo proyecto y configura tu aplicación web.

2. Obtén las credenciales de configuración y agrégalas en tu proyecto Vue. Por ejemplo, crea un archivo firebaseConfig.js en la carpeta src:

// src/firebaseConfig.js
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "TU_API_KEY",
  authDomain: "TU_PROYECTO.firebaseapp.com",
  projectId: "TU_PROYECTO",
  storageBucket: "TU_PROYECTO.appspot.com",
  messagingSenderId: "TU_SENDER_ID",
  appId: "TU_APP_ID",
};

const firebaseApp = initializeApp(firebaseConfig);

export default firebaseApp;

3. Instalar y configurar Firebase en Vue

Importa y utiliza los módulos que necesites de Firebase en los componentes o servicios de tu aplicación.

Funcionalidades principales de Firebase en Vue

1. Autenticación

Puedes gestionar la autenticación de usuarios con Firebase Authentication. Ejemplo para registrar y autenticar usuarios:

import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

// Registro de usuarios
const registerUser = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    console.log("Usuario registrado:", userCredential.user);
  } catch (error) {
    console.error("Error al registrar:", error);
  }
};

// Inicio de sesión
const loginUser = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    console.log("Usuario autenticado:", userCredential.user);
  } catch (error) {
    console.error("Error al iniciar sesión:", error);
  }
};

2. Base de datos en tiempo real (Firestore)

Firestore es una base de datos NoSQL que funciona en tiempo real. Ejemplo para agregar y obtener datos:

import { getFirestore, collection, addDoc, getDocs } from "firebase/firestore";

const db = getFirestore();

// Agregar datos
const addDocument = async () => {
  try {
    const docRef = await addDoc(collection(db, "usuarios"), {
      nombre: "Juan",
      edad: 30,
    });
    console.log("Documento agregado con ID:", docRef.id);
  } catch (error) {
    console.error("Error al agregar documento:", error);
  }
};

// Obtener datos
const getDocuments = async () => {
  try {
    const querySnapshot = await getDocs(collection(db, "usuarios"));
    querySnapshot.forEach((doc) => {
      console.log(`${doc.id} =>`, doc.data());
    });
  } catch (error) {
    console.error("Error al obtener documentos:", error);
  }
};

3. Almacenamiento

Sube y gestiona archivos con Firebase Storage. Ejemplo para subir un archivo:

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();

const uploadFile = async (file) => {
  const storageRef = ref(storage, `uploads/${file.name}`);
  try {
    await uploadBytes(storageRef, file);
    console.log("Archivo subido exitosamente");
  } catch (error) {
    console.error("Error al subir archivo:", error);
  }
};

4. Integración con Vue 3 y Composition API

Puedes usar Firebase con la Composition API de Vue 3 para mejorar la modularidad. Ejemplo de autenticación:

import { ref } from "vue";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const useAuth = () => {
  const user = ref(null);
  const auth = getAuth();

  const login = async (email, password) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      user.value = userCredential.user;
      console.log("Usuario autenticado:", user.value);
    } catch (error) {
      console.error("Error al iniciar sesión:", error);
    }
  };

  return { user, login };
};

export default useAuth;

Referencias oficiales

Para más información, consulta la documentación oficial:

https://firebase.google.com/docs

https://vuejs.org/

Etiquetas:

javascript vue firebase

Creado por:

Jorge García

Fullstack developer