使用Hero做一个无服务端基于区块链的跨平台应用

前几天，暴风的产品经理居然在他们产品更新里面说“杀了一个程序员祭天”。

前端（包含移动端）的攻城狮们是不是特别窝火？除了卸载暴风App，鄙视暴风公司外，同学们是不是特别想做一个东西证明要是没有“汪汪汪”，说不定我能做的更好？

但是打铁还需自身硬，你真的有这个能力独立做一个有价值的东西吗？你需要问问自己以下三个问题：

• 首先，你是否对市场需求能够把握？

• 其次，你是否有服务端资源和开发能力？

• 最后，运维全部自己搞得定？

是不是感觉还需要和可爱的“汪汪汪”继续合作？当然这是正道。

但是前端是一个神奇的行业，技术发展飞快，且创造力爆棚。除了Hero，React Native等技术实现了前端内部的统一外，Node.js也一定程度逆袭了后端开发，界面组件化后对UI的需求也变得没那么强。按照现在的趋势往下走，牛逼的前端同学们，逆袭整个互联网行业不再是个梦。历史无数次证明快速演进的事物将对缓慢演进的事物形成降维打击，就像Fintech vs 柜台，电商 vs 百货等。

闲话不多说，现在我就带着有想法的你，用11个步骤，来完成一个无服务端，基于区块链的跨平台App，并且此App无需服务器部署，不需要运维，永久在线。

（下面我们将做一个以master为中心的线下社交平台App，全部源代码见：https://github.com/hero-mobile/food-master-hub）

第一步：安装Hero

sudo npm install hero-mobile/hero-cli -g

Hero是一个跨平台的开发框架，使用这个框架之后，你只需要用JSON描述你的界面，并用JS处理一些界面逻辑，而不用关心iOS，Android，H5开发的差异以及高昂的开发成本。

第二步：使用Hero初始化一个app

hero init MasterHub cd MasterHub npm install npm start

第三步：引入web3.js

npm install web3 -save require(web3);

web3是我们进行以太坊操作的官方js客户端，是一个目前来说最简单易用的一个区块链操作工具。

第四步：引入hero-nodes

代码详见 https://github.com/hero-mobile/food-master-hub/blob/master/src/utils/heroNodes.js

Hero node是一个超级节点，节点中会包含以太坊节点，IPFS节点，torrent节点，ZeroNet节点等，Hero node在未来的Dapp中将会有很大的需求，更多类型节点可能在未来的Hero中再去完善，目前只支持以上节点。 Hero node可能会是Hero框架未来扩展的一个方向。

第五步：引入ethereum.js

代码详见 https://github.com/hero-mobile/food-master-hub/blob/master/src/utils/etherum.js

功能是查询以太坊交易数据

第六步：修改start界面

代码详见 https://github.com/hero-mobile/food-master-hub/blob/master/src/pages/start/view.js

第七步：修改start逻辑

代码详见 https://github.com/hero-mobile/food-master-hub/blob/master/src/pages/start/index.js

第八步：在src中增加home文件夹，并增加view.js和index.js

home用于显示一个帐号的活动信息，伙伴信息，以及附近的活动。

第九步：使用相同的方法增加如下页面

new-master（增加master），new-food（增加一个活动），food（一个活动页面），history（参与活动者记录），about（软件介绍）等页面。

第十步：发布软件

npm run build //打包npm run publish //发布到分布式网络

如果你看到上图

Congratulations，你的第一个分布式Dapp已经发布成功。你的App可以通过https://ipfs.io/ipfs/QmT7LT7X6x5fycGotV1k1ETLEbkYAzmsGnBJ8ZraGtRnTh 访问到。

如果你好奇为何通过固定URL访问到的的App还能称之为Dapp，其实你同样可以通过 http://hero-mobile.com:3001/ipfs/QmT7LT7X6x5fycGotV1k1ETLEbkYAzmsGnBJ8ZraGtRnTh 访问到。域名是什么是无所谓的，只要是一个Hero node或 ipfs node都可以。

你可能还有疑问，如果这个地址挂了，我还是无法访问啊，确实对于Web应用来说，如果第一次就无法访问，并且你不知道其它节点的域名，你确实无法运行起来，但是只要起来一次，所有资源就会被缓存起来，并且会自动搜索到很多的Hero node，那么即使某个节点挂了，是不会影响你使用App的。

第十一步：发布原生App

在Platforms目录中有iOS 和Android的模板，你需要修改的代码仅仅是把Appdelegate里面的urlPath修改为你的首选Host加App的Hash地址值即可，Android类同。

由于原生App的发布涉及较多的配置信息和平台的签名信息，我们目前没有做一个命令行工具帮你自动打包发布，所以这里需要一点点App开发的知识来帮你实现。

最后我们来聊聊你刚完成的这个应用 Master Hub

Master Hub是一个以Master 为中心的线下社交平台，为了将这个中心体现出来，我们将Master以Hub形式连接起来，任何人想加入Master Hub都需要在某一个Master下面点击增加，输入基础信息后支付一笔以太坊订单，你的基础信息和关系信息就永久的记录在了区块链系统里面。

加入Master Hub后，每个人都可以创建自己的活动，描述好活动内容，时间，参与门槛(eth)后，同样是提交一笔以太坊交易，那么你的活动就显示在你的首页里面了。

其它用户看到的活动详情页面，如下图：

用户想参与你这个活动，用以太坊钱包扫描二维码支付即可。

最后的最后

再说一遍本项目开源地址 https://github.com/hero-mobile/food-master-hub

Hero框架官方地址 http://github.com/dianrong/hero,

• 如果你觉得技术很酷，fork it；

• 如果你觉得Master Hub有点意思，下载下来玩一玩，从简单应用入手，理解神奇的区块链世界，若干年后，你也许会回忆，幸好Master Hub带我进入了数字货币的世界；

• 如果你觉得这个方向是对的，欢迎加入点融黑帮，我们一起用金融科技去改变世界。