الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

تطور الهاتف المحمول مع أيوني ، راي مواطن ، و 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

لتشغيل المحاكيات ، ستحتاج إلى حساب معرض. ثم ، أضف https://auth.expo.io/@<your-username>/Flickr2 كإعادة توجيه تسجيل الدخول إلى uri في keycloak.

لتشغيله على 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

لتشغيل تطبيقك الأيوني على 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 كجزء من هذا المشروع. يستخدم 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 Studio ، قم بتمكين حركة المرور النصية في android/app/src/main/AndroidManifest.xml : 

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

شاهد هذا المكدس Overflow 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

انسخ معرف العميل إلى 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

يساعد

يرجى نشر أي أسئلة على stack Overflow مع علامة "Jhipster".

رخصة

Apache 2.0 ، انظر الترخيص.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل