Devinと始めるShopifyApp開発
はじめに
みなさんはDevinを知っていますか?
私は以前原さんが執筆された記事をきっかけに知ったのですが
今回は、このDevinの実力を試すべく、Shopify Appの開発環境を手動で構築し、その後はDevinにアプリ開発を任せるという実験をしてみました。
原さんの記事
今回開発するチュートリアル
環境構築:Shopify Appの開発準備
Step 1: Shopify Partnerダッシュボードでアプリ作成
まずはShopify Partnerダッシュボードにアクセスし、右上の「アプリを作成」ボタンをクリックします。
Step 2: Shopify CLIのセットアップ
Shopify Appの開発には公式のShopify CLIを使用します。今回はnpmでセットアップを進めていきます。
ターミナルを開き、以下のコマンドを実行します:
npm init @shopify/app@latest
プロンプトが表示されたら「y」を押して進めます。すると、ブラウザにログイン画面が自動的に開きます。
Shopifyアカウントでログインすると、CLIの使用権限が付与されます。
Step 3: アプリプロジェクトの作成
次に、使用するパートナーアカウントを選択し、新しいアプリを作成します。今回のアプリ名は「product-qr-app」としました。
アプリ名を決定すると、ShopifyのCLIツールが必要なファイルの生成とセットアップを自動的に行います。
Step 4: プロジェクトの確認
インストールが完了したら、作成されたプロジェクトフォルダに移動し、VSCodeで開いてみましょう:
cd product-qr-app
code .
これで、VSCodeが起動し、生成されたプロジェクト構造を確認できます。Shopifyアプリ開発に必要なファイルやディレクトリが自動的に作成されています。
また、ShopifyのPartnerダッシュボードにも新しく作成したアプリが表示されていることを確認しましょう:
Step 5: Gitリポジトリの作成
次のステップとして、プロジェクトをGitHubリポジトリにプッシュします(詳細な手順は割愛します)。
Devin登場!AIエンジニアによるApp開発
環境構築が完了したところで、いよいよDevinの出番です!今回はDevinのインタラクティブな「DevinSession」機能を使って対話形式で開発を進めていきます。
Devinが動き始めました!プロジェクトの分析、コード理解、タスク特定などを自動的に行っています。
15分程度でDevinは機能実装を完了し、GitHubリポジトリへのプルリクエストまで作成してくれました、、
Devin開発のアプリをテストしてみる
Devinが開発したアプリが実際に動作するか確認してみましょう。
Step 1: テストストアの選択
まずはアプリをテストするShopifyストアを選択します(この例では事前に「product-qr-app-tutorial」という名前のテストストアを用意していました)。
Step 2: アプリのインストール
テストストアを選択したら、アプリをインストールします。
Step 3: 動作確認
Devinのプルリクエストをマージした後、リポジトリをローカルにプルしてから、以下のコマンドで開発サーバーを起動します:
npx shopify app dev
コマンドを実行すると、プレビューリンクが表示されるので、そちらにアクセスしてみましょう。
エラー出ると思ったら一発で画面出ました、、
アプリの機能であるQRコードも問題なく生成され、実機からスキャンしてチェックアウトページへの遷移まで確認できました。
まとめ
今回の検証から、Devinの自立型AIエンジニアとしての実力の一端を垣間見ることができました。環境構築こそ手動で行いましたが、その後のアプリ開発からデプロイ、テストまでをDevinが自動的に行ってくれたのは驚きです。
特に個人的にいいなと思ったのは各回答に対して「信頼度:」を表示してくれる点です。
全ての回答に対して正しいかどうか向き合うことは大切ですが、赤丸の場合は「信頼度:低」と表示されていて開発サイドも警戒して回答を見れるようになります。
次はcodexとかで試してみます!
Discussion