👾

Devinと始めるShopifyApp開発

に公開

はじめに

みなさんはDevinを知っていますか?
私は以前原さんが執筆された記事をきっかけに知ったのですが
今回は、このDevinの実力を試すべく、Shopify Appの開発環境を手動で構築し、その後はDevinにアプリ開発を任せるという実験をしてみました。

原さんの記事
https://zenn.dev/tsuzucle_tech/articles/9cf9b52ca6b436

今回開発するチュートリアル
https://shopify.dev/docs/apps/build/build?framework=remix

環境構築:Shopify Appの開発準備

Step 1: Shopify Partnerダッシュボードでアプリ作成

まずはShopify Partnerダッシュボードにアクセスし、右上の「アプリを作成」ボタンをクリックします。

Shopify Partnerダッシュボードでのアプリ作成画面

Step 2: Shopify CLIのセットアップ

Shopify Appの開発には公式のShopify CLIを使用します。今回はnpmでセットアップを進めていきます。

Shopify CLIの選択画面

ターミナルを開き、以下のコマンドを実行します:

npm init @shopify/app@latest

プロンプトが表示されたら「y」を押して進めます。すると、ブラウザにログイン画面が自動的に開きます。

Shopify CLI認証画面

Shopifyアカウントでログインすると、CLIの使用権限が付与されます。

ログイン成功画面

Step 3: アプリプロジェクトの作成

次に、使用するパートナーアカウントを選択し、新しいアプリを作成します。今回のアプリ名は「product-qr-app」としました。

アプリ名を決定すると、ShopifyのCLIツールが必要なファイルの生成とセットアップを自動的に行います。
アプリ作成中の画面

Step 4: プロジェクトの確認

インストールが完了したら、作成されたプロジェクトフォルダに移動し、VSCodeで開いてみましょう:

cd product-qr-app
code .

VSCodeでプロジェクトを開いた画面

これで、VSCodeが起動し、生成されたプロジェクト構造を確認できます。Shopifyアプリ開発に必要なファイルやディレクトリが自動的に作成されています。

VSCodeでのプロジェクト構造

また、ShopifyのPartnerダッシュボードにも新しく作成したアプリが表示されていることを確認しましょう:

Partnerダッシュボードでのアプリ表示

Step 5: Gitリポジトリの作成

次のステップとして、プロジェクトをGitHubリポジトリにプッシュします(詳細な手順は割愛します)。

GitHubリポジトリの作成完了

Devin登場!AIエンジニアによるApp開発

環境構築が完了したところで、いよいよDevinの出番です!今回はDevinのインタラクティブな「DevinSession」機能を使って対話形式で開発を進めていきます。

Devinセッション開始画面

Devinが動き始めました!プロジェクトの分析、コード理解、タスク特定などを自動的に行っています。

Devin作業中

15分程度でDevinは機能実装を完了し、GitHubリポジトリへのプルリクエストまで作成してくれました、、
Devinが作成したプルリクエスト

Devin開発のアプリをテストしてみる

Devinが開発したアプリが実際に動作するか確認してみましょう。

Step 1: テストストアの選択

まずはアプリをテストするShopifyストアを選択します(この例では事前に「product-qr-app-tutorial」という名前のテストストアを用意していました)。

テストストアの選択画面

Step 2: アプリのインストール

テストストアを選択したら、アプリをインストールします。

アプリのインストール完了画面

Step 3: 動作確認

Devinのプルリクエストをマージした後、リポジトリをローカルにプルしてから、以下のコマンドで開発サーバーを起動します:

npx shopify app dev

コマンドを実行すると、プレビューリンクが表示されるので、そちらにアクセスしてみましょう。

開発サーバー起動画面

エラー出ると思ったら一発で画面出ました、、
アプリの動作確認画面

アプリの機能であるQRコードも問題なく生成され、実機からスキャンしてチェックアウトページへの遷移まで確認できました。

QRコードを使ったチェックアウト画面

まとめ

今回の検証から、Devinの自立型AIエンジニアとしての実力の一端を垣間見ることができました。環境構築こそ手動で行いましたが、その後のアプリ開発からデプロイ、テストまでをDevinが自動的に行ってくれたのは驚きです。
特に個人的にいいなと思ったのは各回答に対して「信頼度:」を表示してくれる点です。
全ての回答に対して正しいかどうか向き合うことは大切ですが、赤丸の場合は「信頼度:低」と表示されていて開発サイドも警戒して回答を見れるようになります。

次はcodexとかで試してみます!

参考リンク


株式会社Tsuzucle Tech Blog

Discussion