TL;DR

このブログは、Supabase & Lovable を使用してフルスタック アプリを數(shù)日ではなく數(shù)時間で作成する方法に関する短いチュートリアル/ハウツーです。これらのツールを使用して、フルスタックの AI ベースのカロリー/栄養(yǎng)トラッカー アプリをわずか 8 時間で作成しました。このブログでその「方法」を紹介します。

アイデア

私は、毎日の食事、カロリー、およびそれらのマクロを追跡するために自然言語を使用するために Claude や ChatGPT などの LLM をよく使用しているため、AI ベースのカロリー トラッカー アプリを自分用に構(gòu)築することを長い間考えてきました。しかし、開発者として、プロセス全體をより簡単かつより良くできることはわかっていました。Munchwise はまさにそれを?qū)g行します。
Munchwise は、あなたの個人情報に基づいてパーソナライズされた目標を作成し、日次/週次の完全な分析とともに自然な人間の言語を使用して食事を追跡できるようにします!

機能と技術(shù)スタック

機能 -

• アカウントを作成して、カロリー/栄養(yǎng)のパーソナライズされた目標を取得します
• 人間の自然言語を使用して食事とそのカロリー/マクロを追跡します
• 専用の日次/週次分析を表示

技術(shù)スタック -

• Supabase - 認証、データベース、エッジ機能
• Vite & React - フレームワーク、ビルドツール
• Tailwind CSS - スタイリング
• Lovable - コード生成

フロントエンドの作成

追記: 始める前に、Lovable にアクセスして新しいアカウントを作成する必要があります!

フロントエンドでは、Lovable を使用して最小限の動作する UI を作成し、その上に構(gòu)築できるアプリの基本的なワイヤーフレームを取得しました。Lovable は私をまったく失望させませんでした。 Lovable から受け取った最初のデザインは、バックエンドで作業(yè)を開始するのに十分なものでした。その後、UI を自分で望むように改良したり変更したりできました。最初の反復(fù)では次のようになりました -

この後、私の主な焦點は、すべてのページの基本的な UI を構(gòu)築し、次のようなプロンプトをさらに使用することでした -

さらにいくつかのプロンプトの後、lovable によって作成された最終的な UI は次のようになります -

ご覧のとおり、コードを書かなくても UI はすでにかなり見栄えがします。ただし、最後の反復(fù)ではサイドバーを削除し、すべてのページに上部のナビゲーションバーを使用することにしました。

スーパーベースの統(tǒng)合

フルスタック エンジニアである私にとって、フロントエンドを過度にエンジニアリングしないため、バックエンドと API の統(tǒng)合は常に複雑でした。したがって、Lovable がバックエンド タスクのほぼ 80% を単獨で実行できることは、まさに驚くべきことでした。
Lovable ページの右上隅にある Supabase ボタンをクリックするだけで、Supabase アカウントを Lovable に接続できます。接続したら、再度プロンプトを使用して、必要に応じてテーブル スキーマ、認証、RLS ポリシー、およびエッジ機能を作成する必要があります。
ただし、まだアカウントをお持ちでない場合は、まず https://supabase.com -

にアクセスして Supabase アカウントを作成する必要があります。

1. Supabase で Github/メールを使用してアカウントを作成します
2. ダッシュボードで 新しいプロジェクト をクリックし、新しいプロジェクトを作成します。
3. プロジェクトを作成したら、Lovable に戻り、Supabase アカウントに接続し、接続するために作成したプロジェクトを選択します。

ご覧のとおり、Lovable は必要なテーブルとそのスキーマ、および必要な Edge 関數(shù)を Supabase プロジェクトに作成し、変更を承認すると移行が実行されました。

AI の超大國を追加する

このアプリは AI 補完に依存して、人間の自然言語を食事のカロリーおよび?xùn)佯B(yǎng)データに変換します。この部分には TogetherAI の API を使用しましたが、Lovable は再び何をすべきかを正確に理解しました。 AI 部分に Together AI を使用するように依頼したところ、API キーの入力を求められ、完了しました!

無料アカウントを作成すると、獨自の Together AI API キーを取得できます。ただし、クレジットを追加するにはクレジット カードが必要です。

これにより、私がコードを記述することなく、認証からユーザーのオンボーディング、食事追跡と分析に至るまで、アプリの基本機能のすべてが準備できました。

アプリを終了する

アプリの準備ができたので、あとは UI 関連の問題とバックエンドの問題 (主に TogetherAI の API 関連) を修正するだけでした。さらに數(shù)時間アプリのデバッグと修正に取り組みました?，F(xiàn)在のアプリの外観は次のとおりです -

かなりきれいですね?そして、このアプリがわずか 8 時間で作られたというのは冗談ではありません。今日 AI を使用して達成できることは想像を絶するものであり、今までに AI を使用していないのであれば、本當にチャンスを逃していることになります。

リンク

Github - https://github.com/asrvd/munchwise
Supabase - https://supabase.com
愛すべき - https://loveable.dev

読んでいただきありがとうございます!

以上がSupabase と Lovable を使用してフルスタックの AI ベースのカロリー/栄養(yǎng)トラッカーをわずか rs で作成の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。