Pi's Blog

前言

延續上一篇去參加 MOPCON 的心得
這篇比較會著重在我個人的部分
其實在來之前就有設立一些小目標
要盡可能地去達成
才不會辜負這趟旅程
(啊雖然說單純聽演講也是非常值得啦)

重大任務1: 見 Nic

幾個月前 SITCON 的時候
就有打算去看 Nic 演講，地點是在中研院那邊
但當時太晚知道，票已經賣完了
再加上演講主題是 Ruby
就沒特別去蹲轉讓了

後來過了一陣子，也開始思考應該為自己去技術會議
選定了 MOPCON，Nic 正好也公告說他會去演講，主題是 Web3
覺得是絕佳的機會，一定要去聽然後拍個照

Day1 的下午就有短暫看到 Nic 本人
但沒有馬上過去找他拍照，一不留神就消失了XD

Day2 的第一場演講才聽到一半我就開始去C3會廳找位子
越接近尾聲，人群就越往前移動
所以我也開始不斷地往前面的位置坐XD
最後居然讓我坐到超前面又正前方的位置辣！！！
我沒了

所以也很榮幸能清楚出現在Nic的自拍裡
成為他未來 google meet 的背景

會後的 QA 環節真的是人滿為患
好多人排隊拍照、問問題
我主要是想排在比較後面順邊聽聽別人都問什麼
發現有不少人也是正在轉職的階段，希望能獲得心態上或技術上的建議
也有些人是來問區塊鏈的相關問題
Nic 真的都很認真回答，回答很久哈哈
快輪到我的時候真的超挫，一邊想著到底要說什麼，但又不想要問技術相關的問題
最後決定跟他分享心路歷程

我就說我從2020年就開始看他的頻道了
然後經過這段期間的自學，不僅這禮拜上架了自己的app
甚至也拿到一些offer
其中還有 web3 領域的公司
一直以來從他的頻道學到很多軟硬實力的東西
給了我非常大的勇氣繼續向前

一邊講一邊抖XDD 因為實在是太興奮哈哈
Nic 聽了也是非常興奮+開心
馬上伸出手跟我握手，恭喜我的努力有了回報
也鼓勵我繼續像今天這樣來參加技術會議
未來也希望我有一天能站上台跟大家分享更多東西
我實在是太感動了QQQQ

最後到了拍照的階段，我問能不能和 Nic 跟 Doris 一起拍
因為兩位都是我很崇拜的對象
而且我和女友也是工程師+設計師的組合
可惜 Josie 這天沒辦法來，不然好想要四個人一起合照啊~~~

最後的最後，我也和他們分享了這禮拜剛上架的 App
他們覺得做得很棒，希望我能繼續保持前進的動力

有一段話記得很清楚，當時我心跳還是很快，手一直抖
Nic：「我看你應該也是蠻敢講話的，可以趁這個機會多跟別人交流」
我說：「其實我平常很內向不敢講話啦，現在還在抖XD 但覺得既然都來了就應該豁出去」
Nic：「我也是啦，我剛剛在台上也是挫嘎袂係，你可以試著多跟攤位互動問問題，慢慢提出自己的想法，漸漸認識更多的人，這對未來會很有幫助」
我：「對! 我覺得人脈很重要~」
Nic:「人脈真的很重要！」

於是這段對話成了我能夠完成下一個目標的強心針

重大任務2: 認識新朋友

就如前一篇一開始提到的，我身邊沒什麼寫程式的朋友
少數的那幾位也都不算很熟，沒辦法有什麼深度的討論
所以從去年開始我就去參加一些 FB 社團，試著在裡面回答問題，參與討論
但效果不彰，如果問題太難我連討論都不行
可能只能參與一些極度新手的問題
但用文字描述真的很難傳達給對方，不然就是必須打超大一篇
花了很多時間在這上面
後來漸漸變成用增廣見聞的心態潛水…

也有參加學校的資訊研究社
但步調真的很慢，成員之間的聯繫也蠻疏遠的
所以始終沒有感受到自己在工程師圈子裡的感覺
才會想要來參加線下的技術會議

來了是來了但到底要怎麼認識新朋友啊哈哈
有在 ViewSonic 遇到比我大幾屆的師大圖傳系學姊
真的是他鄉遇故知欸 頓時有種溫馨感QQ
但是沒有互相進一步認識就是了

