type
status
date
slug
summary
tags
category
icon
password
本文面向Shopify App开发者,非主题开发!有一定的React开发经验即可安全快速食用。
读完本文你将学到
- Shopify Partner账号注册与开发环境准备
- 创建Shopify App Remix模板项目
- 简单食用Remix - 页面渲染逻辑
- 简单食用Remix - 新增一个页面
- 项目规范引入 - Eslint + Prettier + Stylelint + Commitlint
- 请求封装和接口管理
- Shopify用户隐私数据接口开发(上线必须)
- 开发环境与线上环境的切换
- 常规上线流程
准备工作
Shopify partner账号
在开始之前你需要一个开发者账号 点此注册
注册时候这里选择构建App,选第四个定制App也行,都一样,然后填写完整你的partner信息(个人开发的话随便填就行)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Feef68b6d-c1b2-4777-98fb-e70d2b957a6a%2Fimage.png?table=block&id=11f3ee7a-f39d-809e-b3a1-e2b9a43fd640)
创建开发商店
注册完成后,Shopify会提示已经自动创建了一个quickstart开发商店
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fcd298555-6fbb-4ec4-a701-5eeffe8d3e19%2Fimage.png?table=block&id=11f3ee7a-f39d-8014-893c-eeef523f664e)
你也可以点击
Add Store
创建一个。这里我们选择在稳定版本上、带上测试数据创建开发商店。![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fbfd5d423-f398-4726-84ae-369fabd863ed%2Fimage.png?table=block&id=11f3ee7a-f39d-80ec-966e-fe3e9d3dcbe1)
确认后,在这个页面稍等一下,Shopify后台会帮我们自动完善测试数据。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fd724d8fe-c673-4131-afb2-87e5d4705cad%2Fimage.png?table=block&id=11f3ee7a-f39d-80ae-af3a-faf9e696d75b)
准备好后,即可点击左侧预览按钮查看你的开发商店前台。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F838c71f2-a594-4317-b7f5-f86fb625c242%2Fimage.png?table=block&id=11f3ee7a-f39d-8021-b1d1-def6a23a8218)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fb1d5a627-a1ee-473d-bb55-45f797386d83%2Fimage.png?table=block&id=11f3ee7a-f39d-800c-8f74-fae0643b76ea)
开发环境准备
本节信息源自官方文档: shopify.dev/docs/api/sh…
账号跟开发商店准备好后,即可着手准备开发。
环境要求
- Node.js: 18.20+, 20.10 or higher
- Git: 2.28.0 or higher
安装 Shopify-cli
本文使用pnpm作为依赖管理工具,也推荐您使用pnpm
项目创建和启动
本节信息源自官方文档:shopify.dev/docs/apps/b…
使用 Shopify CLI 创建1个新的项目。
- 在存放Shopify项目的目录下打开管理员终端,注意要管理员,否则会出现某些依赖无权限和无法创建 Cloudflare隧道的问题。
- 执行
shopify app init
初始化命令。
- 按照提示和下图输入内容,注意名称内不能含有shopify。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Faeb1086a-17e7-43aa-8e0b-24e16f76e984%2Fimage.png?table=block&id=11f3ee7a-f39d-8013-ae33-c18a9eb01f15)
- 等待安装依赖,这个过程耗时大概5-10分钟。(这个时候你可以
摸摸鱼去学习下 Remix 的基本概念和用法。)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F1a2ca899-9b96-4965-8c25-9886d49bf8fa%2Fimage.png?table=block&id=11f3ee7a-f39d-801c-a6f2-de026df7d90e)
- 安装完成后我们根据提示cd 进项目目录,执行
pnpm run dev
启动本地开发服务。这个命令会干以下几件事: - 引导绑定你的Shopify partner账号和对应Partner organization
- 在组织中创建或者指定已有应用,并将本地代码连接到该应用
- 创建 Prisma SQLite 数据库用于存放session等数据
- 自动使用 Cloudflare 创建一个内网穿透,让应用能够使用 HTTPS URL 访问,这个URL配置在这个页面。(嵌入式应用核心原理还是通过Iframe加载进Shopify商店后台,通过Shopify App Bridge等进行数据互通)
如果出现报错,可尝试重新
pnpm i
一下(这个过程视网络环境也会需要一些时间。这个时候你可以摸摸鱼)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F06943d8c-b177-4a4a-9eb9-916b71600460%2Fimage.png?table=block&id=11f3ee7a-f39d-8053-ba12-ce1bdccaf9bc)
- 启动成功后如下图所示,我们可以通过按
P
自动跳转到商店后台进行安装。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F291f3c34-466c-4af2-86ad-3c25148f21ba%2Fimage.png?table=block&id=11f3ee7a-f39d-802d-a586-def2b36da994)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F9e6eaddc-f4fe-47a8-bea4-40d1e30ae137%2Fimage.png?table=block&id=11f3ee7a-f39d-8033-b764-d245432d89bf)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F6a34f1d8-ec7f-4333-943f-6831da740e16%2Fimage.png?table=block&id=11f3ee7a-f39d-8018-b5b2-df5a7242ca65)
- 至此,我们就完成了App的创建和开发环境的启动,可以愉快地开发了。
简单食用Remix
本节假设你不大会Remix,第一次上手,否则请跳过本章。
Remix是什么
Remix 是由 React Router 的创建者开发的全栈Web框架,专注于提升应用性能和开发体验,强调服务器渲染、快速数据加载和响应式设计。如果你没用过Next,Remix入门全栈也挺好。
主要功能
这里列几个简单特性:
路由: 使用文件系统来定义路由。每个文件对应一个 URL,同时支持嵌套和动态路由。
加载数据: 通过 Loader 方法在服务器端加载和准备数据,避免客户端多余的 API 请求。
数据加载函数可以在组件渲染之前运行,确保页面在初始渲染时已经准备好所有数据。
表单提交: 提供简便的 Form 处理机制,通过 Action 方法,可以快速处理表单提交和数据操作。
示例
打开刚刚创建的Shopify App项目,关注到
app/routes
目录下,创建一个app.dice.tsx
文件![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fdb77fca8-754b-48c8-9b88-b9c87d13f353%2Fimage.png?table=block&id=11f3ee7a-f39d-80c5-b947-d6735d12aa36)
上节提过,Remix支持嵌套路由,在文件名中以
.
分隔父子路由,创建后我们将以下示例代码复制进去。然后在
app.tsx
文件中将dice路由补充进去![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F1efe8d09-c28d-40b7-b611-16a42b9a33d9%2Fimage.png?table=block&id=1203ee7a-f39d-80c9-acdf-d58d771f2d94)
启动开发服务,进入Shopify 后台预览界面,可以看到左侧新增了
摇骰子
菜单,点击进去如下图。![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F3608b53a-0a71-41c2-8c55-752af103d89b%2Fimage.png?table=block&id=1203ee7a-f39d-806f-aefe-f38d3fa5989e)
观察本地服务端控制台和浏览器控制台:
可以发现加载路由时候会先执行async的Loader函数,等待完成后页面组件才开始渲染。更多信息可以查看代码注释,可以自己玩玩,建议参照Remix官网的上手文档跟着走一遍,这里是把Remix的核心特性做个简单示例。
开发规范引入
每个项目都必须要规范,即便项目的整个开发生命周期都是你一个人,也必须要。规范包括代码逻辑正确且完整且风格统一(Eslint)、代码书写风格统一(Prettier)、样式代码风格统一(Stylelint)、Git提交风格统一(Commitlint),借助Husky做统一检查。
具体实施可查看我的另一篇基于Vue3做规范的文章 《从0到1实践,企业级前端开发底层规范搭建》,大同小异,这里提示几点:
- 如果是按我的流程走到这的,可以先删除目录下的.git文件夹,再自行
git init
到你的仓库
- 安装依赖的时候,pnpm会提示当前处于工作区根目录(workspace),问我们是否确定要安装。解决办法是在根目录的
.npmrc
文件中加一行ignore-workspace-root-check=true
即可。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F1b4b785f-3367-498c-bd52-1bcc9bed6fe4%2Fimage.png?table=block&id=1203ee7a-f39d-80bc-b886-efadea9b05c1)
- 本节完成后可以push下代码。
请求封装
请求封装是每个项目都要做的事情,不然一方面会产生很多冗余代码,另外很可能会对某些异常场景处理不到。按照我之前封装的思路:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F45d3d597-7209-4c8c-a33f-4e335a7f4bb4%2Fimage.png?table=block&id=1203ee7a-f39d-805d-80f1-f9a80d186a83)
先看一下我封装后的调接口的方式:
是不是很优雅,符合直觉地处理响应流,又能够对错误按需定制化响应。这里还是基于Axios去封装请求,原因是Axios可以兼容Nodejs和浏览器端几乎无差别使用,只是Remix中封装Axios会比非全栈项目多一点点麻烦。下面我们开始:
安装Axios
继续前,我们创建好几个目录,并配置别名方便import
/app/api
: 用于存放接口
/app/config
: 用于存放项目的部分配置项和拦截器
/app/plugins
: 用于存放项目插件示例,如axios、封装好的api等等
/app/types
: 用于各种类型定义
tsconfig.json
写入别名:vite.config.ts
写入别名:创建
/app/plugins/axios.ts
文件用于创建axios实例创建
/app/config/index.ts
文件创建
/app/config/interceptors/axios.ts
文件存放请求响应拦截器API封装
Remix作为一个全栈框架,服务端(NodeJs环境)访问接口时,不像浏览器端访问'/api/info'时候会自动补全当前的hostname,服务端会认为这不是一个合法接口而直接报错,所以我们需要获取访问服务端的url然后补全。依这个思路我们创建
/app/plugins/api.ts
文件:创建
/app/types/api.ts
文件,把API请求参数设置好OK,这样就封装好了,下面我们找些例子试验下。
我们可以通过模板快速创建一个本地的Remix常规项目,然后在那个项目中创建
/app/routes/api.info/route.tsx
文件,写入以下代码就能作为一个第三方接口了:然后
pnpm run dev
,拿到地址端口后挂在一边,回到我们的Shopify项目,在vite.config.ts
加入代理配置:创建
/app/routes/api.local.info/route.tsx
文件,作为本地接口现在声明几个接口看看,创建·
/app/api/example.ts
注意,如果声明的接口是本地项目的,需要传入isLocal: true
创建
/app/routes/app.request-example.tsx
在
/app/routes/app.tsx
中,写入菜单启动服务看看
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fbb351912-23bc-4a00-b105-7c8b17250062%2Fimage.png?table=block&id=1203ee7a-f39d-80fb-9172-c3ae689a19b8)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fba73286d-1343-4c50-96c5-1e27b5b907b8%2Fimage.png?table=block&id=1203ee7a-f39d-8070-90c5-d9a36df488d0)
没问题,浏览器跟服务器端调用接口和接收响应的方式都是一致的,这下可以愉快的跟后台 (也可能是自己) 对接了!
Shopify用户隐私数据接口开发
这个配置位于Shopify App配置页,如果我们的App是
public
的,即上架应用商店,允许所有商店安装的,如果不照做的话就不能通过审核。![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F5d4f88ea-bcc0-4b5f-b629-275a5ab89f18%2Fimage.png?table=block&id=1203ee7a-f39d-80f0-a24e-fbecf44b3c41)
研究后发现,最简单的,只要实现三个POST接口(用户数据访问、用户数据擦除、商店数据擦除),每个接口能对请求头中的
X-Shopify-Hmac-SHA256
签名与自己的SHOPIFY_API_SECRET
进行HMAC计算编码后的哈希值进行验证,如果验证失败返回401,验证成功正常返回success即可。我们快速创建3个文件:
/app/routes/api.customer.info/route.tsx
、/app/routes/api.customer.erasure/route.tsx
、/app/routes/api.shop.erasure/route.tsx
,里边都写上以下代码即可:在上线后,提交审核前,回到配置页,把我们的线上域名+上对应的路由填入对应的表单中即没问题了。
开发环境与线上环境的切换
本节知识点源于Shopify cli官方文档:shopify.dev/docs/api/sh…
开发测试差不多后,我们就要准备线上环境了额,Shopify App跟常规项目不一样的,这是以不同App作为不同环境的,意味着我们开发后需要将代码绑定到线上App,提测时绑到测试专用App。不过还好Shopify cli提供了指令帮我们快速创建和切换。
shopify app config link
: 创建或者绑定某个App,此操作会在项目根目录创建对应的.toml
文件,存放App的各项配置,包括ID、权限范围、授权接口、webhooks等等。
shopify app config use
: 指定运行cli命令时的默认App,如我们指定dev app,则pnpm run dev
时候就会在这个dev app上运行,不会影响线上App。
我们首先执行
pnpm shopify app config link
或者pnpm run config:link
,可以创建一个新的App用于生产环境,如已经在Partner那边创建过了就可以选择No, connect it to an existing app
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F1cdf4c9a-2f23-48f4-88c4-8e3c83cfc253%2Fimage.png?table=block&id=1203ee7a-f39d-80ca-8b3c-f9571f67c680)
我们现在创建一个
App-Prod
看看![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fa9e5a7f4-e0c1-43a1-b9a5-a1748cefe498%2Fimage.png?table=block&id=1203ee7a-f39d-80b1-aa99-d2505638f069)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F15e6c465-8e7a-41f5-879f-df65af413f20%2Fimage.png?table=block&id=1203ee7a-f39d-80be-857c-e601d0412d5f)
可以发现已经自动帮我们创建了一个新的App和对应的toml文件,并默认在这个App上运行,我们run dev看看
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2Fb7a57c9a-f0f6-407e-8f59-6e79f22ebbe3%2Fimage.png?table=block&id=1203ee7a-f39d-80f2-a9fd-d79bd81c91e8)
这个时候会让我们重新选择开发商店,并问我们要不哟自动更新url,这里选yes就好,毕竟还没上线
然后按
p
去预览,重新走一下安装流程可以发现之前项目在新的App好好运行着,太妙了!
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F0c0a7f4e-075c-435b-951c-359d3b820545%2Fimage.png?table=block&id=1203ee7a-f39d-8024-b12e-d08e5946d849)
然后我们执行
pnpm run config:use
,切回开发App![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F9aa1501c-4741-429e-b601-8530d30c803f%2Fimage.png?table=block&id=1203ee7a-f39d-809e-9816-e693869e1818)
这里我们选择下边那个,因为一开始创建项目的时候默认是没有后缀的。
这样就完成了新的App的创建和切换。
注意:我们永远不要在生产App上进行开发,只在权限需要变更需要deploy的时候才切过去执行下命令然后马上切回来!
常规上线流程
常规的,我们需要找一台服务器,把代码通过各种方式拷贝进去,执行打包和启动命令即可
然后简单配置下Nginx,域名映射好,然后把域名填进生产App的配置内即可完善线上部署
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F542ba2db-ade9-4cfc-b8ea-12790e72db4a%2Fimage.png?table=block&id=1203ee7a-f39d-8001-af08-dc37eb14e4c5)
假如你的App是做出来给所有商店使用的,那就在Distribution页选择Public,否则选择Custom
注意:Custom只能给某一个商店或组织使用
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd86e7502-26c0-4456-9c57-f0fcee518c4d%2F48f4866d-049c-48ee-b98a-ab201fbd4029%2Fimage.png?table=block&id=1203ee7a-f39d-803b-815a-c8bd57f23aaf)
选择好后,把Listing优化下,头像Icon上传下就可以提交审核了!
- 作者:HRope
- 链接:https://hrope.cn/article/shopify-remix-app
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。