产品战略专家梁宁确认出席AICon北京站,分享AI时代下的商业逻辑与产品需求 了解详情
写点什么

原来,React Native 也能搭上区块链!

  • 2018-02-15
  • 本文字数:3384 字

    阅读完需:约 11 分钟

根据 dApp 白皮书,相对于后端代码运行在集中的服务器的 App 而言,dApp的后台代码基本上运行在一个去中心化的点对点网络。

区块链天然且透明的不可更改性和去中心化,使得开发许多令人惊叹的使用案例成为可能,例如自治组织、销售、社交网络、保险公司以及成百上千人之间的游戏。


这是一个区块链应用的存在性证明的一个例子。

在本文中,我将阐述如何使用 React Native 来制作一个跨平台的移动 dApp,用于将你最爱的密码朋克(cryptopunks)进行排名。


我对这个问题困扰不已。

为什么是密码朋克?密码朋克是一个了不起的项目,神一样的存在。如果想了解更多信息,可以查看下面的 reddit 中的博客


图片来源: https://blockgeeks.com/

技术栈

在我们了解代码之前,理解如何将它分解是非常重要的。
- React Native 是一个由 Facebook 开发的框架,允许你使用 JavaScript 和 React 构建跨平台的移动原生 App。

  • Expo 是一个工具集,由于它包括了一系列开箱即用的原生 API,例如照像机等,因此使得上手构建 React Native 项目变得非常简单。
  • Web3 是兼容 Ethereum 的 JavaScript API ,实现了用于 node.js 和浏览器的通用 JSON RPC 规范。
  • Truffle 是一个 Ethereum 开发环境,提供了 ganache-core 等非常适合上手 React Native 开发的一系列工具。ganache-core 在本地模拟了一个 Ethereum 网络。
  • 其它值得一提的比较酷的库有 react-navigation、victory-native 和 react-antive-star-rating。

React Native 上的 Ethereum 区块链

在 React Native App 上运行 web3.js JavaScript API 有许多公开的问题,而且目前看起来还没有切实的解决方案

这是因为React Native 使用 JavaScriptCore 执行环境,并且依赖于针对 React Native App 的 Node 标准库 API (例如 buffer、 crypto 或者 stream)是如何模拟或者实现的,这可能需要链接到一些原生的依赖;因此,你也许需要使用expo App ,因为它有非常详细的样例项目,例如 react-nativify ,在 React Native 环境引入了 Node API。

因此,当我寻找可选方案并且发现了 expo 上的功能请求之后,作为一种解决方案,我构建了一个针对React Native 的babel preset ,幕后使用了 crypto-browserify 和一个非常小的 randombytes (随机字节)的纯 JavaScript 实现。

但是要注意,JavaScript 的Math.random()函数可能会被看作是一个加密学上来讲可预测的随机数生成器,但我现在并不担心这点,因为 ethereumjs-tx 不需要用它来为交易签名。

因此,投票交易不是免费的吗?

简单来说,是的,投票交易不是免费的。

主网(主要的Ethereum 网络)上,所有的交易都是以实际的ether 或gas(译注:以太坊的两种计价单位)来估价的,但是我的实验性App 部署在Testnet Ropsten 上。这是一个用于开发的实际区块链场景,每秒每笔交易只允许 5 次投票。感谢 faucet 免费提供了用于测试的 ether :)

在这个简单的实现中,每个 Vote/Star 差不多值 0.0012 Ethers(即当天的 1.31 美元)。那一点也不便宜,但是如果每次投票消耗的 gas 减少,费用可能会被提高。

在那种情况下的风险是,矿工可能花费数小时或数天来处理那么低额的交易。

关于如何通过在区块链中使用 soft forks(软分支)、LN、side chains(副链)或者 micro transactions(微交易)来优化这个问题,有许多持续的讨论。

Web3 供应商困境

