2時間で生成AIツールを駆使して、極力コーディングなしでどこまでアプリを作ることができるのか!?
こんにちは！
株式会社アウトバーン開発部です。
弊社では生成AIの活用についてセミナーや研修を行っていますが、
実際に生成ツールを活用するとどこまでアプリを作り込むことができるのか？
そんな声にお応えするべく、実際にチャレンジしてみます。
※2時間にしたのは、私が作業中によく聴かせていただいている「ポモドーロテクニック」の音源が2時間のためです😂
今回はこちらの音源を流して、25分作業×4セットで取り組みます。
事前情報
- 開発者の後輩の話を聞いて、「Devin AI」というツールが流行っているらしいと知る
- Zennで記事検索すると、以下の2記事を発見。いずれも非常にわかりやすく、勉強になりました
- Devin AI は現在1ヶ月$500かかるらしく、前身の OpenHands というツールはオープンソースらしい
今回作るアプリ
直近で欲しいなと思う機能について、粗めに要件を定義します。
背景
営業活動をする際に、以下の情報があればとても嬉しいという声がありました。
- 先方がどんな会社様なのか
- 担当者の方はどのような方なのか
- ニーズやお困りごとの仮説
要件
先方に関する情報を入れると、
- 会社情報
- 担当者に関する情報
- ニーズ、お困りごと、ニュースなどトピック情報
- 各リンクも添えて記載
が抽出されるアプリを作成する。
事前にインストールが必要だったもの
作業中、すでに私の環境でインストール済み or インストール作業が必要だったものを
リスト化して記載します。
- Docker
先に結論
- プロンプトのみでファイル構成やコーディング、機能修正などは実施可能
- ポート解放周りでエラーが出まくり、泣く泣くローカルで開発を続行
- 修正過程が分かりやすく、デバッグもしやすい
開発開始！
以下、開発をしながらメモをします。
※投稿前に少し手直しすると思います。
第一ターム (25分)
OpenHands の起動
ということで最初は、
そもそも OpenHands というツールをローカルで動かしてみます。
READMEを読むと、QuickStartがあるので、動かします。
Dockerが動作する環境で、以下の2コマンドを動かします。
$ docker pull docker.all-hands.dev/all-hands-ai/runtime:0.18-nikolaik
$ docker run -it --rm --pull=always \
-e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.18-nikolaik \
-e LOG_ALL_EVENTS=true \
-v /var/run/docker.sock:/var/run/docker.sock \
-v ~/.openhands-state:/.openhands-state \
-p 3000:3000 \
--add-host host.docker.internal:host-gateway \
--name openhands-app \
docker.all-hands.dev/all-hands-ai/openhands:0.18
※ローカルでDockerを起動し忘れていたので、ここで docker desktopを起動して再挑戦。
調査 5:00-
インストールに時間がかかりそうなので、
調査用生成AIの Perplexity で調査をします。
こちらは、プロンプトを入力するとインターネット上の記事を自動で収集して
出力を返してくれる生成AIツールとなります。
入れてみたプロンプトはこちら
↓↓
以下のアプリを作成したいです。
どのような要件が必要でしょうか？
## 背景
営業活動をする際に、以下の情報があればとても嬉しいという声がありました。
- 先方がどんな会社様なのか
- 担当者の方はどのような方なのか
- ニーズやお困りごとの仮説
## 要件
先方に関する情報を入れると、
- 会社情報
- 担当者に関する情報
- ニーズ、お困りごと、ニュースなどトピック情報
- 各リンクも添えて記載
が抽出されるアプリを作成する。
出力結果の抜粋はこちら
↓↓
...
機能要件
1. データ入力機能
- 会社名、担当者名などの基本情報を入力できるフォーム
- 入力補助機能（オートコンプリート、候補表示など）
2. 情報抽出・表示機能
- 会社情報の抽出と表示（業種、規模、沿革など）
- 担当者情報の抽出と表示（役職、経歴など）
- ニーズ、お困りごと、関連ニュースの抽出と表示
- 各情報源へのリンク提供
3. データ保存・管理機能
- 過去の検索履歴の保存
- ユーザーによるメモ追加機能
4. 検索・フィルタリング機能
- 保存された情報の検索
- カテゴリー別フィルタリング
...
なるほど。
1.2.の要件は確かに必須ですが、
今回は保存やフィルタリングは一旦考えないので、
その旨もプロンプトに入れます。
プロンプト (良かった点は褒めると、その部分をうまく引き継いで出力してくれます。)
↓↓
出力ありがとうございました。
すごく整理されていてわかりやすかったです。
今回はあくまでデータ入力と出力ができれば良いので、
機能要件の以下は考慮しなくて良いです。
3. データ保存・管理機能
4. 検索・フィルタリング機能
こちらを踏まえて、
再度要件を作ってください
出力 (抜粋)
↓↓
機能要件
1. データ入力機能
- 会社名、担当者名などの基本情報を入力できるシンプルなフォーム
- 入力補助機能（オートコンプリート、候補表示など）
2. 情報抽出・表示機能
- 会社情報の抽出と表示（業種、規模、沿革など）
- 担当者情報の抽出と表示（役職、経歴など）
- ニーズ、お困りごと、関連ニュースの抽出と表示
- 各情報源へのリンク提供
要件がスッキリしました。
再度 OpenHands を触る 残り 12:00
二つ目のコマンド実行後、 ローカルホストで動作したようです。
起動後の画面
一旦「Confirm Preference」をクリック
ここで困ったことが起きました。
API Keyが必要らしいです。
元のREADMEに戻ると、以下のような記載がありました。
Finally, you'll need a model provider and API key. Anthropic's Claude 3.5 Sonnet (anthropic/claude-3-5-sonnet-20241022) works best, but you have many options.
Anthropic's Claude 3.5 Sonnet か、その他の手段が必要なようです。
API Keyを探す旅 残り 8:00
まずは、推奨されている Anthropic へ移動しました。
会員登録もします
悔しいですが5ドルだけチャージします。
ここで25分経過しました。
進捗
- OpenHands の起動はできた
- 要件も Perplexity と簡単に整理できた
- APIの有効化は途中
第二ターム (25分)
API登録の続き 残り25分
無事に購入処理も終えました。
APIキーの発行 残り22分
APIキー発行画面より、発行手続きを実施。
「testkey」という名前で登録。
APIキーの発行。
ここで画面を閉じると二度と確認することができないのでコピーをしておく。
OpenHandsの画面操作 残り19分
先ほど発行したAPIキーを入力して次に進む。
以下の画面に移動。
ここで、要件を入力してみます。
捜査を開始後、アプリを作成し始めました。
Flaskで作るそうです。
1分ほど待つと、ファイルが作成されたそうです。
Download files からダウンロードします。
ローカルで動かしてみる 残り13分
本当に？と思いながら、
ローカルでファイルを起動します。
vSCodeでダウンロードしたフォルダを開きます。
sales_support という、それっぽいフォルダは作成されています。
諸々のパッケージをインストールした上で起動すると、
5000ポートがすでに使われているエラーが発生しました。
一旦エラーメッセージの通りに対処をします。
* Serving Flask app 'app'
* Debug mode: on
Address already in use
Port 5000 is in use by another program. Either identify and stop that program, or start the server with a different port.
On macOS, try disabling the 'AirPlay Receiver' service from System Preferences -> General -> AirDrop & Handoff.
macOSだったので、AirPlayレシーバーというものをオフにする必要があったようです。
そちらを実行後、5000ポートで立ち上がりました。
動作確認 残り5分
それっぽい画面が立ち上がりました。
簡素で良いですね。
まずは自社情報を入れてみます。
この後どうなるのでしょうか？
おそらく同じ名前の別会社の情報が出てきました。
ただ、要素としては良さそうです。
試しに架空の情報を入れても同じ出力になりました😂
ここで時間が来ました。
進捗
- APIキーの発行
- OpenHandsの起動
- アプリの作成・出力
- ローカルでの動作確認 (UIは要件に沿っているものの、出力がまだまだ課題あり。)
第三ターム (25分)
ソースコードを改めてみてみる 残り25分
改めてコードを見てみると、
ダミーで値が入れられていることがわかりました。
プロトタイプとして作る分には問題ないですね。
ということで、ここからは実際の運用に寄せるために、
入力データから出力を作る部分の実装を
OpenHands でできるか試してみます。
OpenHands 再度起動 残り23分
ここでちょっと目を離していたので、プロセスが閉じていたようです。
そして驚いたのが、5000ポートがまた使われていたのを察知して
勝手に再起動してくれています。
※すごすぎて正直ちょっと引いています。
少し待つと、5001ポートで開き直してくれました。
そして、 Open in VS Code というボタンから直接編集できそうなので開きます。
こちらがVSCodeの画面です。
コードはこれで確認できますね。
OpenHands アプリの修正 残り17分
左のプロンプト入力欄でちょっと使いずらいのは、
Enterを打つと勝手に送信されてしまうので、
下書きをしてからコピペすることにします。
以下のプロンプトを挿入します。
実際の出力結果を出したいため、
Anthropic の Claude API に対してプロンプトを投げて、
その出力をもとに情報を出力するように変更したいです。
どのような情報を渡すと作ることができますか？
プロンプトを入れると、手順を提示して
勝手にインストールまで始めました。
最終的に、環境変数にAPIキーを入れれば動くところまで準備してくれました。
コマンドで環境変数を追加します。
何かうまくいかなかったみたいなので、再度設定し直してくれました。
右側のTerminalは、自分で触らない方がいいみたいです。
OpenHands アプリの再起動 残り6分
勝手にTerminalを触ってしまったことによりロスが発生しました。
OpenHandsに以下のように伝えると、プロセスの削除から再起動まで自動で実行中です。
アプリケーションが起動していないようでした。
5001ポートはうまく動かなかったようで、
5002ポートで開き直しています。
ここで時間が来ました。
起動周りは課題がありそうですね。
進捗
- OpenHands でのコードの修正着手
- 起動周りでエラーを繰り返し、OpenHandsが自動復旧中
第四ターム (25分)
OpenHands デバッグを見守る 残り25分
ポート問題のデバッグのために、
まずは簡単なファイルを作成して動作確認をしています。
今度もダメだったようで、Waitress という別のパッケージを入れるようです。
このプロセスもデバッグの勉強になります。
ダメだったようでした。。
ここで気づいたことがあります。
docker run で起動しているターミナルを見ると、
1分間のtoken数が上限にあたっているとのことでした😭
だから出力が遅いのですね。。
ローカル作業 残り10分
ファイル一式をダウンロードして、
ローカルで起動します。
エラーが一部発生したため、ゴリ押しで修正をしました。。
動作確認として、別の会社様のお名前をお借りして動作確認をしました。
誤っている情報はあるものの、Claude経由で取得した情報をもとに出力することができました。
※個人情報の観点で、スクリーンショットはやめておきます
進捗
- OpenHands のデバッグで、ポート問題は解決せず
- 最後は一部手を加えて、なんとかアプリは完成
結論
プロンプトを用いて開発できたのは非常に魅力的でした！
Devin AI はより精度が増したということで、
選定した上で利用してみたいと考えています。
Discussion