mobile jhipster

Pengembangan Seluler dengan Ionik, Bereaksi Asli, dan Jhipster

Set aplikasi ini dikembangkan menggunakan skrip demo ini. Anda dapat mengikuti langkah -langkah untuk membuat versi Anda sendiri, atau hanya menjalankan aplikasi di sini.

Lihat Pengembangan Seluler dengan Ionic, React Native, dan Jhipster untuk melihat video aplikasi ini dibuat pada tahun 2020.

Prasyarat: Java 11+ dan Node.js.

• Memulai
• Tautan
• Membantu
• Lisensi

Memulai

Klon aplikasi ini ke hard drive lokal Anda menggunakan git.

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

Untuk menjalankan aplikasi Jhipster, mulai Keycloak, lalu gunakan Gradle untuk memulainya.

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

Bereaksi asli

Untuk menjalankan aplikasi React Native, instal dependensinya:

 cd react-native
npm i
npm start

Untuk menjalankan emulator, Anda akan memerlukan akun Expo. Kemudian, tambahkan https://auth.expo.io/@<your-username>/Flickr2 <your-username>/flickr2 sebagai pengalihan login URI di keycloak.

Untuk menjalankan di Android, Anda harus menjalankan beberapa perintah sehingga perangkat Anda (atau emulator) dapat berkomunikasi dengan API dan Keycloak Anda.

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

Ionik

Untuk menjalankan aplikasi ionik, instal dependensinya:

 cd ionic
npm i

Anda dapat menjalankannya sebagai aplikasi web menggunakan ionic serve .

Jalankan di iOS

Untuk menjalankan di iOS:

 ionic build
ionic capacitor add ios

Tambahkan skema khusus Anda ke 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 >

Jalankan aplikasi Anda di iOS Simulator:

npx cap run ios

Jalankan di Android

Untuk menjalankan aplikasi ionik Anda di Android, jalankan perintah berikut:

ionic build
ionic capacitor add android

Ubah Skema Kustom di android/app/src/main/res/values/strings.xml untuk menggunakan dev.localhost.ionic :

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

Plugin SafariviewController Cordova diinstal sebagai bagian dari proyek ini. Kapasitor menggunakan dependensi Androidx, tetapi plugin SafariviewController menggunakan ketergantungan non-androidx yang lebih lama. Gunakan Jetifier untuk menambal penggunaan perpustakaan dukungan lama dengan perintah berikut:

 npm install jetifier
npx jetify
npx cap sync android

Kemudian, jalankan aplikasi Anda dalam emulator Android.

 npx cap run android

Anda harus menjalankan beberapa perintah untuk memungkinkan emulator berkomunikasi dengan API dan Keycloak Anda.

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

Jika Anda melihat java.io.IOException: Cleartext HTTP traffic to localhost not permitted di konsol studio Android Anda, aktifkan lalu lintas teks di android/app/src/main/AndroidManifest.xml :

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

Lihat Q&A Stack Overflow ini untuk informasi lebih lanjut.

Jika itu tidak berhasil, cukup gunakan OKTA (dan fitur https-by-default).

Gunakan okta untuk identitas

Instal OKTA CLI dan jalankan perintah berikut:

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

cd ../react-native
okta apps create

Pilih Asli , lalu gunakan yang berikut untuk Redirect URI:

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

Salin ID Klien untuk react-native/app/config/app-config.js .

Buat aplikasi asli lain untuk ionik dengan URI pengalihan berikut:

• Login: http://localhost:8100/callback,dev.localhost.ionic:/callback
• Logout: http://localhost:8100/logout,dev.localhost.ionic:/logout

Perbarui ionic/src/app/auth/auth-config.service.ts untuk menggunakan ID klien yang dihasilkan.

Mulai ulang aplikasi seluler Anda dan masuk dengan Okta!

Tautan

Contoh ini menggunakan pustaka sumber terbuka berikut:

• Jhipster
• Jhipster bereaksi asli
• Ionik untuk Jhipster

Membantu

Silakan posting pertanyaan apa pun di Stack Overflow dengan tag "Jhipster".

Lisensi

Apache 2.0, lihat lisensi.