Melodia - API de Playlists

Trabajo Práctico Grupal - Ingeniería de Software II

Melodía es una aplicación de música en streaming desarrollada para ofrecer una experiencia completa y atractiva. Su objetivo es permitir a los usuarios descubrir nuevas canciones, reproducir su música favorita y organizar playlists de forma sencilla e intuitiva.

Autores

Nombre	Apellido	Mail	Padrón
Ian	von der Heyde	ivon@fi.uba.ar	107638
Valentín	Schneider	vschneider@fi.uba.ar	107964
Daniela	Ojeda	dojeda@fi.uba.ar	107690
Alan	Cantero	acantero@fi.uba.ar	99676
Ezequiel	Lazarte	ezlazarte@fi.uba.ar	108063

---

Arquitectura del Proyecto

Estructura de Archivos

MelodiaFront/
├── app/                  # Código fuente principal de la app (pantallas, navegación, lógica de negocio)
├── components/           # Componentes reutilizables de UI
├── constants/            # Constantes globales (colores, estilos, etc.)
├── contexts/             # Contextos de React para manejo de estado global
├── hooks/                # Custom hooks
├── assets/               # Imágenes y fuentes
│   ├── fonts/
│   └── images/
├── utils/                # Funciones utilitarias y helpers
├── scripts/              # Scripts de utilidad para desarrollo
├── .env                  # Variables de entorno
├── .prettierrc           # Configuración de Prettier
├── .gitignore            # Archivos y carpetas ignorados por git
├── package.json          # Dependencias y scripts de npm
├── README.md             # Documentación del proyecto
└── ...otros archivos de configuración

---

Inicio Rápido

Configuración Inicial

1. copia el .env.example a .env y configura las variables de entorno necesarias, como la URL de la API backend.

   cp .env.example .env

2. Install dependencies

   npm install

3. Start the app

   npx expo start --go

Calidad de Código

Linter y Formateador

• Verificar código:

    npx eslint

• Arreglar problemas automáticamente:

    npx eslint . --fix

• Formatear código:

    npm run format

• Verificar tipos:

    npx tsc --noEmit

Pre-commit hooks

ℹ️ Para usar el hook pre-commit personalizado:

1. Copia el archivo pre-commit a la carpeta de hooks de .git:

cp pre-commit .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

2. ¡Listo! El hook se ejecutará automáticamente antes de cada commit.

Esquema de Base de Datos y Contrato API

Dependencias de desarrollo

Logs

• Logging

  a

Niveles de logueo

El nivel de logueo depende del entorno:

• Si ENVIRONMENT=production, siempre se usa WARNING (no importa el valor de LOG_LEVEL).
• Si ENVIRONMENT=development, puedes configurar el nivel con la variable LOG_LEVEL en tu archivo .env (por defecto: INFO).

Valores posibles para LOG_LEVEL (de mayor a menor severidad):

• CRITICAL
• ERROR
• WARNING
• INFO
• DEBUG
• NOTSET

Recomendación:

• Usa INFO para desarrollo general.
• Usa DEBUG solo para troubleshooting detallado.
• En producción, el nivel es siempre WARNING para evitar ruido innecesario.

---

Dependencias solo para desarrollo

• colorlog — formateo de logs en color

Nota:
Las dependencias de desarrollo se encuentran en requirements-dev.txt y se instalan automáticamente si ENVIRONMENT=development en tu .env.

---

CI/CD: Tests automáticos con GitHub Actions

Para generar un APK de producción (Expo SDK 46+)

Expo recomienda usar EAS Build para generar APKs en proyectos modernos. El comando expo build:android está deprecado y no es compatible con Node 17+ ni con las últimas versiones de Expo.

Sigue estos pasos:

1. Instala EAS CLI globalmente si no lo tienes:

npm install -g eas-cli

2. Navega al directorio raíz de tu proyecto:

cd MelodiaFront

3. Inicia sesión en tu cuenta de Expo (si no tienes una, crea una en expo.dev):

