mobile jhipster

Ionic, React Native 및 Jhipster를 사용한 모바일 개발

이 앱 세트는이 데모 스크립트를 사용하여 개발되었습니다. 단계를 따라 자신의 버전을 만들거나 여기에서 응용 프로그램을 실행할 수 있습니다.

2020 년에 생성 된이 앱의 비디오를 보려면 Ionic, React Native 및 Jhipster를 사용한 모바일 개발을 참조하십시오.

전제 조건 : 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

에뮬레이터에서 실행하려면 엑스포 계정이 필요합니다. 그런 다음 keycloak에서 URI 로그인으로 https://auth.expo.io/@<your-username>/Flickr2 추가하십시오.

Android에서 실행하려면 장치 (또는 에뮬레이터)가 API 및 KeyCloak과 통신 할 수 있도록 일부 명령을 실행해야합니다.

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

이온

이온 앱을 실행하려면 종속성을 설치하십시오.

 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 앱을 실행하려면 다음 명령을 실행하십시오.

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 플러그인은이 프로젝트의 일부로 설치됩니다. Capacitor는 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/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

기본을 선택한 다음 URIS 리디렉션에 다음을 사용하십시오.

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

클라이언트 ID를 react-native/app/config/app-config.js 에 복사하십시오.

다음 리디렉션 Uris로 Ionic 용 다른 기본 앱을 만듭니다.

• 로그인 : http://localhost:8100/callback,dev.localhost.ionic:/callback
• 로그 아웃 : http://localhost:8100/logout,dev.localhost.ionic:/logout

생성 된 클라이언트 ID를 사용하려면 ionic/src/app/auth/auth-config.service.ts 업데이트하십시오.

모바일 앱을 다시 시작하고 Okta로 로그인하십시오!

모래밭

이 예제는 다음과 같은 오픈 소스 라이브러리를 사용합니다.

• jhipster
• jhipster는 원시를 반응합니다
• jhipster의 이온

돕다

"jhipster"태그로 스택 오버플로에 질문을 게시하십시오.

특허

Apache 2.0, 라이센스를 참조하십시오.