はじめに
- https://www.s3lab.co.jp/blog/shopify/1625/ の続き
- https://shopify.dev/docs/apps/build/build?framework=remix を参考にする
Remixとは？
- Reactベースのフレームワーク
- Shopifyの公式フレームワーク
Prismaとは？
- Node.jsのORM
- このチュートリアルでは、DBにsqliteを使用している
Poralisとは？
- Shopify管理者用のデザインシステム
- Shopifyもこれを使っているので一貫したデザインになる
Shopify App Bridgeとは？
- Shopifyの標準の機能と同様の動作を簡単に組み込める
- 例）OAuth認証、パンくず、トーストメッセージ、ポップアップ画面など
アプリの作成
% npm install -g @shopify/cli@latest
% shopify version
Current Shopify CLI version: 3.64.1
% shopify app init
Welcome. Let’s get started by naming your app project. You can change it later.
? Your project name?
✔ s3lab-app-1
? Get started building your app:
✔ Start with Remix (recommended)
? For your Remix template, which language do you want?
✔ JavaScript
╭─ info ───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Initializing project with `npm` │
│ Use the `--package-manager` flag to select a different package manager. │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭─ success ────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ s3lab-app-1 is ready for you to build! │
│ │
│ Next steps │
│ • Run `cd s3lab-app-1` │
│ • For extensions, run `shopify app generate extension` │
│ • To see your app, run `shopify app dev` │
│ │
│ Reference │
│ • Shopify docs [1] │
│ • For an overview of commands, run `shopify app --help` │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯
[1] https://shopify.dev
% cd s3lab-app-1
% shopify app dev
? App name:
✔ s3lab-app-1
? Which store would you like to use to view your project?
✔ s3labteststore2
╭─ info ───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Using shopify.app.toml: │
│ │
│ • Org: S3LAB Inc. │
│ • App: s3lab-app-1 │
│ • Dev store: s3labteststore2.myshopify.com │
│ • Update URLs: Not yet configured │
│ │
│ You can pass `--reset` to your command to reset your app configuration. │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯
? Have Shopify automatically update your app's URL in order to create a preview experience?
✔ Yes, automatically update
00:50:02 │ remix │ Running pre-dev command: "npx prisma generate"
00:50:02 │ graphiql │ GraphiQL server started on port 3457
00:50:03 │ webhooks │ Sending APP_UNINSTALLED webhook to app server
00:50:04 │ remix │ Prisma schema loaded from prisma/schema.prisma
00:50:04 │ remix │ Datasource "db": SQLite database "dev.sqlite" at "file:dev.sqlite"
00:50:04 │ remix │
00:50:04 │ remix │ SQLite database dev.sqlite created at file:dev.sqlite
00:50:04 │ remix │
00:50:04 │ remix │ 1 migration found in prisma/migrations
00:50:04 │ remix │
00:50:04 │ remix │ Applying migration `20240530213853_create_session_table`
00:50:04 │ remix │
00:50:04 │ remix │ The following migration(s) have been applied:
00:50:04 │ remix │
00:50:04 │ remix │ migrations/
00:50:04 │ remix │ └─ 20240530213853_create_session_table/
00:50:04 │ remix │ └─ migration.sql
00:50:04 │ remix │
00:50:04 │ remix │ All migrations have been successfully applied.
00:50:05 │ remix │ ➜ Local: http://localhost:62026/
00:50:05 │ remix │ ➜ Network: use --host to expose
00:50:06 │ remix │ [shopify-api/INFO] version 11.2.0, environment Remix
00:50:06 │ remix │ [shopify-app/INFO] Future flag wip_optionalScopesApi is disabled.
00:50:06 │ remix │
00:50:06 │ remix │ Enable this to use the optionalScopes API to request additional scopes and manage them.
00:50:06 │ remix │
00:50:07 │ remix │ (node:56699) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
00:50:07 │ remix │ (Use `node --trace-warnings ...` to show where the warning was created)
00:50:07 │ webhooks │ APP_UNINSTALLED webhook delivered
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
› Press d │ toggle development store preview: ✔ on
› Press g │ open GraphiQL (Admin API) in your browser
› Press p │ preview in your browser
› Press q │ quit
Preview URL: https://s3labteststore2.myshopify.com/admin/oauth/redirect_from_cli?client_id=XXXXX
GraphiQL URL: http://localhost:3457/graphiqlアプリのインストール
Preview URLへアクセスし、開発中のShopifyアプリを開発用ストアへインストールする
パッケージのインストール
npm install --save qrcode
npm install @shopify/polaris-icons --save
npm install tiny-invariant --savePrisma設定ファイルにデータモデルの追加
prisma/schema.prismaファイルにQRcodeを追加
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
// Note that some adapters may set a maximum length for the String type by default, please ensure your strings are long
// enough when changing adapters.
// See https://www.prisma.io/docs/orm/reference/prisma-schema-reference#string for more information
datasource db {
provider = "sqlite"
url = "file:dev.sqlite"
}
model Session {
id String @id
shop String
state String
isOnline Boolean @default(false)
scope String?
expires DateTime?
accessToken String
userId BigInt?
firstName String?
lastName String?
email String?
accountOwner Boolean @default(false)
locale String?
collaborator Boolean? @default(false)
emailVerified Boolean? @default(false)
}
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())
}
マイグレートを実行する
% npm run prisma migrate dev -- --name add-qrcode-table
> prisma
> prisma migrate dev --name add-qrcode-table
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.sqlite" at "file:dev.sqlite"
Applying migration `20240730161224_add_qrcode_table`
The following migration(s) have been created and applied from new schema changes:
migrations/
└─ 20240730161224_add_qrcode_table/
└─ migration.sql
Your database is now in sync with your schema.
✔ Generated Prisma Client (v5.17.0) to ./node_modules/@prisma/client in 37ms
モデルファイルを作成
- app/models/QRCode.server.jsファイルを作成
- Get QR codes
- Get the QR code image
- Get the destination URL
- Retrieve additional product and variant data
- Validate QR codes
QRコードフォームの作成
- app/routes/app.qrcodes.$id.jsxファイルを作成
- Set up the form route
- Authenticate the user
- Return a JSON Response
- Manage the form state
- Add a product selector
- Save form data
- Lay out the form
- Add breadcrumbs
- Add a title field
- Add a way to select the product
- Add destination options
- Display a preview of the QR code
- Add save and delete buttons
- Create, update, or delete a QR code
QRコードのリスト
- app/routes/app._index.jsxの編集
- Load QR codes
- Create an empty state
- Create an index table
- Create index table rows
- Warn if a product is deleted
- Lay out the page
パブリックQRコードルートの追加
- app/routes/
qrcodes.$id.jsxの編集- Create a public QR code route
- Load the QR code
- Render a public QR code image
リダイレクトの実装
- app/routes/
qrcodes.$id.scan.jsxの作成- Create the scan route
- Validate the QR code ID
- Increment the scan count
- Redirect
Preview and test your app
- Start your server
- Test the QR code index and form
- Test QR code scanning functionality