Bước 3: Khởi chạy Cổng nhà phát triển Dapp

    Các bước thứ ba

    Vì vậy, bạn đã nắm được thông tin cơ bản. Trong phần trước, bạn đã phát triển một hợp đồng thông minh và triển khai nó bằng Truffle. Tuy nhiên, trong phần trước, các hợp đồng thông minh của bạn đã được triển khai cho một mạng phát triển cục bộ – và điều đó thật không vui chút nào, vì chỉ bạn mới có thể triển khai mọi thứ và tương tác với mạng thử nghiệm cục bộ đó! Chúng tôi muốn có bạn bè! Và quyền truy cập vào các hợp đồng thông minh khác mà người khác đã triển khai!

    Do đó, trong phần này, chúng tôi sẽ chuyển sang sử dụng mạng thử nghiệm Ethereum công khai, vì vậy bạn có thể tham gia vào tất cả các hành động xảy ra xung quanh hệ sinh thái Ethereum!

    Bắt đầu nào!

    Đầu tiên, chúng ta sẽ nói về cách bạn có quyền truy cập vào các mạng Ethereum công khai này.

    Để truy cập các mạng này, bạn cần kết nối với một nút được kết nối với mạng tương ứng. Bạn có thể xem mỗi mạng Ethereum như một thế giới Ethereum nhỏ của riêng nó và bạn có thể xem một nút Ethereum như là cổng hoặc điểm truy cập của bạn vào mỗi thế giới đó! Bởi vì Ethereum là một mạng phân tán, mỗi nút Ethereum lưu trữ toàn bộ trạng thái của mạng mà nó được kết nối (có những nút không cần lưu trữ trạng thái đầy đủ, nhưng đừng lo lắng về điều đó ngay bây giờ) và liên tục giao tiếp với các nút khác trong mạng để luôn cập nhật trạng thái đó! Do đó, để có thể đọc và ghi ở trạng thái này, chúng tôi cần có quyền truy cập vào một trong các nút này.

    Bạn rất có thể lưu trữ nút của riêng mình bằng cách sử dụng một trong nhiều máy khách Ethereum hiện có sẵn (Hyperledger Besu (máy khách Java do ConsenSys phát triển), Geth (máy khách Go), Parity (máy khách Rust), v.v.) – tuy nhiên, có khá nhiều một chút chi phí DevOps đi kèm với việc lưu trữ và duy trì nút Ethereum của riêng bạn – đặc biệt nếu bạn muốn làm điều đó một cách đáng tin cậy! Do đó, chúng tôi tại ConsenSys đã xây dựng Infura – một dịch vụ cung cấp cơ sở hạ tầng Ethereum đẳng cấp thế giới. Infura đảm nhận toàn bộ phần ‘quản lý nút’ cho bạn, cung cấp cho bạn quyền truy cập tức thì, đáng tin cậy và có thể mở rộng vào các cụm nút Ethereum! Bạn có thể coi Infura là “Ethereum-node-as-a-Service” &# 128578;

    Bắt đầu với Infura

    Để bắt đầu với Infura, bạn sẽ muốn đăng ký một tài khoản tại infura.io. Đừng lo lắng – bắt đầu hoàn toàn miễn phí và bạn sẽ không cần nhập bất kỳ thông tin nhạy cảm nào!

    Sau khi đăng ký, bạn sẽ được dẫn đến một trang giống như sau:

    infuraLogin

    Như trang này gợi ý, để bắt đầu, bạn sẽ chọn tùy chọn đầu tiên “Bắt đầu và tạo dự án đầu tiên của bạn để truy cập mạng Ethereum!”

    Bạn có thể đặt tên cho dự án của mình bất cứ thứ gì bạn muốn – chúng tôi sẽ đặt tên là “dự án thử nghiệm”.

    InfuraNP

    Bây giờ, bạn sẽ được cung cấp thông tin đăng nhập cần thiết để truy cập các nút Infura!

    InfuraC

    Giữ cho trang này luôn mở! Chúng tôi sẽ quay lại với nó sau &# 128578;

    Điều tiếp theo chúng tôi sẽ làm là khởi tạo một dự án Truffle mới. Nếu bạn cần trợ giúp cài đặt Truffle, vui lòng tham khảo phần trước của tài liệu này.

    Để khởi tạo một dự án Truffle mới, hãy tạo một thư mục mới và chạy

    truffle init

    Tiếp theo, bạn sẽ muốn thêm nhà cung cấp Truffle HD Wallet vào dự án mới khởi tạo của mình để bạn có thể ký các giao dịch của mình trước khi chúng được gửi đến các nút Infura. Mọi thay đổi trạng thái mà bạn thực hiện đối với Ethereum đều ở dạng giao dịch – cho dù đó là triển khai hợp đồng, gọi một hàm trong hợp đồng hay gửi mã thông báo! Mỗi giao dịch cần được ký bởi một tài khoản – do đó, ứng dụng của chúng tôi cần khả năng ký giao dịch để có thể thực hiện các thay đổi trạng thái đối với Ethereum!

    Mỗi giao dịch cũng tốn ether. Chi phí giao dịch này được gọi là “chi phí gas”. Do đó, để mạng lưới xử lý các giao dịch đã ký của chúng tôi sau khi chúng được gửi đến các nút Infura, chúng tôi cần nạp tiền vào tài khoản của mình bằng một số ether. Chúng tôi sẽ đề cập đến vấn đề này sau một chút, nhưng đây chỉ là một lý do quan trọng khác khiến bạn cần một chiếc ví & nhà cung cấp ví!

    Để thêm nhà cung cấp Ví Truffle HD vào loại dự án mới khởi tạo trong thiết bị đầu cuối của bạn:

    npm install –save @ truffle / hdwallet-provider

    Điều này có thể đưa ra một số cảnh báo, nhưng miễn là nó được cài đặt, bạn có thể bắt đầu!

    Bây giờ chúng ta có thể tạo một tài khoản Ethereum cho ứng dụng của mình để sử dụng! Vì nhà cung cấp ví của chúng tôi là ví HD (xác định thứ bậc), chúng tôi có thể tạo tài khoản một cách xác định bằng cách sử dụng cùng một cụm từ hạt giống hoặc ghi nhớ.

    Để tạo tài khoản của mình, trước tiên chúng ta cần khởi động Ganache. Ganache là một sản phẩm của Truffle cho phép chúng tôi dễ dàng tạo mạng lưới nhà phát triển cục bộ của riêng mình. Để chạy ganache, chỉ cần nhập

    ganache-cli

    Nếu bạn đã hoàn thành Bước 2 của hướng dẫn này, bạn phải cài đặt Ganache / ganache-cli – nếu chưa cài đặt, bạn có thể cài đặt nó bằng lệnh npm:

    npm install -g ganache-cli

    Hoặc nếu bạn đang sử dụng sợi 

    sợi toàn cầu add ganache-cli

    Tiếp theo, chúng tôi sẽ cần cho phép ứng dụng của mình giao tiếp với Ganache. Đi tới thư mục dự án của bạn và kiểm tra tệp truffle-config.js, chỉ cần bỏ ghi chú (hoặc thêm) các dòng sau trong mạng:

    phát triển: {máy chủ: "127.0.0.1", // Cổng Localhost (mặc định: không có): 8545, // Cổng Ethereum tiêu chuẩn (mặc định: không có) network_id: "*" // Bất kỳ mạng nào (mặc định: không có)},

    unommenrt

    Đẹp! Giờ đây, ứng dụng của chúng tôi có thể nói chuyện với mạng phát triển Ganache của chúng tôi đang chạy ở 127.0.0.1:8545! Bây giờ, trong một cửa sổ đầu cuối mới (nhưng vẫn nằm trong thư mục dự án của bạn), hãy chạy lệnh

    bảng điều khiển truffle

     để kết nối với mạng Ganache của bạn. Đừng lo lắng – sau này chúng tôi sẽ kết nối với mạng công cộng! Chúng tôi chỉ cần kết nối với Ganache ngay bây giờ để tạo khóa của mình &# 128578;

    Lưu ý: Nếu bạn đang gặp sự cố, hãy đảm bảo rằng trong Ganache, số cổng Máy chủ RPC của bạn khớp với tệp cấu hình truffle của bạn. Trong trường hợp mặc định, 8545 sẽ hoạt động, nếu không, hãy thay đổi tệp cấu hình của bạn để phù hợp với Ganache.

    Bây giờ, hãy nhập các lệnh sau vào bảng điều khiển Truffle để tạo ví của bạn:

    const HDWalletProvider = request (‘@ truffle / hdwallet-provider’);

    Điều này sẽ dẫn đến phản hồi là “không xác định”

    Đối với khả năng ghi nhớ 12 từ của bạn, bạn có thể sử dụng trình tạo khả năng ghi nhớ chẳng hạn như cái này nếu bạn muốn!

    ĐẢM BẢO BẠN LƯU GIAI ĐOẠN MNEMONIC (SEED) CỦA BẠN! Chúng tôi sẽ cần nó sau &# 128515;

    Tiếp theo, thêm lệnh sau vào thiết bị đầu cuối của bạn (trong khi vẫn đang phát triển truffle):

    const mnemonic = ’12 từ ở đây’; const wallet = new HDWalletProvider (ghi nhớ, "http: // localhost: 8545");

    Bây giờ, trong bảng điều khiển truffle của bạn, hãy nhập lệnh 

    ví tiền

    Nếu bạn cuộn lên, bạn sẽ thấy một danh sách các tài khoản, như thế này!

    nghiện ngập

    Mặc dù tài khoản đó được tạo trong khi chúng tôi kết nối với Ganache, chúng tôi có thể sử dụng (các) tài khoản Ethereum đó trên bất kỳ mạng Ethereum nào (tuy nhiên, xin lưu ý – mặc dù cùng một tài khoản có thể được sử dụng trên bất kỳ mạng Ethereum nào, các tài sản / hoạt động liên quan đến điều đó tài khoản dành riêng cho mạng – ví dụ: nếu tôi thực hiện giao dịch trên Ethereum Mainnet, giao dịch đó sẽ chỉ xảy ra trên Ethereum Mainnet và không có mạng nào khác). Bây giờ chúng tôi sẽ ngừng tương tác với Ganache (mạng nhà phát triển cục bộ) và bắt đầu sử dụng tài khoản đó để tương tác với một số mạng công cộng!!

    Thông thường, điều đầu tiên bạn cần làm khi tương tác với mạng công cộng là lấy một số ether của mạng đó. Trong trường hợp của chúng tôi, chúng tôi sẽ kết nối với mạng thử nghiệm công khai Ropsten, vì vậy chúng tôi sẽ cần nhận được một số Ropsten ether (ETH)! Đừng lo lắng – thử nghiệm ETH ròng là miễn phí và nhiều tiền cũng như cực kỳ dễ kiếm &# 128077;

    Đã đến lúc có được ETH thử nghiệm

    Để có được một số Ropsten ETH, hãy truy cập vào Mở vòi. Dán địa chỉ tài khoản của bạn và viola! Bạn đã nhận được một số ETH Ropsten và có thể bắt đầu gửi các giao dịch (tức là thực hiện các thay đổi trạng thái đối với) mạng Ropsten!

    Để tham khảo, mạng kiểm tra Ropsten là mạng kiểm tra Ethereum công khai, nơi bạn có thể kiểm tra mã của mình trong một môi trường phản ánh chặt chẽ môi trường của mạng chính Ethereum. Sự khác biệt chính giữa mạng thử nghiệm Ropsten (và các mạng thử nghiệm Ethereum công khai khác) là trong testnet-land, ETH rất dồi dào và không có giá trị trong thế giới thực! Khi bạn bắt đầu tương tác với mạng chính Ethereum, Ether bạn sử dụng để thanh toán cho các giao dịch của mình (chi phí gas) sẽ có giá THỰC TẾ – và vì vậy chúng tôi cần đảm bảo rằng chúng tôi đang thực hiện mọi việc ngay từ trước để không bị mất công tiền mặt kiếm được / ETH mainnet quý giá của chúng tôi!

    Mạng thử nghiệm Ropsten, cùng với hầu hết các mạng thử nghiệm công khai khác, có nhiều trình khám phá khối để bạn xem hoạt động đang diễn ra trên chuỗi (https://ropsten.etherscan.io/). Để xem tài khoản được cấp tiền của bạn, chỉ cần dán địa chỉ tài khoản của bạn vào trình khám phá – và bạn có thể xem tất cả lịch sử được liên kết với nó:

    Chụp màn hình 2020 09 01 lúc 4 34 21 sáng

    Ổn thỏa! Bây giờ chúng tôi đã có nhà cung cấp ví và một tài khoản được tài trợ bằng Ropsten ETH, chúng tôi có thể quay trở lại dự án của mình và trỏ nó vào các nút Infura được kết nối với mạng kiểm tra Ropsten.

    Điều đầu tiên chúng tôi muốn làm là tạo tệp a.env để chứa BÍ MẬT quý giá của chúng tôi! Những bí mật này bao gồm khóa API Infura của chúng tôi (được tạo khi chúng tôi tạo tài khoản Infura) và cụm từ dễ nhớ của chúng tôi.

    Ở cấp cơ sở của dự án của bạn, chỉ cần tạo một tệp mới “.env”. Ngoài ra, bạn sẽ cần cài đặt gói NPM dotenv bằng cách nhập lệnh sau vào thiết bị đầu cuối

    npm install –save dotenv

    Trong tệp new.env này, bạn sẽ cần hai thứ:

    INFURA_API_KEY = CHÈN TỪ KHÓA API CỦA BẠN VÀO ĐÂY (không có trích dẫn)

    MNEMONIC = “ống kính cá voi quạt dây bong bóng trực tuyến ghế phơi bày người chiến thắng câu số chứng khoán”

    INFURA_API_KEY là ID dự án từ dự án bạn đã tạo trước đó trong infura:

    Chụp màn hình 2020 09 01 lúc 4 giờ 37 12 giờ sáng

    Và MNEMONIC là cụm từ hạt giống 12 từ mà trước đây bạn đã sử dụng để tạo tài khoản của mình.

    Tệp của bạn bây giờ sẽ trông như thế này:

    Chụp màn hình 2020 09 01 lúc 4 41 53 sáng

    Được rồi, chúng ta sắp kết thúc rồi!

    LƯU Ý: Nếu bạn định đẩy dự án này lên kho lưu trữ Github hoặc đặt dự án này ở chế độ công khai theo bất kỳ cách nào, hãy ĐẢM BẢO có tệp.env của bạn trong.gitignore để bí mật của bạn không bị lộ! 

    Bây giờ, chúng ta sẽ cần chuyển đến tệp truffle-config.js. Ở đây, chúng tôi sẽ cần thêm một số thứ để biểu thị nhà cung cấp của chúng tôi (được sử dụng để tương tác với Infura (Nhà cung cấp Truffle HDWallet mà chúng tôi đã cài đặt trước đó) và hướng ứng dụng của chúng tôi vào các nút Ropsten Infura.

    Ở đầu tệp, thêm:

    yêu cầu ("dotenv") .config (); const HDWalletProvider = request ("@ truffle / hdwallet-provider");

    Tiếp theo, trong “mạng”, bạn sẽ muốn thêm mạng sau:

    ropsten: {nhà cung cấp: () => mới HDWalletProvider (process.env.MNEMONIC, `https://ropsten.infura.io/v3/$ {process.env.INFURA_API_KEY}`), network_id: 3, // Ropsten’s id gas: 5500000, // Ropsten có một giới hạn khối thấp hơn so với xác nhận của mạng chính: 2, // # trong số các điều khoản để chờ giữa các lần triển khai. (mặc định: 0) timeoutBlocks: 200, // # khối trước khi triển khai hết thời gian chờ (tối thiểu / mặc định: 50) bỏ quaDryRun: true // Bỏ qua chạy khô trước khi di chuyển? (mặc định: false cho mạng công cộng)}

     

    Bây giờ tệp truffle-config.js của bạn sẽ trông giống như thế này!

    Ghi chú bên lề:

    Nếu bạn đang sử dụng điểm cuối Infura, tham số `from` là bắt buộc, vì chúng không có ví. Nếu bạn đang sử dụng điểm cuối Ganache hoặc Geth RPC, đây là một tham số tùy chọn.

    Chụp màn hình 2020 09 01 lúc 4 giờ 50 54 giờ sáng

    BÂY GIỜ CHÚNG TÔI ĐÃ SN SÀNG CHO PHÉP THUẬT! Đã đến lúc triển khai hợp đồng thông minh cho ROPSTEN!

    Thiết lập hợp đồng thông minh

    Thiết lập độ vững chắc

    Trước tiên, chúng tôi sẽ muốn tạo một hợp đồng thông minh để triển khai! Bạn có thể lấy hợp đồng thông minh mà bạn đã phát triển trong phần trước của hướng dẫn này, xây dựng hợp đồng thông minh của riêng bạn hoặc chỉ sử dụng hợp đồng mẫu (cực kỳ đơn giản) sau:

    sự vững chắc của pragma >= 0,5,8; hợp đồng SimpleStorage {uint256 ManagedData; hàm set (uint256 x) public {ManagedData = x; } function get () public view return (uint256) {return ManagedData; }}

    Hợp đồng này phải được tạo dưới dạng tệp “.sol” (Solidity) trong thư mục “hợp đồng” của dự án của bạn (trong trường hợp này, chúng tôi đã tạo tệp SimpleStorage.sol, là hợp đồng SimpleStorage của chúng tôi:

    đoạn đầu đài

    Thiết lập di chuyển

    Tiếp theo, chúng tôi sẽ cần thiết lập tệp di chuyển của mình!

    Migrations là các tệp JavaScript giúp bạn triển khai các hợp đồng vào mạng Ethereum. Các tệp này chịu trách nhiệm sắp xếp các nhiệm vụ triển khai của bạn và chúng được viết với giả định rằng nhu cầu triển khai của bạn sẽ thay đổi theo thời gian. Khi dự án của bạn phát triển, bạn sẽ tạo các tập lệnh di chuyển mới để tiếp tục phát triển quá trình này trên blockchain. Lịch sử của các lần di chuyển đã thực hiện trước đó được ghi lại trên chuỗi thông qua hợp đồng Di chuyển đặc biệt. Bạn có thể tìm thêm thông tin về chúng đây.

    Tệp di chuyển để triển khai hợp đồng của chúng tôi sẽ trông giống như sau:

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

    Lưu tệp này trong thư mục “di chuyển” với tên “2_deploy_contracts.js”.

    Triển khai hợp đồng công khai đầu tiên của bạn

    Đã đến lúc di chuyển

    Bây giờ, bạn THỰC SỰ đã sẵn sàng cho ĐIỀU KỲ DIỆU XẢY RA! Quay lại bảng điều khiển và nhập

    truffle migrate –network ropsten

    Bùng nổ!&# 128163; Mã của bạn đã được triển khai tới Mạng thử nghiệm Ethereum Ropsten công khai!!! 

    Những gì vừa xảy ra là:

    1. Hợp đồng thông minh Solidity của bạn (trong thư mục “hợp đồng”) đã được biên dịch thành bytecode – mã máy có thể đọc được để Máy ảo Ethereum sử dụng.

    2. Mã bytecode này, + một số dữ liệu khác, được nhóm lại với nhau thành một giao dịch.

    3. Giao dịch đó đã được ký bởi tài khoản của bạn.

    4. Giao dịch đó đã được gửi đến nút Infura được kết nối với Ropsten.

    5. Giao dịch được lan truyền trên toàn mạng, được chọn bởi một người khai thác Ropsten và được bao gồm trong một khối Ropsten.

    6. Hợp đồng thông minh của bạn hiện đang TRỰC TIẾP trên blockchain Ropsten!

    Bạn có thể xem hợp đồng của mình bằng Etherscan: https://ropsten.etherscan.io/ – chỉ cần dán địa chỉ của hợp đồng (phải ở trong thiết bị đầu cuối của bạn) để xem nó!

    Chụp màn hình 2020 09 01 lúc 5 giờ 19 12 giờ sáng

    Kinh ngạc! Chúng tôi vừa triển khai hợp đồng thông minh đầu tiên của mình cho mạng Ethereum CÔNG KHAI! &# 129327;

    Quá trình này hoàn toàn giống với việc triển khai tới Ethereum mainnet, ngoại trừ việc bạn sẽ hoán đổi mạng trong tệp truffle-config.js cho Ethereum mainnet (và tất nhiên, chạy lệnh di chuyển mainnet Truffle thay vì Ropsten) ! Chúng tôi sẽ không hướng dẫn bạn quá trình này tại đây, bởi vì việc triển khai lên mạng chính Ethereum sẽ khiến bạn mất $ thực tế – nhưng nếu bạn muốn được hỗ trợ về vấn đề này, hãy chuyển sang ConsenSys Discord và chúng tôi rất sẵn lòng giúp đỡ!

    Xây dựng giao diện người dùng Web3 

    Bây giờ chúng tôi đã triển khai hợp đồng của mình với Ropsten, hãy xây dựng một giao diện người dùng đơn giản để tương tác với nó!

    Lưu ý: “front-end” của dApp chỉ là giao diện cũ thông thường hàng ngày của bạn – như vậy, chúng tôi có thể sử dụng tất cả các công cụ cũ mà chúng tôi quen thuộc (tạo-phản ứng-ứng dụng, v.v.) để hoàn thiện giao diện người dùng của mình , và sau đó chỉ cần thêm một số thứ để cho phép giao diện người dùng đọc và ghi vào Ethereum! Điều này có nghĩa là, tất cả các kỹ năng của nhà phát triển web cũ của bạn đều có thể chuyển trực tiếp sang Ethereum-land / Web3!!

    Tăng tốc dự án React của chúng tôi 

    Được rồi, bắt đầu thôi.

    Trước tiên, hãy đảm bảo rằng bạn có một thư mục chứa tất cả thông tin mà chúng tôi vừa tạo cho hợp đồng lưu trữ của mình. Tôi đã đặt tên cho thư mục của mình là “lưu trữ trở lại” và nó chứa công việc mà chúng tôi vừa hoàn thành để thiết lập và triển khai hợp đồng của chúng tôi. 

    Chụp màn hình 2020 09 01 lúc 5 giờ 26 33 sáng

    Bây giờ chúng ta sẽ bắt đầu bằng cách tạo ra một dự án phản ứng, hãy gọi chúng ta trong ví dụ này là “phòng thí nghiệm lưu trữ”

    Trong thiết bị đầu cuối của chúng tôi, hãy chạy phần sau để bắt đầu dự án của chúng tôi 

    npx create-react-app storage-lab

    Bây giờ chúng ta đã có bảng tổng hợp dự án mới của mình, hãy cùng đi vào thư mục dự án

    phòng thí nghiệm lưu trữ cd

    Bây giờ chúng ta đang ở trong dự án của mình, bây giờ chúng ta sẽ thêm gói Web3, gói này sẽ cho phép dự án của chúng ta tương tác với Ethereum! Thêm trên web3 đây

    npm cài đặt web3

    Web3 là một trong hai gói chính mà chúng ta có thể sử dụng, gói còn lại là ethers.js. Đối với ví dụ này, chúng tôi sẽ sử dụng web3 nhưng nếu bạn muốn đọc thêm về ethers.js, hãy xem đây 

    Để có lời giải thích chi tiết về cả hai, hãy xem phần này viết lên web3 so với ete

    Tuyệt quá! Bây giờ chúng tôi gần như đã sẵn sàng để dự án phản ứng của chúng tôi tương tác với hợp đồng của chúng tôi!

    Trước tiên, hãy lấy thư mục của chúng ta từ trước đó (đối với tôi đó là “kho lưu trữ”) chỉ chứa công việc mà chúng tôi đã thực hiện liên quan đến các hợp đồng thông minh của mình và bây giờ hãy thêm nó vào dự án phản ứng mới của chúng tôi. Điều này sẽ hoạt động cùng cấp với src của chúng ta và bây giờ chúng ta sẽ có mọi thứ chúng ta cần cùng nhau bên trong REPO phản ứng của chúng ta.

    Chụp màn hình 2020 09 01 lúc 5 giờ 31 38 sáng

    Tiếp theo, chúng tôi sẽ cần thiết lập tệp chứa thông tin ABI của chúng tôi.

    “ABI?”

    Rất vui vì bạn đã hỏi! 

    Giao diện nhị phân ứng dụng hợp đồng (ABI) là cách tiêu chuẩn để tương tác với các hợp đồng trong hệ sinh thái Ethereum, cả từ bên ngoài blockchain và để tương tác hợp đồng với hợp đồng. Khi chúng tôi biên dịch hợp đồng SimpleStorage ở bước trước, nó đã tạo tệp JSON cho chúng tôi. Hãy tự kiểm tra, chúng tôi có tệp SimpleStorage.json bên trong bản dựng / hợp đồng của chúng tôi

    Chụp màn hình 2020 09 01 lúc 6 giờ 04 20 sáng

    Cái nhìn ban đầu về tệp này sẽ tiết lộ rất nhiều thông tin, ngay bây giờ chúng tôi chỉ cần tập trung vào ABI để đồng bộ hợp đồng của chúng tôi với giao diện người dùng mà chúng tôi đang phát triển. JSON này chứa thông tin chúng tôi cần để giao tiếp hợp đồng với giao diện người dùng của chúng tôi.

    ABI của chúng ta là một mảng chứa các đối tượng. Nhìn vào tệp gần hơn, bạn có thể thấy mỗi đối tượng đó thực sự là mỗi chức năng mà hợp đồng SimpleStorage của chúng tôi chứa.

    Chụp màn hình 2020 09 01 lúc 5 giờ 33 23 sáng

    Bạn có thể nhanh chóng nhìn thấy

    “Name”: “set”

    “Name”: “get”

    cả với “loại:“ chức năng ”cả hai chức năng mà chúng tôi đã khai báo khi viết hợp đồng thông minh của mình!

    Mặc dù Truffle không thực hiện được trong vài bước tiếp theo, nhưng chúng tôi sẽ hướng dẫn cách thực hiện “thủ công” hơn nhiều để bạn tiếp xúc với tất cả các kiến ​​thức cơ bản &# 128578;

    Trước tiên, hãy tiếp tục và sao chép thông tin abi của bạn – chúng tôi sẽ cần nó chỉ trong giây lát. 

    Hãy tạo một thư mục bên trong src của chúng ta có tên là “abi”.

    Bên trong thư mục abi mới tạo của chúng ta, bây giờ chúng ta hãy tạo một tệp có tên là abi.js

    Lưu ý: Về mặt kỹ thuật, chúng tôi không cần phải có sự phân tách này và chỉ có thể thêm abi.js của chúng tôi vào src của chúng tôi, nhưng việc giữ các tệp abi.js của chúng tôi sẽ giúp tổ chức.

    Bây giờ chúng ta sẽ sao chép mảng abi mà chúng ta đã lấy trước đó từ tệp SimpleStorage.JSON và thêm nó vào tệp abi.js mới được tạo của chúng ta. Chúng tôi sẽ thay đổi tệp một chút để cho phép dự án của chúng tôi nhập thông tin vào App.js. Đừng quên vì đây là tệp a.js, chúng tôi cần thêm tệp xuất để có thể đưa tệp đó vào app.js của mình sau này. Hãy đặt tên const giống với hợp đồng, ngoại trừ với camelcase (xem mã bên dưới):

    Đây sẽ là mã chúng tôi lưu trữ trong tệp abi.js của chúng tôi

    export const simpleStorage = [{hằng: false, đầu vào: [{name: "x", kiểu: "uint256", }, ], Tên: "bộ", đầu ra: [], phải trả: sai, trạng thái "không trả được", kiểu: "chức năng", }, {hằng: true, đầu vào: [], tên: "được", kết quả đầu ra: [{name: "", kiểu: "uint256", },], phải trả: false, stateMutability: "lượt xem", kiểu: "chức năng", },];

    Đã đến lúc truy cập App.js của chúng tôi và nhập cả web3 và tệp abi.js mới được tạo của chúng tôi.

    Chúng tôi cũng sẽ sử dụng hook trong ví dụ này (đó là lý do tại sao chúng tôi cũng đang nhập {useState}, bạn có thể đọc thêm về useState đây.

    Phần trên cùng của tệp App.js của chúng tôi bây giờ sẽ trông giống như sau:

    nhập React, {useState} từ "phản ứng"; nhập {simpleStorage} từ "./ abi / abi"C & ocirc; ng; nhập Web3 từ "web3"; nhập khẩu "./App.css";

    Bây giờ chúng tôi cần đảm bảo rằng chúng tôi có khả năng cho bất kỳ người dùng tùy ý nào có khả năng kết nối và sử dụng dApp của chúng tôi, miễn là họ có nhà cung cấp ví!

    Ví chính được sử dụng trong không gian Ethereum để tương tác với dApp là MetaMask, được giới thiệu ở Bước 1.

    Nếu bạn không có MetaMask, hãy truy cập metamask.io

    Với MetaMask được cài đặt, chúng tôi có thể truy cập ví của mình bên trong dapp của chúng tôi bằng:

    const web3 = new Web3 (Web3.givenProvider);

    “Web3.givenProvider” sẽ được đặt trong trình duyệt được hỗ trợ Ethereum.

    (bạn có thể đọc thêm về lý do tại sao điều này là cần thiết đây)

    Vì vậy, bây giờ mã của chúng tôi sẽ giống như sau:

    nhập React, {useState} từ "phản ứng"; nhập {simpleStorage} từ "./ abi / abi"; nhập Web3 từ "web3"; nhập khẩu "./App.css"; const web3 = new Web3 (Web3.givenProvider);

    Đồng ý! Cho đến nay chúng tôi đã:

    • Tạo một dự án React
    • Web3 đã cài đặt
    • Đã thêm thư mục của chúng tôi chứa bản dựng + hợp đồng + di chuyển vào dự án React của chúng tôi
    • Đã tạo tệp abi.js chứa dữ liệu abi mà chúng tôi lấy từ SimpleStorage.json
    • Đã nhập dữ liệu chúng tôi cần để tương tác với hợp đồng của mình
    • Đã tạo một biến cho phép dApp của chúng tôi giao tiếp với ví của người dùng

    Một lần nữa, mặc dù Truffle thực hiện một số bước tiếp theo là không cần thiết (chúng tôi sẽ hướng dẫn bạn qua một phiên bản đơn giản hơn nhiều sau), chúng tôi sẽ thêm một chút phức tạp thủ công vào dApp của mình cho mục đích giáo dục.

    Những gì chúng tôi sẽ làm bây giờ là tạo hai biến mới: một để lưu trữ địa chỉ của hợp đồng mà chúng tôi đã triển khai trên Ropsten và biến còn lại để khớp hợp đồng đó với ABI của chúng tôi, để ứng dụng của chúng tôi biết cách nói chuyện với nó! 

    Để tìm địa chỉ hợp đồng, hãy điều hướng đến tệp JSON mà chúng ta đã ở trước đó (có chứa ABI (SimpleStorage.json)) và cuộn xuống dưới cùng. Địa chỉ nằm trong trường “địa chỉ” ở đây:

    "trình biên dịch": { "Tên": "solc", "phiên bản": "0.5.8 + cam kết.23d335f2.Emscripten.clang" }, "mạng lưới": { "3": { "sự kiện": {}, "liên kết": {}, "Địa chỉ": "0x24164F46A62a73de326E55fe46D1239d136851d8", "giao dịch": "0x1f02006b451b9e85f70acdff15a01c6520e4beddfd93a20e88a9b702a607a7b0" }}, "schemaVersion": "3.0.16", "cập nhật tại": "2020-06-30T20: 45: 38.686Z", "devdoc": { "phương pháp": {}}, "userdoc": { "phương pháp": {}}}

    Ngoài ra, bạn có thể đến https://ropsten.etherscan.io/ và tra cứu địa chỉ tài khoản đã triển khai hợp đồng! Trong Etherscan, nhấp vào “Tạo hợp đồng” sẽ hiển thị chính Địa chỉ hợp đồng.

    Chụp màn hình 2020 09 01 lúc 5 43 46 sáng

    Bây giờ, chúng tôi sẽ lấy bản sao địa chỉ hợp đồng của bạn và tạo một biến mới để lưu trữ. 

    Nếu không có điều này, chúng tôi sẽ không có khả năng giao tiếp với hợp đồng và ứng dụng của chúng tôi sẽ không hoạt động như dự kiến.

    Bạn sẽ thêm cái này trong const web3 = new Web3 (Web3.givenProvider) của chúng tôi;

    const contractAddress = "địa chỉ hợp đồng của bạn ở đây";

    Sau đó, chúng tôi sẽ tạo một biến mới khác có tên “storageContract” sẽ chứa cả địa chỉ hợp đồng của chúng tôi (để ứng dụng của chúng tôi biết hợp đồng ở đâu) và ABI (để ứng dụng của chúng tôi biết cách tương tác với hợp đồng).

    const storageContract = new web3.eth.Contract (simpleStorage, contractAddress);

    App.js của chúng ta bây giờ sẽ trông như thế này

    nhập React, {useState} từ "phản ứng"; nhập {simpleStorage} từ "./ abi / abi"; nhập Web3 từ "web3"; nhập khẩu "./App.css"; const web3 = new Web3 (Web3.givenProvider); const contractAddress = "địa chỉ hợp đồng của bạn ở đây"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress);

    Bây giờ chúng ta cần có hook để giữ các biến sẽ tương tác với hợp đồng và giao diện người dùng của chúng ta. Chúng tôi sẽ làm điều này bằng cách khai báo những điều sau trong chức năng ứng dụng của chúng tôi:

    nhập React, {useState} từ "phản ứng"; nhập {simpleStorage} từ "./ abi / abi"; nhập Web3 từ "web3"; nhập khẩu "./App.css"; const web3 = new Web3 (Web3.givenProvider); const contractAddress = "địa chỉ hợp đồng của bạn"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    Lần sử dụng đầu tiên của chúng tôi về useState (0) sẽ giữ uint256 mà người dùng khai báo.

    (các quy ước đặt tên của number, setUint, getNumber, setGet hy vọng sẽ giúp hiển thị những gì đang xảy ra)

    Giá trị useState (“0”) hoạt động như một trình giữ chỗ cho đến khi chúng tôi có xác nhận về hành động đã ký của mình (uint256 đã khai báo của chúng tôi)

    setUint, chúng tôi sẽ sớm gọi lại khi chúng tôi quay trở lại (sẽ nói thêm về điều này sau)

    Đã đến lúc logic của chúng ta

    Tiếp theo, chúng tôi sẽ thêm logic numberSet và NumberGet (chúng tôi thêm numberSet trong ứng dụng hàm của chúng tôi)

    const numberSet = async (t) => {t.preventDefault (); const account = await window.ethereum.enable (); const account = tài khoản [0]; const gas = chờ lưu trữContract.methods.set (số) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); } const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (bài đăng); }

    Chúng tôi đặt một ngăn chặnDefault (đã tìm thấy thông tin chi tiết về ngăn chặn đây)

    Chúng tôi cũng sử dụng lệnh gọi không đồng bộ khi nhận hợp đồng (tìm thấy chi tiết về không đồng bộ đây)

    Hook setGet () của chúng tôi lưu trữ một giá trị mặc định mà chúng tôi xem ban đầu (“0”)

    const account = await window.ethereum.enable ();

    đảm bảo rằng chúng tôi đang gọi đến địa chỉ được kết nối của mình qua MetaMask.

    const account = tài khoản [0];

    Kéo vào tài khoản kết nối

    Bạn có thể tự hỏi chuyện gì đang xảy ra với 

    const gas = chờ lưu trữContract.methods.set (số) .estimateGas ();

    Ứng dụng của chúng tôi cần quyền truy cập vào quỹ của người dùng để thanh toán phí gas, bất kỳ chức năng nào yêu cầu ether bất kể đó là trên testnet hay mainnet. Đây là nơi kết nối của chúng tôi với MetaMask hữu ích để đăng ký sử dụng này để đặt uint256 của chúng tôi và thanh toán cho nó (với ETH thử nghiệm).

    Vì vậy, đối với bất kỳ chức năng nào cần khí, bạn phải tính toán lượng khí tiềm năng được sử dụng.

    Chức năng “Đặt” trong hợp đồng của chúng tôi yêu cầu khí đốt

    “Nhận” không.

    (điều này là do “Nhận” đang xem những gì đã được khai báo với “Đặt”)

    const post sẽ thực hiện thông qua trong uint256, xác nhận giao dịch (sau khi thanh toán phí gas) từ ví MetaMask của bạn trên mạng Ropsten.

    Tiếp theo, chúng ta chuyển các tham số của hàm qua method.set () và với địa chỉ đã khai báo của chúng ta (địa chỉ người dùng), sau đó chúng ta xử lý hàm Set.

    Chúng tôi tạo giao dịch hợp đồng thông minh của mình bằng cách chuyển các tham số chức năng của chúng tôi đến các phương thức hợp đồng thông minh.set (), và địa chỉ tài khoản người dùng và gas ước tính tới.send ().

    const post = await storageContract.methods.set (number) .send ({from: account, gas,});

    Đây phải là tất cả logic mà chúng ta cần để đề cập đến số.

    Bây giờ chúng tôi cần số của chúng tôi

    const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (bài đăng); }

    Bài đăng const của chúng tôi truy xuất số thiết lập của chúng tôi và setGet chuyển vào giá trị mới mà chúng tôi đã khai báo

    Vì vậy, “0” của chúng tôi sẽ bật Nhấp chuột tham chiếu đến số của chúng tôi Nhận và hiển thị không256 của chúng tôi!

     Vì vậy, bây giờ app.js của bạn sẽ giống như sau

    nhập React, {useState} từ "phản ứng"; nhập {simpleStorage} từ "./ abi / abi"; nhập Web3 từ "web3"; nhập khẩu "./App.css"; const web3 = new Web3 (Web3.givenProvider); const contractAddress = "địa chỉ hợp đồng của bạn"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const account = await window.ethereum.enable (); const account = tài khoản [0]; const gas = chờ lưu trữContract.methods.set (số) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); } const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (bài); }

    Hãy tạo một lượt trả về rất cơ bản để hiển thị để chúng ta có thể kiểm tra xem chúng ta có thể 

    • đặt một giá trị không đúng256,
    • Kéo ví metamask của chúng tôi lên và xác nhận giao dịch
    • Trả tiền xăng
    • sau đó nhận giá trị (không 256) mà chúng tôi đã lưu trữ sau khi giao dịch hoàn tất.

    Sự trở lại của chúng tôi trông như thế này: 

    return (Đặt uint256 của bạn: setUint (t.target.value)} /> Xác nhận

    Lấy uint256 của bạn {getNumber}); } xuất ứng dụng mặc định;

    Một số CSS nhanh

    Bây giờ chúng ta hãy truy cập tệp App.css, xóa mã tấm lò hơi và thêm mã này để thay thế

    .main {text-align: center; hiển thị: flex; justify-content: trung tâm; màu nền: # f2f1f5; chiều cao: 100vh; } .card {min-height: 50vh; chiều rộng: 50vw; hiển thị: flex; flex-hướng: cột; align-các mục: trung tâm; justify-content: trung tâm; } .form {height: 20vh; chiều rộng: 20vw; hiển thị: flex; justify-content: khoảng trắng-đều; flex-hướng: cột; } .button {width: 20vw; chiều cao: 5vh; }

    Bây giờ chúng tôi đã sẵn sàng để kiểm tra!

    Trong thiết bị đầu cuối của bạn chạy

    sợi bắt đầu

    Trong localhost của chúng tôi: 3000, chúng tôi sẽ trông như thế này

     

    Chụp màn hình 2020 09 01 lúc 6 giờ 12 49 sáng

    Bây giờ chúng ta có thể nhập giá trị không256 vào trường đầu vào của mình!

    Sau khi chúng tôi xác nhận số của mình trong dApp của mình, chúng tôi sẽ đăng nhập qua MetaMask (Đảm bảo ví của bạn được đặt thành mạng Ropsten)

    confrim1

    Chúng ta làm được rồi! &# 129303;

    Giờ đây, hợp đồng thông minh của chúng tôi được kết nối với giao diện người dùng và có khả năng thao tác chức năng Đặt (miễn là chúng tôi có ETH thử nghiệm để thanh toán phí gas cho giao dịch). Sau đó, chúng ta có thể gọi hàm Get và truy xuất giá trị uint265 đã lưu trữ.

    Khá tuyệt phải không!?!

    Tạo kiểu bổ sung 

    Bây giờ đã đến lúc cho thấy việc triển khai công nghệ Web2 phổ biến hơn nữa vào dự án của chúng tôi có thể dễ dàng như thế nào.

    Chúng tôi sẽ sử dụng MUI để thêm các kiểu cơ bản, nếu bạn đã phát triển với React thì có thể bạn đã quen với material-ui. (Chi tiết tìm thấy đây) Material-UI hay viết tắt là MUI là một khung công tác React rất phổ biến cho phép bạn nhanh chóng tạo ra một dự án với nhiều kiểu dáng được nấu sẵn miễn là bạn tuân theo các quy ước đặt tên. Nó cũng rất dễ thao tác nếu bạn muốn chỉ sử dụng kem nền và tùy chỉnh từ đó.

    * Đây sẽ là một ví dụ rất ngắn gọn về cách thêm MUI vào một dự án với những bổ sung nhỏ để chứng minh bạn có thể kết hợp dự án của chúng tôi nhanh như thế nào khi nó đứng với công nghệ Web2. 

    Thêm MUI

    Chúng tôi sẽ bắt đầu bằng cách chạy lệnh (trong khi vẫn ở trong thư mục dự án của chúng tôi trong thiết bị đầu cuối (nếu ứng dụng của bạn vẫn đang chạy, bạn sẽ cần đóng nó (ctrl + c) hoặc mở một tab mới)):

    Để cài đặt với npm:

    npm install @ material-ui / core

    Hoặc với sợi:

    sợi add @ material-ui / core

    Bây giờ chúng tôi đã tiêm MUI, chúng tôi sẽ bắt đầu với việc thay đổi kiểu dáng của chúng tôi. Ở đầu tệp app.js của chúng tôi, chúng tôi sẽ nhập một số thứ mới:

    nhập {simpleStorage} từ "./ abi / abi"; nút nhập khẩu từ "@ material-ui / core / Nút"; nhập Trường văn bản từ "@ material-ui / core / TextField"; nhập {makeStyles} từ "@ material-ui / core / styles";

    Việc nhập {makeStyles} cho phép chúng tôi thao tác kiểu (trong trường hợp này) các nút và trường văn bản của chúng tôi cùng với việc nhập kiểu MUI mặc định. 

    Bây giờ chúng ta sẽ tạo một biến (bên trên hàm của chúng ta), nó mang lại kiểu bảng soạn sẵn từ MUI

    const useStyles = makeStyles ((theme) => ({ nguồn gốc: { "& > *": {margin: theme.spacing (1),},},}));

    Bây giờ trong hàm Ứng dụng của chúng tôi, chúng tôi cũng sẽ thêm một biến có tên là “lớp” kéo theo các kiểu đã xác định mà chúng tôi vừa khai báo ở trên.

    function App () {const class = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0");

    Bây giờ, chúng tôi sẽ thực hiện các điều chỉnh trong thời hạn trả lại của chúng tôi để thay thế một số trường của chúng tôi bằng những gì chúng tôi vừa nhập.

    return (setUint (t.target.value)} biến thể ="nêu" /> Xác nhận

    Lấy uint256 của bạn {getNumber}); } xuất ứng dụng mặc định;

    Mã của bạn bây giờ sẽ giống như thế này

    nhập React, {useState} từ "phản ứng"; nhập {simpleStorage} từ "./ abi / abi"; nhập Web3 từ "web3"; nhập khẩu "./App.css"; nhập {makeStyles} từ "@ material-ui / core / styles"; nút nhập khẩu từ "@ material-ui / core / Nút"; nhập Trường văn bản từ "@ material-ui / core / TextField"; const useStyles = makeStyles ((theme) => ({ nguồn gốc: { "& > *": {margin: theme.spacing (1),},},})); const web3 = new Web3 (Web3.givenProvider); const contractAddress = "địa chỉ hợp đồng của bạn ở đây"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const class = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const account = await window.ethereum.enable (); const account = tài khoản [0]; const gas = chờ lưu trữContract.methods.set (số) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); } const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (bài); } return (setUint (t.target.value)} biến thể ="nêu" /> Xác nhận

    Lấy uint256 của bạn {getNumber}); } xuất ứng dụng mặc định;

    Bây giờ nếu chúng ta xem xét dự án phản ứng của mình, nó sẽ giống như thế này!

    Chụp màn hình 2020 09 01 lúc 6 48 55 sáng

    Làm tốt!

    Chúng tôi vẫn có tất cả các chức năng của trước đây và hiện đã đưa vào một khuôn khổ dễ sử dụng để tùy chỉnh thêm dự án của chúng tôi theo cách chúng tôi muốn. Hãy xem MUI tài liệu để thử nghiệm với các bổ sung / sửa đổi của riêng bạn!

    Vòng thưởng 

    Thật tuyệt khi hiển thị địa chỉ kết nối của người dùng trong dApp của chúng tôi, phải không?

    Chúng ta hãy tạo một thành phần cơ bản và nhanh chóng để thực hiện chính xác điều đó!

    Chúng tôi sẽ bắt đầu bằng cách tạo một thành phần riêng biệt mà chúng tôi có thể nhập lại vào tệp App.js của mình. Bạn nên phân tách logic của chúng tôi để không chỉ giúp App.js của chúng tôi dễ điều hướng mà còn tuân theo thực tiễn của một thành phần lý tưởng là chỉ thực hiện một việc. Nếu nó lớn dần lên, nó sẽ được phân rã thành các thành phần con nhỏ hơn.

    Xây dựng thành phần 

    Chúng tôi sẽ tạo một thư mục mới có tên là các thành phần ở cùng cấp với src của chúng tôi và trong thư mục đó, chúng tôi sẽ tạo một tệp Nav.js. Giàn giáo dự án của chúng ta bây giờ sẽ trông giống như thế này

    Chụp màn hình 2020 09 01 lúc 6 47 07 sáng

    Chúng tôi cũng sẽ tạo tệp Nav.css trong thư mục thành phần của chúng tôi để nhập bất kỳ kiểu nào mà chúng tôi áp dụng cụ thể cho thành phần Nav.

    Hãy mở Nav.js lên và nhập tệp React, Web3 và tệp void.css của chúng tôi

    nhập React từ "phản ứng"; nhập Web3 từ "web3"; nhập khẩu "./Nav.css"

    Bây giờ chúng ta sẽ tạo một lớp có tên là Nav và chúng ta sẽ chỉ thêm một số thứ vào bên trong nó để hiển thị địa chỉ được kết nối của chúng ta. Chúng tôi sẽ bắt đầu bằng cách thiết lập trạng thái của chúng tôi để đọc tài khoản

    class Nav mở rộng React.Component {state = {account: "" }

    Vẫn trong lớp của chúng tôi, chúng tôi sẽ tải tài khoản để đọc từ đó bằng cách thêm logic loadAccount không đồng bộ của chúng tôi

    async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const network = await web3.eth.net.getNetworkType (); const account = await web3.eth.getAccounts (); this.setState ({account: các tài khoản [0]}); }

    Tiếp theo, chúng tôi sẽ tạo một componentDidMount (sẽ được gọi ngay sau khi thành phần mount) Trong trường hợp của chúng tôi, kéo tài khoản đã tải vào. Đọc thêm đây

    componentDidMount () {this.loadAccount (); }

    Ghi chú bên lề:

    Điều này có thể được thực hiện theo cách khác, thay vì một lớp, chúng ta có thể tạo một hàm và sử dụng các hook đối lập với componentDidMount, nhưng vì lợi ích của ví dụ này, chúng ta sẽ bám sát phương pháp này.

    Sau đó, chúng tôi sẽ tạo một kết xuất phía trên giá trị trả về của chúng tôi, kết xuất là một phương thức được yêu cầu khi bạn đang viết một thành phần React bằng phương thức lớp. Trong lượt trả lại của chúng tôi, chúng tôi thêm một lớp địa chỉ vào div của chúng tôi (để tạo kiểu cơ bản cho sau này) cùng với thẻ p để hiển thị địa chỉ được kết nối mà chúng tôi tìm nạp bằng cách sử dụng {this.state.account}

    render () {return (Địa chỉ được kết nối của bạn: {this.state.account}); }} xuất Nav mặc định;

    Tệp Nav.js của chúng tôi bây giờ sẽ trông giống như thế này

    nhập React từ "phản ứng"; nhập Web3 từ "web3"; nhập khẩu "./Nav.css" class Nav mở rộng React.Component {state = {account: "" } async loadAccount () {const web3 = new Web3 (Web3.givenProvider || "http: // localhost: 8080"); const network = await web3.eth.net.getNetworkType (); const account = await web3.eth.getAccounts (); this.setState ({account: các tài khoản [0]}); } componentDidMount () {this.loadAccount (); } render () {return (Địa chỉ được kết nối của bạn: {this.state.account}); }} xuất Nav mặc định;

     

    Hãy đi đến tệp Nav.css và thêm kiểu rất cơ bản

    .địa chỉ {display: flex; justify-content: trung tâm; }

    Về mặt kỹ thuật, bạn có thể thêm tệp này vào tệp App.css, hãy nhớ rằng điều này có thể khá nhanh chóng và lộn xộn. Các thành phần nên được tái sử dụng và để tránh ma sát nhiều nhất có thể bằng cách chia nhỏ công việc của bạn, nó có thể giúp bạn đỡ đau đầu trên đường.

    Bây giờ, hãy quay lại App.js của chúng tôi và nhập thành phần mới được tạo của chúng tôi và đảm bảo rằng chúng tôi thêm nó vào phần quay lại để hiển thị!

    Tệp App.js đã hoàn thành của chúng tôi sẽ trông như thế này

    nhập React, {useState} từ "phản ứng"; nhập {simpleStorage} từ "./ abi / abi"; nhập Web3 từ "web3"; nhập Nav từ "./components/Nav.js"; nhập khẩu "./App.css"; nhập {makeStyles} từ "@ material-ui / core / styles"; nút nhập khẩu từ "@ material-ui / core / Nút"; nhập Trường văn bản từ "@ material-ui / core / TextField"; const useStyles = makeStyles ((theme) => ({ nguồn gốc: { "& > *": {margin: theme.spacing (1),},},})); const web3 = new Web3 (Web3.givenProvider); const contractAddress = "địa chỉ của bạn ở đây"; const storageContract = new web3.eth.Contract (simpleStorage, contractAddress); function App () {const class = useStyles (); const [number, setUint] = useState (0); const [getNumber, setGet] = useState ("0"); const numberSet = async (t) => {t.preventDefault (); const account = await window.ethereum.enable (); const account = tài khoản [0]; const gas = chờ lưu trữContract.methods.set (số) .estimateGas (); const post = await storageContract.methods.set (number) .send ({from: account, gas,}); } const numberGet = async (t) => {t.preventDefault (); const post = await storageContract.methods.get (). call (); setGet (bài); } trở về ( setUint (t.target.value)} biến thể ="nêu" /> Xác nhận

    Lấy uint256 của bạn {getNumber}); } xuất ứng dụng mặc định;

    Bây giờ chúng ta sẽ thấy địa chỉ được kết nối của chúng ta ở trên cùng và vẫn giữ nguyên tất cả các chức năng của chúng ta!

    bonusV1

    &# 127881; Chúng ta làm được rồi! &# 127881;

    Giờ đây, chúng tôi có một dApp mà chúng tôi đã xây dựng từ đầu. Chúng tôi đã đưa hợp đồng thông minh của mình vào một dự án React, viết logic để đảm bảo chúng tôi có chức năng người dùng, tạo một thành phần để hiển thị địa chỉ được kết nối và thậm chí chúng tôi đã thêm một khung tạo kiểu phổ biến vào dự án của mình.

    Làm tốt! Đây chỉ là bước khởi đầu cho cuộc phiêu lưu phát triển Web3 của bạn và bạn đã có một cái gì đó để chứng tỏ rằng bạn không chỉ tạo ra mà còn rất giỏi. Liên hệ với chúng tôi trong Discord và chia sẻ dự án của bạn (đặc biệt nếu bạn đã thực hiện bất kỳ sửa đổi hoặc bổ sung nào) với chúng tôi!

      Giới thiệu nhà phát triển: Bước 1Giới thiệu nhà phát triển Bước 1

      Giới thiệu nhà phát triển: Bước 1

      Giới thiệu nhà phát triển: Bước 2Giới thiệu nhà phát triển Bước 2

      Giới thiệu nhà phát triển: Bước 2

      Định hướng Ethereum trong 10 phútĐịnh hướng Ethereum 10 phút

      Định hướng Ethereum trong 10 phút
    Mike Owergreen Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    map