s3labの記事一覧

Shopify

Google Pub/SubによるShopify Webhook購読

はじめに参考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

Shopify

Amazon EventBridgeによるShopify Webhook購読

はじめに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が作成されたことを確認する。ここで、イ

Shopify

Shopifyアプリ(Remix)の開発 – Webhookの利用、注文イベントへ連動した処理

はじめに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でウェブフックを購読することに成功したそこに至るまでに、かなりのトライ&エラーがあり、どれが本当に必

Shopify

Shopifyの開発ストアでのカード購入手順

はじめにhttps://help.shopify.com/ja/partners/dashboard/managing-stores/test-orders-in-dev-stores設定PaymentsでBogus Gatewayが選択されていることを確認する購入時テスト用のカード情報項目値カード上の名前Bogus Gatewayクレジット番号- 成功した取引のシミュレーションを行うには、1を入力します。- 失敗した取引のシミュレーションを行うには、2を入力します。- 例外のシミュレーションを実行するには、3を入力しますCVV任意の3桁の数字を入力します有効期限将来の日付を入力します。入力例

Shopify

Shopifyアプリ(Remix)の開発 – Graphql API利用、注文情報リストの表示

はじめに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

Remix

Remixアプリの作成手順

はじめにhttps://remix.run/docs/en/main/start/quickstartHello world! の表示https://remix.run/docs/en/main/start/tutorialhttps://remix.run/docs/en/main/file-conventions/routes環境% npm -v10.7.0% node -vv20.14.0Hello World作成% mkdir my-remix-app% cd my-remix-app% npm init -y% npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom% npm i -D @remix-run/dev vitevite.config.js の作成app/root.jsx の作成npx remix vite:buildpackage.

Shopify

Shopifyアプリ開発のチュートリアル(Remix app template使用)

はじめに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

Shopify

RailsテンプレートからのShopifyアプリの開発<中止>

はじめにShopify本家が、アプリ開発には2023からRemix推奨になったRails7ではじめたが、エラー解決できなかったので、中止したhttps://www.s3lab.co.jp/blog/shopify/1625/パートナーに登録している開発用のストアを登録しているテンプレートソースhttps://github.com/Shopify/shopify_appShopifyパートナー画面からアプリを登録アプリメニューから「Create app manually」を選択し、名前だけを入力し、アプリを作成する名前:my_rails_app_1Rails アプリを作成以下のコマンドを実行% rails new my_rails_app_1% cd my_rails_app_1% bundle add shopify_app% bundle add dotenv-rails% bundle install.env ファイルを作成し、以下を追加HO

Shopify

Vonage Video APIを使ったRailsアプリの実装<中止>

はじめにShopifyアプリの一部として開発しようとしていたが、Remixを試すことにしたので、Rails7での開発を中止https://github.com/Vonage-Community/demo-video-rails-rubykaigiのRailsのサンプルがVonage APIsサービスを利用しているVonageアカウントを作成するhttps://ui.idp.vonage.com/ui/auth/registration過去にVonage Video APIやTokBoxというサービスがあったようだが、Vonage APIsに変わったと思われるVonage APIsページを開くApplicationを作成するCreate a new applicationボタンを押すNameを入力するGenerate public and private keyボタンを押し、private.keyファイルを作成するGenerate new applicationボタンを押し

Shopify

ShopifyとGoogle連携の理解

2種類のGoogleタグAW-ではじまるGoogle広告のタグG-ではじまるGoogleアナリティクスのタグShopifyのGoolgle&YouTubeアプリの機能Google広告のタグでコンバージョントラッキングできる簡単な方法を提供するShopifyとGoogle Merchant CenterをリンクするShopifyとGoogleアカウントをリンクするGoogle Merchant CenterShopifyの商品情報がGoogle Merchant Centerに同期されるGoogle Merchant CenterとGoogle広告をリンクする以下の広告を掲載できるShoping adsDynamic remarketingFree listingsGoogle広告キャンペーン(Google Ads)Google広告キャンペーンは、さまざまな種類の広告を表示するためのプラットフォームです。広告の種類:検索広告(

Lang »