CUA

❗️❗️❗️❗️Note Repo ini tidak lagi dipertahankan secara aktif. ❗️❗️❗️❗️

? create-universal-app (CUA)

newDemo.mp4

? Apa ini?

Create-universal-App (CUA) adalah templat yang dipelajari untuk membuat aplikasi full-stack universal (seluler + web codeshare) dengan auth bawaan untuk seluler dan web menggunakan Expo (seluler), NextJS (Web), TRPC , Prisma , Tamagui (UI + Styling), dan juru tulis (Mobile + Web Auth). Demo ditayangkan di https://cua-demo.vercel.app/.

Berikut tutorial YouTube 20 menit membahas segalanya jika itu lebih dari gaya Anda!

Anda juga dapat menjalankan npx create-t3-universal-app untuk memulai proyek Anda (oleh Albbus). Tambahkan salah satu bendera berikut jika Anda menginginkan variasi CUA tertentu:

• --with-supabase
• --with-drizzle-pg
• --with-drizzle-sql

Jika Anda punya pertanyaan saat menggunakan ini, jangan ragu untuk bergabung dengan? Perselisihan?, Kita semua cukup aktif di sana!

Repo ini dibuat di atas :

• Create-T3-Turbo: Expo, Next, TRPC, Prisma, NextAuth-Tidak Ada Kode UI Share & No Mobile Auth.
• T3-turbo-and-clerk: T3 Turbo dengan auth untuk seluler + web-Masih tidak ada kode UI Share.
• Tamagui + Solito Starter: Expo + Next Code Share - No TRPC & No Built -In Auth.

? Cara kerjanya

Struktur folder

• aplikasi
  • Berikutnya
  • Expo
• paket
  • UI (komponen Anda yang dapat digunakan kembali dengan tamagui)
  • DB (DB Skema & Prisma Stuff)
  • aplikasi
    • Fitur (️ Semua kode frontend asli Anda akan pergi ke sini ️)
    • Navigasi (menyatukan web + navigasi seluler)
    • Penyedia (penyedia pemersatu)
    • utils (util Anda seperti auth & trpc)
  • API (semua kode TRPC & Backend Anda)

Sedikit lebih detail

Kode frontend Anda akan berada di React Native, artinya Anda akan menulis pandangan alih -alih divs. Karena kami menggunakan Tamagui pada khususnya, kami akan menulis tumpukan sebagai gantinya.

• apps/expo dan apps/next adalah folder praktis kosong yang hanya merujuk packages/app Anda.
• Jika Anda terbiasa dengan React Native, itu akan terasa seolah -olah Anda sedang menulis aplikasi React Native, itu juga berjalan dengan sangat baik di web (dengan SSR dan semua barang itu).
• Kode Anda akan diterjemahkan sebagai HTML/CSS di sisi NextJS dan Normal React Native di sisi asli.

Kode backend Anda akan berada di packages/api . NextJS akan menjalankan kode ini di lingkungan tanpa server, jika Anda sedikit bingung tentang cara kerjanya di sini adalah video yang bagus oleh Theo yang berbicara tentang NextJS sebagai kerangka kerja backend.

• Backend dan Frontend Anda akan berkomunikasi dengan TRPC.
• Backend dan DB Anda akan berkomunikasi dengan Prisma (ORM).
• Mobile Auth selesai dengan Petugas Expo, dan Web Auth selesai dengan Panitera React dan Clerk berikutnya.

Catatan: Anda tidak perlu memahami bagaimana semuanya bekerja secara detail sebelum Anda dapat mulai menggunakan templat ini. Sebagai seseorang yang ingin tahu bagaimana setiap baut dan mur bekerja, saya sering "diblokir" oleh perfeksionisme saya sendiri, jadi saya hanya membuang ini di luar sana jika Anda merasakan hal yang sama tentang sesuatu.

? Di balik keputusan

Mengapa Tamagui untuk UI & Styling?

Apa itu Tamagui?

TLDR : Ini untuk membuat segalanya terlihat cantik di web dan seluler sambil benar -benar sangat cepat dan mudah dikerjakan. Lebih detail, Tamagui memiliki 3 hal:

• Kompiler : Cara unik mereka untuk mengubah "kode terkait gaya" Anda menjadi CSS murni lebih cepat. Yang paling penting di sini mungkin adalah hal perataan pohon yang mereka lakukan.
• Core : Satu set kecil komponen yang mereka bangun bertujuan untuk mengganti tampilan dan teks yang Anda gunakan di React Native, dengan beberapa keuntungan.
• UI : Satu set komponen UI yang dibangun oleh tim Tama menggunakan Core.

Lihat dokumen mereka untuk informasi lebih lanjut.

Mengapa bukan NativeWind & Tailwind?

