如何使用Objective-C 呼叫 JavaScript - Part II 實戰篇

-

前情提要，如果我需要require其他的套件，像下面這樣，該怎麼辦？
"use strict"; 

var version = require('../lerna.json'); 
var core = require('../packages/web3-core'); 
var Eth = require('../packages/web3-eth'); 
var Net = require('../packages/web3-net'); 
var Personal = require('../packages/web3-eth-personal'); 
var Shh = require('../packages/web3-shh'); 
var Bzz = require('../packages/web3-bzz'); 

var utils = require('../packages/web3-utils');

最後找到一個方法，不知道是不是唯一，也不知道是不是最好的（歡迎有經驗的人一起分享），我使用了Browserify。就我的認知，Browserify就是把require到的檔案，全部打包到一個檔案裡，也就是你最後會有一個幾千行的 .js檔案。


首先，先安裝npm（npm就是Node.js安裝管理工具，如何安裝npm，可以參考這裏）
再來，寫一個 .js檔案，把你需要的套件require進來，然後assign給window這個物件，
// index.js "use strict" let Web3 = require('../3rd_party/web3.js-1.0.0'); window.Web3 = Web3;

切到index.js的目錄下，輸入
$ browserify index.js -o myWeb3.js


你可能會碰到幾個問題，第一個是npm module的路徑問題，這個細節我有點忘了，當時也是兵荒馬亂，所以可能要麻煩自己google一下。第二，是過程中會不斷地需要安裝其它套件，對！這是正常的，因為他要把檔案打包起來，所以有用的套件，都會需要下載。
過程中大概就是不斷的browserify index.js -o myWeb3.js 跟不斷地 npm install xxx。最後的產出就是myWeb3.js

理論上這個時候就可以直接使用myWeb3.js，不過browserify會用他自己的語法把每個 js套件包起來，像是namespace的概念，所以用JavaScriptCore時會找不到你要的函數，這部分我就沒繼續深入研究要怎麼呼叫。而且一般來說，也是會把需要的函數在拉成一個檔案，讓上層比較好呼叫，維護上也比較方便。不過，如果把所需的函數拉成一個 js檔，就又會碰到require的問題（因為要require myWeb3.js），所以後來就使用html作為中介，以下是我的html（main.html）
<html>
    <head>
        <script type="text/javascript" src="bridge/web3.js"></script>
    </head>
    <body> 
       <script type="text/javascript"> 
       function getAddress(prvkey)
       {
          try
          {   var web3 = new Web3();
              var account = web3.eth.accounts.privateKeyToAccount(prvkey);
              return account.address;
          }
          catch (e)
          {
              return e;
          }
       }
       </script>
   </body>
</html>


根據基礎篇提到，html就要使用webview，可是webview呼叫 js函數又很不方便（對我來說啦 ＸＤ），後來找到一個，兩種混一起用的方式，就是由webview 載入html，再透過webview的元件把 js抽出來成JSContext（就是JavaScriptCore的方式）
最後Obj-C的部分長這樣
// 要放在global
UIWebView* _webView=nil;

- (void)viewDidLoad {
     [super viewDidLoad];

     _webView = [[UIWebView alloc] init];
     NSURL* url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"main"
                                                                         ofType:@"html"]];
    [_webView loadRequest:[NSURLRequest requestWithURL:url]];
    JSContext* context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.
                                                     javaScriptContext"];
    JSValue* jsFunc = context[@"getAddress"];
    JSValue* ret = [jsFunc callWithArguments:@"0x997630f6ad1c0d38634a0966bdbfe23344fe250
                                               118df0f97fd00a0ad5727bbb0"];
    // 接回傳值
    NSString* ret = [ret toString];
}

小提醒：在實際狀況，不會只在viewDidLoad中呼叫JS的函數，所以context可以設為global變數，此時，_webView也需要是global的，不然context[@"getAddress"]會回傳nil，原因不知為何，這個小細節可能要注意一下。


分享大概到這邊啦！如果有更好的方式也歡迎指教~


留言

張貼留言

這個網誌中的熱門文章

What's New in Ethereum Serenity (2.0)

-
圖片
Ethereum 2.0 已經正式改名為Ethereum Serenity 原本預計在今年(2018)上線的Hybrid POS(Casper FFG)跟sharding，因為遇到一些技術上的困難，所以把Hybrid POS改成單純POS，然後因為sharding跟POS有部份技術是重疊的，所以把POS跟sharding併在一起做（本來是分成兩個team作開發） Beacon Chain 在Ethereum Serenity的規劃中，在原本的POW chain之外多一個鏈叫做 Beacon chain ，是一個POS chain。在Beacon chain中有兩種角色 proposer 跟 attester ，proposer就是產塊的人，attester是驗證的人。而在POW chain上存入32 ETH，可以成為Beacon chain上的 validator ，而validator有權利產塊(proposer)，也會有機會被選attester。此外，延續了Casper FFG finality這個概念，也就是在finality之後的狀態就是正確的狀態（不可回復），不像POW一般需要6個塊的時間才能確認交易是不會被更改的（POW的狀態確認是機率，六個塊之後有"很高的機率"是無法被改變的，而finality就像是0跟1一樣，沒有中間）。 聽到這，好像覺得很簡單，但是在實作上會遇到幾個問題，首先，怎麼決定誰是proposer誰是attester，如果亂數的隨機性不夠，就很容易被遭到操控。接下來是，每次驗證都需要做一次簽名，因為32個ETH就可以當validator/attester，每次驗證可能會有10~20幾萬的簽章（ 簽章數量的預估方法 ），驗完簽章天都黑了 ＸＤ。 ＲＮＧ 針對亂數產生（ RNG , Random Number Generator），使用 RANDAO 跟 VDF ，RANDAO是個利用經濟獎勵的機制來產生亂數，原始的設計是在smart contract上，而在Beacin chain會直接實作這個邏輯。而VDF是一個delay function，因為速度的關係，基金會打算自己開發ASIC晶片。關於這RNG之後會再寫一篇 詳細解釋 。 Signature Aggregatio...
閱讀完整內容

