狗哥区块链与AI精品内容集@NonceGeek

2025年03月28日更新 75 人订阅
原价: ¥ 20 限时优惠
专栏简介 「造」最关键的是什么?| Hackathon 漫游指南(贰) Why Hackathon?| Hackathon 漫游指南(壹) 设计「众人维护」的 BuidlerBoard | BeWater.xyz Movement 白皮书中文版 Rebuidl RSS 生产因素与反生产因素 | 独立黑客创业手册(陆) 组织 | 独立黑客创业手册(伍) 生产 | 独立黑客创业手册(肆) 销售 | 独立黑客创业手册(叄) 最优先的能力 | 独立黑客创业手册(贰) 为什么从独立黑客开始 | 独立黑客创业手册(壹) Aptos Token Object V2 | Move dApp 极速入门(贰拾肆) 可編程交易塊 | Move dApp 極速入門(貳拾叁) Aptos 密鑰輪換 | Move dApp 極速入門(貳拾貳) Aptos 对象模型 | Move dApp 极速入门(贰拾壹) Aptos Moveflow SDK使用指南 | Move dApp 极速入门(贰拾) Sui 上简单 Swap 的实现 | Move dApp 极速入门(拾玖) 用 Elixir 交互 Aptos | Move dApp 极速入门(拾捌) Sui 链上数据查询 | Move dApp 极速入门(拾柒) SUI 合约测试攻略 | Move dApp 极速入门(拾陆) Sui 数据类型详解 | Move dApp 极速入门(拾伍) Airdropper Contract in Aptos | Move dApp 极速入门(拾肆) Sandwich合约源码解析 | Move dApp 极速入门(拾叁) Sui 极速上手 | Move dApp 极速入门(拾贰) scaffold-aptos 脚手架 | Move dApp 极速入门(拾壹) 对 DID Document 的思考 | Move dApp 极速入门(九) DID中地址聚合器的实现 | Move dApp 极速入门(八) 值的存取应用3.0 | Web3.0 dApp 开发(五) 合约数据类型综述 | Move dApp 极速入门(四) 操作资源 | Move dApp 极速入门(三) 第一个 Move dApp | Move dApp 极速入门(二) Hello Move | Move dApp极速入门(一) Staker | Web3.0 dApp 开发(九) Token 自动售卖机 | Web3.0 dApp 开发(七) SVG NFT 全面实践 | Web3.0 dApp 开发(六) 值的存取应用2.0 | Web3.0 dApp 开发(四) 值的存取应用1.0 | Web3.0 dApp开发(三) Scaffold-eth 快速上手 | Web3.0 dApp 开发(二) eth.build 快速上手 | Web3.0 dApp 开发(一) 1 小时理解比特币系统 【NonceGeek Workshop 0x01总结】基于链上数据生成游戏地图 Remix 完全本地化部署 NFT:实体与虚拟载体的主与辅 | 狗哥的元宇宙思辨(一) Web3Camp 内容大全@NonceGeek 用 Python 创建一条 Pow 区块链(上) 区块链与共识机制演变史 基于 Etherscan 实现 Blockchain Syncer 【论文分享】去中心化社会:寻找 Web3 的灵魂(上) 【论文分享】去中心化社会:寻找 Web3 的灵魂(下) Ted Yin | 2021 年的区块链基础设施将是什么? 0. 公链、联盟链与分布式未来(全文) 基于 Infura 与 Web3py 部署调用 Hello 合约全过程 | 以太坊开发极速入门 太上中的基因设计与Binary | 函数式与区块链(一) 理解以太坊合约数据读取过程 | 函数式与区块链(二) Hello, Ink! | 用 Rust 写智能合约(一) Mapping 数据结构 | 用 Rust 写智能合约(二) 用 Rust 程序和 Webase 交互 | Rust 学习笔记(四) 用 Sqlite 存储 WeId | Rust 学习笔记(五) 链上注册WeId与错误处理 | Rust 学习笔记(六) WeId 链上创建与本地存储的完整闭环 | Rust 学习笔记(七) 以太坊上的核心开发者 Austin | 以太坊上的最佳开发实践 1. FISCO BCOS 开发环境节点搭建全攻略 伪代码简述 ECDSA 签名过程 | 联盟链开发 WeIdentity 源码分析 | 狗哥解码 WeIdentity 源码分析 | 狗哥解码 FISCO BCOS 介绍 | 联盟链开发 给Remix升个级 | 联盟链开发 2. 控制台的安装与使用 3. 【实验】补全一个区块链应用 4. 控制台的Web化 5. Web化控制台2.0:打造团队共用区块链学习平台 6. 使用脚手架快速搭建 Java DApp 【视频+文字】分布式思维 Rebuidl RSS (EN)

