Skip to main content

开发

开发文档入口: https://shopify.dev/docs/apps/build/cli-for-apps

为了方便测试互不影响,需要满足**“一个应用一个商店”,**就是每个开发商店只为了测试一个应用

也就是说,为了开发一个应用,需要先创建一个开发商店

shopify应用的强大之处,是它的extension模块,有丰富的种类,这是不同类型的应用场景:https://shopify.dev/docs/apps/build/checkout/technologies#technologies

平时开发也大多数是对extensions的开发

环境

需使用shopify cli 进行开发,而shopify cli需要的环境:

  • Node.js:20.10 或更高
  • Node.js包管理器:npm、Yarn 1.x 或 pnpm。
  • Git:2.28.0 或更高版本

网络

shopify本地运行需要连接 Cloudflare 隧道,可以使用官方推荐的,也可以自己搭建(网络代理不支持,不推荐)

连接隧道需要使用到代理 隧道与ip强关联,如果本地起不来,切换节点后,需要执行命令7,退出登录,然后重新执行命令8,启动项目

经常会因为网络问题,本地起不来项目,上述步骤很重要

参考文档:https://shopify.dev/docs/apps/build/cli-for-apps/networking-options#cloudflare-quick-tunnels

常用命令

1.创建应用 shopify app init

2.给应用创建拓展 shopify app generate extension

3.更新应用和拓展 shopify app deploy (当本地修改不生效时,或需要更新权限比如需要修改shopify.app.toml中的[access_scopes]) 4.生成数据库客户端 npx prisma generate

5.更新数据库表结构 npx prisma db push

6.添加数据库迁移文件 npx prisma migrate dev --name add_product_tags_filter

7.退出登录 shopify auth logout

8.启动项目 shopify app dev

9.创建新应用配置 shopify app config link

10.使用开发配置 shopify app config use

11.查看数据库 npx prisma studio

当需求涉及到表的修改,需要做以下操作:

执行456,6执行成功之后,会在prisma/migrations目录下生成一个 类似20250101120000_add_product_tags_filter的目录,如果没有看到目录生成,需要删除dev.sqlite,重新执行456 其中命令6的 add_product_tags_filter 可以自定义

开发生产分离

应用上架之后,需要开发和生产分离。分离的本质是,一套代码,两个配置(toml)

步骤是:

  1. 执行命令9 会提示创建应用toml文件,用于区分生产版本
  2. 复制toml,新应用修改client_id、name、handle
  3. 执行命令10,选择开发版本的配置

每次需要开发之前,需要执行命令10,然后再执行命令8,进行开发

开发完成之后,需要执行命令3,更新toml和extensions

构建

Dockerfile

目前只支持docker镜像部署,项目开发完成之后,需要打包成镜像;

终端执行打包脚本

bash build_image.sh

可以复用现有shopify应用的4个文件,进行打包:

  • Dockerfile
  • build_image.sh
  • schema.prisma
  • .env

然后做些内容调整:

Dockerfile

img

build_image.sh

build_image.sh

img

需要安装 Docker Desktop

schema.prisma

每个项目的/prisma目录下的schema.prisma的数据库地址用这种写法(否则dockerfile声明的数据库持久化会出问题)

img

.env

要设置SHOPIFY_APP_URL、SHOPIFY_API_KEY、SHOPIFY_API_SECRET、SCOPES等字段,按需添加

调整完这些后,终端执行 bash build_image.sh 构建镜像

镜像构建完成,根据提示选择2,生成压缩包

注意:每次生成的压缩包,需要剪切到其他地方,防止下次打包镜像带上

回滚

回滚,就是重新构建,执行【部署】中的 2和3步骤,不过在构建输入框填写的文件名,是之前某次的传输的

测试

在 开发面板 https://dev.shopify.com/dashboard/167470028/apps 可以找到想测试的应用

img

点击安装之后,可以选择将应用安装在哪个开发商店进行测试

img

建议:一个应用,使用专属的开发商店进行测试

当代理出现404,确保应用配置的代理和商店中应用详情的代理url一致(一个商店中有两应用的代理配置一样导致的)

上架

先将应用的分发方式,选择为公开分发

注意:自定义或公开只能选一次,选了不可改

上架应用步骤:

  1. 准备上架
  2. 填写产品清单
  3. 提交审核

完成上述之后,等反馈,如果有邮箱反馈,需要按照邮箱提示调整

准备上架

应用首页

  • 应用首页需要放简单使用视频,其中视频可以发布在外国主流社媒上,比如youtube,比如TTBlacklist - Order Guard,multi_tag
  • 如果是应用的extension包含theme app extension,首页还需放一键安装到模板的链接,如TT-Options,

img

准备提交

需要满足下面这些条件,才可以提交产品清单

img

其中,圈中的这两条要是想通过,需要:

添加这三文件,文件名严格按照这个来(可以直接复制已有项目的,无需调整)

img

然后在shopify.app.toml中补充圈中的这些

img

小圈的这个id,需要前往 https://console.cloud.google.com/cloudpubsub/topic/list?project=symbolic-envoy-461209-d5&supportedpurview=project,folder 创建一个,然后替换掉,其他保持不变

img

现在用的是我的账号,后续需要用公司提供的谷歌云账号 https://console.cloud.google.com/welcome?project=symbolic-envoy-461209-d5&supportedpurview=project,folder

之后直接在该页面中搜索“主题”即可创建主题

参考文档: https://shopify.dev/docs/apps/build/compliance/privacy-law-compliance https://shopify.dev/docs/apps/build/webhooks/subscribe/get-started?deliveryMethod=pubSub

填写产品清单

暂时无法在飞书文档外展示此内容

以上信息都需要填,其中可选的按需填写。

其中标棕色的值:

应用可见性

当应用审核都没问题,上架成功之后,还需来到应用后台,将可见性打开(商店可以搜索到)

img