หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

การพัฒนามือถือด้วยไอออนิกปฏิกิริยาพื้นเมืองและ 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 เป็นการเปลี่ยนเส้นทาง URI ใน Keycloak

ในการทำงานบน Android คุณจะต้องเรียกใช้คำสั่งบางอย่างเพื่อให้อุปกรณ์ (หรือ emulator) สามารถสื่อสารกับ 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 Simulator: 

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 ที่เก่ากว่า ใช้ 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-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

คัดลอกรหัสลูกค้าไปยัง react-native/app/config/app-config.js

สร้างแอพ ดั้งเดิม อื่นสำหรับอิออนด้วยการเปลี่ยนเส้นทาง URIs ต่อไปนี้:

  • เข้าสู่ระบบ: 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

ช่วย

กรุณาโพสต์คำถามใด ๆ เกี่ยวกับสแต็คล้นด้วยแท็ก "jhipster"

ใบอนุญาต

Apache 2.0 ดูใบอนุญาต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด