WebWeb根端有什麼差別？ -1

您好！這是@jio_jake。
這篇文章是我在 paragraph.xyz 中所寫的韓文翻譯。訂閱我們的刊物您可以獲得最快的更新

---

使用 [Dall-E-3] 建立的影像

你好！我的名字是@jio_jake。我目前在區塊鏈遊戲平台 @Yooldo_Games 擔任前端開發人員

。

我去年加入團隊時對Web3知之甚少，所以我在不熟悉生態系統或Web3開發的情況下加入了團隊。從那時起大約一年半過去了，我創建了一個技術部落格來分享我獲得的見解和開發技巧，並為生態系統做出貢獻
。 去年我可以告訴像我這樣的加密開發新手的是，相比市場形勢的不確定性和方向，區塊鏈的發展出奇的清晰和酷。我會定期分享我透過部落格獲得的見解和技巧，所以如果您能訂閱，我將不勝感激。

前端開發人員通常在做什麼？

---

在進入正題之前，根據我個人的經驗，Web3前端開發人員和Web2前端開發人員沒有太大差別。技術棧可能略有不同，但開發環境沒有顯著差異。與其說技術不同，不如說是業務領域的差異更準確。

根據我過往的經驗，前端開發人員必備的素質如下：

• UX（使用者體驗）。 追蹤我們服務中的使用者活動對於前端開發人員來說是非常重要的線索。
• Javascript。 Javascript 生態系統最近的發展確實令人矚目。大多數事情都可以用 Javascript 完成。
• React之類的框架。 我不認為這是一項必備技能，但我認為如果你是想要加入公司的開發人員，這幾乎是必備技能。
• 協作和軟技能。 前端開發人員其實是一份最終的工作。有時我們需要協調所有團隊成員對產品任務的理解。
• 解決問題的能力。 如果你了解團隊業務，了解內部技術架構，一定會應用。

前端工程師始終專注於改善使用者體驗。如果把難以理解的業務術語用簡單易懂的方式解釋，或者在繪製用戶旅程圖時流失率較高或流程複雜，我們會重點改進。然而，在 Web3 環境中，前端開發人員在實作使用者友善的方法時需要注意一些稍微不同的事情

。

Web3 dapp 中的使用者體驗

---

我第一次加入目前團隊時，有一個目前專案的入職時間。有趣的是，產品中到處都有許多與我們定義的 Web3 術語或專有名詞（商業語言）相對應的單字。

儘管如此，還是有超過 30,000 名用戶（我認為應該說粉絲）聚集在我們的社群中並進行討論。我很好奇他們到底是如何聚集用戶的。令人驚訝的是，答案很簡單。
這是 Web3 使用者的
封閉群體文化。

讓我們更詳細地討論一下。以下是 Web2 使用者旅程地圖的簡要版本。

使用者偶然發現我們的服務。 它透過社群媒體廣告、病毒式行銷、口碑傳播等多種管道進入。
有新用戶正在加入服務。
3. 該服務仔細考慮使用者。 安裝了防止跳出率的設備，並識別興趣並顯示推薦產品。
適合自己口味的使用者會對服務產生忠誠度。忠實顧客增加了一位
4. 。

這是典型 Web3 服務的非常誠實的旅程圖。

首先，它是一個流程，前提是其中已經有一個龐大的社區和社區建設者。

1. 用戶第一次聽到我們的服務是在封閉群組。他們說他們已經與一個非常著名的大型區塊鏈（鏈、錢包）合作。 KOL（關鍵意見領袖）強烈推薦此項目
。
2. 使用者決定信任我們的服務。因為這個專案旁邊有一家大的、值得信賴的公司。
3. 使用者決定花費一些 ETH 來參加活動等。當然，您也可以將您的錢包連接到我們的服務
。
4. 循環重複。 哇！我們已經成為一個炒作的項目

用戶有花一點錢不猶豫的特點。身為前端開發人員，有趣的部分是使用者自己學習使用該服務。這在 Web2 中並不常發生。競爭產品太多了，你只能離開。 因此，我們不需要為用戶提供非常簡單的錢包整合等教學。你就知道這麼多了，對吧？這種想法可以忽略一些部分

。 那我們應該更關注什麼呢？

個人結論：擠壓與產品的相關性

