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/中导入您的元素。