dfcb1168b9
Modernizacion completa del frontend: - Angular 8 -> 18.2.14 - Ionic 4 -> 8.7.17 - Capacitor 6.x (migracion desde Cordova/@ionic-native) - TypeScript 5.4.5 - Swiper 11 con Web Components API Cambios principales: - Migrar NativeStorage a @capacitor/preferences - Migrar InAppBrowser a @capacitor/browser - Migrar Camera a @capacitor/camera - Migrar Geolocation a @capacitor/geolocation - Migrar StatusBar/SplashScreen a Capacitor - Migrar Facebook/Google login a plugins Capacitor - Actualizar lazy loading syntax (Angular 12+) - Configurar buildOptimizer: false para Ionic 8 - Limpiar package.json de dependencias obsoletas - Agregar README con guia de instalacion Co-Authored-By: Claude <noreply@anthropic.com>
243 lines
5.4 KiB
Markdown
Executable File
243 lines
5.4 KiB
Markdown
Executable File
# 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 <url-del-repositorio>
|
|
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
|