Scaffold-eth 快速上手 | Web3.0 dApp 开发(二)

  • 李大狗
  • 发布于 2021-09-24 23:26
  • 阅读 6929

开发新鲜人的第一个 dApp

前言

Scaffold-eth 是搭建以太坊上 dApp 的模板(Template),也是 dApp 优秀作品的集合,让开发人员可以大大提升开发效率,降低踩坑几率,是 web3.0 dApp 开发者的「入门神器」。

它包括如下组件:

  • hardhat: 用于运行本地网络、部署和测试智能合约。
  • React: 使用许多预制组件和hooks来构建前端。
  • Ant: 用于构建你的UI,可以轻松更改为Bootstrap或者其他库。
  • Surge: 发布你的应用。
  • Tenderly / The Graph / Etherscan / Infura / Blocknative 等等。
  • 支持 L2 / Sidechains。

极速部署

环境要求

Scafford Eth 基于 Node.js 环境,需要安装node.jsyarn

部署 Scaffold-eth 脚手架

  1. 获取项目源代码
git clone https://github.com/austintgriffith/scaffold-eth.git
  1. 打开三个命令行面板

TIPS:很多Terminal 终端都支持分屏操作。

image-20210924203810255

  1. 在第一个命令行面板里,启动 👷‍ Hardhat chain:
cd scaffold-eth
yarn install
yarn chain

在这里插入图片描述

  1. 在第二个命令行窗口里,部署 /scaffold-eth/packages/hardhat/contracts/ 下的合约。
cd scaffold-eth
yarn deploy

在这里插入图片描述

  1. 在第三个命令行窗口里 启动你的前端应用:
cd scaffold-eth
yarn start

在这里插入图片描述

主分支下的案例合约是一个存储/读取值的合约,你可以在 /scaffold-eth/packages/hardhat/contracts/下找到这个合约并修改这个新合约的内容然后重新部署。

TIPS:

如果你对其他的合约项目感兴趣,可以切换仓库的分支部署不同的dapp服务。 可以切换的案例分支 比如nft的案例分支 https://github.com/scaffold-eth/scaffold-eth/tree/simple-nft-example

应用体验

回到刚才的话题,这时候 我们合约部署了,前端和本地测试链都启动了。 在这里我们先贴一下 我们刚才deploy的合约内容。

pragma solidity >=0.8.0 <0.9.0;
//SPDX-License-Identifier: MIT

import "hardhat/console.sol";
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol

contract YourContract {

  //event SetPurpose(address sender, string purpose);

  string public purpose = "Building Unstoppable Apps!!!";

  constructor() {
    // what should we do on deploy?
  }

  // 存储 purpose 变量
  function setPurpose(string memory newPurpose) public {
      purpose = newPurpose;
      console.log(msg.sender,"set purpose to",purpose);
      //emit SetPurpose(msg.sender, purpose);
  }
}

合约里设置了一个 public 的string 变量 purpose,这个purpose的默认值是“Building……",也提供了一个setPurpose方法 可以通过这个方法去修改purpose的内容。

现在我们访问前端服务http://localhost:3000在这里插入图片描述

  1. 给账户申请测试币 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述
  2. 调用合约方法。 因为调用方法需要耗费gas,所以一定得申请测试代币。 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 可见purpose的值成功修改,我们账户由于调用方法的时候消耗了gas费所以这里的余额也不在是1这个整数。

总结

我们可以通过scaffold-eth这个脚手架快速构架我们的Dapp应用,在hardhat里它不光可以deploy在本地测试网,你可以选择网络地址,可以将你的合约部署在任何的网络里。 至此我们的scaffold-eth快速体验就到这里了。

关于作者

<div align=center><a href="https://blog.csdn.net/qq_19381989" target="_blank"><img src="https://img-blog.csdnimg.cn/a7acf46695554b99a9483daf8423ab2d.png" width="40%" /></a></div>

简介:微芒社区上贸大 SIG 核心成员。

作者的联系方式:

微信:thf056 qq:1290017556 邮箱:1290017556@qq.com

你也可以通过 <strong><a href="https://github.com/99kies" target="_blank">github</a></strong> | <strong><a href="https://blog.csdn.net/qq_19381989" target="_blank">csdn</a></strong>关注我的动态

Github:https://github.com/99kies

CSDN:https://blog.csdn.net/qq_19381989

点赞 3
收藏 5
分享
本文参与登链社区写作激励计划 ,好文好收益,欢迎正在阅读的你也加入。

0 条评论

请先 登录 后评论