区块链应用：NAS星云链入门之从零开发第一个DAPP

超、凢脫俗 2022-05-24 10:42 278阅读 0赞

> 无论你是否想了解NAS，只要你想了解区块链或者DAPP都可以看这篇文章，因为很多概念是一样的。

应该有很多小伙伴和我一样，一直想去入手学习区块链，但是总无从下手，有些概念感觉理解了，有感觉没理解。其实这都是“没实践”的锅。

所谓看十遍不如想一遍，想一遍不如做一遍。这不最近星云链nebulas正有开发者激励计划，每提交一个应用都可以获得奖励，所以正好借此机会，开发第一个DAPP，并且理解所谓的DAPP到底是一个什么样的东西。

这篇文章几乎是DAPP开发零基础的踩坑经历，记录下来，勉强对零基础的同学可以成为教程~

> 如果你看了本篇教程并且开发了你自己的DAPP，可以[**点击这里注册NAS **][NAS]  
> 用我的推广链接提交，这样你提交的时候我会得到另外一部分奖励，作为对我写作的激励~

在开始开发之前，需要进行一系列的准备操作。包括钱包的制备，环境的搭建等等。这里对各种概念，我尽量以通俗易懂的话来描述，因为我也是小白，可能会因此描述的不够准确，所以欢迎大家拍砖讨论。

## 注册钱包 ##

作为开发的第一步，首先肯定是需要申请一个钱包。

这里的钱包你可以想象成你显示世界的钱包。里面存放着你的大洋。现实生活中，你的钱包在你手里，所以别人拿不走，再数字生活中，你需要有一个密码来解锁你的钱包，当你的密码丢失的时候，就等于你的钱包丢失，无法找回，并且造成财产丢失。

