Báo cáo thực tập lập trình website với nextjs

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH WEBSITE VỚI NEXTJS Cơng ty thực tập : CƠNG TY TNHH AIOZ VIỆT NAM Người phụ trách : Lê Minh Quang Thực tập sinh : Nguyễn Thành Đạt TP Hồ Chí Minh, tháng năm 2023 LỜI MỞ ĐẦU Ngày nay, lập trình website phận khơng thể thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vơ mạnh mẽ, ngành lập trình web nhân tố kích thích phát triển công nghệ thông tin giới, phần cứng phần mềm Bên cạnh phát triển mạnh mẽ Blockchain xuất Dapp làm thay đổi mạnh mẽ mảng lập trình website Vì muốn tìm hiểu sâu blockchain Dapp, em định chọn lập trình website làm định hướng cho việc học tập việc làm sau Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm việc môi trường chuyên nghiệp, em có dự định thực tập vào khoảng thời gian cuối kì học thứ đầu kì học thứ Vì vậy, sau tham gia vấn số công ty, em định chọn công ty TNHH AIOZ VIỆT NAM môi trường lý tưởng, đại, chuyên nghiệp, trẻ trung nơi giúp em thực dự định LỜI CẢM ƠN Trân trọng gửi lời cảm on đến Công Ty TNHH AIOZ VIỆT NAM tạo điều kiện cho em có hội thực tập cơng ty Nhờ giúp đỡ nhiệu tình thành viên nhóm Front-end em tiếp thu nhiều kiến thức trình phát triển xây dựng website thực tế kiến thức mẻ blockchain Đặt biệt cảm ơn anh Lê Minh Quang hỗ trợ, giúp đỡ, hướng dẫn em nhiều thứ để em làm nên sản phẩm hoàn thiện Nguyễn Thành Đạt TP.HCM, ngày 04 tháng 07 năm 2023 NHẬN XÉT CỦA KHOA Mục lục Chương Giới thiệu công ty thực tập 1.1 Giới thiệu công ty TNHH AIOZ VIỆT NAM .6 1.2 Sản phẩm công ty Chương Nội dung thực tập .7 2.1 Tìm hiểu cơng ty kỹ công ty .7 2.2 Nghiên cứu kỹ thuật 2.3 Thực Project 2.4 Lịch làm việc Chương Chi tiết dự án .12 3.1 Giới thiệu dự án 12 3.2 Thực 12 3.3 Kế hoạch triển khai 12 Chương Tổng kết 16 Tài Liệu Tham Khảo 17 Chương 1.Giới thiệu công ty thực tập 1.1 Giới thiệu công ty TNHH AIOZ VIỆT NAM Là công ty Blockchain giải vấn đề phức tạp đời sống cách áp dụng công nghệ tiên tiến lĩnh vực Blockchain Trí tuệ nhân tạo (AI) 1.2 Sản phẩm công ty - Blockchain AIOZ Network Blockchain Media Web3 Cơ sở hạ tầng, sử dụng tài nguyên dư thừa tất máy tính tồn giới để xây dựng DCDN hiệu với tốc độ giao hàng tối ưu, chi phí thấp chất lượng phát trực tuyến cao - DCDN AIOZ Node App - AIOZ Network Blockchain Explorer: khám phá giao dịch, khối liệu cho AIOZ Network Blockchain - AIOZ Tube: Nền tảng video phi tập trung xây dựng AIOZ Blockchain Chương 2.Nội dung thực tập Đợt thực tập với chủ đề “Lập trình website với Nextjs” nhằm mục đích giúp sinh viên thực tập đào tạo kiến thức blockchain xây dựng nên website hoàn chỉnh tương tác với blockchain cụ thể website NFT Marketplace, đồng thời rèn luyện kỹ mềm làm việc nhóm, giao tiếp 2.1 Tìm hiểu công ty kỹ công ty - Thời gian: ngày - Nội dung: Giới thiệu công ty, cách tổ chức công ty o Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triển (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty o Giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… o Ngồi sinh viên cịn giới thiệu định hướng phát triển công ty tương lai - Kết quả: Hiểu thêm cơng ty AIOZ, q trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm 2.2 Nghiên cứu kỹ thuật 2.2.1 Các công cụ làm việc - Thời gian: ngày - Nơi dung: Tìm hiểu công cụ sử dụng trình làm việc Trong thời gian này, sinh viên hướng dẫn tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số IDE Visual Studio Code – trình soạn thảo, biên tập lập trình mã nguồn miễn phí, Git – hệ thống quản lý phiên phân tán, Slack – công cụ hỗ trợ nhắn tin, trao đổi, chia sẻ tài liệu - Thực hiện: Thực hành sử dụng phần mềm nêu - Kết quả: Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp cơng cụ với nhau, so với việc dung IDE 2.2.2 Tìm hiểu BlockChain - Thời gian: ngày - Nội dung: Tìm hiểu khái niệm blockchain là: o Khái niệm blockchain o Các tính chất o Cách hoạt động o Cơ chế đồng thuận Proof of Word, Proof of Stake o Tìm hiểu Ethereum o Cách hoạt động Ethereum o Tìm hiểu SmartContract o Khái niệm Web3 o Cấu trúc cách hoạt động Web3 - Thực hiện: Tìm hiểu cách mục nêu trên, thực hành SmartContract thực tế mạng Etherum, Aioz Network - Kết quả: Hiểu nắm rõ kiến thức blockchain, thực tương tác blockchain 2.2.3 Tìm hiểu Nextjs thư viện Material UI, Etherjs - Thời gian: ngày - Nội dung: Tìm hiểu kiến thức Nextjs để tạo nên website, đồng thời sử dụng thư viện Material UI để tinh chỉnh giao diện o Các khái niệm Nextjs: cấu trúc project Nextjs, khái niệm React Hooks, State Management (Redux), Form (React Hook Form), validation (Yup, Zod) … o Cách sử dụng Material UI là: cách thiết lập project với Material UI, sử dụng thành phần có sẵn như: Box, Stack, TextField, cách tinh chỉnh thành phần… o Cách sử dụng Etherjs: cách thiết project với Etherjs, sử dụng cách hàm có sẵn gọi kết nối với ví, lấy providers, gọi transaction… - Thực hiện: Tìm hiểu thực hành nội dung nêu - Kết quả: Nắm rõ kiến thức nêu trên, thực hành tạo nên mini project áp dụng kiến thức nêu 2.3 Thực dự án - Sau buổi training thực hành, thực tập sinh tham gia vào dự án Website buôn bán NFT công ty - Chi tiết project nêu phần bên 2.4 Lịch làm việc Tuầ Công việc n Người Mức Nhận xét hướn độ g dẫn hoàn người thành hướng dẫn - Tìm hiểu cơng ty, cách tổ chức công ty Lê 100% - Làm quen với công cụ làm việc Minh - Học cách trao đổi làm việc qua mail, slack - Tìm hiểu kiến thức blockchain, dapp, Quang Lê 100% ethereum, smartcontract Minh - Tìm hiểu Nextjs, thư viện Material UI, Quang Etherjs - Tham gia vào dự án xây dựng website buôn Lê bán NFT sử dụng Nextjs, Material UI Minh - Xây dựng cấu trúc dự án, cài đặt thư Quang 100% viện cần thiết - Thiết kế xây dựng thành phần giao diện có thiết kế như: Button, Input, Container, … - Xây dựng giao diện trang kết nối ví Lê - Phát triển chức hỗ trợ kết nối Metamask, Minh Coinbase wallet, Walletconnect - Xây dựng giao diện chức trang tạo Quang Lê 100% NFT Minh - Xây dựng giao diện chức trang Quang Lê 100% người dùng kết nối ví Minh - Xây dựng giao diện chức trang chi tiết Quang Lê 100% NFT Minh 100% - Xây dựng giao diện chức trang chủ Quang Lê 100% tìm kiếm Minh - Phát triển chức mua, bán NFT Quang Lê 100% Minh 10 - Reponsive website Quang Lê 100% Minh 11 12 - Được người hướng dẫn xem xét yêu cầu Quang Lê 100% chỉnh sửa phần chưa tốt Minh - Kiểm thử sửa lỗi tồn webiste bao gồm Quang giao diện tính - Báo cáo dự án Lê Minh Quang 100% Chương 3.Chi tiết dự án 3.1 Giới thiệu dự án Nhận thấy tiềm NFT (Non-fungible token) tương lai website buôn bán NFT bàn đạp cho phát triển sau Nên công ty định xây dựng NFT Marketplace 3.2 Thực Thành viên thực bao gồm: - Nguyễn Thành Đạt (thực tập sinh) - Lê Minh Quang (người hỗ trợ giám sát) Và giúp đỡ tận tình anh chị khác cơng ty AIOZ VIỆT NAM 3.3 Kế hoạch triển khai 3.3.1 Giai đoạn lên ý tưởng đề xuất tính - Nội dung: o Tìm hiểu tham khảo website tương tự, tìm hiểu cơng nghệ o Đề xuất tính cốt lõi website trình bày, giải thích - Kết quả: o Hình dung luồng hoạt động website o Đề xuất đầy đủ tính NFT Marketplace thị trường o Biết nên sử dụng công nghệ vào website hướng phát triển 3.3.2 Giai đoạn dựng khung sườn - Nội dung: o Xây dựng khung sườn cho dự án cấu trúc thư mục, file mẫu, … o Cài đặt thiết lập library cần thiết (etherjs, materialui, redux…) o Xây dựng khung thành phần giao diện dựa thiết kế có sẵn o Xây dựng trang chứa thành phần giao diện tạo - Kết quả: o Hoàn thành dựng nên khung sườn án, cài đặt library cần thiết thiết lập chúng o Xây dựng toàn thành phần giao diện cần thiết dựa thiết kế giao diện Button (disabled, hover), Container, Input, … 3.3.3 Giai đoạn phát triển giao diện tính STT Nội dung - Được hướng dẫn bước đầu xây dựng giao diện Kết - Hoàn thành giao diện trang kết nối ví như: cách clean code, cách tổ tính kết nối ví chức component, xây dựng services, hook, … - Hiểu cách tổ chức - Sau hướng dẫn tiến hành xây dựng code dự án thực tế giao diện trang kết nối ví - Biết cách đọc hiểu - Được hướng dẫn đọc hiểu SDK hỗ trợ kết sử dụng SDK nối ví - Sau hướng dẫn tiến hành phát triển chức kết nối ví Metamask, CoinbaseWallet, WalletConnect - Xây dựng giao diện trang tạo NFT - Hoàn thành giao diện - Được hướng dẫn rõ dạng SmartContract tính trang tạo NFT Erc721 Erc1155 - Hiểu chuẩn - Được hướng dẫn tìm hiểu kiến thức đưa SmartContract, hệ thống file lên hệ thống tập tin phân tán ngang hàng tập tin phân tán ngang - Phát triển chức tạo hỗ trợ chuẩn Erc721 hàng Erc1155 - Biết cách sử dụng thư - Được hướng dẫn tìm hiểu validate form viện validate form thư viện như: yup, react-hook-form, … - Biết cách gọi - Được hướng dẫn cách gọi SmartContract từ SmartContract blockchain - Xây dựng giao diện trang cá nhân địa - Hoàn thành việc xây dựng ví giao diện phát triển tính - Được hướng dẫn cách gọi lấy thông tin từ trang cá nhân blockchain địa ví - Phát triển chức trang cá nhân địa ví gồm: o Xem NFT địa ví o Thơng tin địa ví, NFT, … - Xây dựng giao diện trang xem thông tin chi tiết - Hoàn thành việc xây dựng NFT giao diện phát triển tính - Phát triển tính trang gồm số tính trang xem thông tin sau: chi tiết NFT o Xem thơng tin NFT (tên, địa Contract, hình ảnh, mơ tả, chủ sở hữu …) o Lịch sử giao dịch o … - Xây dựng giao diện trang tìm kiếm trang chủ - Hoàn thành việc xây dựng - Phát triển tính trang gồm số tính giao diện phát triển tính sau: trang tìm kiếm o Tìm kiếm danh sách NFT trang chủ o Tìm kiếm địa ví o Tìm kiếm Collection o Trang chủ hiển thị thơng tin NFT bật thông tin khác - Được hướng dẫn rõ số kiến thức cần thiết - Hoàn thành phát triển trước bắt đầu phát triển chức mua bán chức mua bán - Sau hướng dẫn tiến hành phát triển chức mua bán NFT - Được hướng dẫn kiến thức cần thiết - Hoàn thành reponsive responsive website website - Sau hướng dẫn tiến hành reponsive - Biết cách responsive website - Build website gửi cho người hướng dẫn website - Ghi lại toàn - Được người hướng dẫn preview toàn thực đánh giá người hướng tập sinh ghi lại tất chỗ cần dẫn sửa chữa - Tiến hành sửa lỗi cải thiện tính - Hồn thành kiểm thử yêu cầu cải thiện cải thiện chỗ chưa - Kiểm thử sửa lại lại toàn website giao hoàn thiện diện tính 3.3.4 Giai đoạn nghiệm thu kết báo cáo - Dựa yêu cầu mà dự án đề giúp đỡ người thực tập sinh hoàn thành website NFT Marketplace với giao diện tương đối tốt đầy đủ tính cốt lõi đề - Ngồi thực tập sinh q trình phát triển đề số tính phù hợp với trình phát triển tương lai dự án - Sau trình tháng thực tập, thực tập sinh có buổi trình bày trình thực tập, dự án thực trình thực tập với anh chị cấp Chương 4.Tổng kết - Như vậy, vòng tháng ngắn ngủi, thực tập sinh kịp hoàn thành website tương đối hoàn chỉnh Website có đầy đủ tính đề ban đầu Do thời gian có hạn nên giao diện website cịn đơn giản, hình ảnh chưa đẹp mong đợi Nhưng website phát triển theo kiến trúc có tính kế thừa, dễ dàng mở rộng nên sau có thời gian phát triển lên mức cao - Chân thành cảm ơn giúp đỡ anh chị công ty AIOZ VIỆT NAM q trình thực tập để hoàn thành dự án Tài Liệu Tham Khảo [1] Vercel, "Next.js documentation," [Online] Available: https://nextjs.org/docs [2] MarterialUI, "Material UI - Overview," [Online] Available: https://mui.com/materialui/getting-started/overview/ [3] W3Schools, "W3Schools Online Web Tutorials," [Online] Available: https://www.w3schools.com/ [4] Ethers, "Documentation - Ethers.js," [Online] Available: https://docs.ethers.org/v5/ [5] Binance, "Binance Academy," [Online] Available: https://academy.binance.com/en/glossary/blockchain [6] Coin98, "Coin98 Insights," [Online] Available: https://coin98.net/ [7] Solidity, "Solidity Document," [Online] Available: https://docs.soliditylang.org/en/v0.8.20/ [8] U Bob, "The Clean Architecture," 13 08 2022 [Online] Available: https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html [9] TypeScript, "TypeScript Document," [Online] Available: https://www.typescriptlang.org/ [10] ReactJs, "React Document," [Online] Available: https://react.dev/ [11] Ethereum, "Ethersan," [Online] Available: https://etherscan.io/ [12] Ethereum, "Ethereum Document Developer," [Online] Available: https://ethereum.org/vi/developers/docs/