CUA

❗หมายเหตุ repo นี้ไม่ได้รับการดูแลอย่างแข็งขันอีกต่อไป

- Create-universal-App (CUA)

newdemo.mp4

- นี่คืออะไร?

Create-universal-App (CUA) เป็นเทมเพลตที่มีความคิดเห็นสำหรับการสร้างแอพ Universal (มือถือ + เว็บ codeshare) เต็มรูปแบบพร้อมการรับรองความถูกต้องในตัวสำหรับทั้งมือถือและเว็บโดยใช้ Expo (มือถือ), NextJs (เว็บ), TRPC , Prisma , Tamagui (ui + สไตล์) และ เสมียน การสาธิต อยู่ที่ https://cua-demo.vercel.app/

นี่คือบทช่วยสอน YouTube 20 นาทีที่ผ่านทุกอย่างถ้านั่นเป็นสไตล์ของคุณมากกว่า!

นอกจากนี้คุณยังสามารถเรียกใช้ npx create-t3-universal-app เพื่อเริ่มโครงการของคุณ (โดย Albbus) เพิ่มหนึ่งในธงต่อไปนี้หากคุณต้องการรูปแบบเฉพาะของ CUA:

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

หากคุณมีคำถามใด ๆ ในขณะที่ใช้สิ่งนี้อย่าลังเลที่จะเข้าร่วม? Discord? เราทุกคนมีความกระตือรือร้นในนั้น!

repo นี้ทำขึ้นด้านบนของ :

• Create-T3-Turbo: Expo, Next, TRPC, PRISMA, NEXTAUTH-ไม่มีรหัส UI CODE CHARE & NO Mobile Auth
• T3-turbo-and-clerk: T3 Turbo พร้อม Auth สำหรับมือถือ + เว็บ-ยังไม่มีรหัส UI
• Tamagui + Solito Starter: Expo + Next Code Share - ไม่มี TRPC & No Auth ในตัว

- มันทำงานอย่างไร

โครงสร้างโฟลเดอร์

• แอพพลิเคชั่น
  • ต่อไป
  • งานแสดงสินค้า
• แพ็คเกจ
  • UI (ส่วนประกอบที่นำกลับมาใช้ซ้ำได้ด้วย Tamagui)
  • DB (DB Schema & Prisma stuff)
  • แอป
    • คุณสมบัติ (️รหัสส่วนหน้าดั้งเดิมทั้งหมดของคุณจะไปที่นี่️)
    • การนำทาง (Unifying Web + การนำทางมือถือ)
    • ผู้ให้บริการ (ผู้ให้บริการรวม)
    • Utils (Utils ของคุณเช่น Auth & TRPC)
  • API (รหัสแบ็กเอนด์ TRPC & ทั้งหมดของคุณ)

รายละเอียดเพิ่มเติมเล็กน้อย

รหัส ส่วนหน้า ของคุณจะอยู่ใน React Native ซึ่งหมายความว่าคุณกำลังจะเขียนมุมมองแทน divs เนื่องจากเราใช้ Tamagui โดยเฉพาะเราจะเขียนสแต็คแทนมุมมอง

• apps/expo และ apps/next เป็นโฟลเดอร์ที่ว่างเปล่าซึ่งเพียงแค่ อ้างอิง packages/app ของคุณ
• หากคุณคุ้นเคยกับ React Native มันจะรู้สึกราวกับว่าคุณกำลังเขียนแอพ React Native ซึ่งเพิ่งเกิดขึ้นได้ดีบนเว็บ (กับ SSR และสินค้าเหล่านั้นทั้งหมด)
• รหัสของคุณจะได้รับการแสดงผลเป็น HTML/CSS ทางด้าน NextJS และ Normal React Native ที่ด้านพื้นเมือง

รหัส แบ็ กเอนด์ของคุณจะอยู่ใน packages/api NextJS กำลังจะเรียกใช้รหัสนี้ในสภาพแวดล้อมที่ไม่มีเซิร์ฟเวอร์หากคุณสับสนเล็กน้อยเกี่ยวกับวิธีการทำงานที่นี่เป็นวิดีโอที่ดีโดย Theo ที่พูดถึง NextJS เป็นกรอบแบ็คเอนด์

• แบ็กเอนด์และส่วนหน้าของคุณจะสื่อสารกับ TRPC
• แบ็กเอนด์และฐานข้อมูลของคุณจะสื่อสารกับ Prisma (ORM)
• Mobile Auth ทำด้วย Clerk Expo และ Web Auth ทำกับ Clerk React และ Clerk Next

