[[442888]]

本文轉(zhuǎn)載自微信公眾號(hào)「程序員巴士」，作者Eason。轉(zhuǎn)載本文請(qǐng)聯(lián)系程序員巴士公眾號(hào)。

Medusa是一個(gè)開源的headless商務(wù)引擎，具有速度快且可定制的優(yōu)點(diǎn)。由于 Medusa 分為 3 個(gè)核心組件 - 公開的REST API headless商務(wù)部分、商店的前端以及admin面板 - 大家可以自由地整體使用該平臺(tái)或者來適配設(shè)置電子商店。

在本教程系列中，大家將學(xué)習(xí)到如何使用 Medusa 創(chuàng)建電子商務(wù)商店。包括設(shè)置開發(fā)環(huán)境，向后端、前端和管理面板添加功能和插件，以及使用 Medusa 設(shè)置電子商店可能需要的一切。

為什么選擇Medusa

定制能力

如果大家想創(chuàng)建一個(gè)不需要定制的電子商店，因?yàn)榇蟛糠秩巳嚎赡懿⒉痪夹g(shù)，那么Shopify 是一個(gè)不錯(cuò)的選擇。但是，如果大家希望擁有自己的技術(shù)堆棧并根據(jù)業(yè)務(wù)需求進(jìn)行更改，Medusa 就非常適合大家。

Medusa的主要特點(diǎn)是它的靈活性和可擴(kuò)展性。大家可以一起使用所有 3 個(gè)核心組件，或者使用其中的一些組件并將它們與其他技術(shù)或系統(tǒng)耦合或集成。

大家可以將其作為一個(gè)整體或者部分使用，都能獲得出色的開發(fā)和用戶體驗(yàn)。后端構(gòu)建在 Node.js、Express 和默認(rèn) SQLite 上，當(dāng)大家第一次安裝服務(wù)器時(shí)，可以選擇使用PostgreSQL和Redis。

對(duì)于前端，大家可以選擇使用由Next.js或Gatsby構(gòu)建的初始店面。與這兩種選擇一樣，最終會(huì)得到一個(gè)連接到headless server的靜態(tài)網(wǎng)站，同時(shí)還能保障網(wǎng)站的速度。

至于后端，它也是用 Gatsby 構(gòu)建的，并像前端一樣連接到服務(wù)器。

這使 Medusa 與其他緊密耦合、復(fù)雜且緩慢的電子商務(wù)平臺(tái)解耦區(qū)分開。Medusa 提供了許多開箱即用的功能，旨在讓大家可以根據(jù)業(yè)務(wù)和自身需求進(jìn)行高度自定義。與技術(shù)棧要求較低甚至無門檻的 Shopify 相比，它允許大家完全擁有自己自定義的技術(shù)棧。

價(jià)格

Shopify 的定價(jià)模式可能是一個(gè)很大的劣勢(shì)，不僅需要付費(fèi)才能使用和部署平臺(tái)，而且很難找到免費(fèi)的插件或主題。此外，由于平臺(tái)不靈活，安裝插件并不容易。在市場(chǎng)上可以找到許多其他替代品，包括 Medusa，免費(fèi)提供其電子商務(wù)平臺(tái)。

這就是開源大放異彩的地方。大家可以免費(fèi)使用和部署 Medusa。Medusa還開放了開源社區(qū)為大家提供支持，開發(fā)免費(fèi)插件供大家使用。

業(yè)務(wù)適配性

Shopify 不靈活且難以自定義。這意味著許多業(yè)務(wù)用例，包括 B2B、市場(chǎng)、自定義購(gòu)物體驗(yàn)等，Shopify 不可用或不可能使用。

如果大家的企業(yè)只銷售具有傳統(tǒng)電子商務(wù)體驗(yàn)的產(chǎn)品，那么可能不是問題。但是，如果大家已經(jīng)在計(jì)劃業(yè)務(wù)增長(zhǎng)，并且需要一個(gè)可以根據(jù)業(yè)務(wù)用例需要增長(zhǎng)和擴(kuò)展的電子商務(wù)平臺(tái)，那么Medusa無疑是更好的選擇。

Medusa 的headless API 和靈活性使大家可以輕松創(chuàng)建插件以定制購(gòu)物體驗(yàn)，或根據(jù)需要將 Medusa 與其他插件集成自定義服務(wù)。

安裝前準(zhǔn)備事項(xiàng)

在開始之前，需要確保安裝了Node.js和NPM，若要檢查是否已安裝，可以運(yùn)行以下命令：

node -v 
npm -v 

如果每個(gè)命令的輸出都顯示一個(gè)數(shù)字版本，那么代表已經(jīng)安裝了，否則需要重新進(jìn)行安裝。

設(shè)置Medusa

Medusa 的核心是公開 REST API 的后端，允許前端或管理面板檢索或修改數(shù)據(jù)。大家可以將店面或管理面板替換為自己的連接到 API 的平臺(tái)，但系統(tǒng)中至少需要 Medusa 的這一部分。

安裝Medusa

首先，需要安裝允許設(shè)置服務(wù)器的 CLI 工具：

npm install -g @medusajs/medusa-cli

完成這部分后，可以使用 CLI 在機(jī)器上設(shè)置一個(gè)新的 Medusa 商店：

medusa new my-store --seed

這將在目錄 my-store 中創(chuàng)建一個(gè)新的 Medusa 安裝。可以通過更改 my-store 來更改商店或目錄的名稱。通過應(yīng)用 --seed 選項(xiàng)，它將使用包括演示產(chǎn)品在內(nèi)的基本數(shù)據(jù)為數(shù)據(jù)庫(kù)提供種子。

運(yùn)行Medusa

完成此命令后，大家就可以運(yùn)行服務(wù)器了!首先，切換到Medusa商店的目錄：

cd my-store

然后，使用 CLI 工具運(yùn)行開發(fā)命令以運(yùn)行服務(wù)器：

medusa develop

這將默認(rèn)在 localhost:9000 運(yùn)行服務(wù)器。大家可以通過在瀏覽器中訪問 localhost:9000/store/products 來測(cè)試它，會(huì)看到一個(gè) JSON 產(chǎn)品數(shù)組。它將只包含一種產(chǎn)品，因?yàn)椴シN機(jī)只添加一種產(chǎn)品。

大家可以在文檔中查看API 端點(diǎn)的完整列表。對(duì)于店面，所有端點(diǎn)都以 /store 為前綴，而對(duì)于管理面板，所有端點(diǎn)都以 /admin 為前綴。

服務(wù)器結(jié)構(gòu)概覽

讓我們看一下服務(wù)器的目錄結(jié)構(gòu)：

• data：此目錄保存將用于為數(shù)據(jù)庫(kù)設(shè)定seed的數(shù)據(jù)。它有包含基本存儲(chǔ)配置的文件 seed.json。這些數(shù)據(jù)是當(dāng)添加我們所做的 --seed 選項(xiàng)時(shí)添加到您的商店的數(shù)據(jù)。
• dist：當(dāng)您運(yùn)行 npm run build 時(shí)，此目錄將保存您的服務(wù)器的構(gòu)建。當(dāng)你部署你的服務(wù)器時(shí)，你將運(yùn)行這個(gè)命令并且將使用 dist 目錄中的編譯文件。
• src：在 src 目錄中，您可以添加任何可能需要進(jìn)行的插件或更改。在 api 子目錄中，您可以將新端點(diǎn)添加到您的商店。在 services 子目錄中，您可以添加可以在不同端點(diǎn)全局使用的新服務(wù)。在subscribers 子目錄中，您可以將事件偵聽器添加到不同的事件中。
• uploads：將包括任何要上傳的文件，如產(chǎn)品圖片。

設(shè)置店面

接下來，我們將安裝和設(shè)置店面。如前所述，可以使用Gatsby starter 或Next.js starter。在本教程中，我們將使用 Next.js 啟動(dòng)器。

安裝店面

要安裝 Next.js 店面，只需運(yùn)行以下命令：

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-storefront 

這將在目錄 my-storefront 中創(chuàng)建 Next.js 店面。如果你給它命名其他東西，你可以在命令中更改名稱。

運(yùn)行店鋪

在運(yùn)行之前，請(qǐng)確保服務(wù)器首先運(yùn)行，因?yàn)榈昝鎸⑦B接到服務(wù)器以檢索商店的數(shù)據(jù)。要運(yùn)行服務(wù)器，可以按照上一節(jié)中的步驟操作。

要運(yùn)行店面，首先切換到店面的目錄：

cd my-storefront 

然后，運(yùn)行以下命令來運(yùn)行店鋪：

npm run dev 

默認(rèn)情況下，這將在 localhost:8000 運(yùn)行店鋪。如果打開它，會(huì)看到一個(gè)基本的店面，其中包含指向不同文檔的鏈接。大家還可以查看產(chǎn)品并體驗(yàn)完整的結(jié)賬體驗(yàn)。

添加 Stripe集成

要添加Stripe集成，首先將 .env.template 復(fù)制到 .env.local：

mv .env.template .env.local 

然后，更改 Stripe public key的環(huán)境變量：

NEXT_PUBLIC_STRIPE_KEY=pk_test_something 

結(jié)構(gòu)概覽

目錄的結(jié)構(gòu)應(yīng)如下所示：

• components：此目錄包括店面中的不同組件，如購(gòu)物車、結(jié)帳、導(dǎo)航欄等。如果需要，您可以在此處更改組件。
• context：這包括一些可以通過上下文輕松切換或更改商店設(shè)置的內(nèi)容。例如，您可以通過更改 defaultDisplayContext 對(duì)象中的 cartView 的值來切換在 context/display-context.js 中顯示完整的購(gòu)物車。
• pages：這包括店面中的不同頁(yè)面。默認(rèn)情況下，店面將有 3 個(gè)頁(yè)面：結(jié)帳、產(chǎn)品頁(yè)面和登錄頁(yè)面。您可以在此處向您的商店添加更多頁(yè)面。
• public：您可以在此處添加圖像等公共assets。
• styles：此目錄包含商店的所有樣式，您可以在此處進(jìn)行更改以更改店面的樣式。
• utils：這包括輔助函數(shù)，例如獲取 Stripe 的公鑰、輔助函數(shù)、配置等。

