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, установите его зависимости:

 cd react-native
npm i
npm start

Чтобы запустить эмуляторы, вам понадобится учетная запись Expo. Затем добавьте https://auth.expo.io/@<your-username>/Flickr2 в качестве логинного перенаправления URI в KeyCloak.

Чтобы запустить на Android, вам нужно будет запустить некоторые команды, чтобы ваше устройство (или эмулятор) мог общаться с вашим API и KeyCloak.

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

Ионный

Чтобы запустить приложение Ionic, установите его зависимости:

 cd ionic
npm i

Вы можете запустить его в качестве веб -приложения, используя ionic serve .

Беги на 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

Чтобы запустить ваше приложение Ionic на 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 >

В рамках этого проекта установлен плагин Cordova Safariviewcontroller. Конденсатор использует Androidx зависимости, но плагин Safariviewcontroller использует более старую зависимость от Androidx. Используйте 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 Studio, включите четкий текстовый трафик в android/app/src/main/AndroidManifest.xml :

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

Смотрите этот стек переполнение вопросов и ответов для получения дополнительной информации.

Если это не сработает, просто используйте Okta (и ее функция HTTPS-By Defaul).

Используйте Окту для идентификации

Установите CLI Okta и запустите следующие команды:

 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

Скопируйте идентификатор клиента, чтобы react-native/app/config/app-config.js .

Создайте другое нативное приложение для Ionic со следующим перенаправлением 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 для использования сгенерированного идентификатора клиента.

Перезагрузите свои мобильные приложения и войдите в Okta!

Ссылки

В этом примере используются следующие библиотеки с открытым исходным кодом:

• Jhipster
• Jhipster реагирует на родной
• Ionic для Jhipster

Помощь

Пожалуйста, опубликуйте любые вопросы о переполнении стека с помощью тега «jhipster».

Лицензия

Apache 2.0, см. Лицензию.