後來也發現以前天文社的朋友居然也有來
大概有8年左右沒見了，真的是好久 天哪
在這陌生人海中還能有這一點小溫馨，實在很開心

到了 Day2
在下午的某場演講開始前
有個男生問我旁邊的位置有沒有坐人，然後就坐在旁邊
這個時候 Nic 的「人脈真的很重要」這句話一直迴盪在耳邊
恩… 拼了啦！！！

我終於開口跟陌生人講話了嗚嗚嗚
超重大突破!!! 交到新朋友啦
互相問一下對方是在做什麼的，然後也很尷尬的加了一下好友XD
後來的幾場演講也都一起聽，真的是有伴真好
下面這張是回家前的合照
以及他舉手提問後獲得的比特幣XDD

對方很好奇地問了我的轉職歷程
聽完之後，他感到很欽佩，覺得我能走到這個階段很不簡單
畢竟要放掉大學加研究所投入的心力
他本身雖然算本科系的碩一，但對未來還是很迷惘
沒有什麼能拿出的 side project，因為大多都是產學合作，不太方便
我也是給了他一些鼓勵(哇我現在是過來人了嗎)
建議他可以把產學合作案子的敏感資料抽出來，保留邏輯的部份看看能做什麼延伸
這樣應該還是很有機會的

原來這就是我夢寐以求的互相交流啊!
聊下來真的很開心，獲得了一位能互相勉勵的夥伴QQ

會後心得

整體下來
很慶幸自己有來參加 MOPCON
收穫非常多，拿到的禮物也非常多XD
以後也會參加其他的技術會議，尤其是在北部的
這次來回一趟北高，加上門票費，快要四千塊QQ
真的快吃土了哈哈

這個禮拜真的完成很多里程碑
找工作、JapanGo、MOPCON、收到 Nic 和 Doris 的鼓勵
簡直是人生的巔峰
未來一定要好好加油

另外也意外發現 LinkedIn 的好處
因為在這種場合，跟別人互加好友很容易冒犯到對方
相較於其他社交平台比較私人，LinkedIn 是比較工作取向，加好友也不失禮貌
像我就因此加到 Doris 啦! 開心~

前言

因為身邊的工程師朋友很少
就算混在一些城市 FB 社團裡面
都還是覺得自己在這個圈子之外
於是決定再多踏一步：參加技術會議
由於自己是從手機開發入門
便覺得可以從 MOPCON 開始

一開始在限動問朋友有沒有人願意陪我一起去
只有少少幾個說有點想去
但我追問之後又消失 XD
好吧看來真的要自己去 QQ

到各攤位晃晃 拿戰利品

第一天抱著期待的心情來到高雄會議中心
但是小遲到 高雄的公車真的等很久欸
幸好大家都還在排隊進場
可以看到攤位滿滿的人 (呃結果我拍的這張沒什麼人…)

雖然常需要跟攤位尬聊, 很痛苦XD
但也藉此認識幾間新公司
就算是已經知道的公司
也能從中挖掘到意想不到的走向
像我就完全不知道 Dcard 正在往遊戲跟 web3 走 XD

參加一些小活動，也可以拿到小禮物
也可以拿到袋子，來裝剛拿到的小禮物
然後再拿到大袋子，來裝裝滿小禮物的袋子
逐漸變得大包小包 XD

個資也是給了不少
就當作給未來的機會播種吧 XDD

豐富的議程時間

議程的部分
主要都挑 web3 跟 UIUX 在聽
因為最有興趣，也是最想點的技能樹

主題都蠻多元的
有硬核的也有親民的
能聽到新穎的概念
也能學到前人的經驗

有點像新技術開箱大會
(對我來說都是新的)
能探索出自己到底對哪個領域或技術是更有興趣的

除了議程內容外
另一個重要收穫是
我可以藉此發現新的高手講者
學習的管道更多了

以下是我所有去聽的演講，✅代表我覺得物超所值：

待續…

這篇拖太長了~
還是把後半段留到下一篇吧

前言

因緣際會踏入區塊鏈這個圈子
也創建了自己的 MetaMask 錢包
雖然還沒有錢可以放進去 QQ
但身為工程師就要試著自己在網站中連接錢包並顯示出來！

Web3.js

Web3.js 是一個用來和以太坊區塊鏈互動的 library
讓你可以跟本地的區塊鏈，或是用 HTTP, IPC, WebSocket 去跟遠端的區塊鏈互動
安裝方式很簡單

