什么是 Shopify 应用程序以及如何构建一个shopify应用
  • 后端
  • 2024-06-27 00:25:23
  • 22064 阅读

Shopify 应用是如何构建的，它与 Web 应用开发有何不同？典型的 Shopify 应用有哪些组件，构建应用使用哪些技术？了解这个过程和我们在Digismoothie拥有的技术堆栈。

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

在与开发人员或工程主管谈论我们的工作时，我们经常遇到的问题之一是，究竟什么是 Shopify 应用程序以及构建应用程序需要哪些工具和技术？另一个常见问题是，如果我没有构建的经验，这是问题吗 Shopify 应用程序？

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

如果您正在寻找自定义 Shopify 开发，您可以联系我们的 Shopify 专家以及搜索 Shopify 自由职业者平台上的专家。

Shopify 应用与网络应用的比较

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

  • 要构建 Shopify 应用，您可以使用与 Web 应用相同的技术。你并不局限于特定的技术（尽管使用一些特定的技术可以使你的生活更轻松——我们稍后会回到这一点）。

  • 通常，您需要同时构建后端和前端。

  • 您负责应用程序的托管和操作。

  • 一旦申请获得 Shopify 批准，发布过程也完全由您控制。

‍

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

Shopify 应用程序组件

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

  • 商家管理员

  • Webhook 处理

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

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

商家管理员

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

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

  • 由于身份验证的工作方式，您或多或少地局限于单页应用程序架构（尽管在 Turbolinks 或 Inertia.js 的帮助下可以进行部分解决方法）。

  • 使用 React 编写前端可能会很有效，因为 Shopify 提供了库：Polaris UI 库确保您的用户体验与 Shopify 管理员的其余部分保持一致，而 App Bridge 充当前端桥，为在 iframe 中运行的应用程序提供 Shopify 上下文数据。

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

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

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

商家管理员

Webhook 处理

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

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

‍

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

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

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

在前端商店 UI 中，您还应该注意应用程序的性能和大小。

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

Shopify 应用面向客户的部分

Shopify 应用开发的演变

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

将来，Shopify可能会在其他领域采用这种方法，以便对第三方应用程序进行更多控制。因此，Shopify 应用程序开发将进一步远离 Web 应用程序开发。