新的交互流程：Ambire dApp 目录为Web3 的流畅旅程保驾护航

Posted BeepCrypto

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了新的交互流程：Ambire dApp 目录为Web3 的流畅旅程保驾护航相关的知识，希望对你有一定的参考价值。

Ambire 钱包现在将 dApps 列入白名单，以提供丝滑又安全的用户体验。

尊敬的 Ambire 家人们🙌，你们好！

我们很高兴能与大家正式分享我们的 dApp 目录和插件系统 🎉。

你们中的一些人可能已经在你们的 Ambire 账户中注意到了它，但让我们深入了解一下这个新的震撼性发布👇

仪表板上的 dApp ☑️

🎯 你知道 Ambire 是如何让用户体验流畅直观的吗？到截止到现在，你们应该也知道 Ambire 代表创新的酷技术，对吧！🚀

好吧，结合这两个特征的 🔥最热门🔥 版本是我们的 dApp 目录：（一个插件系统启用）它是一个精选的流行去中心化应用程序集合，你们可以直接从 Ambire 仪表板与之交互：

主菜单和目录概览中的 dApp 按钮

你们需要做的就是从主菜单中选择 dApp 按钮，然后可以打开一个包含各种 dApp 分类的窗口：从交易所到保险库再到 DEX 聚合器、投票和签名解决方案，甚至是 3D 虚拟世界（例如 Decentraland）等。

然后，你们可以选择要与之交互的 dApp，确保是位于所需的网络/链上。

虽然与 dApp 连接和交互的旧旅程意味着要在钱包之外导航，并在应用程序/标签之间切换，从而在连接时签署不同的操作，但使用 dApp 目录，你们可以永远不用离开钱包所带来的的方便和安全。

🧐相关背景信息

我们当前加密世界的现实——就像物理或 web2 世界一样——有人试图诈骗和利用用户，并为此目的改进他们的工具。

无论经验如何，用户都很容易陷入这些骗局：要么是因为他们太匆忙，没有注意，犯了人为错误，要么是刚进入这个领域，他们经常会陷入骗局或错过一些对于恶意行为提示的信号：

https://twitter.com/litocoen/status/1572474268302319617

这就是为什么 dApp 目录的优势是双重的：

在操作层面：安全模型确保你们不会受到过多的网络钓鱼攻击或虚假网站的攻击➡️ 以前需要通过将钱包地址连接到输入浏览器的 URL 或在谷歌搜索结果中发现的 URL 的用户们只需绕过此步骤，直接从他们的钱包仪表板与 dApp 进行交互。

在用户体验层面：类似于市场的应用程序目录，是简单又直观的，使你的旅程更快/更节省时间，通过轻松的方式➡️建立最佳类别的做法，对于让下一个 10 亿用户加入加密领域至关重要➡️我们想搭建一个能说人话的工具😏

💥 没错，不到一年的时间，Ambire 正在成为旨在统治新网络的多功能加密工具 🔮

⚙️在目录的引擎下

Ambire dApp 目录实际上是 Ambire 插件系统的接口，它是为 Ambire 用户和开发者开放 Web3 的安全解决方案而创建的。

在目录中，有超过20个白名单的 dApp，已经过审计（所有的 dApp 都需要安全审计）。

dApp 可以通过两种构建结构插入到目录中：与WalletConnect（独家）兼容，或与 [Gnosis]Safe（综合）兼容。

基本上，dApp 通过 iframe 加载到 Ambire 钱包——用户从他们的 Ambire 仪表板直接与官方 dApp 交互。

开发人员可以通过相同的用户界面轻松地整合他们的自定义 dApp。

关于如何整合新的 dApp 的细节，我们的 Git 简短指南可以提供帮助。

🤝 更好地合作

对我们来说，dApp目录项目可以追溯到我们第一次想象 Ambire 的时候💡

经过大量的研究和大量的工作，我们准备好了你们现在看到的这个版本。

但是，完成这一挑战只能靠大家一起努力。我们邀请你们——我们的用户和社区，来帮助我们一起慢慢调整我们的 web3 门户。

🗣 像往常一样，我们渴望听到你们的想法和你们对全新的 Ambire 体验的感受，或者如果你们觉得有任何很酷的 但还没出现在目录中的 dApp 可以在目录中，不要害羞，在我们的 Discord 服务器或直接在 Twitter 上分享你的想法、创意或问题。

如果你还没有加入 Ambire，请确保你们先开始使用 Ambire dApp 目录：我们保证它将是顺畅的 web3 旅程，所以放轻松，享受便是了。⛵️

记 通过ganache与以太坊Dapp实现交互

通过ganache与以太坊Dapp实现交互


参考来源：以太坊Dapp开发教程

我的环境准备：
ubuntu-20.04.4，nodejs（v16.14.0），npm（v8.3.1）

安装ganache

ps：视频中是ganache-cli，看github介绍应该是ganache

sudo npm install ganache --global


ps：一些报错，因为虚拟机是新安装的，所以会有很多命令没有，可以跳过这一块

根据提示执行npm install -g npm@8.5.2

报错没有make命令，执行

sudo apt-get install  gcc automake autoconf libtool make -y

报错g++: Command not found，执行

sudo apt-get install build-essential

执行ganache-cli

ps：我安装nodejs参考的教程
报错：ganache-cli: command not found
原因：没有设置全局变量
解决：

在/usr/bin 的目录下输入sudo ln -s /usr/local/node/bin/ganache-cli ganache-cli

运行ganache-cli输出一下结果：

ganache v7.0.2 (@ganache/cli: 0.1.3, @ganache/core: 0.1.3)
Starting RPC server
//默认生成10个账户
Available Accounts
==================
(0) 0xa6AF4787B11B4f05e77f53fE0D6384Bbb17aF467 (1000 ETH)
(1) 0xc77ca72fac71088D5AFf1786DA2528EfD84B5C1e (1000 ETH)
(2) 0xF85541DBF0fA61e314e7A6960B58caC93D98d881 (1000 ETH)
(3) 0x61aBB6AfC93035Fb05EFe34bC9c255Fd75f334e9 (1000 ETH)
(4) 0x8EF8EA235646d0c02F60ef4b14b24136CD6FE222 (1000 ETH)
(5) 0xe82fD6Abdf21bEa708879810bb80bB2B5a25fC14 (1000 ETH)
(6) 0x80BD5be7D1847092E8e25166483F6f89B0517966 (1000 ETH)
(7) 0xf6018FBfd5D496508b80B5Ace4f07e69549B835a (1000 ETH)
(8) 0x70EBFd720739e0C2a4c1384c5dcC2Be74595fEA1 (1000 ETH)
(9) 0x45250D5aC35391f90AeCddDB22516528Fd4F3de4 (1000 ETH)

Private Keys
==================
(0) 0x0348895a76b76a393dcd1500e0f29a6a8382dcb3f5ef5af52e7d81552bfeab2d
(1) 0x44942b204c402bbe83a2ff6e16c281fa19cc12f64e05bfa2fd928dee2d4f829c
(2) 0xa0e9decac315f37bd5f97e27d451001b180c1b520cbce4cf97f5caa2a95a44bc
(3) 0xe7e67fa01f524618a6de82090787800a4d6cc3d76b07ecce409bb7d99b089e75
(4) 0x73c6d0f082ff6eb427c0a8897c245ffe151e7e850116971a14abbd8227e4bc5e
(5) 0x5b7e6aaf6e85a8de5f319c9462afbe2958c64fbbcf193d9471db3e1692cdd594
(6) 0x28dc84f77a4e4bc5f231a29ab5472f25aaa70a4843cf31088ccbdc164bcdca4a
(7) 0x17373c3c42cd4aee48e6bc7d32953adddbc8384496808274ceca57b95c949fb4
(8) 0x68ebf31159f888326866ac77b669f50a1df7f58ee4957ee1aa03feb0236df84a
(9) 0x99a5e7dc8b95424db026c2af1eb87482b2760e814155a670cdb2e0c1af5e4164