1

npm install web3

他提供很多 api，讓你可以做到連接錢包，查詢餘額，或是跟智能合約互動等等的功能

一：取得 Provider

首先要 import web3

1

import Web3 from 'web3'

並且取得 provider

1

const web3 = new Web3(Web3.givenProvider)

所謂的 provider 我認為可以把它當作「對區塊鏈發出請求的實體」
他就像律師一樣，幫我跟以太坊交談
(不知道為什麼會突然拿律師當例子，可能最近看太多禹英禑ㄌ)
例如當你要查詢餘額，就對 provider 發出請求，他會在跟乙太坊要資料後做出回應。
網路上查到的一個解釋如下：

Web3 provider allows your application to communicate with an Ethereum or Blockchain Node.
Providers take JSON-RPC requests and return the response.
This is normally done by submitting the request to an HTTP or IPC socket based server.

另外，如果我們是在測試階段，就不一定要真的連上以太坊網路
那我們就可以設定一個 fallback URL
以 Ｇanache 為例 (Ganache 是一個讓你能夠搭建虛擬區塊鏈的工具)
他的測試 port 是 http://localhost:8545
於是上面的code 可以改寫成這樣

1

const web3 = new Web3(Web3.givenProvider || 'http://localhost:8545')

二：連接錢包

稍微看了幾個 Web3 網站，發現通常都會有一個按鈕叫做「connect wallet」
按下去後 MetaMask 小視窗就會跳出來，按下確認後網頁就跟錢包做好連接了
我們現在就是要來做這件事情
需要用到 web3.eth.requestAccounts API
不過我這次暫時先寫在useEffect裡面好了

1
2
3
4
5
6
7
8
9
10

const [account, setAccount] = useState('');

useEffect(() => {
  // run once at mount
  const loadAccount = async () => {
    const accounts = await web3.eth.requestAccounts() // 回傳的是 array
    setAccount(accounts[0])
  }
  loadAccount()
}, [])

如此一來就取得錢包帳號了

三：顯示餘額

連上錢包就能顯示餘額
要用到的是web3.eth.getBalance這個 API，並傳入剛剛的帳號
另外我們也可以利用web3.eth.net.getNetworkType來檢視目前連接的區塊鏈網路

1
2
3
4
5
6
7
8
9
10
11
12

const [network, setNetwork] = useState('');
const [balance, setBalance] = useState(0);

useEffect(() => {
  const loadBalance = async () => {
    const network = await web3.eth.net.getNetworkType()
    const balance = await web3.eth.getBalance(account) // given in Wei
    setNetwork(network)
    setBalance(balance)
  }
  loadBalance()
}, [account])

記得填入 dependency array,
每當account更新，我們都要重新呼叫loadBalance()

最後，我們將步驟二跟三合併在同一個useEffect裡面
由於如果還沒有取得account就無法呼叫getBalance()
所以還需要一個判斷

1
2
3

if (!account) {
  loadAccount()
} else loadBalance()

結論

至此就完成了極簡易的 dapp
之後再繼續探究更多功能！

完整 code 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import { useEffect, useState } from 'react'
import './css/App.css'
import Web3 from 'web3'

function App() {
  const [account, setAccount] = useState('');
  const [network, setNetwork] = useState('');
  const [balance, setBalance] = useState(0);

  useEffect(() => {
    const GANACHE_URL = 'http://localhost:8545'
    const web3 = new Web3(Web3.givenProvider || GANACHE_URL)

    const loadAccount = async () => {
      const accounts = await web3.eth.requestAccounts()
      setAccount(accounts[0])
    }

    const loadBalance = async () => {
      const network = await web3.eth.net.getNetworkType()
      const balance = await web3.eth.getBalance(account) // given in Wei
      setNetwork(network)
      setBalance(balance)
    }

    if (!account) {
      loadAccount()
    } else loadBalance()
  }, [account])

  return (
    <div className="App">
      <header className='header'>

        <h2>My First Web3 </h2>

        <hr style={{ marginBottom: '2rem' }} />

        <p className="account">
          <span>Account: </span>{account}
        </p>

        <p className="account">
          <span>Network: </span>{network || 'loading...'}
        </p>

        <p className="account">
          <span>Balance: </span>{balance ? `${balance / 1000000000} GWei` : 'loading...'}
        </p>

      </header>
    </div>
  )
}

export default App