BÁO cáo môn học KIẾN TRÚC PHÁT TRIỂN HPT đề tài xây dựng marketplace trên nền tảng ethereum

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KHOA HỌC CÔNG NGHỆ TIÊN TIẾN BÁO CÁO MÔN HỌC KIẾN TRÚC & PHÁT TRIỂN HPT ĐỀ TÀI : Xây dựng Marketplace tảng Ethereum GVHD: Lớp: SVTH: PGS TS Nguyễn Tấn Khơi 18PFIEV3 Nhóm Võ Trần Anh Khoa Đào Thị Thúy Ngân Kiều Thị Phượng Đà Nẵng, tháng 12 năm 2022 MỤC LỤC >> Chú ý: Trong mục lục nên liệt kê Heading 1, 2, CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 website website? 1.2 BLOCKCHAIN 1.2.1 BLOCKCHAIN 1.3 PHÁT BIỂU BÀI TOÁN 1.4 KẾT CHƯƠNG 3 3 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 2.1 PHÂN TÍCH HIỆN TRẠNG 2.2 PHÂN TÍCH YÊU CẦU 2.3 PHÂN TÍCH CHỨC NĂNG 2.3.1 Đối tượng sử dụng 2.3.2 Công nghệ sử dụng: 2.4 TỔ CHỨC CHƯƠNG TRÌNH 2.4.1 Tổ chức thư mục 2.4.2 Tập tin 01 2.4.3 Tập tin 02 2.4.4 Tập tin 03 2.5 KẾT CHƯƠNG 4 4 4 4 4 CHƯƠNG 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: (Frontend) 3.2 KẾT QUẢ THỰC NGHIỆM 3.2.1 Khởi động hệ thống 3.2.2 Chức kết nối với MetaMask: 3.2.3 Kịch – Chức tìm kiếm, thống kê 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Ả 3.4 KẾT CHƯƠNG 5 5 16 16 18 18 18 18 18 DANH SÁCH HÌNH ẢNH >> Canh dòng: 1.5 line DANH SÁCH TỪ VIẾT TẮT Từ viết tắt Diễn giải IP Internet Protocol MD5 Message-Degist Algorithm SHA Secure Hash Algorithm API Application Programming Interface URL Uniform Resource Locator MỞ ĐẦU Tổng quan đề tài Cơng nghệ blockchain đóng vai trị to lớn đến kinh tế toàn cầu, thương mại điện tử đón nhận nhiều ý năm gần Hiện có 22,000 cửa hàng nhỏ lẻ toàn giới cho phép khách hàng toán tiền điện tử (crypto) Khi ứng dụng blockchain vào thương mại điện tử, blockchain không tạo hội cho doanh nghiệp rút gọn quy trình kinh doanh, tiết kiệm chi phí mà cịn nâng cao bảo mật liệu trải nghiệm khách hàng Do đó, nhóm thực 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 web thực tốn Ethereum 2.2 Ý nghĩa - Giúp bảo mật Phương pháp thực Đồ án xây dựng website với: - Ngơn ngữ lập trình: HTML, CSS, JavaScript, Solidity - Thư viện hỗ trợ: Bootstrap, Web3.js, React.js - Framework: Truffle, Ethereum - Cơng cụ lập trình: Visual Studio Code - Công cụ hỗ trợ: Ganache, Node Package Manager Bố cục đồ án Đồ án bao gồm nội dung sau: - Mở đầu: gồm phần tổng quan đề tài, mục đích, ý nghĩa phương pháp thực đề tài - Chương 1: trình bày nội dung sở lý thuyết liên quan đến nội dung đồ án - Chương 2: trình bày trình bày phân tích thiết kế hệ thống - Chương 3: trình bày kết triển khai hệ thống thành phần chức - Kết luận hướng phát triển CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Chương trình bày nội dung sở lý thuyết liên quan đến nội dung đồ án Nội dung sở lý thuyết sử dụng phần phân tích triển khai chương trình Phần phát biểu tốn mơ tả nội dung vấn đề đặt Ngoài liệt kê đánh giá giải pháp có 1.1 website website? Hình 1.1 xxx 1.2 BLOCKCHAIN 1.2.1 Blockchain Blockchain hệ thống sổ an toàn bảo mật tuyệt đối giúp lưu trữ tồn thơng tin giao dịch thực thời gian cụ thể Cơng nghệ blockchain giúp người dùng chia sẻ lưu trữ tài sản số hoá, ngồi ứng dụng để xử lý tốn hay tìm kiếm sản phẩm 1.2.2 Ethereum Sau thành công Bitcoin, loại tiền điện tử khác gây tiếng vang thị trường số Ethereum Ethereum cho phép người xây dựng sử dụng ứng dụng phi tập trung dựa cơng nghệ Blockchain Nó dự án mã nguồn mở, chuyển đổi linh hoạt Bitcoin Ethereum có đặc điểm sau: - Là mạng mở; - Sử dụng mơ hình đồng thuận chứng cơng việc; - Có lượng người theo dõi Github cao; - Hỗ trợ ngôn ngữ C++, Go Python 1.3 PHÁT BIỂU BÀI TOÁN … 1.4 KẾT CHƯƠNG Chương trình bày CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Chương trình bày phân tích triển khai hệ thống, bao gồm phân tích trạng, phân tích u cầu tốn Phần trình bày nội dung thiết kế hệ thống bao gồm 2.1 PHÂN TÍCH HIỆN TRẠNG 2.2 PHÂN TÍCH U CẦU Hình 2.1 xxx 2.3 PHÂN TÍCH CHỨC NĂNG 2.3.1 Đối tượng sử dụng Đối tượng sử dụng trang web s 2.3.2 Công nghệ sử dụng: 2.4 TỔ CHỨC CHƯƠNG TRÌNH 2.4.1 Tổ chức thư mục 2.4.2 Tập tin 01 2.4.3 Tập tin 02 … 2.4.4 Tập tin 03 2.5 KẾT CHƯƠNG Chương trình bày CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ Chương trình bày kết triển khai hệ thống, cấu hình hệ thống thành phần chức Kết đánh giá thông qua kịch thực nghiệm khác nhằm thể ưu/nhược giải pháp đề xuất 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: Để tạo dựng Marketplace chúng tơi cần thứ người giao dịch sản phẩm giao dịch Chúng có tính đầu tiên, tạo sản phẩm, tính cho phép người tạo mặt hàng để bán thị trường Để làm điều đó, chúng tơi cần tạo mơ hình product với cấu trúc sau: struct Product { uint id; string name; uint price; address owner; bool purchased; } Solidity cho phép bạn tạo cấu trúc liệu riêng mình, với thuộc tính tùy ý làm cách tạo cấu trúc Product Nó lưu trữ tất thuộc tính Product cần id, name, price, owner, purchased Chúng tạo hàm để tạo sản phẩm để thực số việc: ● Tạo sản phẩm với cấu trúc ● Thêm cấu trúc vào ánh xạ lưu trữ chuỗi khối ● Kích hoạt kiện cho biết sản phẩm tạo function createProduct(string memory _name, uint _price) public { // Require a valid name require(bytes(_name).length > 0); // Require a valid price require(_price > 0); // Increment product count productCount ++; // Create the product products[productCount] = Product(productCount, _name, _price, msg.sender, false); // Trigger an event emit ProductCreated(productCount, _name, _price, msg.sender, false); } Chúng thêm định nghĩa kiện để kích hoạt: event ProductCreated( uint id, string name, uint price, address owner, bool purchased ); Những người khác lắng nghe kiện để xác minh sản phẩm tạo chuỗi khối 3.1.2.2 Chức mua sản phẩm: Ngồi chức tạo bán sản phẩm chúng tơi có chức mua sản phẩm từ người khác với thao tác đơn giản Chúng thiết lập chức để làm điều sau: function purchaseProduct(uint _id) public payable { // Fetch the product Product memory _product = products[_id]; // Fetch the owner address payable _seller = _product.owner; // Make sure the product has a valid id require(_product.id > && _product.id = _product.price); // Require that the product has not been purchased already require(!_product.purchased); // Require that the buyer is not the seller require(_seller != msg.sender); // Transfer ownership to the buyer _product.owner = msg.sender; // Mark as purchased _product.purchased = true; // Update the product products[_id] = _product; // Pay the seller by sending them Ether address(_seller).transfer(msg.value); // Trigger an event emit ProductPurchased(productCount, _product.name, _product.price, msg.sender, true); } Chúng làm cho chức phải trả tiền, có nghĩa chấp nhận tiền điện tử Ethereum Bởi chúng tơi muốn trả tiền cho chủ sở hữu, phải xây dựng cấu trúc kiện có để sử dụng loại địa phải trả này: struct Product { uint id; string name; uint price; address payable owner; bool purchased; } event ProductCreated( uint id, string name, uint price, address payable owner, bool purchased ); Chúng cần tạo kiện để bán sản phẩm Nó hoạt động gần giống kiện tạo Product mà tạo mục 3.2, ta có sau: event ProductPurchased( uint id, string name, uint price, address payable owner, bool purchased ); 3.1.2.3 Xây dựng trang web Marketplace: (Frontend) 3.1.2.3.1 Kết nối với ví Metamask: Tạo giao diện card để hiển thị thông tin kết nối với ví Metamask gồm thơng tin: Địa (Address) số dư ví (Balance) Chúng tạo hàm connectWalletHandler để kết nối với Wei ví Metamask sau: const connectWalletHandler = () => { if (window.ethereum && window.ethereum.isMetaMask) { window.ethereum.request({ method: 'eth_requestAccounts'}) then(result => { accountChangedHandler(result[0]); setConnButtonText('Wallet Connected'); getAccountBalance(result[0]); }) catch(error => { setErrorMessage(error.message); }); } else { console.log('Need to install MetaMask'); setErrorMessage('Please install MetaMask browser extension to interact'); } } Chúng xây dựng thêm hàm cập nhật địa số dư tài khoản mặc định để hiển thị Address Balance Kết trả cho hàm accountChangedHandler: // update account, will cause component re-render const accountChangedHandler = (newAccount) => { setDefaultAccount(newAccount); getAccountBalance(newAccount.toString()); } const getAccountBalance = (account) => { window.ethereum.request({method: 'eth_getBalance', params: [account, 'latest']}) then(balance => { setUserBalance(ethers.utils.formatEther(balance)); }) catch(error => { setErrorMessage(error.message); }); }; Tuy nhiên thay đổi tài khoản ví Metamask liệu khơng thể tự thay đổi sang tài khoản nên thêm số lệnh để có thay đổi ví thơng tin card tự update lại const chainChangedHandler = () => { // reload the page to avoid any errors with chain change mid use of application window.location.reload(); } // listen for account changes window.ethereum.on('accountsChanged', accountChangedHandler); window.ethereum.on('chainChanged', chainChangedHandler); Cuối return để hiển thị toàn giao diện card: return (

{"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 tơi 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 // Load account const accounts = await web3.eth.getAccounts() 10 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, nói với React ứng dụng chúng tơi "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}) } else { window.alert('Marketplace contract not deployed to detected network.') 12 } } 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" placeholder="Product Name" required /> 13 { this.productPrice = input }} className="form-control" placeholder="Product Price" required /> Ether Add Product

 

Buy 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) } Chúng chuyển hai props xuống Main component: ● Tất sản phẩm liệt kê trang 16 ● Hàm buyProduct() để gọi thành phần phụ Chúng tơi 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 … Về mặt thực tiễn ứng dụng, đồ án đạt … 20 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 [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 21 [5] https://magenest.com/vi/blockchain-trong-thuong-mai-dien-tu/ [6] http:// www.mapreduce.org 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 22 ... 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: