当前位置：首页 > news >正文

构建电商Shopify 应用实战指南

news 来源：原创 2024/9/21 8:30:54

引言

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

1. 准备工作

1.1 创建 Shopify 应用

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

1.2 安装必需工具

Node.js：确保安装了最新版本的 Node.js。
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。