BTC-E美元实时行情Bitstamp美元实时行情BTC-E莱特币实时行情比特币中国实时行情
LBGAME

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

作者:网文 来源:转载 日期:2017-9-2 13:49:59 人气: 标签:区块链 【打印】

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


前端(包含移动端)的攻城狮们是不是特别窝火?除了卸载暴风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带我进入了数字货币的世界;

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

[下一篇]没有更新的文章了!
返回顶部】【关闭窗口
【读完这篇文章后,可否发表您的感受?】
0
0
0
0
0
0
0
0
本文网址:
安全联盟站长平台 360网站安全平台