V8程序

Appearance

创建 Shopify 应用 ​

Shopify 开发涉及多个方面，包括 Shopify 应用开发、主题开发、以及通过 Shopify API 和 Shopify CLI 的集成。

一、Shopify 应用开发 - 安装 ​

Shopify 应用（App）是增强 Shopify 店铺功能的一种方式，允许开发者创建独立的功能并集成到店铺中。这些应用可以在 Shopify 的 App Store 中发布，或者只为特定的商家使用（自定义应用）。

步骤: ​

  • 准备开发环境：

    • 安装 Shopify CLI。
    • 安装并设置 Node.js，推荐使用 nvm 来管理 Node.js 版本。
    • 安装一个 package manager，如 Yarn 或 npm。
    • 安装 Ngrok 来实现本地开发时的 HTTPS 访问（Shopify 应用需要使用 HTTPS）。

参考官网地址：https://shopify.dev/docs/api/shopify-cli。

bash
# 注意：不同的Node版本可能会导致安装不成功，建议使用nvm安装node。（我用的是 V18.20.4）
npm install -g @shopify/cli@latest

  • 创建一个 Shopify 应用： 使用 Shopify CLI 创建一个新的 Shopify 应用：参考官网https://shopify.dev/docs/apps/build/scaffold-app

    bash
    shopify app init

    An image

    这个命令会引导你完成应用的初始化过程，包括设置应用名称、选择应用类型（Web 或 Mobile）、选择后端语言等。

    注意：这个下载过程会比较慢，一定要耐心等待，我试了几次才成功（中途一直以为是自己电脑网络卡顿还主动退出来几次）。

    这个命令会自动生成一个包含后端（Node.js/Express 或 Ruby on Rails）和前端（React）代码的完整项目结构。

  • 本地开发： Shopify CLI 提供了命令来启动应用并将其代理到 Shopify Store：

    bash
    shopify app dev

    An image

    An image

    这将启动本地服务器，并通过 Ngrok 暴露 HTTPS 端点，供 Shopify 应用调试。

shopify app dev 启动后，点击键盘任何操作，会自动打开一个浏览器窗口，引导你创建用户，截图如下。

An image

An image

An image

An image

An image

二、Shopify 应用开发 - 创建 App ​

创建自定义名称的 App，并设置 App 的权限。

  • 1）npm init @shopify/app@latest
  • 2）shopify app dev

An image

An image

An image

An image

在某个商店下创建 app。

An image

An image

An image

三、注意事项（解决报错） ​

3.1 安装报错 ​

bash
F:\bob-project\1-shopify>npm install -g @shopify/cli@latest
npm error code ETIMEDOUT
npm error syscall connect
npm error errno ETIMEDOUT
npm error network request to https://registry.npmjs.org/@shopify%2fcli failed, reason: connect ETIMEDOUT 2606:4700::6810:1d22:443
npm error network This is a problem related to network connectivity.
npm error network In most cases you are behind a proxy or have bad network settings.
npm error network
npm error network If you are behind a proxy, please make sure that the
npm error network 'proxy' config is set properly.  See: 'npm help config'
npm error A complete log of this run can be found in: C:\Users\yuanb\AppData\Local\npm-cache\_logs\2024-10-01T03_51_47_566Z-debug-0.log

由于超时错误（ETIMEDOUT），你可以尝试以下几种解决方法：

1. 检查网络连接 ​

确保你的网络稳定，尝试访问其他网站或 ping npm 注册表以检查连接。

2. 清除 npm 缓存 ​

使用以下命令清除缓存：

bash
npm cache clean --force

3. 检查代理设置 ​

如果你不在代理环境中，确保没有设置代理：

bash
npm config delete proxy
npm config delete https-proxy

4. 增加超时时间 ​

你可以增加 npm 的超时设置：

bash
npm config set fetch-retry-mintimeout 20000
npm config set fetch-retry-maxtimeout 120000

5. 使用不同的 npm 镜像 ​

可以尝试使用淘宝镜像：

bash
npm config set registry https://registry.npm.taobao.org

然后再次尝试安装。

3.2 创建 app 报错 ​

bash
 shopify app init
bash
 error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  Cloning into 'C:/Users/yuanb/AppData/Local/Temp/53c9e68cc22e2d3b7e2504d7c3  │
│  6966b6/download'...                                                         │
│  fatal: unable to access                                                     │
│  'https://github.com/Shopify/shopify-app-template-remix/': Failed to         │
│  connect to github.com port 443 after 21075 ms: Timed out
  • 关掉网络代理（翻墙软件）
  • 设置增加 git 请求超时时间
    bash
      git config --global http.postBuffer 524288000
  git config --global http.lowSpeedLimit 0
  git config --global http.lowSpeedTime 999999