קורס בלוקציין – אפליקציה וחוזה חכם DAPP

ממשיכים מהשיעור הקודם את החוזה החכם והפעם נשלב את החוזה לאפליקציה שיצרנו והנה לכם אפליקציה מבוססת בלוקציין! זה אולי לא משהו גרנדיוזי אבל זו התחלה של כל מפתח בלוקציין צריך לעבור.

כל מה שנעשה זה צעדים מאוד בסיסיים והם:

1. קריאה מתוך החוזה שלנו לאפליקציה
2. כתיבה לבלוקציין דרך החוזה החכם

כמובן שהכל בסביבה הלוקאלית שלנו שמספר לנו ganache app

חיבור הבלוקציין לאפליקציה בreact

אז כמה דברים חשובים שיש לציין לפני שאציג את הקוד.

• לוודא שיש לכם את הספריה של ethers בפרויקט – אם יש לכם את הפרויקט מהשיעור קורס blockchain

• שאתם על סביבת הטסט כמובן ומשתמשים (deployed contract) בחוזה החכם דרך remix שכתבנו בשיעור הקודם קורס בלוקציין – חוזה חכם Smart Contract

• לשמור את הכתובת של החוזה שהעלאתם דרך remix
  

• יש לשמור את הABI של החוזה בפרוייקט עצמו , אפשר לשמור בתיקיה ואפשר פשוט לשים אותו בין הקבצים. ולשמור אותו כקובץ JSON.
  את הABI תוכלו להעתיק מכאן:
  

כעת ניגש לקוד באפליקציה הריאקטית שלנו.

DAPP – REACT REMIX & GANACHE

אז בשביל שלא יהיו לכם ארורים מוזרים ולא תדעו איך לטפל בהם יש לוודא שהסביבה שלכם תקינה. כלומר יש לוודא שהעליתם את החוזה דרך סביבה לוקלית של GANACHE עם METAMASK וגם שהעתקתם את כתובת החוזה העדכני שהעליתם וגם את הABI.

ועכשיו הקוד ובהמשך הסברים:

import React, { useEffect, useState } from 'react';
import {ethers} from 'ethers';
import SimpleSrote_abi from './SimpleStore_abi.json';

function SimpleSrote() {

    const contractAddress = '0xfd712d59707ddf8a310A21472eD089Af11C571f2';

    const [errorMesage, setErrorMessage] = useState(null);
    const [defaultAccount, setDefaultAccount] = useState(null);
    const [connectButtonText, setConnectButtonText] = useState('connect wallet');

    const [currenctContactVal, setCurrenctContactVal] = useState(null);

    const [provider, setProvider] = useState(null);
    const [signer, setSigner] = useState(null);
    const [contract, setContract] = useState(null);



    const connectWalletHandler = () => {
        if (window.ethereum) {
            window.ethereum.request({ method: 'eth_requestAccounts' })
                .then(result => {
                    accountChangeHandler(result[0]);
                    setConnectButtonText('Wallet connected');
                })
        } else {
            setErrorMessage('Need to install metamask');
        }
    }

    const accountChangeHandler = (newAccount) => {
        setDefaultAccount(newAccount);
        updateEthers();
    }
    const updateEthers = () => {
        
        let tempProvider = new ethers.providers.Web3Provider(window.ethereum);
        let tempSigner = tempProvider.getSigner();
        let tempContract  = new ethers.Contract(contractAddress , SimpleSrote_abi , tempSigner);
        
        setProvider(tempProvider);
        setSigner(tempSigner);
        setContract(tempContract);
        
    }

    const getCurrectVal = async () =>{
        let val = await contract.get();
        console.log(val)
        setCurrenctContactVal(val);
    }

    const setHandler = (event) => {
        event.preventDefault();
        contract.set(event.target.setText.value);
    }
    useEffect(()=>{
        console.log(signer,provider,contract);
    },[signer,provider,contract]);

    return (
        <div>
            <h3>Get/set interaction with contract</h3>
            <button onClick={connectWalletHandler}>{connectButtonText}</button>
            <h3>Address: {defaultAccount}</h3>

            <form onSubmit={setHandler}>
            <input id="setText" type="text" />
            <button type="submit">update contract</button>
            </form>
            <button onClick={getCurrectVal}>Get Currecnt Value</button>
            {currenctContactVal}
            {errorMesage}
        </div>
    )
}

export default SimpleSrote;

אפשר לראות את הIMPORTS ואין צורך להסביר ולהתעכב על זה. ניגש ישר לעניין.
מה שמאד מעניין הם:

1. Provider
2. Singer
3. Contract

יש לנו 2 פעולות בבלוקציין (קריאה וכתיבה) שבהן אנחנו משתמשים בחוזה שלנו, ואפשר לראות את הפונקציות בקוד ונתחיל מהפונקציה updateEthers.

אז בשביל לעשות פעולה כלשהיא עם הבלוקציין צריכים להגדיר כמעט תמיד provider,singer,contract
שנסביר קצת על כל אחד ואחד.

• Provider – מאפשר לנו להתחבר לרשת הבלוקציין של ethereum והשימוש שלנו הוא להתחבר רשת איתריום דרך METAMASK כמובן.
• Singer – החותם הוא בעצם חשבון שחותם על הפעולות המתבצעות על הרשת. השימוש שלנו הוא לקשר את החתם לחוזה וכך גם ניתן לראות לTRANSACTIONS את הפעולות שאותו חשבון חתם אותם.
• Contract – מאפשר לנו לתקשר עם החוזה שלנו והפונקציות הכתובות בו. כפי שאנו הגדרנו את החוזה שלנו לעשות פונקציה של קריאה ופונקציה של כתיבה.

עכשיו אם תריצו את הקוד שלנו , תראה כי יש כפתור ראשון של התחברות עם metamask וגם תעשו get current value אז תראו כי מגיע מידע (בדיליי , אולי ידרש לחיצה נוספת..) וגם לא מגיע אז כנראה שאין מידע (שווה ל0) תוכלו לעדכן גם דרך רמיקס ואז שוב לנסות להביא את המידע, ואם תרצו לשנות את המידע תוכל להתשמש בשדה וללחוץ על update contract , פעולה זו כמובן דורשת משאבים כלשהם ויהיה עליכם לשלם GAS עבורה, כמו כן אנחנו על סביבת בדיקות אז זה עולה לכם האיתריום פיקטיבי.. וכן שוב ללחוץ על כפתור הGET ותראו שהמידע שחוזר הוא המידע שזה עתה שיניתם.

לסיכום קורס בלוקציין – אפליקציה וחוזה חכם DAPP

למעשה עשינו הכנה קצרה על מנת שיהיה לכם בסיס ראשוני לעבודה ומכאן והלאה אנחנו נמשיך ללמוד ולכתוב אפליקציה אמיתית מבוססת בלוקציין. כמו כן נלמד מדי פעם על נושאים ששווה להתעמק בהם ולתת להם פוסט שלם וגם אילו ספריות רלוונטיות ששווה להכיר לעומק. אז כבר בשיעור הבא נעבור על חוזה חכם של ETHEREUM מורכב יותר שישרת אותנו לצורך MINT של NFT.

פוסטים קשורים:

קורס בלוקציין – חוזה חכם Smart Contract קורס blockchain – הקדמה והכנה לפרויקט קורס blockchain – הארנק Wallet קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE