expo essentials

expo-essentials عبارة عن قالب Kickass مبني على الجزء العلوي من المعرض ، ويحتوي على بنية مجلد قابلة للإدارة ، وأجنحة الاختبار ، والميزات الأساسية لتشغيلك وتشغيلها على تطبيقك التالي.

جدول المحتويات

1. الميزات الرئيسية
2. الاستخدام
   1. تثبيت
   2. الأوامر
      1. أوامر التطبيق
      2. أوامر الخادم
   3. تحديد السمة
      1. اختيار لوحة ألوان
      2. اختيار خط
      3. تكوين الموضوع الخفيف والظلام
      4. استخدم ألوان السمة في المكونات
   4. إعدادات لبيئات مختلفة
      1. تكوين التطبيق
         1. تكوين التطوير
         2. تكوين التدريج
         3. تكوين الإنتاج
      2. تكوين الخادم
   5. تكامل Firebase
      1. إضافة بيانات اعتماد Firebase الخاصة بك إلى التطبيق
      2. إضافة بيانات اعتماد Firebase الخاصة بك إلى الخادم
3. شاشات
   1. مرحباً
   2. على متن الطائرة
   3. المصادقة
   4. بيت
4. كيفية المساهمة

الميزات الرئيسية

• جميع ميزات المعرض (إعادة التحميل الساخن ، الشاشة المتقاطعة ، شاشة البداية ، إلخ)
• ؟ تكوين السمات السهل (لوحة الألوان والخطوط)
• ؟ تنسيق ESLINT والأجمل لتعزيز رمز الأنظف
• ؟ الوضع الخفيف والظلام
• تكامل Firebase
• ؟ ترحيب الشاشة عند الإطلاق الأول
• ❓ Swiper لتسليط الضوء على الميزات
• مصادقة المستخدم باستخدام Firebase ، وتسجيل الدخول المستمر للمستخدم عبر عمليات إطلاق متعددة
• ↪ إعداد التنقل بناءً على التنقل التفاعلي
• ؟ إخطارات الخبز المحمص
• ؟ شبكة قطع الشبكة
• ؟ الدعم دون اتصال من خلال التخزين المؤقت لطلبات وصور
• ؟ تكوين البيئة بناءً على مرحلة التطبيق (تطوير وتدريج وإنتاج)
• ؟ نماذج سهلة مع التحقق من الإدخال بناءً على Formik و Yup
• (اختياري) خادم ExpressJS وقاعدة بيانات MongoDB التي تم تكوينها باستخدام برامج الوسيطة مصادقة Firebase ، وإعداد البيئة ، واختبارات الوحدة ، واختبارات التكامل
• ؟ المكونات العامة المكتوبة بمرونة (الزر ، النصي ، البطاقات ، الوسائط ، الدوار ، إلخ)

(... والكثير منهم قريبًا!)

الاستخدام

تثبيت

1. استنساخ/شوكة هذا الريبو (بناءً على تفضيلاتك)
2. ابدأ تطبيق الجوال

    $ cd client
   $ npm start
   

3. (اختياري) ابدأ خادم ExpressJS ومثيل MongoDB (تحتاج إلى تثبيت Docker)

    $ docker-compose up --build
   

الأوامر

أوامر التطبيق

يأمر	وصف
npm start	ابدأ معرض خادم مترو
npm run android	يبدأ التطبيق في محاكي Android
npm run ios	يبدأ التطبيق في محاكي iOS
npm run web	يبدأ التطبيق في متصفح الويب
npm run test	التطوير النشط للاختبارات ، ومشاهدة الملفات للتغييرات وإعادة تشغيل جميع الاختبارات
npm run testDebug	Debug و Console.logs وأعد إعادة تشغيل الملف الذي تم تغييره فقط
npm run testFinal	يعرض تغطية الرمز في CLI ويقوم بتحديث تغطية الكود HTML
npm run updateSnapshots	عند تحديث شاشة/مكون ، ستلقي لقطات الاختبار خطأً ، وهذا يقوم بتحديثها
npm run eject	قم بإخراج تطبيق المعرض لمشاريع Android و iOS الأصلية (الحذر: هذا الإجراء لا رجعة فيه)

أوامر الخادم

