CUA

∎ ❗️❗닐닐닐하세요. ∎ ❗️❗닐닐끄는 바 b

? 제작-우주-애플 (CUA)

Newdemo.mp4

? 이게 뭔가요?

CUA (Create-Universal-App)는 Expo (모바일), TRPC , Prisma , Tamagui (UI + Styling) 및 서기 (Mobile + Web Auth)를 사용하여 모바일 및 웹을 사용하여 모바일 및 웹 모두에 대한 내장 인증이있는 풀 스택 범용 (Mobile + Web Codeshare) 앱 을 작성하기위한 의견이 많은 템플릿입니다. 데모는 https://cua-demo.vercel.app/에서 라이브입니다.

다음은 20 분 동안 YouTube 자습서가 있습니다.

npx create-t3-universal-app 실행하여 프로젝트를 시작할 수도 있습니다 (Albbus). CUA의 특정 변형을 원한다면 다음 플래그 중 하나를 추가하십시오.

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

이것을 사용하는 동안 질문이 있으시면, 우리의? 불화?, 우리는 모두 거기에서 꽤 활동적입니다!

이 repo는 다음 위에 만들어집니다 .

• Create-T3-Turbo : Expo, Next, TRPC, PRISMA, NEXTAUTH- UI 코드 공유 없음 및 모바일 인증 없음.
• T3-Turbo and-Clerk : Mobile + Web 용 인증이있는 T3 Turbo- 여전히 UI 코드 공유가 없습니다.
• Tamagui + Solito 스타터 : Expo + Next Code 공유 - TRPC 및 내장 인증 없음.

? 작동 방식

폴더 구조

• 앱
  • 다음
  • 엑스포
• 패키지
  • UI (Tamagui를 사용한 재사용 가능한 구성 요소)
  • DB (DB Schema & Prisma 물건)
  • 앱
    • 특징 (️ 모든 기본 프론트 엔드 코드는 여기로 이동합니다 님)
    • 내비게이션 (웹 + 모바일 탐색)
    • 공급자 (통일 제공자)
    • Utils (Auth & Trpc와 같은 Utils)
  • API (모든 TRPC 및 백엔드 코드)

좀 더 자세히

프론트 엔드 코드는 React Native에 있습니다. 즉, DIV 대신 뷰를 작성하게됩니다. 우리는 특히 Tamagui를 사용하고 있기 때문에 대신 스택을 쓸 것입니다.

• apps/expo 및 apps/next 실제로 packages/app 폴더를 참조하는 빈 폴더입니다.
• React Native에 익숙하다면 React Native 앱을 작성하는 것처럼 느껴질 것입니다. 웹에서 실제로 실행되는 경우 (SSR 및 모든 케이크 포함).
• 코드는 NextJS 측에서 HTML/CSS로 렌더링되고 기본 측면에서는 Normal React Native로 렌더링됩니다.

백엔드 코드는 packages/api 에 있습니다. Nextjs는 서버리스 환경 에서이 코드를 실행할 예정입니다. 여기서 그것이 어떻게 작동하는지에 대해 약간 혼란스러워하는 경우 Theo의 좋은 비디오가 Backend 프레임 워크로서 NextJS에 대해 이야기합니다.

• 백엔드 및 프론트 엔드는 TRPC와 통신합니다.
• 백엔드와 DB는 Prisma (ORM)와 통신합니다.
• Mobile Auth는 서기 엑스포와 함께 이루어지고 웹 인증은 Clerk React 및 Clerk Next와 함께 수행됩니다.

참고 :이 템플릿을 사용하기 전에 모든 것이 어떻게 세부적으로 작동하는지 이해할 필요가 없습니다. 모든 볼트와 너트가 어떻게 작동하는지 알고 싶어하는 사람으로서, 나는 종종 내 자신의 완벽주의에 의해 "차단"을받습니다.

? 결정 뒤에

UI 및 스타일링을위한 타마 구이 왜?

Tamagui는 무엇입니까?

TLDR : 웹과 모바일에서 물건을 예쁘게 보이게하면서 정말 빠르고 작업하기가 쉽습니다. 더 자세히 말하면 Tamagui에는 세 가지가 있습니다.

• 컴파일러 : "스타일 관련 코드"를 순수한 CSS로 더 빠르게 바꾸는 독특한 방법. 여기서 가장 중요한 것은 아마도 그들이하는 나무 평평한 일일 것입니다.
• 핵심 : 그들이 만든 작은 구성 요소 세트는 React Native에서 사용하는보기와 텍스트를 몇 가지 장점으로 바꾸는 것을 목표로했습니다.
• UI : Tama 팀이 Core를 사용하여 구축 한 UI 구성 요소 세트.

더 많은 정보를 얻으려면 문서를 확인하십시오.

왜 Nativewind & Tailwind가 아닌가?

Tamagui에 대해 내가 좋아하는 것은 자체 컴파일러 및 핵심 구성 요소를 갖춘 범용 앱을 위해 설계된 접지에서 구축 된 동시에 Tailwind와 Daisyui라는 것입니다.

Tamagui 대신 Nativewind & Tailwind를 자유롭게 사용하십시오. 상당히 쉽게 물건을 설정할 수 있어야합니다 (그리고이 템플릿에 기여 하여 NativeWind 설치로 분기를 생성하십시오).

왜 인증 서기?

Clerk는 높은 수준에서 사용자 프로필, 금지 및 장치 관리와 같은 것과 같은 인증 대신 전체 사용자 관리 솔루션을 약속합니다. 실제로, 그들은 매우 유사한 엑스포/다음 라이브러리를 사용하기에 매우 유용한 고리가있는 내장 된 엑스포/다음 라이브러리를 가지고 있습니다! 나는 개인적으로 Firebase 또는 Supabase와 같은 다른 솔루션과 비교하여 서기를 사용하는 좋은 시간을 보냈습니다.

실용적인 것들

• 엑스포와 Nextjs 모두에서 작동하는 정말 멋진 후크 및 구성 요소 (Signedin/Signedout).
• 3 개의 플랫폼 모두 SDK : Expo Frontend, Nextjs Frontend, Nextjs Serverside.
• 불화에 대한 팀의 환상적인 지원과 도움 (개인적인 경험).

단점

• 당신이 지불하지 않는 한 SMS를 수행하지 않습니다 : 모바일에 대해 큰 음수이지만 쉬운 OAUTH로 보완합니다.
• 대안에 비해 프리미엄 계획이 비쌉니다.
• 스타트 업이라는 두 배의 검.

어떤 DB?

철도에서 Postgres 인스턴스를 돌리거나 Supabase를 사용하는 것이 좋습니다. 너무 중요하지 않으므로 직접 가져올 수 있습니다.

? 이것을 사용하는 방법?

1. 프로젝트를 설정하십시오

• yarn install 하고 프로젝트를 구축하십시오.
• .env.example 파일을 복제하고 .example 제거하고 환경 변수를 입력하여 환경 변수를 올바르게 설정하십시오.
  • clark_secret_key & next_public_clerk_publishable_key : API 키를 얻으려면 서기에 가입
  • Database_URL ( 선택 사항 ) : 철도 또는 Supabase로 Postgres 인스턴스를 돌리십시오 (기본적으로 Sqllite를 사용하고 있으므로 생산 준비가되지 않으면이 작업을 수행 할 필요가 없습니다!)
• yarn db-push PRISMA 스키마를 DB로 밀어 넣습니다.

2. 프로젝트를 시작하십시오

• Web Dev 서버를 시작하려면 yarn web .
• iOS 또는 Android에서 실행되는 yarn native . 추신 : 이것이 작동하려면 LocalHost에서 실행하는 웹 앱이 필요합니다. 3000, NextJS 앱도 백엔드라는 것을 기억하십시오!
• 프리즘 스튜디오를 시작하는 yarn studio . 추신 : TRPC 예제 쿼리에는 example_user 와 함께 삭제할 수있는 example_entry 표시됩니다.
• 모든 패키지 및 응용 프로그램을 동시에 시작하려면 yarn dev .

3. 새 화면 추가

아래에 설명 된 프로세스를 자동화하려면 VSCODE Extension T3-CUA-Tools를 시장에서 사용할 수 있습니다. 파일을 생성하고 필요한 가져 오기 및 내비게이션 코드를 추가합니다.

• packages/app/features/ 에서 새 화면을 만듭니다.
• 작은 구성 요소의 경우 packages/ui/ 에 자유롭게 넣으십시오.
• 새로운 경로의 경우 packages/api/src/router/ 에 새로운 routeName.ts 추가하고 index.ts 앱 라우터에 병합하십시오.
• 새 페이지 나 화면을 추가하면 엑스포와 다음 JS에 페이지를 추가해야합니다.
  • 엑스포
    • apps/expo/app/ 로 이동하여 /app/features/screenName/ 에서 요소를 가져 오는 새로운 routeName.tsx 만듭니다.
  • 다음
    • apps/next/pages/ 로 이동하여 이름이 Route 및 index.tsx /app/features/screenName/ 에서 요소를 가져 오는 Index.tsx를 만듭니다.

Vercel에 배포

Vercel에서 새 프로젝트를 만들어 Github Repo와 연결 한 후에는 환경 변수를 입력해야합니다.

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

(지금 설치 명령 1을 무시하십시오)

FAQ

1. 패키지는 어디에서 설치해야합니까? 기본 코드가 포함 된 경우 /expo 폴더에 설치해야합니다.

2. 기본 코드가 포함되어 있는지 어떻게 알 수 있습니까? 일반적으로 스토리지, 카메라, 자이로, 알림 등과 상호 작용하기 위해 API와 같은 전화 OS와 일부 상호 작용이 포함 된 경우 기본 코드가 포함됩니다!