上述問題的答案因團隊而異。我目前從事區塊鏈遊戲工作。我們在內部製作非常酷的遊戲，並從外部獲取它們。不是因為這是我工作的公司，而是我覺得像我們這樣認真對待遊戲的區塊鏈遊戲公司並不多

---

。

Troublepunk，一款可以在電腦上享受的大逃殺遊戲

RPD，一款可以在 Android 上享受的行動防禦遊戲

我們現在生活在多巴胺的時代。因此，人們很容易厭倦長篇內容。我認為遊戲的形式很長

Dizens 和未來的 Dizens 希望有效地利用他們的時間。因此，透過用戶分析，我們準備了與遊戲分開的非常快速且簡短的互動。例如，日常簽到或銷售限量版 NFT 等任務。這些任務非常方便且易於互動。只需連接您的錢包並按下按鈕

。
再舉個例子：如果我是該段的FE怎麼辦？

讓我給你一個更清楚的例子。如果我是段落開發人員，我該如何改進使用者體驗？

---

這是我第一次報名段落。

嗯..我剛剛連接了錢包，但它說發生了未知錯誤。

當連接到項目不支援的鏈時，會出現此錯誤。發生這種情況是因為我的 MetaMask 鏈設定是 Linea。所以我把它改成了以太坊主網。

按下後退按鈕並更改為以太坊主網後...

終於可以報名了！

必須按下使用者旅程畫面左上角的按鈕並選擇網絡，非常不方便。大多數 Web3 使用者都清楚這一點，因為這並不罕見，但肯定還有改進的空間。

我將這些不可見的任務放在後台，無需使用者互動。這是一個簡單的例子，但持續思考這種思維是作為 Web3 前端工程師改進 UX 的方法之一。以下是一些快速輕鬆互動的技巧。

段落 團隊似乎正在使用 web3-modal 進行錢包整合。下面的程式碼是我在這個假設下寫的。

const SignInButton = () => {
  const { open: openWeb3Modal } = useWeb3Modal();
  const { address, isConnecting } = useAccount();
  const chainId = useChainId();
  const { switchChainAsync } = useSwitchChain();

  const handleOnclick = async () => {
    // check current user wallet chain is supportive or not
     if (!supportedChains.has(chainId)) {
       await switchChainAsync({ chainId: mainnet.id });
     }
     openWeb3Modal();
  }
  return (
    <button onClick={handleOnclick}>
     {isConnecting ? 'Awaiting Confirmation' : 'Signin'}
    </button>
  )
}

Web3-modal 是使用 Walletconnect、Viem 和 Wagmi 建置的服務。因此您可以獲得強大的掛鉤和實用函數的支援。在正確的地方使用這些元素可以大大提高用戶體驗。
還有最後一個細節。有時，一些頑皮的用戶在發生錢包互動時會做各種事情。其中之一是在發送交易之前更改鏈。並自豪地發現了這個錯誤！我將其發佈在 Discord 社群、Twitter 等上。因此，在與錢包互動時始終檢查當前環境非常重要。如下：

• 用戶的錢包位址與鏈下註冊的錢包位址是否相同？
• 使用者是否連接到我們支援的鏈？ 您需要檢查的事實越多越好。 關於改善智能合約互動的使用者體驗還有更多技巧，我很快就會回來與您分享一些技巧
。

結束

---

正如我在文章開頭提到的，我不認為 Web3 前端開發與 Web2 前端工作有本質上的不同。事實上，從技術角度來看，Web3 比模糊、瞬息萬變的市場情況更加尖銳和清晰。
很難否認 Web3 服務有時不太用戶友好。因為錢包和鏈上互動的功能是必不可少的。但是，如果您是前端開發人員，則有一些事情需要擔心。我們必須分析我們服務的目標用戶，並努力了解核心用戶的需求。您可以透過繪製使用者旅程地圖並減少不方便的點來優化使用者體驗。

今天，我簡單分享了錢包連接的UX。 Web3 可以改進 UX 的地方還有很多，我也有很多東西想分享。

如果您喜歡這篇文章，請訂閱並分享。感謝您閱讀這篇長文。下一篇文章見。

以上是WebWeb根端有什麼差別？ -1的詳細內容。更多資訊請關注PHP中文網其他相關文章！