0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

bolt.newの試行

Posted at

最初に(編集後記)

bolt.newすげー、と思って数ヶ月前に以下を書いていましたが、やはりソースのバージョン管理・共同開発のためにはひと手間必要で、それは今も変わっていない認識。
その間、Lovableすげーとなり、途中トラブルにもぶつかったりしている間に時が経ってしまいました。
下記で作ろうとしているアプリは、Lovableで開発して、いい感じで進んでいます。
https://giji-search-spark.lovable.app/index

そちらの感動も記事にしておこうと想いますが、下記ももったいないので、この時点で、公開しておこうと思います。
下記で考えていたのは、ローカル開発環境とうまく組み合わせられないか、ということでした。

<以下、ちょっと前の考察>

なぜbolt.newか

画面デザインセンスが壊滅的にないので、自動生成してほしいな。
Create の生成結果も素晴らしかったですが、Nuxtのほうが馴染みがあるので嬉しいなと。
そこで見つけたのがbolt.newでした。
作成中のアプリでSupabaseを使っていたので、その連携が楽そうなのもポイントです。

やりたいこと

一般的な使い方は色々情報があると思いますが、自分としてやりたいこと、難しそうだと思ったのは下記でした。

  • 全てをAIに頼るのではなく、細かい調整は自分でもやりたい
  • プロジェクト名などは自分で意図した名前にしたい
  • ソースのバージョン管理をしたい

以下、これらを意識した試行の記録です。

スタート

最初の画面で、いきなりやりたいことを書く方法とは別に、好きなスタックでブランクアプリを作れるというのが、特徴のように思います。
bolt.new
image.png

ただ、スタックを指定すればそれで作ってくれるので、
こんな粗いプロンプトで、かなりのところまでやってくれるのは脅威です。

Nuxt3スタックでスタンプラリーアプリを作りたいです。
利用者向けの機能と管理機能の両方を一つのアプリで作りたいです。

ただ、今回はいきなりSupabase接続型で作って、接続情報がないというエラーになってしまったので、それはやりすぎな気もします。(まずは直書きサンプルデータで作ってくれる場合もある)

なので、今回は、ブランクアプリから始めます。
下のアイコンクリックで基本を作って、Nuxtのスタートページ表示まで自動でやってくれます。

image.png

すごいとしか言いようがありません。

これに対して実際のアプリの仕様を加えていきます。
上と同じようにやってみます。
(スタンプラリーはちょっとうまくいかなかったので違うアプリで)

各省庁から提供されている議事録を横断検索するシステムを作りたいです。
議事録データ、省庁マスタ、発言者マスタなどはSupabaseで管理します。

すると、こんな感じで作ってくれました。完璧。

image.png

検索ボタンで一覧表示する動きまで作ってくれていますが、まだ、Supabaseには接続しておらず、サンプルデータをアプリ内で定義してくれています。

Supabase接続

これをSupabaseに連携していきます。

SupabaseのOrganizationは作成済みとします。
先にSupabaseプロジェクトを作っておいたほうが色々制御が効くかなとも思いましたが、
Project name は後から変更できますし、bolt.newの機能で接続して良いかなと思いました。
Connect to Supabase で接続します。
Prijectは勝手に作られます。.envも作成されました。(中身は***で作られたと思ったら、クリックしたらちゃんと設定されていました)

ただ、APIで接続するつもりのようなので、まだテーブル等は作られていません。
なので、指示してみます。

議事録情報は、API経由で取得するのではなく、Supabase内に保持します。
省庁マスタもSupabase内に作成します。

StackBiltz経由でGitHubへ

bold.newの特徴の一つとして、StackBiltzとの連携が用意されている、ということもあります。
生成したソースをオンライン開発環境で編集して、その状態であれば、またbolt.newに戻ることもできる、という感じです。
そして、StackBiltzではGithHubへの連携が用意されています。これを使って、ソース管理を開始します。

ところで、これができると、

これで読み込んでくれるので、これに対して処理してくれる

ここから直接pushはできないが、再度StackBlitzで開いて、githubに接続すれば良い・・・と思ったらGithubから開いてしまうよう

それならばダウンロードのほうが良いかも
StackBlitzもけして早くはないので

トークン上限も厳しいので、いざというときに頼る感じか

最終的な形は、
ローカル環境で開発
AIに頼りたい場合は、一旦pushして、これをbolt.newで開く
修正されたものはローカルにダウンロードして、ローカルで開発継続
という感じだと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?