mobile jhipster

Ionic、React Native、およびJhipsterを使用したモバイル開発

この一連のアプリは、このデモスクリプトを使用して開発されました。手順に従って独自のバージョンを作成するか、ここでアプリケーションを実行するだけです。

Ionic、React Native、およびJhipsterを使用したモバイル開発を参照して、2020年にこれらのアプリが作成されているビデオを表示します。

前提条件： Java 11+およびnode.js.

• はじめる
• リンク
• ヘルプ
• ライセンス

はじめる

このアプリケーションは、Gitを使用してローカルハードドライブにクローンします。

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

Jhipsterアプリを実行するには、keycloakを開始し、Gradleを使用して起動します。

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

ネイティブの反応

Reactネイティブアプリを実行するには、依存関係をインストールします。

 cd react-native
npm i
npm start

エミュレータで実行するには、Expoアカウントが必要です。次に、 https://auth.expo.io/@<your-username>/Flickr2 <your-username>/flickr2をキークロークのログインリダイレクトURIとして追加します。

Androidで実行するには、デバイス（またはエミュレータ）がAPIおよびkeycloakと通信できるように、いくつかのコマンドを実行する必要があります。

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

イオン

Ionicアプリを実行するには、その依存関係をインストールします。

 cd ionic
npm i

ionic serveを使用してWebアプリとして実行できます。

iOSで実行します

iOSで実行するには：

 ionic build
ionic capacitor add ios

ios/App/App/Info.plistにカスタムスキームを追加します：

< 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 >

iOSシミュレータでアプリを実行します：

npx cap run ios

Androidで実行します

AndroidでIonicアプリを実行するには、次のコマンドを実行します。

ionic build
ionic capacitor add android

android/app/src/main/res/values/strings.xmlでカスタムスキームを変更するには、 dev.localhost.ionic ：

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

SafariviewController Cordovaプラグインは、このプロジェクトの一部としてインストールされています。コンデンサはAndroidx依存関係を使用しますが、SafariviewControllerプラグインは古い非アンドロイド依存関係を使用します。 Jetifierを使用して、次のコマンドを使用して古いサポートライブラリの使用パッチを適用します。

 npm install jetifier
npx jetify
npx cap sync android

次に、Androidエミュレータでアプリを実行します。

 npx cap run android

エミュレータがAPIおよびkeycloakと通信できるようにするには、いくつかのコマンドを実行する必要があります。

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

java.io.IOException: Cleartext HTTP traffic to localhost not permitted場合は、 android/app/src/main/AndroidManifest.xmlでクリアテキストトラフィックを有効にします。

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

詳細については、このスタックオーバーフローQ＆Aを参照してください。

それがうまくいかない場合は、Okta（およびそのhttps-by-default機能）を使用してください。

アイデンティティにはOKTAを使用します

OKTA CLIをインストールし、次のコマンドを実行します。

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

cd ../react-native
okta apps create

ネイティブを選択し、次のように使用してURIをリダイレクトします。

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

クライアントIDをreact-native/app/config/app-config.jsにコピーします。

次のリダイレクトURIを使用して、Ionic用の別のネイティブアプリを作成します。

• ログイン： http://localhost:8100/callback,dev.localhost.ionic:/callback
• logout： http://localhost:8100/logout,dev.localhost.ionic:/logout

ionic/src/app/auth/auth-config.service.tsを更新して、生成されたクライアントIDを使用します。

モバイルアプリを再起動し、Oktaでサインインしてください！

リンク

この例では、次のオープンソースライブラリを使用しています。

• Jhipster
• Jhipster React Native
• Jhipsterのイオン

ヘルプ

「Jhipster」タグでスタックオーバーフローに質問を投稿してください。

ライセンス

Apache 2.0、ライセンスを参照してください。