【備忘録】Remixを使用したShopifyアプリのチュートリアルで気になったポイント

Remixを使用したShopifyアプリのチュートリアルについて

この記事では、Remixを使用してShopifyアプリを構築する過程での学びについて共有します。このチュートリアルはShopifyの公式GitHubリポジトリに基づいています。

サーバーサイドのアーキテクチャとPrismaの使用

このチュートリアルでは、サーバーサイドのアプリケーション構造としてRemixが採用されており、Prisma ORMを使用してデータベース操作を行う方法について学びました。

Shopify App BridgeとResource Picker

特に、ShopifyのApp Bridgeを利用したResource Pickerの機能について深く学びました。これにより、ユーザーが商品コレクションや商品バリアントを簡単に検索し、選択できるUIを迅速に提供できます。

selectProduct関数の実装例

以下は、ShopifyのApp Bridgeを用いて商品を選択する機能を実装する一例です。

async function selectProduct() {
  try {
    const products = await window.shopify.resourcePicker({
      type: "product",
      action: "select",
    });
    console.log(products);
  } catch (error) {
    console.error("Error selecting products: ", error);
  }
}

この関数は、awaitキーワードを使ってwindow.shopify.resourcePickerメソッドを非同期に呼び出し、ユーザーが商品を選択するUIを提供します。

shopifyAppを使用したShopify Admin APIの設定

Shopify Admin APIへのアクセスに必要なAPIキー、APIシークレット、スコープ、アプリURLなどの設定は、以下のように行います。

import { shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  scopes: process.env.SCOPES.split(","),
  appUrl: process.env.SHOPIFY_APP_URL,
});

export default shopify;