spotthestation

مرحبًا بك في STSAPP

تم حذاء هذا المشروع باستخدام Ignite CLI V8.4.2 (React Native V0.69.7).

يشمل حاليا:

• رد فعل مواطن
• رد فعل الملاحة
• شجرة Mobx State
• TypeScript
• وأكثر!

ابدء

المتطلبات الأساسية

قبل أن تتمكن من تشغيل هذا المشروع ، ستحتاج إلى تثبيت البرنامج التالي على جهازك:

• node.js (v16.x أو أعلى)
• الغزل (v1.x)
• رد فعل CLI الأصلي

تثبيت

1. نسخ نموذج ENV File إلى دليل التكوين:

    cp .env.example scripts/config/.env.staging
   

2. في ملف scripts/config/.env.staging ، قدم قيمًا للمتغيرات التالية:
   • API_URL - URL من الواجهة الخلفية ، على سبيل المثال: http: // localhost: 5000/.
   • GOOGLE_API_TOKEN - رمز API لـ Google MAPS. تعلم كيفية الحصول عليها هنا.
   • MAPBOX_API_TOKEN - رمز MapBox الخاص بك. تعلم كيفية الحصول عليها هنا.
   • يمكنك ترك متغيرات أخرى دون تغيير
3. قم بتشغيل البرنامج النصي config-env.sh

    ./scripts/config-env.sh staging
   

4. إنشاء ملف .netrc في الدليل الرئيسي (وليس دليل المشروع) مع المحتوى التالي:

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   استبدل YOUR_SECRET_MAPBOX_ACCESS_TOKEN برمز mapbox الخاص بك.
5. تغيير أذونات ملف .netrc

    sudo chmod 0600 ~/.netrc
   

6. Create .gradle/gradle.properties File في الدليل الرئيسي (وليس دليل المشروع) مع المحتوى التالي:

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   استبدل YOUR_SECRET_MAPBOX_ACCESS_TOKEN برمز mapbox الخاص بك.
7. قم بتشغيل npx @sentry/wizard@latest -s -i reactNative لإعداد Sentry. لا تتردد في رفض التحديثات و/أو تثبيت القرون.
8. تثبيت تبعيات المشروع:

    yarn install
   

تشغيل على جهاز iOS

1. افتح ios/STSApp.xcworkspace في xcode.
2. انتقل إلى علامة التبويب Signing & Capabilities .
3. علامة Automatically manage signing .
4. حدد فريق التطوير. ملاحظة: نظرًا لأن هذا المشروع يستخدم إشعارات الدفع ، فإن فرق التطوير الشخصية لن تعمل.
5. تغيير معرف حزمة إلى أي قيمة.
6. انقر فوق أيقونة ابدأ إنشاء التطبيق وتشغيله على جهازك.

تشغيل على جهاز Android

قم بتشغيل الأمر التالي:

 yarn android

إذا نجحت Build ، فقد تحتاج إلى فتح التطبيق يدويًا على جهازك.

هيكل المشروع

سيبدو هيكل ignite Boilerplate Project مشابهًا لهذا:

 ignite-project
├── app
│   ├── components
│   ├── config
│   ├── i18n
│   ├── models
│   ├── navigators
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
├── test
│   ├── __snapshots__
│   ├── mockFile.ts
│   ├── setup.ts
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── index.js
├── ios
│   ├── IgniteProject
│   ├── IgniteProject-tvOS
│   ├── IgniteProject-tvOSTests
│   ├── IgniteProject.xcodeproj
│   └── IgniteProjectTests
├── .env
└── package.json

./app دليل

يتضمن مشروع ignite boilerplate دليل app . هذا دليل يجب عليك إنشاءه عادة عند استخدام Vanilla React Native.

يشبه دليل app الداخلي ما يلي:

 app
├── components
├── config
├── i18n
├── models
├── navigators
├── screens
├── services
├── theme
├── utils
├── app.tsx

المكونات هذا هو المكان الذي تعيش فيه مكوناتك القابلة لإعادة الاستخدام والتي تساعدك على بناء شاشاتك.

I18N هذا هو المكان الذي ستعيش فيه ترجماتك إذا كنت تستخدم react-native-i18n .

النماذج هذا هو المكان الذي ستعيش فيه طرز التطبيق. يحتوي كل طراز على دليل سيحتوي على ملف طراز mobx-state-tree ، وملف اختبار ، وأي ملفات داعمة أخرى مثل الإجراءات ، والأنواع ، إلخ.

الملاحون هذا هو المكان الذي سيعيش فيه Navigators react-navigation .

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

الخدمات أي الخدمات التي تتفاعل مع العالم الخارجي ستعيش هنا (فكر في واجهات برمجة التطبيقات ، ودفع الإخطارات ، وما إلى ذلك).

يعيش السمة هنا موضوع تطبيقك ، بما في ذلك التباعد والألوان والطباعة.

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

App.tsx هذه هي نقطة الدخول إلى تطبيقك. هذا هو المكان الذي ستجد فيه مكون التطبيق الرئيسي الذي يجعل بقية التطبيق.

./دليل الدليل

سيحتفظ هذا الدليل بتكوينات الدائرية والسخرية.

كيفية الحصول على رمز Mapbox؟

1. قم بإنشاء حساب MapBox هنا
2. انتقل للوصول إلى صفحة الرموز
3. انقر فوق Create a token
4. قم بتسمية الرمز المميز الخاص بك ، وقِّم جميع مربعات الاختيار العامة للنطاقات العامة ، وقم بخصم مربعات الاختيار Secret Scopes التالية:
   • الأنماط: تنزيل
   • التنزيلات: اقرأ
   • الرؤية: تنزيل
   • التنقل: تنزيل
5. انقر فوق Create token ونسخ الرمز المميز الخاص بك. يجب أن تبدأ مع sk.