آموزش دیپلوی اسمارت کانترکت و اپلیکیشن روی تست نت بتا 4 شبکه فیول
دیپلوی اسمارت کانترکت نیاز به سیستم خاصی نداره و فقط محیط کدنویسی لینوکس میخواد
آموزش و نکات راه‌اندازی محیط کدنویسی رو از این توییت ببینید
اگر هرکجای این آموزش به مشکل برخوردید باید دوباره از ابتدا شروع کنید چون این آموزش توسط خودم تست شده و مشکلی نداره و هرسوالی از خطاهاتون داشتید با اسکرین شات خطا برام بفرستید که زودتر به جواب برسید
مراحل دیپلوی اسمارت کانترکت
1. Install dependecies
1.1 Upgrade & Install git
sudo apt update && sudo apt upgrade -y
sudo apt-get install git-all
1.2 Install Rust
curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh
source "$HOME/.cargo/env"
rustup install stable
rustup update stable
rustup default stable
2. Install Fuelup toolchain
2.1 Delete Old Files
cd $home && rm -rf .fuel && rm -rf .forc && rm -rf .fuelup && rm -rf fuel-project
2.2 Install Fuelup
curl --proto '=https' --tlsv1.2 -sSf https://install.fuel.network/fuelup-init.sh | sh
Press Y
export PATH="$HOME/.fuelup/bin:$PATH"
source /root/.bashrc
مهم: هر زمان دستوراتی که با عبارات مشخص شده زیر یعنی فورک یا فیول آپ شروع میشن کار نکردند از 2 دستور بالا استفاده کنید مشکل حل میشه
Fuelup / forc
fuelup self update
2.3 Install beta-4 testnet
fuelup toolchain install beta-4
2.4 Check Fuelup version
fuelup --version
2.5 Set Beta-4 Testnet
fuelup default beta-4
مهم: هر زمان از ترمینال خارج شدید و بعدا دستوراتی که با 2 عبارات زیر شروع میشن کار نکردند، دستور بالا رو دوباره بزنید
fuelup / forc
3. Write Contract
3.1 Create project
پوشه پروژه رو بسازید و واردش شید
mkdir fuel-project
cd fuel-project
3.2 Config contract
forc new counter-contract
nano counter-contract/src/main.sw
با دستور بالا منوی ادیت فایل کانفیگ کانترکت رو باز می‌کنید. هرچی توش هست رو پاک کنید و کدهای زیر رو توش کپی کنید
contract;
storage {
counter: u64 = 0,
}
abi Counter {
#[storage(read, write)]
fn increment();
#[storage(read)]
fn count() -> u64;
}
impl Counter for Contract {
#[storage(read)]
fn count() -> u64 {
storage.counter.read()
}
#[storage(read, write)]
fn increment() {
let incremented = storage.counter.read() + 1;
storage.counter.write(incremented);
}
}
بعد از کپی:
Press Ctrl + X
Press Y
Press Enter
3.3 Build Contract
مطمئن باشید داخل دیرکتوری پروژه‌ای که ساختید باشید یعنی
fuel-project
cd counter-contract
forc build
4. Create wallet
4.1 Install Wallet Extension
آسونترین راه ساخت ولت، نصب اکستنشن ولت فیول روی بروزر ویندوز و ایمپورت کلمات بازیابی اون توی ترمینال هست
4.2 Import Wallet
forc-wallet import
با زدن دستور بالا ازتون کلمات بازیابی ولتتون رو میخواد
Enter 12 Words Recovery Phrase
Set Password
forc wallet account new
با دستور بالا آدرس ولتی که کلماتشو وارد کردید نمایان میشه
4.3 Get Faucet Tokens
از این لینک توکن تستی دریافت کنید
5. Deploy Contract
5.1 Create Deploy Transaction
forc deploy --testnet
-
Enter Password -
لیستی از اکانت ها یا ولت هاتون رو میاره که باید ایندکس یا شماره اکانت مورد نظر رو وارد کنید که اگر یک ولت وارد کرده باشید باید 0 رو وارد کنید
press Y
برای مراحل بعدی حتما عبارت زیر یا کانترکت آی دیتون رو از ترمینال سیو داشته باشید
Contract ID
آدرس ولت خودتون رو داخل اکسپلور سرچ کنید و هیستوری تراکنشای خودتون رو ببینید که کانترکتتون دیپلوی شده
******* تبریک میگم کانترکت شما با موفقیت روی شبکه بتا-4 دیپلوی شد *******
مرحله بعدی و نهایی دیپلوی دپ یا اپلیکیشن خودمون روی شبکه هست که اگر نخواستید ادامه بدید و میتونید همینجا توقف کنید اما حتما با یک عکس و آدرس از کانترکتی که دیپلوی کردید و تگ کردن اکانت توییتر فیول یک توییت در مورد دیپلوی خودتون طبق گفته خودشون بزنید وگرنه بعدا در ادامه، دپ خودمون رو توییت میکنیم
***Deploy Dapp on Fuel Beta-4 Testnet
در این قسمت یک سایت یا دپ یا اپلیکیشن برای کانترکتمون میسازیم که بتونیم روی کانترکت تراکنش ثبت کنیم
1. Install Nodejs
1.1 Check Nodejs
ورژن جاوا اسکریپت رو چک کنید که ببینید روی سیستم دارید
node --version
1.2 Install NodeJS
ورژن 18 ایده آل ترین ورژن نود هست که در صورت نیاز به نصب این پارت رو پیش برید
Delete old files
sudo apt-get remove nodejs
Press Y
sudo apt-get purge nodejs
sudo apt-get autoremove
Press Y
sudo rm /etc/apt/keyrings/nodesource.gpg
sudo rm /etc/apt/sources.list.d/nodesource.list
Install Nodejs 18
NODE_MAJOR=18
sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_${NODE_MAJOR}.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt-get update
sudo apt-get install -y nodejs
Check Nodejs Version
node --version
2. Create Dapp (Frontend)
2.1 Install Frontend
اطمینان حاصل کنید داخل پوشه فیول-پراژکت هستید
cd $home && cd fuel-project
npx create-react-app frontend --template typescript
Press Y
پس از نصب، شما یک پوشه کلی پروژه به نام فیول-پراجکت دارید که داخلش پوشه کانترکت و فرانتند وجود داره برای چک کردنش دستور زیر:
ls
2.2 Install Frontend Packages
با دستور زیر وارد پوشه فرانتند میشیم
cd frontend
npm install fuels@0.57.0 @fuel-wallet/sdk@0.12.3 --save
nano tsconfig.json
با دستور بالا منوی ادیت فایل کانفیگ باز میشه و هرچی توش هست رو پاک کنید و کدهای زیر رو توش کپی کنید
{
"compilerOptions": {
"types": ["@fuel-wallet/sdk"],
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
بعد از کپی
Press Ctrl + X
Press Y
Press Enter
npx fuels typegen -i ../counter-contract/out/debug/*-abi.json -o ./src/contracts
3. Config Dapp
2.1 Edit App.tsx
اطمینان حاصل کنید داخل پوشه فرانتند باشید
nano src/App.tsx
با دستور بالا منوی ادیت فایل باز میشه که کدهای توش رو کامل دیلیت کنید و کدهای زیر رو با جاگذاری آدرس کانترکتی که در مرحله 5.1 دیپلوی کانترکت ذخیره کردید داخل “ “ پر کنید
CONTRACT_ID = “آدرس کانترکت”
*برای جاگذاری میتونید کدهارو داخل نوت پد کپی و اصلاح کنید*
import { useEffect, useState } from "react";
import "./App.css";
// Import the contract factory -- you can find the name in index.ts.
// You can also do command + space and the compiler will suggest the correct name.
import { CounterContractAbi__factory } from "./contracts";
// The address of the contract deployed the Fuel testnet
const CONTRACT_ID =
"0x...";
function App() {
const [connected, setConnected] = useState<boolean>(false);
const [account, setAccount] = useState<string>("");
const [counter, setCounter] = useState<number>(0);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
setTimeout(() => {
checkConnection();
setLoaded(true);
}, 200)
if (connected) getCount();
}, [connected])
async function connect() {
if (window.fuel) {
try {
await window.fuel.connect();
const [account] = await window.fuel.accounts();
setAccount(account);
setConnected(true);
} catch (err) {
console.log("error connecting: ", err);
}
}
}
async function checkConnection() {
if (window.fuel) {
const isConnected = await window.fuel.isConnected();
if (isConnected) {
const [account] = await window.fuel.accounts();
setAccount(account);
setConnected(true);
}
}
}
async function getCount() {
if (window.fuel) {
const wallet = await window.fuel.getWallet(account);
const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
const { value } = await contract.functions.count().simulate();
setCounter(value.toNumber());
}
}
async function increment() {
if (window.fuel) {
const wallet = await window.fuel.getWallet(account);
const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
// Creates a transactions to call the increment function
// because it creates a TX and updates the contract state this requires the wallet to have enough coins to cover the costs and also to sign the Transaction
try {
await contract.functions.increment().txParams({ gasPrice: 1 }).call();
getCount();
} catch (err) {
console.log("error sending transaction...", err);
}
}
}
if (!loaded) return null
return (
<>
<div className="App">
{
connected ? (
<>
<h3>Counter: {counter}</h3>
<button style={buttonStyle} onClick={increment}>
Increment
</button>
</>
) : (
<button style={buttonStyle} onClick={connect}>Connect</button>
)
}
</div>
</>
);
}
export default App;
const buttonStyle = {
borderRadius: "48px",
marginTop: "10px",
backgroundColor: "#03ffc8",
fontSize: "20px",
fontWeight: "600",
color: "rgba(0, 0, 0, .88)",
border: "none",
outline: "none",
height: "60px",
width: "400px",
cursor: "pointer"
}
4. Run your project (Dapp)
پورت 3000 رو باز کنید
ufw allow 3000/tcp
اطمینان حاصل کنید داخل پوشه فرانتند باشید و پروژه رو با دستور زیر ران کنید
npm start
خب اپلیکیشن شما با رسیدن به عکس بالا راه اندازی شد و تا زمانی که ترمینالتون بازه اپلیکیشن هم فعاله پس برای اینکه مرحله بعد رو انجام بدید ترمینال رو نباید ببندید
قبل از ادامه مرحله بعد بگم که ممکنه خطا داشته باشید
- اگر پورتتون تداخل داشت ازتون میخواد که روی یه پورت دیگه بالا بیارید که تایید کنید و بعد با زدن دکمه های زیر اپلیکیشن رو استاپ کنید و دوباره به اول همین مرحله برید برای باز کردن پورت جدیدی که بهتون اعلام کرده مثلا 3001
CTRL + C
- اگر هر خطای دیگه ای داشت و عکس اول که گذاشتم رو نیاورد دوباره با دستور بالا ران کنید اوکی میشه وگرنه یه جای دیگه کار رو اشتباه اومدید
5. Interact With Dapp
برای دیدن سایت یا اپلیکیشنتون توی مرورگرتون، یکی از عبارات زیر رو داخل آدرس-بار مرورگر سرچ کنید
- اگر روی لپتاپ یا کامپیوتر خانگی کانفیگ کردید
http://localhost:3000
- اگر روی سرور مجازی کانفیگ کردید، آی پی سرورتون رو با عبارت آی پی زیر عوض کنید
http://ip:3000
پورت رو هم دقت کنید که چی انتخاب کرده بودید و باز کرده باشید
حالا ولت رو بهش کانکت کنید و رو اپلیکیشن خودتون تراکنش اسپم کنید
تبریک میگم دولوپرای عزیز شما اپلیکیشن غیرمتمرکز خودتون رو روی شبکه فیول بالا آوردید :))
****** قسمت مهم داستان یعنی توییت کردن مثلا عکس اپلیکیشنتون و آدرس کانترکتتون و تگ کردن پروژه هست که خودشون گفتن ممکنه چیز خاصی واسش در نظر بگیرن که حتما انجام بدید
امیدوارم کیف کرده باشید و حسابی وقتتون تلف شده باشه. دلخوش و سلامت باشید