หมายเหตุ: คุณไม่จำเป็นต้องเข้าใจว่าทุกอย่างทำงานในรายละเอียดอย่างไรก่อนที่จะเริ่มใช้เทมเพลตนี้ ในฐานะที่เป็นคนที่อยากรู้ว่าโบลต์และถั่วทำงานได้อย่างไรฉันมักจะได้รับ "บล็อก" โดยลัทธิพอใจ แต่สิ่งดีเลิศของฉันเองดังนั้นฉันแค่โยนสิ่งนี้ออกไปที่นั่นในกรณีที่คุณรู้สึกเหมือนกันเกี่ยวกับบางสิ่งบางอย่าง

- เบื้องหลังการตัดสินใจ

ทำไมต้อง Tamagui สำหรับ UI & Styling?

Tamagui คืออะไร?

TLDR : การทำให้สิ่งต่าง ๆ ดูสวยทั้งบนเว็บและมือถือในขณะที่ทำงานได้อย่างรวดเร็วและง่ายดาย ในรายละเอียดเพิ่มเติม Tamagui มี 3 สิ่ง:

• คอมไพเลอร์ : วิธีที่ไม่เหมือนใครในการเปลี่ยน "รหัสที่เกี่ยวข้องกับสไตล์" ของคุณให้เป็น CSS บริสุทธิ์เร็วขึ้น สิ่งที่สำคัญที่สุดที่นี่อาจเป็นสิ่งที่ทำให้ต้นไม้แบน
• Core : ชุดส่วนประกอบเล็ก ๆ ที่พวกเขาสร้างขึ้นเพื่อแทนที่มุมมองและข้อความที่คุณใช้ใน React Native โดยมีข้อดีบางประการ
• UI : ชุดของส่วนประกอบ UI ที่ทีม Tama สร้างขึ้นโดยใช้ Core

ตรวจสอบเอกสารของพวกเขาสำหรับข้อมูลเพิ่มเติม

ทำไม NativeWind & Tailwind ล่ะ?

สิ่งที่ฉันชอบเกี่ยวกับ Tamagui คือมันเป็น Tailwind และ Daisyui พร้อมกันที่สร้างขึ้นจากพื้นดินที่ออกแบบมาสำหรับแอพสากลด้วยคอมไพเลอร์และส่วนประกอบหลักของตัวเอง

อย่าลังเลที่จะใช้ NativeWind & Tailwind แทน Tamagui คุณควรจะสามารถตั้งค่าสิ่งต่าง ๆ ได้อย่างง่ายดาย (และหากคุณ โปรด มีส่วนร่วมในเทมเพลตนี้ที่สร้างสาขาด้วยการติดตั้ง NativeWind)

ทำไมเสมียนสำหรับรับรองความถูกต้อง?

ในระดับสูงเสมียนสัญญากับโซลูชันการจัดการผู้ใช้โดยรวมแทนที่จะเป็นเพียงการรับรองความถูกต้องกับสิ่งต่าง ๆ เช่นโปรไฟล์ผู้ใช้การห้ามและการจัดการอุปกรณ์ในตัว ในทางปฏิบัติพวกเขามี Expo/Next Library ที่คล้ายกันมากพร้อมตะขอในตัวที่ใช้งานได้ดีมาก! โดยส่วนตัวแล้วฉันมีช่วงเวลาที่ดีในการใช้เสมียนเมื่อเทียบกับโซลูชันอื่น ๆ เช่น Firebase หรือ Supabase

สิ่งที่ใช้งานได้จริง

• Hooks & Components ที่ดีจริงๆ (SignedIn/SignEdout) ที่ใช้งานได้ทั้ง Expo และ NextJS
• SDKS สำหรับทั้ง 3 แพลตฟอร์ม: Expo Frontend, NextJS Frontend, NextJS Serverside
• การสนับสนุนที่ยอดเยี่ยมและความช่วยเหลือจากทีมงานของพวกเขาใน Discord (จากประสบการณ์ส่วนตัว)

ข้อเสีย

• ไม่ทำ SMS เว้นแต่คุณจะจ่าย: ลบขนาดใหญ่สำหรับมือถือ แต่ทำขึ้นด้วย Oauth ง่าย ๆ
• แผนพรีเมี่ยมราคาแพงเมื่อเทียบกับทางเลือก
• ดาบสองเท่าของการเริ่มต้น

ฐานข้อมูลใด

ฉันขอแนะนำให้คุณหมุนอินสแตนซ์ postgres บนรถไฟหรือใช้ supabase คุณสามารถนำของคุณเองเพราะมันไม่สำคัญมากเกินไป

