bitpie官网|前端区块链开发
作者： bitpie官网
2024-03-17 01:55:06
初识区块链前端开发 - 知乎
初识区块链前端开发 - 知乎首发于区块链前端开发实战切换模式写文章登录/注册初识区块链前端开发拍岸前端架构师【前言】近两年，“区块链”成了一个高热度的关键词，受到各行各业的广泛关注，甚至不久前还出现了“三点钟无眠”微信群聚集一拨各色牛人深夜不眠不休在讨论区块链。而与区块链大热形成强烈反差的是，关于区块链技术实战的资料相当匮乏。而有关区块链前端开发的技术资料，则更是少得可怜。笔者去年开始区块链前端开发的实践探索，一直想找到一些有帮助的资料，然而事实上，通过各种搜索，最终所能找到的有所帮助的，也无外乎几份不甚完备的官方文档，几本关于区块链基本原理的书籍，外加几份Github上的源码。关于区块链前端开发实践方面的资料，目前几乎没有。这跟区块链当前所处的发展阶段有关。随着对区块链关注、投资、应用探索的走热，区块链技术学习和培训的需求正日益旺盛和迫切。区块链作为新生事物，经历曲折在所难免，但笔者相信随着时间的推移，对于区块链前端开发的需求将会迎来一个爆发期。有感于相关学习资源的匮乏，笔者决定把过去一段时间对于以太坊前端开发学习中的一些收获总结出来，在此陆续分享给大家。抛砖引玉，错误之处，还请不吝指正。一、必须了解的一些基本概念对一些基本概念有所了解，是进行区块链前端开发绕不开的问题。下面挑选了一些必须了解的概念。1、区块链区块链没有一个标准的定义，它本身的内涵也还在不断变化中。就当前的区块链技术而言，它是一种基于现代密码学、分布式一致性协议、点对点网络通信技术和智能合约编程语言等技术的数据交换、处理和存储的技术组合。以参与方来划分，区块链可以分为：公链（Public Blockchain）、联盟链（ConsortiumBlockchain）和私链（Private Blockchain）。区块链由一个个的块（Block）组成，每个块包含区块头和区块体。块按照生成出来的时间前后排列，块的区块头中有上一个块的hash的引用，从而形成一个链式的结构。区块体中承载了若干条交易的信息。块是通过区块链上的挖矿节点生成出来的。生成这个节点的过程叫做“挖矿”，其实质是打包区块链上的交易信息，并通过反复穷举hash的方式找到符合约定条件的hash值。如果一个节点在众多的节点中最先找到符合要求的hash，并广播出去得到其它节点的确认，该块也会正式成功成为链上的一部分，同时挖矿节点获得奖励的以太币，这就叫挖矿成功了。为了让大家更直观地了解一个块，我们来看下面这张来自以太坊区块浏览器Etherscan的1号区块的信息图：值得注意的是，上图中的Prev和Next按钮是Etherscan人为加上去的。实际上，当前块只存有上一个区块的hash（除了第0号区块没有上一个块的hash之外），而不会存有下一个块的hash，因为当前块生成的时候，下一个块还没有产生，所以当前块当然也就不可能包含下一个块的hash。而Etherscan之所以能链接到下一个区块，是因为Etherscan是以读取历史数据（即以回顾的视角）的形式来实现浏览的，根据当前块的序号（Block Number），就知道下一个块的号。比如，如果这个块的序号是1，那么下个块的序号是2，只要在历史数据中有2号块，就可以用next按钮链接过去。2、以太坊（Ethereum）以太坊项目的最初目标是打造一个智能合约的平台，理想情况下将不存在故障停机、审查、欺诈以及第三方干预等问题。基于以太坊项目，以太坊团队运营了一个公开的区块链平台——以太坊网络。用Solidity等语言，开发者可以开发出智能合约并部署在以太坊网络上。然后通过web3.js等库来实现web页面与以太坊网络上智能合约的交互，从而运用web前端开发技术来开发基于以太坊的去中心化应用（DApp）。3、智能合约（Smart Contract）智能合约是基于区块链的、不可被随意篡改的、数字自动化执行的一些预先设定好的规则和条款。本质上来说，它就是一段部署在区块链网络上的代码。这段代码写上你需要执行的任务的相应执行逻辑（合约）。以太坊中，智能合约有一个运行环境，即以太坊虚拟机（EVM）。4、去中心化应用（DApp）DApp，即Decentralized App。它的“后端”运行在这样一种点对点（peer to peer）网络上——网络中不存在任何一个能够完全控制该应用的节点。一个DApp由智能合约和客户端代码构成的。在传统Web应用中，后端代码在自己的服务器上运行；在DApp中，后端逻辑代码在区块链上运行。去中心化应用有如下好处：它是分布式的，理想情况下，没有单点故障，不会因为某一个或几个节点的错误或异常而导致服务不可用；它没有一个中心机构，所以任何第三方不可能通过向中心机构施加压力来对去中心化应用进行控制。5、以太坊账户每个账户由一个唯一地址来标识。比如，A账户要给B账户转一笔以太币，就需要把这笔以太币从A账户的地址发送到B账户的地址。以太坊的账户有两类，外部账户和合约账户。外部账户被公钥-私钥对控制。合约账户被存储在账户中的代码（智能合约）所控制，当合约账户收到一条消息，合约内部的代码会被激活执行，允许它对内部存储进行读取、写入、发送消息和创建其它合约。一个账户包含随机数（确定每笔交易只能被处理一次的计数器）、余额、合约代码（只有合约账户有）、账户的存储（默认为空）。6、交易交易是一个签名数据包，它由外部账户向另一个外部账户或合约账户发出，用于从一个账户向另一个账户（外部账户或合约账户）转账、调用智能合约（若有）、或部署一个新合约。交易包含接收者、发送者的签名、要转账的金额、gas上限和gas价格。7、gas以太坊上的每笔交易都会收取一定量的费用，这种费用以gas为单位进行衡量。每一笔交易都会设置一个所花费gas的上限，叫做gas limit。每一个gas的价格叫做gas price，所以最终的一笔交易的花费最多不能超过gas limit 乘以 gas price（算出来就是多少以太币）。如果交易执行完成，实际的花费比这个设定值小，剩余的会返还给交易发送者。如果执行一笔交易时花费已经达到了所设定的上限，但交易却还未执行完，那么交易失败，但花费也不退回，因为执行的过程中已经消耗掉算力了，而那笔花费是给算力的。算力由谁提供呢？算力由以太坊网络上每一个在挖矿的节点提供。以太坊为什么要让每笔交易都有花费呢？试想，如果发送交易没有花费的话，那恶意的用户岂不是就可以随便乱发交易（反正也不用付以太币），当这种交易多了，势必造成以太坊网络的拥堵。8、消息调用智能合约可以通过消息调用的方式来调用其它合约，或者发送以太币到外部账户。消息调用和交易非常类似，它们都有一个发起者，一个接收者，携带的数据负载，转账金额，gas和返回数据。9、代码调用以太坊中有一种特殊类型的消息调用（callcode）。它和消息调用类似，只不过从目标地址加载进来的智能合约代码将会在发起调用的那个智能合约的上下文中运行。也就是说一个智能合约可以在运行时从另外一个合约地址动态加载进来合约代码。这使得Solidity可以实现“库”的概念，从而让智能合约更加强大了！二、区块链前端开发与传统业务前端开发的区别区块链前端开发与传统业务的前端开发是有较大的区别，这一点，在你开始进行区块链项目的前端开发之前，最好有个清晰的认识。1、业务复杂度明显不同，框架运用几成刚需传统的前端开发一般是每一个小的服务功能请求一个接口，所以整个web应用中会有许多的接口，这样的好处在于，每一个接口中的数据字段都不至于太多，方便理解和使用。而且我们只需要在用到它的路由界面上去调用这个接口，相应的数据通常不需要跨路由传递。而区块链前端开发通常只有一个HTTP或WebSocket接口，所有的与区块链的交互服务都通过这一个接口来完成。这大大增加了前端在数据处理上的复杂度——不仅字段非常多，杂糅在一起使得理解和管理更加困难，而且经常需要将数据跨路由共享给其它的路由界面。如果说传统的前端开发，我们依然可以不用前端框架完成好开发的话，那么，对于区块链应用的前端开发，不用React.js、Vue.js、AngularJS已经变得几乎不可能（即便能写出来，可维护性也非常差）。若没有像Redux、Vuex这样的状态管理工具来进行状态管理，处理起来就真的非常困难了。而且其异步事务之多，也明显超出传统应用。得有像redux-saga这样的工具，才能驾驭那么复杂的异步处理。在框架的选择上，尤其是当你准备开发非常复杂的区块链应用，或者是要在Web端开发区块链钱包的时候，笔者认为目前React.js最为合适。这是因为，React.js在国外更为流行。而有影响力的区块链开源项目，多数还是国外开发者开发的。当前一些更有参考价值的开源项目，都是用React.js完成的。所以，如果你采用React.js，参考开源代码时会更有优势。此外，React.js的生态也相对更为完善。更而且，它在国内也有相当的热度，热度要远大于AngularJS。另外，区块链开发的业务流程较为复杂，而且在现阶段，产品经理通常也不是很理解区块链背后业务流程细节，所以开发时只有靠你自己去弄清楚，才能继续往下开发。2、数据字段繁多，需要自己逐一理解其含义在传统的前端开发项目中，数据接口每个字段的含义通常都会由后端程序员给出，而且字段也不是那么多，理解起来并不难。而区块链接口提供的字段非常之多，这些字段都是区块链一个接口给出的。通常，也没有人给你关于这些字段含义的介绍。你只能自己参考网上的文档一点一点去弄清楚，这是一个非常耗费时间的事情。3、用到新模块、新语言、新工具，坑比较多像用到的NPM模块，有一个与区块链交互的web3.js，API够你学段时间的。而且比较坑的一点是，现在正处在web3.js从0.xx版本像1.0版本迁移的过程中，新的版本已经呼之欲出了（已经出到了1.0-beta.30版了），而社区中的一些资料多还是以0.xx版本写成的。由于进行了大量代码重构，web3.js 1.0版本中的不少API与0.xx版本是不兼容的。在这种情况下，到底采用哪个版本，确实是个令人纠结的问题。笔者的建议是，干脆激进一点，选择1.0 beta版——反正早晚都逃不过一次向1.0版的升级，何不现在就采用1.0版？如果编写智能合约的话，还得学习Solidity语言。虽然它与JavaScript有几分相似，但考虑到智能合约一旦部署上区块链，就再也无法更改了，必须得学清楚Solidity语言的情况下，你才敢去放心地写智能合约。而且，即便你弄明白了Solidity语言，要写好一个一经部署上链就不能再改的合约，仍然是很有挑战的。其实，即便是区块链界的大牛，也有曾在智能合约上翻船的。The DAO智能合约被攻击事件，即是一例。还有一个在以太坊智能合约开发中非常流行的工具truffle，其中有一个模块truffle-contract，目前它还不支持web3.js 1.0版本，所以，采用web3.js 1.0 beta版的情况下，truffle也是用不了的，这又是比较坑的一个点。4、社区还不成熟，能获得的支持少目前这个阶段，对于区块链的前端开发，大家都还处在探索阶段，都还在摸着石头过河，遇到问题能得到帮助的机会非常少。甚至想找到一份清晰的文档也很难。多数情况下只能靠自己。这与传统业务的前端开发是截然不同的体验。不过，任何技术其实都是一样的，只有有人在前面趟出一条路来，后面的人才能轻松一点！编辑于 2018-04-07 19:50前端开发区块链(Blockchain)赞同 242 条评论分享喜欢收藏申请转载文章被以下专栏收录区块链前端开发实战第一个区块链前端开
写给前端的区块链开发入门指南：零基础开发基于以太坊智能合约的 ICO DApp - 知乎
写给前端的区块链开发入门指南：零基础开发基于以太坊智能合约的 ICO DApp - 知乎首发于前端周刊切换模式写文章登录/注册写给前端的区块链开发入门指南：零基础开发基于以太坊智能合约的 ICO DApp王仕军资深前端工程师、前端周刊创办者张泉灵说，时代抛弃我们的时候连声再见都不会说，马云说对于新兴事物，绝大多数人是看不见、看不起、看不懂、来不及。自从学完 Coursera 上的 Crypto Currency 课程，搞懂区块链技术的本质后，对区块链的的所谓信仰变成了强有力的逻辑支撑，不管你看没看见，区块链正在吞噬整个世界！不甘平庸的工程师肯定会问，怎么在区块链技术和行业崛起的时候参与进去获取更大的成长？如果你选择参与，而不是旁观，真诚的邀请你在成为区块链应用研发工程师的路上和我同行。前端工程师学习区块链应用开发的 WHY、HOW、WHAT 可以用下图来概括，如果你同意我的观点，还犹豫什么？赶紧动手吧！为什么要选择区块链开发？未来已来，只是尚未流行！区块链技术的爆炸式发展引起了很多人的注意，相信看到这篇小册的你早就听说过比特币、ICO，甚至购买过区块链资产。区块链是个天然和钱离得很近的领域，离钱越近就越容易赚到钱，尽早开始准备并在区块链领域站稳脚跟的人将能享受到行业崛起的巨大红利，就像四年前的微信公众号，两年前的知识付费，一年前的微信小程序。然而，从对身边同学的观察来看，前端工程师很容易产生区块链是底层技术、离前端很远的错觉。实际上任何区块链应用落地都需要以为用户创造实实在在的价值为基础，区块链应用的用户不会仅限于少数极客，有普通用户就需要界面，有界面就需要前端工程师。区块链可以简单理解为分布式的、公开的、不可篡改的数据库，区块链应用在项目架构、前后端交互方式等方面和传统的端应用会有比较大的差别。从技术栈的视角来看，构建在分布式网络、公开账本、共识算法等三个核心要素之上的智能合约和 DApp 才是未来百花齐放的地方，底层协议会逐渐趋于稳定。那么，作为前端工程师，我们在区块链领域的机会到底在哪里？炒币？貌似不是长久之计。如果说做成任何事情都需要依赖技能和和运气两个要素，不同的事情只是两种要素的比重不同，那么理智的人会想尽办法让事情更依赖技能，而不是运气。为什么要选以太坊？以太坊（Ethereum）是目前最成熟的、最被广泛使用的、支持构建和部署基于智能合约的 DApp 的区块链应用平台，根据 State of DApps 的统计，目前运行在以太坊上的应用多达 1379 个，这些 DApp 全部由两部分组成：存储在以太坊网络上的智能合约（使用 Solidity 编写，和 JS 很类似，未来 EOS 也会支持使用 Solidity 编写智能合约），以及能和智能合约交互的用 Web 技术开发的 DApp。围绕以太坊的 DApp 开发生态是目前相对最成熟的，比如有开发框架 Truffle，有智能合约在线集成开发环境 Remix，还有专设的 StackExchange 开发者问答频道。别跑题了！怎么学习区块链开发？Blockchain is hard，虽然我们不愿承认，但事实摆在面前。围绕以太坊有大量的开发工具可以使用，但是它们的演化和迭代却非常快，很多工具、框架、库的教程可能过两周就就过时了，或者接口不再兼容了，这成了很多新同学入门区块链开发时最大的障碍，在坑里趟了半年的我写了个比较详细完整的教程（广告来了，其实就是掘金小册），姑且称之为：前端工程师写给前端工程师的区块链开发入门指南。学会某个新技术的最佳路径是先掌握最小可用知识（Minimum Actionable Knowledge），然后撸起袖子开始做，在做的过程中不断优化和迭代自己对新技术的理解和掌握。在这本小册里我会把最近半年摸索出来的以太坊智能合约、DApp 开发套路、最佳实践悉数分享给你，无需花费大量的时间去做诸如启动本地测试网络、编译和运行全节点之类的事情，在只依赖核心工具如 solc、Chrome 的情况下，用由浅入深的方式手把手带你熟悉 Solidity 智能合约开发、测试、部署，搭建和智能合约交互的 DApp 开发框架，为成为区块链工程师做好准备。文不如表，表不如图，在小册中使用了大量的图片（目前完成度 35%，插图 55副）和类比，即使你完全没接触过区块链，也能轻松理解区块链世界里面的关键概念。小册的内容划分为 5 大部分：入门篇（上）：理解区块链原理与以太坊的运行机制，熟悉以太坊开发的基本概念，如账户、交易等；入门篇（下）：Solidity 开发入门，基于 Remix 的智能合约工作流；进阶篇：基于现代前端环境的智能合约开发、构建、部署、测试工作流；实战篇（上）：设计、开发、部署、测试 ICO 智能合约；实战篇（下）：使用 web3、next.js 开发能和智能合约交互的ICO DApp；我是谁？做过什么？我有过什么作品？掘金专栏作者：王仕军，11250 人关注；掘金小册作者：《使用 npm script 构建超溜的前端工作流》，787 人购买；微信公众号前端周刊创办和维护者，2600 订阅；高质量技术视频教程作者：async/await、styled-components，网盘下载量近 3000 次。有谁审阅过小册？他们怎么说？你会得到什么？在小册中，你将学会在自己熟悉的前端开发环境中组合使用 Ethereum、Solidity、JavaScript 编写、调试、测试、部署和管理自己的 DApp 的基本方法。具体包括：理解在以太坊上构建 DApp 需要掌握的关键概念，比如 Gas、Transaction；熟悉以太坊不同测试网络，以及测试网络提供工具的使用方法；熟悉 Solidity 语言，并用其开发真实的智能合约；熟悉以太坊智能合约调试工具 Remix 的基本用法；掌握设计、开发、测试、部署智能合约的工作流和最佳实践；熟悉以太坊智能合约工具库 web3 最新版的基本使用方法；熟悉 web3 和 next.js 结合使用的方方面面；构建并掌握完整的、能被重用的智能合约、DApp 应用架构和构建工具链条；适合什么群体？具备基本的 JavaScript 知识，最好是写过 Web 应用，熟悉 npm 使用的同学；对区块链、以太坊、智能合约技术感兴趣，想做深入了解的前端同学；期望使用区块链技术开发能实际落地的应用的前端同学；期望储备区块链开发技能，为跨界区块链做好准备的前端同学；期望从事区块链行业的计算机相关专业学生；想抓取区块链行业红利，靠技能赚更多钱的同学；你要准备什么？Chrome 浏览器，部分开发和调试功能是在浏览器中进行的；Node.js 运行环境，最好是 v8.x 以上版本，建议使用 nvm 来安装；可以用来输入和执行命令的终端程序，比如 Mac 下的 iTerm，或者 Windows 下的 cmder；你自己用起来舒服的编辑器，比如 VSCode，我写过两篇 VSCode 编辑器配置的文章，参见上和中；2 小时的闲暇时间，读完这本小册，并能自己上手实践，因为纸上得来终觉浅；读者福利免费加入读者交流群，和群友讨论和交流读书心得和疑惑问题，我相信，这本小册能让很多和你我志同道合的同学聚在一起；读者群内 5月31日 前每天会有抽奖活动，奖品为有真实价值的区块链代币（抽奖使用微信小程序，发奖过程公开透明）：05 月 18 日 ~ 05 月 22 日，每天的奖品是价值 1 枚 EOS or 等值的 ETH ，据说握住会价值不菲；05 月 23 日 ~ 05 月 31 日，每天的奖品是 1000 枚 * （2 份）Candy，李笑来操刀运作的糖果代币，拿三年试试？凡在限时优惠期间购买本小册的读者，都会获赠专属 5 折折扣券，可用于购买廖雪峰老师的《数字货币与区块链原理》小册，更系统全面的理解和掌握区块链开发必备知识。希望在成为区块链工程师的路上，你能与我同行！猛击下图享受七折限时优惠。掘金小册编辑于 2018-05-18 10:36区块链(Blockchain)前端开发赞同 445 条评论分享喜欢收藏申请转载文章被以下专栏收录前端周刊在前端领域跟上时代的脚步，广度和深度不
【初识Web3】如何入坑区块链前端 - 掘金
【初识Web3】如何入坑区块链前端 - 掘金
首页 首页
沸点
课程
直播
活动
竞赛
商城
APP
插件 搜索历史
清空
创作者中心
写文章 发沸点 写笔记 写代码 草稿箱 创作灵感
查看更多
会员
登录
注册
【初识Web3】如何入坑区块链前端
SaraiNoQ
2022-12-02
1,333
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
初识 Web3
Web3.0(即运行在区块链技术上的去中心化互联网)。
因为最近要做一个智能合约靶场的项目，准备开始拓展一下自己的技术栈。所以今天我们开始学习 Web3 的内容。学习一门新的技术，首先要了解前置知识。
前置知识
如果你想入坑 web3，那么我建议你先尝试学习以下内容。
区块链原理。建议在B站搜索并学习： 北京大学肖臻老师《区块链技术与应用》公开课。
了解Web2，掌握一定的前端开发技术，包括JavaScript语言和网页开发技术（HTML-CSS-JS以及Vue.js或React.js等前端开发工具）
预期学习内容
学习Solidity语言的简单语法以及智能合约。
掌握智能合约开发的一些工具，如测试工具 Ganach ，部署工具 Truffle 或 HardHat。
学习去中心化应用DApp(decentralized application)。
学习MetaMask加密钱包知识以及开发所需调用的API。
学习Web3.js及Ethers.js连接去中心化应用。
实战区块链-web3项目。
Web3.js概述
智能合约开发：solidity语言编写合约，部署上链
网站/客户端开发：前端与区块链上的智能合约进行交互，读写数据
Web3 是对 JSON RPC 请求的封装。
Web3.js 库是一个 JavaScript 库，是以太坊官方提供的和节点交互的 JavaScript-SDK，可以帮助开发者使用 HTTP 或者 IPC 与本地或者远程的以太坊节点进行交互。
包含以下几个库：
web3-eth：用来与以太坊区块链和智能合约进行交互。
web3-shh：用来控制 whisper协议 与 p2p 通信，以及广播。
web3-bzz：用来与 swarm协议 交互。
web3-utils：包含了一些DApp开发应用的功能。
通过 Web3.js 库，可以连接任何暴露了 RPC 层的以太坊节点，可以让你通过节点执行很多与区块链进行交互的任务，例如：
以太坊转账
读写智能合约中的数据
创建智能合约
发送交易
基础环境
安装 Nodejs 环境。
全局安装 web3 库：npm install -g web3
设置开发工具和所需知识库
在你的浏览器上下载 MetaMask钱包 插件。它是浏览器连接区块链的通道，可以管理你的所有数字资产。另外对于开发人员来说要学习MetaMask提供的API，帮助你所开发的程序与钱包进行连接。
Ganache个人区块链：Ganache - Truffle Suite。
Remix智能合约编译部署工具：Remix - Ethereum IDE。首次加载可能会有些慢，请耐心等待。通过Remix你可以编写并编译智能合约，而无需通过繁杂的操作安装相关环境。
web3.js库，提供前端JavaScript与区块链智能合约连接的API：Getting Started — web3.js 1.0.0 documentation (web3js.readthedocs.io)
ether.js库，相比web3js更简洁：Documentation (ethers.io)
Etherscan以太坊区块链浏览器：Ethereum (ETH) Blockchain Explorer (etherscan.io)
Truffle 或 HardHat
OpenZeppelin（智能合约开发与审计方向）
Defi（去中心化金融方向）
连接到以太坊网络
要访问以太坊网络，首先需要连接到 Ethereum 节点：
使用 Geth 或 Parity 运行自己的 Ethereum 节点。但这样需要从区块链下载大量数据并保持数据同步，十分麻烦。
使用 Ganache 以太坊节点仿真软件，它会在内存中创建一条测试链，便于开发者进行开发和调试。Ganache - Truffle Suite
总结
安装完成上述软件，你就可以开始简单的 web3 项目的搭建了。接下来我会介绍web3.js库的一些常用API以及上述工具的使用，带你进入 web3 的世界。
SaraiNoQ
57
文章
25k
阅读
42
粉丝 目录 收起
初识 Web3
前置知识
预期学习内容
Web3.js概述
基础环境
设置开发工具和所需知识库
连接到以太坊网络
总结
友情链接：
mysql in range
离婚无效 总裁前妻很抢手全文阅读
综武：纳妾王语嫣，我长生不死
忘记相爱那几年小说
小镇谍影怎么玩
总裁女人的出逃人生笔趣阁在线阅读
Web3全栈开发指南 - 廖雪峰的官方网站
Web3全栈开发指南 - 廖雪峰的官方网站
廖雪峰的官方网站
Blog
Java教程
手写Spring
手写Tomcat
Makefile教程
Python教程
JavaScript教程
区块链教程
SQL教程
Git教程
文章
问答
More
Java教程
手写Spring
手写Tomcat
Makefile教程
Python教程
JavaScript教程
区块链教程
SQL教程
Git教程
文章
问答
Java教程
手写Spring
手写Tomcat
Makefile教程
Python教程
JavaScript教程
区块链教程
SQL教程
Git教程
文章
问答
Profile
Passkey
Sign Out
Sign In
English
简体中文
Web3全栈开发指南
廖雪峰 / 文章 / ... / Reads: 111250 Edit
本文将详细介绍Web3 DApp开发的架构、技术，以及使用哪些工具，并给出完整示例。
我们先介绍Web3用到的技术：
区块链，以以太坊（Ethereum）为主流，也包括Solana、Aptos等其他非EVM链。区块链本身是软件，需要运行在一系列节点上，这些节点组成P2P网络或者半中心化网络。节点不仅负责接收新的输入并生成新的区块，还需要存储区块链运行时产生的所有数据，并负责同步、对外提供查询等RPC服务。
钱包：帮助用户管理自己在区块链上资产的软件，加密存储用户的私钥。当用户需要和区块链交互时，就需要用到私钥签名；
智能合约：运行在区块链上的一段托管程序，主要用来和外部账户交互；
UI：这里特指前端页面，因为直接通过RPC调用合约仅限个别高级用户，普通用户仍需要一个前端页面，并通过JavaScript脚本配合钱包签名与合约交互。
因为区块链上所有数据全透明，要查询任意区块的数据，可以通过EtherScan这个网站查。其他公链，无论是与Ethereum兼容的BSC、Polygon，还是不兼容的Solana、Aptos等，也提供类似XxxScan这样的查询网站。这些Scan能提供基本的读写合约的能力，有助于开发阶段的测试。
区块链本身以及钱包、EtherScan等属于基础设施，如何开发基础设施不在本文讨论范围之内。本文仅限定如何开发DApp。
一个完整的DApp需要开发以下部分：
智能合约：将逻辑写入合约，并部署在链上；
UI：为用户提供一个交互式UI，配合钱包完成特定功能。
此外，对后端开发有经验的同学应该知道，通常来说，App数据会存储在数据库中，前端与后端交互，离不开后端对数据的查询和修改。在DApp中，同样需要一个查询的“后端”，但这个后端通常不是数据库。
有的同学会认为，既然节点本身提供了查询链上全部数据的PRC接口，那么，前端直接查询节点是否可行？答案是不行。因为节点提供的数据，是用户产生的原始日志。
举个例子，假设有个NFT合约，允许用户创建NFT，那么，一段时间内，节点产生的日志如下：
用户A创建了NFT-1；
用户B创建了NFT-2；
用户B把NFT-2转移给了用户X；
用户C创建了NFT-3；
...
这些未经聚合处理的数据没法生成一个不断更新的数据库表：
OwnerNFT ID
用户A1
用户BN/A
用户X2
用户C3
所以，一个DApp除了前端外，还需要一个后端服务，它主要功能是不断聚合链上产生的数据，并根据DApp的业务需求设计表结构以方便查询。
一个直观的想法是用Java或者Go语言等编写一个后端服务，再配上一个数据库，就可以为前端提供REST API来实现查询。只不过自己维护后端服务比较麻烦，还需要租用云端服务器、数据库等资源，费时费力。
我们推荐另一种后端服务：The Graph。它本身也可看作是一个基础设置。The Graph可以让我们部署一个Graph查询服务，如何定义表结构以及如何更新则由我们提供一个预编译的WASM。整个配置、WASM代码以及查询服务都托管在The Graph中，无需自己搭建服务器，非常方便。
因此，一个完整的DApp架构如下：
┌───────┐
┌───────────│ DApp │───────────┐
│ └───────┘ │
│ read/write query │
│ contract data │
▼ ▼
┌───────┐ ┌───────┐
│Wallet │ │ Graph │
└───────┘ └───────┘
│ ▲
│ sign index │
│ broadcast data │
│ │
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
│ ┌────┐ ┌────┐ ┌────┐ │ │
└──┼▶│Node│ │Node│ ... │Node│───┘
└────┘ └────┘ └────┘ │
│ Ethereum
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
我们看看开发各个组件所需的技能树需求。由于本文仅讨论ETH以及ETH兼容链的DApp开发，所以，以下技能树仅适用于ETH系：
合约开发：使用Solidity语言；
合约部署工具：可以选择Hardhat、Truffle或Foundry，建议使用Hardhat；
数据聚合服务：选择The Graph提供的托管服务；
数据聚合开发：The Graph给出的模板代码是TypeScript，因此这里使用TypeScript；
前端页面：HTML+JavaScript/TypeScript，也可配合任意前端框架如Vue、React等；
合约交互框架：虽然理论上使用JSON RPC就可以读写合约，但使用Ethers.js可以大大简化开发；
钱包支持：如果仅支持MetaMask，则使用Ethers.js已足够，如果要支持多种钱包，尤其是需要连接手机钱包，则需要使用Web3Modal。
综上所述，我们可以总结一个基本的Web3全栈开发技术需求：
Solidity语言；
JavaScript语言；
TypeScript语言；
HTML/CSS等前端技能。
以及用到的服务：
将所有源码托管在GitHub；
使用The Graph提供的Hosted Service；
使用GitHub Page实现静态页托管；
可选：绑定一个域名。
下面我们以一个具体的项目来演示Web3全栈开发的完整流程。该项目允许用户在Polygon上创建属于自己的NFT卡片，并可在页面查看链上铸造的所有NFT卡片：
Polygon是兼容以太坊的PoS链，特点是Gas便宜，速度快，领测试币方便。
编写合约
创建Web3 DApp的第一步是编写合约。我们使用Hardhat工具，它是Node.js开发的，确保本机安装了Node.js和NPM，先安装Solidity编译器：
$ npm install -g solc
$ solc --version
solc, the solidity compiler commandline interface
Version: 0.8.17
然后创建目录web3stack并安装Hardhat：
$ mkdir web3stack
$ cd web3stack
$ npm install --save-dev hardhat
然后输入命令npx hardhat开始创建一个新的合约项目：
$ npx hardhat
Hardhat提示选择项目类型：
? What do you want to do? …
❯ Create a JavaScript project
Create a TypeScript project
Create an empty hardhat.config.js
Quit
这里选择JavaScript项目。后续接着提示项目根目录、是否添加.gitignore、是否安装相关依赖等：
✔ What do you want to do? · Create a JavaScript project
✔ Hardhat project root: · /path/to/web3stack
✔ Do you want to add a .gitignore? (Y/n) · y
✔ Do you want to install this sample project's dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y
全部按默认值来。完成后查看package.json应该有两个dev依赖：
{
"devDependencies": {
"@nomicfoundation/hardhat-toolbox": "^2.0.1",
"hardhat": "^2.12.7"
}
}
Hardhat默认创建了一个Lock合约，以及相关配置。我们可以自己再写一个Card合约：
// SPDX-License-Identifier: GPL-v3
pragma solidity =0.8.17;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
contract Card is ERC721 {
...
}
直接编译：
$ npx hardhat compile
Error HH411: The library @openzeppelin/contracts, imported from contracts/Card.sol, is not installed. Try installing it using npm.
编译提示找不到library报错，因为我们引用了OpenZeppelin的库，所以要先用NPM安装一下：
npm install --save @openzeppelin/contracts
这条命令会在package.json中添加一个新的依赖：
{
...
"dependencies": {
"@openzeppelin/contracts": "^4.8.1"
}
}
再次编译：
npx hardhat compile
生成的合约存放在artifacts/contracts/Card.sol/Card.json，它包括了ABI接口、字节码等所有信息。部署合约就是把字节码部署到链上。
Hardhat提供了一个示例代码script/deploy.js用于部署Lock合约，我们可以仿照这个脚本，复制一份script/deploy-card.js来部署Card合约：
const hre = require("hardhat");
async function main() {
// 合约工厂:
const Card = await hre.ethers.getContractFactory("Card");
// 部署:
const card = await Card.deploy();
await card.deployed();
// 打印部署的地址:
console.log(`Card deployed to ${card.address}`);
}
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
部署时，直接运行脚本：
$ npx hardhat run scripts/deploy-card.js
但是，我们并没有在本地配置任何关于链的信息，也没有配置私钥等账户信息，这个合约是不可能部署到链上的，那它部署到哪了？
实际上合约默认部署到Hardhat提供的“虚拟JavaScript环境”，它可以在本地用Node执行合约代码，主要用于测试。要部署到真实的链上，我们首先要在hardhat.config.js中加一点关于链的配置：
module.exports = {
...
// 定义所有的链:
networks: {
// 定义名为testnet的链:
testnet: {
// 配置私钥:
accounts: ['0x72b3...bd2b'],
// 配置为Polygon Testnet节点的PRC:
url: "https://matic-mumbai.chainstacklabs.com"
}
},
...
}
这里为了方便我们把私钥直接写进配置里，实际开发可从环境变量读取。在部署前，确保私钥对应的地址有一点MATIC测试币。可以从这里领测试币。然后用带--network参数的命令部署：
$ npx hardhat run scripts/deploy-card.js --network testnet
如果部署成功，则显示Card合约被部署的地址：
Card deployed to 0x8131aa1B766966f9F8ec3E1132D9d29D92311AB0
在PolygonScan上就能查看该合约。顺便可以将合约源码在PolygonScan上验证，验证后即可在PolygonScan对合约进行基本的读写操作。
开发DApp UI
DApp UI就是前端页面，既可以手写HTML+JavaScript，也可以使用React、Vue等任何前端框架与Webpack等前端工具。为了简化开发流程，这里我们直接手写一个index.html页，让用户能在页面创建一个NFT。
页面引入的第三方库包括jQuery、Bootstrap CSS、Vue，以及用于合约交互的Ethers.js：
安装了MetaMask插件后，页面会获得一个注入的window.ethereum全局变量，通过此变量与钱包进行交互，例如，连接钱包：
await window.ethereum.request({
method: 'eth_requestAccounts',
});
调用合约方法则使用Ethers.js。下面的代码创建了Card合约并调用mint()方法创建NFT：
async function () {
// 创建合约:
let contract = new ethers.Contract(
// 合约地址:
'0x8131aa1b766966f9f8ec3e1132d9d29d92311ab0',
// 合约的ABI接口
'[{"inputs":...]',
// 钱包签名对象:
new ethers.providers.Web3Provider(window.ethereum, "any").getSigner()
);
// 调用mint()方法:
let tx = await contract.mint();
// 等待1个确认:
await tx.wait(1);
// TODO: 解析tx的日志并拿到TokenID
}
异步调用mint()方法时，会拉起MetaMask，提示用户对交易进行签名。签名后返回tx对象代表已发送的交易。等待1个确认后，如果要获取交易信息，则需要解析tx的日志以便拿到Token ID等信息。
最后注意到合约的ABI接口包含了合约完整的读写方法以及输入输出，它是一个JSON对象，这里以字符串形式传入。Card合约的ABI可以在Card.json中找到并复制出来，不过我们可以使用Hardhat的一个插件直接输出ABI文件。我们先用NPM安装插件：
$ npm install --save-dev hardhat-abi-exporter
然后在hardhat.config.js中添加插件配置：
// 用require引入插件:
require('hardhat-abi-exporter');
...
module.exports = {
...
// 使用ABI Exporter插件:
abiExporter: {
// 输出到abi目录:
path: "./abi",
clear: false,
flat: true,
pretty: false,
// 编译时输出:
runOnCompile: true,
}
};
再运行一次编译，我们就可在abi目录下看到若干.json文件。找到Card.json，整理下格式，变成一个字符串粘贴至HTML：
...
window.NFT_ABI = '[{"inputs":[],"stateMutability":"nonpayable","type":"constructor"}...';
...
这样，通过前端页面，就可以调用合约方法。通过mint()方法写入后，NFT已经生成，在PolygonScan查找对应的tx可查看详细信息。通过PolygonScan的Read Contract页面调用getImage()可获得NFT图片信息：
把返回的data:image/svg...复制到浏览器的地址栏，可查看图片：
也可在OpenSea等第三方NFT市场看到该NFT的图片。
不过我们还有最后一个问题，就是如何在我们自己的页面上展示用户创建的NFT。有的同学会想到在页面调用Card合约的读方法，依次读出每个NFT的信息，这种方式会非常慢，因为需要反复多次调用读方法，且无法实现条件查询，比如根据地址查询该地址拥有的NFT，或者创建于一个月内的NFT。因此，我们还需要用到The Graph提供的数据聚合服务。
创建Graph查询
为了创建Graph查询，我们需要使用The Graph提供的托管服务。先注册The Graph，然后安装全局命令行工具，只需运行一次：
npm install -g @graphprotocol/graph-cli
安装后可使用命令graph，例如查看版本：
$ graph --version
0.38.0
第二步是在The Graph的Hosted Service - My Dashboard - Add Subgraph创建一个项目，创建成功后The Graph显示状态为未部署（Not Deployed）。为了把Subgraph部署上去，我们在本地项目根目录创建一个subgraph目录，然后在此目录下执行命令：
$ graph init --product hosted-service michaelliao/web3stack
注意将登录名替换为你的GitHub用户名，将项目名替换为The Graph上创建的项目名。
接下来依次输入信息：
选择协议的类型：选ethereum；
填写subgraph名称：用默认的名称；
填写目录名：用默认目录名；
选择链：选mumbai（Polygon的测试链）；
填写合约地址：填入部署的地址0x8131...1ab0；
尝试自动获取ABI，一般都能成功；
填写从指定的块开始：查看合约部署的TX所在块填入区块高度；
填写合约名字：与合约代码保持一致，此处必须为Card；
是否索引事件：默认是。
接下来会安装一系列依赖。如果填写的信息有问题，或者NPM运行出错，删掉subgraph目录再来一遍即可。
然后按照提示，先运行graph auth输入The Graph给的一个Access Token，然后进入subgraph/web3stack目录，运行：
npm run deploy
几秒钟后，就可以在The Graph提供的Playground输入查询并查看结果：
为什么我们可以直接查询transfers？首先，我们查看schema.graphql，默认有3个Entity，把Entity看作是数据库表，这3个Entity是The Graph根据合约定义的Event自动生成的：
type Approval @entity(immutable: true) {
...
}
type ApprovalForAll @entity(immutable: true) {
...
}
type Transfer @entity(immutable: true) {
...
}
但并不是我们的业务需要的。我们需要的是Card类型，包括owner、image等信息。因此，删掉自动生成的代码，换成我们自定义的Card：
type Card @entity(immutable: false) {
id: String!
owner: Bytes!
blockNumber: BigInt!
blockTimestamp: BigInt!
transactionHash: Bytes!
image: String!
}
其中，id是唯一主键，这里用NFT的Token ID即可，但类型是String而不是BigInt。
接下来，在subgraph.yaml中定义了如何处理事件，需要修改的有两处，一是entities，删除原有的3个Entity，换成我们定义的Card：
dataSources:
- kind: ethereum
...
mapping:
...
entities:
- Card
二是在eventHandlers中删除我们不关心的Approval和ApprovalForAll事件，仅保留Transfer：
dataSources:
- kind: ethereum
...
mapping:
...
eventHandlers:
- event: Transfer(indexed address,indexed address,indexed uint256)
handler: handleTransfer
当The Graph的节点扫描到我们部署的合约产生了Transfer事件后，它将调用handleTransfer处理，这个函数定义在src/card.ts中，自动生成的代码如下：
export function handleTransfer(event: TransferEvent): void {
let entity = new Transfer(
event.transaction.hash.concatI32(event.logIndex.toI32())
)
entity.from = event.params.from
entity.to = event.params.to
entity.tokenId = event.params.tokenId
entity.blockNumber = event.block.number
entity.blockTimestamp = event.block.timestamp
entity.transactionHash = event.transaction.hash
entity.save()
}
因此，每捕获到一个Transfer事件，会保存一个Transfer的Entity，这就是我们前面在The Graph的Playground中能查询transfers的原因。
现在我们不需要Transfer这个Entity，改成Card，先定义Card这个Entity：
export class Card extends Entity {
...
}
再修改handleTransfer()的代码：
export function handleTransfer(event: TransferEvent): void {
let tokenId = event.params.tokenId;
let contract = CardContract.bind(event.address);
if (event.params.from.equals(Address.zero())) {
// 如果from=0，表示创建了新的NFT:
let nft = new Card(tokenId.toString());
nft.owner = event.params.to;
nft.image = contract.getImage(tokenId);
nft.blockNumber = event.block.number;
nft.blockTimestamp = event.block.timestamp;
nft.transactionHash = event.transaction.hash;
nft.save();
} else {
// from!=0，表示NFT发生了转移，需要更新owner和image:
let nft = Card.load(tokenId.toString());
if (nft === null) {
log.error('failed load NFT by token: {}', [tokenId.toString()]);
} else {
nft.owner = event.params.to;
nft.image = contract.getImage(tokenId);
nft.save();
}
}
}
再次运行npm run deploy，我们可以在The Graph的Playground中查询到cards：
这样，支持页面显示的后端查询服务就准备就绪。
下一步，我们在页面中添加一点查询代码：
async function query() {
let query = {
"query":
// 输入为Graph查询字符串:
`
{
cards(first: 20, orderBy: blockTimestamp, orderDirection: desc) {
id
owner
image
}
}`
};
// 调用jQuery发送POST请求并获得JSON结果:
let opt = {
type: 'POST',
dataType: 'json',
contentType: 'application/json',
// 与Graph服务接口保持一致:
url: 'https://api.thegraph.com/subgraphs/name/michaelliao/web3stack',
data: JSON.stringify(query)
};
let result = await $.ajax(opt);
let cards = result.data.cards;
}
拿到查询结果，我们就能直接在页面展示：
最后一步就是把页面发布到GitHub Pages，然后绑一个域名，就可以让用户访问了：
https://web3stack.itranswarp.com
至此，一个完整的DApp就开发完毕。
参考源码
https://github.com/michaelliao/web3stack
FAQ
Q：可以不用The Graph，自己写后端服务吗？
A：可以，很多需求，例如用户实名认证、发送Email是The Graph服务无法支持的，必须自己编写后端服务，配合数据库实现。
Q：可以同时支持多链吗？
A：可以，用户在钱包切换链时，DApp可以通过chainChanged事件拿到链ID，提前配置好链ID与不同链的合约地址，就可以正常在不同链调用不同合约。
Q：可以支持多种钱包吗？
A：可以，需要使用Web3Modal这个库，能简化连接多个钱包的代码。
小结
从本文给出的完整示例来看，Web3全栈开发，最适合前端开发人员。当年国外有个前端开发叫Hayden，在17年失业了，他决定自学Solidity并花了几个月的时间为以太坊开发了一个DeFi应用，后来这个应用火爆了，它叫Uniswap。
Comments
Make a comment
Sign in to make a comment
Author: 廖雪峰
Publish at: ...
关注公众号不定期领红包：
加入知识星球社群：
关注微博获取实时动态：
廖雪峰的官方网站
©Copyright 2019-2021
Powered by iTranswarp
Feedback
License
如何学习区块链开发? - 知乎
如何学习区块链开发? - 知乎首页知乎知学堂发现等你来答切换模式登录/注册区块链(Blockchain)区块链革命（书籍）区块链开发指南（书籍）区块链创业公司区块链技术如何学习区块链开发?准备一颗心扑在区块链上面了，自学了go语言和solidity但是不知道能干什么显示全部 关注者384被浏览353,063关注问题写回答邀请回答好问题 213 条评论分享40 个回答默认排序知乎用户闲话少说，这篇将告诉你一个完整的 Web3.0 开发路线图，让你成为一个合格的区块链开发者最基础的部分前后端开发知识去中心化应用 DApp智能合约开发知识一些重要的工具0x01 最基础的部分要想成为一个区块链开发者，首先要成为一个开发者，这就需要理解计算机科学（Computer Science）。《哈佛大学 CS50 公开课》能帮助你理解最基础的计算机及数据处理。当你对计算机基础有了一定了解后，就可以开始学习区块链基础了，因为你必须要理解什么是区块链，它如何工作以及它为什么能打破交易方式。目前区块链技术已经不局限于数字货币，它越来越多地多的具备了分布式云计算的能力，使之能够运行各种去中心化的应用程序（DApp）学习区块链基础技术，可以参考我的另一篇文章《区块链学习资源（基础篇）》0x02 前后端开发知识在学习开发 DApp 之前，我们需要了解一定的前后端的知识，前端方面需要掌握 HTML、CSS、纯 JavaScript 语言以及 React 或 Vue 之类的框架。这里推荐免费的《FreeCodeCamp 课程》，可以从零开始学习前端知识。而去中心化应用的后端，与一般应用的后端不太一样，主要区别在于区块链技术使用的是去中心化存储，而普通应用往往使用中心化的数据库或对象存储。尽管如此，但他们背后的技术思想是类似的，因此不太建议直接跳过普通 Web 应用的基础开发原理而投身于 Web 3.0 的开发，你依然需要明白如何连接数据库、如何创建 RESTful API 以及编写各种业务逻辑等。因此学习下 NodeJS、Express、各种数据库（MySQL、PostgreSQL等），练习编写应用接口等是最佳路径。0x03 去中心化应用 DApp在学习完最基础的区块链、节点、共识等一系列知识后，就是时候来学习如何在此之上构建应用程序了，而构建在区块链之上的应用程序我们通常称为去中心化应用（DApp），它包括：应用的前端页面：使用 JavaScript 或 React、Vue 等框架构建的前端应用程序应用的后端系统：使用 Solidity 或者 Rust 构建在区块链上的智能合约系统学习开发 DApp 之前，建议了解一下以太坊的知识，如果把区块链比做计算机，那以太坊可视为操作系统，任何应用程序都需要运行在操作系统上，以太坊就是其中一种，也是最为人所知的一种。《以太坊官网中文版》有助于了解以太坊的知识0x04 智能合约开发知识所谓智能合约，就是跑在以太坊网络上的小程序。每个 Web 3.0 开发者都必须了解以太坊的工作原理。智能合约通常是自动执行的，它可以使用 Solidity 或者 Rust 等语言编写，通过编写业务逻辑把信息存储到区块链上，就像普通应用把数据存到数据库中一样。以下是一些学习 Solidity 合约的资源：CryptoZombies （极力推荐）FreeCodeCamp 的 16 小时智能合约课程0x05 一些重要的工具工欲善其事，必先利其器，学习完智能合约的课程手边总要经常使用一些工具：开发语言的工具Solidity 文档OpenZeppelinChainlink重要框架Remix - Ethereum IDEHardhat | Ethereum development environment for professionals by Nomic LabsBrownieDApp Tools高级概念NFTDAODeFiUpgradeability其他工具Faucets | ChainlinkEtherscanAlchemy - Blockchain API and Node ServiceMoralis » The Ultimate Web3 Development Platform编辑于 2023-06-09 17:16赞同 55024 条评论分享收藏喜欢收起汇智网学习软件编程 关注先看你的目的是什么，再决定接下来做什么。发布于 2020-03-11 22:23赞同1 条评论分享收藏喜欢
前端与区块链 - 知乎
前端与区块链 - 知乎首发于前端经验分享切换模式写文章登录/注册前端与区块链Echo【可内推鹅厂】switch及前端学习资源可私聊前言区块链作为近几年十分热门的互联网技术，作为一个合格的程序猿应当不忘初心，保持对技术的热情去了解去学习。并且 Node.js 可以用来开发区块链，solidity开发智能合约，其也是类JavaScript 的语言，因此区块链还是十分适合前端工程师了解学习的。一、区块链是什么区块链（block chain）字面意思是包含信息的区块链接一起组成的信息链条, 本质是分布式、不可篡改、信息透明化的、昂贵的、缓慢的数据库。其发展分为三个部分：区块链 1.0 比特币白皮书区块链 2.0 以太坊 （智能合约）区块链 3.0 超级账本fabric 、联盟链有以下特性：分布式数据库缓慢的，更新区块链数据需要时间（因此不能做实时性应用）不可篡改去中心化+透明自带价值传递，即不需要通过银行、支付宝等第三方媒介进行交易1、区块链黑话科普本质就是分布式数据库，数据不可篡改（或者说篡改难度非常大，改了一条链上一个区块的内容就必须同时更改这条链上其他所有区块的内容）比特币造就了区块链，但是不是等于的关系2、村庄小例子，理解记账、挖矿、共识等机制村庄 1.0采用中心记账，有专门的账房先生，记账转账等都由账房先生处理，即本中心式，效率高；缺点是如果账房生病，则系统崩溃，而且账房先生可以随意篡改数据，比如之前你转账给老王100块，他可以改为0，你也没办法为自己证明确实已经转账了。村庄 2.0中本聪提出了点对点记账的方式，即人人都能记账，每人有一个账本，账本的每一页记录着交易信息，账本哈希值（用来唯一标示账本处理信息），时间，以及上一页的哈希。村民的每一次转账都得用自己家的大喇叭通知全村庄（即p2p广播）。特点： 有人生病或者出去旅游别人找到不到他没关系，找村庄里任何一个人同步一下账本即可；但是记账比较麻烦，因此设置了手续费，而且为了鼓励记账，产生了挖矿以及矿工奖励的概念；挖矿就是用算数学题的方式（只能暴力破解），通过挖矿所用的时间等标识工作量3、数字货币有EOS、USDT（与美元1：1兑换，由bitfinex交易所发行，是价格最稳定的数字货币，是数字货币世界的基础货币之一，一般先用钱买USDT，再用它去购买比特币或者以太坊）、LTC、DOGE、Ripple等等数字货币衍生品有ICO(众筹)、交易所（场外、撮合）以及钱包价值：供需决定价格，由于代码量稳定因此数量稳定，而且支付信息采用匿名方式（一个字符串）但是谁都可以看到交易信息，透明中立，而且支付方便二、区块链前景展望基于区块链的特性的各种脑洞大开的应用数字货币+支付共享经济+信用传递食品安全，即共享不可篡改的检查信息等（阿里正在进行这方面的研究）数字版权：很多盗版视频其实很难认证他时盗版的，得走法律流程，得打官司，而如果在区块链是发布视频，这谁先发布的一下子就可以查出来，而且本身是不可篡改的因此可以证明版权众筹：防止捐钱后钱进入了黑盒，被贪污了；一切交易都是透明的合约：一起开公司不用走法律流程、签合同，直接在区块上写明合约，由于代码不可篡改，符合条件便会执行，因此十分可信可靠游戏、音乐视频可编程社会：定制化学术、选举1、区块链现在最广泛的应用比特币：第一个应用，诞生于密码朋克，总量2100W，运行了8年了以太坊：下一代区块链，众多高级功能，如智能合约，DAPP（如养猫等游戏。去中心化的分布式应用，数据不可篡改）EOS、USDT、LTC、DOGE、Ripple等数字货币IPFS （星际文件系统），相当于无限量的百度网盘，而且永远不会消失，可通过哈希值迅速找到文件超级账本fabric，区块链3.0 的代表项目，主要用于交易身份认证NameCoin 键值数据库，IPFS实际上是它的一个文件系统2、区块链场景具体应用领域公有链：比如以太坊、比特币，信息透明化、不可篡改、不受第三方控制私有链：比如基于公有链建立一条公司内部的区块链联盟链：区块链3.0十分火爆的一个概念，即信息只对特定的一个团体开放，比如想交接学习资料，联系所有费教育公司组成一个教育链3、学习区块链的辅助工具迷你区块链 iblockchain,这是github上的一个开源项目，可以帮助理解区块链，有以下主要功能：4、区块长什么样想要查看当前的区块链，你需要在命令提示行下输入blockchain或者bc。你应该会看到像下面的图片一样的一个区块。 区块链上的一个区块： Index：是哪一个区块（创世块的索引是0）？Hash：区块是否有效？Previous Hash：前一个区块是否有效？Timestamp：什么时候添加的区块？Data：什么信息存储在区块上？Nonce：在找到有效区块之前，我们进行了多少次迭代？ 创世区块：每一个区块链都是从 创世区块（Genesis Block）开始的。正如你们将要在后面看到的，区块链上的每一个区块都依赖于前一个区块。所以，需要创世块来挖出我们的第一个区块。 当一个新的区块被开采时会发生什么？让我们挖出我们的第一个区块。在命令行中输入mine freeCodeCamp。区块链查看链上最新的区块来获取index和previous hash。在这个案例下创世块是最新的区块。 Index：0+1=1Previous Hash：0000018035a828da0…Timestamp：区块被添加的时间Data：freeCodeCampHash：？？？Nonce：？？？ Hash是如何计算的？哈希值是唯一标识数据的固定长度的数值。Hash是通过将Index、Previous Hash、Timestamp、Data和Nonce作为输入值来计算的。CryptoJS.SHA256(index+previousHash+timestamp+data+nonce)SHA256算法将会依据这些输入计算出一个唯一Hash值。同样的输入总是会返回同样的结果。你是否注意到区块Hash中的四个前导0？四个前导0是一个有效Hash的最低要求。所需前导0的数量被称之为难度 isValidNewBlock (newBlock, previousBlock) {
const newBlockHash = this.calculateHashForBlock(newBlock)
if (previousBlock.index + 1 !== newBlock.index) {
console.log('[错误]: 新区快index不对')
return false
} else if (previousBlock.hash !== newBlock.previousHash) {
console.log(`[错误]: 第${newBlock.index}个区块的previousHash不对`)
return false
} else if (newBlockHash !== newBlock.hash) {
console.log(`[错误]: 第 ${newBlock.index}个区块hash不对,算出的是${newBlockHash} 区块里本来的hash是${newBlock.hash} 看来数据被篡改了`)
return false
} else if (newBlockHash.slice(0, this.difficulty) !== '0'.repeat(this.difficulty)) {
return false
} else if (!this.isValidTrans(newBlock.data)) {
console.log('[错误]: 交易不合法')
return false
} else {
return true
}
}Nonce是什么？Nonce是用来查找一个有效Hash的次数。generateNewBlock () {
const nextIndex = this.blockchain.length
const previousHash = this.getLastBlock().hash
let data = this.data
let timestamp = new Date().getTime()
let nonce = 0
let hash = this.calculateHash(nextIndex, previousHash, timestamp, data, nonce)
while (hash.slice(0, this.difficulty) !== '0'.repeat(this.difficulty)) {
nonce = nonce + 1
timestamp = new Date().getTime()
hash = this.calculateHash(nextIndex, previousHash, timestamp, data, nonce)
}
return {
index: nextIndex,
previousHash,
timestamp,
nonce,
hash,
data: this.data
}
}Nonce迭代到直到Hash有效。在我们的案例中，一个有效的Hash至少要拥有4个前置0。查找与有效Hash对应的Nonce的过程就是挖矿。随着难度的增加，可能的有效Hash数量就会减少。伴随着有效Hash的减少，我们需要更强的算力来查找有效Hash。挖矿是写入数据，是昂贵的操作，需要设置一定的难度，Nonce则是难度系数的体现。6. 为什么这么重要？这些机制非常重要，它们使区块链不可变。如果我们有这么一个区块链“A->B->C”，而且有一个人想要改变区块A上的数据。那么会发生什么呢？区块A上的数据改变了。区块A的hash改变了，因为数据被用来计算hash。区块A失效了，因为它的hash不再有4个前导0。区块B的hash改变了，因为区块A的hash被用来计算区块B的hash。区块B失效了，因为它的hash不再有4个前导0。区块B的hash改变了，因为区块C的hash被用来计算区块B的hash。区块C失效了，因为它的hash不再有4个前导0。改变一个区块的唯一方法就是将这个区块重新挖一遍，接下来是所有的区块。由于总是有新的区块被添加，因此改变区块几乎是一件不可能的事。5、区块链思维导图总结一下用 Node.js 开发区块链的思路6、智能合约开发DAPP目前区块链更广泛的应用是它的二代技术，强类型语言solidity开发智能合约，truffle框架自动化部署编译合约代码，web3引入合约到前端代码中，再结合前端技术展示页面，根据合约制定的规则响应用户的操作，就可以做去中西化的应用DAPP，比如众筹、宠物领养等等。DAPP中，用户写入数据（比如添加众筹课程、领养宠物等）是需要支付比特币的，这时就需要用到 chrome 插件 metamask 比特币钱包,具体如何安装插件以及开发DAPP，truffle官网中有详细demo教程，就不一一赘述了： DAPP宠物领养开发教程。以下是开发 DAPP 的思维导图：本人的领养宠物项目：zyqq/pet-shop，用react+web3连接智能合约开发了领养宠物的DAPP，代码展示了前端如何链接区块链三、总结“志存高远，脚踏实地。是前端，但不止于前端”，学无止境，大伙共勉。参考文章：1. 写给前端的区块链开发入门指南2. 前端技术和区块链技术的结合点在哪里发布于 2022-11-30 09:20・IP 属地广东前端开发区块链(Blockchain)赞同 1添加评论分享喜欢收藏申请转载文章被以下专栏收录前端经验分享总结前端做项目过程中的一
区块链前端开发实战 - 知乎
区块链前端开发实战 - 知乎专栏区块链前端开发实战切换模式写文章登录/注册区块链前端开发实战第一个区块链前端开发专栏拍岸 · 4 篇内容推
以太坊开发教程 | ethereum.org
发教程 | ethereum.org跳转至主要内容学习用法构建参与研究搜索语言 ZH帮助更新此页面本页面有新版本，但现在只有英文版。请帮助我们翻译最新版本。翻译页面没有错误！此页面未翻译，因此特意以英文显示。不再显示以太坊开发教程欢迎来到我们管理的社区教程的列表。提交一个教程alchemy (8)create-eth-app (2)defi (2)erc-20 (5)erc-20 (一种以太坊代币） (1)erc-721 (5)ethers.js (5)ganache (2)hardhat (3)javascript (5)pinata (1)python (2)react (1)remix (3)solidity (33)sql (1)the graph (1)truffle (3)vyper (1)waffle (6)web3.js (4)web3.py (1)websocket (1)事件 (1)二层网络 (2)交易 (3)代币 (3)以太坊虚拟机 (1)入门指南 (3)共识层 (1)前端 (3)区块链 (1)反编译器 (1)可组合性 (1)图表 (1)存储 (2)安全性 (7)完整性 (1)客户端 (2)工厂 (1)形式化验证 (1)执行层 (1)操作码 (1)智能合同 (8)智能合约 (21)查询 (3)查询中 (1)模拟 (2)模糊测试 (1)测试 (11)用户界面 (1)节点 (3)逆向工程 (1)通证 (2)部署 (3)钱包 (1)铸币机 (1)链桥 (1)静态分析 (1)非同质化代币 (1)预言机 (1)默克尔 (1)如何通过刷写MicroSD卡将您的Raspberry Pi 4变为一个节点高级EthereumOnArm • 2022年6月10日 •10 分钟刷写树莓派 4，插入以太网电缆，连接固态硬盘并打开设备电源，将树莓派 4 变为以太坊全节点 + 验证者。客户端执行层共识层节点实现 Calldata 优化的精简 ABI中级Ori Pomerantz • 2022年4月1日 •21 分钟面向乐观卷叠优化智能合约二层网络乐观解决方案标准链桥合约演示中级Ori Pomerantz • 2022年3月30日 •42 分钟乐观解决方案标准链桥如何运作？ 为什么它会这样工作？solidity链桥二层网络离线数据完整性的默克尔证明高级Ori Pomerantz • 2021年12月30日 •14 分钟在链上确保链下数据的完整性默克尔完整性存储对合约进行逆向工程高级Ori Pomerantz • 2021年12月30日 •38 分钟没有源代码时如何理解合约以太坊虚拟机操作码逆向工程反编译器非同质化代币铸币机教程中级smudgil • 2021年10月6日 •42 分钟在本教程中，你将构建一个非同质化代币铸币机，并学习如何通过使用 MetaMask 和 Web3 工具将智能合约连接到 React 前端来创建全栈去中心化应用程序。solidity非同质化代币铸币机alchemy智能合约前端用户界面钱包pinata如何将 Tellor 设置为您的预言机初学者Tellor • 2021年6月29日 •3 分钟将 Tellor 预言机集成到协议中的指南solidity智能合同预言机通过 SQL 学习以太坊基础主题初学者Paul Apivat • 2021年5月11日 •12 分钟本教程帮助读者通过使用结构化查询语言 (SQL) 查询链上数据，了解以太坊的基本概念，包括交易、区块和燃料。sql查询交易Uniswap-v2 合约概览中级Ori Pomerantz • 2021年5月1日 •81 分钟Uniswap-v2 合约是如何工作的？ 为什么要如此编写？solidity如何铸造非同质化代币（非同质化代币教程系列 2/3）初学者苏米-穆德吉尔 • 2021年4月22日 •13 分钟本教程描述了如何使用我们的智能合约和 Web3 在以太坊区块链上铸造非同质化代币。erc-721alchemysolidity智能合约如何在钱包中查看您的非同质化代币（非同质化代币系列教程第 3/3 部分）初学者苏米-穆德吉尔 • 2021年4月22日 •3 分钟本教程介绍了如何在 MetaMask 上查看所持有的非同质化代币！erc-721alchemysolidity如何撰写和部署非同质化代币（非同质化代币教程系列 1/3）初学者Sumi Mudgil • 2021年4月22日 •21 分钟本教程是关于非同质化代币的系列教程的第一部分，将带您逐步了解如何使用以太坊和星际文件系统 (IPFS) 编写和部署非同质化代币（ERC-721 代币）智能合约。erc-721alchemysolidity智能合约使用 ethers.js 发送代币初学者Kim YongJun • 2021年4月6日 •3 分钟使用 ethers.js 发送代币的初学者入门指南。ethers.jserc-20代币Vyper ERC-721 合约概览初学者Ori Pomerantz • 2021年4月1日 •25 分钟Ryuya Nakamura 编写的 ERC-721 合约及其原理vypererc-721python针对初学者的智能合约指南初学者elanh • 2021年3月31日 •17 分钟关于编写和部署一个基于以太坊的简单智能合约的入门教程。solidityhardhatalchemy智能合约入门指南部署ERC-20 合约概览初学者Ori Pomerantz • 2021年3月9日 •35 分钟OpenZeppelin 的 ERC-20 合约内容和解读solidityerc-20用 Waffle 库来测试简单的智能合约初学者Ewa Kowalska • 2021年2月26日 •9 分钟初学者教程智能合约soliditywaffle测试使用 InfluxDB 和 Grafana 监测 Geth中级Mario Havel • 2021年1月13日 •7 分钟客户端节点创建并部署一个去中心化金融应用程序中级strykerin • 2020年12月31日 •14 分钟将 ERC20 代币存入智能合约，铸造流动性矿池代币soliditydefiweb3.jstruffleganache智能合约使用WebSocket初学者Elan Halpern • 2020年12月1日 •8 分钟有关使用WebSocket和Alchemy进行JSON-RPC请求并订阅事件的指南。alchemywebsocket查询javascriptWaffle：动态模拟和测试合约调用中级Daniel Izdebski • 2020年11月14日 •10 分钟有关使用动态模拟和测试合约调用的高级Waffle教程waffle智能合约solidity测试模拟使用 Web3 发送交易初学者Elan Halpern • 2020年11月4日 •14 分钟本文是面向初学者的指南，介绍如何用 Web3 发送以太坊交易。 向以太坊区块链发送交易主要有三个步骤：创建、签署和广播。 我们将对三个方面进行讨论。交易web3.jsalchemy以太坊开发入门初学者Elan Halpern • 2020年10月30日 •6 分钟这是一份针对以太坊开发入门的初学者指南。 我们将带领您从启动一个 API 终端节点开始，到提出一个命令行请求，再到编写您的第一个 web3 脚本。 无需区块链的开发经验！javascriptethers.js节点查询alchemyWaffle使用hardhat和ethers设置hello world的教程初学者MiZiet • 2020年10月16日 •5 分钟使用hardhat和ethers.js制作您的第一个Waffle项目waffle智能合约solidity测试hardhatethers.js使用 Waffle 测试 ERC-20 代币中级Vladislav Starostenko • 2020年10月16日 •44 分钟学习如何测试 Solidity 智能合约，以及如何将智能合约匹配器与 Waffle 配合使用waffle智能合约solidity测试erc-20使用 Waffle 测试 ERC-20 代币中级Vladislav Starostenko • 2020年10月16日 •44 分钟学习如何测试 Solidity 智能合约，以及如何将智能合约匹配器与 Waffle 配合使用。waffle智能合约solidity测试erc-20Waffle使用hardhat和ethers设置hello world的教程初学者MiZiet • 2020年10月16日 •5 分钟使用hardhat和ethers.js制作您的第一个Waffle项目waffle智能合约solidity测试hardhatethers.js面向 Python 开发者的以太坊介绍，第一部分初学者Marc Garreau • 2020年9月8日 •17 分钟这是一篇介绍以太坊开发的文章，对那些熟悉 Python 编程语言的人来说尤其有用。入门指南python区块链web3.py智能合约安全工具指南中级Trailofbits • 2020年9月7日 •9 分钟三种不同的测试和程序分析技术概述solidity智能合同安全性智能合约安全清单中级Trailofbits • 2020年9月7日 •4 分钟编写安全智能合约的推荐工作流程智能合约安全性solidity智能合约安全准则中级Trailofbits • 2020年9月6日 •7 分钟构建您的dapp时要考虑的安全准则清单solidity智能合约安全性The Graph：修复Web3数据查询中级Markus Waas • 2020年9月6日 •11 分钟区块链就像一个数据库，但是没有SQL。 所有数据就在那里，但是没有办法访问它。 让我告诉您如何使用The Graph和GraphQL解决这个问题。solidity智能合约查询中the graphcreate-eth-appreact通证集成检查清单中级Trailofbits • 2020年8月13日 •7 分钟与通证交互时需要考虑的事项检查清单solidity智能合同安全性通证如何缩减合约以规避合约大小限制中级Markus Waas • 2020年6月26日 •9 分钟您可以做些什么避免智能合约变得太大？solidity智能合约存储truffle如何使用Slither发现智能合约漏洞中级Trailofbits • 2020年6月9日 •11 分钟如何使用Slither自动发现智能合约中的漏洞solidity智能合同安全性测试静态分析Solidity 和 Truffle 持续集成设置中级Markus Waas • 2020年6月5日 •6 分钟如何为 Truffle 测试设置 Travis 或 Circle CI 以及有用的插件solidity智能合同测试truffleganache如何在测试中模拟 Solidity 智能合约中级Markus Waas • 2020年5月2日 •6 分钟为什么应该在测试时模拟合约solidity智能合同测试模拟使用 create-eth-app 启动去中心化应用程序前端开发初学者Markus Waas • 2020年4月27日 •10 分钟如何使用 create-eth-app 及其功能的概述create-eth-app前端javascriptethers.js图表defi通过JavaScript调用智能合约初学者jdourlens • 2020年4月19日 •4 分钟以DAI通证为例展示如何通过JavaScript调用智能合约函数交易前端javascriptweb3.js设置 web3.js 以用 JavaScript 操作 Ethereum 区块链。初学者jdourlens • 2020年4月11日 •4 分钟如何使用智能合约与使用 Solidity 语言的代币进行交互web3.jsjavascript如何使用 Echidna 测试智能合约中级Trailofbits • 2020年4月10日 •18 分钟如何使用 Echidna 自动测试智能合约solidity智能合同安全性测试模糊测试通过Solidity智能合约转移和批准ERC-20通证中级jdourlens • 2020年4月7日 •8 分钟如何使用智能合约与使用 Solidity 语言的代币进行交互智能合约代币solidity入门指南erc-20 (一种以太坊代币）通过solidity与其他合约进行交互高级jdourlens • 2020年4月5日 •5 分钟如何对已经存在的合约进行智能合约的部署，并与其进行交互智能合约solidityremix工厂部署可组合性了解ERC-20通证智能合约初学者jdourlens • 2020年4月5日 •6 分钟如何在以太坊测试网络中部署第一个智能合约智能合约通证solidityerc-20部署第一个智能合约初学者jdourlens • 2020年4月3日 •5 分钟介绍如何在以太坊测试网络上部署您第一个智能合约智能合约remixsolidity部署使用事件记录智能合约中的数据中级jdourlens • 2020年4月3日 •3 分钟智能合约事件的简介，以及如何利用事件来记录数据智能合约remixsolidity事件如何实现ERC-721市场中级Alberto Cuesta Cañada • 2020年3月19日 •10 分钟如何在一个去中心化的分类信息板上销售代币化的物品。智能合约erc-721solidity代币如何使用Manticore来发现智能合约漏洞中级Trailofbits • 2020年1月13日 •15 分钟如何使用Manticore来自动发现智能合约漏洞solidity智能合同安全性测试形式化验证本教程对你有帮助吗？是否网站最后更新: 2024年3月13日(opens in a new tab)(opens in a new tab)(opens in a new tab)学习学习中心什么是以太坊？什么是以太币 (ETH)？以太坊钱包什么是 Web3？智能合约Gas fees运行节点以太坊安全和预防欺诈措施测试中心以太坊词汇表用法指南选择钱包获取以太币Dapps - 去中心化应用稳定币NFT - 非同质化代币DeFi - 去中心化金融DAO - 去中心化自治组织去中心化身份质押ETH二层网络构建构建者首页教程相关文档通过编码来学习设置本地环境资助基础主题用户体验/用户界面设计基础Enterprise - Mainnet EthereumEnterprise - Private Ethereum参与社区中心在线社区以太坊活动为 ethereum.org 做贡献翻译计划以太坊漏洞悬赏计划以太坊基金会以太坊基金会的博客(opens in a new tab)生态系统支持方案(opens in a new tab)Devcon(opens in a new tab)研究以太坊白皮书以太坊路线图安全性增强以太坊技术史开放研究以太坊改进提案 （Eip）以太坊治理关于我们以太坊品牌资产Code of conduct工作机会隐私政策使用条款缓存政策联系我们(opens in a new tab)本页面对你有帮如何成为一个区块链开发工程师？ - 知乎
如何成为一个区块链开发工程师？ - 知乎首页知乎知学堂发现等你来答切换模式登录/注册工程学工程师区块链(Blockchain)如何成为一个区块链开发工程师？关注者8被浏览7,645关注问题写回答邀请回答好问题添加评论分享5 个回答默认排序自动聊天挣银子 关注第一关，如何成为开发工程师？工程师有各种各样的，我们这里特指有一定的计编程基础，至少有一门语言编程经验，接受过写代码debug洗礼，爱过痛过，累过哭过的开发工程师，俗称“码农”。而那些只是看过几天某个流行语言的语法或者视频，或者只是写过hello world是远远不够的。如果你恰好是熟悉go或者c++语言，那么你在学习以太坊或者比特币这些经典的区块链技术实现的时候会更具有优势。上面说的都是些外功，而内功则不容易看出高低。对于开发工程师，不仅需要具有一定外功基础，也要日积月累修炼内功。在区块链技术中，内功包括了高等数学、近世代数、离散数学、图论等数学基础，还有包括了诸如计算机组成，编译原理，计算机网络，数据结构，操作系统，算法，设计模式，网络安全等计算机基础。这些东西类似武林秘籍中的“易筋经”，美元符号短期打架帮不上忙，但是时间越长，内功的作用就会越明显。作为一个区块链开发工程师，必须有过硬的实力在手，才能成为高薪就业的资本。一个好的区块链工程师需要掌握哪些必备技能?和小编一起看下去。 区块链中的核心技术 1)、P2P网络：点对点交易，没有中间方; 2)、分布式存储：所有节点信息统一，交易不可篡改，修改一个节点信息，需要其他节点共同修改; 3)、加密算法：确保交易不可篡改、无法抵赖和破坏，且保护了用户隐私信息和交易记录的信息安全。交易可追溯; 4)、共识算法(共识机制)：实现自动网络共识; 5)、智能合约：通过自动化脚本操作数据。 四个阶段的学习内容如下：01区块链入门篇：人人都懂区块链数字货币介绍、比特币介绍、玩转比特币钱包、比特币账号机制、钱包安全、共识问题概念、密码学加密解密算法、拜占庭将军问题等02区块链编程篇：零基础学区块链编程计算机入门、字符集篇、前端开发入门、数据库入门等。03区块链编程篇：Go语言编程初识Go语言、Go基本语法、流程控制、Go内置容器——数组及切片等04区块链教程：玩转比特币掌握一定的编程基础并有实践经验，当然要是会go和js后面学起来能节省学语言的时间学习区块链技术原理，这里需要学习密码学知识，共识算法，p2p网络等学习solidity面向对象编程，以太坊应用的开发、部署、测试接下来学习主链的开发，为了更好的学习，我们先来学习前辈以太坊、比特币的源码实现最后，需要我们自己完整的设计并实现自己的主链和应用开发。附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读/书籍书单大全：（点击右侧 即可打开个人博客内有干货）：技术干货小栈=====>>①【Java大牛带你入门到进阶之路】<<=========>>②【算法数据结构+acm大牛带你入门到进阶之路】<<========>>③【数据库大牛带你入门到进阶之路】<<==========>>④【Web前端大牛带你入门到进阶之路】<<=========>>⑤【机器学习和python大牛带你入门到进阶之路】<<=========>>⑥【架构师大牛带你入门到进阶之路】<<==========>>⑦【C++大牛带你入门到进阶之路】<<=========>>⑧【ios大牛带你入门到进阶之路】<<=========>>⑨【Web安全大牛带你入门到进阶之路】<<==========>>⑩【Linux和操作系统大牛带你入门到进阶之路】<<=====天下没有不劳而获的果实，望各位年轻的朋友，想学技术的朋友，在决心扎入技术道路的路上披荆斩棘，把书弄懂了，再去敲代码，把原理弄懂了，再去实践，将会带给你的人生，你的工作，你的未来一个美梦。发布于 2022-06-23 14:26赞同 3添加评论分享收藏喜欢收起UT.eth互联网翻滚 区块链跳舞 关注基本上区块链工程师分有：1. 链的工程师（需要了解算法及共识算法）2. 交易所的工程师（需要了解许多的链的串接跟使用）3. 应用开发（DApp）的工程师（需要了解智能合约以及前端的串接）那我们大多数如果要成为Dapp 工程师，我们需要了解以太坊和智能合约！基本上选定一个主题或主轴，就可以先多找几个网页开出来摆着，若有不懂或有疑虑的地方先笔记起来，若不懂的地方十分的关键那就利用「搜寻关键字」的方式来解决。假如说你遇到以太坊智能合约代币程式码不懂的时候：1.Ethereum Token SmartContract (以太坊代币智能合约)2.DApp ERC20 Token （区块链应用ERC20 代币）基本上下好关键字如果这样找不到的话就在最后+ Github XD然后可以先去玩CryptoZombie，了解基础的智能合约撰写方式！Dapp 工程师也有分链？每款Dapp开发的核心语言也随着链大不相同，像是以太坊是使用Solidity而EOS是采用C++ ..等，那我们要怎么选择自己该要从哪里开始学呢？基本上，蛮建议新手就是看哪边资源多就往那边学！目前仍然是建议大家往Ethereum（以太坊）上的开发来学习，目前以太坊上的开发者够多且资源也大概也有两三年的累积量相较于其他的主链来说已经算是相对丰富了。最后来为大家总结一下，要成为一个区块链工程师，要先选择自己的流派（应用开发(DApp)派、创建链派、交易所串接链派）。若是DApp派的就要再度选择要哪条主链（仅以最多用户的三条链来介绍）1.Ethereum （以太坊）2.Solidity (智能合约)3.Tron （波场）4.Solidity 智能合约5.Eos （柚子）6.C++ (智能合约)若是创建链派的1.后端语言（Golang）2.算法（Consensus 共识算法）3.区块链知识科普4.密码学若是交易所串接派的1.了解各条链的内容2.并学会如何串接各条链编辑于 2022-07-06 16:47赞同 4添加评论分享收藏喜欢
前端开发新趋势：Web3、区块链与虚拟现实-腾讯云开发者社区-腾讯云
新趋势：Web3、区块链与虚拟现实-腾讯云开发者社区-腾讯云IT_陈寒前端开发新趋势：Web3、区块链与虚拟现实关注作者腾讯云开发者社区文档建议反馈控制台首页学习活动专区工具TVP最新优惠活动文章/答案/技术大牛搜索搜索关闭发布登录/注册首页学习活动专区工具TVP最新优惠活动返回腾讯云官网IT_陈寒首页学习活动专区工具TVP最新优惠活动返回腾讯云官网社区首页 >专栏 >前端开发新趋势：Web3、区块链与虚拟现实前端开发新趋势：Web3、区块链与虚拟现实IT_陈寒关注发布于 2023-12-13 20:10:482390发布于 2023-12-13 20:10:48举报文章被收录于专栏：开发经验开发经验文章目录Web3：下一代互联网区块链技术去中心化应用程序（DApps）区块链：重塑数字世界数字钱包NFT（非同质化代币）虚拟现实：沉浸式体验WebVR和WebXR三维图形新挑战与机会性能与复杂性安全性创新与创造力结论 欢迎来到Java学习路线专栏~前端开发新趋势：Web3、区块链与虚拟现实☆* o(≧▽≦)o *☆嗨~我是IT·陈寒✨博客主页：IT·陈寒的博客该系列文章专栏：Java学习路线其他专栏：Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习文章作者技术和水平有限，如果文中出现错误，希望大家能指正 欢迎大家关注！ ❤️随着技术的不断演进，前端开发领域也在不断变化和发展。Web3、区块链和虚拟现实（VR）是当前前端开发的新趋势，它们为开发者提供了更多的机会和挑战。在本文中，我们将深入探讨这些新趋势，并了解它们如何改变前端开发的面貌。在这里插入图片描述Web3：下一代互联网Web3代表着下一代互联网，它将互联网的发展带入了一个新的阶段。与传统的Web2相比，Web3更加去中心化，更加用户掌握数据的权利。这个趋势对前端开发者来说带来了一些重要的改变。区块链技术区块链是Web3的核心技术之一。它是一种去中心化的分布式账本技术，可确保数据的透明性和安全性。在前端开发中，区块链可以用于创建去中心化的应用程序，这意味着用户可以完全控制自己的数据。开发者可以使用区块链技术来创建数字身份验证、智能合同、去中心化金融应用（DeFi）等功能。下面是一个使用以太坊区块链的智能合同示例：pragma solidity ^0.8.0;
contract SimpleStorage {
uint256 storedData;
function set(uint256 x) public {
storedData = x;
}
function get() public view returns (uint256) {
return storedData;
}
}复制去中心化应用程序（DApps）前端开发者可以使用Web3技术构建去中心化应用程序（DApps）。DApps是基于区块链技术构建的应用程序，它们在去中心化的网络上运行，不依赖于中心化的服务器。这为用户提供了更高的数据安全性和隐私性。// 使用Web3.js连接以太坊网络
const Web3 = require('web3');
const web3 = new Web3('https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID');复制区块链：重塑数字世界区块链技术不仅改变了互联网，还对金融、供应链管理、社会治理等领域产生了深远的影响。在前端开发中，区块链提供了新的机会和挑战。数字钱包数字钱包是区块链世界的入口，它允许用户管理他们的加密资产。前端开发者可以创建用户友好的数字钱包应用，提供安全的密钥管理和交易签名功能。// 使用Web3.js创建数字钱包
const ethers = require('ethers');
const wallet = ethers.Wallet.createRandom();复制NFT（非同质化代币）NFT是区块链上的数字资产，代表着数字世界中的唯一性。前端开发者可以创建NFT市场应用，用户可以在其中购买和出售数字艺术品、虚拟地产和虚拟物品。// 使用NFT合约创建一个新的NFT
const contract = new web3.eth.Contract(abi, contractAddress);
const tokenId = 1;
const owner = '0x0123456789abcdef'; // 拥有者的地址
contract.methods.createNFT(tokenId, owner).send({ from: owner });复制虚拟现实：沉浸式体验虚拟现实是一种允许用户沉浸于数字环境中的技术。VR技术已经成为游戏、培训、医疗和娱乐等领域的重要组成部分。前端开发者可以利用VR技术创造引人入胜的虚拟体验。WebVR和WebXRWebVR和WebXR是使虚拟现实内容在Web浏览器中运行的开放式标准。前端开发者可以使用WebVR和WebXR API来创建支持虚拟现实头戴设备的Web应用程序。// 使用WebXR API启用虚拟现实
if ('xr' in navigator) {
navigator.xr.requestSession('immersive-vr').then((session) => {
// 创建虚拟现实场景
});
}复制三维图形创建虚拟现实应用程序需要大量的三维图形开发。前端开发者可以使用WebGL、three.js等工具来构建虚拟世界中的对象和场景。// 使用three.js创建3D场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();复制新挑战与机会随着Web3、区块链和虚拟现实技术的兴起，前端开发者面临着新的挑战和机会。性能与复杂性Web3应用程序通常需要与区块链网络进行交互，这可能导致性能和响应时间的挑战。前端开发者需要优化应用程序，以便快速响应用户的请求。在这里插入图片描述安全性加密货币和数字钱包的安全性至关重要。前端开发者需要确保用户的私钥和交易数据得到妥善保护，以防止黑客攻击。创新与创造力虚拟现实领域充满了创新和创造力的机会。前端开发者可以探索新的交互方式和虚拟体验，为用户提供沉浸式的感觉。在这里插入图片描述结论Web3、区块链和虚拟现实是前端开发的新趋势，它们正在重塑数字世界。前端开发者可以借助这些技术，创建去中心化应用、数字钱包、NFT市场和虚拟现实体验。然而，他们也需要面对性能、安全性和创新方面的挑战。无论如何，这些新趋势为前端开发者提供了更多的机会，使他们能够创造出引人入胜的数字体验。如果你是一名前端开发者，不妨尝试一下这些新技术，探索它们的无限可能性。本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。 原始发表：2023-10-15，如有侵权请联系 cloudcommunity@tencent.com 删除前往查看区块链web3开发者前端虚拟现实本文分享自 作者个人站点/博客 前往查看如有侵权，请联系 cloudcommunity@tencent.com 删除。本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！区块链web3开发者前端虚拟现实评论登录后参与评论0 条评论热度最新登录 后参与评论推荐阅读LV.关注文章0获赞0目录文章目录Web3：下一代互联网区块链技术去中心化应用程序（DApps）区块链：重塑数字世界数字钱包NFT（非同质化代币）虚拟现实：沉浸式体验WebVR和WebXR三维图形新挑战与机会性能与复杂性安全性创新与创造力结论相关产品与服务区块链云链聚未来，协同无边界。腾讯云区块链作为中国领先的区块链服务平台和技术提供商，致力于构建技术、数据、价值、产业互联互通的区块链基础设施，引领区块链底层技术及行业应用创新，助力传统产业转型升级，推动实体经济与数字经济深度融合。产品介绍2024新春采购节领券社区专栏文章阅读清单互动问答技术沙龙技术视频团队主页腾讯云TI平台活动自媒体分享计划邀请作者入驻自荐上首页技术竞赛资源技术周刊社区标签开发者手册开发者实验室关于社区规范免责声明联系我们友情链接腾讯云开发者扫码关注腾讯云开发者领取腾讯云代金券热门产品域名注册云服务器区块链服务消息队列网络加速云数据库域名解析云存储视频直播热门推荐人脸识别腾讯会议企业云CDN加速视频通话图像分析MySQL 数据库SSL 证书语音识别更多推荐数据安全负载均衡短信文字识别云点播商标注册小程序开发网站监控数据迁移Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档Copyright © 2013 - 2024 Tencent Cloud.All Rights Reserved. 腾讯云 版权所有登录 后参与评论00