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

git clone <url-del-repositorio>
cd jobhero-frontend

2. Instalar Node.js 20 (si no esta instalado)

# 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

npm install --legacy-peer-deps

4. Configurar variables de entorno

Crear archivo src/environments/environment.ts:

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:

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)

npm start
# o
ng serve

La aplicacion estara disponible en http://localhost:4200

Build de produccion

npm run build
# o
ng build --configuration=production

Los archivos compilados estaran en /www

Compilacion Android

1. Configurar Android

# 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:

cd android
./gradlew assembleRelease

El APK estara en: android/app/build/outputs/apk/release/

4. Firmar APK para produccion

# 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

# 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:

"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

# 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