构建电商Shopify 应用实战指南

引言

Shopify 是一个功能强大的电子商务平台，为开发者提供了丰富的 API 和工具，以构建各种类型的应用。本文将通过具体代码示例来引导你构建一个简单的 Shopify 应用。

1. 准备工作

1.1 创建 Shopify 应用

1. 注册成为 Shopify Partner：访问 Shopify Partner Dashboard 注册成为 Shopify Partner。
2. 创建应用：在 Partner Dashboard 中创建一个新的应用。

1.2 安装必需工具

1. Node.js：确保安装了最新版本的 Node.js。
2. Shopify CLI：安装 Shopify CLI 以帮助构建应用。
   bash

   深色版本

   1npm install -g @shopify/cli

2. 创建应用

2.1 初始化应用

使用 Shopify CLI 初始化一个新的应用项目：

bash

深色版本

1shopify app create --name=my-app

这将创建一个名为 my-app 的目录，并初始化项目结构。

2.2 配置应用

进入项目目录并编辑 shopify.config.js 文件，设置应用的基本信息：

javascript

深色版本

1module.exports = {
2  name: 'My App',
3  description: 'A simple Shopify app.',
4  appUrl: 'https://my-app.herokuapp.com',
5  apiKey: 'YOUR_API_KEY',
6  apiSecretKey: 'YOUR_API_SECRET_KEY',
7  scopes: ['read_products'],
8  embeddedApp: true,
9  isPrivate: true,
10};

这里我们设置了应用的基本信息，包括 API 密钥和秘密、权限范围等。

3. 实现 OAuth 认证

Shopify 应用需要通过 OAuth 2.0 协议获取访问令牌。

3.1 安装依赖包

安装必要的依赖包：

bash

深色版本

1npm install @shopify/shopify-api express body-parser

3.2 创建 OAuth 认证路由

在 server.js 文件中设置 OAuth 认证的路由：

javascript

深色版本

1const express = require('express');
2const bodyParser = require('body-parser');
3const Shopify = require('@shopify/shopify-api');
4
5const app = express();
6app.use(bodyParser.json());
7app.use(bodyParser.urlencoded({ extended: true }));
8
9// 初始化 Shopify API 客户端
10Shopify.Context.initialize({
11  API_KEY: process.env.SHOPIFY_API_KEY,
12  API_SECRET: process.env.SHOPIFY_API_SECRET,
13  SCOPES: process.env.SHOPIFY_SCOPES.split(','),
14  HOST_NAME: process.env.HOST.replace(/https:\/\/|\/$/g, ''),
15  API_VERSION: '2023-07',
16  IS_EMBEDDED_APP: true,
17  // This should be replaced with your preferred storage strategy
18  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
19});
20
21// 定义一个中间件，用于处理所有 Shopify API 请求
22app.use(Shopify.Utils.verifyRequest({ api: Shopify }));
23
24// OAuth 回调路由
25app.get('/auth/shopify/callback', async (req, res, next) => {
26  try {
27    const session = await Shopify.Auth.validateAuthCallback(
28      req,
29      res,
30      process.env.SHOPIFY_REDIRECT_URI
31    );
32
33    // 获取访问令牌
34    const accessToken = session.accessToken;
35    console.log('Access Token:', accessToken);
36
37    // 重定向回 Shopify 商店
38    res.redirect('/');
39  } catch (error) {
40    next(error);
41  }
42});
43
44// 启动服务器
45app.listen(3000, () => {
46  console.log('Server is running on port 3000');
47});

这里我们使用了 Express 框架来设置路由，并通过 Shopify API 客户端处理 OAuth 认证。

4. 使用 Shopify API 查询数据

4.1 查询产品列表

接下来，我们将使用 Shopify 的 GraphQL API 来查询产品列表。

示例：查询产品列表

javascript

深色版本

1app.get('/products', async (req, res) => {
2  try {
3    const shop = req.session.shop;
4    const accessToken = req.session.accessToken;
5
6    const client = new Shopify.Clients.Graphql(shop, accessToken);
7
8    const query = `
9      {
10        products(first: 10) {
11          edges {
12            node {
13              id
14              title
15              handle
16              productType
17              tags
18              createdAt
19              updatedAt
20              variants(first: 250) {
21                edges {
22                  node {
23                    id
24                    price
25                    availableForSale
26                  }
27                }
28              }
29            }
30          }
31        }
32      }
33    `;
34
35    const result = await client.query({ data: query });
36
37    res.json(result.body.data.products.edges);
38  } catch (error) {
39    console.error('Error querying products:', error);
40    res.status(500).send('Error querying products');
41  }
42});

在这个例子中，我们定义了一个 /products 路由，它会查询前 10 个产品的基本信息，并返回 JSON 格式的数据。

5. 构建用户界面

5.1 使用 React 构建前端

假设你已经安装了 Create React App，可以使用以下命令创建一个 React 项目：

bash

深色版本

1npx create-react-app frontend
2cd frontend

5.2 显示产品列表

在 React 项目中，我们可以使用 Axios 或 Fetch API 来调用后端 API，并显示产品列表。

示例：显示产品列表

在 src/App.js 文件中：

javascript

深色版本

1import React, { useState, useEffect } from 'react';
2import axios from 'axios';
3
4function App() {
5  const [products, setProducts] = useState([]);
6
7  useEffect(() => {
8    async function fetchData() {
9      const response = await axios.get('/products');
10      setProducts(response.data);
11    }
12    fetchData();
13  }, []);
14
15  return (
16    <div className="App">
17      <h1>Product List</h1>
18      <ul>
19        {products.map(product => (
20          <li key={product.node.id}>
21            <h2>{product.node.title}</h2>
22            <p>Type: {product.node.productType}</p>
23            <p>Handle: {product.node.handle}</p>
24            <p>Price: {product.node.variants.edges[0].node.price}</p>
25          </li>
26        ))}
27      </ul>
28    </div>
29  );
30}
31
32export default App;

这里我们使用了 React Hooks 来管理状态，并通过 Axios 调用了后端 API。

6. 部署应用

6.1 选择托管服务

选择一个托管服务，例如 Heroku 或 Netlify，来部署你的应用。

6.2 配置环境变量

在部署之前，确保将环境变量设置好，包括 API 密钥、秘密等。

6.3 部署应用

按照所选托管服务的指南进行部署。

7. 结语

通过本文的学习，你应该已经掌握了构建 Shopify 应用的基本流程。Shopify 提供了强大的 API 和工具，帮助开发者构建功能丰富且易于维护的应用。如果你有任何疑问或需要进一步的帮助，请随时提问！