eas login

4. Configura EAS Build en tu proyecto (solo la primera vez):

npx eas build:configure

5. Verifica tener lo necesario:

npx expo-doctor

6. Ejecuta el comando para construir el APK (de forma local):

npx eas build --local -p android --profile preview

Para mejorar perfomance al hacer la apk local: ir a /android y en el archivo "gradle.properties" cambiar la linea por esta:

 org.gradle.jvmargs=-Xmx8192m -XX:MaxMetaspaceSize=2048m

7. O de forma remota:

   para build de preview (la que sirve para mostrar)

   npx eas build -p android --profile preview

   build de desarrollo:

   npx eas build -p android --profile development

   Para un build de producción (solo sirve para subir a la play store):

   npx eas build -p android --profile production

8. Cuando la build termine, Expo te dará un enlace para descargar el archivo APK.

9 . APK DE DESARROLLO

npx expo run:android

Para limpieza y compilar de nuevo:

rm -rf android/.gradle android/app/build android/build
# y después volver a compilar
npx expo run:android

#tambien se puede ejecutar con
npx expo start --dev-client

✅ Eliminar logs en builds preview/producción (automático con Babel)

Para mejorar el rendimiento y evitar exponer logs en builds públicos, recomendamos automatizar la eliminación de console en los builds preview y production.

1. Instala el plugin dev:

npm install --save-dev babel-plugin-transform-remove-console

2. Configura babel.config.js para que sólo se aplique en env production (ya actualizado en este repo):

production: {
  plugins: [
    'react-native-paper/babel',
    ['transform-remove-console', { exclude: ['error', 'warn'] }],
  ],
}

Esto mantiene console.error y console.warn (útiles en producción) y elimina console.log/info/debug.

3. Verifica el perfil preview en eas.json — si developmentClient está activado, el build mantendrá logs; sin developmentClient (como está por defecto en preview) el build usará production y aplicará el plugin.

4. Probar localmente (simula producción):

# Inicia Metro con modo producción/minificación
npx expo start --no-dev --minify

# O verifica con Babel en un archivo de prueba
NODE_ENV=production npx babel tmp-test-console.js --out-file tmp-test-console.out.js

Si quieres mantener logs en un build preview puntual, puedes remover temporalmente el plugin o cambiar la configuración del preview en eas.json para usar developmentClient: true (no recomendado para builds públicos).

fabricar app de desarrollo para poder usar notificaciones con firebase

📱 Configuración de Notificaciones (FCM V1) + EAS Build

Este proyecto utiliza la API moderna Firebase Cloud Messaging V1 y requiere un Development Build para funcionar correctamente (no usar Expo Go estándar).

1. Prerrequisitos

Asegúrate de tener la última versión de EAS CLI instalada y logueada:

npm install -g eas-cli
npx eas login
2. Obtener Credenciales de Admin (Solo si se configura desde cero)
Para que EAS pueda enviar notificaciones, necesita una "Service Account Key":

Ir a la Consola de Firebase > Configuración del proyecto (⚙️).

Pestaña Cuentas de servicio.

Clic en Generar nueva clave privada.

Se descargará un archivo .json (guárdalo temporalmente, NO lo subas al repo).

3. Configurar Credenciales en EAS
Sube la clave descargada a los servidores de Expo:

Bash

npx eas credentials
Selecciona Android > development.

Elige Google Service Account.

Opción: Manage your Google Service Account Key for Push Notifications (FCM V1).

Sube el archivo .json descargado en el paso anterior.

Importante: Una vez subido, borra el archivo .json de tu ordenador por seguridad.

4. Generar el Cliente de Desarrollo
Esto crea una APK personalizada que incluye las librerías nativas de FCM V1. Solo es necesario hacerlo una vez (o cuando se instalen nuevas librerías nativas).

Opción A: Build en la nube (Recomendado si no tienes Android Studio):

Bash

