Actions & Blinks程式實踐
在上篇瞭解完整個工作流程後，我們就來學習如何用程式碼構建屬於自己的Actions & Blinks吧！其實身為開發者，需要做的只有一件事：部署自己的後端伺服器用來接收GET/POST requests！這邊提供簡單的範例程式碼可以參考！
因為Actions & Blinks是一個有特定規範的服務，所以在接下來的程式碼講解中我不會帶到太多邏輯，只會介紹格式該怎麼設置。首先我們來講解GET函式中的架構。
在GET中我們主要是希望Actions Provider回傳要顯示的精美小視窗內容，而這必須符合特定格式(ActionGetResponse)的Response如下，其中每個欄位的意義寫在註解中：
const requestUrl = new URL(req.url);
const payload: ActionGetResponse = {
title: "Your title",
icon: new URL("/path-of-the-icon-file ", requestUrl.origin).toString(), // the path of icon should be the path under /public
description: "Your description",
label: "Does not matter", // this value will be ignored since `links.actions` exists
links: {
actions: [
{
label: "", // button text
href: `${baseHref}&amount=${"1"}`, //when user click the button, send a POST req to this url
},
{
label: "Send SOL", // button text
href: `${baseHref}token_amount={amount}`, // this href will have a text input and bring the variable
parameters: [ // if we have multiple parameters, there will be multiple lines of input, but only one button
{ // the input value will be the value of variable
name: "amount", // variableconst body: ActionPostRequest = await req.json();
// Validate to confirm the user publickey received is valid before use
let account: PublicKey;
try {
account = new PublicKey(body.account);
} catch (err) {
return new Response('Invalid "account" provided', {
status: 400,
headers: ACTIONS_CORS_HEADERS, //Must include CORS HEADERS
});
} name in the `href` above
label: "Enter the amount of SOL to send", // placeholder of the text input
required: true,
},
],
},
],
},
};
最終將payload包起來傳回去即可：
return Response.json(payload, {
headers,
});
在GET的外面要記得加上下面這段！不然會遇到CORS問題導致瀏覽器阻擋（不知道CORS是什麼沒關係，記得加上就對了！後面有一些其他設定也都是為了CORS）
export const OPTIONS = async (req: Request) => {
return new Response(null, { headers });
};
至此我們就成功建好GET的形式啦～其實很多地方都照抄格式即可，是不是很容易呀～
接著來看POST，我們知道在GET中的action在使用者點擊後會發送一POST req到對應的href（用同一個url帶入參數即可），所以我們的POST就是要處理使用者點擊後我們希望他的錢包做的事情，首先會用以下程式碼獲取使用者的錢包地址(account)：
const body: ActionPostRequest = await req.json();
let account: PublicKey;
try {
account = new PublicKey(body.account);
} catch (err) {
return new Response('Invalid "account" provided', {
status: 400,
headers: ACTIONS_CORS_HEADERS, //Must include CORS HEADERS
});
}
接著我們要獲取透過url傳過來的參數值(此範例中是password)，用以下的程式碼即可：
const params = new URL(req.url).searchParams;
const password = params.get("password");
在獲使用者選擇的參數後，我們就可以任意的編寫我們的程式碼，如同一般我們用@solana/web3.js製造transaction一樣。在範例程式中我們根據已經部署好的鏈上合約創建了一連串的instructions(airdropInstruction)，至於中間如何創建instruction就不在今天的範圍內，是需要根據不同的鏈上合約來變化的。總之包完instructions後利用下面這段程式碼包成transaction，並設定好recentBlockhash & feePayer
const transaction = new Transaction().add(airdropInstruction);
transaction.recentBlockhash = (
await connection.getLatestBlockhash()
).blockhash;
transaction.feePayer = account;
最後回傳Response如下格式即可：
const payload: ActionPostResponse = await createPostResponse({
fields: {
transaction,
message: "Successfully claimed!",
},
});
return Response.json(payload, {
headers: ACTIONS_CORS_HEADERS,
});
到此我們終於建立好我們API entry了。最後別忘了加入 /app/actions.json/route.ts這也是為了避免CORS問題，可以照範例程式碼直接複製貼上就好！
至此我們終於大功告成。如果要測試我們的程式碼是否正確，可以到此網址，記得修改API route和port number：https://dial.to?action=solana-action : http:/ localhost: 3000/api/actions/your_api_route，還有一個重點是如果你的合約是部署在devnet上的話，要改用這個domain：https://dial.to/devnet才會正常呼叫到合約喔！
你可能也想看
