# JobHero Frontend Aplicacion movil y web para conectar usuarios con proveedores de servicios. ## Stack Tecnologico | Tecnologia | Version | |------------|---------| | Angular | 18.2.14 | | Ionic | 8.7.17 | | Capacitor | 6.0.0 | | TypeScript | 5.4.5 | | Node.js | 20.x (requerido) | ## Requisitos Previos - **Node.js 20.x** o superior - **npm** o **yarn** - **Android Studio** (para compilar APK) - **Xcode** (solo macOS, para iOS) ## Instalacion ### 1. Clonar el repositorio ```bash git clone cd jobhero-frontend ``` ### 2. Instalar Node.js 20 (si no esta instalado) ```bash # Usando nvm (recomendado) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash source ~/.bashrc nvm install 20 nvm use 20 ``` ### 3. Instalar dependencias ```bash npm install --legacy-peer-deps ``` ### 4. Configurar variables de entorno Crear archivo `src/environments/environment.ts`: ```typescript export const environment = { production: false, apiUrl: 'http://localhost:8000/api', googleMapsApiKey: 'TU_API_KEY_DE_GOOGLE_MAPS', facebookAppId: 'TU_FACEBOOK_APP_ID', googleClientId: 'TU_GOOGLE_CLIENT_ID' }; ``` Crear archivo `src/environments/environment.prod.ts`: ```typescript export const environment = { production: true, apiUrl: 'https://tu-dominio.com/api', googleMapsApiKey: 'TU_API_KEY_DE_GOOGLE_MAPS', facebookAppId: 'TU_FACEBOOK_APP_ID', googleClientId: 'TU_GOOGLE_CLIENT_ID' }; ``` ## Desarrollo ### Ejecutar en modo desarrollo (navegador) ```bash npm start # o ng serve ``` La aplicacion estara disponible en `http://localhost:4200` ### Build de produccion ```bash npm run build # o ng build --configuration=production ``` Los archivos compilados estaran en `/www` ## Compilacion Android ### 1. Configurar Android ```bash # Sincronizar Capacitor npx cap sync android # Abrir en Android Studio npx cap open android ``` ### 2. Configurar google-services.json Descargar `google-services.json` desde Firebase Console y colocarlo en: ``` android/app/google-services.json ``` ### 3. Generar APK Desde Android Studio: - Build > Build Bundle(s) / APK(s) > Build APK(s) O desde terminal: ```bash cd android ./gradlew assembleRelease ``` El APK estara en: `android/app/build/outputs/apk/release/` ### 4. Firmar APK para produccion ```bash # Generar keystore (solo primera vez) keytool -genkey -v -keystore jobhero.keystore -alias jobhero -keyalg RSA -keysize 2048 -validity 10000 # Firmar APK jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore jobhero.keystore app-release-unsigned.apk jobhero # Optimizar APK zipalign -v 4 app-release-unsigned.apk jobhero-release.apk ``` ## Estructura del Proyecto ``` src/ ├── app/ │ ├── models/ # Interfaces y modelos │ ├── pages/ # Paginas de la aplicacion │ │ ├── landing/ # Pagina inicial │ │ ├── login/ # Login │ │ ├── register/ # Registro │ │ ├── dashboard/ # Panel principal │ │ ├── contracts/ # Gestion de contratos │ │ ├── postulations/ # Postulaciones │ │ └── ... │ ├── services/ # Servicios (API, auth, etc.) │ └── app-routing.module.ts ├── assets/ # Imagenes, iconos, traducciones ├── environments/ # Configuracion por entorno └── theme/ # Estilos globales ``` ## Plugins de Capacitor | Plugin | Uso | |--------|-----| | @capacitor/camera | Captura de fotos | | @capacitor/geolocation | Ubicacion GPS | | @capacitor/preferences | Almacenamiento local | | @capacitor/browser | Navegador in-app | | @capacitor/status-bar | Barra de estado | | @capacitor/splash-screen | Pantalla de carga | | @capacitor-community/facebook-login | Login con Facebook | | @codetrix-studio/capacitor-google-auth | Login con Google | ## Comandos Utiles ```bash # Desarrollo npm start # Iniciar servidor de desarrollo npm run build # Build de produccion npm run lint # Verificar codigo # Capacitor npx cap sync # Sincronizar con plataformas nativas npx cap sync android # Solo Android npx cap open android # Abrir en Android Studio npx cap run android # Ejecutar en dispositivo/emulador # Testing npm test # Ejecutar tests ``` ## Solucion de Problemas ### Error: "Cannot access 'x' before initialization" Este error ocurre con Ionic 8 y build optimization. Ya esta configurado en `angular.json`: ```json "buildOptimizer": false ``` ### Error de permisos en Android Verificar que `AndroidManifest.xml` tenga los permisos necesarios: - `INTERNET` - `ACCESS_FINE_LOCATION` - `ACCESS_COARSE_LOCATION` - `CAMERA` - `READ_EXTERNAL_STORAGE` ### Error de dependencias ```bash # Limpiar cache y reinstalar rm -rf node_modules package-lock.json npm cache clean --force npm install --legacy-peer-deps ``` ## Configuracion de APIs Externas ### Google Maps 1. Ir a Google Cloud Console 2. Habilitar Maps JavaScript API 3. Crear API Key 4. Agregar restricciones por dominio ### Facebook Login 1. Ir a Facebook Developers 2. Crear aplicacion 3. Configurar OAuth redirect URIs 4. Obtener App ID ### Google Sign-In 1. Ir a Google Cloud Console 2. Crear credenciales OAuth 2.0 3. Configurar pantalla de consentimiento 4. Obtener Client ID ## Licencia Proyecto privado - Todos los derechos reservados