{"Connection to MetaMask"}
{connButtonText}Address: {defaultAccount}
Balance: {userBalance}
{errorMessage} ); 3.1.2.3.2 Giao diện tạo sản phẩm: Chúng tạo hàm gọi thành phần React tải Bên đây, gọi hàm khởi tạo web3 Và tạo hàm loadWeb3() tạo kết nối này: async componentWillMount() { await this.loadWeb3() } async loadWeb3() { if (window.ethereum) { window.web3 = new Web3(window.ethereum) await window.ethereum.enable() } else if (window.web3) { window.web3 = new Web3(window.web3.currentProvider) } else { window.alert('Non-Ethereum browser detected You should consider trying MetaMask!') } } Chúng tạo chức tải liệu từ chuỗi khối Chúng gọi này: async componentWillMount() { await this.loadWeb3() await this.loadBlockchainData() } Chúng kết nối lưu kết nối web3 vào biến Bây giờ, tìm nạp tài khoản từ Metamask đăng nhập chúng vào bảng điều khiển sau: async loadBlockchainData() { const web3 = window.web3 10 // Load account const accounts = await web3.eth.getAccounts() this.setState({ account: accounts[0] }) const networkId = await web3.eth.net.getId() const networkData = Marketplace.networks[networkId] if(networkData) { const marketplace = web3.eth.Contract(Marketplace.abi, networkData.address) console.log(marketplace) } else { window.alert('Marketplace contract not deployed to detected network.') } Ở đây, kết nối với Metamask, tức Ganache Chúng sử dụng ID mạng để kết nối với hợp đồng thông minh triển khai mạng Ganache, thay mạng Ethereum chẳng hạn Tiếp theo, khởi tạo hợp đồng thông minh với Web3.js web3.eth.Contract() Chúng cần thông tin để thực việc này: hợp đồng thông minh ABI địa Chúng tơi tìm nạp hai thứ từ tệp mà vừa nhập Cuối cùng, chúng tơi khơng thể tìm thấy hợp đồng thơng minh mạng, thông báo cho người dùng Bạn kiểm tra điều cách chuyển sang mạng Ethereum Metamask (đừng quên chuyển ngược lại) Ta để hiển thị giao diện cuối thì: purchaseProduct(id, price) { this.setState({ loading: true }) this.state.marketplace.methods.purchaseProduct(id).send({ from: this.state.account, value: price }) once('receipt', (receipt) => { this.setState({ loading: false }) }) } render() { return ( { this.state.loading ?Loading
window.location.reload(false)}>Click to reload! : } } ); 3.1.2.3.3 Giao diện danh sách sản phẩm: Chúng tạo cách để bán sản phẩm từ trang web Marketplace Chúng thực nhiệm vụ sau: ● Tạo thành phần phản ứng giữ giàn giáo cho mã chúng tôi, bao gồm biểu mẫu cho phép người dùng liệt kê sản phẩm mới, bảng hiển thị sản phẩm để bán bảng khác để hiển thị sản phẩm thuộc sở hữu ● Chúng tơi kết nối biểu mẫu để người dùng thực liệt kê sản phẩm họ để bán chuỗi khối Để thực chúng tơi cần thêm số liệu khác vào hàm loadBlockchainData() Đầu tiên, tạo hàm JavaScript chấp nhận tham số giống chức hợp đồng thơng minh chúng tơi Sau đó, trước gọi chức hợp đồng thơng minh, chúng tơi nói với React ứng dụng "Loading" để người dùng biết chức gửi Sau đó, chúng tơi gọi chức hợp đồng thơng minh với Web3.js với this.state.marketplace.methods.createProduct(name, price).send({ from: this.state.account }) Thao tác gọi hàm cho Web3 biết tài khoản người dùng gọi Cuối cùng, nhận biên lai giao dịch, chúng tơi xóa ứng dụng khỏi trạng thái "đang tải" để người dùng biết lệnh gọi hàm hoàn tất async loadBlockchainData() { const web3 = window.web3 // Load account const accounts = await web3.eth.getAccounts() this.setState({ account: accounts[0] }) const networkId = await web3.eth.net.getId() const networkData = Marketplace.networks[networkId] if(networkData) { const marketplace = web3.eth.Contract(Marketplace.abi, networkData.address) this.setState({ marketplace }) const productCount = await marketplace.methods.productCount().call() console.log(productCount.toString()) this.setState({ loading: false}) 12 } } else { window.alert('Marketplace contract not deployed to detected network.') } Tạo chức thêm sản phẩm vào chuỗi khối cách gọi hàm createProduct() với Web3.js chúng tôt liên kết với thành phần bên hàm tạo sau: createProduct(name, price) { this.setState({ loading: true }) this.state.marketplace.methods.createProduct(name, price).send({ from: this.state.account }) once('receipt', (receipt) => { this.setState({ loading: false }) }) constructor(props) { // this.createProduct = this.createProduct.bind(this) } Thành phần bổ sung khung cho giao diện người dùng Marketplace Nó tạo biểu mẫu thêm sản phẩm vào chuỗi khối cách gọi hàm createProduct() render() { return ( Add Product { event.preventDefault() const name = this.productName.value const price = window.web3.utils.toWei(this.productPrice.value.toString(), 'Ether') this.props.createProduct(name, price) }}> { this.productName = input }} className="form-control" 13 placeholder="Product Name" required /> { this.productPrice = input }} className="form-control" placeholder="Product Price" required /> Ether Add ProductBuy Product # Name Price Owner Buy { this.props.products.map((product, key) => { if(!(product.owner === this.props.account)){ return( {product.id.toString()} {product.name} {window.web3.utils.fromWei(product.price.toString(), 'Ether')} Eth {product.owner} { this.props.purchaseProduct(event.target.name, event.target.value) 14 ) }} > Buy } else{ return null } })} Owner Product # Name Price Owner { this.props.products.map((product, key) => { if (product.owner === this.props.account) { return( {product.id.toString()} {product.name} {window.web3.utils.fromWei(product.price.toString(), 'Ether')} Eth {product.owner} ) } else{ return null } })} 15 } ); Để sử dụng thành phần ta cần khai báo App.js thêm đoạn HTML để thực thi: { this.state.loading ?
Loading
: } Chúng cho phép người dùng mua sản phẩm thị trường Chúng ta làm hai việc phần này: ● Liệt kê tất sản phẩm trang ● Cho phép người dùng mua sản phẩm đăng bán nút bấm Chúng sử dụng đệm đếm mà tạo bên hợp đồng thơng minh để xác định có sản phẩm tồn tại, sau chúng tơi sử dụng vịng lặp for để tìm nạp sản phẩm riêng lẻ lưu trữ vào đối tượng trạng thái phản ứng Với thơng tin này, chúng tơi hiển thị sản phẩm trang giây lát const productCount = await marketplace.methods.productCount().call() this.setState({ productCount }) // Load products for (var i = 1; i { this.setState({ loading: false }) }) } constructor(props) { // this.createProduct = this.createProduct.bind(this) this.purchaseProduct = this.purchaseProduct.bind(this) } 16 Chúng chuyển hai props xuống Main component: ● Tất sản phẩm liệt kê trang ● Hàm buyProduct() để gọi thành phần phụ Chúng cập nhật mã để trơng để: ● Lặp lại tất sản phẩm tạo hàng bảng cho sản phẩm ● Thêm nút để mua sản phẩm cú nhấp chuột, gọi hàm buyProduct() mà vừa tạo { this.state.loading ?Loading
: } 3.2 KẾT QUẢ THỰC NGHIỆM 3.2.1 Khởi động hệ thống Đầu tiên, ta cần khởi động Ganache kích hoạt Workspaces Marketplace: 17 Sau ta chạy lệnh “npm start” để khởi động localhost:3000 hiển thị giao diện Marketplace 18 3.2.2 Chức kết nối với ví MetaMask Click vào button Connect Wallet để kết nối: 19 3.2.3 Chức tạo sản phẩm để bán: Điền thông tin sản phẩm mục Add Product: Product Name: tên sản phẩm muốn bán Product Price: giá sản phẩm muốn bán, tính - 3.2.4 Kịch – Chức truy vấn, báo cáo … 3.3 NHẬN XÉT ĐÁNH GIÁ KẾT QUẢ Qua kết thực nghiệm, tác giả có nhận xét sau: − Vấn đề XXX − Vấn đề YYY Thống kê kết bảng, đồ thị 3.4 KẾT CHƯƠNG Chương trình bày KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN KẾT QUẢ ĐẠT ĐƯỢC Trong thời gian tìm hiểu, nghiên cứu sở lý thuyết triển khai ứng dụng công nghệ, đồ án đạt kết sau: Về mặt lý thuyết, đồ án đạt … 20 Về mặt thực tiễn ứng dụng, đồ án đạt … Kết đóng góp đồ án thể sau (trình bày đoạn có đánh số ngắn gọn xếp theo mức độ quan trọng giảm dần) Cần làm rõ nội dung kế thừa, nội dung mà tác giả đóng góp luận văn − Phát triển thuật toán nhanh nhiều cho vấn đề xxx − Xây dựng XYZ Chứng tỏ XXX − Xác định YYY Tuy nhiên, tồn vấn đề sau: − Vấn đề XXX − Vấn đề YYY KIẾN NGHỊ VÀ HƯỚNG PHÁT TRIỂN Một số số hướng nghiên cứu phát triển đề tài sau: − Bổ sung hoàn thiện số chức hệ thống … − Đánh giá hiệu môi trường khác … − Kiểm thử chức chương trình … − Bổ sung giải pháp bảo mật an toàn cho hệ thống … − … TÀI LIỆU THAM KHẢO Tiếng Việt [1] Đặng Văn Đức (2001), Hệ thống thông tin địa lý, Nhà xuất Khoa học Kỹ Thuật Hà Nội 21 [2] Phạm Hữu Đức (2005), Cơ sở liệu hệ thống thông tin địa lý GIS, Nhà xuất Xây dựng Tiếng Anh [3] Senthil Shanmugan (2004) “Digital urban management programme Evolution of Bangalore GIS model”, Proceedings of the third International Conference on Environment and Health, India [4] Teemu Nuortio, Harri Niska (2003), “Improved route planning and scheduling of waste collection and transport”, Department of Environmental Sciences, University of Kuopio, Finland Internet [5] https://magenest.com/vi/blockchain-trong-thuong-mai-dien-tu/ [6] http:// www.mapreduce.org 22 PHỤ LỤC Phần bao gồm nội dung cần thiết nhằm minh họa bổ trợ cho nội dung luận văn số liệu, mẫu biểu, tranh ảnh Phụ lục khơng dày phần luận văn Phụ lục đuợc đánh số trang tiếp với đồ án Nội dung mã nguồn 01 Nội dung mã nguồn 02 23 ... hiện/ triển khai … Phần trình bày tổng quan, tính cấp thiết đề tài, vấn đề quan trọng cần giải Mục đích ý nghĩa đề tài 2.1 Mục đích Đề tài thực với mục đích xây dựng kênh mua bán sản phẩm tảng. .. luận văn − Phát triển thuật toán nhanh nhiều cho vấn đề xxx − Xây dựng XYZ Chứng tỏ XXX − Xác định YYY Tuy nhiên, tồn vấn đề sau: − Vấn đề XXX − Vấn đề YYY KIẾN NGHỊ VÀ HƯỚNG PHÁT TRIỂN Một số... 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 3.1 MƠ HÌNH TRIỂN KHAI 3.1.1 Mơ hình triển khai 3.1.2 Cấu hình hệ thống: 3.1.2.1 Chức bán sản phẩm: 3.1.2.2 Chức mua sản phẩm: 3.1.2.3 Xây dựng trang web Marketplace: