關於 web3.js metamask ，我們在網路上蒐集到這些相關的討論、資訊與評價

🔥 "เริ่มต้นเส้นทาง Full Stack Ethereum Dev ต้องรู้อะไรบ้าง ?"
.
⚡ ถ้าไม่นับตลาดเหรียญคริปโต และ DeFi ที่กำลังเดือดในตอนนี้ ​การหาคนมาทำงานในสายนี้ก็เดือดไม่แพ้กัน ! ว่าแต่เราจะต้องรู้อะไรบ้างถ้าต้องเป็น Dev สายนี้ มาลองดูกันได้เลย !!
.
🌎 Ethereum Development Environment
เมื่อเราต้องการสร้างสิ่งที่เรียกว่า Smart Contract เราจะต้องรู้วิธีการ Deploy, Run Test รวมถึง Debug บนภาษา Solidity ด้วย ซึ่งตรงนี้เราจะต้องรู้วิธีการทดสอบบน Test ที่ไม่ใช่ Live Production เพื่อป้องกันความเสียหายด้วยนั่นเอง
.
🖥️ Ethereum Web Client Library
แน่นอนว่าการทำรูปแบบ Full Stack นั้นฝั่ง Client เราก็ต้องพัฒนาด้วย โดยในที่นี่เราจะใช้เพื่อให้สามารถอ่าน และ ส่ง Transaction ได้นั่นเอง ซึ่งจะมีตัวที่ชื่อว่า ether.js ที่เป็น library ในการจัดการกับ Ethereum Blockchain ฝั่ง Client โดยเฉพาะ (หรือจะใช้ web3.js ก็ได้นะ !)
.
📜 Metamask
ถ้าเราต้องการที่จะจัดการเชื่อมต่อระหว่างบัญชีผู้ใช้งานของ User คนนึง ก็ต้องมีตัวกลางในการจัดการ ดังนั้นเครื่องมือตัวนี้จะช่วยให้เราจัดการ Key และ Account ได้สบาย ๆ นั่นเอง โดยใครที่เป็น User ของ Metamask มีกระเป๋าตังอยู่แล้วก็น่าจะรู้จักกันดี ลองไปดูใน API ที่เปิดให้ใช้ได้เลย
.
💙 React
พระเอกหลักฝั่ง Front-End ของเรานั่นเอง ซึ่งเราจะต้องรู้พื้นฐานตรงนี้ และต่อด้วยเครื่องมืออื่น ๆ เช่น Next.js, Gatsby, Redwood หรือ Blitz.js เพื่อให้ทำงานเข้ากันได้อย่างลงตัวนั่นเอง
.
📊 The Graph
สำหรับตัวอย่างแอปบน blockchain อย่าง Ethereum ลองคิดเล่น ๆ ดูว่าการอ่านข้อมูลจำนวนมากโดยตรง เมื่อเวลาผ่านไปคงจะใช้เวลานานมากขนาดไหนกัน ? การเข้าใจเรื่องนี้จะช่วยให้เราทำ Index Protocol เพื่อ Query ข้อมูลจาก Blockchain ได้ง่ายยิ่งขึ้นนั่นเอง !
.
✏️ Fundamentals พื้นฐานนั้นสำคัญจริง ๆ (แถม)
คือออ หลายคนอยากกระโดดมาเป็น Full Stack Blockchain Dev เลยตรงนี้อยากแนะนำไว้นิดนึงว่าเราควรมีพื้นฐานความเข้าใจของ Programming / Computer Science ให้ดีก่อน แล้วค่อยต่อยอดมาพื้นฐานการทำงาน Blockchain (รวมถึง Ethereum) เพื่อให้เราไม่ขาดความรู้ตรงไหนไป ทำให้ส่งผลเสียต่องานเราในอนาคตจ้า !!
.
💚 หากใครอยากเรียนตั้งแต่พื้นฐาน freeCodeCamp.org
เขาก็มีสอนนะ ! ไปตามกันได้เลยใน "The Complete Guide to Full Stack Ethereum Development" เข้าเรียน เข้าอ่านได้ฟรี !
.
💥 Source : https://www.freecodecamp.org/news/full-stack-ethereum-development/
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน

📜 [專欄新文章] Solidity Weekly #16
✍️ mingderwang
📥 歡迎投稿： https://medium.com/taipei-ethereum-meetup #徵技術分享文 #使用心得 #教學文 #medium

Expo (React Native) + web3.js 1.0.x 開發手機 dApps

今天要介紹如何利用 Expo，來撰寫手機 dApp。基本上，如果想做到去中心化的 dApp，期望能將 Javascript app 能盡可能的包裹成單一檔案，用去中心化檔案儲存空間，讓手機或網頁直接下載來執行。手機版的 App，也可用 Expo 做到類似的結果，但目前 Expo 還是有點中心化；當然利用 cipherbrowser 或 status.im 等方式開發也行，只要你不怕被 vendor lock-in。

Expo 是一種 MIT license 的開放源始碼，讓 React Native 開發與部屬更為簡單，讓用戶只要先下載 iOS 或 Android 的 Expo clients。就很容易透過 exp://xxx 的 URI 來執行。因為 React Native 跟 web3.js 都是用 Javascript 語言，因此很容易整合。(註：web3.js 也不是唯一連區塊鏈的方法，只是搭配 Remix，能產生 web3 程式片段，所以比較方便)

但由於 React Native 非 100% 與 node.js 相容，因此有些 workarounds 要做，例如 node 內建 standard library 裡的 crypto (註 2)，Buffer 等 React Native 就沒有，所以這裏還不是很方便。(喜歡 truffle 的人，也可參考 react-native-box 來做，但也還沒很成熟)

Mobile dApp 有個問題是，你(用戶)沒有 localhost 自己的 node 當成 web3 provider 可以連線到 Ethereum 區塊鏈。所以有幾種選擇，最簡單的就是要再相信某一個 node，這裡用 infura (與 Metamask 同一家公司)，也許還要搭配其他方法，讓這 dApp 不要依賴任何 server 也能運作。但如果要用到 HDWallet，還是要用 truffle-hdwallet-provider 來當 web3 provider，也能同時避開沒有 crypto 的問題。
使用 Expo 開發畫面
註 1：直接用 React Native 開發，不容易除錯，且速度慢。所以建議程式邏輯可以考慮用 React Native for Web 在 CodeSandbox.io 先做開發和測試，最後再搬到 Expo 的 React Native 裡。(或直接在 codesandbox.io 開發 Expo 程式也行)

CodeSandbox

註 2：例如當在 Expo 的環境裡使用到 web3.eth.accounts.create() 時，會出現以下 error，但其他地方(Condsandbox)不會。

解決方法，不要用 web3 provider 改用 truffle-hdwallet-provider (在 React Native 裡要用 Promise.promisifyAll 繞過問題)

var HDWalletProvider = require("truffle-hdwallet-provider"); var mnemonic = "manage velvet tide tube object spin identify neither foot together wagon tip"; var hd = new HDWalletProvider(mnemonic, "https://mainnet.infura.io/"); web3 = new Web3(hd); Promise.promisifyAll(web3.eth); let accounts = await web3.eth.getAccountsAsync();

Solidity Weekly #16 was originally published in Taipei Ethereum Meetup on Medium, where people are continuing the conversation by highlighting and responding to this story.

👏 歡迎轉載分享鼓掌