HD Wallet
==================
Mnemonic:      various harbor poverty abandon mosquito sand excite devote juice manual people dry
Base HD Path:  m/44'/60'/0'/0/account_index

Default Gas Price
==================
2000000000

BlockGas Limit
==================
30000000

Call Gas Limit
==================
50000000

Chain Id
==================
1337

RPC Listening on 127.0.0.1:8545
^C
Received shutdown signal: SIGINT
Shutting down…
Server has been shut down

ganache-cli 的使用

创建新的文件夹，在那下面安装web3

sudo npm install web3 --unsafe-perm=true --allow-root
//如果没有换源则
sudo npm install web3 --unsafe-perm=true --allow-root --registry=https://registry.npm.taobao.org


如果没有出现node_modules，可以尝试npm init，npm install

windows10下安装web3

直接npm install web3会报错

  1. 需要先安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 再运行cnpm install node-gyp
  3. 再cnpm install web3
    安装好后可以用npm view web3查看web3版本

测试web3

尝试能否连接到web3：vim test.js
内容是：

var Web3 = require('web3');
	var web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
	console.log(web3.version);

用node test.js运行，结果：

内容改为：

var Web3 = require('web3');
	var web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));
	console.log(web3.version);
	web3.eth.getAccounts().then(console.log)

在另一个终端启动ganache-cli
运行node test.js

不运行ganache-cli，直接node test.js会报错

使用web3js和区块链进行交互

创建新目录

mkdir dapp

安装express

sudo npm install express -g
sudo npm install -g express-generator

我的版本号

创建工程

express -e MyDapp
//进入目录
cd MyDapp/

安装

npm install

启动工程

npm start

输入 127.0.0.1:3000 （8545是区块链的端口）

安装web3

npm install web3 -save

进入到routes文件夹修改index.js，修改内容为

var express = require('express');
var router = express.Router();

var Web3 = require('web3');
var web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

web3.eth.getAccounts().then(console.log);//获取账户

/* GET home page. */
router.get('/', function(req, res, next) 
  web3.eth.getAccounts().then(function(accounts)
     var account = accounts[0];
     web3.eth.getBalance(account).then(function(balance)
        var amount = web3.utils.fromWei(balance,'ether');
        res.render('index',account: account,balance: amount);
	);
  );
);

module.exports = router;

修改app.js

var ejs = require('ejs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('.html',ejs.__express);//修改引擎为html
app.set('view engine', 'html');

修改以下代码

在view目录下新建index.html

<!DOCTYPE html>
<html>
  <head>
    <title>账户余额</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>账户是： <%= account %></h1>
    <h1>余额是： <%= balance %></h1>
  </body>
</html>

开另一个终端，启动ganache-cli
再启动项目npm install

浏览器输入127.0.0.1:3000可以得到ganache与web3交互的过程

至此，视频04结束。

结下来，需通过web3.js来调用我们写的这个合约
接：以太坊智能合约部署调用

以上是关于新的交互流程：Ambire dApp 目录为Web3 的流畅旅程保驾护航的主要内容，如果未能解决你的问题，请参考以下文章

记 通过ganache与以太坊Dapp实现交互

ETH开发DAPP使用Web3+Vue唤醒MetaMask钱包和合约交互

通过ganache与以太坊Dapp实现交互 —— 简单的例子

浅析 Web3.0 DApp（去中心化应用程序）设计架构

Web3与智能合约：开发一个简单的DApp并部署到以太坊测试网（Solidity+Hardhat+React）① 环境搭建

以太坊——运用truffle框架部署第一个DAPP ---- Pet-Shop