spotthestation

Selamat datang di STSAPP

Proyek ini bootstraped menggunakan Ignite CLI V8.4.2 (React Native V0.69.7).

Saat ini termasuk:

• Bereaksi asli
• Navigasi Bereaksi
• Pohon Negara Mobx
• Naskah
• Dan banyak lagi!

Memulai

Prasyarat

Sebelum Anda dapat menjalankan proyek ini, Anda harus menginstal perangkat lunak berikut di mesin Anda:

• Node.js (v16.x atau lebih tinggi)
• benang (v1.x)
• Bereaksi CLI asli

Instalasi

1. Salin File Contoh Env ke direktori konfigurasi:

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

2. Dalam scripts/config/.env.staging file, berikan nilai untuk variabel berikut:
   • API_URL - URL dari backend Anda, misalnya: http: // localhost: 5000/.
   • GOOGLE_API_TOKEN - Token API Google Maps Anda. Pelajari cara mendapatkannya di sini.
   • MAPBOX_API_TOKEN - token Mapbox Anda. Pelajari cara mendapatkannya di sini.
   • Anda dapat meninggalkan variabel lain yang tidak berubah
3. Jalankan skrip config-env.sh

    ./scripts/config-env.sh staging
   

4. Buat file .netrc di direktori home Anda (bukan direktori proyek) dengan konten berikut:

    machine api.mapbox.com
   login mapbox
   password YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Ganti YOUR_SECRET_MAPBOX_ACCESS_TOKEN dengan token mapbox Anda.
5. Ubah izin file .netrc

    sudo chmod 0600 ~/.netrc
   

6. Buat file .gradle/gradle.properties di direktori home Anda (bukan direktori proyek) dengan konten berikut:

    MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
   

   Ganti YOUR_SECRET_MAPBOX_ACCESS_TOKEN dengan token mapbox Anda.
7. Jalankan npx @sentry/wizard@latest -s -i reactNative untuk mengatur Sentry. Jangan ragu untuk menolak pembaruan dan/atau pemasangan pod.
8. Instal Project Dependencies:

    yarn install
   

Berjalan di perangkat iOS

1. Buka ios/STSApp.xcworkspace di Xcode.
2. Buka tab Signing & Capabilities .
3. Centang Automatically manage signing .
4. Pilih Tim Pengembangan. Catatan: Karena proyek ini menggunakan pemberitahuan push, tim pengembangan pribadi tidak akan berfungsi.
5. Ubah Bundle Identifier ke nilai apa pun.
6. Klik Ikon Mulai untuk membangun dan menjalankan aplikasi di perangkat Anda.

Berjalan di perangkat android

Jalankan perintah berikut:

 yarn android

Jika Build berhasil, Anda mungkin perlu membuka aplikasi secara manual di perangkat Anda.

Struktur proyek

Struktur proyek boilerplate Ignite akan terlihat mirip dengan ini:

 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

Direktori ./app

Termasuk dalam proyek Boilerplate Ignite adalah direktori app . Ini adalah direktori yang biasanya harus Anda buat saat menggunakan vanilla bereaksi asli.

Bagian dalam direktori app terlihat mirip dengan yang berikut:

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

Komponen Di sinilah komponen yang dapat digunakan kembali hidup yang membantu Anda membangun layar Anda.

i18n Di sinilah terjemahan Anda akan hidup jika Anda menggunakan react-native-i18n .

Model Di sinilah model aplikasi Anda akan tinggal. Setiap model memiliki direktori yang akan berisi file model mobx-state-tree , file uji, dan file pendukung lainnya seperti tindakan, jenis, dll.

Navigator di sinilah navigator react-navigation Anda akan tinggal.

Layar Di sinilah komponen layar Anda akan tinggal. Layar adalah komponen bereaksi yang akan mengambil seluruh layar dan menjadi bagian dari hierarki navigasi. Setiap layar akan memiliki direktori yang berisi file .tsx , bersama dengan aset atau file pembantu lainnya.

Layanan Layanan apa pun yang berinteraksi dengan dunia luar akan hidup di sini (pikirkan API istirahat, pemberitahuan push, dll.).

Tema di sini hidup dengan tema untuk aplikasi Anda, termasuk jarak, warna, dan tipografi.

PERTAMA INI ADALAH Tempat yang bagus untuk menempatkan pembantu dan utilitas lain -lain. Hal -hal seperti pembantu tanggal, format, dll. Sering ditemukan di sini. Namun, itu hanya boleh digunakan untuk hal -hal yang benar -benar dibagikan di seluruh aplikasi Anda. Jika helper atau utilitas hanya digunakan oleh komponen atau model tertentu, pertimbangkan co-locating helper Anda dengan komponen atau model itu.

app.tsx Ini adalah titik masuk ke aplikasi Anda. Di sinilah Anda akan menemukan komponen aplikasi utama yang membuat sisa aplikasi.

Direktori ./test

Direktori ini akan menahan konfigurasi dan mengolok -olok lelucon Anda.

Bagaimana cara mendapatkan token mapbox?

1. Buat akun MapBox di sini
2. Pergi ke Halaman Akses Token
3. Klik Create a token
4. Beri nama token Anda, centang semua kotak centang lingkup publik, centang kotak centang rahasia rahasia berikut:
   • Gaya: Unduh
   • Unduhan: Baca
   • Visi: Unduh
   • Navigasi: Unduh
5. Klik Create token dan Salin Token Anda. Itu harus dimulai dengan sk.