构建 EOS 区块链浏览器
文/温国兵
这是「区块链技术指北」的第 35 篇文章。
如果对我感兴趣,想和我交流,我的微信号:Wentasy,加我时简单介绍下自己,并注明来自「区块链技术指北」。同时我会把你拉入微信群「区块链技术指北」。BTW,李笑来老师也加入了我的知识星球,文末有加入方式。
0x00 背景
前面的文章讲解了如何让 nodeos 支持将链上数据实时异构到 MySQL 以及如何部署开源的区块链浏览器 API,但问题来了,没有前端展示,对于用户而言不够直观。
0x01 部署
EOS 链上数据有了,API 也有了,剩下的就是前端了。EOSTracker 是较早开源的区块链浏览器,后端使用 PHP,前端使用 AngularJS,接下来我们讲解如何部署前端。
首先我们需要安装 nodejs,命令如下:
$ apt-get install curl python-software-properties $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ apt-get install nodejs $ node -v $ npm -v
接着 clone 代码,安装相关依赖。
$ git clone https://github.com/EOSEssentials/EOSTracker.git $ cd EOSTracker $ npm install $ npm install -g @angular/cli
0x02 测试
接着我们执行如下命令访问 EOSTracker。
$ ng serve --host 0.0.0.0
此步可能会遇到如下错误:
ERROR in ./node_modules/cipher-base/index.js Module not found: Error: Can't resolve 'stream' in '/data/EOSTracker/node_modules/cipher-base' ERROR in ./node_modules/hash-base/index.js Module not found: Error: Can't resolve 'stream' in '/data/EOSTracker/node_modules/hash-base' ℹ 「wdm」: Failed to compile.
我们可以执行如下命令解决上述问题,详情参考 此处。
node patch.js
再次执行 ng serve --host 0.0.0.0
,浏览器访问 http://xxx.xxx.xxx.xxx:4200即可访问浏览器。
问题来了,我们没有配置 API,这个数据是怎么读取的呢?原来默认读取的是 EOSTracker 提供的 API。假如我们要修改成自己的 API,怎么处理?很简单,两行代码解决。
$ vim src/environments/environment.ts $ vim src/environments/environment.prod.ts
将 apiUrl: 'https://api.eostracker.io'
修改成自己的 API 即可。
当然,我们同样可以给区块链添加域名以及配置 HTTPS,参考如下:
- How To Install Nginx on Ubuntu 16.04
- Configuring a Web Server
- How To Secure Nginx with Let's Encrypt on Ubuntu 16.04
0x03 小结
连续更新 3 篇文章,可以让读者从 0 到 1 构建区块链浏览器。区块链的强大魅力之处在于所有数据公开透明,任何人都可以同步全节点数据,任何人都可以追溯链上数据。希望能给读者带来帮助。
「区块链技术指北」同名 知识星球,二维码如下,欢迎加入。BTW,李笑来老师也加入了。
题图来自: © EOS / Block.one / eos.io
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 搞懂 Redis 缓存穿透、击穿、雪崩
- win10_opencv4.2_cuda11_vs2019 编译
- (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能
- Flutter ListView 列表控件
- 第18天:NLP实战(二)——用DNN实现手势识别
- 「0821更新」Flutter入门系列教程汇总
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
- 第19天:NLP实战(三)——用CNN实现微博谣言检测
- (Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知
- Flutter问题:Column里面嵌套两个SingleChildScrollView无法滚动
- 搞不懂JS中赋值·浅拷贝·深拷贝的请看这里
- 第20天:NLP实战(四)——用GRU模型实现电影评论情感分析
- Flutter SingleChildScrollView 滚动控件
- Flutter Stack、Positioned 层叠布局
- Flutter Row、Column 线性布局