系统学习shopify开发，推荐小册：《Shopify应用实战开发》

系统学习shopify开发，推荐小册：《Shopify应用实战开发》

系统学习shopify开发，推荐小册：《Shopify应用实战开发》

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

在与开发人员或工程主管谈论我们的工作时，我们经常遇到的问题之一是，究竟什么是 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 获得访问商家商店数据的权限。

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

商家管理员

Webhook 处理

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

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

‍

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

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

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

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

Shopify 应用面向客户的部分

Shopify 应用开发的演变

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

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