[!info] related notes

• 前置笔记: Shopify 应用, Shopify Admin API
• 相关 MOC: Shopify MOC

Shopify 应用开发环境搭建

目标

完成本指南后，你将：

• 创建 Shopify 应用
• 搭建本地开发环境
• 运行第一个应用
• 调用 Admin API

预计时间：45-90 分钟

前置条件

• Node.js 18+
• npm 或 yarn
• Shopify Partner 账户
• 开发商店

步骤

1. 创建应用

在 Partners Dashboard：

1. 点击”应用” → “创建应用”
2. 选择”公开应用”
3. 填写应用名称

2. 初始化应用

npm init @shopify/app@latest
cd my-app

选择模板：

• Remix（推荐）
• Node.js

3. 启动开发服务器

npm run dev

会发生什么：

1. 自动打开浏览器
2. 登录开发商店
3. 安装应用
4. 进入应用界面

4. 调用 Admin API

编辑 app/routes/app._index.jsx：

export async function loader({ request }) {
  const { admin } = await authenticate.admin(request);
  
  const response = await admin.graphql(`
    query {
      products(first: 5) {
        edges {
          node {
            id
            title
          }
        }
      }
    }
  `);
  
  const data = await response.json();
  return json({ products: data.data.products.edges });
}

5. 显示产品列表

export default function Index() {
  const { products } = useLoaderData();
  
  return (
    <Page title="My Products">
      <List>
        {products.map(({ node }) => (
          <List.Item key={node.id}>{node.title}</List.Item>
        ))}
      </List>
    </Page>
  );
}

验证

1. 应用显示产品列表
2. 修改代码，查看热重载
3. 在开发商店 Admin 中看到应用

常见问题

Q: 应用安装失败 A: 检查 ngrok 是否运行，重新 npm run dev

Q: GraphQL 查询报错 A: 检查 API 权限（在 Partners Dashboard → 应用配置）

Related notes

• Shopify MOC
• Shopify 应用
• Shopify Admin API