Skip to content

Entwicklung

Jump to bottom Edit New page
JohannesGrobelski edited this page Dec 6, 2023 · 24 revisions

Aufsetzen der Entwicklungsumgebung und Ausführung

Für die Entwicklung der Anwendung werden verschiedene Komponenten benötigt:

Die Entwicklungsumgebung kann dann wie folgt aufgesetzt werden:

(1) Klonen des Projekts

$ git clone https://github.com/University-of-Potsdam-MM/Mobile.UP.git
$ cd Mobile.UP

(2) Einrichten der verwendeten Submodule

$ git submodule update --init --recursive

(3) Installieren der Abhängigkeiten

$ npm install

(4) Bauen mit NPM

$ npm run build

(5) Ausführen der Anwendung lokal mit Entwicklungsserver (vorher beachten: config.dist.json und config.json)

$ ionic serve

(6) Ausführen der Anwendung auf einem physisch vorhandenem Gerät

$ ionic capacitor run {android,ios}

Achtung: Damit die App richtig funktioniert muss config.json vorhanden sein.

Deployen auf Emulator

(1) Schritte 1-4 von oben (2) Für Plattform (Android) updaten ```shell script $ ionic capacitor copy android ```
  1. Projekt in Android Studio öffnen
$ ionic capacitor run android
  1. Emulator (installieren und) starten
  2. Mit grünem Pfeil App über Run Config auf Emulator starten. Alternative:
$ npx cap run android

config.dist.json und config.json

Der Access Token (apikey) und Basic Auth String sind nicht im öffentlichen Repo enthalten. Damit das Projekt korrekt ausgeführt werden kann, müssen folgende Stellen (lokal) in src/assets/config.dist.json ersetzt und die Datei in config.json umbenannt werden:

"accessToken": "[BASIC_AUTH_STRING]",
…
"apiToken": "[ACCESS_TOKEN]",

Dies kann entweder händisch oder mit Hilfe des fillCredentials.sh-Skripts geschehen:

./fillCredentials.sh "src/assets/config.dist.json" "ACCESS_TOKEN BASIC_AUTH_STRING"

Voraussetzung dafür ist, dass ACCESS_TOKEN und BASIC_AUTH_STRING als Umgebungsvariablen gesetzt sind.

⚠️ Das Skript ersetzt die entsprechenden Stellen durch die Werte der Umgebungsvariablen und nennt die Datei automatisch in config.json um. Die config.dist.json darf allerdings nicht aus dem Repo gelöscht werden. Entsprechende Änderungen sollten daher nicht in git commited werden. ⚠️

Hinzufügen einer neuen Page

Für das Hinzufügen einer Page sollte am besten das ionic-cli verwendet werden:

$ cd src/app/pages
$ ionic g page MyNewPage

Die Page MyNewPage wird dadurch im Verzeichnis src/app/pages/my-new-page erstellt. Außerdem wird in der Datei src/app/app-routing.module.ts ein neues Element für die erstellte Page hinzugefügt:

  {
    path: 'my-new-page',
    loadChildren: () => import('./pages/my-new-page/my-new-page.module').then( m => m.MyNewPagePageModule)
  }

Damit die neue Page in der Anwendung verwendet wird, muss diese noch in den Dateien src/assets/config.json und src/assets/config.dist.json unter "modules" eingetragen werden. Ansonsten würde diese nicht in der HomePage dargestellt werden und wäre daher auch nicht benutzbar. In der src/assets/config.json/src/assets/config.dist.json muss also noch folgender Eintrag erstellt werden:

{
     "modules": {
        "my-new-page": {
          "componentName": "my-new-page",
          "icon": "rocket",
          "selected": false
        },
     }
}

Der componentName muss dabei dem path aus dem Eintrag in der Datei app-routing.module.ts entsprechen.

Die Page ist nun in der Anwendung verfügbar.

Eine Page ist im Grunde eine Angular-Component und besteht daher aus:

  • Component (my-new-page.page.ts): Hier befindet sich die Logik (Code) der Page an sich.
  • Template (my-new-page.page.html): Hier wird mittels HTML das Aussehen der Page definiert.
  • Style (my-new-page.page.scss): Hier werden Styles definiert, die nur für diese Page gelten.
  • Module ( my-new-page.module.ts): Die Module-Datei fasst die Bestandteile der Page zu einem Modull zusammen und importiert außerdem Abhängigkeiten aus dem Hauptmodul der Anwendung.

AbstractPage

Einige oft genutzte Funktionen wurden in eine AbstractPage ausgelagert, um unnötige Wiederholungen zu vermeiden. Für die Verwendung dieser AbstractPage muss eine beliebige Page bzw. Komponente lediglich diese AbstractPage extenden. Dadurch kann direkt auf die Methoden und Attribute der AbstractPage zugegriffen werden:

