11,935 文字
私の名前はデビッド・アンドレで、この動画ではAIを使って何でもコーディングする方法を教えます。AIプログラミングの人気は爆発的に高まっており、自分自身でソフトウェアを構築することがこれまでになく簡単になっています。しかし、インターネットやビットコインと同様に、ほとんどの人はこのチャンスを逃すでしょう。その一人にならないよう、最後まで見て、今すぐAIでコーディングを始めましょう。
AIでソフトウェアを構築する最も簡単な方法は、lovableを使うことです。lovable.aiにアクセスするか、説明欄のリンクを使って、単に作りたいものを説明するだけです。プロンプトを貼り付けて「実行」を押します。私は「これらの機能を持つ日々のタイムトラッキングウェブアップを構築して」と指示しました。ランディングページ、ダッシュボードについて詳細を説明しましたが、プロンプトの最後の文が最も重要です：「まず、クリーンで視覚的で直感的なUIを構築してください」。lovableはすでに作業を始め、上部では計画も見ることができ、作成する11のファイルのリストもあります。
lovableが11個のコードファイルを書き終えました。これが私たちのMVP（最小実行可能製品）です。たった一つのプロンプトからこんなに良いランディングページができました。「開始する」をクリックしてみましょう。ダッシュボードも動作しています。これは驚異的です。たった一つのプロンプトで、すでにMVPができあがりました。
しかし問題があります。現在このMVPは私のlovableアカウント内にしか存在せず、ウェブ上の誰もアクセスできません。友人に送ったり、クライアントに販売したりすることができません。つまり、ウェブサイトをデプロイする必要があります。デプロイとは、カスタムURLで誰でもアクセスできるようにインターネット上で利用可能にすることです。複雑に聞こえるかもしれませんが、実際は非常に簡単です。lbl（lovable）のワンクリックデプロイメントプロセスを使用するので、初心者でも簡単にできます。
ただ、これが最初の摩擦ポイント、最初の障壁となるため、ほとんどの人はここで挫折します。次の数分間、私の操作をそのまま順を追って行えば、諦めてしまう90%の人より先に進むことができます。
lovableに戻り、右上のパブリッシュボタンをクリックします。このプロジェクトはまだ公開されていないことがわかります。「パブリッシュ」をクリックするだけの簡単な作業です。カスタムソフトウェアの構築がこれほど簡単だったことはありません。プロジェクトが公開されました。このドメインをクリックすると、誰でも訪問できるウェブ上のカスタムドメインです。「開始する」をクリックしてダッシュボードを確認しましょう。アクティビティを追加できます。「YouTubeビデオを録画」と入力して追加します。時間も正確です。11:15から11:30です。たった一つのプロンプトからこれほど優れたMVPが作れるなんて、AIの進化は本当に速いです。
ウェブアプリにさらに変更を加えたい場合も、単純に英語で何をしてほしいかlovableに指示するだけです。「タイムブロックのカードをもう少し低くして、カスタムアイコンを追加して」と入力します。英語でタイプできる限り、lovableを使えば思いつくものは何でも構築できます。
このブロックをクリックすると、コードが書かれている様子を正確に見ることができます。カスタムアイコンが追加され、高さも少し縮小されました。しかし、もう一つ問題があります。プロジェクトにはバージョン管理がありません。長期的に作業するなら、これは非常に問題です。バージョン管理がないと、プロジェクトのバージョンをどこにも保存していなかったために4ヶ月の進捗を失った人のようになりかねません。
幸い、lovableはワンクリックGitHub統合で非常に簡単にこれを解決できます。右上隅の「GitHub」をクリックし、「GitHubに接続」をクリックすると、このポップアップが表示されます。「lovableをインストール」をクリックし、すべてのリポジトリを選択するか、特定のリポジトリを選択します。「インストールして承認」をクリックします。GitHubに接続したら、もう一度「GitHubに接続」をクリックすると、プロジェクトにカスタムリポジトリを作成できます。
「viel」（私のソフトウェアの名前）をクリックすると、GitHubリポジトリがアカウントの下に作成されます。このプロジェクトは「vectal/time-bubble-tracker」に接続されています。これをクリックすると、すべてのコードを含むGitHub上の実際のリポジトリが表示されます。lovableが構築するすべてのものは、GitHubリポジトリにバックアップされます。コードビューアを切り替えると確認できます。
数ヶ月あるいは数年にわたってこのプロジェクトに取り組んでも、すべてが安全にGitHubアカウントに保存されます。変更を加えた後、カスタムドメインにそれらを反映させたい場合は、「パブリッシュ」ボタンをクリックし、「アップデート」をクリックしてプロジェクトを再デプロイします。URLにアクセスしてリロードすると、アイコンの追加などの新しい変更が適用されます。
しかし、別の問題に直面します。例えばアクティビティとして「ジムに行く」を追加し、ウェブサイトをリロードすると、一番下にそのアクティビティが表示されますが、再度リロードすると消えてしまいます。なぜなら、このウェブサイトはフロントエンドだけだからです。これはUIだけ、フロントエンドだけです。バックエンドが必要です。つまり、データをデータベースに保存する必要があります。フロントエンドはユーザーが見て操作するもの、バックエンドはデータベースとコア機能を処理します。
これは真剣なソフトウェアを構築して数千ドルで販売したい場合の必須ステップです。ユーザーのデータを適切に保存するには、ウェブサイトをデータベースに接続する必要があります。lovableはスーパーベース統合によって、これも非常に簡単にできます。
ちなみに、私はlovableにこの動画のスポンサーになるよう依頼し、彼らは同意してくれました。このリンクを使用する人は誰でも、通常の2倍のクレジットを受け取れます。lovableを試してみたい場合は、このリンクを使ってください。動画の説明欄にも記載します。
lovableのおかげで、ウェブサイトに適切なデータベースを接続するのがいかに簡単かをお見せします。右上隅の「スーパーベース」ボタンをクリックし、「スーパーベースに接続」をクリックします。これにより、データベースを更新するために必要な権限をlovableに与えるウィンドウがポップアップします。スーパーベースアカウントをお持ちでない場合は、superbase.comにアクセスして作成してください。非常に簡単で20秒で完了します。GitHubも同様です。
これらのことを理由に構築をあきらめないでください。初めてこれを行う場合、これらのステップは威圧的で複雑に見えるかもしれませんが、この動画中に摩擦やプレッシャーを感じたら、深呼吸して続けてください。あなたにもできます。
「スーパーベースアカウントに接続」をクリックし、「lovableを承認」をクリックします。スーパーベースに接続中で、接続が成功しました。スーパーベース組織がアカウントにリンクされました。設定を完了するためにプロジェクトを選択してください。スーパーベースを接続した後、リロードしてプロジェクトを表示できるようにしてください。
警告やエラーが表示されているようですが、「スーパーベースでプロジェクトステータスを確認してください」とあります。スーパーベースに移動し、ダッシュボードをクリックします。プロジェクトが一時停止されています。再開されるまでリクエストを受け付けません。新しいプロジェクトを作成しましょう。初めての場合は私の手順に従ってください。
スーパーベース内で「新しいプロジェクト」をクリックし、組織を選択します。プロジェクト名に「lovable app」と入力し、データベースパスワードに強力なパスワードを設定します。リージョンは最も近いものを選択します。私は現在チェコ共和国にいるので、「Central EU Frankfurt」が適しています。「新しいプロジェクトを作成」をクリックすると、わずか3秒後にスーパーベースが新しいデータベースプロジェクトを作成しました。
lovableに戻るとプロジェクトが表示されているはずです。「lovable app」をクリックして「接続」をクリックします。これで「lovable app」プロジェクトが接続されました。つまり、lovableはダッシュボードの管理、ユーザーの管理、SQLエディタ、エッジ関数、シークレット管理など、スーパーベース内のすべてにアクセスできるようになりました。基本的に、専門のバックエンドエンジニアができることを、lovableにプロンプトするだけで実行できます。
左上の「プロジェクトに戻る」をクリックし、英語で何をしてほしいかを説明するだけです。「スーパーベースを接続したところです。データが安全に保存されるように、アプリに適切なバックエンドを作成してください。シンプルに保ってください」と入力します。
AIがコーディングをしている間に、もし2秒時間があれば、ぜひチャンネル登録をお願いします。現在、視聴者の26%しか登録していません。YouTubeページでAI関連の動画をもっと見たい場合は、下のサブスクライブボタンをクリックしてください。
lovableはカスタムSQLクエリを作成し、スーパーベースのSQLエディタで実行します。lovableとスーパーベースを接続したので、私たちは何もする必要はありません。これが正しく行われているかどうか心配する必要はなく、lovableがすべてを処理します。
SQLコマンドを実行している場合、変更を適用する必要があります。これはリスクの高い操作です。多くのユーザーを持つデータベースがすでにある場合は、SQLコマンドを実行する際に非常に注意する必要がありますが、これは新しいプロジェクトでバックエンドがないので、安全に適用できます。
lovableは「SQLマイグレーションが正常に実行されました」と表示しています。フロントエンドを書き換えているようです。バックエンドからのデータを実際に使用するようにフロントエンドファイルを書き換えています。現在、すべてのデータは偽物です。これはフロントエンドで作成されたモックアップデータに過ぎず、バックエンドには保存されていません。
UIとデザインはそのままに（アイコン、色、ホバー効果など）、すべてのデータを実際のデータベースに保存するようにフロントエンドを書き換えています。スーパーベースでテーブルエディタをクリックすると、アクティビティのテーブルが表示されます。まだ何も作成していないので、現在テーブルは空です。視覚化を確認するには、データベースをクリックしてください。
各アクティビティには、ID、ユーザーID、タスク名、説明、カテゴリ、開始時間、終了時間、作成日があります。これがデータベーステーブルの構造で、すべてlovableによって設定されました。
lovableがバックエンドの統合を完了したようです。スーパーベース統合を備えた完全に機能するアプリができました。サインアップとサインイン機能を持つ認証を追加しました。これは驚くべきことです。私の次のステップがまさにこれだったからです。認証について何も言及していないのに、すでに実装されています。非常に素晴らしいです。
ログインが必要な保護されたルート、アクティビティを保存および取得するためのデータベース統合、行レベルのセキュリティを持つユーザー固有のデータを追加しました。アプリをテストするには、まずアカウントを作成してサインインする必要があります。
早速やってみましょう。更新されたアプリで「サインイン」をクリックします。これは以前はなかった機能です。初めての場合はサインアップする必要があります。メールアドレスとパスワードを入力し、「アカウント作成」をクリックします。アカウントが正常に作成されました。認証情報でサインインできます。
「サインイン」をクリックしますが、「メールが確認されていません」というエラーが表示されます。ここに入力したメールアドレスに確認メールが送信され、そのアカウントの所有者であることを確認する必要があります。確認メールのリンクをクリックすると、エラーが発生しています。
パニックにならず、このリンクをコピーしてlovableに戻り、何が起きたのかを明確に説明します。これが必要なことのすべてです。英語で入力し、イニシアチブを持ち、アイデアを追求する必要があります。エラーに遭遇したら、そのエラーと発生方法を明確かつ正確に説明してください。
エラーを個人的に受け止めないでください。世界最高のプログラマーでも毎日エラーに遭遇します。「新しい認証機能でサインアップしようとしましたが、『メールが確認されていません』と表示されました」と入力し、メールの内容全体をコピーペーストします。「しかし、そのリンクをクリックするとこのエラーが表示されます」とスクリーンショットを添付します。
lovableはスクリーンショットも入力として受け付けることができます。エラーが発生した場合はスクリーンショットを撮るだけでなく、UIエレメントをコピーしたい場合も同様です。例えば、このスキーマビジュアライザーのようなものを再現したい場合は、そのスクリーンショットを撮ってlovableに貼り付け、「スクリーンショットのようなコンポーネントを作成してください」と言うことができます。
lovableに戻り、「そのリンクをクリックするとエラーが発生します。添付のスクリーンショットを参照してください」と入力します。「このエラーを簡単な言葉で説明し、シニア開発者のように修正してください」と続けます。これがAIを使ってコーディングし、エラーを修正する際に私が従うプロセスです。エラーの内容、発生方法、再現方法を明確かつ詳細に説明する必要があります。そうすればAIは最善を尽くして修正します。
「適切なメール確認フローを実装して修正します」と表示されています。3つのファイルが編集され、「ユーザーが確認メールのリンクをクリックしたときリダイレクトURLを適切に処理するコードを追加」とあります。もう一度試してみるのが最善でしょう。
今度はうまくいきました。同じ認証情報を入力するだけでアプリにログインできました。最初のアクティビティを追加してみましょう。「水泳」と入力し、「フィットネス」に関連付け、「アクティビティ」をクリックします。スーパーベースのテーブルを確認しましょう。リロードすると、「水泳」アクティビティがバックエンドに保存されていることがわかります。
URLに移動するには、まず再デプロイする必要があります。「パブリッシュ」をクリックして「アップデート」をクリックします。ここでリロードしてからサインインすると、「水泳」がデータベースに保存されています。これで、ウェブアプリに適切なデータベースバックエンドを追加しました。lovableはこれをこれ以上簡単にすることはできなかったでしょう。
アプリのデプロイが完了したので、カスタムドメインを使用できます。ユーザーごとにアクティビティが適切に分離されているかどうかを確認するために、別のユーザーを使用してみましょう。新しくサインアップすると、別のアカウントにある「水泳」タスクが表示されていないことがわかります。
「外を歩く」などのアクティビティを追加すると、スーパーベーステーブルに表示されますが、異なるユーザーIDの下に表示されます。lovableは一度に2つのことを行いました。バックエンドにデータベースを追加し、認証も追加しました。私はこれを2つの別々のステージで行う準備をしていましたが、lovableは一度にすべてを行い、成功しました。
カスタムソフトウェアの構築がこれまでになく簡単になりました。繰り返し言っていますが、多くの方々はまだこの情報を活用していません。これは歴史上初めて、英語で数文を入力するだけで、バックエンド、認証、バージョン管理などを備えたカスタムウェブアプリを数分で完全にデプロイできるようになりました。世界中の誰もがこのソフトウェアについて知るべきです。lovableは新しいソフトウェアを構築するのを助けるソフトウェアです。
さて、こう考えるかもしれません。「デビッド、アプリは素晴らしいですし、バックエンドの接続やGitHubへの接続、認証の追加も非常に簡単でした。lovableは素晴らしいですが、アプリはお金を生み出しませんよね？」クライアントに販売したり、数千人のユーザーに拡大できる消費者向けアプリを構築したいなら、決済機能を接続する必要があります。lovableはこれも非常に簡単にします。必要なのはアクティブなStripeアカウントだけです。
stripe.comにアクセスし、アカウントを作成する必要があります。アクティブなStripeアカウントをお持ちでない場合は、メールアドレスを入力し、「今すぐ開始」をクリックしてください。通常のサインアップは30秒程度で済みますが、Stripeの場合は書類のアップロードなど、実在の人物であることを確認するために5分程度かかるかもしれません。
アカウントができたら、「ダッシュボード」ボタンをクリックしてStripeダッシュボードにリダイレクトされます。Stripeダッシュボードでは、テストモードを有効にすることが重要です。これにより、偽のデータを使用して支払いフローが正常に機能することを確認できます。すべてが正しく動作することを確認したら、テストモードのリンクを実際のリンクに置き換えるだけです。
これが初めてで、Stripeダッシュボードや決済機能の接続方法について何も知らない場合でも、lovableに質問するだけでいいのです。「Stripe決済をアプリに接続する方法を教えてください。新しいStripeアカウントを作成してダッシュボードにログインしました。テストモードも有効にしています」と質問します。
「アプリにStripe PSを統合するには、スーパーベースエッジ関数を使用してセキュアなバックエンド接続を作成する必要があります。プロセスをご案内します。まず、StripeのAPIキーが必要です」と回答があります。ダッシュボードでStripeのAPIキーはどこで見つけられますか？実はこの質問をする必要もなかったようです。lovableは既にリンクを提供してくれました。
lovableは驚くことを止めません。lovableがヨーロッパで最も急成長しているスタートアップである理由があるようです。APIキーのダッシュボードでテストモードが有効になっていることを確認し、公開可能キーとシークレットキーを確認できます。これらをコピーしましょう。APIキーを他の人と共有しないでください。これらはテストキーですが、パスワードと同様に扱ってください。
「他に必要なものはありますか？不要であれば、Stripe決済を実装するようにコードベースを更新してください」と質問します。「タイムブロックアプリにStripe決済を統合します。まず、APIキーをスーパーベースのシークレットとして保存します。決済処理を安全に処理するためのスーパーベースエッジ関数と、決済フロー統合用のフロントエンドコンポーネントを作成する必要があります」と答えます。
SQLクエリを適用する必要があります。すでに稼働しているプロジェクトでこれを行う場合は、必ず適切に確認してください。盲目的に適用しないでください。MVPを迅速に構築する方法ですが、長期的には問題が発生する可能性もあります。
プロジェクトについて真剣であればあるほど、構築期間が長いほど、ウェブアプリまたは構築しているソフトウェアに対する目標が大きいほど、コードをより理解するよう努めるべきです。単に手を濡らすための迅速なMVPを構築している場合は、すべてを受け入れて進めることができますが、本格的なAIスタートアップを構築したい場合は、基本を学ぶために時間を費やす必要があります。
すべての構文を理解する必要はありませんが、各ファイルが何をするのかを知っているべきです。lovableのコードビューアで、index.html、README.ファイル、main.jsx が何をするのかなど、コードベースがどのように機能するかについてある程度の理解が必要です。
lovableはすでにSQLクエリを実行しました。「public.payments」テーブルを作成したので、新しいテーブルが表示されるはずです。「活動」と「支払い」があります。行レベルセキュリティを有効にし、一人のユーザーが他のユーザーの支払いにアクセスできないようにしています。これはセキュリティ上の大きな欠陥となるからです。
ポリシーも作成されました。「認証とポリシー」をクリックすると、複数のポリシーが表示されます。「アクティビティ」テーブル用のポリシーとして、「ユーザーは自分のアクティビティのみを削除できる」、「ユーザーは自分のアクティビティを挿入できる」などがあります。「支払い」用には、「ユーザーは支払い記録を作成できる」、「ユーザーは自分の支払いを表示できる」などがあります。これらのポリシーにより、バックエンドが適切に保護され、誰かが別のユーザーのアカウントを使用したり、アクティビティを見たりすることができなくなります。
コードは変更されていますが、エラーがあります。「修正を試みる」をクリックし、エラーをクリックして何が起きたのかを確認できます。「モジュールsonerにはexportされたメンバーused toastがありません」というエラーです。簡単に修正できるはずです。「sonerからused toastをインポートしようとしましたが、used toast関数をエクスポートしていないためにエラーが発生しました。インポートを置き換えてエラーを修正しました」とあります。
「Stripe決済が機能するかどうかをテストする方法」を尋ねます。lovableはアプリのテストも手伝ってくれます。数ヶ月後には、lovableが自動的にこれを行う可能性があります。主要な変更後に「デビッド、この変更を行いました。Stripe決済を追加しました。これらの2つのテストを実行することをお勧めします。実行しますか？」と提案し、「承諾」をクリックするだけでテストが実行されるようになるでしょう。これはlovableチームの更新配信の速さを考えると、かなり安全な予測です。
「支払いフローに移動してください」とありますが、アップグレードボタンがありません。「アプリにアップグレードボタンがありません。ユーザーがダッシュボードにいるときに大きく目立つボタンを追加してください」と指示します。
これで無料プランからプロプランにアップグレードするためのボタンが追加されます。これは簡単な変更のはずです。私のAIスタートアップ「viel」のように、無料で使用でき、一部の機能は有料のみというようにします。
「Time Blocks Premiumにアップグレード」ボタンが追加されました。「無制限のタイムブロック、分析などのロックを解除」と書かれ、「今すぐアップグレード」または「プレミアムにアップグレード」と表示されています。「支払う」をクリックするとエラーが発生します。
スクリーンショットを撮影し、「アップグレードモデルの支払いボタンをクリックすると、このエラーが表示されます。スクリーンショットを参照してください。また、ユーザーが支払う金額を変更できないようにしてください。プレミアムプランは$15/月に固定してください」と指示します。
これは最適なプロンプトエンジニアリングではありません。理想的には一度に一つのことを行い、それが正しく機能したら次に進むべきですが、lovableが2つのことを同時に処理できると思います。まず明らかに大きな問題であるエラーと、ユーザーが支払額を変更できる問題（これは主にUIの問題）があります。
エッジ関数が不足しているStripe APIキーのため500エラーを返しています。まだやっていないのは、製品を作成することです。Stripeダッシュボードに戻り、「製品カタログ」をクリックしましょう。テストモードであることを確認し、新しい製品を作成します。「lovable app premium」と名前を付け、価格を米ドルで月額15ドルに設定します。「製品を追加」をクリックし、製品をクリックします。
価格の上にカーソルを置き、3つのドットをクリックして「支払いリンクを作成」をクリックします。これはStripe決済がアプリで機能するようにするために必要なステップです。ここで自動的に税金を徴収するかどうかなど、さまざまなオプションをカスタマイズできます。完了したら、右上の「リンクを作成」をクリックします。
これがStripe支払いリンクです。これをコピーしてlovableに提供する必要があります。「以前にStripe支払いリンクを提供するのを忘れていました。こちらです。ユーザーがアップグレードボタンをクリックしたときに、Stripeチェックアウトにリダイレクトされるよう、これをアプリに適切に実装してください」と入力します。
これは、独自のチェックアウトを持つよりも簡単です。すべてを自動的に処理するようにStripeに任せることができます。lovableは「Stripe支払いリンクをアプリに実装します。これによりユーザーはStripeチェックアウトにリダイレクトされます」と回答します。
lovableが変更しないものもありますが、それは変更する必要がないからです。ボタンのあるダッシュボードや支払いコンポーネントなど、書き直す必要のある部分だけを書き直します。AIが作業する様子を見るのは本当に素晴らしいです。もし私たちが未来に生きていると思わないなら、何を言えばいいのかわかりません。
実際にテストしてみましょう。「プレミアムにアップグレード」をクリックすると、金額を変更できなくなっていることがわかります。これは良いことです。「チェックアウトに進む」をクリックできます。カスタムドメインでテストできるように、アプリを公開することもできます。
カスタムドメインでテストする方が良いでしょう。これが実際のユーザーにとってのウェブサイトの外観だからです。カスタムドメインでアップグレードボタンをクリックし、「チェックアウトに進む」をクリックすると、Stripeチェックアウトにリダイレクトされます。素晴らしいです。
メールアドレスを入力し、カードには4242を複数回入力します。日付は0.25など将来の日付を入力し、任意の3桁の数字を入力します。「デビッド・アンドレ」と入力し、「チェックアウト、支払い、サブスクライブ」をクリックします。
Stripeダッシュボードの「顧客」タブに、今日作成された新しい顧客が表示されています。素晴らしいです。これでアプリは決済を受け付けることができます。最後のステップは、テストモードをオフにして、APIキーと支払いリンクを実際のものに置き換えることです。それ以外はすべて同じです。
途中でエラーが発生したり、行き詰まったりしても、lovableのチャットで何が起こっているかを説明し、次にすべきことや接続方法などを尋ねるだけです。文字通り何でも構築するのを手伝ってくれます。
この動画で見たように、フロントエンド、バックエンド、データベース、認証、バージョン管理、決済、メール認証など、すべてを備えたフルスタックアプリ全体をlovableで構築しました。英語でタイプするだけです。
どのようなアイデアを持っていても、どのようなビジネスを始めたくても、どのようなソフトウェアを構築したくても、もはやそれをしない言い訳はありません。lovableのおかげで超簡単です。英語でタイプして、残りはlovableに任せるだけです。
lovableを試してみたい場合は、lovable.df/David Andreにアクセスするか、動画下のリンクをクリックしてください。他の人が得るクレジットの2倍のクレジットを受け取れます。
視聴してくれてありがとうございます。lovableを試して、素晴らしい一週間をお過ごしください。
コメント