---
title: "如何在 Optimism 上使用 webhook"
description: "什麼是 Optimism Webhook，以及如何在 Web3 中使用"
---

# 如何在 Optimism 上使用 webhook

如果你想讓你的 web3 應用程式與第三方應用程式或服務溝通，你會愛上 webhooks。在這篇教學中，我們將學習如何在 [Optimism](https://www.alchemy.com/layer2/optimism/?a=a40402f9aa) 上設定並使用 webhooks。接著會示範如何在 Slack 上為 Optimism 上的 ETH 收發設定自動化通知。

## 什麼是 webhook？

[**Webhooks**](https://www.alchemy.com/overviews/what-is-a-webhook) 是 web3 開發者可以用來讓第三方應用程式或服務在事件發生時與應用程式溝通的工具。相較於持續透過 API 輪詢節點來檢查某個特定狀態是否改變，這項技術更有效率，因為 webhooks 讓伺服器可以在事件發生當下就將通知推送到應用程式。

[Alchemy webhooks](https://www.alchemy.com/docs/reference/notify-api-quickstart) 有很大的潛力可以改善使用者體驗、提升 web3 應用程式與服務的參與度，例如在 Discord 頻道追蹤 NFT 銷售，或是將錢包活動傳送到 Slack 頻道。

## Webhooks 可以追蹤哪些 Optimism 事件？

**透過 Alchemy webhooks，我們可以接收三種類型的 Optimism 事件通知：**

1. Mined transactions - 交易完成
1. Dropped transactions - 交易失敗或從 mempool 中被丟棄
1. Address Activity - 代幣被接收或轉移

在這篇教學中，我們會追蹤 _Address Activity_ 事件，也就是在 Optimism 上收發 ETH 時接收 Slack 通知。

## 如何設定 Optimism webhooks

以下是設定 Optimism webhooks 並將通知自動化傳送到 Slack 的 10 個步驟。這個流程也適用於 Zapier 支援的許多其他第三方平台，例如 Discord、Twitter 等等！

### 1. 建立一個 Ethereum 錢包

我們需要一個 Ethereum 錢包來收發交易。在這篇教學中，我們會使用 **[MetaMask](https://www.alchemy.com/dapps/metamask)**，一個以瀏覽器為基礎的數位資產錢包，用來管理 Ethereum 帳戶。[下載 MetaMask](https://metamask.io/download.html) 並建立一個免費帳戶。

### 2. 登入 Alchemy

為了方便起見，[註冊一個免費的 Alchemy 開發者帳戶](https://dashboard.alchemy.com/signup)，這樣你就可以與 Ethereum 鏈溝通，而不需要自己執行節點。

### 3. 建立一個 API key

接著，建立一個新的 app 來產生 API key，並[連接到 Optimism 測試網路](https://www.alchemy.com/docs)。

前往 Alchemy Dashboard 中的 _Create App_ 頁面，將滑鼠移到導覽列的 _Apps_ 上，然後點擊 _Create App_。

<ImageBlock
  src="https://media.alchemy.com/1704209670-create-api-key-alchemy.jpg"
  alt="Alchemy 儀表板：建立新 app 以產生 Optimism API key"
  width={1600}
  height={912}
/>

為你的 app 命名（我們選擇「optimism_webhooks」），並寫一段簡短的描述。

接著，將 chain 選擇為 _Optimism_，network 選擇為 _Optimism Goerli_。

然後，點擊 _Create app_。

現在，點擊 _Apps_ 底下新建立的 app 連結，並點擊 _Add to Wallet_。

你現在應該已經在 Metamask 上連接到 Optimism Goerli testnet 了！

<ImageBlock
  src="https://media.alchemy.com/1704209686-alchemy-optimism-webhooks.png"
  alt="Alchemy 儀表板：新的 Optimism Goerli app，含 Add to Wallet 按鈕"
  width={1600}
  height={469}
/>

### 4. 從 Goerli faucet 取得 Testnet ETH

要將你的智慧合約部署到 Optimism 測試網路，[從 Goerli faucet 取得 ETH](https://www.alchemy.com/overviews/goerli-faucet)。

首先，將你的 MetaMask network 切換成 Ethereum Goerli，然後點擊 _Claim_。

接著，你應該會在 Goerli testnet 上的 MetaMask 帳戶中看到 0.05 ETH。

### 5. 將 Goerli ETH 橋接到 Optimism-Goerli Testnet

目前還沒有公開的橋可以將 Goerli ETH 轉移到 Optimism，但可以透過 [Cast from Foundry](https://github.com/foundry-rs/foundry/tree/master/cast)（一個 Ethereum 應用程式開發工具組）來達成。

**使用這段程式碼片段：**

`cast send --legacy --rpc-url=$ALCHEMY-OPT-GOERLI-ENDPOINT --value=0.001ether --private-key= 0x636Af16bf2f682dD3109e60102b8E1A089FedAa8`

現在你已經在 Opt-Goerli testnet 上擁有 Goerli ETH。

### 6. 建立一個 zap 和一個 Optimism webhook URL

現在，[建立你的 Zapier 帳戶](https://zapier.com/sign-up)，或者如果你已經有 Zapier 帳戶就登入。

接著，在 dashboard 中，點擊左上角的 _Create Zap_。

我們現在要建立 webhook URL，用來將 webhook 回應從 Alchemy 傳送到 Zapier。

在 _Trigger_ 底下，搜尋並選擇 _Webhooks by Zapier_ 作為 app event/trigger。

在 _Trigger Event_ 中，選擇 _Catch Hook_，因為 Zapier 會等待 Alchemy 的 address activity webhook 在每次發生轉帳時將事件資料傳送到該 URL。

點擊 _Continue_ 進入 _Set up trigger_ 區塊，並複製 _Custom Webhook URL_。

<ImageBlock
  src="https://media.alchemy.com/1704209746-zap-and-optimism-webhook-url.png"
  alt="Zapier Zap 編輯器：從 Catch Hook 觸發器複製自訂 webhook 網址"
  width={1600}
  height={634}
/>

### 7A. 建立一個 Optimism webhook

現在，我們需要建立 address activity webhook 來追蹤轉帳事件，並將資料傳送到 Zapier webhook URL。

我們會示範兩種設定 webhook 的方式，第一種是在 dashboard 中透過 Alchemy 的 **Notify tab**，第二種則是透過 **Alchemy 的 Notify API** 以程式化方式設定（若要處理 10 個以上地址的 address activity webhooks，建議使用此方式）。

1. 確認你目前位於 Alchemy dashboard 左上角的 _Ethereum \+ L2_ 生態系中
1. 前往 Notify tab，並在 *Address Activity* 區塊中點擊 _\+ Create Webhook_ 按鈕
1. 將 _Chain_ 選擇為 _Optimism_
1. 將 _Network_ 選擇為 *Goerli*
1. 貼上你在前一步驟從 Zapier 複製的 webhook URL
1. 將你的 MetaMask 錢包地址貼到 _Ethereum Addresses_ 區塊中。

注意：如果你想在確認建立之前，測試 Alchemy webhook 是否成功將請求傳送到 Zapier 的 webhook URL，可以點擊 webhook URL 旁邊的 _Test Webhook_。或者如果你已經建立好 webhook，但想再測試一次，可以點擊 webhook 旁的三個點，選擇 _Send Test Notification_。

現在，回到 Zapier，繼續進入 _Test trigger_ 區塊，並點擊 _Test trigger_。

如果你看到「We found a request message」，恭喜！

### 7B. 使用 notify API 建立一個 Optimism webhook

如果你想為多個 Optimism 地址建立 webhooks，可以使用 [Notify API](https://www.alchemy.com/docs/reference/webhooks-overview)。要開始使用，請從 Notify dashboard 右上角的 _AUTH TOKEN_ 按鈕複製你的 Alchemy authentication token（X-Alchemy-Token）。

<ImageBlock
  src="https://media.alchemy.com/1704209787-alchemy-auth-token.png"
  alt="Alchemy 儀表板顯示 Notify API 的 Auth Token 複製位置。"
  width={1600}
  height={152}
/>

接著，前往你的命令列並輸入以下內容：

`*curl https://dashboard.alchemy.com/api/create-webhook \`

`*-X POST \`

`*-H "X-Alchemy-Token":"your-X-Alchemy-Token" \`

`-d '\{"network":"OPT_KOVAN","webhook_type":"ADDRESS_ACTIVITY","webhook_url":"your-Zapier-Webhook-URL", "addresses":["your-Ethereum-Address"]\}'``
`

記得使用你自己的 _your-X-Alchemy-Token_、_your-Zapier-Webhook-URL_，以及 _your-Ethereum-Address_（也就是你貼上的錢包地址），你可以視需要加入任意數量的 Ethereum 地址來追蹤它們的轉帳事件。

重新整理後，你應該會在 Notify dashboard 中看到新建立的 address activity webhook，並顯示你指定的所有參數。

### 8. 在 zapier 中解析 Optimism webhook 回應

根據 Alchemy 傳來的 webhook 回應，我們需要在 Zapier 中解析它，建立一個動作，在我們的 Optimism 地址成功送出交易時發出提醒。

在 _Action_ 區塊中，選擇右側的 _Filter_ 選項。

在 _Filter setup & testing_ 中，我們希望只有當 _Event Activity From Address_（或者你可以直接搜尋 _fromAddress_）_(Text) Exactly matches_ 我們的 Optimism 地址（貼到最後一個文字欄位中）時才繼續。

如果你點擊 _Continue_ 後發現「Your Zap would not have continued」，不用擔心！因為測試通知並非從錢包實際發送，所以出現這個訊息是正常的。

<ImageBlock
  src="https://media.alchemy.com/1704209834-optimism-webhook-responses-zapier.png"
  alt="Zapier 篩選器設定：將 webhook 的 fromAddress 與 Optimism 錢包地址比對"
  width={1600}
  height={912}
/>

### 9. 將你的 Optimism webhooks 整合到 slack

首先，讓我們建立一個 Slack 帳戶和工作區。在 [Slack](https://slack.com/) 上建立帳戶，或者如果你已經有帳戶就登入。接著，建立一個新的工作區。我們將它命名為 _Optimism Wallet Alerts_，但你可以自由發揮創意！

#### 處理發送代幣的提醒

接下來，我們想在我們的錢包是某個 **transfer event** 的發送方時傳送訊息。

1. 點擊底部的「\+」
1. 在新的 _Action_ 區塊中搜尋並選擇 _Slack_
1. 在 _Action Event_ 中，選擇 _Send Channel Message_
1. 點擊 _Continue_ 後，登入你的 Slack 帳戶
1. 在 _Set up action_ 區塊中填寫欄位，設定我們要傳送的訊息內容
1. 選擇你想要接收提醒的頻道（我們的情況是 _Optimism-Wallet-Alerts_）。

在訊息文字中，你可以自由發揮，選擇要傳送哪些欄位和值。

我們選擇了以下欄位：

<ImageBlock
  src="https://media.alchemy.com/1704209860-alerts-for-sending-tokens.png"
  alt="Zapier Slack 動作：為 Optimism token 轉帳提醒選擇的訊息欄位"
  width={864}
  height={133}
/>

其他部分都可以保留預設選項。

點擊 _continue_，然後 _test and continue_。

如果沒有跳出任何錯誤，代表一切準備就緒！你的帳戶上應該會出現一則 Slack 訊息。現在，發佈這個 Zap。

恭喜！現在，每當你的 Optimism 錢包發出一筆交易，我們的 Zap 就會傳送一則說明該交易的訊息。

你也可以在 Zapier dashboard 的 Zap History 頁面查看你的 Zap 執行記錄。

### 10. 傳送訊息以處理在 Optimism 上接收代幣的情況

我們也希望在錢包是 Optimism 交易的接收方時發出提醒。

首先，編輯 _continue only if_ 動作。

點擊 _Filter Setup & Testing_，按下「\+ or」按鈕，填入 _Event Activity To Address_（或者你可以直接搜尋 _fromAddress_）以及 _(Text) Exactly matches_ 我們的 Optimism 地址（貼到最後一個文字欄位中）。

太好了，現在當錢包也是接收方時，我們的 Zap 也會執行！

接下來，讓我們在 _Only continue if…_ 和 _Send Channel Message in Slack_ 這兩個動作之間，建立一個 _Code by Zapier_ 動作。

你可以選擇 _Run Python_ 或 _Run Javascript_。我們會選擇後者，不過邏輯與 Python 相同。

點擊 _Continue_ 後，我們會在 _Set up action_ 底下依照以下方式設定輸入資料：

<ImageBlock
  src="https://media.alchemy.com/1704209961-run-javascript-code-zapier.png"
  alt="Code by Zapier 動作：設定 JavaScript 步驟的輸入資料"
  width={1600}
  height={862}
/>

我們之所以要再次解析 webhook 回應，是因為目前的通知內容只針對錢包**發送** ETH 的情況撰寫。因此，我們需要為錢包**接收** ETH 的情況客製化這些內容。

在程式碼區塊中，貼上以下程式碼（請閱讀註解以了解每一行的意思）：

`// Since JavaScript is case-sensitive, we will be comparing addresses in upper case const address = "Wallet-Address".toUpperCase\(\);
// Define Account 1 \(Our wallet\)
let account\_1 = "";
// Define Account 2 \(the user our wallet is sending to / receiving from\)
let account\_2 = "";
// Define to use "to" or "from" in message
let t\_or\_f = "";
let f\_or\_t = "";
if \(inputData.fromAddress.toUpperCase\(\) == address\) \{
    // If Wallet is sending, then it is the fromAddress
    account\_1 = inputData.fromAddress;
    account\_2 = inputData.toAddress;
    t\_or\_f = "from";
    f\_or\_t = "to";
\} else if \(inputData.toAddress.toUpperCase\(\) == address\) \{
    // If Wallet is receiving, then it is the toAddress
    account\_1 = inputData.toAddress;
    account\_2 = inputData.fromAddress;
    t\_or\_f = "to";
    f\_or\_t = "from";
\}`
`//` 輸出要用在 email 中的欄位
`output = \[\{account\_1: account\_1, account\_2: account\_2, t\_or\_f: t\_or\_f, f\_or\_t: f\_or\_t\}\];`

同樣地，記得將 **Wallet-Address** 替換成你的 MetaMask 錢包地址。測試這個動作時，如果輸出變數沒有被賦值，不用擔心。

最後，前往 _Send Channel Message in Slack_ 動作，點擊 _Set up action_ 區塊。

我們現在會將訊息文字中來自 webhook 回應的通用欄位，替換成來自我們 Javascript 程式碼、更具動態性的輸出結果，這些結果會依照我們的錢包是發送還是接收代幣而有所不同：

<ImageBlock
  src="https://media.alchemy.com/1704209901-send-channel-message.png"
  alt="Slack 動作中的 Send Channel Message，點選 Set up action 區塊"
  width={876}
  height={173}
/>

點擊 _Continue_ 並測試你的動作，然後發佈！

恭喜！你剛剛完成了建立 Optimism webhooks！