ברוכים הבאים לקורס blockchain ופיתוח אפליקציות web3. אז כפי שהסברנו בפוסט ההקדמה על מה זה web3 נוכל להמשיך וללמד אתכם , כמפתחים, איך עושים את הדברים באמת , איך בונים אפליקציות מבוססות בלוקציין מה שככל הנראה יכין אתכם לעולם החדש.
מי שכבר מכיר את קודקודייל , אנחנו דוגלים בלימוד בעזרת דוגמאות שלב אחרי שלב בפרויקטים בסדר גודל קטן על מנת לבנות לכם בסיס ראשוני שאיתו תוכלו להמשיך הלאה ולהתפתח . והפעם נבנה פרויקט מבוסס בלוקציין עם המשלב כמה טכנולגויות:
- react בשביל צד לקוח.
- solidity – שפת קוד מבוססת Ethereum לכתיבת חוזה חכם (Smart Contract).
- js, html ,css – השפות הבסיסיות לעבודה בweb. חשוב מאוד לדעת ברמה טובה.
עוד נשתמש בספריות בסיסיות שחשוב להכיר כי הן יקצרו לנו את העבודה בהרבה והיום כמעט ואין פרויקט web3 שלא עושה שימוש בחלק מספריות אלו ולכן חשוב להכיר היטב:
- ethers
- hardhat
- waffle
- openzeppelin
- נעבור על הספריות הללו עוד בהמשך הלימודים פה באתר.
נתחיל לבנות את הצד לקוח – react
אוקי אז מי שלא יודע ריאקט יכול לנסות וללמוד מהבלוג שלנו , יש לנו כמה קורסים בריאקט שיכולים לשפר אתכם באופן דיי מיידי.
נמשיך לקוד,
העניין המרכזי פה הוא לא המבנה של ריאקט שהוא פשוט למדיי . אלא העניין הוא לחבר את הגולש אל האפליקציה שלנו דרך הערוץ web3 שלרוב נעשה באמצעות תוסף תומך . אפשר להתממשק לתוספים שונים אבל לצורך הקורס שלנו אנחנו נתממשק כרגע רק אל metaMask שהינו התוסף הפופולארי ביותר (נכון להיום).
import './App.scss'; import React, { useEffect, useState } from 'react'; import GallerySlider from './GallerySlider'; import logo from './logo.png'; import { ethers } from 'ethers'; function App() { const [address , setAddress] = useState(); const connectWallet = () =>{ if(window.ethereum) { window.ethereum.request({method: 'eth_requestAccounts'}) .then(result=>{ setAddress(result[0]); }) }else { console.log('Install Metamask') } }; return ( <div className="App"> <header className="App-header"> <img src={logo} alt="logo" /> <span>NTF Artist</span> </header> <div className="collection-cointainer"> <h1>New NFT's Collections</h1> <GallerySlider /> </div> <button type="button" onClick={connectWallet} className="mint-btn">Mint NFT Now</button> {address} </div> ); } export default App;
import React, { useEffect, useState } from 'react' import imgOne from './01.jpg'; import imgTwo from './02.jpg'; import imgThree from './03.jpg'; import imgFour from './04.jpg'; function GallerySlider() { const [slides, getSlides] = useState([]); useEffect(() => { if (slides.length < 1) { setTimeout(() => { getSlides([...slides, { img: imgOne, desc: 'Some text about this art.', id: 243567 }, { img: imgTwo, desc: 'Some text about this art.', id: 98742564 }, { img: imgThree, desc: 'Some text about this art.', id: 978645 }, { img: imgFour, desc: 'Some text about this art.', id: 3568 }]); }, 2000); } }, []); if (slides && slides.length > 0) { return ( <> <ul className='listOfArts'> { slides.map((item) => <li className='item-container' key={item.id}> <img src={item.img} alt={item.desc} /> <div className='artDescription'> <span> {item.desc} </span> <button type="button" disabled>its Minted</button> </div> </li> ) } </ul> </> ) } else { return (<> Gallery is loading, Please Wait.. </>) } } export default GallerySlider;
נעבור על הקוד כעת,
אז יצרנו אפליקציה ממש בסיסית שבהמשך תהיה מיני חנות של אמן שמוכר יצירות בNFT. כרגע נראה כי יש עמוד נחיתה עם קצת יצירות שכפי שאפשר לראות כרגע התמונות סטטיות אבל בהמשך היצירות יוצגו מתוך מסד הנתונים הבלוקצייני. (כרגע יש settimeout). אז יש לנו סהכ 2 רכיבים (שני קצבים)
בשביל העניין יש פה קצת עבודת CSS על מנת לקבל איזה look&feel של אתר בעבור יצירות NFT .
והחלק החשוב הוא הכפתור לביצוע ה mint שממנו יתחיל כל הקסם.
וניגש לעיקר, התחברות עם ה account של הלקוח.
קודם כל נתקין ספריית עזר: (נתשמש בה בשיעורים הבאים)
- ethers
כפי שניתן לראות כל הקוד המוצג הוא קוד בסיסי של react. עשינו שימוש בhooks של address בשביל לקבל את הכתובת של החשבון שמתחבר אל ה Dapp שלנו ונציג את הכתובת רק לצורך בדיקה שאכן זה עובד. כמו כן אתם צריכים שיהיה לכם את התוסף של metamask אחרת תקבלו שגיאה.
אז החלק המעניין נמצא בשורות 10 – 18 בפונקציה connectWallet. שמה אנחנו עושים קריאה לחשבון של המשתמש. היות ומותקן לנו על הדפדפן metamask אז יש לנו גישה אל אובייקט זה שיושב על window .
וכל מה שאנחנו מבקשים כרגע זה את הכתובת הציבורית של המשתמש.
סיכום הקורס בלוקציין שיעור המבוא
זהו הצעד הראשון שלנו! התחברות בין חשבון לאפליקציה שלנו בוצעה בהצלחה. ברור שכרגע כל זה עוד לא עוזר לנו לייצר קריאה או כתיבה לבלוקציין. אבל שלב שלב 🐊😎
תצוגת הפרויקט שלנו לעת עתה: