从 Web2 起点探索 Coinbase API
从 Web2 起点探索 Coinbase API
对从哪里开始使用 Web3 感到困惑？开始使用 Coinbase 开发者工具
Image from 关注
1977年，我心中那个有抱负的音乐家在看了电影《星球大战》后想学钢琴。我的目标是学习如何演奏每个人都在谈论的电影的主题，所以我买了乐谱。我们家里有一架钢琴，是我祖父母送给我们的礼物。
当我看到页面上的所有注释时，10岁版本的我很快就不知所措了：
我想我可以从更简单的开始，所以我开始在钢琴凳上筛选文件。然后我发现了这个很酷的音符图表模板，它非常适合钢琴的琴键。我找不到完全匹配的，但是 这里 是一个例子：
这对我来说改变了游戏规则。我把所有其他的音乐都扔回钢琴凳上，开始工作，学习如何演奏《星球大战》。在很短的时间内，我学会了在没有一节课的情况下演奏那首歌（和钢琴）。
这让我想知道为什么这样的“模板”并不存在于生活的各个方面。
新技术的 Catch-22
新的语言、平台、框架和设计模式都有一个共同的要求——开发人员的接受和采用。大多数情况下，大多数人都有另一个共同挑战：比预期更陡峭的学习曲线。
对我来说，Web3 目前处于这种状态，尽管我已经在我的“ 从全栈开发人员转变为 Web3 先锋 “ 出版物。
前沿开发人员已经在使用 Web3 做伟大的事情。但是接下来的一百万开发者——比如我——想要开始而不感到不知所措和沮丧呢？我们如何找到一种方法让他们使用 Web3？
我想找到一个用于 Web3 开发的帮助模板，我在开始探索 Coinbase SDK .
Coinbase SDK/API
根据维基百科， 币库 是一家美国上市公司，自 2012 年 6 月起运营加密货币交易平台。与我所写的类似 马基塔 , Coinbase 提供了一系列应用程序编程接口 (API) 和软件开发工具包 (SDK)，供有兴趣构建专注于数字货币的应用程序的开发人员使用。
一个这样的例子是 Coinbase 钱包 SDK .
对于本出版物，我想完成以下任务：
- 使用 React 创建一个简单的 Web3 应用程序
- 将我的钱包浏览器扩展与 Dapp 集成
- 允许用户使用 Coinbase 钱包 SDK 进行捐赠
使用 Coinbase 钱包 SDK 创建 Web3 应用程序
首先，我们可以使用 React CLI 创建一个名为 coinbase-wallet-example 的 React 应用程序：
npx create-react-app coinbase-wallet-example
创建 React 应用程序后，我使用以下命令更改为 coinbase-wallet-example 目录：
cd coinbase-wallet-example
由于较新版本的 create-react-app 不再包含 polyfill 支持——这是使用的必要要求 web3.js 正确 - 这需要旧版本的 react-scripts：
npm install --save-exact [[email protected]](/cdn-cgi/l/email-protection)
由于我们将构建一个 Web3 示例，因此使用 npm 安装了 web3 框架（可以找到其他选项 这里 ):
npm 安装 web3
接下来，使用 npm 安装 Coinbase Wallet SDK（其他选项可以找到 这里 ):
npm install @coinbase/wallet-sdk
使用 胖的 区块链开发套件，我创建了一个名为 coinbase 钱包示例 ：
接下来，我切换到 Ropsten 测试网络并记下项目的密钥和 URL：
现在，我们只需要包含以下代码来初始化 Coinbase 钱包 SDK 和 Web3 对象：
从'导入 CoinbaseWalletSDK[ @coinbase/wallet-sdk](https://twitter.com/coinbase/wallet-sdk) '
从“web3”导入 Web3； const APP_NAME = 'coinbase-wallet-example';
常量 APP_LOGO_URL = './coinbase-logo.png';
常量 DEFAULT_ETH_JSONRPC_URL = '[ https://ropsten.infura.io/v3/56f](https://ropsten.infura.io/v3/56f) ... d69';
常量 DEFAULT_CHAIN_ID = 3; // 1=以太坊（主网），3=Ropsten，5=Gorli
在 - 的里面 使用效果（） 在我的应用程序的方法中，我包含了初始化 Coinbase 钱包和 Web3 的必要代码：
const coinbaseWallet = new CoinbaseWalletSDK({
应用名称：APP_NAME，
appLogoUrl：APP_LOGO_URL，
}); 常量 walletSDKProvider = coinbaseWallet.makeWeb3Provider(
DEFAULT_ETH_JSONRPC_URL，
DEFAULT_CHAIN_ID
); const web3 = new Web3(walletSDKProvider);
对于这个非常简单的示例，我们不会利用智能合约，而是提供一个目标地址来发送捐款：
const DONATION_ADDRESS = '0x7 ... c94';
为了降低风险，将更新代码以设置 捐赠地址 到正在使用的钱包的连接地址。
DONATION_ADDRESS = 帐户；
这意味着代码将向发送者发送资金，只留下从用户钱包中提取的汽油费。 React Dapp 将允许用户连接他们的钱包，然后提供捐赠金额（使用 WEI 单位），然后按下捐赠按钮将资金发送到 捐赠地址 .
这个简单 Dapp 的完整源代码如下所示：
运行基于 React 的 Dapp 就像使用以下命令一样简单：
npm 开始
结论
自 2021 年以来，我一直在努力遵循以下使命宣言，我认为它适用于任何 IT 专业人士：
“将时间集中在提供扩展知识产权价值的特性/功能上。将框架、产品和服务用于其他一切。”
— J.维斯特
我在介绍中引用的笔记图表模板被证明是我生命中的一个关键点。这颗隐藏在我们钢琴长凳上的宝石不仅让我能够演奏《星球大战》主题曲，还提升了我演奏音乐的能力。这个简单的模板和学习的愿望最终为我进入 伯克利音乐学院 以及参与多部音乐作品的能力。
Coinbase API 和 SDK（或开发人员工具）为渴望在新兴 Web3 世界中起步的开发人员提供了类似的目的。开发人员可以将这些模块包含到他们的应用程序中并快速开始，而不会陷入细节中。
在这两种情况下，笔记图表模板和 Coinbase 开发人员工具都遵循我的使命宣言，允许个人继续专注于他们的主要目标——无论是第一次学习弹钢琴，还是使用 Web3 做一些很酷的事情。
如果您对本出版物的源代码感兴趣，可以在 GitLab 上的以下地址找到它：
[
John Vester / coinbase-wallet-example · GitLab
coinbase-wallet-example 存储库是基于 React 和 web3 构建的简单 web3 Dapp 示例，以说明它是多么容易......
gitlab.com
](https://gitlab.com/johnjvester/coinbase-wallet-example)
有一个非常棒的一天！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
