星云链上的Dapp开发你会了么?如果还是不会那就再看看这个 0 回复 47 查看 打印 上一主题 下一主题

bank demo 是一个基于星云链智能合约编写的的Dapp,它的功能包括存储,取出,查询功能,而星云链是全球首个主网上线的区块链3.0公链,所有代码全部重新构建,比起以太坊更清晰,更简练,对开发者极度友好,智能合约语言基于当下最流行的javascript,此demo可以作为刚刚接触NAS 想开发Dapp的开发者作为学习参考,下面我就一步步带大家去了解怎样做出一个在星云链上的Dapp
https://xingyun.io/dapp/nasbank/
制作这个DApp,我们分四个步骤:
1. 编写Web页面。
2. JavaScript或者TypeScript 编写几十行代码的智能合约。
3. 部署智能合约
4. 完成Web页面与智能合约的交互。
首先看下目录结构 
img 放置图标
lib 放库
smartContract 放置智能合约
第一步,Web页面制作。
从这个页面我们可以获取到的信息有以下信息:
1、页面的背景
2、顶部的名称,logo,接下来的提示语NOTElease install WebExtensionWallet to use bank demo 是因为还没有安装星云钱包插件给个提示(什么是星云钱包插件?文章后面会说到)
3、三个编辑框 ,三个按钮 (save, balancetakeout
下面是对应的布局代码:
其中我们最需要关注的有以下几点:
1WebExtensionWallet 星云钱包插件
2dappAddress 这个是合约地址,到时部署好了之后修改为你自己的就可以了
3neb.js 下面会说到 调用智能合约时用到
第二步,编写智能合约
第三部,部署智能合约
如果是第一次部署的话,首先需要到这个网站 https://github.com/nebulasio/web-wallet NAS web 钱包代码下载下来,然后 打开 index.html
然后看到右上角有个环境切换的,现在我们是部署到测试环境,那就选择Testnet ,如果需要部署到正式环境的则选择Mainnet
然后按照下面的步骤
如果还没有钱包则可以先去创建一个钱包
如果钱包里面还没有NAS 可以扫描文章底部的二维码注册,注册完成之后点击链接https://testnet.nebulas.io/claim/ 进行操作
当你的账户地址上有NAS 后点击提交 之后生成合约地址 然后修改第一步中的dappAddress 的值就可以了
第四步 、完成Web页面与智能合约交互
为了解决这个问题,星云官方提供了完整的API
https://github.com/nebulasio/neb.js
提供用户对于已经部署好的合约进行调用的SDK
此外,社区小伙伴为方便在Web页面进行交互,提供了浏览器插件。
项目的地址是:https://github.com/ChengOrangeJu/WebExtensionWallet 。只需要在Web页面中向浏览器插件POST message 即可唤起插件的内置功能,调用上文已经部署的智能合约中的功能函数,完成Web端与智能合约的交互。
DApp网页地址:https://xingyun.io/dapp/nasbank/,欢迎大家上来测试。
Chrome 浏览器打开,首先我们需要给浏览器添加扩展插件,安装星云钱包插件
首先下载点击链接去下载 https://github.com/ChengOrangeJu/WebExtensionWallet
下载完成之后解压 chrome浏览器中找到扩展程序---- 点击已解压的扩展程序
然后就会出现图中extensionWallet 这个开启,然后刷新主页面NOTElease install WebExtensionWallet to use bank 这个提示不会出现了
这样一个Dapp开发就算完成了,是不是很简单
2018年真是一个可以让开发者爆富的机会,就看你去不去珍惜如果想珍惜那就赶紧行动起来吧!仅需Javascript和一杯下午茶的时间,您就可以开发属于您的第一个DApp,这不是你爆富的机会么?不说了,就是干 干 干
扫描下面的二维码注册

你也可以加入星云激励计划DAPP技术开发支持群,如二维码过期,请加群主微信muma5623

(扫码进群获第一手开发资料+技术大神指导)
星云粉丝论坛http://nasfans.io

阅读更多

没有更多推荐了,返回首页