$ cd moesif-email
$ npm init -y && npm i express moesif-nodejs

如果一切順利，輸出應該包含以下幾行：

- express@4.17.1

- moesif-nodejs@3.0.0

我們將在 Node.js 和 Express 的基礎上構建我們的 API 和注冊網站。Moesif SDK for Express 將把 API 監控數據發送到 Moesif 服務。

使用 Moesif 瀏覽器 SDK 創建網站

首先，我們需要創建一個網站。我們將使用 Moesif 瀏覽器 SDK 發送具有特定用戶 ID 的客戶端事件。這將在 Moesif 服務上創建帶有元數據的新用戶，稍后，我們將允許將該用戶鏈接到我們將從網站發送的 API 請求。moesif-email/index.html 的代碼如下所示：

<script src="http://unpkg.com/moesif-browser-js@^1/moesif.min.js"></script>



<h1>Demo API</h1>

<button id="start">Send client event</button>

<button id="api">Send API request</button>

<pre id="target"></pre>



<script type="text/javascript">

  moesif.init({ applicationId: "<YOUR_MOESIF_APP_ID>" });

  const userId = "demo-user-123";

  moesif.identifyUser(userId, {

    email: "<YOUR_EMAIL>",

    firstName: "Jane",

    lastName: "Doe",

  });

  document.getElementById("start").addEventListener("click", () => {

    moesif.track("clicked_start");

    document.getElementById("target").innerHTML = "clicked_start";

  });

  document.getElementById("api").addEventListener("click", async () => {

    const response = await fetch("/api", {

      headers: { Authorization: userId },

    });

    const json = await response.json();

    document.getElementById("target").innerHTML = JSON.stringify(json, null, 2);

  });

</script>

我們包含了 Moesif 瀏覽器 SDK，創建了兩個按鈕并將它們與兩個操作關聯起來，發送一個客戶端事件和一個 API 請求。SDK 配置了 userId，因此 Moesif 知道是誰發送了客戶端事件。不要忘記將其替換<YOUR_MOESIF_APP_ID>為您的實際 Moesif 應用程序 ID 和<YOUR_EMAIL>您自己的電子郵件。

客戶端操作使用瀏覽器 SDK 來告知 Moesif 網站上發生的事情。在本例中，就是單擊按鈕。這與我們的 API 無關，但以后可能會很有趣。例如，當用戶通過網站注冊，但隨后沒有發送任何請求時。

API 請求將使用 Authorization 標頭告知 API 用戶 ID。這樣，Moesif 稍后可以將客戶端事件與 API 請求關聯起來。

使用 Moesif Express SDK 創建 API

下一步是 API 服務器。我們將使用Express 框架

moesif-email/index.js 的代碼應包含以下內容：

const fs = require("fs");

const express = require("express");

const moesif = require("moesif-nodejs");

const website = fs.readFileSync(__dirname + "/index.html");



const app = express();

app.use(

  moesif({

    applicationId: "<YOUR_MOESIF_APP_ID>",

    logBody: true,

    identifyUser: ({ headers }) => headers.authorization,

  })

);

app.get("/", (request, response) => response.end(website));

app.get("/api", (request, response) =>

  response.end(JSON.stringify({ timestamp: Date.now() }))

);

app.listen(8888, () => console.log(Running at http://localhost:8888));

首先，我們加載 index.html，然后創建一個 Express 應用并將其配置為使用 Moesif Express SDK 作為中間件。您需要將其替換YOUR_MOESIF_APP_ID為您的實際 Moesif 應用 ID。

測試 API

為了測試 Express API，我們必須使用以下命令啟動服務器：

$ node .

這應該輸出以下行：

Running at http://localhost:8888

如果一切順利，我們可以http://localhost:8888通過瀏覽器導航到我們的網站并點擊按鈕。一個將發送客戶端事件，另一個將發送 API 請求。

圖 1：實時事件日志

如果您現在導航到 Moesif 儀表板（來自此處YOUR_MOESIF_APP_ID），然后單擊頂部的“事件”選項卡，您應該會看到四個不同的事件，如上圖 1 所示。

用戶操作事件是客戶端事件。GET /api 事件是我們發送給 API 的請求。它們都帶有用戶名和公司注釋。另外兩個事件與加載網站和網站圖標的瀏覽器請求有關。之所以包含它們，是因為我們像 API 一樣使用相同的 Express 服務器來提供網站，但由于請求缺少授權標頭，因此我們無法獲得用戶或公司注釋。