什麼是 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 的知識將一步一步地出現。