Lovableで始まるMVPメーカー
Pokute
カテゴリー
未設定
SRC From: [https://lovable.dev/](https://lovable.dev/)
この記事は、作業中にGeminiとチャットで記録された内容に基づいてまとめられた記事です。
最近、AI開発プラットフォームであるLovableを活用してRSSベースのWebサービスを制作した経験を共有します。 Supabase、GitHub、OpenAI APIまで連動したこのプロジェクトは、単純なサイドプロジェクト以上で、最新ツールを活用した開発自動化の可能性を示す良い事例でした。
なぜLovableなのか
Lovableは最新のAIベースの開発ツールで、従来のCursorやWindsurfに比べて次のような強みがあります。
•
Supabase・GitHub 直接連動: 設定プロセスを自動化し、開発者が直接複雑な接続をする必要がありません。 APIキー、テーブル設定、デプロイプロセスはすべて自動化されます。
•
低侵入障壁：独立したバックエンドの知識がなくても、プロトタイプレベルのWebサービスを簡単に作成できます。
•
最新情報ベースの自動セットアップ：以前のツールが持っていた文書不足の問題を解決し、Supabaseなどのプラットフォームとの統合を円滑に提供します。
開発フローのまとめ
1. プロジェクト開始: 2分で基本的なWebサービスUIの実装
Lovableを実行してGitHubを接続すると、プロジェクトの作成と同時に基本的なUI構造が自動的に設定されます。投稿リスト形式のホーム画面が設定され、ここまでかかった時間はわずか2分でした。
2. Supabaseインターロックとデータ構造の作成
Supabaseプロジェクトが自動的に作成され、Lovableが自動的にリンクします（デフォルトのアカウント作成は必要です）。その後、Lovableが独自にRSSデータ保存用テーブル（SQLベース）とサンプルデータを自動挿入し、データベース構成まで完了しました。
この部分は私にとって非常に魅力的な部分でした。既存のカーソル、ウィンドサーフを使用するときは直接設定を進める必要がありますが、開発者ではない私には思ったよりハードルがありました。しかし、LovableはチャットだけでSupabaseとDB設定まで解決してくれるので、初心者にとても大きな助けになります。
DB의 CRUD가 필요할 때 자동으로 SQL을 작성해주는 모습
3. RSSフィード連動
最初のプロンプト要求で既に基本的なRSS解析ロジックがすでに準備されていたので、ただ3つのウェブサイトURLを入力するだけでフィードをインポートすることができました。
•
ここからリアルタイムでSupabaseにフィードを保存し、Webサービスからそれを出力する仕組みが完成しました。
4. 最新の文のみフィルタリング
データ量が増えるにつれ、最近3つのフィードのみを出力するようにロジックを要求し、Lovableが自動的にORDER BYおよびLIMIT条件を含むクエリを適用して更新しました。
ここからロジックの重要性を認識するようになりました。新しいソースを追加するとき、サンプルとして最近3つのフィードだけを追加したいと思いました。
例外処理とデバッグ
3つのウェブサイトのうち2つがフィードを正しく読み込めないという問題が発生しました。これは、各サイトのRSS構造の違いによるものです。特に.htmlで終わるURLがRSSではなく一般的なHTMLページであることが多く、LovableがこれをRSSとして認識できない場合もありました。
Lovableはこの状況でエラーログと修正オプションを提供してデバッグを支援し、一部のURLは手動調整が必要でした。
しかし、まだすべてのウェブサイトをすべて解決できませんでした。
OpenAI API連携による自動サマリー機能まで
追加機能としてOpenAI APIを利用したフィード自動サマリー機能も実装しました。Lovable内部でAPIキーを入力するとSupabaseに自動保存され、その後RSSフィードボディをまとめるAI機能まで連動が完了しました。
改善作業中にAPIを重複して呼び出すことになるかリフレッシュするたびに呼び出す構造になり、DBに要約結果を更新し、Webページ出力時に常にDBからのみインポートするように変更しました。
개선 전 후의 극적인 토큰 사용량 변화..
中間決算
1. リソース使用量
現在までの出力： https://digest-chair.lovable.app/
•
1日目の消耗資源：5時間、87クレジット（Pro基本が100クレジット/月）
•
その後、13 + 10クレジット（毎日無料5クレジットを提供）を使用してデバッグしています
•
まだフィードにアクセスできないウェブサイトが多い
•
Hacker Newsがフィードを正しく取得できない
2. インサイト
このプロジェクトは、AI開発ツールがどれほど実質的な開発生産性を高めるかを実感させましたが、他のLLMサービスと同じ問題を確認しました。
Lovableで得た最大のインサイトは次のとおりです。
•
アイデアの実装が飛躍的に速くなります。 MVPレベルの構築は1〜8時間以内に可能であると予想されます。設計、DB構成も直接制御してくれるので、さらに時間を短縮できます。
•
開発の難易度よりも企画やコンテンツの重要性が大きくなる。私は最初のプロンプトでかなり詳細に（1920文字）作業内容を要求しました。ほとんどはUIと主な機能、Webページ構造に関するものでした。おかげで、最初のリクエストの2分後に基本的なサービス構造を完成することができました。
•
よく要求しなければよく作ってくれる。 GPTとの会話と同じですが、明確な要件の配信が必須です。前述のロジック部分は、非開発者が知るのが難しい部分です。ボタンをクリックすると見えないことで何が起こるのかを知る必要がないからです。私は非開発者ですが、専攻者なので、基本的な構造とロジックを知っています。この違いは、1つの機能を実装するときに10クレジット以上の違いを引き起こします。
3.使用後の考え
•
約3～5万ウォンでMVPを製作するといえば、従来に比べて非常に低コストだと思います。この強力なツールは、アプリストアが開かれながら多数のアプリが制作されたように、さまざまなアプリケーションが生産される始点と考えられます。
•
私がもう少し開発の勉強をしたら、Lovableでプロジェクトを始め、Githubからコードを取得し、CursorやWindsurfで作業するようです。
Do
「Dogma13」を購読する
サイトを購読すると、新しい投稿などの最新のアップデートを通知やメールで最初に受け取ることができます。
Slashpageに登録して「Dogma13」を購読してください！
Slashpageに登録して「Dogma13」を購読してください！