يأمر	وصف
npm run start:dev	يبدأ الخادم بتكوين التطوير ، ويقوم بإعادة تشغيل الخادم على تغيير الملف
npm run start:staging	يبدأ الخادم بتكوين التدريج
npm run start:prod	يبدأ الخادم بتكوين الإنتاج
npm run test:watch	التطوير النشط للاختبارات ، ومشاهدة الملفات للتغييرات وإعادة تشغيل الاختبارات
npm run test	يعرض تغطية الرمز في CLI ويقوم بتحديث تغطية الكود HTML

تحديد السمة

يستخدم هذا القالب هريرة واجهة المستخدم للسيطرة على السمة. لقراءة المزيد حول هذا الموضوع ، تأكد من زيارة مستنداتهم.

اختيار لوحة ألوان

• استخدم أداة نظام تصميم EVA لإنشاء لوحة تعتمد على لون علامتك التجارية.
• قم بتصدير اللوحة كـ JSON وتخزين القيم في client/app/config/colors.js

اختيار خط

• قم بتخزين ملفات الخط المطلوبة ( .ttf أو .otf مفضل) في مجلد client/app/assets/fonts . (بشكل افتراضي ، يستخدم هذا القالب خط Jost).
• قم بتحديث أسماء الخطوط والمسارات في client/App.js :

تكوين الموضوع الخفيف والظلام

يمكنك تحديد ألوان مختلفة لاستخدامها في وضع الضوء والوضع المظلم عن طريق تحديث القيم في client/app/config/lightTheme.js client/app/config/darkTheme.js على التوالي.

استخدم ألوان السمة في المكونات

(تستخدم هذه الطريقة خطافات رد الفعل ، لذا تأكد من العمل مع مكونات رد الفعل الوظيفية)

إعدادات لبيئات مختلفة

يدعم هذا القالب التكوينات المتغيرة بسلاسة لبناء البيئة المختلفة القائمة على التطبيق (على سبيل المثال ، التطوير والتدريج والإنتاج )

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

يتم تعيين إعدادات تطبيق الجوال في client/app/config/settings.js .

تكوين التطوير

يجب تعيين تكوين التطوير في كائن dev مباشرة.

تكوين التدريج

يجب تعيين تكوين التدريج في كائن staging . يمكنك إما تعيينها مباشرة ، أو يمكنك إضافتها من خلال ملف client/.env DOT (إذا كان لديك بيانات حساسة).

تكوين الإنتاج

يجب تعيين تكوين الإنتاج في كائن prod ، ويفضل أن يتم إضافته من خلال ملف client/.env .

تكوين الخادم

يتم تعيين إعدادات الخادم في server/config/settings.js . يعمل خادم ExpressJS في حاوية Docker ، بحيث يمكنك تحديد ملف البيئة الذي يتم توصيله في الحاوية.

على سبيل المثال ، يمكن تعيين تكوين بيئة التطوير على النحو التالي:

• قم بإنشاء ملف server/.env.dev :

• حدد باستخدام ملف البيئة هذا في ملف docker-compose.yml :

تكامل Firebase

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

يُقترح أن تقوم بإنشاء 3 مشاريع Firebase منفصلة لتطبيقك: app-dev ، app-staging ، app-prod (لكل بيئة يستخدمها التطبيق الخاص بك). هذا لضمان أنه يمكنك اختبار Environmnts بشكل مستقل عن بعضها البعض ، ومنع البيانات المتداخلة.

إضافة بيانات اعتماد Firebase الخاصة بك إلى التطبيق

قم بإنشاء تكوينات WebApp في مشاريع Firebase الخاصة بك ، وأضفها في كائنات البيئة المناسبة.

إضافة بيانات اعتماد Firebase الخاصة بك إلى الخادم

يستخدم الخادم FireBase Admin SDK للقيام بإنشاء برامج مودع للمصادقة. يقوم هذا الوسيطة بفك تشفير رمز JWT المرسلة من التطبيق من خلال طلب API لتحديد المستخدمين وأدوارهم.

• قم بتنزيل بيانات اعتماد حساب الخدمة الخاصة بك من Firebase وحفظها في server/config/firebase-service-account-<environment>.json
  ( server/config/firebase-service-account-dev.json ، server/config/firebase-service-account-staging.json ، server/config/firebase-service-account-prod.json )

شاشات

ترحيب الشاشة

شاشة على متن الطائرة

شاشة المصادقة

الشاشة الرئيسية

كيفية المساهمة

1. شوكة المستودع
2. إضافة إصلاح الأخطاء أو إضافة ميزة جديدة وإنشاء طلب سحب لهذا الريبو
3. اكتب قائمة مفصلة من التغييرات المقترحة في وصف طلب السحب