@Component({
  selector: 'app-my-new-page',
  templateUrl: './my-new-page.page.html',
  styleUrls: ['./my-new-page.page.scss'],
})
export class MyNewPage extends AbstractPage implements OnInit {

  constructor() {
    super({ requireNetwork: true });
  }
  
  ngOnInit() {
    // der config-service kann durch die AbstractPage direkt verwendet werden
    console.log(this.config.appVersion)
  }
}

Deployment

Die Anwendung kann auf mehrere Weisen produktiv deployed werden. In jedem Szenario kommt dafür das ionic-cli zum Einsatz.

Browser

Für die Erstellung eines Browser-Releases folgendes ausführen:

$ ionic build --prod

Die Produktivversion befindet sich nun im Verzeichnis www. Diese Dateien müssen über einen Webserver bereitgestellt werden.

Android

Für die Erstellung eines Android-Releases folgendes ausführen:

$ ionic capacitor build android --prod
$ zipalign -v 4 platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk MobileUP-unsigned.apk
# Für den folgenden Schritt muss eine Keystore-Datei $KEYSTORE vorhanden sowie deren Passwort $KEYSTORE_PASS bekannt sein
$ jarsigner -verbose \
            -sigalg SHA1withRSA \
            -digestalg SHA1 -keystore $KEYSTORE \
            -storepass:env KEYSTORE_PASS \
            MobileUP-unsigned.apk \
            /my-release-key
$ zipalign -v 4 MobileUP-unsigned.apk MobileUP.apk

Die Datei MobileUP.apk ist nun bereit für das Deployment via Google-PlayStore o.ä.

iOS

Voraussetzungen

* Apple ID mit entsprechend ausreichenden Rechten (+ Xcode-Login)
* macOS Keychain: gültiges Apple Distribution Certificate
* macOS Keychain: gültiges anwendungsspezifisches Passwort (siehe unten)
* ExportOptions.plist im Projektordner

# Außerdem: die Versionsnummer der App muss höher sein als die aktuell im App Store verfügbare Version
# Außerdem: die Buildnummer der App muss höher sein als die des zuletzt hochgeladenen Builds

Speichern eines anwendungsspezifischen Passwortes in der macOS Keychain

(einmalig pro Mac, nur zum Upload benötigt)

Ein anwendungsspezifisches Passwort kann unter appleid.apple.com erstellt werden.

Das anwendungsspezifischen Passwortes wird dann in der macOS Keychain gespeichert:

$ xcrun altool --store-password-in-keychain-item "xcrun-upload-app" -u $YOUR-APPLE-ID-EMAIL -p $YOUR-APP-SPECIFIC-PASSWORD

Für die Erstellung eines iOS-Releases folgendes ausführen:

$ rm -rf $PWD/platforms/ios_build
$ ionic capacitor build ios --prod

# Nach dem erstmaligen Bauen eines iOS-Builds muss Mobile.UP.xcworkspace in Xcode geöffnet werden
# Dort muss unter Signing & Capabilities das Development Team 'Uni Potsdam' ausgewählt werden
# Ich habe bisher keinen Weg gefunden, das über das CLI zu regeln

# Erzeugen des .xcarchive und der .ipa
$ xcodebuild -workspace $PWD/platforms/ios/Mobile.UP.xcworkspace \
             -scheme Mobile.UP \
             -sdk iphoneos \
             -configuration AppStoreDistribution archive \
             -archivePath $PWD/platforms/ios_build/archive/Mobile.UP.xcarchive
$ xcodebuild -exportArchive \
             -archivePath $PWD/platforms/ios_build/archive/Mobile.UP.xcarchive \
             -exportOptionsPlist exportOptions.plist \
             -exportPath $PWD/platforms/ios_build/ipa \
             -allowProvisioningUpdates

# Upload zu App Store Connect
$ xcrun altool --upload-app -f $PWD/platforms/ios_build/ipa/Mobile.UP.ipa \
               -u $YOUR-APPLE-ID-EMAIL \
               -p @keychain:xcrun-upload-app

Der letzte Befehl lädt den Build zu App Store Connect (appstoreconnect.apple.com) hoch. Dort kann der Build dann unter Meine Apps > Mobile.UP > TestFlight eingesehen und (nach einer kurzen Bearbeitungszeit) als Testbuild für TestFlight freigegeben werden.

Unter Meine Apps > Mobile.UP > App Store kann ein neues Release für den App Store vorbereitet werden. Dort muss der Build dann ausgewählt werden.

eLiS-Projekt

Add a custom sidebar
Clone this wiki locally