Actions & Blinks程式實踐

更新於 發佈於 閱讀時間約 10 分鐘

上篇瞭解完整個工作流程後,我們就來學習如何用程式碼構建屬於自己的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才會正常呼叫到合約喔!


avatar-img
1會員
5內容數
留言
avatar-img
留言分享你的想法!
你可能也想看
Google News 追蹤
Thumbnail
Blinks 是針對 Solana 的應用程式,可讓用戶透過網頁、社交媒體或 QR 碼執行鏈上交易。本文深入介紹 Blink 的特點、應用及其開發步驟,說明如何利用 Action API 創建用戶友好的介面,實現無縫的 web3 接入.
1.如何在不同的上下文中(如 QR 碼、按鈕、插件和網站)使用 Actions, 以提供更友好的區塊鏈交互界面? 2.如何在網站上使用 Blinks,即時觸發錢包中的交易預覽, 或在 Discord 等平台上將 Blinks 展開為交互式按鈕, 提升用戶的交互體驗? #SolanaWr
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
Blinks 是針對 Solana 的應用程式,可讓用戶透過網頁、社交媒體或 QR 碼執行鏈上交易。本文深入介紹 Blink 的特點、應用及其開發步驟,說明如何利用 Action API 創建用戶友好的介面,實現無縫的 web3 接入.
1.如何在不同的上下文中(如 QR 碼、按鈕、插件和網站)使用 Actions, 以提供更友好的區塊鏈交互界面? 2.如何在網站上使用 Blinks,即時觸發錢包中的交易預覽, 或在 Discord 等平台上將 Blinks 展開為交互式按鈕, 提升用戶的交互體驗? #SolanaWr
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
這篇內容,將會講解什麼是函式,以及與函式相關的知識。包括函式的簡介、Runtime Function、自訂函式、Script Function 腳本函式、Method 方法。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例