25-02-2025
This commit is contained in:
parent
98084de7d0
commit
70a7776da5
53 changed files with 6719 additions and 833 deletions
226
frontend/MOBILE-APPS.md
Normal file
226
frontend/MOBILE-APPS.md
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
# Mobile Apps – iOS & Android
|
||||
|
||||
Die "Thats Me" App wird mit **Capacitor** (v7) als native iOS- und Android-App verpackt. Capacitor bündelt die Quasar Web-App in eine WebView innerhalb einer nativen App-Shell.
|
||||
|
||||
---
|
||||
|
||||
## Wichtig: Zwei Umgebungen
|
||||
|
||||
| Umgebung | Zweck |
|
||||
| --------------------- | ---------------------------------------------------------------------- |
|
||||
| **Docker-Container** | Quasar Dev-Server, Vue-Code bearbeiten, `npm install`, Web-Entwicklung |
|
||||
| **Mac Server / Host** | Xcode, CocoaPods, Capacitor-Builds, iOS Simulator |
|
||||
|
||||
Xcode und CocoaPods laufen **ausschließlich auf dem Mac** (außerhalb Docker). Die installierten Tools auf dem Mac-Host beeinflussen den Docker-Container **nicht** – beide Umgebungen sind vollständig isoliert.
|
||||
|
||||
---
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── src/ # Quasar Quellcode (Vue.js)
|
||||
├── src-capacitor/ # Capacitor nativer Wrapper
|
||||
│ ├── ios/ # Xcode-Projekt (lokal, nicht im Git)
|
||||
│ ├── android/ # Android Studio Projekt (lokal, nicht im Git)
|
||||
│ ├── www/ # Kompilierte Web-Assets (nicht im Git)
|
||||
│ ├── capacitor.config.json # App-Konfiguration
|
||||
│ └── package.json # Capacitor Dependencies
|
||||
└── quasar.config.js # Quasar Config
|
||||
```
|
||||
|
||||
## App-Konfiguration
|
||||
|
||||
| Eigenschaft | Wert |
|
||||
| ----------- | ----------------------- |
|
||||
| App ID | `media.adametz.thatsme` |
|
||||
| App Name | `Thats Me` |
|
||||
|
||||
---
|
||||
|
||||
## Einmaliges Setup auf dem Mac
|
||||
|
||||
### 1. Voraussetzungen installieren
|
||||
|
||||
```bash
|
||||
# Homebrew (falls nicht vorhanden)
|
||||
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
|
||||
|
||||
# Node.js
|
||||
brew install node
|
||||
|
||||
# CocoaPods (iOS Dependency Manager)
|
||||
brew install cocoapods
|
||||
# oder: sudo gem install cocoapods
|
||||
|
||||
# Prüfen:
|
||||
node --version # z.B. v25.x
|
||||
pod --version # z.B. 1.16.2
|
||||
```
|
||||
|
||||
### 2. Xcode einrichten
|
||||
|
||||
- Xcode aus dem **Mac App Store** installieren (~15 GB, etwas Geduld)
|
||||
- Nach der Installation Xcode **einmal öffnen** und License akzeptieren
|
||||
- Developer Directory auf Xcode setzen:
|
||||
|
||||
```bash
|
||||
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
|
||||
sudo xcodebuild -license accept
|
||||
```
|
||||
|
||||
Prüfen:
|
||||
|
||||
```bash
|
||||
xcode-select -p
|
||||
# Ausgabe: /Applications/Xcode.app/Contents/Developer
|
||||
```
|
||||
|
||||
### 3. Capacitor Dependencies installieren
|
||||
|
||||
```bash
|
||||
cd ~/Sites/thats-me.local/frontend/src-capacitor
|
||||
npm install
|
||||
```
|
||||
|
||||
> ⚠️ **Wichtig:** `npm install` immer nur im `src-capacitor/`-Unterordner ausführen, **niemals** direkt im `frontend/`-Ordner vom Mac-Host. Der `frontend/`-Ordner ist per Volume in den Docker-Container gemountet. Ein `npm install` dort überschreibt die Linux-Binaries mit macOS-Binaries und der Dev-Container funktioniert nicht mehr.
|
||||
>
|
||||
> Falls das passiert, im Dev-Container reparieren:
|
||||
> ```bash
|
||||
> cd /workspace/frontend
|
||||
> rm -rf node_modules package-lock.json && npm install
|
||||
> ```
|
||||
|
||||
### 4. iOS-Plattform hinzufügen (nur wenn `ios/`-Ordner fehlt)
|
||||
|
||||
```bash
|
||||
cd ~/Sites/thats-me.local/frontend/src-capacitor
|
||||
npx cap add ios
|
||||
```
|
||||
|
||||
### 5. CocoaPods für iOS-Projekt initialisieren
|
||||
|
||||
```bash
|
||||
cd ~/Sites/thats-me.local/frontend/src-capacitor/ios/App
|
||||
pod install
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Build & Simulator starten (regulärer Workflow)
|
||||
|
||||
### Schritt 1 – App bauen
|
||||
|
||||
```bash
|
||||
cd ~/Sites/thats-me.local/frontend
|
||||
npx quasar build -m capacitor -T ios
|
||||
```
|
||||
|
||||
Das kompiliert den Vue/Quasar-Code und synchronisiert die Assets in das Xcode-Projekt.
|
||||
|
||||
### Schritt 2 – In Xcode öffnen
|
||||
|
||||
```bash
|
||||
cd src-capacitor
|
||||
npx cap open ios
|
||||
```
|
||||
|
||||
### Schritt 3 – Im Simulator ausführen
|
||||
|
||||
In Xcode:
|
||||
|
||||
1. Oben links das **Zielgerät** auf einen **Simulator** setzen (z.B. "iPhone 17")
|
||||
2. **▶ Play** klicken
|
||||
|
||||
> **Hinweis:** Für den Simulator wird **kein** Apple Developer Account / Signing benötigt. Signing ist nur für echte Geräte und den App Store erforderlich.
|
||||
|
||||
---
|
||||
|
||||
## Nach Code-Änderungen
|
||||
|
||||
Wenn Änderungen am Vue/Quasar-Code gemacht wurden, immer wieder:
|
||||
|
||||
```bash
|
||||
cd ~/Sites/thats-me.local/frontend
|
||||
npx quasar build -m capacitor -T ios
|
||||
cd src-capacitor && npx cap open ios
|
||||
```
|
||||
|
||||
In Xcode dann erneut auf ▶ klicken.
|
||||
|
||||
---
|
||||
|
||||
## Production Build (App Store)
|
||||
|
||||
### iOS (App Store / TestFlight)
|
||||
|
||||
```bash
|
||||
npx quasar build -m capacitor -T ios
|
||||
cd src-capacitor && npx cap open ios
|
||||
```
|
||||
|
||||
In Xcode:
|
||||
|
||||
- **Signing & Capabilities** → Apple Developer Account eintragen (kostenpflichtig, $99/Jahr)
|
||||
- Zielgerät auf **"Any iOS Device (arm64)"** setzen
|
||||
- **Product → Archive → Distribute App**
|
||||
|
||||
### Android (Google Play)
|
||||
|
||||
```bash
|
||||
npx quasar build -m capacitor -T android
|
||||
cd src-capacitor && npx cap open android
|
||||
```
|
||||
|
||||
In Android Studio:
|
||||
|
||||
- **Build → Generate Signed Bundle / APK**
|
||||
- Keystore erstellen/auswählen
|
||||
|
||||
---
|
||||
|
||||
## Native APIs / Plugins
|
||||
|
||||
Capacitor-Plugins ermöglichen Zugriff auf native Funktionen:
|
||||
|
||||
```bash
|
||||
# Beispiele (im src-capacitor Ordner):
|
||||
npm install @capacitor/camera
|
||||
npm install @capacitor/geolocation
|
||||
npm install @capacitor/push-notifications
|
||||
|
||||
# Nach jedem neuen Plugin:
|
||||
npx cap sync
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Git-Hinweise
|
||||
|
||||
Folgende Ordner sind in `.gitignore` und werden **nicht** commitet:
|
||||
|
||||
```
|
||||
src-capacitor/node_modules/ # Lokal neu installieren mit: npm install
|
||||
src-capacitor/www/ # Wird vom Build befüllt
|
||||
src-capacitor/ios/ # Lokal generiert mit: npx cap add ios
|
||||
src-capacitor/android/ # Lokal generiert mit: npx cap add android
|
||||
```
|
||||
|
||||
**Was commitet wird:**
|
||||
|
||||
- `src-capacitor/capacitor.config.json` – App-Konfiguration
|
||||
- `src-capacitor/package.json` – Capacitor Dependencies
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
| Fehler | Lösung |
|
||||
| ------------------------------------------------ | ----------------------------------------------------------------------------------------- |
|
||||
| `spawn pod ENOENT` | `brew install cocoapods` |
|
||||
| `xcodebuild requires Xcode` | `sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer` |
|
||||
| `Cannot find module @rollup/rollup-darwin-arm64` | `rm -rf node_modules package-lock.json && npm install` im `frontend/`-Ordner |
|
||||
| `Signing requires a development team` | Für Simulator: ignorieren. Für echtes Gerät: Apple Developer Account in Xcode hinterlegen |
|
||||
| `ios platform already exists` | Normal – `npx cap add ios` überspringen, Ordner ist bereits vorhanden |
|
||||
| Weißer Bildschirm im Simulator | `npx cap sync` im `src-capacitor`-Ordner, dann neu bauen |
|
||||
| Pod-Fehler | `cd src-capacitor/ios/App && pod install --repo-update` |
|
||||
Loading…
Add table
Add a link
Reference in a new issue