1 创建项目
- 创建项目文件夹,我们先要创建一个总的目录文件,存放所有项目内容
mkdir Lottery
- 创建Next.js app
Next.js是一个react框架,可以让我们更快的构建web应用
https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs
具体而言构建一个web应用需要考虑包括但是不限于以下几个方面
User Interface - how users will consume and interact with your application.
Routing - how users navigate between different parts of your application.
Data Fetching - where your data lives and how to get it.
Rendering - when and where you render static or dynamic content.
Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them.
Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc).
Performance - how to optimize your application for end-users.
Scalability - how your application adapts as your team, data, and traffic grow.
Developer Experience - your team’s experience building and maintaining your application.
npx create-next-app@latest /创建Next.js app,会出现一个bootstraps提示
✔ What is your project named? … lottery-dapp //命名项目,接下来它会自动帮我们安装依赖和架构
Creating a new Next.js app in /Users/qinjianquan/lottery-again/lottery-dapp.
Using yarn.
Installing dependencies:
- react
- react-dom
- next
--
Success! Created lottery-dapp at /Users/qinjianquan/lottery-again/lottery-dapp
Inside that directory, you can run several commands:
yarn dev
Starts the development server.
yarn build
Builds the app for production.
yarn start
Runs the built app in production mode.
We suggest that you begin by typing:
cd lottery-dapp
yarn dev
lottery % cd lottery-dapp //进入文件夹为bulma安装依赖,bulma是一个手机优先的CSS框架,简单的页面就无需写任何框架
npm i bulma
2 制作网页
- 查看并启动App
打开/Users/qinjianquan/lottery/lottery-dapp/package.json
可以看到一些默认脚本以及它们的组织方式
/Users/qinjianquan/lottery/lottery-dapp/pages/index.js //默认页面路由
import 'bulma/css/bulma.css' //引入bulma库,这里强调一点,在index.js文件要使用哪个库就使用npm安装就行了
lottery-dapp % npm run dev //启动一个实时网页
> lottery-dapp@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait - compiling...
event - compiled client and server successfully in 3.7s (125 modules)
访问http://127.0.0.1:3000/
- 动态编辑前端页面
Lottery dApp //回到index.js 文件中改页面标题&继续编辑
export default function Home() {
return (
<div >
<Head>
<title>Ether Lottery</title> //标题
<meta name="description" content="An Ethereum Lottery dApp" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<nav className="navbar">
<div className="container">
<div className="navbar-brand"> //导航栏头
<h1>Ether Lottery</h1>
</div>
<div className="navbar-end"> //导航栏尾
<button className="button is-link">Connect Wallet</button>
</div>
</div>
</nav>
<div className="container"> //开辟空间
<section className="mt-5"> //片段
<div className="column is-two-thirds"> //段落
<p>Lottery buttons</p>
</div>
<div className="column is-one-third">
<p>Lottery info</p>
</div>
</section>
</div>
</main>
<footer className={styles.footer}>
<p>©2022 Made by SHIYIVEI</p>
</footer>
</div>
)
}
/Users/qinjianquan/lottery/lottery-dapp/styles/Home.module.css //除了页脚样式,其他都删掉,因为我们需要按照合约需求去定义我们的页面实现,现在我们定义自己的页面样式
.main {
min-height: 100vh;
}
.main h1 {
font-size:3em;
font-weight: bold;
color: #000;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
3 连接钱包
安装web3库,它是javascript语言写的,里面有一些函数可以让我们与钱包交互
npm i web3 //前面提到过这种思路,现在我们要使用web3这个库,所以使用npm安装,后续流程就是在index.js文件中引入
在index.js页面引入web3.js库
import Web3 from 'web3'
创建handler函数处理连接钱包的请求,并且把它连接到按钮上(用一个按钮捕获用户的请求,然后将请求与handler函数绑定)
这种实现网页功能的逻辑是:创建静态变量 -> 改变静态变量状态/创建函数 -> 呈现状态/关联用户请求
onClick= {connectWalletHandler}
import {useState} from 'react'
import Head from 'next/head'
import Web3 from 'web3'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bulma/css/bulma.css'
export default function Home() {
/*定义两个静态变量 */
const [web3,setWeb3] = useState()
const [address,setAddress] = useState()
/*define a function to connect wallet*/
const connectWalletHandler = async () => {
/*check if MetaMask is installed*/
if (typeof window !== "undefined" && typeof window.ethereum != "undefined") {
try{
/*request to connect the wallet*/
await window.ethereum.request({method:"eth_requestAccounts"})
/*create web3 instance */
const web3 = new Web3(window.ethereum)
/*use global instance */
/*set web3 instance in react state*/
setWeb3(web3)
/* get list of accounts,use the web3 instance */
const accounts = await web3.eth.getAccounts()
/*set account to react state*/
setAddress(accounts[0])
} catch(err){
console.log(err)
}
}else {
/*MetaMask not installed*/
console.l