設(shè)置 admin 管理面板

最后，我們將安裝和設(shè)置管理面板。管理面板是用 Gatsby 構(gòu)建的。通過管理面板，大家可以使用服務(wù)器公開的 API 來查看或更改商店中的數(shù)據(jù)。這包括查看和添加產(chǎn)品、訂單、客戶等。

安裝管理面板

要設(shè)置管理面板，首先需要克隆管理面板的存儲(chǔ)庫(kù)：

git clone https://github.com/medusajs/admin my-admin 

然后，切換到管理面板的目錄，即 my-admin。大家可以通過在上面的命令中更改它來更改它。

cd my-admin 

使用 NPM 安裝依賴項(xiàng)：

npm install 

運(yùn)行 Admin 面板

安裝了所有依賴項(xiàng)后，我們就可以運(yùn)行admin面板了：

npm start 

默認(rèn)情況下，這將在 localhost:7000 處打開管理面板。當(dāng)?shù)谝淮未蜷_時(shí)要求登錄，可以使用電子郵件“admin@medusa-test.com”和密碼“supersecret”。

登錄后，大家將看到一個(gè)帶有側(cè)邊欄的管理面板，可用于查看訂單、客戶、產(chǎn)品等。

structure 預(yù)覽

目錄的結(jié)構(gòu)如下所示：

• src：您將在此處找到管理面板的主要代碼。您可以編輯組件、頁(yè)面、上下文等?？梢栽诖颂幫瓿蓪?duì)管理面板的任何編輯或添加。
• public：這將包括 Gatsby 為管理面板生成的構(gòu)建。
• static：管理面板所需的公共靜態(tài)資產(chǎn)，如圖像。

如前所述，這個(gè)管理面板是用 Gatsby 構(gòu)建的。盡管不一定需要學(xué)習(xí) Gatsby 來設(shè)置和運(yùn)行它，但對(duì)其進(jìn)行更改需要對(duì) Gatsby 的工作方式有一定的了解，具體取決于大家將進(jìn)行的修改類型。

替代解決方案：創(chuàng)建Medusa應(yīng)用程序

如前所述，Medusa將平臺(tái)的三個(gè)核心組件解耦，能夠靈活地定制適合大家的平臺(tái)，并可以一次性安裝它們。

Medusa引入了create-medusa-app。如果大家之前使用過React，會(huì)注意到它與create-react-app類似。通過使用此工具，將能夠同時(shí)設(shè)置平臺(tái)的 3 個(gè)組件。

設(shè)置Medusa應(yīng)用

在終端中，運(yùn)行以下命令：

npx create-medusa-app 

然后需要寫一些與命名商店有關(guān)以及不同部分使用哪些技術(shù)等問題的回答。

安裝完成后，將準(zhǔn)備好 3 個(gè)目錄。一種用于服務(wù)器，稱為后端;一種用于店面，稱為店面;另一種用于管理員，稱為 admin。

運(yùn)行Medusa應(yīng)用

類似于第一種方法中每個(gè)組件的說明，當(dāng)我們單獨(dú)安裝它們時(shí)，將不得不單獨(dú)運(yùn)行每個(gè)組件。

店面和管理面板都需要 Medusa 服務(wù)器，因此在運(yùn)行它們中的任何一個(gè)之前，請(qǐng)確保它正在運(yùn)行。

要運(yùn)行 Medusa 服務(wù)器，需要切換到后端目錄，然后運(yùn)行它：

{% c-block language="js" %} cd 后端 
npm start {% c-block-end %} 

要運(yùn)行 Medusa 店面，需要切換到店面目錄，然后運(yùn)行它：

{% c-block language="js" %} cd 店面 
npm start {% c-block-end %} 

要運(yùn)行 Medusa admin，需要切換到 admin 目錄，然后運(yùn)行它：

{% c-block language="js" %} cd admin 
npm start {% c-block-end %} 

結(jié)論

市面上存在很多電子商務(wù)平臺(tái)如 Shopify 等，它們有一定的受歡迎程度和優(yōu)點(diǎn)，但大部分都缺乏可擴(kuò)展性，想象一下如果后續(xù)大家的業(yè)務(wù)越做越大，那么這些平臺(tái)將成為限制因素和缺點(diǎn)。

反觀Medusa是一個(gè)很好的選擇。Medusa 是一個(gè)開源平臺(tái)，可為大家提供可擴(kuò)展且快速的開發(fā)體驗(yàn)，平臺(tái)上限無限高。再加上本文教程中所示，Medusa的解耦配置和高度自定義組件等優(yōu)點(diǎn)，無疑會(huì)給帶來不一樣的體驗(yàn)，大家趕快來上手試一下吧!