星云链上的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，接下来的提示语NOTE

lease install WebExtensionWallet to use bank demo 是因为还没有安装星云钱包插件给个提示（什么是星云钱包插件？文章后面会说到）
3、三个编辑框，三个按钮（save, balance，takeout）

下面是对应的布局代码：

其中我们最需要关注的有以下几点：

1、WebExtensionWallet 星云钱包插件

2、dappAddress 这个是合约地址，到时部署好了之后修改为你自己的就可以了
3、neb.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