npx eas build --platform android --profile development
Opción B: Build local (Más rápido, requiere entorno Android/Java configurado):

Bash

npx eas build --local --platform android --profile development
5. Flujo de Trabajo Diario
Instala la APK generada en tu dispositivo Android o Emulador.

Inicia el servidor de desarrollo:

Bash

npx expo start
Escanea el QR o conecta con la app instalada (no uses Expo Go).

¡Listo! Los cambios de código (JS/React) se verán al instante sin recompilar.


Luego correr:
 npx eas build --local --platform android --profile development

 npx expo start

---

## Firebase Android configuration per profile

To avoid failures like "No matching client found for package name 'com.melodia.app.preview'", ensure you have a `google-services.json` for each Android package name (flavor). The project can reference different files per build profile.

Steps:

1. In the Firebase console, add an Android app with the package name for the profile you want (e.g., `com.melodia.app.preview`).
2. Download the `google-services.json` and save it to the root of the project with a name that matches the profile, for example `google-services.preview.json`.
3. For local or EAS builds using the `preview` profile, set the `GOOGLE_SERVICES_FILE` environment variable in `eas.json` (or in CI) to point to that file. Example (already set in `eas.json`):

```json
"GOOGLE_SERVICES_FILE": "./google-services.preview.json"

4. The app.config.js automatically picks the GOOGLE_SERVICES_FILE env var or a file named according to APP_ID_SUFFIX (e.g. ./google-services.preview.json). If you don't have a per-profile Google services file, the default google-services.json is used.

Local helper: copy google-services

If you build locally (with npx eas build --local) make sure a google-services.json exists in android/app/ — the prebuild copies that file into the Android project.

Configuración de Notificaciones Push (antes de crear la APK)

Esta sección detalla los pasos para habilitar notificaciones push en la build de Preview (com.melodia.app y com.melodia.app.preview) usando Firebase Cloud Messaging (FCM) y EAS.

Prerrequisitos

• Cuenta de Firebase con el proyecto melodia-35f9b.
• CLI de EAS instalado y logueado.
• Archivos google-services.json (Dev) y google-services.preview.json (Preview) en la raíz del proyecto.

1. Configuración en Firebase Console (Cliente)

Para permitir que la app se registre en FCM:

1. Ve a Project Settings (engranaje) > General > Tus apps.
2. Selecciona la app: com.melodia.app.preview.
3. Agrega la huella digital SHA-1 de la Keystore de EAS.

SHA-1 Actual (EAS Preview Profile):

CE:DD:91:D8:12:26:3F:0A:53:48:8A:5C:28:1A:78:21:B1:36:97:85

2. Configuración en EAS (Servidor)

Para que los servidores de Expo envíen mensajes a través de tu Firebase:

1. Ejecuta:

   npx eas credentials

2. Navega a: Android > preview > Google Service Account Key for Push Notifications (FCM V1).
3. Sube o selecciona el archivo .json (Service Account) generado desde Firebase Console > Cuentas de servicio.

Estado Actual:

• Estado: ✅ Configurado
• Service Account: firebase-adminsdk-fbsvc@melodia-35f9b...

Nota: Se comparte la misma Service Account para Dev y Preview, ya que pertenecen al mismo proyecto de Firebase.

Para obtener el token de expo notifications en preview:

adb logcat | grep "ExponentPushToken https://expo.dev/notifications

Ve a la Herramienta de Notificaciones de Expo en tu navegador.

En el campo "To (Expo Push Token)", pega tu token: ExponentPushToken[M20sDKLdJiEROLZ3pWoobI]

En "Message Title", escribe algo como: Prueba Preview.

En "Message Body", escribe: Si lees esto, las credenciales funcionan.

(Importante) En la sección "Data (JSON)" o configuración avanzada, asegúrate de que el Channel ID sea default (ya que así lo configuraste en tu código), aunque generalmente funciona automático si solo tienes uno.

Dale al botón Send a notification.