mobile jhipster

Mobile Entwicklung mit ionischem, reagierendem und Jhipster

Dieser Satz von Apps wurde mit diesem Demo -Skript entwickelt. Sie können die Schritte ausführen, um Ihre eigenen Versionen zu erstellen oder die Anwendungen hier auszuführen.

Siehe mobile Entwicklung mit Ionic, React Native und Jhipster, um ein Video dieser Apps zu sehen, die im Jahr 2020 erstellt wurden.

Voraussetzungen: Java 11+ und Node.js.

• Erste Schritte
• Links
• Helfen
• Lizenz

Erste Schritte

Klonen Sie diese Anwendung mit Git auf Ihre lokale Festplatte.

 git clone https://github.com/mraible/mobile-jhipster.git

Um die Jhipster -App auszuführen, starten Sie Keycloak und verwenden Sie Gradle, um sie zu starten.

 cd mobile-jhipster/backend
docker-compose -f src/main/docker/keycloak.yml up -d
./mvnw

Reagieren Sie nativ

Installieren Sie ihre Abhängigkeiten, um die native React Native App auszuführen:

 cd react-native
npm i
npm start

Um die Emulatoren zu betreiben, benötigen Sie ein Expo -Konto. Fügen Sie dann https://auth.expo.io/@<your-username>/Flickr2 als Login-Redirect URI in KeyCloak hinzu.

Um auf Android auszuführen, müssen Sie einige Befehle ausführen, damit Ihr Gerät (oder Emulator) mit Ihrer API und Ihrem Schlüsselkloak kommunizieren kann.

adb reverse tcp:8080 tcp:8080
adb reverse tcp:9080 tcp:9080

Ionisch

Installieren Sie ihre Abhängigkeiten, um die ionische App auszuführen:

 cd ionic
npm i

Sie können es als Web -App mit ionic serve ausführen.

Renn auf iOS

Auf iOS rennen:

 ionic build
ionic capacitor add ios

Fügen Sie Ihr benutzerdefiniertes Schema zu ios/App/App/Info.plist hinzu:

< key >CFBundleURLTypes</ key >
< array >
  < dict >
    < key >CFBundleURLName</ key >
    < string >com.getcapacitor.capacitor</ string >
    < key >CFBundleURLSchemes</ key >
    < array >
      < string >capacitor</ string >
      < string >dev.localhost.ionic</ string >
    </ array >
  </ dict >
</ array >

Führen Sie Ihre App in iOS Simulator aus:

npx cap run ios

Laufen Sie auf Android

Führen Sie die folgenden Befehle aus, um Ihre ionische App auf Android auszuführen:

ionic build
ionic capacitor add android

Ändern Sie das benutzerdefinierte Schema in android/app/src/main/res/values/strings.xml um dev.localhost.ionic zu verwenden:

< string name = " custom_url_scheme " >dev.localhost.ionic</ string >

Das SafariviewController Cordova -Plugin ist als Teil dieses Projekts installiert. Kondensator verwendet Androidx-Abhängigkeiten, das SafariviewController-Plugin verwendet jedoch eine ältere Nicht-und-Roidx-Abhängigkeit. Verwenden Sie Jetifier, um die Verwendung alter Support -Bibliotheken mit den folgenden Befehlen zu entfassen:

 npm install jetifier
npx jetify
npx cap sync android

Führen Sie dann Ihre App in einem Android -Emulator aus.

 npx cap run android

Sie müssen ein paar Befehle ausführen, damit der Emulator mit Ihrer API und Ihrem Keycloak kommunizieren kann.

 adb reverse tcp:8080 tcp:8080
adb reverse tcp:9080 tcp:9080

Wenn Sie java.io.IOException: Cleartext HTTP traffic to localhost not permitted sehen, aktivieren Sie den Textverkehr in android/app/src/main/AndroidManifest.xml :

< application
    ...
    android : usesCleartextTraffic = " true " >

Weitere Informationen finden Sie in diesem Stapelüberlauf Q & A.

Wenn das nicht funktioniert, verwenden Sie einfach OKTA (und seine Funktion https-für-default).

Verwenden Sie Okta für die Identität

Installieren Sie die Okta CLI und führen Sie die folgenden Befehle aus:

 cd backend
okta apps register jhipster
# source .okta.env && ./mvnw to start

cd ../react-native
okta apps create

Wählen Sie native aus und verwenden Sie Folgendes für die Umleitung von URIs:

 http://localhost:19006/,https://auth.expo.io/@<your-username>/Flickr2

Kopieren Sie die Client-ID in react-native/app/config/app-config.js .

Erstellen Sie eine andere native App für Ionic mit den folgenden Umleitungs -URIs:

• Login: http://localhost:8100/callback,dev.localhost.ionic:/callback
• Logout: http://localhost:8100/logout,dev.localhost.ionic:/logout

Aktualisieren Sie ionic/src/app/auth/auth-config.service.ts um die generierte Client-ID zu verwenden.

Starten Sie Ihre mobilen Apps neu und melden Sie sich bei Okta an!

Links

In diesem Beispiel werden die folgenden Open -Source -Bibliotheken verwendet:

• Jhipster
• Jhipster React Native
• Ionic für Jhipster

Helfen

Bitte veröffentlichen Sie alle Fragen zum Stapelüberlauf mit einem "Jhipster" -Tag.

Lizenz

Apache 2.0, siehe Lizenz.