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，请参阅许可证。