Upgrade: Angular 18, Ionic 8, Capacitor 6
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>
This commit is contained in:
CarlosTorres
242
README.md
Normal file → Executable file
242
README.md
Normal file → Executable file
@@ -1,2 +1,242 @@
|
||||
# Jobhero_front
|
||||
# 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
|
||||
|
||||
Reference in New Issue
Block a user