Why

Recently, I studied a lot of knowledge about the Ethereum ecosystem.
I can’t wait to create something by myself.
But I searched for a long time without finding a basic tutorial for me to explain how the front-end and chain-end interact.
Some tutorials are old. Other tutorials don’t match my tech stack.
I know scaffold-eth can help most fresh developers begin Ethereum development. However, scaffold-eth has too much magic for me. It hides some basic things. And I want to know the full details.
So I reckon I could write some articles from web2 developer to web3 beginner DApp developer in 2022. It’s a cool thing.

Deploying it to the World

So, we have it working great locally, how do we get it out to the world?

In the beginning, we quickly build our home page’s layout on the front-end project.

We use below code to replace front_end/pages/index.tsx file

Deploying the smart contract to a local chain

We remember the Foundry includes forge, cast, and anvil.
We will use forge to deploy our smart contracts. Then we will try to call our smart contract on cast

Setting up the local chain for development

Usually, We have three choose to run a chain on localhost.

1. HardHat - HardHat Network
2. Truffle - ganahce
3. Foundry - anvil

Generally, we should have chosen anvil. It’s a part of Foundry.
Unfortunately, there were a lot of transitions pending when I used it. From my point of view anvil just is the 0.1.0 version. It will be need more time to develop.
And I want to keep pure in chain end’s project(Not more javascript or npm install).
Finally, we used the ganahce to run chain on localhost.

The ganahce is very easy to install and setting up. It’s a GUI application.

Setting Up Our Project

I wish I could separate the front-end app and the chain-end app.
Keep simple, keep pure.

What are you best to know

• Metamask
• React
• Node
• Solidity

Why

Recently, I studied a lot of knowledge about the Ethereum ecosystem.
I can’t wait to create something by myself.
But I searched for a long time without finding a basic tutorial for me to explain how the front-end and chain-end interact.
Some tutorials are old. Other tutorials don’t match my tech stack.
I know scaffold-eth can help most fresh developers begin Ethereum development. However, scaffold-eth has too much magic for me. It hides some basic things. And I want to know the full details.
So I reckon I could write some articles from web2 developer to web3 beginner DApp developer in 2022. It’s a cool thing.

Learning DApp architecture

I have read through this The Architecture of a Web 3.0 application and the knowledge I have so far.

I draw the simply DApp architecture

Look at the picture, there are two important questions:

1. How do browsers and websites interact with each other?
2. How do websites and blockchains interact with each other?

Simple Answers:

1. Browser’s wallet extension or Wallet App
2. JSON RPC

Then, we will explore these two questions carefully when building a minimal DApp.

Our Target

0. What is a minimal DApp?
1. Frameworks and technologies
2. Setting up the project
3. Setting up the local chain
4. Deploying smart contract to a local chain
5. Building front-end then using it to call smart contract
6. Deploying DApp to the world

They have different account systems on Bitcoin and Ethereum

Bitcoin and Ethereum are different design ideas for account systems. So their transaction systems are not the same.

Today, I will ignore Bitcoin and more explain about Ethereum.

• Bitcoin uses Unspent Transaction Output.
• Ethereum uses the normal account system.

Bitcoin 和 Ethereum 的账户体系

Bitcoin 和 Ethereum 的账户体系是不同的思想，导致整个交易体系的结构有区别。因此他们对应地址会有不同。本次先略过 Bitcoin，仔细说明 Ethereum。

Bitcoin 采用的是 Unspent Transaction Output。

Ethereum 使用的就是比较容易理解的普通账户体系。

什么是区块链钱包地址

简单的说区块链本质上是一个账本，账本上记录着一条一条的转账记录。每一条转账记录的基本信息有三要素：

1. 从哪
2. 到哪
3. 多少钱

在区块链的世界里面，钱包地址就是转账记录里面从这里转到那里的标识。

有了这个钱包地址，我们也就可以把这个地址所有交易记录找出来，相加后就能得到该地址的当前余额。

拥有这个钱包地址的操作权限（私钥）就是进入区块链世界的门票。

简单解释一个区块链钱包地址是如何得来的

不同于当下的互联网世界的账号体系，一个区块链的钱包地址并不是注册得来。 而是通过使用密钥进过一系列复杂的加密算法得来。
生成钱包地址的加密算法是公开且固定的。意味这任何人可以在任何时候用任何设备任何编程语言实现该方法后生成钱包地址。无需联网。
每一个符合条件的唯一密钥对应唯一一个钱包地址。
密钥是操作钱包的唯一凭证。
密钥丢失不可找回。

基于这些不太常见的情景，我举例几个有趣的例子。

1. 我可以简单的获取成千上万的钱包地址，他们全部都是可以被操作的地址。只不过这些钱包地址里面没有任何的转账记录。
2. 当向一个合法的钱包地址转账的时候，并不会也不需要校验这个地址是否可被操作。如果这个地址是一个错误地址，转账会成功，并且可查该钱包余额和记录。只是没有人拥有该钱包地址的私钥即钱包的操作权限。
3. 理论上是存在这样的可能性，要是我不小心使用了一个密钥生成的地址是一个有余额的地址。那我就等于获得了该钱包地址的操作权限可以获取余额。
4. 就算我有一个 1000 个 ETH 余额的钱包地址，但是我不小心把密钥丢了。那这 1000 个 ETH 就再也找不回了。

本文具有强烈的个人感情色彩,如有观看不适,请尽快关闭. 本文仅作为个人学习记录使用,也欢迎在许可协议范围内转载或使用,请尊重版权并且保留原文链接,谢谢您的理解合作. 如果您觉得本站对您能有帮助,您可以使用RSS方式订阅本站,这样您将能在第一时间获取本站信息.