bareapp

Ionic 5/Capacitor 3 + Tailwind CSS + Auth0 + GraphQl + React + TypeScript Demo World World Mobile Demo

تطبيق تجريبي لـ Ionic 5 و Capacitor 3 يوضح كيفية إنشاء تطبيق منصة عبر العالم الحقيقي مع المصادقة ، GraphQL ، و React. كل شيء ممكن مع الإضافات المجتمعية المجانية فقط.

ربما تكون هنا لأنه لا يمكنك العثور على مثال أيوني/مكثف يستخدم CSS Tailwind أو أي شيء مع المصادقة. ونعم ، هذا هو نفس السبب في أنني أقوم ببناء هذا التطبيق التجريبي هنا. لذلك ، استمتع!

سمات

• ⚡ أحدث ionic 5 + مكثف 3
• ؟ تغذية البيانات في الوقت الحقيقي (dev.to) عبر GraphQL
• ؟ تأمين مصادقة SSO/كلمة المرور عبر Auth0
• ؟ التصميم مع tailwindcss
• ؟ حية إعادة التحميل! تنعكس تغييرات الكود تلقائيًا في التطبيق!
• ⚛ ليس زاوي ، إنه رد فعل!
• ؟ كل شيء في TypeScript!
• ؟ تطبيق واحد لكل من iOS و Android

بداية سريعة

1. ببساطة استنساخ الريبو و bootstrap المستودع عبر npm install !

npm install

2. قم بتشغيل التطبيق على جهاز محاكاة أو جهاز حقيقي

npm run ios

أو

npm run android

3. افتح محرر التعليمات البرمجية وابدأ الترميز! جميع ملفات المصدر موجودة في دليل src .

تكوين التطبيق الخاص بك

هناك بعض الأشياء التي قد ترغب في تغييرها لتخصيص تطبيقك. أولاً ، سترغب في تغيير قيم APP_ID و AUTH0_CLIENT_ID في ملف src/environments/environment.ts .

أيضًا ، checkout capacitor.config.ts وقم بتخصيصه لتناسب احتياجاتك. لمزيد من التفاصيل ، راجع https://capacitorjs.com/docs/config

اختبر تطبيقك مثل المحترف! ⚡⚡⚡

يمكن أن يكون تشغيل محاكي متنقل على جهازك المحلي بطيئًا بشكل مؤلم ...؟ حسنًا. هناك طريقة لتسريعها: قم بتشغيله على السحابة ، وحتى أفضل ، على جهاز حقيقي !!!

هناك اثنين من المحاكيات السحابة المتاحة. في حالتي ، أستخدم Browserstack لأنه يوفر اختبارًا في الوقت الفعلي على جهاز حقيقي. بدلاً من ذلك ، يعد Lambdatest أيضًا خيارًا جيدًا بسعر أرخص ، على الرغم من أنها توفر فقط المحاكسين ، وليس الأجهزة الحقيقية. لكن Google ستساعدك في العثور على أفضل ما لك.

أشارك الإعداد الخاص بي هنا ، حتى تتمكن من تكرار التجربة على مزودك.

1. إعداد نفق محلي للمزود. على سبيل المثال ، استخدام Browserstack Local أو Lambdatest Tunnel.

2. يقدم تطبيق الويب من جهازك المحلي أو حتى على السحابة.

   على سبيل المثال ، قم بتشغيل npm run start:web لخدمة التطبيق من الجهاز المحلي. (ملاحظة: HOST PORT قابلة للتكوين في ionic:serve نصي دورة الحياة).

3. قم بتعيين عنوان URL للتقديم الذي يمكن أن يصل إليه التطبيق عبر النفق في البيئة المتغير LIVE_RELOAD_URL وفتح المشروع لتجميع حزمة التطبيق: على سبيل المثال LIVE_RELOAD_URL=http://localhost.lambdatest.com:8100 npm run open:ios إذا اتبعت الإعداد default لاختبار lambda.

   تحت الغطاء ، LIVE_RELOAD_URL تم تحميله في capacitor.config.ts لإنشاء إعداد إعادة التحميل المباشر ذي الصلة أدناه:

{
  "server" : {
    "url" : " <LIVE_RELOAD_URL> " ,
    "cleartext" : true
  }
}

4. قم apk Build .ipa

5. قم بتشغيل التطبيق على جهاز سحابة واستمتع!

ملاحظة حاليًا ، يتم اختبار التطبيق فقط على iOS و Android.

ملاحظات التنمية

حية إعادة التحميل

هناك بعض البرامج التعليمية التي تقترح عليك وضع عنوان IP الخارجي يدويًا على capacitor.config.ts من أجل استخدام إعادة التحميل المباشر.

على الرغم من أنه من الصحيح أن هناك حاجة للتكوين من أجل الاتصال بخادم ويب خارجي لتحميل تطبيق الويب ، إذا كنت تستخدم الإعداد الخاص بي ، يتم تحميل هذا التكوين تلقائيًا عند توفير LIVE_RELOAD_URL .

لا تحتاج إلى إضافته يدويًا للتطوير أو إزالته لبناء الإنتاج.

المصادقة

تكوين Auth0

لمزيد من التفاصيل ، تحقق من الدليل في Auth0

1. تكوين عناوين URL لاتصالات الاتصال ، عنوان URL للاتصال هو عنوان URL في التطبيق الخاص بك حيث يعيد Auth0 توجيه المستخدم بعد المصادقة.

يجب أن يكون عنوان URL لرد الاتصال الخاص بك في حقل عنوان URL للاتصالات المسموح به في إعدادات التطبيق الخاصة بك. إذا لم يتم تعيين هذا الحقل ، فلن يتمكن المستخدمون من تسجيل الدخول إلى التطبيق وسيحصلون على خطأ. your_package_id: // your_domain/cordova/your_package_id/callback

2. تكوين الأصول المسموح بها (CORS) إضافة ملف كأصل مسموح به إلى مربع Origins (CORS) المسموح به.

file://*

إذا كنت تختبر التطبيق على المتصفح عبر npm run start:web أو ionic serve المكافئة ، فكن على دراية بأن الإعداد Allowed Origins وعنوان Callback URLs قد يكون مختلفًا. بشكل افتراضي ، يجب أن يكون من http://localhost:8100 .

تكوين التطبيق

لتكون قادرة على فتح التطبيق من مخطط مخصص ، تحتاج إلى تسجيل المخطط أولاً. على افتراض أن المخطط المخصص الخاص بك هو custom.scheme scheme بحيث يفتح التطبيق أي custom.scheme://<url> ارتباط ، اتبع التعليمات أدناه للمنصرين.

تحقق من https://capacitorjs.com/docs/apis/app لمزيد من التفاصيل.

لنظام التشغيل iOS ،

1. في ios/App/App/Info.plist أضف شيئًا مشابهًا لما يلي:

< key >CFBundleURLTypes</ key >
< array >
  < dict >
    < key >CFBundleURLName</ key >
    < string >custom.scheme</ string >
    < key >CFBundleURLSchemes</ key >
    < array >
      < string >custom.scheme</ string >
    </ array >
  </ dict >
</ array >

تغيير مهم custom.scheme إلى مخططك المخصص.

لنظام Android ،

1. في android/app/src/main/AndroidManifest.xml ، داخل قسم النشاط ، أضف ما يلي:

< intent-filter >
    < action android : name = " android.intent.action.VIEW " />
    < category android : name = " android.intent.category.DEFAULT " />
    < category android : name = " android.intent.category.BROWSABLE " />
    < data android : scheme = " @string/custom_url_scheme " />
</ intent-filter >

2. ثم في android/app/src/main/res/values/strings.xml ، قم بتغيير قيمة custom_url_scheme إلى مخططك المخصص.

3. أخيرًا في android/app/src/main/res/xml/config.xml ، أضف ما يلي في الجذر بحيث يتم إطلاق مثيل واحد فقط من تطبيقك ، وبالتالي بعد المصادقة ، سيتم دائمًا تسليم رد الاتصال إلى التطبيق الصحيح.

< preference name = " AndroidLaunchMode " value = " singleTask " />

روابط عميقة

تتيح لك الروابط العميقة إرسال رابط لشخص ما في التطبيق الذي قاموا بتثبيته على هواتفهم. لإعداده ، اتبع الدليل الرسمي هنا https://capacitorjs.com/docs/guides/deep-links

التعليمات

1. كيفية تشغيل التطبيق على الجهاز؟

   افتح Xcode أو Android Studio مع الأمر أدناه وحدد هدف الجهاز قبل البدء في التشغيل.

npm run open ios

أو

npm run open android

الاعتمادات

1. شكر خاص لـ OneGraph https://www.onegraph.com لتقديم البيانات التجريبية. إنها خدمة واحدة متصلة بالعديد من الآخرين مثل Stripe و Github و Twitter وما إلى ذلك. تحقق منها.

عروض تجريبية رائعة أخرى

• NextJS-tailwind-ionic-capacitor-starter: عرض مشابه مع Tailwindcss ، ولكن تم تحقيقه عبر Next.js و JS فقط.

رخصة

حقوق الطبع والنشر © 2021 ، ألفيس تانغ. صدر تحت رخصة معهد ماساتشوستس للتكنولوجيا.