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

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

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

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

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

注册钱包

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

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

首先在GitHub上面,把官方web钱包clone下来:https://github.com/nebulasio/web-wallet

其次打开index.html文件

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

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

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

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

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

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

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

编写部署智能合约

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

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

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

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

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

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

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

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

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

 
其次,我们应该可以有权限访问我们自己智能合约的存储空间,所以根据官方的API来创建存储空间:

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

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

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

部署智能合约

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

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


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

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

测试智能合约

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

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

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

点击测试,可以看到结果:

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

开发前端页面

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

官方提供了js版的api,可以让浏览器接入区块链获取数据,sdk地址如下: 
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文件里,引入需要的依赖文件:


<script type="text/javascript" src="./dist/nebulas.js"></script>
<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

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

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

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


<script type="text/javascript" src="./dist/nebPay.js"></script>
  • 1
  • 2

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

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

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

如此一来遍大功告成!

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

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

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

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

应用地址是:http://androidwing.net/nas-dapps/theletter/

项目地址是:https://github.com/githubwing/TheLetter

欢迎star,如果你想来交流区块链技术,可以加qq群:615075629

参考文章: 
五一大礼包:手把手教你一小时开发DApp,千万奖金等你拿

https://github.com/nebulasio/wiki

NAS星云链 入门之从零开发第一个DAPP的更多相关文章

  1. 星云链开发dapp,赚取100nas(价值近万)

    前几天星云链主网正式上线,现在只要成功提交一个dapp即可获得100nas,1个nas 75元人民币左右.编写合约只要会javascript就可以写.活动持续两个月左右.下面简单介绍一下流程 首先注册 ...

  2. 【原创】新手入门一篇就够:从零开发移动端IM

    一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...

  3. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

  4. 《IM开发新手入门一篇就够:从零开发移动端IM》

        登录 立即注册 TCP/IP详解 资讯 动态 社区 技术精选 首页   即时通讯网›专项技术区›IM开发新手入门一篇就够:从零开发移动端IM   帖子 打赏 分享 发表评论162     想开 ...

  5. ASP.NET 5 入门(1) - 建立和开发ASP.NET 5 项目

    ASP.NET入门(1) - 建立和开发ASP.NET 5 项目 ASP.NET 5 理解和入门 使用自定义配置文件 建立项目 首先,目前只有VS 2015支持开发最新的ASP.NET 5 程序,所以 ...

  6. 区块链入门级别认知(blockchain)

    区块链入门级别认知(blockchain) 前言:今天参加了迅雷关于区块链的大会,学习和感受总结一下 之前的认知在:几个混迹互联网圈关于区块链 耳熟能详的 热词 “比特币” “区块链” “挖矿” ,知 ...

  7. 适合新手:从零开发一个IM服务端(基于Netty,有完整源码)

    本文由“yuanrw”分享,博客:juejin.im/user/5cefab8451882510eb758606,收录时内容有改动和修订. 0.引言 站长提示:本文适合IM新手阅读,但最好有一定的网络 ...

  8. 区块链入门到实战(36)之Solidity – 运算符

    Solidity – 算术运算符 Solidity 支持的算术运算符,如下表所示: 假设变量A的值为10,变量B的值为20. 序号 运算符与描述 1 + (加)求和例: A + B = 30 2 – ...

  9. C#/ASP.NET MVC微信公众号接口开发之从零开发(四) 微信自定义菜单(附源码)

    C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...

随机推荐

  1. hadoop生态搭建(3节点)-07.hive配置

    # http://archive.apache.org/dist/hive/hive-2.1.1/ # ================================================ ...

  2. 廖老师的Python教程——Python简介

    一直想了解下Python,今儿在外面办事排队的时候,打开了廖老师的官网,找到了Python教程.虽然只是一篇关于Python的简介,但是通过将Python的特性与C进行对比,很生动地归纳了Python ...

  3. 002---time & datetime

    time & datetime 时间模块 分类 时间戳 时间字符串 时间元祖 定义 UTC:格林威治时间,世界标准时间,中国(UTC + 8) 时间戳:1970-01-01 0:0:0 开始按 ...

  4. Kubernetes-apiserver

    Kubernetes API服务器为API对象验证和配置数据,这些对象包含Pod.Service.ReplicationController等等.API Server提供REST操作以及前端到集群的共 ...

  5. LeetCode:19. Remove Nth Node From End of List(Medium)

    1. 原题链接 https://leetcode.com/problems/remove-nth-node-from-end-of-list/description/ 2. 题目要求 给出一个链表,请 ...

  6. RabbitMQ ddemo 费元星

    http://blog.csdn.net/lmj623565791/article/details/37607165 转载请标明出处:http://blog.csdn.net/lmj623565791 ...

  7. 梳理 Opengl ES 3.0 (五)shader运行原理

    先来看看一张图 shader都是在运行时编译和执行的,每个shader都有一个main函数作为它的入口. vertex shader的功能有两个:一个是计算顶点坐标变换,另一个就是为片元shader计 ...

  8. AcCoder Contest-115 D - Christmas

    D - Christmas Time limit : 2sec / Memory limit : 1024MB Score : 400 points Problem Statement In some ...

  9. linux备忘录-正则表达式与文件格式化处理

    正则表达式 POSIX标准的符号 [:alnum:] -> 英文大小写字母和数字 0-9,A-Z,a-z [:alpha:] -> 英文大小写字母 A-Z,a-z [:blank:] -& ...

  10. 第5讲——cin处理字符输入

    本来这一讲应该是while.for.if之类的,但是,我们可是学过C的男人,再浪费时间搞这个??? 还不如学点C++中的新知识. cin对象支持3种不同模式的单字符输入,其用户接口各不相同. 下面我们 ...