交易是一个用于修改区块链状态的指令集。为了对 Ethereum 交易进行签名并且消费 gas 和实际的 ethers,需要一个公开的地址和一个私钥,或者一个至少配置有一个没有锁定的币库账号的 HD 钱包来为投票交易进行支付。

有许多不同的配置 web3 供应商的方法来访问 Web 上的 dApps:通过 MetaMask Chrome Extension 注入了一个 ethereum 特制浏览器,例如 Mist ;或者是通过创建一个本地实例,然后用代码给账号充值。

问题是,没有这样针对 React Native 的浏览器,并且 web3 不能注入在 App 中,因此,在这次试验中,我最终用 truffle-hdwallet-provider 配置了一个币库。

另一个有效选择是使用 MetaMask web3-provider-engine ,它允许你通过一个使用一个纯JavaScript 的子供应商来为交易签名,但是情况实际上相同,因为truffle-hdwallet-provider 幕后使用了一种相似的机制。

在上述两种意见中,账户都是编码在移动App 中的,这在实际的生产环境可能是不安全的,而且缺乏灵活性。

询问用户的公玥和私钥来为交易签名和为投票进行支付可能是一种简单的替代方案,但是这种方案因为超级不安全而被废弃了。

或者使用 uport 来注册投票者的识别码,但是我还不确定是否支持React Native

复制代码
import Contract from 'truffle-contract';
import VotingArtifact from '../build/contracts/Voting.json';
import Web3 from 'web3';
function Star(candidate) {
const Voting = Contract(VotingArtifact);
var web3Provided;
// Supports Metamask and Mist, and other wallets that provide 'web3'.
if (typeof web3 !== 'undefined') {
// Injected web3 detected.
// Use the Mist/wallet provider.
// eslint-disable-next-line
web3Provided = new Web3(web3.currentProvider);
} else {
// No web3 instance injected, using Local web3.
web3Provided = new Web3(AnySupportedProvidedWithHardcodedAccount);
}
Voting.setProvider(web3Provided.currentProvider);
web3Provided.eth.getAccounts((error, result) => {
Voting.deployed().then(contractInstance => {
contractInstance.voteForCandidate(candidate, {
// configure the priority of the vote
gas: 140000,
// ***
// In a real dapp the coinbase should be provided by your wallet.
// ***
from: result[0],
});
});
});
}

SimpleStarProviderDilemma.js hosted with ❤ by GitHub查看原文

react-native-geth 项目实现了一个轻量的客户端 Ethereum 节点,因此我认为它有望成为可能产生的 React Native HD 钱包的一个关键依赖。通过这种 React Native HD 钱包,可以将 web3 注入到任何给定的 App 中。绝对雄心勃勃。

智能合约

我用 Solidity 语言创建了一个简单的投票合约,使用 truffle-contract 作为一种抽象接口,以便在移动 dApp 中使用它。

合约是不可更改的。一旦合约被创建并部署到区块链上,就不能改变、撤回或者修改。

Voting 有一个构造器,这个构造器用一个 cryptopunks 数组初始化,并且基于他们的主要附属特征给他们分配了一个识别符名称。

如果你对合约感到好奇,它就部署在 Ropsten Testnet 网络上,可以随时查看。

想要更多关于我是如何部署合约的信息,请查看后续内容

可能的提升

  • 选举中,你拥有的份额或代币越多,你得到的票数就越多。这可以通过向投票者提供特定数额的 ERC20 代币来实现。

这可能不适用于密码朋克,但是值得考虑。

示例


思考

如今尽管区块链带来了大量的使用案例,但是大公司通常没有在移动App 上采用区块链。因为所有的ICOs 都是基于Web 的。

来自 cipherbrowser status.im 的人们正在创作移动 dApp 浏览器,这是一件了不起的工作。我想他们已经完成了那一步。

我支持去中心化的跨平台移动 App 的想法。随着时间推移,React Native 越来越成熟和稳定,并且被大公司采用来开发真正伟大的移动 Apps(事实上,status.im 移动 App 就是基于 React Native)。并且我十分确信,不久就可以在 React Native 中使用区块链来构建真正的移动 dApp 了。

