mobile jhipster

帶有離子，反應本地和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 Native應用程序，請安裝其依賴項：

 cd react-native
npm i
npm start

要在模擬器上運行，您需要一個博覽會帳戶。然後，添加https://auth.expo.io/@<your-username>/Flickr2 your-username>/flickr2在KeyCloak中作為登錄重定向URI。

要在Android上運行，您需要運行一些命令，以便您的設備（或模擬器）可以與API和KeyCloak通信。

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

離子

要運行離子應用程序，請安裝其依賴項：

 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 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插件使用了舊的非Androidx依賴關係。使用噴射器通過以下命令來修補舊支持庫的使用：

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

有關更多信息，請參見此堆棧溢出問答。

如果那不起作用，只需使用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

選擇本機，然後將以下方式用於重定向uris：

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

將客戶端ID複製到react-native/app/config/app-config.js 。

使用以下重定向URI創建另一個本機應用程序：

• 登錄： http://localhost:8100/callback,dev.localhost.ionic:/callback
• 註銷： http://localhost:8100/logout,dev.localhost.ionic:/logout

更新ionic/src/app/auth/auth-config.service.ts使用生成的客戶端ID。

重新啟動您的移動應用程序並與Okta登錄！

鏈接

此示例使用以下開源庫：

• 雜物
• 雜物反應本地
• 離子j jhipster

幫助

請在堆棧溢出上發布任何問題，並帶有“ jhipster”標籤。

執照

Apache 2.0，請參閱許可證。