Home

Guía Paso a Paso: Configurar Firebase y Mapbox en TeLlevoAPP

1. Configurar Firebase

Paso 1: Crear un Proyecto en Firebase

• Ir a Firebase Console:

  • Abre tu navegador y ve a Firebase Console.
  • Inicia sesión con tu cuenta de Google.

• Crea un Nuevo Proyecto:

  • Haz clic en "Añadir proyecto".
  • Escribe un nombre para tu proyecto, por ejemplo, TeLlevoAPP.
  • Acepta las condiciones y haz clic en "Continuar".
  • En las opciones siguientes, puedes desactivar Google Analytics si no lo necesitas y haz clic en "Crear proyecto".
  • Espera a que Firebase configure tu proyecto y luego haz clic en "Continuar".

Paso 2: Añadir Firebase a tu App Web

• Ve a "Configuración del Proyecto":

  • En la barra lateral izquierda, haz clic en el ícono de engranaje (⚙️) junto a "Visión general del proyecto".
  • Selecciona "Configuración del proyecto".

• Añadir tu App Web:

  • En la sección "Tus aplicaciones", haz clic en "Añadir aplicación" y selecciona Web (ícono con un "globo").
  • Dale un nombre a tu app (por ejemplo, TeLlevoWeb).
  • Haz clic en "Registrar app".

• Copiar Credenciales:

  • Firebase te dará un código con las credenciales de configuración. No copies todo, solo fíjate en las siguientes líneas:

    apiKey: "TU_API_KEY",
    authDomain: "TU_AUTH_DOMAIN",
    projectId: "TU_PROJECT_ID",
    storageBucket: "TU_STORAGE_BUCKET",
    messagingSenderId: "TU_MESSAGING_SENDER_ID",
    appId: "TU_APP_ID"

Paso 3: Configurar Firebase en tu Proyecto Angular

• Abre tu proyecto TeLlevoAPP en tu editor de código (como Visual Studio Code).

• Navega a src/environments/environment.ts:

  • Si estás en modo desarrollo, este es el archivo donde pondrás tus credenciales.

• Reemplaza el contenido con el siguiente código:

  export const environment = {
    production: false,
    firebaseConfig: {
      apiKey: "TU_API_KEY",
      authDomain: "TU_AUTH_DOMAIN",
      projectId: "TU_PROJECT_ID",
      storageBucket: "TU_STORAGE_BUCKET",
      messagingSenderId: "TU_MESSAGING_SENDER_ID",
      appId: "TU_APP_ID"
    }
  };

  Nota: Reemplaza "TU_API_KEY" y las demás con los valores que copiaste de Firebase.

Paso 4: Habilitar Servicios en Firebase

• Authentication (Autenticación):

  • En la consola de Firebase, ve a "Authentication" en la barra lateral.
  • Haz clic en "Empezar".
  • En "Métodos de inicio de sesión", habilita "Correo y contraseña".

• Realtime Database (Base de datos en tiempo real):

  • Ve a "Realtime Database" en la barra lateral.
  • Haz clic en "Crear base de datos".
  • Selecciona "Modo de prueba" para permitir lecturas y escrituras sin restricciones (solo para desarrollo).

• Storage (Almacenamiento):

  • Ve a "Storage" en la barra lateral.
  • Haz clic en "Comenzar".
  • Sigue las instrucciones para configurar tu almacenamiento.

---

2. Configurar Mapbox

Paso 1: Crear una Cuenta en Mapbox

• Ve a Mapbox y haz clic en "Sign up" (Registrarse).

• Completa el Registro:

  • Crea una cuenta con tu correo o usa Google.

Paso 2: Obtener tu Token de Acceso

• Accede a tu Cuenta:

  • Una vez que hayas iniciado sesión, haz clic en tu perfil (esquina superior derecha).

• Ir a "Tokens de Acceso":

  • Haz clic en "Account" y luego en "Access tokens".

• Crear un Nuevo Token:

  • Si no tienes uno, haz clic en "Create a token".
  • Puedes usar uno de los tokens por defecto o crear uno personalizado.
  • Copia el Token.

Paso 3: Configurar Mapbox en tu Proyecto

• Abre src/environments/environment.ts (el mismo donde configuraste Firebase).

• Añade el Token de Mapbox:

  export const environment = {
    production: false,
    firebaseConfig: {
      // ... tus credenciales de Firebase ...
    },
    mapboxAccessToken: 'TU_MAPBOX_ACCESS_TOKEN'
  };

  Nota: Reemplaza 'TU_MAPBOX_ACCESS_TOKEN' con el token que copiaste de Mapbox.

Paso 4: Usar Mapbox en la App

• En el archivo donde usas Mapbox (por ejemplo, role-selection.page.ts):

  import * as mapboxgl from 'mapbox-gl';
  import { environment } from '../../environments/environment';
  
  (mapboxgl as any).accessToken = environment.mapboxAccessToken;
  
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.5, 40], // Cambia las coordenadas si es necesario
    zoom: 9
  });

• Añade un Contenedor de Mapa en el HTML:

  • En el archivo HTML correspondiente, añade:

    <div id="map" style="height: 400px;"></div>

---

3. Verifica Todo

• Firebase:

  • Prueba iniciar sesión con correo y contraseña fíjate que se estén quedando los usuarios en el apartado de autenticacion de fire base.
  • Verifica que los datos se guardan en Realtime Database en este caso en el Realtime Database se estarán guardando los viajes.

• Mapbox:

  • Abre la página donde integraste el mapa.
  • Asegúrate de que se muestra correctamente.