- ใช้วิธีนี้ได้อย่างไร?

1. การตั้งค่าโครงการ

• yarn install เพื่อติดตั้งแพ็คเกจและสร้างโครงการ
• ตั้งค่าตัวแปรสภาพแวดล้อมของคุณอย่างถูกต้องโดยการทำซ้ำไฟล์ .env.example , ลบ .example และเข้าสู่ตัวแปรสภาพแวดล้อมของคุณ
  • clerk_secret_key & next_public_clerk_publishable_key : ลงทะเบียนบนเสมียนเพื่อรับปุ่ม API ของคุณ
  • database_url ( ไม่บังคับ ): หมุนอินสแตนซ์ postgres ด้วยรถไฟหรือ supabase (เราใช้ Sqllite ตามค่าเริ่มต้นตอนนี้ดังนั้นคุณไม่ต้องทำสิ่งนี้เว้นแต่คุณจะพร้อมสำหรับการผลิต!)
• yarn db-push เพื่อผลักดันสคีมา Prisma ของเราไปยังฐานข้อมูลของเรา

2. เริ่มโครงการของคุณ

• yarn web เพื่อเริ่มต้นเว็บเซิร์ฟเวอร์
• yarn native เพื่อทำงานบน iOS หรือ Android PS : สำหรับสิ่งนี้ในการทำงานคุณจะต้องใช้เว็บแอปของคุณที่ทำงานบน LocalHost: 3000 โปรดจำไว้ว่าแอป NextJS ของคุณเป็นแบ็กเอนด์ของคุณด้วย!
• yarn studio เพื่อเริ่มต้นสตูดิโอ Prisma ของคุณ PS : Query ตัวอย่าง TRPC จะแสดง example_entry ที่คุณสามารถลบได้พร้อมกับ example_user ที่เชื่อมต่อ _user
• yarn dev เพื่อเริ่มต้นแพ็คเกจและแอปพลิเคชันทั้งหมดพร้อมกัน

3. การเพิ่มหน้าจอใหม่

ในการทำให้กระบวนการที่อธิบายไว้ด้านล่างโดยอัตโนมัติคุณสามารถใช้ VSCODE Extension T3-CUA-Tools ซึ่งมีอยู่ในตลาด มันจะสร้างไฟล์และเพิ่มการนำเข้าที่จำเป็นและรหัสการนำทางให้คุณ

• สร้างหน้าจอใหม่ใน packages/app/features/
• สำหรับส่วนประกอบขนาดเล็กอย่าลังเลที่จะใส่ไว้ใน packages/ui/
• สำหรับเส้นทางใหม่เพิ่ม routeName.ts ใหม่ใน packages/api/src/router/ และตรวจสอบให้แน่ใจว่าได้รวมเข้ากับเราเตอร์แอพ index.ts
• เมื่อคุณเพิ่มหน้าหรือหน้าจอใหม่คุณจะต้องเพิ่มหน้าลงในทั้ง Expo และ NextJs:
  • งานแสดงสินค้า
    • ไปที่ apps/expo/app/ และสร้าง routeName.tsx ใหม่ที่นำเข้าองค์ประกอบของคุณจาก /app/features/screenName/
  • ต่อไป
    • ไปที่ apps/next/pages/ สร้างโฟลเดอร์ใหม่โดยมีชื่อเป็นเส้นทางของคุณและ index.tsx ที่นำเข้าองค์ประกอบของคุณจาก /app/features/screenName/

ปรับใช้กับ vercel

หลังจากที่คุณได้สร้างโครงการใหม่บน Vercel และเชื่อมโยงกับ GitHub repo ของคุณแล้วคุณจะต้องป้อนตัวแปรสภาพแวดล้อมของคุณ:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(ละเว้นคำสั่งการติดตั้งทันที)

คำถามที่พบบ่อย

1. ฉันควรติดตั้งแพ็คเกจที่ไหน หากมีรหัสดั้งเดิมคุณต้องติดตั้งลงในโฟลเดอร์ /expo

2. ฉันจะรู้ได้อย่างไรว่ามันมีรหัสดั้งเดิม? โดยทั่วไปถ้ามันเกี่ยวข้องกับการโต้ตอบกับระบบปฏิบัติการโทรศัพท์เช่น APIs เพื่อโต้ตอบกับการจัดเก็บ, กล้อง, ไจโร, การแจ้งเตือน ฯลฯ มันเกี่ยวข้องกับรหัสดั้งเดิม!