Pi's Blog

前言

因為身邊的工程師朋友很少
就算混在一些城市 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

前言

最近總算花了 999 鎂 (但卻是 3400 台幣!?)註冊了開發者帳戶
總算可以打包 expo dev client 到 iPhone 上了

所以前幾天註冊了我自己的 iPhoneX 到 JapanGo 上
並下載 dev client 測試，沒什麼問題
那我就想，應該把 Josie 的 iPhone SE 也拿來測試一下
畢竟那是最小的 iPhone
那因為我要多註冊一個裝置，所以必須重新打包
這時 EAS 就報錯了

題外話：等好久…

不知道是不是因為凌晨是國外的 APP 打包旺季
EAS build 居然需要排隊 270 分鐘!!!
阿不就幸好我可以去睡覺 (其實也早該睡了)
不然也等太久了吧
算了反正我是 EAS 免費仔
不付費就是要排隊XD

回來正題：EAS 報錯

總之我睡了一覺起來就看到紅色的 error
錯誤訊息如下:

1
2
3
4

Error: Compatible versions of some pods could not be resolved.
You are seeing this error because either:
  - Versions in the Podfile.lock cached by EAS do not match required values in Podspecs of some of the libraries. To fix that add the "cache.key" field (it can be set to any value) in the build profile in eas.json to invalidate the cache.
  - Some of the pods used in your project depend on different versions of the same pod. See logs for more information.

看起來是 cache 出問題，訊息中也提到說要忽略 cache
因此方法很單純，只要再重新eas build
並記得加上 --clear-cache 的 flag
把 cache 清掉就好了

參考資料

結論

如果需要重新打包 APP 的話，建議都加上 --clear-cache flag
尤其是當你有更改打包的設定時