expo essentials

expo-essentials adalah templat kickass yang dibangun di atas Expo, berisi struktur folder yang dapat dikelola, suite uji, dan fitur penting untuk membuat Anda siap dan menjalankan aplikasi Anda berikutnya.

Daftar isi

1. Fitur utama
2. Penggunaan
   1. Instalasi
   2. Perintah
      1. Perintah Aplikasi
      2. Perintah server
   3. Mengatur tema
      1. Memilih Palet Warna
      2. Memilih font
      3. Konfigurasi tema terang dan gelap
      4. Gunakan warna tema dalam komponen
   4. Pengaturan untuk lingkungan yang berbeda
      1. Konfigurasi Aplikasi
         1. Konfigurasi Pengembangan
         2. Konfigurasi pementasan
         3. Konfigurasi Produksi
      2. Konfigurasi Server
   5. Integrasi Firebase
      1. Menambahkan kredensial firebase Anda ke aplikasi
      2. Menambahkan kredensial firebase Anda ke server
3. Layar
   1. Selamat datang
   2. Onboarding
   3. Otentikasi
   4. Rumah
4. Bagaimana berkontribusi

Fitur utama

• Semua fitur Expo (Hot Reloading, Cross-Platform, Splash Screen, dll)
• ? Konfigurasi Tema Mudah (Palet Warna dan Font)
• ? Eslint dan format yang lebih cantik untuk mempromosikan kode pembersih
• ? Mode terang dan gelap
• Integrasi Firebase
• ? Layar selamat datang pada peluncuran pertama
• ❓ Swiper untuk onboarding untuk menyorot fitur
• Otentikasi Pengguna Menggunakan Firebase, dan Login Pengguna Persisten Di Beberapa Peluncuran
• ↪ Pengaturan Navigasi Berdasarkan Navigasi Bereaksi
• ? Pemberitahuan roti panggang
• ? Jaringan memutuskan spanduk
• ? Dukungan offline melalui Caching Network Permintaan dan gambar
• ? Konfigurasi Lingkungan Berdasarkan tahap aplikasi (kembangkan, pementasan, dan produksi)
• ? Bentuk mudah dengan validasi input berdasarkan formik dan yup
• (Opsional) ExpressJS Server dan MongoDB Database yang dikonfigurasi dengan Firebase Auth Middleware, Pengaturan Lingkungan, Uji Unit, dan Tes Integrasi
• ? Komponen umum yang ditulis secara fleksibel (tombol, textinput, kartu, modal, pemintal, dll.)

(... dan banyak lagi yang akan segera hadir!)

Penggunaan

Instalasi

1. Klon/Fork Repo ini (berdasarkan preferensi Anda)
2. Mulai aplikasi seluler

    $ cd client
   $ npm start
   

3. (Opsional) Mulai instance Server ExpressJS dan MongoDB (Anda harus menginstal Docker)

    $ docker-compose up --build
   

Perintah

Perintah Aplikasi

Memerintah	Keterangan
npm start	Mulai Expo Metro Server
npm run android	Mulai aplikasi dalam emulator android
npm run ios	Mulai aplikasi di emulator iOS
npm run web	Mulai aplikasi di browser web
npm run test	Pengembangan pengujian aktif, menonton file untuk perubahan dan menjalankan kembali semua tes
npm run testDebug	Debug, console.logs dan hanya menjalankan kembali file yang diubah
npm run testFinal	Menampilkan cakupan kode di CLI dan memperbarui html cakupan kode
npm run updateSnapshots	Saat layar/komponen diperbarui, snapshot tes akan melempar kesalahan, ini memperbaruinya
npm run eject	Keluarkan aplikasi Expo ke proyek Android dan iOS asli (Perhatian: Tindakan ini tidak dapat diubah)

Perintah server

Memerintah	Keterangan
npm run start:dev	Mulai server dengan konfigurasi pengembangan, restart server pada perubahan file
npm run start:staging	Memulai server dengan konfigurasi pementasan
npm run start:prod	Memulai server dengan konfigurasi produksi
npm run test:watch	Pengembangan tes aktif, menonton file untuk perubahan dan menjalankan kembali tes
npm run test	Menampilkan cakupan kode di CLI dan memperbarui html cakupan kode