个人意见,仅供参考。谢谢阅读。

鸣谢

Mahesh Murthy 在 Medium 上撰写的非常优秀的文章给我很大启发,帮助我顺利创建了一个简单的智能投票合约。

react-native-ios-concensus react-native-web3-example react-native-box ,这些开源项目的目标相似,只是方案有所不同,都给我很大启发。

感谢我的姐姐和 @pittorrr 帮助我完成了本文。并且一如既往地感谢 @gisela.d.muro 鼓励我撰写本文。

引用

查看英文原文: Bringing the blockchain to React Native

感谢覃云对本文的审校。

2018-02-15 17:122966

评论

发布
暂无评论
发现更多内容

RTE 大会报名丨智能编解码和 AI 生成视频 ,RTE2024 技术专场第五弹!

声网

哈银消费金融合规经营,持续稳健发展

Geek_2d6073

电商发展新趋势:阿里巴巴商品详情API返回值的深度利用

技术冰糖葫芦

API Gateway API 接口 API 测试 API 优先

企业级移动门户的多样化选择:为数字化转型赋能

WorkPlus

火山引擎携手领克汽车和英特尔,以技术+场景推动汽车智能体行业应用创新

新消费日报

出海正当时,博联智能携手火山引擎加速全球化布局

新消费日报

奖金高达 110 万元,Spatial Joy 2024 全球 AR 应用开发大赛启动

声网

企业级移动应用管理平台哪个好?

WorkPlus

XSKY 受邀华为全联接大会,共创鲲鹏原生全闪存储

XSKY星辰天合

鲲鹏;全闪 星飞

阿里云 SAE Web:百毫秒高弹性的实时事件中心的架构和挑战

阿里巴巴云原生

阿里云 Serverless 云原生

700+开发者齐聚5城共探鸿蒙原生应用Codelabs

最新动态

AI西游记:企业如何闯过大模型的「火焰山」?

脑极体

AI

加入极限科技(INFINI Labs),成为搜索运维工程师!

极限实验室

招聘 搜索引擎运维

Chrome Extension 开发中的 Tab 操作与实践

FunTester

Pencils Protocol生态经济全面运转,持续通缩的DAPP潜力颇大

股市老人

免费赠书、多样字体、丰富音色,华为阅读带用户多读书、读好书

最新动态

Star 3w+,向更安全、更泛化、更云原生的 Nacos3.0 演进

阿里巴巴云原生

阿里云 云原生 nacos

助力数智化升级,XSKY 受邀出席武汉制造业论坛

XSKY星辰天合

智能制造 软件定义存储

求解智能韧性,华为用三道方程写下答案

脑极体

通信

Pencils Protocol 全面推动市场,低流通的 DAPP 将持续通缩

大瞿科技

Pencils Protocol 全面推动市场,低流通的 DAPP 将持续通缩

加密眼界

“你好BOE”重磅亮相首届上海国际光影节 打造“艺术x科技”顶级影像盛宴

爱极客侠

华为云LTS日志上报至观测云最佳实践

观测云

华为云 LTS

即时通讯软件:推动企业沟通变革的数字化利器

WorkPlus

《Programming from the Ground Up》阅读笔记:p117-p146

codists

汇编 assembly 编程人

携手长江存储,构建高性能分布式存储

XSKY星辰天合

Pencils Protocol生态经济全面运转,持续通缩的DAPP潜力颇大

BlockChain先知

纯CSS实现有趣emoji切换开关

南城FE

CSS 前端

iLogtail 进化论:重塑可观测采集的技术边界

阿里巴巴云原生

阿里云 云原生 iLogtail

Pencils Protocol 全面推动市场,低流通的 DAPP 将持续通缩

石头财经

原来,React Native也能搭上区块链!_语言 & 开发_locropulenton_InfoQ精选文章