はじめに以下で、EventBridgeを使い、ShopifyイベントとLambdaを連動させる方法は説明している。https://www.s3lab.co.jp/blog/shopify/1882/ここでは、LambdaからSlackのWebhookを呼び出す方法を検討する。開発通知を受け取るためのSlackチャンネルを作成Slackでwebhook urlを作成slackにログインした状態で以下にアクセスするhttps://slack.com/services/new/incoming-webhookチャンネルを選択し、Incoming Webhookインテグレーションの追加を押すと、URLを入手できるこれは、slack app「Incoming Webhook」によるカスタムインテグレーションで実現している。登録済みのURLを確認するには、アプリ検索から「Incoming Webhook」を開き、設定を確認する。SlackのwebhookへメッセージをPOSTするLambd
はじめにcodegenでgraphqlの開発がどのように自動化できるのか調査するgraphqlのきれいなコードの収め方を考える参考https://shopify.dev/docs/api/shopify-app-remix/v2/guide-graphql-typeshttps://shopify.dev/docs/api/admin-graphql/2024-07/queries/orders?language=Remixhttps://shopify.dev/docs/api/shopify-app-remix/v2/apis/admin-apihttps://remix-docs-ja.techtalk.jp/ソース確認package.jsonの確認@shopify/api-codegen-presetがインストール済みスクリプトに、 graphql-codegenが設定済み追加で、npm add @shopify/admin-api-client @shopify/sto
はじめに目標Shopifyのカスタムアプリは、Shopify Partner, Shopify appコマンド、Shopifyストア管理画面から作成できます。Shopify appコマンドで作成すると、Shopify Partnerで認識されます。これはRemixアプリとして開発手順を確認しました。今回は、もう一つの手法である、Shopifyストア管理画面から作成し、Shopify Partnerから作成する場合との手順の違いを確認します。前提カスタムアプリは、１つのストア限定でインストールできます。ただし、Shopify Plusプランの組織をもつ場合、Shopify Partnerで作成したカスタムアプリは開発用ストアと同じ組織に属しているストアにもインストールできます。カスタムアプリから、顧客名、住所、メールアドレス、電話番号のような個人識別用情報（PII）へのAPIアクセスは、Shopify, Advanced, Plusプランでのみ有効でです。管理画面から作成するアプリは、Storefront APIとAdmin A
はじめにやりたいことAmazon EventBridgeでWebhook捕捉、WebhookからLambda実行、LambdaでShopify Admin APIを呼び出したい参考https://shopify.dev/docs/apps/build/authentication-authorization/access-tokens２種類のアクセストークン取得方法埋め込みアプリは、Token Exchange非埋込アプリは、Authorization grant code flowhttps://shopify.dev/docs/apps/build/authentication-authorization/access-tokens/authorization-code-grantマニュアルでのAuthorization code grant flowhttps://shopify.dev/docs/apps/build/authentication-authorization/access-token
はじめに参考https://shopify.dev/docs/apps/build/webhooks/subscribe/get-started?framework=remix&deliveryMethod=pubSub関連https://www.s3lab.co.jp/blog/shopify/1882/https://www.s3lab.co.jp/blog/shopify/1869/GCP Pub/SubでTopicを作成CREATE TOPICボタンを押すTopic ID: shopify-app-s3lab-app-2他はデフォルトのまま生成の完了PERMISSIONSのADD PRINCIPALボタンをクリックするNew principals: Shopify partner service account addressを入力メアドのフォーマットであることが必須Role: Pub/Sub Publi
はじめにhttps://shopify.dev/docs/apps/build/webhooks/subscribe/get-started?framework=remix&deliveryMethod=eventBridgePartner event sourcesからShopify選択手順を確認するShopify側でAmazon EventBridgeソース作成Shopify parnters画面 > アプリ選択 > Configuration選択Amazon EventBridgeを選択するAWS account IDを入力するリージョンを選択するソース名：shopify-app-s3lab-app-2 ＜Event bus名と同じにする＞Partner event sourcesの関連付けEvent busの確認前述のAssociate実行でソースと同名のbusが作成されたことを確認する。ここで、イ
はじめにtomlファイルでのWebhook設定例、購読側コードの実装例https://shopify.dev/docs/apps/build/webhooks/subscribe/get-started?framework=remix&deliveryMethod=pubSubWebhookトピックのリストhttps://shopify.dev/docs/api/webhooks?reference=tomlshopify.server.tsの設定https://shopify.dev/docs/api/shopify-app-remix/v2/guide-webhookstomlファイルの設定https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration要再検討最終的に、app/routes/webhook.tsxでウェブフックを購読することに成功したそこに至るまでに、かなりのトライ＆エラーがあり、どれが本当に必
はじめにhttps://help.shopify.com/ja/partners/dashboard/managing-stores/test-orders-in-dev-stores設定PaymentsでBogus Gatewayが選択されていることを確認する購入時テスト用のカード情報項目値カード上の名前Bogus Gatewayクレジット番号- 成功した取引のシミュレーションを行うには、1を入力します。- 失敗した取引のシミュレーションを行うには、2を入力します。- 例外のシミュレーションを実行するには、3を入力しますCVV任意の3桁の数字を入力します有効期限将来の日付を入力します。入力例
はじめにhttps://www.s3lab.co.jp/blog/shopify/1820/ のつづきhttps://github.com/officialtpss/remix-shopify-admin-app-sample のコードを参考にしたhttps://github.com/officialtpss/remix-shopify-admin-app-sample/blob/master/app/routes/app.orders.jsx開発アプリ作成% shopify app initWelcome. Let’s get started by naming your app project. You can change it later.? Your project name?✔ s3lab-app-2? Get started building your app:✔ Start with Remix (recommended)? For your Remix template, which
はじめに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 versionCurrent Shopify