调用Bytom Chrome插件钱包开发Dapp

简介: 安装使用插件钱包1. 打开Google浏览器的应用商店,搜索Bystore下载链接:http://t.cn/E6cFFwb2. 然后点击添加到Chrome,就可以添加到我们的:3. 使用google插件钱包如果你使用的是测试网,可以去测试网水龙头领取BTM。

安装使用插件钱包

1. 打开Google浏览器的应用商店,搜索Bystore

下载链接:http://t.cn/E6cFFwb

2. 然后点击添加到Chrome,就可以添加到我们的:

3. 使用google插件钱包

如果你使用的是测试网,可以去测试网水龙头领取BTM。
测试网水龙头:http://test.blockmeta.com/faucet.php

搭建Dapp demo

Dapp demo是一个基于比原的储蓄合约,该demo可以进行资产的锁仓储蓄,到期返还资产并给一定的利息。这个dapp很适合的场景就是股息分红,内部通过智能合约自动锁仓操作,到期资产自动解锁。所以我个人对这个dapp应用场景表示非常看好。

项目源码地址:https://github.com/Bytom/Bytom-Dapp-Demo

根据源码里面的readme.md文件进行搭建dapp,然后我们在本地打开http://127.0.0.1:8080 后就可以看该dapp应用。然后我们点开我们的账户如下图:

点击saving,我们看到的是储蓄资产界面,用户可以设置资产的金额,并储蓄资产

下图是我们收益的页面,我们可以看到自己储蓄的收益,如果是到期的话我们可以提出自己的收益。

Dapp调起Google插件的实现

初始化注入

检查插件,账户

调交易接口

下图是发送交易的API接口,接口的具体文档参考:https://github.com/Bytom/Bystore/wiki/API-reference。还有其他的API接口都在该文档里面。监听事件接口bytom.request(eventName, options)。

后端服务器接口

由于比原链采用的UTXO模型,该模型没有状态。但是在开发dapp的过程中需要关联用户的的地址。所以后端服务器主要是封装一层类似账户模型,方便dapp跟链进行交互。开发者开发dapp可以搭建改项目作为与链交互的服务器,自己搭建参考项目的readme.

后端服务器项目地址:https://github.com/oysheng/bufferserver

Dapp开发流程梳理

通过上面的一系列步骤,我们已经大概明白基于比原链开发dapp的一个大致流程。流程总结就是:

step1: 下载安装Chrome插件钱包,如果自己的dapp不需要跳过这一步。

step2: 如果需要自己搭建BlockCenter后端服务器,参考项目说明文件安装。不想搭建的话,直接用官方的服务,直接远程调用即可。

step3: 开发智能合约,并编译。然后将编译后的合约参数配置在dapp的配置文件,如下图:(全红部分是测试网合约配置参数)

step4:调用Chrome插件钱包。

到此,在比原链上开发dapp的整套流程都已经梳理清楚,欢迎大家快速上手试试。开发出优秀的dapp应用。

Github: https://github.com/bycoinio/Bystore/

相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
46 1
|
1月前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
75 0
|
2月前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
146 2
|
2月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
388 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
4月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
80 11
|
4月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
4月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
1163 1
|
4月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
366 8
|
4月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
207 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
5月前
|
Web App开发 前端开发 Java
通过设置 Chrome 解决开发调用跨域问题
通过设置 Chrome 解决开发调用跨域问题
1223 7