什么是 Shopify 应用程序以及如何构建一个

已发表: 2022-07-29

在与开发人员或工程负责人谈论我们所做的事情时，我们经常遇到的问题之一是 Shopify 应用程序到底是什么以及构建一个应用程序需要哪些工具和技术？ 另一个常见问题是，如果我没有构建 Shopify 应用程序的经验，会不会有问题？

让我们通过详细说明 Shopify 应用程序开发的各个技术方面来回答这些问题。

Shopify 应用与 Web 应用的比较

我们对此主题的看法是，Shopify 应用程序的功能与标准 Web 应用程序非常相似，但通过 API 与 Shopify 平台紧密相连。 这有几个含义：

  • 要构建 Shopify 应用，您可以使用与 Web 应用相同的技术。 你并不局限于特定的技术（尽管使用一些特定的技术可以让你的生活更轻松——我们稍后再谈）。
  • 通常，您需要同时构建后端和前端。
  • 您负责应用程序的托管和操作。
  • 一旦申请被 Shopify 批准，发布过程也完全在您的控制之下。

‍

从商家的角度来看，我们可以说 Shopify 是软件即服务 (SaaS) 以及 Shopify 应用程序。 这意味着商家无需与任何类型的代码交互即可安装您的应用程序。

Shopify 应用程序组件

我们确定了 Shopify 应用程序通常具有的三个逻辑组件：

  • 商户管理员
  • Webhook 处理
  • 面向客户的应用程序（店面 UI）

在这三个中，最后一个不一定是必需的。 这取决于您要为商家提供的功能。 例如，我们的应用 Candy Rack 包含所有三个组件，而 Loyal 仅包含前两个部分。

商户管理员

商家管理员是商家设置和配置应用程序的仪表板。 Shopify 建议在 Shopify 界面（所谓的嵌入式应用程序）中为商家管理员提供服务。 这意味着您使用 iframe 将应用程序嵌入到 Shopify 管理中。

嵌入式应用程序有几个限制：

  • 由于身份验证的工作方式，您或多或少受限于单页应用程序架构（尽管在 Turbolinks 或 Inertia.js 的帮助下可以实现部分解决方法）。
  • 使用 React 编写前端可能很有效，因为 Shopify 提供了一些库：Polaris UI 库可确保您的 UX 与 Shopify 管理员的其余部分保持一致，并且 App Bridge 充当为您的应用程序提供 Shopify 上下文数据的前端桥梁在 iframe 中运行。

商户管理员也是您的应用与商户之间的第一个接触点，是处理安装过程的地方。 安装基本上意味着通过OAuth获得访问商家商店数据的权限。

如果您的应用程序不是免费的，它也是您处理计费的应用程序的一部分。

Shopify 应用 Candy App 中的商家管理员
商户管理员

Webhook 处理

Webhook 是 Shopify 通知您的应用程序在安装它的商店中发生的各种事件的方式：例如，新订单创建或产品更新。 您决定要订阅哪些事件。

需要根据接收到的事件执行的业务逻辑肯定是由后台工作人员处理的。 否则，您很容易使您的应用程序过载。 您还可以考虑在您的应用程序之外委托事件接收。

‍

面向客户的应用程序（店面 UI）

如果您的应用程序扩展了 Shopify Storefront（这意味着它为商店客户带来了新功能），您需要将其“插入”到前台商店中。 为此，您需要通过 API 告诉 Shopify 将您的 JavaScript 资源注入前台商店。 有两种最流行的方法：Script Tag 和 App Embed 块。 也可以使用 App Blocks（也称为 App 部分）直接使用一些可视化组件来扩展店面主题。

面向客户的应用程序的开发可能是整个过程中最具挑战性的部分。 通常，您扩展甚至覆盖前台存储的默认行为。 执行此操作时，您需要确保它适用于不同的 Shopify 主题，具有各种商店设置，并且在不可预测的情况下不会破坏任何东西。 除此之外，总会有其他第三方应用程序干扰您的应用程序。

Front store UI 也是您应该注意应用程序的性能和大小的地方。

Shopify 应用 Candy Rack 面向客户的部分
Shopify 应用中面向客户的部分

Shopify 应用程序开发的演变

虽然我之前告诉过您，构建 Shopify 应用程序基本上是 Web 应用程序开发，但这种说法实际上只是部分正确。 2021 年，Shopify 引入了结账扩展的概念。 在此之前，无法使用 Shopify 应用扩展结账功能。 在这方面，开发人员的体验与 Web 应用程序相比是不同的，因为它发生在非常有限的环境中（例如，您只能使用一组指定的预先准备好的 React 组件），并且构建和发布过程由 Shopify 处理。

未来，Shopify 可能会在其他领域朝着这种方式发展，以便对第三方应用程序有更多的控制权。 因此，Shopify 应用程序开发将进一步远离 Web 应用程序开发。

Digismoothie 技术栈

后端

核心技术：

  • Python
  • Django 网络框架
  • RQ 或芹菜
  • PostgreSQL
  • 雷迪斯

有时，我们也使用：

  • 烧瓶
  • 快速API

前端

  • React（有时，出于性能原因，我们将 Preact 用于面向客户的应用程序）
  • Tailwind + 样式化组件
  • 反应查询
  • 北极星用户界面

前后端沟通

我们如何沟通取决于用例和产品。 以下技术是我们技术堆栈的一部分：

  • GraphQL
  • REST API
  • 网络套接字
  • 惯性

基础设施

我们的策略是使用托管解决方案

  • Heroku
  • 韦尔塞尔
  • 云耀斑
  • AWS

‍

您可以从本文中了解有关我们使用的技术的更多信息。

Digismoothie 的 Shopify 应用程序的典型架构
Digismoothie 的 Shopify 应用程序的典型架构

结论

我希望您已经从技术角度了解了构建 Shopify 应用程序的意义以及可以使用哪些技术。

最后，让我们回到开头提出的问题。 对于具有 Web 开发背景的工程师来说，加入开发 Shopify 应用程序的团队是否有问题？ 我会说绝对不是。 如果工程师对现代 Web 应用程序开发中使用的概念和技术有很好的理解，他们可以很快投入。 Shopify 生态系统和 API 的知识将一步一步地出现。