五一大礼包：手把手教你一小时开发DApp，千万奖金等你拿

昨日，星云官方公布了第一季星云激励计划，此次5月7日正式开始的激励计划总奖金达到46万NAS（按照4月28日价格，约2,500万人民币），鼓励更多开发者在星云链主网上持续开发更多更好的去中心化应用（DApp）。

此次计划参加门槛很低，只要会写Javascript，愿意学习DApp开发，成功提交DApp就100%可以拿到奖励（约等值上万人民币），月度大奖等值百万人民币且上不封顶（了解详情）。

“带薪”学区块链DApp开发，如此利好，激不激动？动不动心？

什么？不会？不知道从哪里下手？

不知道怎样的DApp才算符合标准？

没关系，此前主网上线后，已经有爱好者开发出了符合这次标准的DApp。为了让大家更好地理解此次DApp开发的评选标准，并且帮助各位首次进行DApp开发的新手快速入门，我们征得开发者同意，转载了这个实例。

一小时入门，五一在家学起来啦？

项目实例

这次DApp选取了一个简单的场景：建立一个用户自己的词典——Super Dictionary。用户能够用它在区块链上查询词条释义，并抢先注册新的词条。

代码下载地址：

https://github.com/15010159959/super-dictionary

制作这个简单的DApp，我们只需三个步骤：

1 制作一个有文本框和按钮的Web页面。

2 制作一个只需要用JavaScript编写几十行代码的智能合约。

3 完成Web页面与智能合约的交互。

第一步，Web页面制作。

过程略过，简单讲一下交互方式。

网页的交互方式很简单：

（1）用户在输入框中输入要查询的词条。

（2）如果查询到结果，则返回该词条的详细内容（图1）。

（3）如果没有查询到，则允许用户添加释义（图2）。

图1

图2

第二步，编写智能合约

Super Dictionary智能合约所需要完成的业务逻辑并不复杂，尤其当开发语言是JavaScript的时候，只需几十行代码就可以完成，简单快捷。

本例中所涉及到的智能合约大体包括三个部分：

（1）词条数据结构

（2）查询词条的函数

（3）新增词条的函数

（1）编写词条数据结构

在这个项目的智能合约中，我们为每一个词条定义一个结构：包括作者(author)、词条名（key）、词条内容（value），如下图所示：

（2）设置查询词条 & 新增词条：

星云链的智能合约运行环境内置了存储对象LocalContractStorage，可以存储数字，字符串，JavaScript对象，存储数据只能在智能合约内使用，其他合约不能读取存储的内容。所以查询词条就可以简化成了类似在map上对词条key值进行get操作。新增词条则演化为往map中进行put操作。

在智能合约写好之后，需要将合约部署到Nebulas上进行后续调用。部署的方式有很多种，比较推荐的方式是使用星云官方WebWallet的合约部署功能。在Contract/Deploy选项内，你可以很方便的把你的合约部署在星云链上，在右上角可以选择部署到测试网或者主网。如下图所示：

星云钱包地址：

https://github.com/nebulasio/web-wallet

星云钱包教程地址：

https://medium.com/nebulasio/creating-a-nas-wallet-9d01b5fa2df6

（3）Web页面与智能合约交互

Web页面制作完成，智能合约完成部署之后，我们需要让Web页面能够方便的调用智能合约中的函数。

为了解决这个问题，星云官方提供了完整的API

https://github.com/nebulasio/neb.js

提供用户对于已经部署好的合约进行调用的SDK。

此外，社区小伙伴为方便在Web页面进行交互，提供了浏览器插件。

项目的地址是：

https://github.com/ChengOrangeJu/WebExtensionWallet。只需要在Web页面中向浏览器插件POST message 即可唤起插件的内置功能，调用上文已经部署的智能合约中的功能函数，完成Web端与智能合约的交互。

如：在监听按钮点击的函数内添加如下代码，即可调用插件钱包。

下面是这个插件与星云链交易确认/等待结果/发布成功三个步骤的截图。

这样子一个完整的DApp开发就算完成啦！

是不是很简单？赶紧操作起来啦。

补充材料：

如何开发一个DApp应用（英文）：

https://medium.com/nebulasio/how-to-build-a-dapp-on-nebulas-part-1-da4eaf9399bc