lunes 9 diciembre 2024

Cómo usar Firebase en Svelte

Firebase es una plataforma desarrollada por Google que ofrece servicios backend como autenticación, almacenamiento y bases de datos en tiempo real. Junto con Svelte, un framework moderno y eficiente, Firebase permite desarrollar aplicaciones web rápidas, interactivas y fáciles de escalar.

Instalación de Firebase en Svelte

Antes de empezar, asegúrate de tener un proyecto Svelte configurado. Si no lo tienes, crea uno con:

npx degit sveltejs/template nombre-del-proyecto
cd nombre-del-proyecto
npm install

1. Instalar Firebase

Agrega Firebase al proyecto con el gestor de paquetes npm:

npm install firebase

2. Configurar Firebase en el proyecto

1. Crea un proyecto en Firebase Console y agrega una aplicación web.

2. Copia las credenciales de configuración y agrégalas en 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. Importar Firebase en tu aplicación

Usa los módulos de Firebase en tus componentes Svelte o servicios.

Funcionalidades principales de Firebase en Svelte

1. Autenticación

Firebase Authentication permite gestionar usuarios de forma sencilla. A continuación, un ejemplo de inicio de sesión:

<script>
  import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

  let email = "";
  let password = "";

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

<input bind:value={email} type="email" placeholder="Correo electrónico" />
<input bind:value={password} type="password" placeholder="Contraseña" />
<button on:click={login}>Iniciar sesión</button>

2. Base de datos en tiempo real (Firestore)

Firestore es una base de datos NoSQL en tiempo real. Aquí tienes un ejemplo para agregar y recuperar datos:

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

  const db = getFirestore();
  let usuarios = [];

  const addUsuario = async () => {
    try {
      await addDoc(collection(db, "usuarios"), { nombre: "Juan", edad: 30 });
      console.log("Usuario agregado");
      await fetchUsuarios(); // Actualiza la lista
    } catch (error) {
      console.error("Error al agregar usuario:", error);
    }
  };

  const fetchUsuarios = async () => {
    try {
      const querySnapshot = await getDocs(collection(db, "usuarios"));
      usuarios = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
    } catch (error) {
      console.error("Error al obtener usuarios:", error);
    }
  };

  fetchUsuarios();
</script>

<ul>
  {#each usuarios as usuario}
    <li>{usuario.nombre} - {usuario.edad}</li>
  {/each}
</ul>
<button on:click={addUsuario}>Agregar Usuario</button>

3. Almacenamiento

Sube archivos al almacenamiento de Firebase con el siguiente ejemplo:

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

  const storage = getStorage();
  let file;

  const uploadFile = async () => {
    if (!file) return;
    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);
    }
  };
</script>

<input type="file" on:change={(e) => (file = e.target.files[0])} />
<button on:click={uploadFile}>Subir archivo</button>

4. Uso de Stores en Svelte para Firebase

Puedes usar un store de Svelte para manejar el estado global de los datos, como el usuario autenticado:

// src/stores/auth.js
import { writable } from "svelte/store";
import { getAuth, onAuthStateChanged } from "firebase/auth";

export const user = writable(null);

const auth = getAuth();
onAuthStateChanged(auth, (currentUser) => {
  user.set(currentUser);
});

Úsalo en tus componentes:

<script>
  import { user } from "./stores/auth";
  $: console.log("Usuario actual:", $user);
</script>

<p>{#if $user}Bienvenido, {$user.email}{:else}No has iniciado sesión{/if}</p>

Referencias oficiales

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

Etiquetas:

svelte firebase

Creado por:

Jorge García

Fullstack developer