Search
React 是 Facebook 在 2013 年所發表的一個前端開源函式庫。React 除了可以用來開發 Web 前端，也有支援行動 App 的版本 – React Native ，透過這個框架，可以將自己的技能樹從 Web 前端擴展到行動 App 開發。
以下的線上課程是 udemy 熱門講師所開設的 React 入門課程，這三位講師的線上課程都有很高的評價，每位講師各自有自己的教學特色，如果想學習 React ，可以從這三門課中挑選。
https://softnshare.com/react-courses/
📜 [專欄新文章] 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.
👏 歡迎轉載分享鼓掌
📜 [專欄新文章] Solidity Weekly #15
✍️ mingderwang
📥 歡迎投稿： https://medium.com/taipei-ethereum-meetup #徵技術分享文 #使用心得 #教學文 #medium
真的 Dapps 怎麼做?
這裡我所謂的”真的” Dapps，是希望真能達到 decentralized apps 的目的，也就是不再需要任何網站 (https server) 來存放你的合約介面程式。也許有些人會覺得沒有必要真的完全 decentralized 吧，連 CryptoKitties 都沒做到，不是也一樣賣得嚇嚇叫！
但有多少網站連結最後都因為沒人維護而消失在 link 的另一端，有些好遊戲；也因為經營者不玩了，造成玩家所有的努力都付之一炬，不是很令人失望且有點可惜嗎？
目前我們可以利用 IPFS 來存放 html 與 js 或其他 asset 檔案，就可少去 web 伺服器永遠存在的必要性，未來 (我猜) 幾乎瀏覽器會支援某種類似 IPFS 的 proxy，就像現在支援 cache 一樣，無形中加速 IPFS 檔案的下載，至少 users 感覺會好一點。(註: 目前 IPFS 還是有點慢)
這個 Ropsten Testnet Ether 水龍頭 https://ipfs.io/…/QmVAwVKys271P5EQyEfVSxm7BJDKWt42A2gHvNmx…/ 就是一個沒有用 https server 的 DApp 例子。
當然要把複雜的 Javascript 程式包到 html 裡或簡單的單檔 JS 裡需要一點技巧。但我想難不倒我們台灣的大部分的前端工程師。
shared links:
Build a simple Ethereum + InterPlanetary File System (IPFS)+ React.js DApp.
https://itnext.io/build-a-simple-ethereum-interplanetary-fi…
Ming> 本文確確實實一步ㄧ步地教你如何結合 IPFS 與 web3.js 1.0 撰寫 DApp 上傳檔案到 IPFS，並記錄的 Ethereum blockchain。(但沒介紹如何安裝 DApp 在 IPFS 上)。
PS. 另一個方法就是用 react native (Expo) + web3.js 寫成手機 app。下週 Solidity Weekly 再來分享。(如果未來每個人的手機，可以像 mp3 世界裡的 azureus p2p 方式下載 Dapps 軟體，應該也算是 decentralized 吧)
Solidity Weekly #15 was originally published in Taipei Ethereum Meetup on Medium, where people are continuing the conversation by highlighting and responding to this story.
👏 歡迎轉載分享鼓掌
React Native 分為傳統的Native版、CRNA (Create React Native App)版和Expo版：. 傳統Native版：iOS和Android的App entry point分開，但App裡面可以共用 ... ... <看更多>
React Native 跨平台App 開發技術分享交流社群. ... 另外因為我們團隊有開發三平台(Web/Android/iOS) 的需求，所以這個project 同時支援三個平台。… See More. ... <看更多>
react native web教學 在 [教學] 偽react-native app - WebView - 看板Ajax - 批踢踢實業坊 的推薦與評價
最近在學react跟react-native發現：
react可以用來寫web apps。
react-native可以用來寫Android、iOS、甚至Win 10 apps。
但兩者的UI components是不能直接交換使用的囧
這樣好像就不能寫一次JS code，直接輸出三種apps: web, Android, iOS。
後來發現react-native有提供WebView component，
它相當於在app內建一個瀏覽器，可以讀取HTML, CSS, JS，
就可以用來讀取react web app bundle!
不過還是強調，
WebView這種作法並不像是使用react-native UI components有native的效能，
我稱之"偽"react-native apps。
它的好處是可以偷懶：寫好一個react web app，
不用改寫UI成為react-native UI，就能轉換成Android, iOS apps。
或許對轉換一些小web apps還頗實用。用途請自行取捨。
以下步驟在教如何把react web app轉成偽react-native apps:
(在此假設你的OS是Linux、
react-native Android開發環境已照Ref. [1]建立)
# 安裝react與react-native apps生成工具:
npm install -g create-react-app react-native
# 建立react app:
create-react-app myapp
cd myapp
# 修改bundle裡URLs的啟始路徑[2]，加入下面這行至package.json:
"homepage": "."
# 此步可考慮執行npm start驗證你的web app是否正常。
# 產生bundle:
npm run build
# 會輸出到build資料夾。
cd ..
# 建立react-native app:
react-native init AwesomeProject
cd AwesomeProject
# 產生assets資料夾:
mkdir -p android/app/src/main/assets
# react-native會把assets資料夾的檔案一並包入bundle。
# 把react的bundle所在資料夾build，連結到assets底下:
cd ..
ln -s myapp/build AwesomeProject/android/app/src/main/assets
cd AwesomeProject
# 修改index.android.js的render，使用WebView讀build/index.html:
<View>
<WebView style={{ backgroundColor: "blue", height: 200 }}
source={{uri: 'file:///android_asset/build/index.html'}}
scalesPageToFit={true} />
</View>
# 參照assets的uri要以"file:///android_asset"開頭[3]。
# 啟動Android emulator:
android avd
# 執行react-native app:
react-native run-android
# 觀查emulator有沒有啟動Android app，畫面應該跟web app一樣。
Refs:
[1]
https://facebook.github.io/react-native/docs/getting-started.html#content
[2]
https://stackoverflow.com/questions/38565538/create-react-app-css-and-js-path/
[3] https://github.com/facebook/react-native/issues/505
--
楞嚴咒(附注音)：
https://1drv.ms/1c0YbNt
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.115.73.148
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1472559745.A.991.html
... <看更多>