瑞士滑雪分享2 - 策馬特

-
圖片
本篇同 上一篇 ，只介紹滑雪資訊，關於觀光資訊，就不在這裡詳述 一樣，我們先來介紹策馬特/馬特洪峰，這裡一樣是分兩區，Zermatt跟International，如下圖，左邊紅色框是 Zermatt ，而 International 是Zermatt+Italy，也就是 全山卷 ，在Zermatt賣的就這兩種票 在這我一樣只有滑兩天，就只買了Zermatt的票，所以不要再問我買International需要不要護照之類的問題，我不知道阿~~ XD 我住在Zermatt，這個鎮還滿大的，所以在挑住宿的時候需要注意一下，Zermatt的住宿非常的貴，比Grindelwald貴上許多，所以也有人選擇住下面的小鎮，再坐火車到Zermatt，至於住哪個小鎮或是便宜多少，我沒有研究，就不知道了。Zermatt火車站一出來，就有往山上的小火車，所以住下面的小鎮要上山滑雪，也算滿方便的。 Zermatt雪場分三區，最左邊Rothorn，中間Gornergrat，最右邊Matterhorn Glacier Paradise。 Rothorn ：要搭小火車上山，滿特別的，詳細介紹可參考 這篇網誌 ，離Zermatt火車站約10分鐘的路程。 Gornergrat ：一出火車站，對面就是車站了，小火車直接拉到山頂，相當方便 Gornergrat車站 Matterhorn Glacier Paradise ：上山纜車離市區相當遠，走路大約要20-25分鐘（有接駁巴士），需要轉2次纜車才能到山頂，要花不少時間，山頂非常冷，滑道很平緩，又冷又不好玩 三座山基本上可以互通，不需要回到小鎮再上山。這裡高度大都在2000-3000公尺，所以雪況比少女峰好很多，不過相當多的平路，對snowborders相當不友善....。 完整的地圖可參考： Zermatt ski map 雪票價格如下，這裡的雪票是用磁卡，所以會有5CHF的押金，最後記得去退（像我就忘了...@@） Zermatt/International ski pass (2014/15) ： Zermatt International (Zermatt - Cervinia) Days Adults You...
閱讀完整內容

動手實做零知識 - circom

-
圖片
零知識證明在過去一年越來越廣為人知，去年(2019)也有越來越多的專案是基於零知識證明。前年底提出的 zk rollup，目前由  Matter Labs  在開發，Matter Labs更在上個月（2019/12）發表了  ZK Sync ，解決了因為產生證明（proof）而延伸的延遲問題。此外  Iden3  跟 ConsenSys  也有 zk rollup 的專案。在以太坊研究論壇有基於 zk rollup 所衍生的 匿名 zk rollup 。 Semaphore 是一個基於零知識證明的一個訊號系統，發送者可以不揭露身份的狀況下廣播任何訊息(an arbitrary string)。 Semaphorejs 延續 Semaphore 的核心概念，並將整個概念更加完整化，從前端網頁到後端服務。這兩年才發表的 zk-STARKs，也在去年年初跟 0x 合作，推出基於 zk-STARKs 的 去中心化交易所 。 在技術上，去年下半年有新的論文，使用 DARK compiler 可以讓 SNARKs 達到公開性（Transparent）。還有 MARLIN, SONIC, PLONK 等可通用且可更新的可信設定（trusted setup）。STARKs 的 FRI 驗證方式也默默地跟 SNARKs 做結合。（東西越來越多，根本看不完 QQ） 這篇文章沒有要談高深的技術，只會介紹實做所需的知識。這篇會使用到 Iden3 所開發語言  circom  來幫助寫算數迴路 。藉由 circom，可以更輕鬆地實做零知識證明的程式。但在開始之前，先介紹一些基本觀念。 算數迴路 在實做零知識程式跟一般撰寫程式不同，需要先把問題轉成迴路，才去執行（實際上是把 問題 轉成 多項式 再轉成 迴路 ）。舉例來說，一個多項式 $x^3 + x +5$，會轉成像這樣的迴路 sym_1 = x * x // sym_1 = x^2 sym_2 = sym_1 * x // sym_2 = x^3 y = sym_2 + x // y = x^3 + x ~out = y + 5 ...
閱讀完整內容