Βήμα 3: Εκκινήστε μια πύλη προγραμματιστή Dapp

    Τρίτα βήματα

    Λοιπόν, έχετε τα βασικά. Στην προηγούμενη ενότητα, δημιουργήσατε ένα έξυπνο συμβόλαιο και το εφαρμόσατε χρησιμοποιώντας το Truffle. Ωστόσο, στην προηγούμενη ενότητα, τα έξυπνα συμβόλαιά σας αναπτύχθηκαν σε ένα τοπικό δίκτυο ανάπτυξης – και αυτό δεν είναι διασκεδαστικό, αφού μόνο μπορείτε να αναπτύξετε πράγματα και να αλληλεπιδράσετε με αυτό το τοπικό δίκτυο δοκιμών! Θέλουμε φίλους! Και πρόσβαση σε άλλα έξυπνα συμβόλαια που έχουν αναπτύξει άλλα άτομα!

    Επομένως, σε αυτήν την ενότητα, θα περάσουμε στη χρήση ενός δημόσιου δοκιμαστικού Ethereum, ώστε να μπορείτε να συμμετάσχετε σε όλες τις ενέργειες που συμβαίνουν γύρω από το οικοσύστημα Ethereum!

    Ας αρχίσουμε!

    Πρώτον, θα μιλήσουμε για το πώς αποκτάτε πρόσβαση σε αυτά τα δημόσια δίκτυα Ethereum.

    Για να αποκτήσετε πρόσβαση σε αυτά τα δίκτυα, πρέπει να συνδεθείτε σε έναν κόμβο που είναι συνδεδεμένος στο αντίστοιχο δίκτυο. Μπορείτε να δείτε κάθε δίκτυο Ethereum ως τον δικό του μικρό κόσμο Ethereum και μπορείτε να δείτε έναν κόμβο Ethereum ως πύλη ή σημείο πρόσβασης σε κάθε έναν από αυτούς τους κόσμους! Επειδή το Ethereum είναι ένα κατανεμημένο δίκτυο, κάθε κόμβος Ethereum αποθηκεύει ολόκληρη την κατάσταση του δικτύου στο οποίο είναι συνδεδεμένο (υπάρχουν κόμβοι που δεν χρειάζεται να αποθηκεύσουν την πλήρη κατάσταση, αλλά μην ανησυχείτε για αυτό προς το παρόν) και επικοινωνούν συνεχώς με τους άλλους κόμβους του δικτύου για να διατηρήσετε αυτήν την κατάσταση ενημερωμένη! Επομένως, για να μπορούμε να διαβάζουμε και να γράφουμε σε αυτήν την κατάσταση, θα πρέπει να έχουμε πρόσβαση σε έναν από αυτούς τους κόμβους.

    Θα μπορούσατε να φιλοξενήσετε τον δικό σας κόμβο χρησιμοποιώντας έναν από τους πολλούς πελάτες Ethereum που είναι διαθέσιμοι σήμερα (Hyperledger Besu (πελάτης Java που αναπτύχθηκε από την ConsenSys), Geth (Go client), Parity (Rust client) κ.λπ.) – ωστόσο, υπάρχει λίγο από τα γενικά DevOps που συνοδεύει τη φιλοξενία και τη διατήρηση του δικού σας κόμβου Ethereum – ειδικά αν θέλετε να το κάνετε αξιόπιστα! Ως εκ τούτου, εμείς στο ConsenSys δημιουργήσαμε το Infura – μια προσφορά υποδομής Ethereum παγκόσμιας κλάσης. Η Infura φροντίζει για ολόκληρο το κομμάτι «διαχείριση κόμβων» για εσάς, παρέχοντάς σας άμεση, αξιόπιστη και επεκτάσιμη πρόσβαση σε συστάδες κόμβων Ethereum! Μπορείτε να σκεφτείτε το Infura ως «Ethereum-nodes-as-a-Service» &# 128578;

    Ξεκινώντας με το Infura

    Για να ξεκινήσετε με το Infura, θα πρέπει να εγγραφείτε λογαριασμός στη διεύθυνση infura.io. Μην ανησυχείτε – είναι εντελώς δωρεάν για να ξεκινήσετε και δεν θα χρειαστεί να εισαγάγετε ευαίσθητες πληροφορίες!

    Μόλις εγγραφείτε, θα μεταφερθείτε σε μια σελίδα που μοιάζει με αυτήν:

    infuraLogin

    Όπως προτείνει αυτή η σελίδα, για να ξεκινήσετε, θα επιλέξετε την πρώτη επιλογή “Ξεκινήστε και δημιουργήστε το πρώτο σας έργο για πρόσβαση στο δίκτυο Ethereum!”

    Μπορείτε να ονομάσετε το έργο σας ό, τι θέλετε – θα ονομάσουμε το δικό μας “test-project”.

    InfuraNP

    Τώρα, θα σας παρουσιαστούν τα διαπιστευτήρια που θα χρειαστείτε για να αποκτήσετε πρόσβαση στους κόμβους Infura!


    InfuraC

    Διατηρήστε αυτήν τη σελίδα ανοιχτή! Θα επιστρέψουμε σε αυτό αργότερα &# 128578;

    Το επόμενο πράγμα που θα κάνουμε είναι να ξεκινήσουμε ένα νέο έργο Truffle. Εάν χρειάζεστε βοήθεια για την εγκατάσταση του Truffle, ανατρέξτε στην προηγούμενη ενότητα αυτής της τεκμηρίωσης.

    Για να ξεκινήσετε ένα νέο έργο Truffle, δημιουργήστε έναν νέο φάκελο και εκτελέστε το

    τρούφα init

    Στη συνέχεια, θα θελήσετε να προσθέσετε τον πάροχο Truffle HD Wallet στο πρόσφατα αρχικοποιημένο έργο σας, ώστε να μπορείτε να υπογράψετε τις συναλλαγές σας προτού αποσταλούν στους κόμβους Infura. Κάθε αλλαγή της πολιτείας που κάνετε στο Ethereum έρχεται με τη μορφή μιας συναλλαγής – είτε αναπτύσσει μια σύμβαση, καλεί μια συνάρτηση μέσα σε μια σύμβαση είτε στέλνει ένα διακριτικό! Κάθε συναλλαγή πρέπει να υπογράφεται από λογαριασμό – επομένως, η εφαρμογή μας χρειάζεται τη δυνατότητα υπογραφής συναλλαγών, ώστε να μπορεί να κάνει αλλαγές στην κατάσταση στο Ethereum!

    Κάθε συναλλαγή κοστίζει επίσης αιθέρα. Αυτό το κόστος συναλλαγής αναφέρεται ως «κόστος φυσικού αερίου». Επομένως, προκειμένου να υποβληθούν σε επεξεργασία οι υπογεγραμμένες συναλλαγές μας από το δίκτυο μόλις αποστέλλονται στους κόμβους Infura, θα χρειαστεί να χρηματοδοτήσουμε τον λογαριασμό μας με κάποιον αιθέρα. Θα το καλύψουμε λίγο αργότερα, αλλά αυτός είναι ένας ακόμη σημαντικός λόγος για τον οποίο θα χρειαστείτε ένα πορτοφόλι & πάροχος πορτοφολιών!

    Για να προσθέσετε τον πάροχο Truffle HD Wallet στον πρόσφατα αρχικοποιημένο τύπο έργου στο τερματικό σας:

    εγκατάσταση npm –save @ truffle / hdwallet-provider

    Αυτό μπορεί να προκαλέσει κάποιες προειδοποιήσεις, αλλά όσο εγκαθίσταται, θα πρέπει να πάτε!

    Τώρα μπορούμε να δημιουργήσουμε έναν λογαριασμό Ethereum για χρήση της εφαρμογής μας! Δεδομένου ότι ο πάροχος πορτοφολιών μας είναι ένα πορτοφόλι HD (ιεραρχικό ντετερμινιστικό), μπορούμε να δημιουργήσουμε αποφασιστικά λογαριασμούς χρησιμοποιώντας την ίδια φράση σπόρου ή μνημονική.

    Για να δημιουργήσουμε τον λογαριασμό μας, θα πρέπει πρώτα να ξεκινήσουμε το Ganache. Το Ganache είναι ένα προϊόν Truffle που μας επιτρέπει να δημιουργούμε εύκολα το δικό μας τοπικό δίκτυο dev. Για να εκτελέσετε το ganache, απλώς πληκτρολογήστε

    ganache-cli

    Εάν ολοκληρώσατε το Βήμα 2 αυτού του οδηγού, θα πρέπει να έχετε ήδη εγκαταστήσει το Ganache / ganache-cli – αν δεν το κάνετε, μπορείτε να το εγκαταστήσετε χρησιμοποιώντας την εντολή npm:

    npm εγκατάσταση -g ganache-cli

    Ή εάν χρησιμοποιείτε νήματα 

    νήματα παγκόσμια προσθήκη ganache-cli

    Στη συνέχεια, θα πρέπει να επιτρέψουμε στην εφαρμογή μας να μιλήσει στο Ganache. Μεταβείτε στον κατάλογο του έργου σας και ελέγξτε το αρχείο truffle-config.js, απλά αποσυνδέστε (ή προσθέστε) τις ακόλουθες γραμμές στο δίκτυο:

    ανάπτυξη: {host: "127.0.0.1", // Localhost (προεπιλογή: καμία) θύρα: 8545, // Τυπική θύρα Ethereum (προεπιλογή: καμία) network_id: "*" // Οποιοδήποτε δίκτυο (προεπιλογή: κανένα)},

    ασυνείδητος

    Ομορφη! Τώρα η εφαρμογή μας μπορεί να μιλήσει στο δίκτυο ανάπτυξης Ganache που εκτελείται στο 127.0.0.1:8545! Τώρα, σε ένα νέο παράθυρο τερματικού (αλλά ακόμα στον φάκελο του έργου σας), εκτελέστε την εντολή

    κονσόλα τρούφας

     για να συνδεθείτε στο δίκτυό σας Ganache. Μην ανησυχείτε – θα συνδεθούμε αργότερα με ένα δημόσιο δίκτυο! Απλώς πρέπει να συνδεθούμε με το Ganache τώρα για να δημιουργήσουμε τα κλειδιά μας &# 128578;

    Σημείωση: Εάν αντιμετωπίζετε προβλήματα, βεβαιωθείτε ότι στο Ganache ο αριθμός θύρας διακομιστή RPC αντιστοιχεί στο αρχείο διαμόρφωσης τρούφας. Στην προεπιλεγμένη περίπτωση, το 8545 θα πρέπει να λειτουργεί, αλλιώς αλλάξτε το αρχείο ρυθμίσεων για να ταιριάζει με το Ganache.

    Τώρα εισαγάγετε τις ακόλουθες εντολές στην κονσόλα Truffle για να δημιουργήσετε το πορτοφόλι σας:

    const HDWalletProvider = απαιτείται (‘@ truffle / hdwallet-provider’);

    Αυτό θα πρέπει να οδηγήσει σε μια απάντηση του “undefined”

    Για το μνημονικό 12 λέξεων, μπορείτε να χρησιμοποιήσετε μια γεννήτρια μνημονικών όπως αυτό αν θέλετε!

    Βεβαιωθείτε ότι έχετε αποθηκεύσει τη φράση του μνημείου (σπόρος)! Θα το χρειαζόμαστε αργότερα &# 128515;

    Στη συνέχεια, προσθέστε την ακόλουθη εντολή στο τερματικό σας (ενώ βρίσκεται ακόμη σε ανάπτυξη τρούφας):

    const mnemonic = ’12 λέξεις εδώ ‘; const wallet = νέο HDWalletProvider (mnemonic, "http: // localhost: 8545");

    Τώρα, στην κονσόλα τρούφας εισάγετε την εντολή 

    πορτοφόλι

    Εάν κάνετε κύλιση προς τα πάνω, θα πρέπει να δείτε μια λίστα λογαριασμών, όπως αυτή!

    πρόσθετο

    Παρά το ότι δημιουργήθηκε αυτός ο λογαριασμός ενώ ήμασταν συνδεδεμένοι στο Ganache, μπορούμε να χρησιμοποιήσουμε τους ίδιους λογαριασμούς Ethereum σε οποιοδήποτε δίκτυο Ethereum (παρακαλούμε σημειώστε, ωστόσο, αν και ο ίδιος λογαριασμός μπορεί να χρησιμοποιηθεί σε οποιοδήποτε δίκτυο Ethereum, στοιχεία / δραστηριότητες που σχετίζονται με αυτό ο λογαριασμός είναι συγκεκριμένος για το δίκτυο – για παράδειγμα, εάν κάνω μια συναλλαγή στο Ethereum Mainnet, αυτή η συναλλαγή θα πραγματοποιηθεί μόνο στο Ethereum Mainnet και σε κανένα άλλο δίκτυο). Τώρα θα σταματήσουμε να αλληλεπιδρούμε με το Ganache (τοπικό δίκτυο dev) και θα αρχίσουμε να χρησιμοποιούμε αυτόν τον λογαριασμό για να αλληλεπιδράσουμε με ορισμένα δημόσια δίκτυα!!

    Συνήθως, το πρώτο πράγμα που πρέπει να κάνετε όταν αλληλεπιδράτε με ένα δημόσιο δίκτυο είναι να αποκτήσετε μέρος του αιθέρα αυτού του δικτύου. Στην περίπτωσή μας, θα συνδεθούμε με το δημόσιο δίκτυο δοκιμών Ropsten, οπότε θα πρέπει να αποκτήσουμε κάποιο Ropsten αιθέρα (ETH)! Μην ανησυχείτε – το δοκιμαστικό δίκτυο ETH είναι δωρεάν και άφθονο και εξαιρετικά εύκολο στη λήψη &# 128077;

    Ώρα να αποκτήσετε το τεστ ETH

    Για να αποκτήσετε κάποιο Ropsten ETH, κατευθυνθείτε προς το Βρύση Ropsten. Επικολλήστε τη διεύθυνση του λογαριασμού σας και βιόλα! Έχετε λάβει κάποιο Ropsten ETH και μπορείτε να ξεκινήσετε την αποστολή συναλλαγών (δηλαδή να κάνετε αλλαγές κατάστασης) στο δίκτυο Ropsten!

    Για παραπομπή, το δοκιμαστικό δίχτυ Ropsten είναι ένα δημόσιο δίκτυο δοκιμών Ethereum, όπου μπορείτε να δοκιμάσετε τον κωδικό σας σε ένα περιβάλλον που αντικατοπτρίζει στενά αυτόν του κεντρικού δικτύου Ethereum. Η κύρια διαφορά μεταξύ του δοκιμαστικού δικτύου Ropsten (και των άλλων δημόσιων δοκιμαστικών δικτύων Ethereum) είναι ότι στο testnet-land, το ETH είναι άφθονο και δεν έχει πραγματική αξία! Όταν αρχίζετε να αλληλεπιδράτε με το Ethereum mainnet, ο Ether που χρησιμοποιείτε για να πληρώσετε για τις συναλλαγές σας (κόστος φυσικού αερίου) θα κοστίσει ΠΡΑΓΜΑΤΙΚΑ δολάρια – και γι ‘αυτό πρέπει να βεβαιωθούμε ότι κάνουμε τα πράγματα εκ των προτέρων, ώστε να μην χάνουμε σκληρά -μετρητά μετρητά / το πολύτιμο mainnet ETH μας!

    Το δίχτυ δοκιμής Ropsten, μαζί με τα περισσότερα από τα άλλα δημόσια δίκτυα δοκιμών, έχει πολλούς εξερευνητές μπλοκ για να δείτε τη δραστηριότητα που συμβαίνει στην αλυσίδα (https://ropsten.etherscan.io/). Για να δείτε τον χρηματοδοτούμενο λογαριασμό σας, απλώς επικολλήστε τη διεύθυνση του λογαριασμού σας στον εξερευνητή – και μπορείτε να δείτε όλο το ιστορικό που σχετίζεται με αυτόν:

    Screen Shot 2020 09 01 στις 4 34 21 π.μ.

    Καλώς! Τώρα που έχουμε τον πάροχο πορτοφολιών μας και έναν λογαριασμό χρηματοδοτούμενο από το Ropsten ETH, μπορούμε να επιστρέψουμε στο έργο μας και να το δείξουμε στους κόμβους Infura που είναι συνδεδεμένοι στο δοκιμαστικό δίκτυο Ropsten.

    Το πρώτο πράγμα που θα θέλαμε να κάνουμε είναι να δημιουργήσουμε ένα αρχείο a.env για να στεγάσουμε τα πολύτιμα Μυστικά μας! Αυτά τα μυστικά περιλαμβάνουν το κλειδί API Infura (που δημιουργήθηκε όταν δημιουργήσαμε τον λογαριασμό μας Infura) και τη μνημονική μας φράση.

    Στο ριζικό επίπεδο του έργου σας, απλώς δημιουργήστε ένα νέο αρχείο “.env”. Επίσης, θα πρέπει να εγκαταστήσετε το πακέτο dotenv NPM εισάγοντας την ακόλουθη εντολή στο τερματικό

    εγκατάσταση 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 ή να κάνετε αυτό το έργο δημόσιο με οποιονδήποτε τρόπο, βεβαιωθείτε ότι έχετε το αρχείο.env σας στο.gitignore έτσι ώστε τα μυστικά σας να μην αποκαλυφθούν! 

    Τώρα, θα πρέπει να κατευθυνθούμε στο αρχείο truffle-config.js. Εδώ, θα χρειαστεί να προσθέσουμε μερικά πράγματα για να υποδείξουμε τον πάροχό μας (ο οποίος χρησιμοποιείται για την αλληλεπίδραση με το Infura (το Truffle HDWallet Provider που είχαμε εγκαταστήσει προηγουμένως) και δείχνοντας την εφαρμογή μας στους κόμβους Ropsten Infura.

    Στο επάνω μέρος του αρχείου, προσθέστε:

    απαιτώ("Ντότενβ") .config (); const HDWalletProvider = απαιτείται ("@ truffle / hdwallet-πάροχος");

    Στη συνέχεια, στην περιοχή “δίκτυα”, θα θέλετε να προσθέσετε το ακόλουθο δίκτυο:

    ropsten: {πάροχος: () => νέο HDWalletProvider (process.env.MNEMONIC, “https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}”), network_id: 3, // Ropsten’s id gas: 5500000, // Το Ropsten έχει χαμηλότερο όριο μπλοκ από τις επιβεβαιώσεις mainnet: 2, // # conf για να περιμένετε μεταξύ των αναπτύξεων. (προεπιλογή: 0) timeoutBlocks: 200, // # μπλοκ πριν από ένα χρονικό όριο ανάπτυξης (ελάχιστο / προεπιλεγμένο: 50) skipDryRun: true // Παράλειψη ξηρής εκτέλεσης πριν από τις μετεγκαταστάσεις; (προεπιλογή: false για δημόσια δίχτυα)}

     

    Τώρα το αρχείο truffle-config.js θα πρέπει να μοιάζει με αυτό!

    Υποσημείωση:

    Εάν χρησιμοποιείτε τα τελικά σημεία Infura, απαιτείται η παράμετρος «από», καθώς δεν διαθέτουν πορτοφόλι. Εάν χρησιμοποιείτε τα τελικά σημεία Ganache ή Geth RPC, αυτή είναι μια προαιρετική παράμετρος.

    Στιγμιότυπο 2020 09 01 στις 4 50 54 π.μ.

    ΤΩΡΑ ΕΙΜΑΣΤΕ ΓΙΑ ΤΗ ΜΑΓΙΚΗ! Ήρθε η ώρα να αναπτύξετε ένα έξυπνο συμβόλαιο στο ROPSTEN!

    Δημιουργία έξυπνης σύμβασης

    Ρύθμιση στερεότητας

    Πρώτον, θα θέλαμε να δημιουργήσουμε ένα έξυπνο συμβόλαιο για ανάπτυξη! Μπορείτε να πάρετε το έξυπνο συμβόλαιο που δημιουργήσατε στην προηγούμενη ενότητα αυτού του οδηγού, να δημιουργήσετε το δικό σας έξυπνο συμβόλαιο ή απλά να χρησιμοποιήσετε το ακόλουθο (εξαιρετικά απλό) δείγμα συμβολαίου:

    σταθερότητα πραγμάτων >= 0,5,8; συμβόλαιο SimpleStorage {uint256 storageData; σύνολο συνάρτησης (uint256 x) δημόσιο {storageData = x; } συνάρτηση get () επιστροφές δημόσιας προβολής (uint256) {return storageData; }}

    Αυτό το συμβόλαιο πρέπει να δημιουργηθεί ως αρχείο “.sol” (Solidity) στο φάκελο “συμβάσεις” του έργου σας (σε αυτό το σενάριο, δημιουργήσαμε το αρχείο SimpleStorage.sol, το οποίο είναι το συμβόλαιο SimpleStorage:

    σκαλωσιά

    Ρύθμιση μετεγκατάστασης

    Στη συνέχεια, θα πρέπει να ρυθμίσουμε το αρχείο μετεγκατάστασης!

    Οι μετακινήσεις είναι αρχεία JavaScript που σας βοηθούν να αναπτύξετε συμβόλαια στο δίκτυο Ethereum. Αυτά τα αρχεία είναι υπεύθυνα για τη σταδιοποίηση των εργασιών ανάπτυξης και γράφονται υπό την προϋπόθεση ότι οι ανάγκες ανάπτυξης θα αλλάξουν με την πάροδο του χρόνου. Καθώς το έργο σας εξελίσσεται, θα δημιουργήσετε νέα σενάρια μετεγκατάστασης για να προωθήσετε αυτήν την εξέλιξη στο blockchain. Ένα ιστορικό μετεγκαταστάσεων που εκτελούνται στο παρελθόν καταγράφεται μέσω αλυσίδας μέσω ειδικού συμβολαίου μετεγκατάστασης Μπορείτε να βρείτε περισσότερες πληροφορίες σχετικά με αυτά εδώ.

    Το αρχείο μετεγκατάστασης για την ανάπτυξη του συμβολαίου θα έχει την εξής μορφή:

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

    Αποθηκεύστε αυτό το αρχείο στο φάκελο “migrations” με το όνομα “2_deploy_contracts.js”.

    Ανάπτυξη της πρώτης δημόσιας σύμβασής σας

    Ώρα για μετεγκατάσταση

    Τώρα είστε πραγματικά έτοιμοι για το ΜΑΓΙΚΟ ΠΟΥ ΠΡΕΠΕΙ ΝΑ ΣΥΜΒΑΙΝΕΙ! Επιστρέψτε στην κονσόλα και πληκτρολογήστε

    truffle migrate – το δίκτυο ropsten

    Κεραία!&# 128163; Ο κωδικός σας αναπτύχθηκε στο δημόσιο Ropsten Ethereum Test Net!!! 

    Αυτό που μόλις συνέβη ήταν:

    1. Το έξυπνο συμβόλαιο Solidity σας (στο φάκελο «συμβάσεις») συντάχθηκε σε bytecode – ο αναγνώσιμος από τον κώδικα κώδικας για τη χρήση της εικονικής μηχανής Ethereum.

    2. Αυτός ο κωδικός bytec, + μερικά άλλα δεδομένα, συνδυάστηκε σε μια συναλλαγή.

    3. Αυτή η συναλλαγή υπογράφηκε από τον λογαριασμό σας.

    4. Αυτή η συναλλαγή εστάλη στον κόμβο Infura που συνδέεται με το Ropsten.

    5. Η συναλλαγή διαδόθηκε σε όλο το δίκτυο, παραλήφθηκε από έναν ανθρακωρύχο Ropsten και συμπεριλήφθηκε σε ένα μπλοκ Ropsten.

    6. Το έξυπνο συμβόλαιό σας είναι τώρα LIVE στο blockchain Ropsten!

    Μπορείτε να δείτε το συμβόλαιό σας χρησιμοποιώντας το Ethercan: https://ropsten.etherscan.io/ – απλώς επικολλήστε τη διεύθυνση της σύμβασης (θα πρέπει να βρίσκεται στο τερματικό σας) για να τη δείτε!

    Στιγμιότυπο 2020 09 01 στις 5 19 12 π.μ.

    Φοβερο! Μόλις αναπτύξαμε το πρώτο μας έξυπνο συμβόλαιο σε ένα δίκτυο PUBLIC Ethereum! &# 129327;

    Η διαδικασία είναι ακριβώς η ίδια για την ανάπτυξη στο Ethereum mainnet, εκτός από το ότι θα αλλάξετε το δίκτυο στο αρχείο truffle-config.js για το Ethereum mainnet (και, φυσικά, εκτελέστε την εντολή μετεγκατάστασης mainnet Truffle αντί για το Ropsten) ! Δεν θα σας καθοδηγήσουμε σε αυτήν τη διαδικασία εδώ, επειδή η ανάπτυξη στο Ethereum mainnet θα σας κοστίσει πραγματικά $ – αλλά αν θέλετε βοήθεια με αυτό, μεταβείτε στο ConsenSys Discord και θα χαρούμε πολύ να σας βοηθήσουμε!

    Δημιουργία περιβάλλοντος εργασίας Web3 

    Τώρα που έχουμε αναπτύξει το συμβόλαιό μας στο Ropsten, ας δημιουργήσουμε ένα απλό περιβάλλον εργασίας χρήστη για να αλληλεπιδράσουμε μαζί του!

    Σημείωση: Το dApp “front-end” είναι απλώς τα καθημερινά σας, τακτικά παλιά front-end – ως τέτοια, μπορούμε να χρησιμοποιήσουμε όλα τα παλιά μας εργαλεία με τα οποία γνωρίζουμε (create-react-app, etc.) για να ανοίξουμε το front-end και, στη συνέχεια, προσθέστε μερικά πράγματα για να επιτρέψετε στο μπροστινό μέρος να διαβάσει και να γράψει στο Ethereum! Αυτό σημαίνει ότι όλες οι παλιές δεξιότητες διαδικτυακών προγραμματιστών μπορούν να μεταφερθούν απευθείας στο Ethereum-land / Web3!!

    Γυρίστε το έργο React 

    Εντάξει, ας ξεκινήσουμε.

    Πρώτα βεβαιωθείτε ότι έχετε έναν κατάλογο που περιέχει όλες τις πληροφορίες που μόλις κάναμε για το συμβόλαιο αποθήκευσης. Ονόμασα το φάκελο μου ως “storage-back” και περιέχει την εργασία που μόλις ολοκληρώσαμε για να ξεκινήσουμε και να αναπτύξουμε τη σύμβαση. 

    Στιγμιότυπο 2020 09 01 στις 5 26 33 π.μ.

    Τώρα πρόκειται να ξεκινήσουμε γυρίζοντας ένα έργο αντιδράσεων, ας καλέσουμε το δικό μας σε αυτό το παράδειγμα “εργαστήριο αποθήκευσης”

    Στο τερματικό μας ας ακολουθήσουμε τα παρακάτω για να ξεκινήσουμε το έργο μας 

    npx create-react-app storage-lab

    Τώρα που έχουμε το νέο μας boilerplate έργου, ας προχωρήσουμε στον κατάλογο έργων

    εργαστήριο αποθήκευσης cd

    Τώρα που βρισκόμαστε στο έργο μας, θα προσθέσουμε τώρα το πακέτο Web3, το οποίο θα επιτρέψει στο έργο μας να αλληλεπιδράσει με το Ethereum! Περισσότερα στο web3 εδώ

    npm εγκατάσταση web3

    Το Web3 είναι ένα από τα δύο μεγάλα πακέτα που μπορούμε να χρησιμοποιήσουμε, το άλλο είναι ethers.js. Για αυτό το παράδειγμα θα χρησιμοποιούμε το web3, αλλά αν θέλετε να διαβάσετε περισσότερα για το ethers.js ρίξτε μια ματιά εδώ 

    Για μια λεπτομερή εξήγηση των δύο, ρίξτε μια ματιά σε αυτό το γράψιμο web3 εναντίον αιθέρων

    Μεγάλος! Τώρα είμαστε σχεδόν έτοιμοι να αλληλεπιδράσουμε με το συμβόλαιο του έργου μας!

    Αρχικά, ας πάρουμε τον κατάλογό μας από νωρίτερα (για μένα είναι το “storage-back”) που περιέχει μόνο τη δουλειά που έχουμε ήδη κάνει με τις έξυπνες συμβάσεις μας και τώρα ας το προσθέσουμε στο νέο μας έργο αντιδράσεων. Αυτό θα ζήσει στο ίδιο επίπεδο με το src μας, και τώρα πρέπει να έχουμε όλα όσα χρειαζόμαστε μαζί μέσα στο REPO μας.

    Στιγμιότυπο 2020 09 01 στις 5 31 38 π.μ.

    Στη συνέχεια, θα χρειαστεί να ρυθμίσουμε το αρχείο μας που περιέχει τις πληροφορίες ABI.

    «ΑΒΙ;»

    Χαίρομαι που ρωτήσατε! 

    Η δυαδική διεπαφή εφαρμογής συμβάσεων (ABI) είναι ο τυπικός τρόπος αλληλεπίδρασης με συμβάσεις εντός του οικοσυστήματος Ethereum, τόσο από το blockchain όσο και για την αλληλεπίδραση μεταξύ συμβάσεων. Όταν συντάξαμε το συμβόλαιο SimpleStorage σε ένα προηγούμενο βήμα, δημιούργησε ένα αρχείο JSON για εμάς. Ελέγξτε μόνοι σας, έχουμε ένα αρχείο SimpleStorage.json στο εσωτερικό των συμβολαίων μας

    Στιγμιότυπο 2020 09 01 στις 6 04 20 π.μ.

    Μια αρχική ματιά σε αυτό το αρχείο θα αποκαλύψει πολλές πληροφορίες, αυτή τη στιγμή πρέπει μόνο να επικεντρωθούμε στο ABI για να συγχρονίσουμε το συμβόλαιό μας με το front-end που αναπτύσσουμε. Αυτό το JSON περιέχει τις πληροφορίες που χρειαζόμαστε για να επικοινωνήσουμε το συμβόλαιό μας με το front end μας.

    Το ABI μας είναι ένας πίνακας που περιέχει αντικείμενα. Κοιτάζοντας το αρχείο πιο κοντά μπορείτε να δείτε ότι κάθε ένα από αυτά τα αντικείμενα είναι στην πραγματικότητα κάθε λειτουργία που περιέχει το συμβόλαιο SimpleStorage.

    Στιγμιότυπο 2020 09 01 στις 5 33 23 π.μ.

    Μπορείτε να δείτε γρήγορα

    “Name”: “set”

    “Name”: “get”

    και οι δύο με ένα “type:” function “και οι δύο λειτουργίες που δηλώσαμε κατά τη σύνταξη του έξυπνου συμβολαίου μας!

    Παρόλο που η Truffle αποκρύπτει τα επόμενα βήματα, θα ακολουθήσουμε έναν πολύ πιο «χειροκίνητο» τρόπο να κάνουμε πράγματα, ώστε να είστε εκτεθειμένοι σε όλα τα βασικά &# 128578;

    Κατ ‘αρχάς, προχωρήστε και αντιγράψτε τις πληροφορίες abi σας – θα τις χρειαζόμαστε σε λίγο. 

    Ας δημιουργήσουμε ένα φάκελο στο εσωτερικό του src με το όνομα “abi”.

    Στο εσωτερικό του πρόσφατα φτιαγμένου φακέλου abi ας δημιουργήσουμε τώρα ένα αρχείο με το όνομα abi.js

    Σημείωση: Δεν χρειάζεται τεχνικά να έχουμε αυτόν τον διαχωρισμό και θα μπορούσαμε απλώς να προσθέσουμε τα abi.js στο src μας, αλλά η διατήρηση των αρχείων abi.js μας βοηθάει στην οργάνωση.

    Τώρα θα αντιγράψουμε τον πίνακα abi που πιάσαμε νωρίτερα από το αρχείο SimpleStorage.JSON και θα το προσθέσουμε στο νέο αρχείο abi.js. Θα αλλάξουμε λίγο το αρχείο για να επιτρέψουμε στο έργο μας να εισάγει τις πληροφορίες στο App.js. Μην ξεχνάτε ότι αυτό είναι αρχείο a.js, πρέπει να προσθέσουμε μια εξαγωγή, ώστε να έχουμε τη δυνατότητα να το τραβήξουμε στο app.js αργότερα. Ας δώσουμε το όνομα του ίδιου στο σύμβαση, εκτός από τη βαλίτσα (δείτε τον παρακάτω κώδικα):

    Αυτός θα είναι ο κωδικός που αποθηκεύουμε στο αρχείο abi.js

    εξαγωγή const simpleStorage = [{stable: false, inputs: [{name: "Χ", τύπος: "uint256", }, ], όνομα: "σειρά", έξοδοι: [], πληρωτέες: false, stateMutability: "μη πληρωτέος", τύπος: "λειτουργία", }, {stable: true, inputs: [], όνομα: "παίρνω", έξοδοι: [{όνομα: "", τύπος: "uint256", },], πληρωτέο: false, stateMutability: "θέα", τύπος: "λειτουργία", },];

    Ήρθε η ώρα να κατευθυνθείτε στο App.js και να εισαγάγετε τόσο το web3 όσο και το πρόσφατα φτιαγμένο αρχείο abi.js.

    Θα χρησιμοποιήσουμε επίσης άγκιστρα σε αυτό το παράδειγμα (για αυτό και εισάγουμε επίσης {useState} μπορείτε να διαβάσετε περισσότερα για το useState εδώ.

    Το πάνω μέρος του αρχείου App.js θα πρέπει τώρα να μοιάζει με αυτό:

    εισαγωγή React, {useState} από "αντιδρώ"; εισαγωγή {simpleStorage} από "./ abi / abi"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./App.css";

    Τώρα πρέπει να βεβαιωθούμε ότι έχουμε τη δυνατότητα για τυχόν αυθαίρετους χρήστες να έχουν τη δυνατότητα σύνδεσης και χρήσης του dApp μας, αρκεί να διαθέτουν πάροχο πορτοφολιών!

    Το κύριο πορτοφόλι που χρησιμοποιείται στον χώρο Ethereum για αλληλεπίδραση dApp είναι το MetaMask, που παρουσιάστηκε στο Βήμα 1.

    Εάν δεν έχετε MetaMask, επισκεφτείτε το metamask.io

    Με το MetaMask εγκατεστημένο, μπορούμε να έχουμε πρόσβαση στο πορτοφόλι μας μέσα στο dapp μας με:

    const web3 = νέο Web3 (Web3.givenProvider);

    Το “Web3.givenProvider” θα ρυθμιστεί σε πρόγραμμα περιήγησης που υποστηρίζεται από το Ethereum.

    (μπορείτε να διαβάσετε περισσότερα για το γιατί αυτό είναι απαραίτητο εδώ)

    Οπότε τώρα ο κώδικάς μας πρέπει να έχει την εξής μορφή:

    εισαγωγή React, {useState} από "αντιδρώ"; εισαγωγή {simpleStorage} από "./ abi / abi"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./App.css"; const web3 = νέο Web3 (Web3.givenProvider);

    Εντάξει! Μέχρι τώρα έχουμε:

    • Ξεκίνησε ένα έργο React
    • Εγκατεστημένο Web3
    • Προστέθηκε ο φάκελός μας που περιέχει το build + contract + μετανάστευση στο έργο React
    • Δημιουργήσαμε ένα αρχείο abi.js με τα δεδομένα abi που τραβήξαμε από το SimpleStorage.json
    • Εισαγάγαμε τα δεδομένα που χρειαζόμαστε για να αλληλεπιδράσουμε με το συμβόλαιό μας
    • Δημιούργησε μια μεταβλητή που επιτρέπει στο dApp μας να επικοινωνεί με το πορτοφόλι του χρήστη

    Και πάλι, παρόλο που το Truffle κάνει τα επόμενα βήματα περιττά (θα σας καθοδηγήσουμε σε μια πολύ πιο απλή έκδοση αργότερα), θα προσθέσουμε λίγο περισσότερη χειροκίνητη πολυπλοκότητα στην εφαρμογή μας για εκπαιδευτικούς σκοπούς.

    Αυτό που θα κάνουμε τώρα είναι να δημιουργήσουμε δύο νέες μεταβλητές: μία για να αποθηκεύσουμε τη διεύθυνση του συμβολαίου που αναπτύξαμε στο Ropsten και το άλλο για να ταιριάξει αυτό το συμβόλαιο με το ABI μας, έτσι ώστε η εφαρμογή μας να γνωρίζει πώς να μιλήσει σε αυτήν! 

    Για να εντοπίσετε τη διεύθυνση της σύμβασης, μεταβείτε στο αρχείο JSON που βρισκόμασταν προηγουμένως (το οποίο περιέχει το ABI (SimpleStorage.json)) και μετακινηθείτε προς τα κάτω. Η διεύθυνση βρίσκεται στο πεδίο «διεύθυνση» εδώ:

    "μεταγλωττιστής": { "όνομα": "solc", "εκδοχή": "0.5.8 + commit.23d335f2.Emscripten.clang" }, "δίκτυα": { "3": { "εκδηλώσεις": {}, "συνδέσεις": {}, "διεύθυνση": "0x24164F46A62a73de326E55fe46D1239d136851d8", "συναλλαγή": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "ενημερώθηκε": "2020-06-30T20: 45: 38.686Z", "devdoc": { "μεθόδους": {}}, "userdoc": { "μεθόδους": {}}}

    Εναλλακτικά, θα μπορούσατε να κατευθυνθείτε προς https://ropsten.etherscan.io/ και αναζητήστε τη διεύθυνση του λογαριασμού που ανέπτυξε τη σύμβαση! Στο Etherscan, κάνοντας κλικ στο “Δημιουργία συμβολαίου” θα εμφανιστεί η ίδια η Διεύθυνση Σύμβασης.

    Στιγμιότυπο 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 μας πρέπει τώρα να μοιάζει με αυτό

    εισαγωγή React, {useState} από "αντιδρώ"; εισαγωγή {simpleStorage} από "./ abi / abi"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./App.css"; const web3 = νέο Web3 (Web3.givenProvider); const contractAddress = "τη διεύθυνση της σύμβασής σας εδώ"; const storageContract = νέο web3.eth.Contract (simpleStorage, contractAddress);

    Τώρα πρέπει να βάλουμε τους γάντζους μας για να κρατήσουμε μεταβλητές που θα αλληλεπιδράσουν με το συμβόλαιο και το front end μας Θα το κάνουμε δηλώνοντας τα ακόλουθα στη λειτουργία της εφαρμογής μας:

    εισαγωγή React, {useState} από "αντιδρώ"; εισαγωγή {simpleStorage} από "./ abi / abi"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./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 θα καλέσουμε σύντομα στην επιστροφή μας (περισσότερα για αυτό αργότερα)

    Ώρα για τη λογική μας

    Στη συνέχεια θα προσθέσουμε τη λογική numberSet και NumberGet (προσθέτουμε το numberSet στη λειτουργία μας App)

    const numberSet = async (t) => {t.preventDefault (); const λογαριασμοί = αναμονή window.ethereum.enable (); const account = λογαριασμοί [0]; const gas = αναμονή αποθήκευσηςContract.methods.set (number) .estimateGas (); const post = αναμονή αποθήκευσηςContract.methods.set (αριθμός). αποστολή ({από: λογαριασμός, φυσικό αέριο,}); }; const numberGet = async (t) => {t.preventDefault (); const post = αναμονή αποθήκευσηςContract.methods.get (). κλήση (); setGet (ανάρτηση); };

    Ορίζουμε ένα preventDefault (βρέθηκαν λεπτομέρειες για preventDefault εδώ)

    Χρησιμοποιούμε επίσης μια κλήση async on get για τη σύμβαση (βρέθηκαν λεπτομέρειες σχετικά με το async εδώ)

    Το hook setGet () αποθηκεύει μια προεπιλεγμένη τιμή που αρχικά βλέπουμε (“0”)

    const λογαριασμοί = αναμονή window.ethereum.enable ();

    διασφαλίζει ότι καλούμε τη συνδεδεμένη διεύθυνση μέσω MetaMask.

    const account = λογαριασμοί [0];

    Τραβά στον λογαριασμό σύνδεσης

    Ίσως αναρωτιέστε τι συμβαίνει 

    const gas = αναμονή αποθήκευσηςContract.methods.set (number) .estimateGas ();

    Η εφαρμογή μας χρειάζεται άδεια για πρόσβαση σε χρηματικά ποσά χρηστών για την πληρωμή τελών φυσικού αερίου, οποιεσδήποτε λειτουργίες ζητούν αιθέρα, ανεξάρτητα από το αν βρίσκεται σε testnet ή mainnet. Αυτό είναι όπου η σύνδεσή μας με το MetaMask είναι βολική για να υπογράψετε αυτήν τη χρήση για να ορίσετε το uint256 και να πληρώσουμε για αυτό (με δοκιμή ETH).

    Έτσι, για κάθε λειτουργία που χρειάζεται αέριο, πρέπει να υπολογίσετε το πιθανό αέριο που χρησιμοποιείται.

    Η λειτουργία «Set» του συμβολαίου μας απαιτεί φυσικό αέριο

    Το “Get” δεν το κάνει.

    (Αυτό συμβαίνει επειδή το “Get” βλέπει αυτό που έχει ήδη δηλωθεί με το “Set”)

    Το const post πρόκειται να πάρει το πέρασμα σε uint256, επιβεβαιώστε τη συναλλαγή (μετά την πληρωμή τελών αερίου) από το πορτοφόλι MetaMask στο δίκτυο Ropsten.

    Στη συνέχεια περνάμε τις παραμέτρους των λειτουργιών μέσω των μεθόδων.set () και με τη δηλωμένη διεύθυνσή μας (διεύθυνση χρήστη) χειριζόμαστε τη συνάρτηση Set.

    Δημιουργούμε τη συναλλαγή έξυπνης σύμβασης μεταβιβάζοντας τις παραμέτρους της λειτουργίας μας στις μεθόδους έξυπνης σύμβασης.set () και την εκτιμώμενη διεύθυνση λογαριασμού αερίου και λογαριασμού χρήστη στο. Αποστολή ().

    const post = αναμονή αποθήκευσηςContract.methods.set (αριθμός). αποστολή ({από: λογαριασμός, φυσικό αέριο,});

    Αυτή πρέπει να είναι όλη η λογική που πρέπει να καλύψουμε το σύνολο αριθμών μας.

    Τώρα χρειαζόμαστε τον αριθμό μας

    const numberGet = async (t) => {t.preventDefault (); const post = αναμονή αποθήκευσηςContract.methods.get (). κλήση (); setGet (ανάρτηση); };

    Η ανάρτηση const ανακτά τον αριθμό που έχουμε και τα setGet περάσει στη νέα τιμή που δηλώσαμε

    Έτσι, το “0” μας θα onClick αναφέρεται στον αριθμό μαςGet και δώστε το unint256 μας!

     Τώρα λοιπόν το app.js θα πρέπει να μοιάζει με αυτό

    εισαγωγή React, {useState} από "αντιδρώ"; εισαγωγή {simpleStorage} από "./ abi / abi"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./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 account = λογαριασμοί [0]; const gas = αναμονή αποθήκευσηςContract.methods.set (number) .estimateGas (); const post = αναμονή αποθήκευσηςContract.methods.set (αριθμός). αποστολή ({από: λογαριασμός, φυσικό αέριο,}); }; const numberGet = async (t) => {t.preventDefault (); const post = αναμονή αποθήκευσηςContract.methods.get (). κλήση (); setGet (ανάρτηση); };

    Ας δημιουργήσουμε μια πολύ βασική απόδοση για απόδοση, ώστε να μπορούμε να δοκιμάσουμε αν μπορούμε 

    • ορίστε μια τιμή unint256,
    • Τραβήξτε το πορτοφόλι metamask και επιβεβαιώστε τη συναλλαγή
    • Πληρώστε το κόστος φυσικού αερίου
    • στη συνέχεια πάρτε την τιμή (unint256) που αποθηκεύσαμε μόλις ολοκληρωθεί η συναλλαγή.

    Η επιστροφή μας μοιάζει με αυτήν: 

    επιστροφή (Ορίστε το uint256: setUint (t.target.value)} /> Επιβεβαιώνω

    Λάβετε το uint256 {getNumber}); } εξαγωγή προεπιλεγμένης εφαρμογής.

    Κάποιο γρήγορο CSS

    Ας κατευθυνθούμε τώρα στο αρχείο App.css, διαγράψτε τον κωδικό πλάκας λέβητα και προσθέστε τον αντ ‘αυτού

    .κύρια {text-align: center; οθόνη: flex; justify-content: κέντρο; χρώμα φόντου: # f2f1f5; ύψος: 100vh; }. κάρτα {ελάχιστο ύψος: 50vh; πλάτος: 50vw; οθόνη: flex; flex-direction: στήλη; Στοιχεία ευθυγράμμισης: κέντρο; justify-content: κέντρο; }. μορφή {ύψος: 20vh; πλάτος: 20vw; οθόνη: flex; justify-content: space-ομοιόμορφο? flex-direction: στήλη; }. κουμπί {πλάτος: 20vw; ύψος: 5vh; }

    Τώρα είμαστε έτοιμοι να δοκιμάσουμε!

    Στην εκτέλεση του τερματικού σας

    νήματα

    Στο localhost: 3000 θα πρέπει να μοιάζουμε με αυτό

     

    Στιγμιότυπο 2020 09 01 στις 6 12 49 π.μ.

    Τώρα πρέπει να μπορούμε να εισαγάγουμε μια τιμή unint256 στο πεδίο εισαγωγής μας!

    Αφού επιβεβαιώσουμε τον αριθμό μας στο dApp μας, στη συνέχεια υπογράφουμε μέσω MetaMask (Βεβαιωθείτε ότι το πορτοφόλι σας έχει ρυθμιστεί στο δίκτυο Ropsten)

    1

    Τα καταφέραμε! &# 129303;

    Έχουμε πλέον το έξυπνο συμβόλαιό μας συνδεδεμένο σε μια διεπαφή και έχουμε τη δυνατότητα να χειριστούμε τη λειτουργία Set (υπό την προϋπόθεση ότι έχουμε τη δοκιμή ETH για να πληρώσουμε το τέλος φυσικού αερίου για τη συναλλαγή). Στη συνέχεια μπορούμε να καλέσουμε τη συνάρτηση Get και ανακτήσαμε την αποθηκευμένη τιμή uint265.

    Πολύ δροσερό, ε!?!

    Επιπλέον στυλ 

    Τώρα ήρθε η ώρα να δείξουμε πόσο εύκολο μπορεί να είναι η εφαρμογή ακόμη πιο δημοφιλούς τεχνολογίας Web2 στο έργο μας.

    Πρόκειται να χρησιμοποιήσουμε το MUI για να προσθέσουμε βασικό στυλ, εάν έχετε ήδη αναπτύξει το React ίσως να είστε εξοικειωμένοι με το υλικό-ui. (Βρέθηκαν λεπτομέρειες εδώ) Το Material-UI ή το MUI για συντομία είναι ένα πολύ δημοφιλές πλαίσιο React που σας επιτρέπει να δημιουργήσετε γρήγορα ένα έργο με πολύ στιλ μαγειρεμένο με την προϋπόθεση ότι ακολουθείτε τις συμβάσεις ονομασίας. Είναι επίσης πολύ εύκολο να χειριστείτε εάν θέλετε απλώς να χρησιμοποιήσετε ένα ίδρυμα και να προσαρμόσετε από εκεί.

    * Αυτό θα είναι ένα πολύ σύντομο παράδειγμα για το πώς να προσθέσετε MUI σε ένα έργο με μικρές προσθήκες για να δείξετε πόσο γρήγορα μπορείτε να ενσωματώσετε το έργο μας όπως ισχύει με τεχνολογία Web2. 

    Προσθήκη MUI

    Θα ξεκινήσουμε εκτελώντας την εντολή (ενώ εξακολουθεί να βρίσκεται στον κατάλογο έργων μας στο τερματικό (εάν η εφαρμογή εξακολουθεί να εκτελείται, θα πρέπει να την κλείσετε (ctrl + c) ή να ανοίξετε μια νέα καρτέλα)):

    Για εγκατάσταση με npm:

    npm εγκατάσταση @ 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 ((θέμα) => ({root: { "& > *": {margin: theme.spacing (1),},},}));

    Τώρα μέσα στη λειτουργία εφαρμογής μας θα προσθέσουμε επίσης μια μεταβλητή που ονομάζεται “τάξεις” τραβώντας τα καθορισμένα στυλ που μόλις δηλώσαμε παραπάνω.

    συνάρτηση App () {const class = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    Τώρα θα κάνουμε προσαρμογές στην επιστροφή μας για να αντικαταστήσουμε ορισμένα από τα πεδία μας με αυτά που μόλις εισαγάγαμε.

    return (setUint (t.target.value)} παραλλαγή ="περιγράφεται" /> Επιβεβαιώνω

    Λάβετε το uint256 {getNumber}); } εξαγωγή προεπιλεγμένης εφαρμογής.

    Ο κωδικός σας θα πρέπει τώρα να μοιάζει με αυτόν τον τρόπο

    εισαγωγή React, {useState} από "αντιδρώ"; εισαγωγή {simpleStorage} από "./ abi / abi"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./App.css"; εισαγωγή {makeStyles} από "@ material-ui / core / στιλ"; Εισαγωγή κουμπιού από "@ material-ui / core / Button"; εισαγωγή TextField από "@ material-ui / core / TextField"; const useStyles = makeStyles ((θέμα) => ({root: { "& > *": {margin: theme.spacing (1),},},})); const web3 = νέο Web3 (Web3.givenProvider); const contractAddress = "τη διεύθυνση της σύμβασής σας εδώ"; const storageContract = νέο web3.eth.Contract (simpleStorage, contractAddress); συνάρτηση App () {const class = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const λογαριασμοί = αναμονή window.ethereum.enable (); const account = λογαριασμοί [0]; const gas = αναμονή αποθήκευσηςContract.methods.set (number) .estimateGas (); const post = αναμονή αποθήκευσηςContract.methods.set (αριθμός). αποστολή ({από: λογαριασμός, φυσικό αέριο,}); }; const numberGet = async (t) => {t.preventDefault (); const post = αναμονή αποθήκευσηςContract.methods.get (). κλήση (); setGet (ανάρτηση); }; return (setUint (t.target.value)} παραλλαγή ="περιγράφεται" /> Επιβεβαιώνω

    Λάβετε το uint256 {getNumber}); } εξαγωγή προεπιλεγμένης εφαρμογής.

    Τώρα, αν ρίξουμε μια ματιά στο έργο αντιδράσεων, θα πρέπει να μοιάζει με αυτό!

    Στιγμιότυπο 2020 09 01 στις 6 48 55 π.μ.

    Μπράβο!

    Έχουμε ακόμη όλη τη λειτουργικότητα του παρελθόντος και τώρα έχουμε εγχύσει ένα εύχρηστο πλαίσιο για την περαιτέρω προσαρμογή του έργου μας, όπως θέλουμε. Ρίξτε μια ματιά στο MUI τεκμηρίωση να πειραματιστείτε με τις δικές σας προσθήκες / τροποποιήσεις!

    Γύρος μπόνους 

    Θα ήταν ωραίο να δείξουμε στους χρήστες τη διεύθυνση σύνδεσης μέσα στο dApp μας, έτσι δεν είναι?

    Λοιπόν, ας κάνουμε ένα πολύ γρήγορο και βασικό συστατικό για να κάνουμε ακριβώς αυτό!

    Θα ξεκινήσουμε κάνοντας ένα ξεχωριστό στοιχείο που μπορούμε να εισαγάγουμε ξανά στο αρχείο App.js. Είναι καλή ιδέα να διαχωρίσουμε τη λογική μας, όχι μόνο για να διατηρήσουμε την εφαρμογή μας εύκολη στην πλοήγηση, αλλά και να ακολουθήσουμε την πρακτική ενός στοιχείου ιδανικά να κάνει μόνο ένα πράγμα. Εάν καταλήξει να μεγαλώνει, θα πρέπει να αποσυντίθεται σε μικρότερα υποσυστήματα.

    Κατασκευή συστατικών 

    Θα φτιάξουμε έναν νέο φάκελο που ονομάζεται στοιχεία στο ίδιο επίπεδο με το src μας και μέσα σε αυτόν τον φάκελο θα φτιάξουμε ένα αρχείο Nav.js. Το ικρίωμα του έργου μας πρέπει τώρα να μοιάζει κάπως έτσι

    Στιγμιότυπο 2020 09 01 στις 6 47 07 π.μ.

    Θα δημιουργήσουμε επίσης ένα αρχείο Nav.css στον φάκελο των συστατικών μας για να εισαγάγουμε τυχόν στυλ που εφαρμόζουμε ειδικά στο στοιχείο Nav.

    Ας ανοίξουμε το Nav.js μας και ας εισαγάγουμε το React, το Web3 και το αρχείο μας kosong.css

    εισαγωγή React από "αντιδρώ"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./Nav.css"

    Τώρα θα κάνουμε μια τάξη που ονομάζεται Nav και θα προσθέσουμε μερικά πράγματα μέσα σε αυτήν για να εμφανίσουμε τη συνδεδεμένη διεύθυνσή μας. Θα ξεκινήσουμε ορίζοντας την πολιτεία μας για να διαβάσει τον λογαριασμό

    Η κλάση Nav επεκτείνει το React.Component {state = {account: "" };

    Ακόμα μέσα στην τάξη μας θα φορτώσουμε τον λογαριασμό για να διαβάσουμε προσθέτοντας τη λογική async loadAccount

    async loadAccount () {const web3 = νέο Web3 (Web3.givenProvider || "http: // localhost: 8080"); const network = αναμονή web3.eth.net.getNetworkType (); const λογαριασμοί = αναμονή web3.eth.getAccounts (); this.setState ({λογαριασμός: λογαριασμοί [0]}); }

    Στη συνέχεια θα δημιουργήσουμε ένα στοιχείοDidMount (το οποίο θα καλείται αμέσως μετά την ανάρτηση του στοιχείου) Στην περίπτωσή μας τραβώντας τον λογαριασμό που έχει φορτωθεί. Διαβάστε περισσότερα εδώ

    componentDidMount () {this.loadAccount (); }

    Υποσημείωση:

    Αυτό μπορεί να γίνει διαφορετικά, αντί για μια τάξη μπορούμε να δημιουργήσουμε μια συνάρτηση και να χρησιμοποιήσουμε αγκίστρια αντίθετα με το στοιχείοDidMount, αλλά για χάρη αυτού του παραδείγματος θα εμμείνουμε σε αυτήν τη μέθοδο.

    Στη συνέχεια, θα δημιουργήσουμε μια απόδοση πάνω από την επιστροφή μας, η απόδοση είναι μια μέθοδος που απαιτείται όταν γράφετε ένα στοιχείο React χρησιμοποιώντας μια μέθοδο κλάσης. Μέσα στην επιστροφή μας προσθέτουμε μια κλάση διεύθυνσης στο div μας (για να δώσουμε βασικό στυλ αργότερα) κατά μήκος μιας ετικέτας p για να δείξουμε τη συνδεδεμένη διεύθυνση που παίρνουμε χρησιμοποιώντας το {this.state.account}

    render () {return (Η συνδεδεμένη διεύθυνσή σας: {this.state.account}); }} εξαγωγή προεπιλεγμένου Nav

    Το αρχείο Nav.js θα πρέπει τώρα να μοιάζει με αυτό

    εισαγωγή React από "αντιδρώ"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή "./Nav.css" Η κλάση Nav επεκτείνει το React.Component {state = {account: "" }; async loadAccount () {const web3 = νέο Web3 (Web3.givenProvider || "http: // localhost: 8080"); const network = αναμονή web3.eth.net.getNetworkType (); const λογαριασμοί = αναμονή web3.eth.getAccounts (); this.setState ({λογαριασμός: λογαριασμοί [0]}); } componentDidMount () {this.loadAccount (); } απόδοση () {return (Η συνδεδεμένη διεύθυνσή σας: {this.state.account}); }} εξαγωγή προεπιλεγμένου Nav

     

    Ας κατευθυνθούμε στο αρχείο Nav.css και προσθέστε πολύ βασικό στυλ

    .διεύθυνση {display: flex; justify-content: κέντρο; }

    Τεχνικά θα μπορούσατε να το προσθέσετε στο αρχείο App.css, λάβετε υπόψη σας αν και αρκετά γρήγορα που θα μπορούσε να πάρει ακατάστατο. Τα εξαρτήματα πρέπει να μπορούν να επαναχρησιμοποιηθούν και να αποφευχθεί η τριβή όσο το δυνατόν περισσότερο, χωρίζοντας την εργασία σας, μπορεί να σας εξοικονομήσει πονοκέφαλο στο δρόμο.

    Τώρα ας επιστρέψουμε στο App.js μας και εισαγάγουμε το νέο μας στοιχείο και φροντίστε να το προσθέσουμε στην επιστροφή μας για να το εμφανίσουμε!

    Το τελικό αρχείο App.js θα πρέπει να μοιάζει με αυτό

    εισαγωγή React, {useState} από "αντιδρώ"; εισαγωγή {simpleStorage} από "./ abi / abi"; εισαγωγή Web3 από "Ιστός3"; εισαγωγή Nav από "./components/Nav.js"; εισαγωγή "./App.css"; εισαγωγή {makeStyles} από "@ material-ui / core / στιλ"; Εισαγωγή κουμπιού από "@ material-ui / core / Button"; εισαγωγή TextField από "@ material-ui / core / TextField"; const useStyles = makeStyles ((θέμα) => ({root: { "& > *": {margin: theme.spacing (1),},},})); const web3 = νέο Web3 (Web3.givenProvider); const contractAddress = "η διεύθυνσή σας εδώ"; const storageContract = νέο web3.eth.Contract (simpleStorage, contractAddress); συνάρτηση App () {const class = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const λογαριασμοί = αναμονή window.ethereum.enable (); const account = λογαριασμοί [0]; const gas = αναμονή αποθήκευσηςContract.methods.set (number) .estimateGas (); const post = αναμονή αποθήκευσηςContract.methods.set (αριθμός). αποστολή ({από: λογαριασμός, φυσικό αέριο,}); }; const numberGet = async (t) => {t.preventDefault (); const post = αναμονή αποθήκευσηςContract.methods.get (). κλήση (); setGet (ανάρτηση); }; ΕΠΙΣΤΡΟΦΗ ( setUint (t.target.value)} παραλλαγή ="περιγράφεται" /> Επιβεβαιώνω

    Λάβετε το uint256 {getNumber}); } εξαγωγή προεπιλεγμένης εφαρμογής.

    Θα πρέπει τώρα να βλέπουμε τη συνδεδεμένη διεύθυνσή μας στην κορυφή και να διατηρούμε όλη τη λειτουργικότητά μας!

    μπόνουςV1

    &# 127881; Τα καταφέραμε! &# 127881;

    Έχουμε τώρα ένα dApp που έχουμε δημιουργήσει από την αρχή. Τραβήξαμε το έξυπνο συμβόλαιό μας σε ένα έργο React, γράψαμε λογική για να βεβαιωθούμε ότι έχουμε λειτουργικότητα χρήστη, δημιουργήσαμε ένα στοιχείο για την απόδοση της συνδεδεμένης διεύθυνσης και προσθέσαμε ακόμη και ένα δημοφιλές στυλιστικό πλαίσιο στο έργο μας.

    Μπράβο! Αυτή είναι μόνο η αρχή για τις περιπέτειες ανάπτυξης του Web3 και έχετε ήδη κάτι να δείξετε ότι όχι μόνο δημιουργήσατε αλλά και τυλίξτε το κεφάλι σας. Επικοινωνήστε μαζί μας στο Discord και μοιραστείτε το έργο σας (ειδικά αν έχετε κάνει τροποποιήσεις ή προσθήκες) μαζί μας!

      Ενσωμάτωση προγραμματιστή: Βήμα 1Βήμα 1 Ενσωμάτωση προγραμματιστή

      Ενσωμάτωση προγραμματιστή: Βήμα 1

      Ενσωμάτωση προγραμματιστή: Βήμα 2Βήμα 2 Ενσωμάτωση προγραμματιστή

      Ενσωμάτωση προγραμματιστή: Βήμα 2

      Προσανατολισμός 10 λεπτών Ethereum10 λεπτά προσανατολισμού Ethereum

      Προσανατολισμός 10 λεπτών Ethereum
    Mike Owergreen Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map