tl; dr

このブログは、数時間ではなく数時間以内にフルスタックアプリを作成するためにSupabase&Lovableを使用する方法に関する短いチュートリアル/ハウツーです！これらのツールをわずか8時間で使用して、フルスタックAIベースのCalorie/Nutrition Trackerアプリを作成しました。このブログでは、ここで「方法」を表示します。

アイデア

ClaudeやChatGptなどのLLMを使用して自然言語を使用して毎日の食事、カロリー、マクロを追跡するために、AIベースのカロリートラッカーアプリを長い間構築することを考えてきました。しかし、開発者として、私はプロセス全体をより簡単かつより良くすることができると知っていました。 MunchWiseはあなたの個人情報に基づいてあなたのためにパーソナライズされた目標を作成し、完全な毎日/毎週の分析とともに、自然な人間の言語を使用して食事を追跡できます！

機能と技術スタック

特徴 -

アカウントを作成し、カロリー/栄養のパーソナライズされた目標を取得します

• 自然な人間の言語を使用して、食事とそのカロリー/マクロを追跡する
• 専用の毎日/毎週の分析を表示
Tech Stack-

Supabase-認証、データベース、エッジ関数

• Vite&React-フレームワーク、ビルドツール
• Tailwind CSS -Styling
• 愛すべきコード生成
フロントエンドの作成

PS：始める前に、愛すべきものに向かい、新しいアカウントを作成する必要があります！

フロントエンドの場合、私はLovableを使用して最小限の機能UIを作成し、私が構築できるアプリの基本的なワイヤーフレームを取得し、Lovableは私をまったく失望させませんでした。私がLovableから得た最初のデザインは、バックエンドで作業を開始するのに十分であり、それから私は自分自身が望むようにUIを改善し、変更することができました。これが最初の反復でどのように見えたかです -

この後、私の主な焦点は、すべてのページの基本的なUIを構築し、このようないくつかのプロンプトを使用することでした -

さらにいくつかのプロンプトの後、Lovableによって作られた最後のUIはこのように見えました -

ご覧のとおり、UIはコードを書くことなく、すでにかなり素敵に見えます！最終的な反復でサイドバーを削除し、すべてのページでトップナビバーを使用することにしました。

Supabaseの統合

バックエンド/API統合は、フロントエンドを過剰にエンジニアリングしていないため、フルスタックのエンジニアであるために常に複雑でした。ですから、バックエンドタスクのほぼ80％を自らにできることは、それ自体が驚くべきことでした。

あなたがしなければならないのは、愛すべきページの右上隅にある

Supabase
ボタンをクリックして、Supabaseアカウントを愛すべきものに接続できることです。接続したら、プロンプトを再度使用して、テーブルスキーマ、AUTH、RLSポリシー、およびエッジ関数を作成する必要があります。 ただし、最初にhttps://supabase.comに向かうことで、まだ持っていない場合は、Supabaseアカウントを作成する必要があります。 supabaseでgithub/emailを使用してアカウントを作成します

ダッシュボード上で

新しいプロジェクト
1. をクリックしてから、新しいプロジェクトを作成します。
2. プロジェクトを作成したら、Lovableに戻り、Supabaseアカウントを接続して、作成したプロジェクトを選択して接続できます。

ご覧のとおり、Lovableはスキーマと一緒に必要なテーブルと、私のSupabaseプロジェクトで必要なエッジ関数を作成し、変更を承認したら、移行を実行しました！

AI超大国の追加

アプリは、AIの完了に依存して、自然な人間の言語を食事のカロリー性と栄養データに変換します。私はこの部分に一緒に一緒のAPIを使用しました、そして、愛すべきことはもう一度何をすべきかを正確に知っていました！私はちょうどAI部品に一緒にAIを使用するように頼みました、そしてそれは私のAPIキーを私に尋ねました、そしてそれは完了です！

無料のアカウントを作成することで、独自のAI APIキーを一緒に入手できます。ただし、クレジットを追加するにはクレジットカードが必要になります。

そしてこれにより、アプリの基本的な機能はすべて、認証からユーザーのオンボーディング、食事の追跡と分析まで、コードが書かれていません。

アプリを完成させます

アプリの準備が整ったので、私がしなければならなかった唯一のことは、あちこちでUI関連の問題を修正することでした。私はアプリにさらに数時間デバッグして物事を修正しましたが、これがアプリが今のように見えるものです -

かなりきれいですよね？そして、このアプリがわずか8時間で作られたと言っても冗談ではありません。最近AIを使用して達成できることは想像できません。

リンク

github -https：//github.com/asrvd/munchwise

Supabase -https：//supabase.com

愛らしい-https：//lovable.dev

読んでくれてありがとう！