Open5

shopify app exapmleをやってみる

てりーてりー

やるのはこれ
https://shopify.dev/docs/apps/getting-started/build-qr-code-app?framework=remix

このチュートリアルをやる目的

  • shopifyの開発を実務で請け負ったので、shopfyに慣れたい
  • Remixテンプレートに慣れたい
  • AppBridgeを使いたい

この辺です。
特にRemixに関しては、2023年8月からテンプレート導入されたばかりで、ベストプラクティスが確立されてないので、まずは公式チュートリアルで足場を固めたいと思いました。

てりーてりー

事前準備

初めてshopifyを触る自分にはいくつか事前準備が必要だった

Shopify CLI

以下のコマンドでShopify CLIをインストールする

brew tap shopify/shopify
brew install shopify-cli

ここで以下のエラーが出た。

==> Installing shopify-cli from shopify/shopify
Error: Your Command Line Tools are too outdated.
Update them from Software Update in System Settings.

If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install

Alternatively, manually download them from:
  https://developer.apple.com/download/all/.
You should download the Command Line Tools for Xcode 15.1.

コマンドラインツールが古いらしいので、潔く支持されたコマンドを実行

sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install

出来たら再度Shopify CLIをインストール

brew install shopify-cli

インストールが確認出来たらOK

shopify version
Current Shopify CLI version: 3.60.1

shopifyのパートナーアカウントとストアの作成

shopifyにアクセスしてパートナーアカウントとストアを作成します。

てりーてりー

プロジェクト作成

以下のコマンドを実行します。

npm init @shopify/app@latest

~~~
質問

?  Your project name?
✔  remix-tutorial

?  Get started building your app:
✔  Start with Remix (recommended)

?  For your Remix template, which language do you want?
✔  TypeScript

なぜかプロジェクト名にはshopifyが入れられませんでした。

プロジェクトが手元に作れたらnpm run devして

これが出たら一旦OK！！

次にターミナルに以下のログがあったので対応

╭─ error ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                        │
│  Couldn't find the app with Client ID `xxxxxx`                                                                               │
│                                                                                                                                                        │
│  You can pass `--reset` to your command to reset your app configuration.                                                                               │
│                                                                                                                                                        │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

要するに設定が違うからnpm run dev -- --resetしてとの事。

以下の画面になり、環境構築は完了！！

てりーてりー

prismaでQRコードデータのモデルを定義する

schema.prismaに以下を追加


model QRCode {
  id               Int      @id @default(autoincrement())
  title            String
  shop             String
  productId        String
  productHandle    String
  productVariantId String
  destination      String
  scans            Int      @default(0)
  createdAt        DateTime @default(now())
}

prismaテーブルを作成

npm run prisma migrate dev -- --name add-qrcode-table

migration

npm run prisma studio

QRコードテーブルが出来てます！！