Mengatur tema

Template ini menggunakan UI Kitten untuk mengendalikan tema. Untuk membaca lebih lanjut tentang itu, pastikan untuk mengunjungi dokumen mereka.

Memilih Palet Warna

• Gunakan Alat Sistem Desain EVA untuk membuat palet berdasarkan warna merek Anda.
• Ekspor palet sebagai JSON dan simpan nilai di client/app/config/colors.js

Memilih font

• Simpan file font yang Anda inginkan ( .ttf atau .otf lebih disukai) di folder client/app/assets/fonts . (Secara default, templat ini menggunakan font Jost).
• Perbarui nama dan jalur font di client/App.js :

Konfigurasi tema terang dan gelap

Anda dapat menentukan warna yang berbeda untuk digunakan untuk mode cahaya dan mode gelap dengan memperbarui nilai di client/app/config/lightTheme.js dan client/app/config/darkTheme.js masing -masing.

Gunakan warna tema dalam komponen

(Metode ini menggunakan react hooks, jadi pastikan Anda bekerja dengan komponen reaksi fungsional)

Pengaturan untuk lingkungan yang berbeda

Template ini mendukung konfigurasi yang berubah dengan mulus untuk pembuatan lingkungan yang berbeda berdasarkan aplikasi Anda (mis. Pengembangan , pementasan dan produksi )

Konfigurasi Aplikasi

Pengaturan untuk aplikasi seluler diatur dalam client/app/config/settings.js .

Konfigurasi Pengembangan

Konfigurasi pengembangan harus diatur dalam objek dev secara langsung.

Konfigurasi pementasan

Konfigurasi pementasan harus diatur dalam objek staging . Anda dapat mengaturnya secara langsung, atau Anda dapat menambahkannya melalui file dot client/.env (jika Anda memiliki data sensitif).

Konfigurasi Produksi

Konfigurasi produksi harus diatur dalam objek prod , dan sebaiknya ditambahkan melalui file client/.env .

Konfigurasi Server

Pengaturan untuk server diatur di server/config/settings.js . Server ExpressJS berjalan dalam wadah Docker, sehingga Anda dapat menentukan file lingkungan mana yang terhubung ke dalam wadah.

Misalnya, konfigurasi lingkungan pengembangan dapat ditetapkan sebagai:

• Buat file server/.env.dev :

• Tentukan menggunakan file lingkungan ini dalam file docker-compose.yml :

Integrasi Firebase

Template ini menggunakan Firebase untuk otentikasi dan manajemen pengguna. Firebase menawarkan daftar penyedia eksternal yang kaya yang ingin Anda tambahkan di aplikasi Anda nanti. Mereka juga menangani mengirim email untuk verifikasi email , reset kata sandi , dan perubahan email .

Disarankan agar Anda membuat 3 proyek Firebase terpisah untuk aplikasi Anda: app-dev , app-staging , dan app-prod (untuk setiap lingkungan yang digunakan aplikasi Anda). Ini untuk memastikan bahwa Anda dapat menguji lingkungan Anda yang independen satu sama lain, dan mencegah data yang tumpang tindih.

Menambahkan kredensial firebase Anda ke aplikasi

Buat konfigurasi WebApp dalam proyek Firebase Anda, dan tambahkannya di objek lingkungan yang sesuai.

Menambahkan kredensial firebase Anda ke server

Server menggunakan Firebase Admin SDK untuk membuat middleware otentikasi. Middleware ini mendekode token JWT yang dikirim dari aplikasi melalui permintaan API untuk mengidentifikasi pengguna dan peran mereka.

• Unduh Kredensial Akun Layanan Anda dari Firebase dan simpan di 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 )

Layar

Layar Selamat Datang

Layar onboarding

Layar otentikasi

Layar Beranda

Bagaimana berkontribusi

1. Garpu repositori
2. Tambahkan perbaikan bug atau penambahan fitur baru dan buat permintaan tarik ke repo ini
3. Tulis daftar perubahan terperinci yang diusulkan dalam deskripsi permintaan tarik