首先在GitHub上面，把官方web钱包clone下来：[https://github.com/nebulasio/web-wallet][https_github.com_nebulasio_web-wallet]

其次打开index.html文件

![16351e72d4e8723a_w_218_h_273_f_png_s_19107][]

这样你就打开了web版的钱包，输入你想要的密码(一定不能忘记的)，点击新建钱包，其次点击下载密码库文件，将钱包文件保存在本地(一定不能丢失),此时生成了一个以n1开头的文件：

![16351e97090f9250_w_393_h_25_f_png_s_6276][]

这个文件的名称就是你的钱包地址。 任何人有了你的钱包地址，就可以与你发生 交易，意思就是别人可以向你的钱包里面转账。

此时点击钱包信息，上传你的钱包并且解锁，可以看到你的账户的当前信息。期中包括你的余额等资料。

![16351ec134a6b956_w_1162_h_1202_f_png_s_121077][]

此时你已经注册了你的一个钱包，完成了第一部准备。

接下来进行下一步准备，那就是领取测试网的测试币。在[https://testnet.nebulas.io/claim/][https_testnet.nebulas.io_claim]每天可以领取1NAS的测试币，注意这个币领取是在测试网，与主网没有任何关系。 主网和测试网的意思你可以理解为两个不同的链，事实上区块链本身就是数据库，其实就是主网和测试网是两个不同的数据库的数据，测试网的数据只用来测试不产生实际价值。

领取完毕之后，再打开钱包，在钱包右上角可以切换主网和测试网，这时切换到测试网。   
![16351efa97d5ed3e_w_638_h_492_f_png_s_33409][]   
查询钱包余额，发现已经领取完毕(如果没有显示成功，请耐心等待，区块确认有延迟，意思是把数据写入区块链里，需要等待各个区块确认该数据有效安全，才可以将数据写入区块链，所以会有延迟)

你已经成功领取了第一个NAS，接下来你将会用测试的NAS来部署测试你的智能合约。

## 编写部署智能合约 ##

在开始这部分之前，先来解释一些如何理解智能合约，或者说如何理解一个DAPP的运作原理。

智能合约简单的白话来讲，就是一段存储在区块链上，运行在区块链代码执行引擎的一个代码片。这部分的代码，提供给DAPP前端一些必要的接口，用来存储或者查询数据。你可以理解为：智能合约就是后端，提供接口的。他所用的数据库就是区块链本身。

智能合约貌似理解了，那么区块链本身是数据库如何理解呢？

区块链(block-chain)，顾名思义，是以区块形成的链表，所有数据保存在称为“区块”的东西上，每个区块的大小有限，所有用链表把他们串联起来，如图：

![16351feaa3c3112e_w_1012_h_756_f_png_s_44310][]

这样就应该很好理解了，那么说完了后端和数据库，是不是就差前端了？

一个DAPP的前端，可以是任何形式的，比如WEB版，比如Android版，比如iOS版，但是因为市面上大多数区块链开发都属于前期，官方只提供了WEB版的sdk来接入区块链，所以目前一般的DAPP是以WEB版为主，毕竟跨平台。

那么接下来，我们来开始编辑我们的智能合约，也就是所谓的后台。此部分参考官方dictionary的demo进行修改。

这里假设我们要做一个名为“小小公开信”的DAPP，主要的功能是任何区块链上的用户都可以发表一篇标题不重复的公开信，如果标题被占用，就只能查看这篇公开信。

首先新建一个js文件，编写我们所需要的实体，比如一公开信，他应该有标题，内容，以及作者。

![1635205dc674155f_w_650_h_412_f_png_s_68811][]   
其次，我们应该可以有权限访问我们自己智能合约的存储空间，所以根据官方的API来创建存储空间：

![163520819d26da04_w_864_h_308_f_png_s_60198][]

这里的数据是以kep-value形式存储的。相信大家很容易理解。

接下来，只需要再编写两个函数，一个是存储公开信，一个是查询公开信，逻辑比较简单，直接贴代码：

![163520a9e6d51664_w_960_h_1042_f_png_s_176341][]

这样，我们就完成了一个简单的智能合约。

## 部署智能合约 ##

还记得你刚才领取的测试网的1枚NAS吗，他开始派上用场了。要知道，把我们的代码部署到链上可不是免费的，要不然白白浪费资源谁都不愿意干啊，所以我们需要支付一定量的GAS，只要是交易，或者理解为向区块链这个数据库写入数据，就需要支付GAS，GAS是NAS的一个计量单位（当然首创在ETH中）。为什么需要GAS呢，其中除了为了保证运行的代码不是无价值的，还有一个原因是要防止有人恶意发布代码，比如写一个死循环。

现在，打开你的钱包，点击合约，再点击部署，把你刚才的智能合约代码复制到合约代码里面，之后解锁钱包,点击测试，发现没有返回错误，就可以点击提交部署：

![16352121e18ab64c_w_1174_h_1088_f_png_s_90499][]  
部署成功之后，会告诉你交易的hash以及合约地址，一定要好好保存起来，否则目前会丢失（好像官方钱包还没提供查询历史交易的功能）

![1635212d3f7b3f35_w_1178_h_622_f_png_s_80935][]

这里合约地址就是你刚才部署代码的地址，每个智能合约都有一个合约地址，通过合约地址以及支付一些GAS，就可以调用合约的代码。

## 测试智能合约 ##

点击钱包的执行，此时我们测试一下写入一封公开信，这里函数写合约定义的

save()   
参数传入：   
\[“给初学者的一封公开信”,”大家持之以恒不断努力，终会成功”\]   
目的地址写刚才的合约地址如图：

![16352174830ac795_w_2304_h_1142_f_png_s_199297][]

点击测试，发现没有错误，则提交。   
等待区块确认之后，我们再来查询一下，刚才的数据有没有提交成功：

![1635251bda4bd6a3_w_2282_h_862_f_png_s_124661][]

点击测试，可以看到结果：

![163525245b59b997_w_1130_h_488_f_png_s_80035][]

成功把我们的公开信返回了。至此合约部署完毕。

## 开发前端页面 ##

既然我们的智能合约部署好了，就说明我们拥有一个数据库为区块链的后台服务器了。现在只需要编写一个前端，展示给用户使用就可以了。

官方提供了js版的api，可以让浏览器接入区块链获取数据，sdk地址如下：   
[https://github.com/nebulasio/neb.js][https_github.com_nebulasio_neb.js]

首先把项目clone下来：

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

*  1
 *  2

然后，需要用到一个打包工具叫做gulp

所以使用npm安装：

npm install -g gulp

*  1

安装完毕后，运行glup打包

打包完毕后，会在项目文件夹下生成一个/dist的文件夹，把这个文件夹复制到我们的工作目录，作为文件依赖使用。

因为笔者没有接触过前端开发，所以这里前端选择bootstrap+jQuery，因为他们对新手很友好，零基础即可快速上手。

首先在html文件里，引入需要的依赖文件：

*  1
 *  2
 *  3
 *  4
 *  5

然后编写前端样式，这里的前端比较简单，提供一个搜索框，一个展示框，一个录入框：

![1635318d11ba08e5_w_2392_h_962_f_png_s_93184][]

当用户输入信件名称的时候，调用neb的接口，来获取数据，根据回调来展示数据：

![1635319e4c85442d_w_818_h_745_f_png_s_147008][]

比如，此时我搜索一篇文章，名为《给初学者的一封公开信》，反馈如下：

![163531cfa61c2fd2_w_2306_h_602_f_png_s_105034][]

这样代表，已经查询到了内容。接下来来完成提交内容的部分。

此时根据nebpay的api，可以调用起chrome钱包插件进行支付：

![163531dcc120147b_w_769_h_278_f_png_s_58096][]

其中nebPay是根据官方示例拷贝下来的文件。

*  1
 *  2

这个时候，编辑一封公开信，点击提交，即可弹出钱包页面进行GAS支付：

![163531f6ab65d937_w_1220_h_1336_f_png_s_194879][]

等提交完毕，即可查询到你写的公开信的内容。

如果你点击没有反应，那么说明你没有安装chrome插件的钱包，点击这里安装[https://github.com/ChengOrangeJu/WebExtensionWallet][https_github.com_ChengOrangeJu_WebExtensionWallet]

如此一来遍大功告成！

因为是静态网页，所以直接部署到你的服务器上，让其他用户访问即可。

当你开发部署完毕，即可去官网提交DAPP获取激励大奖~~

如果本文对你有帮助，请点击喜欢并且扩散~~

本文中DAPP已提交，并且部署以及开源

应用地址是：[http://androidwing.net/nas-dapps/theletter/][http_androidwing.net_nas-dapps_theletter]

项目地址是：[https://github.com/githubwing/TheLetter][https_github.com_githubwing_TheLetter]

[NAS]: http://incentive.nebulas.io/cn/signup.html?invite=l21Zv
[https_github.com_nebulasio_web-wallet]: https://github.com/nebulasio/web-wallet
[16351e72d4e8723a_w_218_h_273_f_png_s_19107]: https://user-gold-cdn.xitu.io/2018/5/12/16351e72d4e8723a?w=218&h=273&f=png&s=19107
[16351e97090f9250_w_393_h_25_f_png_s_6276]: https://user-gold-cdn.xitu.io/2018/5/12/16351e97090f9250?w=393&h=25&f=png&s=6276
[16351ec134a6b956_w_1162_h_1202_f_png_s_121077]: https://user-gold-cdn.xitu.io/2018/5/12/16351ec134a6b956?w=1162&h=1202&f=png&s=121077
[https_testnet.nebulas.io_claim]: https://testnet.nebulas.io/claim/
[16351efa97d5ed3e_w_638_h_492_f_png_s_33409]: https://user-gold-cdn.xitu.io/2018/5/12/16351efa97d5ed3e?w=638&h=492&f=png&s=33409
[16351feaa3c3112e_w_1012_h_756_f_png_s_44310]: https://user-gold-cdn.xitu.io/2018/5/12/16351feaa3c3112e?w=1012&h=756&f=png&s=44310
[1635205dc674155f_w_650_h_412_f_png_s_68811]: https://user-gold-cdn.xitu.io/2018/5/12/1635205dc674155f?w=650&h=412&f=png&s=68811
[163520819d26da04_w_864_h_308_f_png_s_60198]: https://user-gold-cdn.xitu.io/2018/5/12/163520819d26da04?w=864&h=308&f=png&s=60198
[163520a9e6d51664_w_960_h_1042_f_png_s_176341]: https://user-gold-cdn.xitu.io/2018/5/12/163520a9e6d51664?w=960&h=1042&f=png&s=176341
[16352121e18ab64c_w_1174_h_1088_f_png_s_90499]: https://user-gold-cdn.xitu.io/2018/5/12/16352121e18ab64c?w=1174&h=1088&f=png&s=90499
[1635212d3f7b3f35_w_1178_h_622_f_png_s_80935]: https://user-gold-cdn.xitu.io/2018/5/12/1635212d3f7b3f35?w=1178&h=622&f=png&s=80935
[16352174830ac795_w_2304_h_1142_f_png_s_199297]: https://user-gold-cdn.xitu.io/2018/5/12/16352174830ac795?w=2304&h=1142&f=png&s=199297
[1635251bda4bd6a3_w_2282_h_862_f_png_s_124661]: https://user-gold-cdn.xitu.io/2018/5/12/1635251bda4bd6a3?w=2282&h=862&f=png&s=124661
[163525245b59b997_w_1130_h_488_f_png_s_80035]: https://user-gold-cdn.xitu.io/2018/5/12/163525245b59b997?w=1130&h=488&f=png&s=80035
[https_github.com_nebulasio_neb.js]: https://github.com/nebulasio/neb.js
[1635318d11ba08e5_w_2392_h_962_f_png_s_93184]: https://user-gold-cdn.xitu.io/2018/5/12/1635318d11ba08e5?w=2392&h=962&f=png&s=93184
[1635319e4c85442d_w_818_h_745_f_png_s_147008]: https://user-gold-cdn.xitu.io/2018/5/12/1635319e4c85442d?w=818&h=745&f=png&s=147008
[163531cfa61c2fd2_w_2306_h_602_f_png_s_105034]: https://user-gold-cdn.xitu.io/2018/5/12/163531cfa61c2fd2?w=2306&h=602&f=png&s=105034
[163531dcc120147b_w_769_h_278_f_png_s_58096]: https://user-gold-cdn.xitu.io/2018/5/12/163531dcc120147b?w=769&h=278&f=png&s=58096
[163531f6ab65d937_w_1220_h_1336_f_png_s_194879]: https://user-gold-cdn.xitu.io/2018/5/12/163531f6ab65d937?w=1220&h=1336&f=png&s=194879
[https_github.com_ChengOrangeJu_WebExtensionWallet]: https://github.com/ChengOrangeJu/WebExtensionWallet
[http_androidwing.net_nas-dapps_theletter]: http://androidwing.net/nas-dapps/theletter/
[https_github.com_githubwing_TheLetter]: https://github.com/githubwing/TheLetter