Yang saya sukai dari Tamagui adalah bahwa itu secara bersamaan tailwind dan daisyui yang dibangun dari bawah ke atas yang dirancang untuk aplikasi universal dengan kompiler dan komponen inti sendiri.

Jangan ragu untuk menggunakan NativeWind & Tailwind alih -alih Tamagui, Anda harus dapat mengatur segalanya dengan cukup mudah (dan jika Anda berkontribusi pada templat ini membuat cabang dengan instalasi NativeWind).

Mengapa Panitera untuk Auth?

Pada level tinggi, Panitera menjanjikan solusi manajemen pengguna secara keseluruhan alih-alih hanya otentikasi dengan hal-hal seperti profil pengguna, pelarangan dan manajemen perangkat bawaan. Dalam praktiknya, mereka memiliki perpustakaan expo/berikutnya yang sangat mirip dengan kait bawaan yang sangat bagus untuk digunakan! Saya pribadi bersenang -senang menggunakan Panitera dibandingkan dengan solusi lain seperti Firebase atau Supabase.

Hal -hal praktis

• Kait & Komponen yang sangat bagus (SignedIn/Signedout) yang bekerja untuk Expo dan NextJS.
• SDK untuk ketiga platform: Expo Frontend, NextJs Frontend, NextJS Serverside.
• Dukungan dan bantuan yang fantastis dari tim mereka di Discord (dari pengalaman pribadi).

Kerugian

• Tidak melakukan SMS kecuali Anda membayar: negatif besar untuk seluler tetapi menebusnya dengan oauth yang mudah.
• Paket premium mahal dibandingkan dengan alternatifnya.
• Pedang bermata dua menjadi startup.

DB yang mana?

Saya sarankan Anda memutar instance Postgres di kereta api atau menggunakan Supabase, Anda dapat membawa sendiri karena tidak terlalu penting.

? Bagaimana cara menggunakan ini?

1. Proyek Pengaturan

• yarn install untuk menginstal paket dan membangun proyek.
• Siapkan variabel lingkungan Anda dengan benar dengan menduplikasi file .env.example , menghapus .example , dan memasukkan variabel lingkungan Anda.
  • Clerk_secret_key & next_public_clerk_publishable_key : Daftar di Panitera untuk mendapatkan kunci API Anda
  • Database_Url ( Opsional ): Memutar instance postgres dengan kereta api atau supabase (kami menggunakan sqllite secara default sekarang, jadi Anda tidak perlu melakukan ini kecuali Anda siap untuk diproduksi!)
• yarn db-push untuk mendorong skema prisma kita ke DB kita.

2. Mulai proyek Anda

• yarn web untuk memulai server Web Dev.
• yarn native untuk dijalankan di iOS atau Android. PS : Agar ini berfungsi, Anda akan membutuhkan aplikasi web Anda di LocalHost: 3000, ingat bahwa aplikasi NextJS Anda juga merupakan backend Anda!
• yarn studio untuk memulai studio prisma Anda. PS : Kueri contoh TRPC akan menunjukkan example_entry yang dapat Anda hapus bersama dengan example_user yang terhubung.
• yarn dev untuk memulai semua paket dan aplikasi secara bersamaan.

3. Menambahkan layar baru

Untuk mengotomatiskan proses yang dijelaskan di bawah ini, Anda dapat menggunakan alat VScode Extension T3-CUA, juga tersedia di pasar. Ini akan membuat file dan menambahkan impor dan kode navigasi yang diperlukan untuk Anda.

• Buat layar baru dalam packages/app/features/ .
• Untuk komponen yang lebih kecil, jangan ragu untuk memasukkannya ke dalam packages/ui/ .
• Untuk rute baru, tambahkan routeName.ts baru dalam packages/api/src/router/ dan pastikan untuk menggabungkannya di router aplikasi index.ts .
• Saat Anda menambahkan halaman atau layar baru, Anda harus menambahkan halaman ke dalam Expo dan NextJs:
  • Expo
    • Buka apps/expo/app/ dan buat routeName.tsx baru yang mengimpor elemen Anda dari /app/features/screenName/ .
  • Berikutnya
    • Buka apps/next/pages/ , buat folder baru dengan nama menjadi rute Anda dan index.tsx yang mengimpor elemen Anda dari /app/features/screenName/ .

Menyebarkan ke Vercel

Setelah Anda membuat proyek baru di Vercel dan menautkannya dengan repo github Anda, Anda harus memasukkan variabel lingkungan Anda:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(Abaikan perintah instal sekarang) sekarang)

FAQ

1. Di mana saya harus menginstal paket? Jika berisi kode asli, Anda harus menginstalnya ke folder /expo .

2. Bagaimana saya tahu jika berisi kode asli? Secara umum jika melibatkan beberapa interaksi dengan OS telepon seperti API untuk berinteraksi dengan penyimpanan, kamera, gyro, pemberitahuan, dll. Ini melibatkan kode asli!