CUA

❗️❗️❗️❗️このレポは、積極的に維持されなくなりました。 ❗️❗️❗️❗️

？ Create-Universal-App（CUA）

newdemo.mp4

？これは何ですか？

Create-Universal-App（CUA）は、 Expo （Mobile）、 NextJS （Web）、 TRPC 、 Prisma 、Tamagui（UI + Styling）、 Clerk （Mobile + Web auth）を使用して、モバイルとWebの両方に組み込まれたAuthを備えたフルスタックのユニバーサル（モバイル + Webコードシェア）アプリを作成するための意見のあるテンプレートです。デモは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 code share＆no mobile auth。
• T3-Turbo-and-Clerk：Mobile + Web用のAuthを備えたT3 Turbo-UIコード共有はまだありません。
• Tamagui + Solito Starter：expo + Next Code Share- TRPCなし＆内蔵AUTH。

？それがどのように機能するか

フォルダー構造

• アプリ
  • 次
  • エキスポ
• パッケージ
  • UI（Tamaguiを使用した再利用可能なコンポーネント）
  • DB（DBスキーマとプリスマのもの）
  • アプリ
    • 特徴（♥ネイティブフロントエンドコードのすべてがこちらに行きますするまで
    • ナビゲーション（統一Web +モバイルナビゲーション）
    • プロバイダー（統一プロバイダー）
    • utils（auth＆trpcのようなユーザー）
  • API（すべてのTRPCとバックエンドコード）

もう少し詳しく

フロントエンドコードはReactネイティブになります。つまり、Divの代わりにビューを作成する予定です。特にTamaguiを使用しているので、代わりにStacks Viewを作成します。

• apps/expoとapps/next packages/appフォルダーを参照しているだけで、実質的に空のフォルダーです。
• React Nativeに精通している場合は、Reactネイティブアプリを書いているかのように感じます。これは、たまたまWebで非常によく実行されます（SSRとすべてのグッズを使用して）。
• あなたのコードは、NextJS側のHTML/CSSとしてレンダリングされ、ネイティブ側では通常の反応がネイティブになります。

バックエンドコードはpackages/apiになります。 NextJSは、サーバーレス環境でこのコードを実行する予定です。ここで、それがどのように機能するかについて少し混乱している場合は、BackEndフレームワークとしてNextJSについて話す良いビデオです。

• バックエンドとフロントエンドはTRPCと通信します。
• バックエンドとDBは、Prisma（ORM）と通信します。
• Mobile AuthはClerk Expoで行われ、Web AuthはClerk ReactとClerkで行われます。

注：このテンプレートの使用を開始する前に、すべてがどのように詳細に機能するかを理解する必要はありません。すべてのボルトとナットがどのように機能するかを知りたい人として、私はしばしば自分の完璧主義によって「ブロック」されるので、あなたが何かについて同じことを感じている場合に備えて、私はこれをそこに投げています。

？決定の背後に

なぜUIとスタイリングのためにTamagui？

タマグイとは何ですか？

TLDR ：それは、本当に速くて作業しやすい一方で、Webとモバイルの両方で物事をきれいに見せるためです。より詳細には、Tamaguiには3つのことがあります。

• コンパイラ： 「スタイル関連のコード」をより速く純粋なCSSに変える独自の方法。ここで最も重要なことは、おそらく彼らがする木の平らなことです。
• コア：彼らが構築した小さなコンポーネントのセットは、Reactネイティブで使用するビューとテキストを交換することを目的としており、いくつかの利点があります。
• UI ：TamaチームがCoreを使用して構築したUIコンポーネントのセット。

その他の情報については、ドキュメントをご覧ください。

NativeWind＆Tailwindはなぜですか？

Tamaguiについて私が気に入っているのは、独自のコンパイラとコアコンポーネントを備えたユニバーサルアプリ向けに設計されたゼロから構築された、同時に追い風とDaisyuiです。

Tamaguiの代わりにNativeWind＆Tailwindを自由に使用してください。物事をかなり簡単にセットアップできるはずです（もしそうなら、このテンプレートに貢献してください。

なぜAuthの書記官は？

高レベルでは、Clerkは、ユーザープロファイル、禁止、デバイス管理が組み込まれたものを使用して認証するだけでなく、全体的なユーザー管理ソリューションを約束します。実際には、非常によく似たエキスポ/ネクストライブラリがあり、使用するのが非常に良いフックが組み込まれています！ FirebaseやSupabaseなどの他のソリューションと比較して、私は個人的に店員を使用して楽しい時間を過ごしました。

実用的なこと

• ExpoとNextjsの両方で機能する本当に素敵なフックとコンポーネント（Signedin/Signedout）。
• 3つのプラットフォームすべてのSDKS：Expo Frontend、NextJS Frontend、NextJS Serverside。
• Discordのチームからの素晴らしいサポートとヘルプ（個人的な経験から）。

欠点

• 支払いをしない限り、SMSは行いません：モバイルには大きなネガティブですが、Easy 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でプリスマスキーマをDBに押し込みます。

2。プロジェクトを起動します

• yarn web Web Devサーバーを起動する。
• iOSまたはAndroidで実行されているyarn native 。 PS ：これが機能するには、localhost：3000でWebアプリを実行する必要があります。NextJSアプリもバックエンドであることを忘れないでください。
• Prisma Studioを起動するためのyarn studio 。 PS ：TRPCの例クエリには、接続されたexample_userと一緒に削除できるexample_entryが表示されます。
• すべてのパッケージとアプリケーションを同時に起動するyarn dev 。

3.新しい画面の追加

以下で説明するプロセスを自動化するには、VSCODE拡張T3-CUA-Toolsを使用できます。これも市場で入手できます。ファイルを作成し、必要なインポートとナビゲーションコードを追加します。

• packages/app/features/で新しい画面を作成します。
• 小さいコンポーネントについては、自由にpackages/ui/に入れてください。
• 新しいルートの場合packages/api/src/router/に新しいrouteName.tsを追加し、 index.tsアプリルーターにマージしてください。
• 新しいページまたは画面を追加すると、エキスポとnextjsの両方にページを追加する必要があります。
  • エキスポ
    • apps/expo/app/に移動し、 /app/features/screenName/から要素をインポートしている新しいrouteName.tsxを作成します。
  • 次
    • apps/next/pages/に移動し、名前がルートとindex.tsxである新しいフォルダーを作成して、 /app/features/screenName/から要素をインポートしています。

Vercelに展開します

Vercelで新しいプロジェクトを作成し、GitHubリポジトリにリンクした後、環境変数を入力する必要があります。

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• DATABASE_URL

（今すぐインストールコマンド1を無視してください）

よくある質問

1. パッケージはどこにインストールすればよいですか？ネイティブコードが含まれている場合は/expoフォルダーにインストールする必要があります。

2. ネイティブコードが含まれているかどうかはどうすればわかりますか？一般に、ストレージ、カメラ、ジャイロ、通知などと対話するためにAPIなどの電話OSとのいくつかのやり取りが含まれる場合。ネイティブコードが含まれます。