שלב 3: הפעל את פורטל המפתחים של Dapp

    צעדים שלישיים

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

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

    בואו נתחיל!

    ראשית, נדבר על האופן שבו תקבל גישה לרשתות אתריום ציבוריות אלה.

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

    יכול מאוד להיות שאתה מארח את הצומת שלך באמצעות אחד מלקוחות Ethereum הרבים הקיימים כיום (Hyperledger Besu (לקוח Java שפותח על ידי ConsenSys), Geth (לקוח Go), Parity (לקוח Rust) וכו ‘) – עם זאת, יש די קצת תקורה של DevOps שמגיעה עם אירוח ותחזוקת הצומת האתריום שלך – במיוחד אם אתה רוצה לעשות את זה בצורה אמינה! ככאלה, אנו ב- ConsenSys בנינו את Infura – היצע תשתית Ethereum ברמה עולמית. אינפורה דואגת לכל החלק ‘ניהול הצמתים’ עבורך, ומספקת לך גישה מיידית, אמינה וניתנת להרחבה לאשכולות צמתים אתריים! אתה יכול לחשוב על Infura כעל “Ethereum-nodes-as-a-Service” &# 128578;

    תחילת העבודה עם אינפורה

    כדי להתחיל לעבוד עם Infura, תרצה לרשום חשבון בכתובת infura.io. אל דאגה – זה לגמרי בחינם להתחיל, ולא תצטרך להזין שום מידע רגיש!

    לאחר ההרשמה, תועבר לדף שנראה כך:

    infuraLogin

    כפי שמציע דף זה, כדי להתחיל, תבחר באפשרות הראשונה “התחל וצור את הפרויקט הראשון שלך כדי לגשת לרשת אתריום!”

    אתה יכול לתת שם לפרויקט שלך מה שתרצה – נקרא לשלנו “פרויקט-מבחן”.

    InfuraNP

    כעת תוצג בפניך האישורים שתצטרך לגשת לצמתים של Infura!

    InfuraC

    שמור על דף זה פתוח! נחזור לזה בהמשך &# 128578;

    הדבר הבא שנעשה הוא לאתחל פרויקט טראפל חדש. אם אתה זקוק לעזרה בהתקנת טראפל, עיין בסעיף הקודם של תיעוד זה.

    כדי לאתחל פרויקט טראפל חדש, צור תיקיה חדשה והפעל את

    כמהין init

    לאחר מכן, תרצה להוסיף את ספק ארנק ה- Truffle HD לפרויקט החדש שלך שאותחל, כדי שתוכל לחתום על העסקאות שלך לפני שיישלחו לצמתים של Infura. כל שינוי במדינה שאתה מבצע באת’ריום מגיע בצורה של עסקה – בין אם זה פריסת חוזה, קריאה לפונקציה במסגרת חוזה או שליחת אסימון! כל עסקה צריכה להיות חתומה על ידי חשבון – ולכן היישום שלנו זקוק ליכולת לחתום על עסקאות כדי שהיא תוכל לבצע שינויים במדינה באת’ריום.!

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

    כדי להוסיף את ספק ארנק ה- Truffle HD לסוג הפרוייקט החדש שאותחל במסוף שלך:

    התקנת npm – save @ truffle / hdwallet-provider

    זה עשוי לזרוק כמה אזהרות, אבל כל עוד זה מתקין, אתה יכול ללכת!

    כעת אנו יכולים ליצור חשבון Ethereum לשימוש היישום שלנו! מכיוון שספק הארנק שלנו הוא ארנק HD (דטרמיניסטי היררכי), אנו יכולים ליצור באופן דטרמיניסטי חשבונות באמצעות אותו ביטוי זרע, או ממנון.

    כדי ליצור את החשבון שלנו, ראשית נצטרך להפעיל את גנאש. Ganache הוא מוצר טראפל המאפשר לנו ליצור בקלות רשת Dev מקומית משלנו. כדי להפעיל גנאש, פשוט הקלד

    גנאש-קלי

    אם השלמת את שלב 2 במדריך זה, עליך להתקין כבר את גנאש / ganache-cli – אם לא, תוכל להתקין אותו באמצעות הפקודה npm:

    npm להתקין -g ganache-cli

    או אם אתה משתמש בחוט 

    חוט גלובלי הוסף גנאש-קלי

    בשלב הבא נצטרך לאפשר לאפליקציה שלנו לדבר עם גנאש. עבור אל ספריית הפרויקט שלך ובדוק את הקובץ truffle-config.js, פשוט בטל את ההערה (או הוסף) את השורות הבאות תחת רשת:

    פיתוח: {host: "127.0.0.1", // יציאת Localhost (ברירת מחדל: ללא): 8545, // יציאת Ethereum רגילה (ברירת מחדל: אין) רשת_יד: "*" // כל רשת (ברירת מחדל: אין)},

    לא מומלץ

    נֶחְמָד! עכשיו האפליקציה שלנו יכולה לדבר עם רשת הפיתוח שלנו בגנאש שפועלת ב 127.0.0.1:8545! כעת, בחלון מסוף חדש (אך עדיין בתיקיית הפרויקט שלך), הפעל את הפקודה

    קונסולת כמהין

     כדי להתחבר לרשת הגנאש שלך. אל דאגה – אנו נתחבר לרשת ציבורית מאוחר יותר! אנחנו רק צריכים להתחבר לגנאש עכשיו כדי ליצור את המפתחות שלנו &# 128578;

    הערה: אם אתה נתקל בבעיות וודא שבגנאש מספר יציאת שרת RPC שלך תואם לקובץ התצורה של כמהין. במקרה של ברירת המחדל, 8545 אמור לעבוד, אחרת שנה את קובץ התצורה כך שיתאים לגנאש.

    כעת הזן את הפקודות הבאות במסוף הכמהין ליצירת הארנק שלך:

    const HDWalletProvider = דורש (‘@ כמהין / ספק hdwallet’);

    זה אמור לגרום לתגובה של “לא מוגדר”

    עבור מנמניק בן 12 מילים, אתה יכול להשתמש בגנרטור מנמוני כגון זֶה אם אתה רוצה!

    וודא שאתה שומר את הביטוי הממוני שלך (זרע)! נצטרך את זה אחר כך &# 128515;

    לאחר מכן, הוסף את הפקודה הבאה במסוף שלך (בזמן שאתה עדיין בפיתוח כמהין):

    const mnemonic = ’12 מילים כאן ‘; ארנק const = חדש HDWalletProvider (מנמוניק, "http: // localhost: 8545");

    עכשיו, במסוף הכמהין שלך הזן את הפקודה 

    ארנק

    אם אתה גולל למעלה, אתה אמור לראות רשימה של חשבונות כאלה!

    תוסף

    למרות שהחשבון נוצר בזמן שהתחברנו לגנאש, אנו יכולים להשתמש באותם חשבונות Ethereum בכל רשת Ethereum (שים לב, עם זאת – למרות שניתן להשתמש באותו חשבון בכל רשת Ethereum, נכסים / פעילויות הנוגעים לכך. חשבון ספציפי לרשת – לדוגמא, אם אני מבצע עסקה ב- Ethereum Mainnet, אותה עסקה תתרחש רק ב- Ethereum Mainnet, ולא בשום רשת אחרת). כעת אנו נפסיק לקיים אינטראקציה עם Ganache (רשת dev מקומית), ולהתחיל להשתמש בחשבון זה כדי לקיים אינטראקציה עם כמה רשתות ציבוריות!!

    בדרך כלל, הדבר הראשון שתצטרך לעשות בעת אינטראקציה עם רשת ציבורית הוא להשיג חלק מהאתר של אותה רשת. במקרה שלנו, אנו נתחבר לרשת הבדיקה הציבורית של רופסטן, לכן נצטרך להשיג מעט אתר רופסטן (ETH)! אל דאגה – בדיקת ETH נטו בחינם ושופעת, וסופר קל להשגה &# 128077;

    הגיע הזמן לרכוש מבחן ETH

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

    לצורך התייחסות, רשת המבחנים של רופסטן היא רשת בדיקות אתריום ציבורית, בה תוכלו לבדוק את הקוד שלכם בסביבה המשקפת מקרוב את זו של רשת המנה Ethereum. ההבדל העיקרי בין רשת המבחנים רופסטן (לבין רשתות בדיקת Ethereum הציבוריות האחרות) הוא שבארץ רשת הבדיקה, ה- ETH נמצא בשפע ואין לו שום ערך אמיתי! כאשר אתה מתחיל לקיים אינטראקציה עם אתר Ethereum, הת’ר שבו אתה משלם עבור העסקאות שלך (עלויות דלק) יעלה דולרים בפועל – ולכן עלינו לוודא שאנחנו עושים את הדברים לפני כן, כדי שלא נאבד את כוחותינו. – מזומנים שהשתכרנו / ETH הווירטואלי היקר שלנו!

    ברשת המבחנים של רופסטן, יחד עם מרבית רשתות הבדיקה הציבוריות האחרות, יש חוקרי בלוקים רבים שתוכלו לראות את הפעילות המתרחשת ברשת (https://ropsten.etherscan.io/). כדי לראות את החשבון הממומן שלך, פשוט הדבק את כתובת חשבונך בסייר – ותוכל להציג את כל ההיסטוריה המשויכת אליו:

    צילום מסך 2020 09 01 בשעה 4 34 21 בבוקר

    בְּסֵדֶר! כעת, לאחר שקיבלנו את ספק הארנק שלנו וחשבון הממומן באמצעות Ropsten ETH, אנו יכולים לחזור לפרויקט שלנו ולהפנות אותו אל צמתי Infura המחוברים לרשת הבדיקות Ropsten.

    הדבר הראשון שנרצה לעשות הוא ליצור קובץ a.env כדי לארח את הסודות היקרים שלנו! סודות אלה כוללים את מפתח ה- Infura API שלנו (שנוצר כשיצרנו את חשבון Infura שלנו), ואת הביטוי הממוני שלנו.

    ברמת השורש של הפרויקט שלך, פשוט צור קובץ חדש “.env”. כמו כן, יהיה עליך להתקין את חבילת NPM dotenv על ידי הזנת הפקודה הבאה במסוף

    התקנת npm – שמור dotenv

    בקובץ new.env זה תזדקק לשני דברים:

    INFURA_API_KEY = הכנס את מפתח ה- API שלך כאן (ללא הצעות מחיר)

    MNEMONIC = “בועת חוט מאוורר לווייתן עדשה מושב מקוון חושף את הזוכה במשפט מספר המניות”

    INFURA_API_KEY הוא מזהה הפרויקט מהפרויקט שיצרת בעבר ב- infura:

    צילום מסך 2020 09 01 בשעה 4 37 12 בבוקר

    ו- MNEMONIC הוא ביטוי הזרע בן 12 המלים שהשתמשת בו בעבר ליצירת חשבונך.

    כעת הקובץ שלך צריך להיראות כך:

    צילום מסך 2020 09 01 בשעה 4 41 53 בבוקר

    בסדר, אנחנו מתקרבים!

    הערה: אם אתה מתכוון לדחוף זאת למאגר של Github, או להפוך את הפרויקט הזה לציבורי בכל דרך שהיא, ודא שהקובץ your.env יהיה ב-.gitignore כדי שהסודות שלך לא ייחשפו.! 

    כעת נצטרך לעבור לקובץ truffle-config.js. כאן, נצטרך להוסיף כמה דברים לציון הספק שלנו (המשמש לאינטראקציה עם Infura (ספק ה- Truffle HDWallet שהתקנו בעבר), ולהפנות את האפליקציה שלנו לצמתים של Ropsten Infura.

    בחלק העליון של הקובץ, הוסף:

    לִדרוֹשׁ("dotenv") .config (); const HDWalletProvider = דורש ("ספק כמהין / hdwallet");

    לאחר מכן, תחת “רשתות”, תרצה להוסיף את הרשת הבאה:

    ropsten: {ספק: () => HDWalletProvider חדש (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), רשת_יד: 3, // הגז מזהה של רופסטן: 5500000, // לרופסטן יש מגבלת חסימה נמוכה יותר מאשר אישורי mainnet: 2, // # confs להמתין בין הפריסה. (ברירת מחדל: 0) פסק זמן פסיכולוג: 200, // # חסימות לפני פריסת זמן (מינימום / ברירת מחדל: 50) skipDryRun: true // דלג על ריצה יבשה לפני העברות? (ברירת מחדל: שקר עבור רשתות ציבוריות)}

     

    עכשיו הקובץ truffle-config.js שלך צריך להיראות בערך ככה!

    הערת שוליים:

    אם אתה משתמש בנקודות קצה של Infura, נדרש הפרמטר ‘מ-‘ מכיוון שאין להם ארנק. אם אתה משתמש בנקודות קצה של גאנאש או Geth RPC, זה פרמטר אופציונלי.

    צילום מסך 2020 09 01 בשעה 4 50 54 בבוקר

    עכשיו אנחנו מוכנים לקוסם! הגיע הזמן לפרוס חוזה חכם ל- ROPSTEN!

    הגדרת חוזה חכם

    הגדרת מוצקות

    ראשית, נרצה ליצור חוזה חכם לפרוס! אתה יכול לתפוס את החוזה החכם שפיתחת בסעיף הקודם של המדריך הזה, לבנות חוזה חכם משלך, או פשוט להשתמש בחוזה לדוגמה הבא (הפשוט ביותר):

    מוצקות פרגמה >= 0.5.8; חוזה SimpleStorage {uint256 storeData; ערכת פונקציות (uint256 x) ציבורית {storeData = x; } פונקציה get () מחזירה תצוגה ציבורית (uint256) {return storedData; }}

    יש ליצור חוזה זה כקובץ “.sol” (Solidity) בתיקיית “חוזים” של הפרויקט שלך (בתרחיש זה, יצרנו את הקובץ SimpleStorage.sol, שהוא חוזה SimpleStorage שלנו:

    פיגומים

    הגדרת הגירה

    בשלב הבא נצטרך להגדיר את קובץ ההעברה שלנו!

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

    קובץ ההגירה שלנו לפריסת החוזה שלנו ייראה כך:

    const SimpleStorage = artifacts.require ("SimpleStorage.sol"); module.exports = function (deployer) {deployer.deploy (SimpleStorage); };

    שמור קובץ זה בתיקיית “העברות” תחת השם “2_deploy_contracts.js”.

    פריסת החוזה הציבורי הראשון שלך

    הגיע הזמן לנדוד

    עכשיו אתה מוכן למעשה ל- MAGIC TO HAPPEN! חזור אל המסוף והקלד

    כמהין נודדים – רשת רופסטן

    בּוּם!&# 128163; הקוד שלך נפרס לרשת המבחנים הציבורית של Ropsten Ethereum!!! 

    מה שקרה זה עתה היה:

    1. החוזה החכם שלך מסוג Solidity (בתיקיית “החוזים”) נערך עד ל- bytecode – הקוד הניתן לקריאה במכונה לשימוש במחשב הווירטואלי של Ethereum..

    2. קוד byt זה, + כמה נתונים אחרים, אוגדו יחד לעסקה.

    3. העסקה הזו נחתמה על ידי חשבונך.

    4. העסקה הזו נשלחה לצומת Infura המחובר לרופסטן.

    5. העסקה הופצה ברחבי הרשת, נאספה על ידי כורה של רופסטן ונכללה בחסימת רופסטן.

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

    אתה יכול להציג את החוזה שלך באמצעות אתר הסרוק: https://ropsten.etherscan.io/ – פשוט הדבק את כתובת החוזה (אמור להיות במסוף שלך) כדי להציג אותה!

    צילום מסך 2020 09 01 בשעה 5 19 12 בבוקר

    מדהים! זה עתה פרסנו את החוזה החכם הראשון שלנו לרשת אתריום ציבורית! &# 129327;

    התהליך זהה בפריסה למנהרת Ethereum, אלא שתחליף את הרשת בקובץ truffle-config.js עבור המנה Ethereum (וכמובן, תריץ את הפקודה להעברת כמהין Truffle במקום ה- Ropsten). ! אנו לא נוביל אותך בתהליך זה כאן, מכיוון שפריסה למוקד Ethereum תעלה לך דולר אמיתי – אך אם ברצונך לקבל סיוע בכך, קפוץ אל מחלוקת ConsenSys ונשמח לעזור!

    בניית חזית Web3 

    כעת, לאחר שפרסנו את החוזה שלנו לרופסטן, בואו נבנה ממשק משתמש פשוט שיתקשר איתו!

    הערה: “ממשקי הקצה” של dApp הם רק החזית הישנה והרגילה שלך – ככאלה, אנו יכולים להשתמש בכל הכלים הישנים שלנו המוכרים לנו (צור-תגובה-אפליקציה וכו ‘) בכדי לסובב את הקצה הקדמי שלנו ואז פשוט הוסף כמה דברים כדי לאפשר לחזית הקריאה ולכתוב לאת’ריום! המשמעות היא שכל כישורי ה- dev web הישנים שלך ניתנים להעברה ישירות ל- Ethereum-land / Web3!!

    הגדל את פרויקט ה- React שלנו 

    בסדר, בוא נתחיל.

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

    צילום מסך 2020 09 01 בשעה 5 26 33 בבוקר

    עכשיו נתחיל בהפעלת פרויקט תגובה, בואו נקרא לשלנו בדוגמה זו “מעבדת אחסון”

    במסוף שלנו בואו נפעיל את הדברים הבאים כדי להתחיל את הפרויקט שלנו 

    מעבדת אחסון של npx create-react-app

    עכשיו, כשיש לנו את לוח הבודד החדש של הפרויקט, בואו נכנס לספריית הפרויקטים

    מעבדת אחסון תקליטורים

    עכשיו, כשאנחנו בתוך הפרויקט שלנו, נוסיף כעת את חבילת Web3, שתאפשר לפרויקט שלנו לקיים אינטראקציה עם Ethereum! עוד ברשת 3 כאן

    npm להתקין את web3

    Web3 היא אחת משתי חבילות עיקריות שבהן אנו יכולים להשתמש, והשניה היא ethers.js. לדוגמא זו נשתמש ב- web3, אך אם אתה רוצה לקרוא עוד על ethers.js, הסתכל כאן 

    להסבר מפורט על השניים, עיין במכתב זה web3 לעומת אתרים

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

    ראשית, בוא ניקח את הספרייה שלנו מקודם (מבחינתי זה “אחסון אחורי”) שמכיל רק את העבודה שכבר ביצענו הכרוכה בחוזים החכמים שלנו ועכשיו בואו נוסיף זאת לפרויקט התגובה החדש שלנו. זה יחיה באותה רמה כמו ה- src שלנו, ועכשיו עלינו לקבל את כל מה שאנחנו צריכים יחד בתוך ה- REPO המגיב שלנו.

    צילום מסך 2020 09 01 בשעה 5 31 38 בבוקר

    בשלב הבא נצטרך להגדיר את הקובץ שלנו המכיל את פרטי ה- ABI שלנו.

    “ABI?”

    שמח ששאלת! 

    ממשק בינארי יישום חוזה (ABI) הוא הדרך הסטנדרטית לתקשר עם חוזים במערכת האקולוגית של Ethereum, הן מחוץ לבלוקצ’יין והן לאינטראקציה בין חוזה לחוזה. כאשר ערכנו את חוזה SimpleStorage שלנו בשלב מוקדם יותר, הוא יצר עבורנו קובץ JSON. בדוק בעצמך, יש לנו קובץ SimpleStorage.json בתוך ה- build / חוזים שלנו

    צילום מסך 2020 09 01 בשעה 6 04 20 בבוקר

    מבט ראשוני בקובץ זה יגלה מידע רב, כרגע אנו צריכים רק להתמקד ב- ABI על מנת לסנכרן את החוזה שלנו עם הקצה הקדמי שאנו מפתחים. JSON זה מכיל את המידע הדרוש לנו בכדי לתקשר את החוזה שלנו עם ממשק הקצה שלנו.

    ה- ABI שלנו הוא מערך המכיל אובייקטים. כשמסתכלים על הקובץ מקרוב, אתה יכול לראות שכל אחד מהאובייקטים הללו הם למעשה כל פונקציה שמכיל חוזה SimpleStorage שלנו.

    צילום מסך 2020 09 01 בשעה 5 33 23 בבוקר

    אתה יכול לראות במהירות

    “שם”: “סט”

    “שם”: “קבל”

    שניהם עם “סוג:” פונקציה “של שתי הפונקציות שהכרזנו בעת כתיבת החוזה החכם שלנו!

    למרות שפטר טראפל מטשטש את הצעדים הבאים, אנחנו הולכים לעבור דרך “ידנית” הרבה יותר לעשות דברים כדי שתחשפו לכל היסודות &# 128578;

    ראשית, קדימה והעתק את מידע ה- abi שלך – אנחנו נצטרך את זה רק רגע. 

    בואו ניצור תיקייה בתוך ה- src שלנו בשם “abi”.

    בתוך תיקיית ה- abi הטרייה שלנו בואו נכין כעת קובץ בשם abi.js

    הערה: איננו זקוקים להפרדה זו מבחינה טכנית ויכולים פשוט להוסיף את abi.js ל- src שלנו, אך שמירה על קבצי abi.js שלנו מסייעת לארגון.

    כעת נעתיק את מערך ה- abi שלנו שתפסנו קודם מקובץ SimpleStorage.JSON ונוסיף אותו לקובץ ה- abi.js החדש שלנו. נשנה את הקובץ מעט כדי לאפשר לפרויקט שלנו לייבא את המידע לאפליקציות שלנו. אל תשכח מכיוון שמדובר בקובץ j.js, עלינו להוסיף ייצוא כדי שיהיה לנו היכולת למשוך אותו לאפליקציית js. מאוחר יותר. בואו נקרא את הקונסט זהה לחוזה, למעט בארון הגמלים (ראה קוד בהמשך):

    זה יהיה הקוד שאנחנו שומרים בקובץ abi.js שלנו

    export const simpleStorage = [{constant: false, קלטים: [{name: "איקס", סוּג: "256", },], שם: "מַעֲרֶכֶת", תפוקות: [], יש לשלם: שקר, מצב "לא ניתן לשלם", סוּג: "פוּנקצִיָה", }, {קבוע: נכון, קלט: [], שם: "לקבל", יציאות: [{name: "", סוּג: "256", },], יש לשלם: false, state "נוף", סוּג: "פוּנקצִיָה", },];

    הגיע הזמן להגיע ל- App.js שלנו ולייבא גם את web3 וגם את קובץ abi.js הטרי שלנו.

    אנו נשתמש גם בקרסים בדוגמה זו (ולכן אנו מייבאים גם {useState} תוכלו לקרוא עוד על useState כאן.

    החלק העליון של קובץ ה- App.js שלנו אמור להיראות כך כך:

    יבוא תגובה, {useState} מ "לְהָגִיב"; ייבא את {simpleStorage} מ "./ abi / abi"; ייבוא ​​Web3 מ "web3"; יְבוּא "./App.css";

    כעת עלינו לוודא שיש לנו את היכולת של כל משתמשים שרירותיים להיות מסוגלים להתחבר ולהשתמש ב- dApp שלנו, כל עוד יש להם ספק ארנק.!

    הארנק הראשי המשמש בחלל Ethereum לאינטראקציה עם dApp הוא MetaMask, שהוצג בשלב 1.

    אם אין לך MetaMask, בקר בכתובת metamask.io

    עם התקנת MetaMask, אנו יכולים לגשת לארנק שלנו בתוך ה- dapp שלנו באמצעות:

    const web3 = Web3 חדש (Web3.givenProvider);

    “Web3.givenProvider” יוגדר בדפדפן הנתמך על ידי Ethereum.

    (תוכלו לקרוא עוד על הסיבה לכך כאן)

    אז עכשיו הקוד שלנו צריך להיראות כך:

    ייבא תגובה, {useState} מ "לְהָגִיב"; ייבא את {simpleStorage} מ "./ abi / abi"; ייבוא ​​Web3 מ "web3"; יְבוּא "./App.css"; const web3 = Web3 חדש (Web3.givenProvider);

    בסדר! עד כה עשינו:

    • העלה פרויקט React
    • מותקן Web3
    • הוספנו את התיקייה שלנו המכילה את חוזה ה- build + שלנו + המעבר לפרויקט React שלנו
    • יצר קובץ abi.js המכיל את נתוני ה- abi ששאבנו מ- SimpleStorage.json
    • ייבא את הנתונים הדרושים לנו כדי לקיים אינטראקציה עם החוזה שלנו
    • יצר משתנה המאפשר ל- dApp שלנו לתקשר עם ארנק המשתמש

    שוב, למרות שטראפל הופך את השלבים הבאים למיותרים (אנו נדריך אותך בגרסה הרבה יותר פשוטה בהמשך), נוסיף מעט יותר מורכבות ידנית ל- dApp שלנו למטרות חינוך.

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

    כדי לאתר את כתובת החוזה, נווט לקובץ JSON שהיינו בו קודם לכן (המכיל את ABI (SimpleStorage.json)) וגלול לתחתית. הכתובת נמצאת בשדה “כתובת” כאן:

    "מַהְדֵר": { "שֵׁם": "סולק", "גִרְסָה": "0.5.8 + התחייבות .23d335f2.Emscripten.clang" }, "רשתות": { "3": { "אירועים": {}, "קישורים": {}, "כתובת": "0x24164F46A62a73de326E55fe46D1239d136851d8", "עסקהאש": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "עודכן": "2020-06-30T20: 45: 38.686Z", "devdoc": { "שיטות": {}}, "userdoc": { "שיטות": {}}}

    לחלופין, תוכל לעבור אל https://ropsten.etherscan.io/ וחפש את כתובת החשבון שפרס את החוזה! באתרסקאן לחיצה על “יצירת חוזה” תחשוף את כתובת החוזה עצמה.

    צילום מסך 2020 09 01 בשעה 5 43 46 בבוקר

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

    בלי זה, לא תהיה לנו יכולת לתקשר עם החוזה וה- dApp שלנו לא יעבוד כמתוכנן.

    תוסיף זאת תחת const web3 = Web3 חדש (Web3.givenProvider);

    const contractAddress = "כתובת החוזה שלך כאן";

    לאחר מכן ניצור משתנה חדש נוסף בשם “storageContract” שיכיל גם את כתובת החוזה שלנו (כך שהאפליקציה שלנו תדע איפה החוזה נמצא), וגם ה- ABI (כך שהאפליקציה שלנו תדע לתקשר עם החוזה).

    const storageContract = web3.eth.Contract חדש (simpleStorage, contractAddress);

    App.js שלנו אמור להיראות כך

    ייבא תגובה, {useState} מ "לְהָגִיב"; ייבא את {simpleStorage} מ "./ abi / abi"; ייבוא ​​Web3 מ "web3"; יְבוּא "./App.css"; const web3 = Web3 חדש (Web3.givenProvider); const contractAddress = "כתובת החוזה שלך כאן"; const storageContract = web3.eth.Contract חדש (simpleStorage, contractAddress);

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

    ייבא תגובה, {useState} מ "לְהָגִיב"; ייבא את {simpleStorage} מ "./ abi / abi"; ייבוא ​​Web3 מ "web3"; יְבוּא "./App.css"; const web3 = Web3 חדש (Web3.givenProvider); const contractAddress = "כתובת החוזה שלך"; const storageContract = web3.eth.Contract חדש (simpleStorage, contractAddress); פונקציה App () {const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    השימוש הראשון שלנו ב- useState (0) יחזיק את ה- uint256 שהמשתמש מצהיר עליו.

    (מוסכמות השמות של מספר, setUint, getNumber, setGet מקווה לעזור להראות מה קורה)

    ערך useState (“0”) משמש כמציין מיקום עד שיהיה לנו אישור על הפעולה החתומה שלנו (uint256 המוצהר שלנו)

    setUint בקרוב נתקשר בשובנו (עוד על כך בהמשך)

    הגיע הזמן להיגיון שלנו

    בשלב הבא נוסיף את מספר ההגדרות והמספר לוגיקה שלנו (אנו מוסיפים מספר הגדר בתוך האפליקציה שלנו)

    const numberSet = async (t) => {t.preventDefault (); חשבונות const = ממתינים ל- window.ethereum.enable (); חשבון const = חשבונות [0]; גז const = ממתין לאחסון Contract.methods.set (מספר) .estimateGas (); const post = ממתינים לאחסון Contract.methods.set (מספר). לשלוח ({מתוך: חשבון, דלק,}); }; const numberGet = async (t) => {t.preventDefault (); פוסט const = ממתין לאחסון Contract.methods.get (). call (); setGet (פוסט); };

    הגדרנו preventDefault (נמצא פרטים על preventDefault כאן)

    אנו משתמשים גם בשיחת async בעת קבלת החוזה (נמצא מידע על async כאן)

    ה- set set שלנו (hook) שומר ערך ברירת מחדל שאנו רואים בהתחלה (“0”)

    חשבונות const = ממתינים ל- window.ethereum.enable ();

    מוודא שאנחנו מתקשרים לכתובת המחוברת שלנו באמצעות MetaMask.

    חשבון const = חשבונות [0];

    מושך את חשבון ה- connect

    אולי אתה תוהה עם מה קורה 

    גז const = ממתין לאחסון Contract.methods.set (מספר) .estimateGas ();

    האפליקציה שלנו זקוקה להרשאה כדי לגשת לכספי המשתמשים לתשלום עבור דמי גז, לכל פונקציה שמבקשת אתר, ללא קשר אם זה נמצא ברשת המבחנים או במנה. זה המקום שבו החיבור שלנו ל- MetaMask יועיל לחתימה לשימוש זה כדי להגדיר את uint256 שלנו ולשלם עבורו (עם בדיקת ETH).

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

    הפונקציה “הגדר” של החוזה שלנו דורשת גז

    “קבל” לא.

    (הסיבה לכך היא ש- “Get” צופה במה שכבר הוכרז עם “Set”)

    פוסט const הולך לקחת את עבר ב- uint256, לאשר את העסקה (פרסם תשלום דמי גז) מארנק MetaMask שלך ברשת Ropsten.

    לאחר מכן אנו מעבירים את פרמטרי הפונקציות באמצעות methods.set () ועם הכתובת המוצהרת שלנו (כתובת המשתמשים) אנו מטפלים בפונקציה Set.

    אנו יוצרים את עסקת החוזה החכם שלנו על ידי העברת פרמטרי הפונקציה שלנו לשיטות החוזה החכם. Set (), וכתובת הגז וחשבון המשתמש המשוערת אל. Send ().

    const post = ממתינים לאחסון Contract.methods.set (מספר). לשלוח ({מתוך: חשבון, דלק,});

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

    עכשיו אנחנו צריכים את המספר שלנו

    const numberGet = async (t) => {t.preventDefault (); פוסט const = ממתין לאחסון Contract.methods.get (). call (); setGet (פוסט); };

    ההודעה הקבועה שלנו מאחזרת את המספר שנקבע וה- setGet מעביר את הערך החדש שהכרזנו

    אז ה- “0” שלנו לחץ על התייחס למספר GetGet ויהפוך את unint256 שלנו!

     אז עכשיו app.js שלך צריך להיראות ככה

    ייבא תגובה, {useState} מ "לְהָגִיב"; ייבא את {simpleStorage} מ "./ abi / abi"; ייבוא ​​Web3 מ "web3"; יְבוּא "./App.css"; const web3 = Web3 חדש (Web3.givenProvider); const contractAddress = "כתובת החוזה שלך"; const storageContract = web3.eth.Contract חדש (simpleStorage, contractAddress); פונקציה App () {const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); חשבונות const = ממתינים ל- window.ethereum.enable (); חשבון const = חשבונות [0]; גז const = ממתין לאחסון Contract.methods.set (מספר) .estimateGas (); const post = ממתינים לאחסון Contract.methods.set (מספר). לשלוח ({מתוך: חשבון, דלק,}); }; const numberGet = async (t) => {t.preventDefault (); פוסט const = ממתין לאחסון Contract.methods.get (). call (); setGet (פוסט); };

    בואו ניצור תשואה בסיסית מאוד לביצוע כדי שנוכל לבדוק אם אנו יכולים 

    • הגדר ערך unint256,
    • הרים את ארנק המטמאסק שלנו ואשר את העסקה
    • שלם את עלות הדלק
    • ואז קבל את הערך (unint256) שאחסנו לאחר השלמת העסקה.

    חזרתנו נראית כך: 

    החזר (הגדר את uint256 שלך: setUint (t.target.value)} /> לְאַשֵׁר

    השג את uint256 שלך {getNumber}); } ייצא יישום ברירת מחדל;

    קצת CSS מהיר

    בואו נעבור עכשיו לקובץ App.css, נמחק את קוד לוחית הדוד והוסף זאת במקום זאת

    .ראשי {text-align: center; תצוגה: flex; justify-content: center; צבע רקע: # f2f1f5; גובה: 100vh; }. כרטיס {גובה דקה: 50 וולט; רוחב: 50 וולט; תצוגה: flex; כיוון פלקס: עמוד; פריטי יישור: מרכז; justify-content: center; }. טופס {גובה: 20vh; רוחב: 20 וווו; תצוגה: flex; הצדק תוכן: רווח באופן שווה; כיוון פלקס: עמוד; }. כפתור {רוחב: 20 וווו; גובה: 5vh; }

    עכשיו אנחנו מוכנים לבדוק!

    בריצת המסוף שלך

    התחלת חוט

    במארח המקומי שלנו: 3000 אנחנו צריכים להיראות ככה

     

    צילום מסך 2020 09 01 בשעה 6 12 49 בבוקר

    כעת אנו אמורים להיות מסוגלים להזין ערך unint256 בשדה הקלט שלנו!

    לאחר שנאשר את המספר שלנו ב- dApp שלנו נחתום באמצעות MetaMask (וודא שהארנק שלך מוגדר לרשת רופסטן)

    confrim1

    עשינו זאת! &# 129303;

    כעת יש לנו את החוזה החכם שלנו המחובר לחזית ממשית ויש לנו את היכולת לתפעל את פונקציית ה- Set (בתנאי שיש לנו ETH הבדיקה לשלם את דמי הגז עבור העסקה). אז נוכל להתקשר לפונקציה Get ולקבל את הערך המאוחסן uint265.

    די מגניב הא!?!

    סטיילינג נוסף 

    עכשיו הגיע הזמן להראות כמה קל יכול להטמיע את הטכנולוגיה הפופולרית עוד יותר של Web2 בפרויקט שלנו.

    אנו הולכים להשתמש ב- MUI כדי להוסיף סטיילינג בסיסי, אם אתה כבר מתפתח עם React אולי אתה מכיר חומר-ממשק משתמש. (פרטים נמצאו כאן) חומר-ממשק משתמש או בקיצור MUI הוא מסגרת תגובה מאוד פופולרית המאפשרת לך לסובב במהירות פרויקט עם הרבה סטיילינג מבושל בתנאי שתמלא אחר מוסכמות השמות. קל מאוד גם לתפעל אם אתה מחפש להשתמש רק בקרן ולהתאים אישית משם.

    * זו תהיה דוגמה קצרה מאוד כיצד להוסיף MUI לפרויקט עם תוספות קטנות כדי להדגים כמה מהר תוכלו לשלב את הפרויקט שלנו כפי שהוא עומד עם Web2 tech.. 

    הוספת MUI

    נתחיל בהפעלת הפקודה (בעודנו נמצאים בספריית הפרויקטים שלנו במסוף (אם האפליקציה שלך עדיין פועלת, יהיה עליך לסגור אותה (ctrl + c), או לפתוח כרטיסייה חדשה)):

    להתקנה עם npm:

    npm install @ material-ui / core

    או עם חוט:

    חוט add @ material-ui / core

    כעת, לאחר שהזריקנו MUI, נתחיל בשינוי הסטיילינג שלנו. בחלק העליון של הקובץ app.js אנחנו הולכים לייבא כמה דברים חדשים:

    ייבא את {simpleStorage} מ "./ abi / abi"; לחצן ייבוא ​​מ "@ material-ui / core / Button"; ייבא את TextField מ "@ material-ui / core / TextField"; ייבא את {makeStyles} מ- "@ material-ui / core / סגנונות";

    הייבוא ​​של {makeStyles} מאפשר לנו לתפעל את העיצוב (במקרה זה) את הכפתורים ואת שדה הטקסט שלנו יחד עם ייבוא ​​הסטיילינג המוגדר כברירת מחדל של MUI.. 

    כעת נכין משתנה (מעל הפונקציה שלנו) שמביא את הסטיילינג של Boilerplate מ- MUI

    const useStyles = makeStyles ((נושא) => ({ שורש: { "& > *": {margin: theme.spacing (1),},},}));

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

    פונקציה App () {מחלקות const = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

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

    return (setUint (t.target.value)} variant ="מתואר" /> לְאַשֵׁר

    השג את uint256 שלך {getNumber}); } ייצא יישום ברירת מחדל;

    הקוד שלך אמור להיראות ככה

    ייבא תגובה, {useState} מ "לְהָגִיב"; ייבא את {simpleStorage} מ "./ abi / abi"; ייבוא ​​Web3 מ "web3"; יְבוּא "./App.css"; ייבא את {makeStyles} מ- "@ material-ui / core / סגנונות"; לחצן ייבוא ​​מ "@ material-ui / core / Button"; ייבא את TextField מ "@ material-ui / core / TextField"; const useStyles = makeStyles ((נושא) => ({ שורש: { "& > *": {margin: theme.spacing (1),},},})); const web3 = Web3 חדש (Web3.givenProvider); const contractAddress = "כתובת החוזה שלך כאן"; const storageContract = web3.eth.Contract חדש (simpleStorage, contractAddress); פונקציה App () {מחלקות const = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); חשבונות const = ממתינים ל- window.ethereum.enable (); חשבון const = חשבונות [0]; גז const = ממתין לאחסון Contract.methods.set (מספר) .estimateGas (); const post = ממתינים לאחסון Contract.methods.set (מספר). לשלוח ({מתוך: חשבון, דלק,}); }; const numberGet = async (t) => {t.preventDefault (); פוסט const = ממתין לאחסון Contract.methods.get (). call (); setGet (פוסט); }; return (setUint (t.target.value)} variant ="מתואר" /> לְאַשֵׁר

    השג את uint256 שלך {getNumber}); } ייצא יישום ברירת מחדל;

    עכשיו אם נסתכל על פרויקט התגובה שלנו הוא צריך להיראות ככה!

    צילום מסך 2020 09 01 בשעה 6 48 55 בבוקר

    כל הכבוד!

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

    סבב בונוס 

    זה יהיה נחמד להראות למשתמשים להתחבר לכתובת בתוך ה- dApp שלנו, לא?

    ובכן בואו נכין רכיב מאוד מהיר ובסיסי לעשות בדיוק את זה!

    נתחיל ביצירת רכיב נפרד שנוכל לייבא בחזרה לקובץ App.js שלנו. זה רעיון טוב להפריד בין ההיגיון שלנו כדי לא רק להקל על הניווט ב- App.js שלנו, אלא גם לעקוב אחר הנוהג של רכיב באופן אידיאלי רק לעשות דבר אחד. אם זה בסופו של דבר גדל, יש לפרק אותו למרכיבי משנה קטנים יותר.

    רכיב בנוי 

    נכין תיקיה חדשה בשם רכיבים באותה רמה כמו ה- src שלנו ובתוך תיקיה זו נכין קובץ Nav.js. פיגומי הפרויקט שלנו צריכים להיראות עכשיו ככה

    צילום מסך 2020 09 01 בשעה 6 47 07 בבוקר

    אנו גם נכין קובץ Nav.css בתוך תיקיית הרכיבים שלנו כדי לייבא סגנונות שאנו מיישמים במיוחד על רכיב ה- Nav.

    בואו נפתח את ה- Nav.js שלנו ובוא נייבא את קובץ ה- React, Web3 וה- empty.css שלנו

    ייבא תגובה מ "לְהָגִיב"; ייבוא ​​Web3 מ "web3"; יְבוּא "./ Nav.css"

    עכשיו נכין שיעור בשם Nav ונוסיף רק כמה דברים בתוכו כדי להציג את הכתובת המחוברת שלנו. נתחיל בהגדרת מצבנו לקרוא את החשבון

    מחלקה Nav מרחיב את React.Component {state = {account: "" };

    עדיין בתוך הכיתה שלנו נטען את החשבון לקריאה על ידי הוספת ההיגיון שלנו ל- loadAccount async

    async loadAccount () {const web3 = Web3 חדש (Web3.givenProvider || "http: // localhost: 8080"); רשת const = מחכה web3.eth.net.getNetworkType (); חשבונות const = ממתינים web3.eth.getAccounts (); this.setState ({חשבון: חשבונות [0]}); }

    לאחר מכן ניצור componentDidMount (שיופעל מיד לאחר הרכיב של הרכיב) במקרה שלנו משיכת החשבון הטעון. קרא עוד כאן

    componentDidMount () {this.loadAccount (); }

    הערת שוליים:

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

    לאחר מכן ניצור רנדור מעל החזרתנו, רנדור הוא שיטה הנדרשת כשאתה כותב רכיב React בשיטת class. בתמורתנו אנו מוסיפים מחלקת כתובת לחלוקה שלנו (כדי לתת סגנון בסיסי מאוחר יותר) לאורך תג p כדי להציג את הכתובת המחוברת אותה אנו מביאים באמצעות {this.state.account}

    render () {return (הכתובת המחוברת שלך: {this.state.account}); }} ייצא את ברירת המחדל של Nav;

    כעת הקובץ Nav.js שלנו צריך להיראות כך

    ייבא תגובה מ "לְהָגִיב"; ייבוא ​​Web3 מ "web3"; יְבוּא "./ Nav.css" מחלקה Nav מרחיב את React.Component {state = {account: "" }; async loadAccount () {const web3 = Web3 חדש (Web3.givenProvider || "http: // localhost: 8080"); רשת const = מחכה web3.eth.net.getNetworkType (); חשבונות const = ממתינים web3.eth.getAccounts (); this.setState ({חשבון: חשבונות [0]}); } componentDidMount () {this.loadAccount (); } render () {return (הכתובת המחוברת שלך: {this.state.account}); }} ייצא את ברירת המחדל של Nav;

     

    בואו ניגש לקובץ Nav.css ונוסיף סטיילינג בסיסי מאוד

    .כתובת {display: flex; justify-content: center; }

    מבחינה טכנית אתה יכול להוסיף את זה לקובץ App.css, זכור אם כי די מהר זה יכול להיות מבולגן. הרכיבים צריכים להיות לשימוש חוזר וכדי למנוע חיכוכים רבים ככל האפשר על ידי פילוח העבודה שלך זה יכול לחסוך לך כאב ראש בהמשך הדרך.

    עכשיו נחזור אל App.js שלנו ונייבא את הרכיב החדש שלנו ונדאג שנוסיף אותו לחזרתנו כדי להציג אותו!

    הקובץ App.js המוגמר שלנו אמור להיראות כך

    ייבא תגובה, {useState} מ "לְהָגִיב"; ייבא את {simpleStorage} מ "./ abi / abi"; ייבוא ​​Web3 מ "web3"; ייבא Nav מ "./components/Nav.js"; יְבוּא "./App.css"; ייבא את {makeStyles} מ- "@ material-ui / core / סגנונות"; לחצן ייבוא ​​מ "@ material-ui / core / Button"; ייבא את TextField מ "@ material-ui / core / TextField"; const useStyles = makeStyles ((נושא) => ({ שורש: { "& > *": {margin: theme.spacing (1),},},})); const web3 = Web3 חדש (Web3.givenProvider); const contractAddress = "הכתובת שלך כאן"; const storageContract = web3.eth.Contract חדש (simpleStorage, contractAddress); פונקציה App () {מחלקות const = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); חשבונות const = ממתינים ל- window.ethereum.enable (); חשבון const = חשבונות [0]; גז const = ממתין לאחסון Contract.methods.set (מספר) .estimateGas (); const post = ממתינים לאחסון Contract.methods.set (מספר). לשלוח ({מתוך: חשבון, דלק,}); }; const numberGet = async (t) => {t.preventDefault (); פוסט const = ממתין לאחסון Contract.methods.get (). call (); setGet (פוסט); }; להחזיר ( setUint (t.target.value)} גרסה ="מתואר" /> לְאַשֵׁר

    השג את uint256 שלך {getNumber}); } ייצא יישום ברירת מחדל;

    כעת עלינו לראות את הכתובת המחוברת שלנו למעלה ולשמור על כל הפונקציונליות שלנו!

    בונוס V1

    &# 127881; עשינו זאת! &# 127881;

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

    כל הכבוד! זו רק ההתחלה להרפתקאות הפיתוח שלך ב- Web3 וכבר יש לך מה להראות שלא רק יצרת אלא גם עוטפת את הראש. פנה אלינו בדיסקורד ושתף אותנו בפרויקט שלך (במיוחד אם ביצעת שינויים או תוספות)!

      עלייה למפתחים: שלב 1שלב עלייה למפתח שלב 1

      עלייה למפתחים: שלב 1

      עלייה למפתחים: שלב 2שלב 2 למפתחים

      עלייה למפתחים: שלב 2

      כיוון אתריום של 10 דקותכיוון אתריום של 10 דקות

      כיוון אתריום של 10 דקות
    Mike Owergreen Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    map