CUA下載 - CUA源代碼下載

CUA

Ai源碼

1.0.0

下載

❗️❗️❗️® ❗️❗️❗️❗️

？創建宇宙應用（CUA）

newdemo.mp4

？這是什麼？

Create-Universal-App（CUA）是一個自信的模板，用於使用Expo （移動）（移動）， NextJS （Web）， TRPC ， Prisma ， Tamagui （UI +樣式）和Clerk （Mobile + Web Auth）創建具有移動和Web內置auth的全堆棧應用程序。演示現場直播在https://cua-demo.vercel.app/。

這是20分鐘的YouTube教程，如果您的風格更多，則可以介紹所有內容！

您還可以運行npx create-t3-universal-app以啟動您的項目（由Albbus）。如果您想要CUA的特定變體，請添加以下標誌之一：

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

如果您在使用此操作時有任何疑問，請隨時加入我們的“ Discord？”，我們都非常活躍！

此存儲庫是最重要的：

Create-T3-Turbo：Expo，Next，TRPC，Prisma，NextAuth-無UI代碼共享和沒有移動驗證。
T3-Turbo and-clerk：帶有AUTH的T3 Turbo用於移動 + Web-仍然沒有UI代碼共享。
tamagui + solito啟動器：博覽會 +下一個代碼共享 - 無TRPC和NO內置驗證。

？它如何工作

文件夾結構

應用
- 下一個
- 博覽會
軟件包
- UI（您的tamagui可重複使用的組件）
- DB（DB模式和Prisma的內容）
- 應用程式
  - 功能（配回所有本機前端代碼將進入這裡）
  - 導航（統一Web +移動導航）
  - 提供者（統一提供者）
  - utils（您的utirs，例如auth＆trpc）
- API（您的所有TRPC和後端代碼）

更詳細

您的前端代碼將在React Native中，這意味著您將寫視圖而不是DIV。由於我們特別使用tamagui，因此我們將撰寫堆棧的視圖。

apps/expo和apps/next實際上是空的文件夾，它們只是引用您的packages/app文件夾。
如果您熟悉React Native，那將感覺好像您正在編寫一個React Antive應用程序，這恰好在網上運行良好（使用SSR和所有這些好東西）。
您的代碼將在NextJS側的HTML/CSS和本機側的正常React本機上渲染。

您的後端代碼將在packages/api中。 NextJS將在無服務器環境中運行此代碼，如果您對工作的工作方式有些困惑，那麼Theo的一個很好的視頻就將其作為後端框架。

您的後端和前端將與TRPC通信。
您的後端和數據庫將與Prisma（ORM）通信。
Mobile Auth是通過文員Expo完成的，Web auth是由店員React和Clerk Next完成的。

注意：在開始使用此模板之前，您不需要了解所有內容的詳細工作。作為一個想知道每個螺栓和螺母如何工作的人，我經常被自己的完美主義“阻止”，所以我只是把它扔到那裡，以防萬一您對某些事情有同樣的感覺。

？決定背後

為什麼要tamagui for UI和样式？

什麼是tamagui？

TLDR ：這是為了使事情在網絡和移動設備上看起來都很漂亮，同時確實非常快速，易於使用。更詳細地，塔瑪古有3件事：

編譯器：將您的“與樣式相關代碼”轉換為純CSS的獨特方式。這裡最重要的事情可能是他們做的樹木變平。
核心：他們構建的一小部分組件旨在替換您在React Native中使用的視圖和文本，並具有一些優勢。
UI ：TAMA團隊使用Core構建的一組UI組件。

查看他們的文檔以獲取更多信息。

為什麼不給本地風和尾風？

我喜歡tamagui的是，它同時又是尾風和daisyui，它是為具有自己的編譯器和核心組件的通用應用而設計的。

可以隨意使用本地風和尾風而不是tamagui，您應該能夠輕鬆地設置物品（如果您確實為此，請為此模板做出貢獻，以創建帶有本機溫安裝的分支）。

為什麼要為Auth的職員？

在高水平上，店員承諾提供總體用戶管理解決方案，而不僅僅是用戶配置文件，禁令和設備管理諸如內置的驗證。實際上，他們有一個非常相似的博覽會/下一個庫，內置鉤子非常好！與Firebase或Supabase（例如Firebase或Supabase）相比，我個人度過了愉快的時光。

實用的事情

非常好的掛鉤和組件（簽名/簽名），可用於Expo和NextJS。
所有3個平台的SDK：Expo Frontend，NextJS Frontend，NextJS Serveride。
他們的團隊對Discord的絕佳支持和幫助（來自個人經驗）。

缺點

除非您付款，否則不會做短信：對移動設備的負面負面，但用簡單的Oauth來彌補它。
與替代方案相比，高級計劃昂貴。
成為創業公司的雙角劍。

哪個db？

我建議您要么在鐵路上旋轉一個Postgres實例，要么使用Supabase，您可以攜帶自己的實例，因為它並不重要。

？如何使用？

1。設置項目

yarn install以安裝軟件包並構建項目。
通過複製.env.example文件，刪除.example並輸入環境變量來正確設置環境變量。
- clerk_secret_key和next_public_clerk_publishable_key ：在店員上註冊以獲取您的API鍵
- Database_url （可選）：用鐵路或supabase旋轉一個Postgres實例（默認情況下，我們使用SQLLITE，因此除非您準備好生產！）
yarn db-push將我們的Prisma模式推向DB。

2。啟動您的項目

yarn web啟動Web Dev服務器。
yarn native可以在iOS或Android上運行。 PS ：為此，您需要在Localhost：3000上運行的Web應用程序，請記住，您的NextJS應用也是您的後端！
yarn studio啟動您的Prisma Studio。 PS ：TRPC示例查詢將顯示一個example_entry ，您可以與連接的example_user一起刪除該示例。
yarn dev同時啟動所有軟件包和應用程序。

3。添加新屏幕

為了自動化下面說明的過程，您可以使用Marketplace也可以使用的VSCODE擴展T3-CUA-Tools。它將創建文件，並為您添加必要的導入和導航代碼。

在packages/app/features/中創建新屏幕。
對於較小的組件，可以隨意將它們放入packages/ui/ 。
對於新路由，添加了packages/api/src/router/中的新routeName.ts ，並確保將其合併到index.ts應用程序路由器中。
添加新頁面或屏幕時，您需要將該頁面添加到Expo和NextJS中：
- 博覽會
  - 轉到apps/expo/app/然後創建一個新的routeName.tsx ，該tsx正在/app/features/screenName/中導入您的元素。
- 下一個
  - 轉到apps/next/pages/ ，創建一個新文件夾，其中名稱為您的路由和一個index.tsx ，該文件正在從/app/features/screenName/中導入您的元素。