Thông tin tài liệu
University of Information Technology Faculty of Computer Networks and Communications BÁO CÁO Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Môn học: Đồ Án Chuyên Ngành Giảng viên hướng dẫn: ThS Trần Tuấn Dũng Lớp: NT114.N11.ATCL Nhóm sinh viên thực Cao Thị Bích Phượng 19522058 Đồn Thị Thanh Nhàn19521929 Nguyễn Hoàng Hiệu 19521503 TP.HCM, tháng 12 năm 2022 ĐÁNH GIÁ LỜI CẢM ƠN LỜI MỞ ĐẦU MỤC LỤC NỘI DUNG CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI I Lý chọn đề tài II Mục tiêu nghiên cứu .1 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT I Công nghệ Blockchain 1.1 Khái niệm blockchain 1.2 Cấu trúc khối blockchain 1.3 Cách thức hoạt động 1.4 Tính chất blockchain 1.5 Ưu điểm nhược điểm blockchain 1.6 Các ứng dụng bật blockchain II Giao dịch NFT 2.1 Khái niệm NFT 2.2 Cách thức hoạt động của NFT 2.3 Các tính chất NFT .6 2.4 Ứng dụng NFT III Công nghệ Web 3.0 3.1 Định nghĩa 3.2 Sự phát triển Công nghệ Web 3.0 3.3 Cách thức hoạt động Web 3.0 3.4 Cách tính Web 3.0 10 3.5 Ưu nhược điểm Web 3.0 10 IV Xây dựng ứng dụng web 12 4.1 ReactJS .12 4.2 NextJS .17 4.3 TailwindCSS .19 4.4 PosgreSql 19 4.5 Vercel platform 21 CHƯƠNG 3: TRIỂN KHAI 23 TÀI LIỆU THAM KHẢO 24 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS 1 4 NỘI DUNG CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI I II Lý chọn đề tài Mục tiêu nghiên cứu Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS CHƯƠNG 2: CƠ SỞ LÝ THUYẾT I Công nghệ Blockchain 1.1 Khái niệm blockchain Blockchain (chuỗi khối), tên ban đầu block chain sở liệu phân cấp lưu trữ thông tin khối thông tin liên kết với mã hóa mở rộng theo thời gian Mỗi khối thông tin chứa thông tin thời gian khởi tạo liên kết tới khối trước đó, kèm theo thông tin liệu giao dịch Blockchains biết đến nhiều với vai trò quan trọng chúng hệ thống tiền điện tử, chẳng hạn Bitcoin, để trì hồ sơ giao dịch an toàn phi tập trung Sự đổi với blockchain đảm bảo tính trung thực bảo mật ghi liệu tạo tin cậy mà không cần đến bên thứ ba đáng tin cậy Một điểm khác biệt sở liệu điển hình blockchain cách liệu cấu trúc Một chuỗi khối thu thập thông tin với thành nhóm, gọi khối , chứa tập hợp thơng tin Các khối có khả lưu trữ định lấp đầy, đóng lại liên kết với khối lấp đầy trước đó, tạo thành chuỗi liệu gọi blockchain Tất thông tin theo sau khối thêm biên dịch thành khối hình thành, sau thêm vào chuỗi sau lấp đầy Cấu trúc liệu tạo dòng thời gian thay đổi liệu thực theo chất phi tập trung Khi khối lấp đầy thơng tin, đặt khối trở thành phần dòng thời gian Mỗi khối chuỗi cung cấp dấu thời gian xác thêm vào chuỗi 1.2 Cấu trúc khối blockchain Cấu trúc blockchain gồm phần chính: Khối (block) khối chứa liệu chuỗi (chain) khối liên kết lại với tạo thành chuỗi Về khối chứa thông tin sau: Dữ liệu (Data): Dữ liệu khối phụ thuộc vào loại lockchain, ví dụ blockchain bitcoin chứa thông tin giao dịch thông tin người gửi, người nhận tiền số bitcoin giao dịch; blockchain bảo hiểm y tế lưu trữ thông tin đối tượng hưởng bảo hiểm, lịch sử sức khỏe đối tượng đó, … Mã băm (Hash): Dùng để nhận dạng khối liệu Mã nhất, tương tự dấu vân tay Bất kỳ thay đổi khối mã băm thay đổi; Mã băm đối chiếu (Hash of previous block) tạo thành chuỗi Bất thay đổi khối khiến khối không phù hợp Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Hình 1: Cấu trúc block Hình 2: Cấu trúc blockchain 1.3 Cách thức hoạt động Mục tiêu blockchain cho phép thông tin kỹ thuật số ghi lại phân phối, không chỉnh sửa Theo cách này, blockchain tảng cho sổ bất biến ghi giao dịch khơng thể bị thay đổi, xóa phá hủy Đây lý blockchain cịn gọi cơng nghệ sổ phân tán (DLT) Nhìn vào ví dụ để hiểu rõ blockchain Với khối khối khởi điểm, khối tạo nên từ thông tin khối mã hash khối 1, khối tạo nên từ thông tin khối mã hash khối Như vậy, hacker công thay đổi thơng tin khối khối thứ khối khơng cịn phù hợp hay nói cách khác mối liên hệ mã băm đối chiếu bị sai, để mã băm đối chiếu không bị sai lệch, hacker phải thay đổi mã băm khối đằng sau, điều khơng khả thi chuỗi block lớn Với thiết kế này, Blockchain giúp chống lại việc thay đổi liệu Về nguyên tắc, liệu ghi vào Blockchain khơng có cách thay đổi liệu Ngồi ra, Blockchain cịn trang bị thêm phương tiện thuật tốn đồng thuận, Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS có 02 loại thuật toán đồng thuận triển khai phổ biến: Thuật tốn chứng cơng việc (PoW) thuật tốn chứng cổ phần (PoS) 1.4 Tính chất blockchain Những đặc điểm cơng nghệ Blockchain là: 1.5 Không thể làm giả, phá hủy: theo lý thuyết có máy tính lượng tử giải mã Blockchain cơng nghệ Blockchain biến khơng cịn Internet tồn cầu Bất biến: liệu Blockchain sửa (có thể sửa để lại dấu vết) lưu trữ mãi Bảo mật: thông tin, liệu Blockchain phân tán an toàn tuyệt đối Minh bạch: theo dõi liệu Blockchain từ địa tới địa khác thống kế tồn lịch sử địa Hợp đồng thơng minh: hợp đồng kỹ thuật số nhúng vào đoạn code if-thisthen-that (IFTTT), cho phép chúng tự thực thực thi mà không cần bên thứ ba (Savjee, 2017) Ưu điểm nhược điểm blockchain Ưu điểm: Cải thiện độ xác cách loại bỏ tham gia người vào q trình xác minh Giảm chi phí cách loại bỏ xác minh bên thứ ba Phi tập trung làm cho việc giả mạo trở nên khó Giao dịch an toàn, riêng tư hiệu Công nghệ minh bạch Cung cấp giải pháp thay ngân hàng cách để bảo mật thông tin cá nhân cho công dân quốc gia có phủ khơng ổn định phát triển Nhược điểm: Chi phí cơng nghệ đáng kể liên quan đến khai thác bitcoin Giao dịch thấp giây Lịch sử sử dụng hoạt động bất hợp pháp, chẳng hạn web đen Quy định thay đổi tùy theo thẩm quyền không chắn Giới hạn lưu trữ liệu 1.6 Các ứng dụng bật blockchain Blockchain đảm bảo nhờ cách thiết kế sử dụng hệ thống lưu trữ phân cấp với khả chịu lỗi cao Vì Blockchain phù hợp để ghi lại kiện, hồ sơ y tế, xử lý giao dịch, công chứng, danh tính chứng minh nguồn gốc,… Cơng nghệ có tiềm Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS giúp chống lại việc liệu bị thay đổi, xử lý vấn đề thiếu tính minh bạch bối cảnh thương mại tồn cầu II Giao dịch NFT 2.1 Khái niệm NFT NFT viết tắt Non-fungible Token, loại token có tính độc khơng thể bị thay token khác Đây tài sản ảo phiên mã hóa tài sản giới thực Vì NFT chúng khơng thể hốn đổi cho nhau, nên chúng hoạt động chứng xác thực quyền sở hữu lĩnh vực kỹ thuật số Nói theo cách khác, NFT loại tài sản kỹ thuật số có chứa thơng tin quyền sở hữu lưu giữ blockchain NFT ứng dụng nhiều nghệ sĩ, họa sĩ hay nhà phát triển game để token hóa sản phẩm biến chúng trở thành 2.2 Cách thức hoạt động NFT NFT dạng chữ ký số lưu giữ blockchain, công nghệ tương tự cách mà tiền mã hóa (cryptocurrency) hoạt động Các chứng số (token) đại diện cho tài sản liên kết tác phẩm nghệ thuật số đóng vai trị xác thực tài sản phiên gốc Đó file ảnh tĩnh, ảnh động, nhạc hay loại tệp tin kỹ thuật số NFTs đời phương pháp đăng ký quyền sở hữu tài sản đặc biệt, bao gồm tranh ảnh nghệ thuật, vật phẩm game… Tài sản số trở thành NFT đánh dấu blockchain, nhờ gán thêm đoạn hash mã hóa đặt biệt Khi tài sản coi tokenized (xác thực số) Nhờ đó, xác minh độ tin cậy tài sản quyền sở hữu tài sản đó, khiến cho việc làm giả tài sản trở nên bất khả thi NFT cho phép bạn xác thực quyền sở hữu gốc với tài sản số có hàng triệu khắp nơi mạng Internet Khi mua NFT, bạn mua lại chứng thực quyền sở hữu tài sản NFT thường ứng dụng ngành cơng nghiệp hàng hóa sưu tầm Một ví dụ đặt biệt NBA Top Shot, tảng cho phép trao đổi hình ảnh, video game điểm nhấn trận đấu NBA Khi mua tệp liệu này, người mua trở thành chủ sở hữu ‘khoảnh khắc’ ấn tượng nói Các chuẩn token NFT Nói chuẩn phát hành, thông thường Ethereum blockchain, token phổ biến ERC20 Nhưng NFT, nhiều chuẩn áp dụng, bật ERC-721 ERC-1155: ERC-721: Với NFT token mới, nhà phát triển phải triển khai smart contract mới, điều gây lãng phí tài ngun tốn cơng xây dựng Ứng dụng: CryptoKitities, CryptoPunks, Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS 3.3Cách thức hoạt động Web 3.0 Web 3.0 hoạt động thông qua giao thức phi tập trung, khối sáng lập blockchain công nghệ tiền điện tử , nên mong đợi hội tụ mối quan hệ cộng sinh mạnh mẽ ba công nghệ lĩnh vực khác Chúng tương tác, tích hợp liền mạch, tự động thơng qua hợp đồng thông minh sử dụng để cung cấp lượng cho thứ từ giao dịch vi mô Châu Phi, lưu trữ chia sẻ tệp liệu P2P chống kiểm duyệt với ứng dụng Filecoin để thay đổi hoàn toàn hành vi hoạt động kinh doanh công ty Một loạt giao thức DeFi phần tảng băng chìm Mục đích Web 3.0 cung cấp thông tin cá nhân hóa có liên quan nhanh hơn, thơng qua việc sử dụng AI kỹ thuật máy học tiên tiến Các thuật tốn tìm kiếm thơng minh phát triển phân tích Dữ liệu lớn có nghĩa máy móc hiểu đề xuất nội dung cách trực quan Web 3.0 tập trung vào quyền sở hữu người dùng nội dung hỗ trợ cho kinh tế kỹ thuật số truy cập Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Bằng cách ghi lại hoạt động người dùng Blockchain, Web 3.0 giúp người dùng sử dụng liệu tồn mơi trường mạng lưới liên thông trang web tài khoản Web3 cho phép nâng cao quyền riêng tư, tăng cường tính minh bạch, loại bỏ bên trung gian, tạo điều kiện cho quyền sở hữu liệu giải pháp nhận dạng kỹ thuật số Web 3.0 ví von sở liệu khổng lồ, có khả truy cập tìm kiếm thơng tin Internet để trả lời cho câu hỏi bạn Có thể biết thứ bạn giống người cố vấn trợ lý đồng hành bạn lúc Bên cạnh đó, cơng nghệ blockchain cho phép thực nhiều giao dịch tương tác trực tuyến trực tiếp mà không cần đến dịch vụ, máy chủ trung gian 3.4Cách tính Web 3.0 Trí tuệ nhân tạo AI Web 3.0 dựa công nghệ NLP cho phép máy tính hiểu rút ý nghĩa từ viết nói nhằm hỗ trợ kiểm duyệt mà khơng có tham gia người Nhờ việc xác minh thông tin khách quan công Blockchain Blockchain chuỗi khối, theo khối bao gồm mật mã, dấu thời gian liệu giao dịch khối trước đó, khơng thể thay đổi Do đó, thông tin bảo mật phân phối cách đa dạng Tính phổ biến Thay phụ thuộc vào công ty công nghệ lớn, Web 3.0 tính phổ biến khắp nơi nhờ vào hàng nghìn máy tính tự trị, tính khả dụng ngoại tuyến, tính tốn biên cơng nghệ khác giúp giảm thời gian chết giúp hệ thống chạy 24/7 Đồ hoạ 3D Quá trình chuyển đổi tự nhiên từ đồ họa 2D sang 3D coi phần công nghệ Web 3.0 Cùng với máy học NLP, web khơng gian hợp giới ảo với thực tế cách sử dụng cơng nghệ AR / VR, kính thơng minh, tự động cảm biến 3.5Ưu nhược điểm Web 3.0 Ưu điểm: Phi tập trung, không cần trung gian Được xây dựng phát triển công nghệ Blockchain, ứng dụng Web3 có giao dịch, trao đổi trực tiếp, ngang hàng không thông qua kiểm sốt cá nhân, tổ chức Trong Web 2.0 nay, liệu thông tin lưu trữ tảng nhà phát triển, giới Web3 thông tin tìm thấy nhiều nơi, hồn tồn phân cấp khơng thơng qua bên trung gian Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Đáng tin cậy Các liệu cá nhân bạn hồn tồn kiểm sốt bảo mật Dường khơng thể có cách để hacker xâm nhập mạng lưới lấy tài sản bạn trừ bạn để lộ cụm từ khoá hay mật ví Lấy trộm liệu cá nhân người dùng điều bất khả thi hacker, hack tồn internet giới, điều phi thực tế Tự quản lý Bất kì tham gia Web3, thơng tin, liệu bạn tự quản lý nắm giữ, không xâm nhập đánh cắp hay làm lộ bí mật riêng tư bạn không muốn Điều trái ngược hẳn với tảng Facebook hay Google, nới người dùng hồn tồn chịu kiểm sốt mặt liệu cá nhân máy chủ tảng Phân tán mạnh mẽ Các ứng dụng hay tảng Web3 khơng có máy chủ trung tâm hệ thống web tập trung Chúng tồn song hành liên tục ngày đêm Sự cố điện thiên tai, hay máy chủ bị phá hoại từ hacker dẫn đến sập hệ thống máy chủ web không làm ảnh hưởng trải nghiệm bạn giới Web3 Trạng thái liệu Thơng tin, trị chơi, viết, tác phẩm mà bạn ưa thích, nội dung tin nhắn hay liệu khác Web 3.0 tồn chừng Internet giới cịn hoạt động, khơng có quyền truy cập để sửa đổi hay xố bỏ Nó tồn mãi theo thời gian bạn dễ dàng truy xuất lúc Nhược điểm: Dữ liệu rác khổng lồ Do mạng lưới phi tập trung, phân quyền, nên liệu web3 đưa lên cách ạt đơi có nhiều thơng tin khơng có giá trị hay tin rác, lưu trữ mạng lưới Điều gây nên trải nghiệm khơng tốt người dùng Bên cạnh thông tin không phù hợp với lứa tuổi, nội dung không lành mạnh (18+, bạo lực, chiến tranh…v.v.) vấn đề nhức nhối cần xử lý Một liệu on-chain, tồn vĩnh viễn khơng làm Các vấn đề pháp lý Hãy thử tưởng tượng tảng Internet mà khơng kiểm sốt nội dung hay vấn đề nhạy cảm trị, tôn giáo, chiến tranh…v.v rào cản lớn để Web3 phát triển mạnh mẽ tương lai Tội phạm khơn gian mạng, ngơn từ kích động thù địch thông tin sai lệch trở nên nghiêm trọng cấu trúc phi tập trung thiếu kiểm sốt Một web phi tập trung làm cho việc thực thi quy định pháp lý trở nên khó khăn quốc gia sở Hãy thử tưởng tượng, luật quốc gia Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS áp dụng cho trang web có nội dung lưu trữ nhiều quốc gia giới? Điều thúc đẩy chế thời đại DAO Chưa thân thiện với người dùng Tính đến thời điểm tại, cơng nghệ Blockchain nói chung web3 nói riêng cịn bước đường tạo dựng niềm tin ứng dụng thực tiễn sống người Các tính năng, cách sử dụng, dương cịn phức tạp khó hiểu số phận người già hay người khơng thực am hiểu cơng nghệ Các tính địi hỏi người dùng phải có lượng kiến thức định công nghệ Internet Có thể lương lai, hệ web chuyển đổi bước theo hướng, phi tập trung phần trước chuyển hẳn sang phi tập trung để dễ dàng tiếp cận với người Khả mở rộng Chính thơng tin, liệu lưu trữ vĩnh viễn mạng lưới Web3, điều khiến cho gánh nặng lưu trữ theo thời gian vấn đề đáng để lưu tâm xử lý Nếu thời gian xử lý giao dịch hay tải liệu chậm dần theo thời gian, điều gây tác dụng ngược tới trải nghiệm người dùng Một số giải pháp đưa Blockchain dự án Mina Protocol, xem blockchain nhẹ giới, dễ dàng lưu trữ, hay tải liệu cách nhẹ nhàng thoải mái Tốc độ xử lý Do phải chạy nút xác thực, dựa tính blockchain, điều dẫn tới việc bị ngẽn mạng khiến trải nghiệm người dùng giảm xuống IV 4.1 Xây dựng ứng dụng web ReactJS a) Định nghĩa Khoa Mạng máy tính truyền Đồ án chun ngành thơng Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS React (còn gọi React.js ReactJS) thư viện Javascript Front end nguồn mở miễn phí để xây dựng giao diện người dùng dựa thành phần UI Nó trì Meta (trước Facebook) cộng đồng nhà phát triển cơng ty cá nhân React sử dụng làm sở để phát triển ứng dụng trang , thiết bị di động máy chủ hiển thị máy chủ với khuôn khổ Next.js Tuy nhiên, React quan tâm đến việc quản lý trạng thái hiển thị trạng thái cho DOM , đó, việc tạo ứng dụng React thường yêu cầu sử dụng thư viện bổ sung để định tuyến, số chức phía máy khách định b) Thành phần (Component) React coi phần giao diện người dùng thành phần Các thành phần có trạng thái, phương thức chức riêng Chúng cho phép nhà phát triển tách giao diện người dùng thành phần cụ thể, dễ dàng kết hợp để tạo giao diện người dùng phức tạp Do đó, muốn tạo công cụ quản lý khách hàng, thành phần giao diện người dùng dành riêng để thêm khách hàng mới, thành phần khác giao diện người dùng dành riêng để hiển thị danh sách khách hàng Ở dạng đơn giản nhất, thành phần lớp hàm JavaScript Chúng nhận giá trị đầu vào gọi 'props' trả khía cạnh cụ thể giao diện người dùng dạng phần tử React Đối với số nhà phát triển, việc xác định thành phần dạng hàm đơn giản việc xác định lớp Tuy nhiên, sử dụng hai phương pháp đạt kết đầu React Thành phần lớp (Class component): Một class component phải bao gồm lệnh extends React.Component Câu lệnh tạo kế thừa cho React.Component và cung cấp quyền truy cập vào function của React.Component Component sử dụng phương thức render() để trả HTML Thành phần hàm (Function component): Tương tự class component component sử dụng hàm để thay cách sử dụng code hơn, dễ hiểu ưu tiên nhiều Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Các component tham chiếu đến component khác đầu chúng c) Cách thức hoạt động ReactJS Không giống DOM element trình duyệt, React element “Plain Object” (đối tượng đơn giản) React DOM giữ vai trò cập nhật DOM để phù hợp với React element Cách render element: Mỗi ứng dụng có DOM node gốc Giả sử ứng dụng có file HTML với thẻ có id= ”root” Để render React element vào node gốc ta cần truyền tất vào hàm ReactDOM.render() sau: Khoa Mạng máy tính truyền Đồ án chun ngành thơng Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Cách cập nhật element: Tất React element immutable Khi tạo element, ta thay đổi thành phần thuộc tính Cách để cập nhật truyền vào hàm ReactDOM.render() React so sánh element thành phần với trước cập nhật node cần thiết lên DOM thật d) Ưu nhược điểm Ưu điểm: Dễ tiếp cận: React thư viện dễ tiếp cận sử dụng lập trình viên bắt đầu học Trong mơ hình MVC (Model – View - Control) React đảm nhận nhiệm vụ ‘V’ (View) Nó hoạt động cách kết hợp HTML Javascript thuần, cú pháp React dễ hiểu Tăng tốc tải trang với Virtual DOM: React sử dụng Virual DOM (DOM ảo), render React tạo DOM ảo lưu vào nhớ, thay đổi state component DOM ảo cập nhật lại so sách với DOM ảo cũ (được đồng với DOM thật trước đó) thuật tốn ‘diffing‘, để tìm node cần thay đổi cuối cập nhật lại node DOM thật Vì q trình cập nhật lại DOM khơng bị gián đoạn làm chậm phản hồi, giúp website chạy mượt mà nhanh Tái sử dụng dễ dàng với component: React giúp lập trình viên hồn tồn sử dụng lại component khai báo trước để phát triển ứng dụng khác Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS có Đây điểm mạnh lợi ReactJS giúp lập trình viên dễ thở dự án Viết component dễ dàng với JSX: Khi nhắc đến React ta bỏ qua JSX (Javascript + XML), cú pháp mở rộng gần giống XML, người dùng lập trình React cú pháp XML thay sử dụng Javascript mà khơng làm thay đổi ý nghĩa Javascript, giúp dễ dàng định nghĩa quản lý component phức tạp việc dễ dàng đọc hiểu ý nghĩa component Dễ tích hợp kiểm thử: React thư viện giúp tạo giao diện người dùng (View) nên dễ dàng tích hợp vào framework khác Angular, BackbooneJS… React thiết kế với việc tạo component riêng lẻ, nên việc kiểm thử UI, chức đơn giản hóa theo component Bằng cách tích hợp thư viện kiểm thử Jest, Enzyme, React Testing Library … giúp cho việc kiểm thử dễ dàng Nhược điểm: Reactjs phục vụ cho tầng View React View Library khơng phải MVC framework framework khác Đây thư viện Facebook giúp render phần view Vì React khơng có phần Model Controller, mà phải kết hợp với thư viện khác React 2-way binding Ajax Tích hợp Reactjs vào framework MVC truyền thống yêu cầu cần phải cấu hình lại React nặng so với framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb Angular) Trong Angular framework hoàn chỉnh 4.2 NextJS a) Định nghĩa Next.js framework front-end React phát triển dạng open-source bổ sung khả tối ưu hóa render phía máy chủ (SSR) tạo trang web static Next.js xây dựng dựa thư viện React, có nghĩa ứng dụng Next.js sử dụng core React Khoa Mạng máy tính truyền Đồ án chun ngành thơng Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS thêm tính bổ sung Việc triển khai ứng dụng SSR cho phép máy chủ truy cập tất liệu yêu cầu xử lý JavaScript để hiển thị trang Sau đó, trang gửi lại tồn cho trình duyệt hiển thị SSR cho phép trang web load thời gian nhỏ tăng trải nghiệm người dùng với khả phản hồi nhanh b) Ưu nhược điểm Ưu điểm: Ưu điểm Next.js hỗ trợ SSR tích hợp để tăng hiệu suất SEO Với tất thông tin server, xử lý để generate thơng tin HTML trang/ Sau Client gửi yêu cầu đến Server nhận toàn trang HTML thay yêu cầu thành phần riêng lẻ với Client Render Ứng dụng Next.js tải nhanh đáng kể so với ứng dụng React render phía Server Hỗ trợ tính cho static web Đối với có kinh nghiệm làm việc với React việc tiếp tập NextJS việc dễ dàng Tự động code splitting cho page nhằm tối ưu hoá performance load trang Dễ dàng xây dựng API internal thông qua API routes tích hợp sẵn tạo endpoit API Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Hỗ trợ tích hợp cho route cho page, CSS, JSX TypeScript Nhanh chóng thêm plugin để tùy chỉnh Next.js theo nhu cầu trang cụ thể bạn Nhược điểm: Nhược điểm thực Next.js framework cố định, có nghĩa có phương pháp công cụ cụ thể mà muốn bạn sử dụng để xây dựng ứng dụng Tuy nhiên, tùy chọn Next.js phù hợp với phạm vi hầu hết dự án 4.3 TailwindCSS a) Định nghĩa Tailwind css Utility-First CSS framework hỗ trợ phát triển xây dựng nhanh chóng giao diện người dùng, có điểm chung giống Bootstrap & điểm làm bật tùy biến phát triển css theo cách mà định nghĩa b) Ưu nhược điểm Ưu điểm: Người sử dụng viết đến dịng css mà có giao diện tùy biến theo mong muốn Style, màu sắc, font chữ đại, phù hợp với phong cách web đại Sử dụng Flex nên dễ chia Layout Dễ cài đặt, dễ sử dụng, document Tailwind dễ hiểu Tailwind CSS phù hợp cho dự án nhỏ, người dùng tuỳ biến nhiều, cần làm nhanh giao diện Trong sử dụng Bootstrap mà khơng tuỳ biến web ta đậm chất Bootstrap Còn với Tailwind người dùng giao diện khác mà không đụng hàng Nhược điểm: Khoa Mạng máy tính truyền Đồ án chun ngành thơng Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Khi sử dụng tailwind bạn bạn phải sử dụng số class nhiều, số class tương ứng với với số thuộc tính mà bạn muốn cài đặt Khi dùng font-size màu sắc cịn phải custom lại css riêng Chưa có mixin muốn set nhiều thuộc tính cần thiết 4.4 PosgreSql a) Định nghĩa PostgreSQL hệ thống quản trị sở liệu quan hệ đối tượng (Object - relational Database Management System) miễn phí nguồn mở (RDBMS) tiên tiến Khả mở rộng cao tuân thủ tiêu chuẩn kỹ thuật Nó thiết kế để xử lý loạt khối lượng cơng việc lớn, từ máy tính cá nhân đến kho liệu dịch vụ Web có nhiều người dùng đồng thời b) Các tính PosgreSQL PostgreSQL tích hợp nhiều tính tuyệt vời giúp hỗ trợ nhà phát triển xây dựng app đáp ứng chức phức tạp, truy vấn nhanh chóng bảo mật trì tính tồn vẹn độ tin cậy Để đáng tin cậy hơn, PostgreSql cung cấp tùy chọn bảo mật, xác thực khôi phục thảm họa khác PostgreSql chứng minh có khả mở rộng cao số lượng liệu số lượng người dùng thao tác lúc Kiểu liệu: nguyên hàm (các nguyên số, boolean, số, chuỗi); cấu trúc (UUID, Phạm vi, Array, Date/time); Hình học; Tùy chỉnh; Document Tồn vẹn liệu: Ràng buộc loại từ, Primary Keys, Foreign Keys, UNIQUE, NOT NULL, Khóa khuyến nghị/ Advisory Locks, Khóa hàm số/ Explicit Locks,… Hiệu suất, đồng quy: Tính lập danh mục, lập danh mục nâng cao, trình lập kế hoạch, trình tối ưu hóa truy cập phức tạp, thống kê số liệu nhiều cột, quét index – only, giao tác – giao tác dạng test, điều khiển đồng thời nhiều phiên (MVCC), phân vùng bảng, truy vấn đọc song song, độ tin cậy, phục hồi sau thảm họa, nhật ký ghi trước (Write-ahead Logging – WAL), replication, khôi phục điểm – thời gian, bảng Khoa Mạng máy tính truyền Đồ án chun ngành thơng Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Chức bảo mật: Bảo mật, xác thực (SCRAM-SHA-256, SSPI, LDAP, GSSAPI, Certificate hình thức khác), hệ thống kiểm soát truy cập mạnh mẽ, bảo mật cấp độ cột – hàng Khả mở rộng: phương pháp lưu trữ, ngôn ngữ thủ tục (PL / PGSQL, Python, Perl, nhiều ngơn ngữ khác), PostGIS, tính kết nối sở liệu luồng khác với giao diện SQL chuẩn, nhiều tính mở rộng khác Tìm kiếm văn bản: Tìm kiếm văn đầy đủ, hệ thống ký tự quốc tế (thông qua ICU collations) Tính khác: Khả quản lý số lượng người dùng thao tác lúc, phù hợp với môi trường sản xuất quản lý nhiều terabyte petabyte c) Ưu nhược điểm Ưu điểm: Là chuẩn SQL phù hợp với hệ quản trị sở liệu quan hệ: PostgreSQL hệ quản trị sở liệu quan hệ mã nguồn mở, miễn phí mạnh mẽ Cộng đồng mạnh: PostgreSQL hỗ trợ cộng đồng nhiệt tình đầy kinh nghiệm Hỗ trợ mạnh mẽ từ bên thứ 3: Bất kể tính tiên tiến PostgreSQL hỗ trợ công cụ tuyệt vời bên thứ việc quản lý sơ liệu Sự mở rộng: Nó mở rộng lập trình PostgreSQL với thủ tục lưu trữ, giống RDBMS tiên tiến Đối tượng hóa: PostgreSQL khơng hệ quản trị sở liệu quan hệ, mà cịn đối tượng hóa liệu Nhược điểm: Hiệu suất: Đối với tốn tử đơn giản PostgreSQL thực hiệu so với hệ quản trị sở liệu quan hệ khác MySQL Nhưng tốn tử phức tạp PostgreSQL thực tốt nhiều Sự phổ biến: Do chưa có phổ biến nên ảnh hưởng đến người dùng nhận hỗ trợ kịp thời Hosting: Do yếu tố đề cập bên nên khó hỗ trợ host 4.5 Vercel platform Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS Vercel platform tốt, miễn phí cho phép ta build, preview deploy websites cách dễ dàng Với Vercel, ta build deploy dễ dàng cho trang web tạo kiến trúc JavaScript như: Next.js, Gatsby.js, React, Vue.js, Nuxt, Angular, không giới hạn băng thông, số lần build (thời gian), Serverless function, SSl, Ta thay đổi tên miền Vercel, thể nâng cấp để sử dụng thêm số dịch vụ nâng cao như: Hỗ trợ nhiều thành viên, tăng giới hạn, bảo vệ mật khẩu, build song song, … Khoa Mạng máy tính truyền Đồ án chun ngành thơng Học kỳ – Năm học 2022-2023 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS 1 4 CHƯƠNG 3: TRIỂN KHAI Khoa Mạng máy tính truyền Đồ án chuyên ngành thông Học kỳ – Năm học 2022-2023 1 4 Xây dựng NFT Blockchain Web 3.0 Application sử dụng NextJS TÀI LIỆU THAM KHẢO [1] https://cef.vn/tongquanblcokchain/ [2] https://www.investopedia.com/terms/b/blockchain.asp [3] https://coin98.net/nft-la-gi [4] [5] https://nextjs.org/docs [6] https://reactjs.org/docs/getting-started.html [7] https://tailwindcss.com/docs/installation [8] Đoàn Ngọc Sơn (2017) Nghiên cứu, ứng dụng cơng nghệ blockchain tốn di động Luận văn thạc sĩ, khoa Hệ thống thông tin, Trường Đại học Công nghệ - ĐHQG Hà Nội Khoa Mạng máy tính truyền Đồ án chun ngành thơng Học kỳ – Năm học 2022-2023
Ngày đăng: 21/08/2023, 15:51
Xem thêm:
