Đồ án tìm hiểu nestjs và xây dựng ứng dụng minh họa

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN TÌM HIỂU NESTJS VÀ XÂY DỰNG ỨNG DỤNG MINH HỌA Giảng viên hướng dẫn : Th.S Nguyễn Tấn Toàn Sinh viên : Trần Bảo Ân MSSV : 20520377 Lớp : SE121.N21 Thành phố Hồ Chí Minh, tháng 06 năm 2023 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp.HCM, ngày tháng năm 2023 Giảng Viên Hướng Dẫn ThS Nguyễn Tấn Toàn LỜI CẢM ƠN Trước hết, em xin gửi lời cảm ơn đến Trường Đại học Công nghệ thông tin – ĐHQGTPHCM thầy cô giảng viên khoa Công nghệ phần mềm tạo điều kiện để em hoàn thành đồ án – Chủ đề Tìm hiểu NestJS xây dựng ứng dụng minh họa Em xin gửi lời cảm ơn chân thành sâu sắc đến thầy Nguyễn Tấn Toàn giảng viên hướng dẫn trực tiếp trang bị cho em có những kiến thức vững để thực đồ án Trong khoảng thời gian thực đồ án, em học hỏi thêm nhiều kiến thức, kinh nghiệm, biết thêm nhiều công nghệ Em vận dụng những kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu những kiến thức Từ đó, em vận dụng tối đa những học hỏi để hoàn thành báo cáo đồ án Tuy nhiên, q trình thực hiện, em khơng tránh khỏi những thiếu sót Chính vậy, em mong nhận góp ý từ phía thầy, nhằm hoàn thiện những kiến thức, kĩ hành trang để em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn thầy! Tp.HCM, ngày tháng … năm 2023 Sinh viên thực Trần Bảo Ân MỤC LỤC Chương 01 Mở đầu I Thông tin người thực II Lý chọn đề tài mục tiêu III Phạm vi nghiên cứu 10 IV Đối tượng nghiên cứu 10 V Kết hướng tới 10 Chương 02 NestJS 12 I Giới thiệu chung NestJS 12 I Khái niệm quan trọng 13 Decorators 13 Pipes 14 Providers bất đồng (Asynchronous Providers) 14 Modules động (Dynamic modules) 15 Vòng đời kiện (Lifecycle events) 16 Microservices với NestJS 18 CLI 20 II Lý nên chọn NestJS 20 Chương 03 - Xây dựng Website môi giới bất động sản Katana 22 I Giới thiệu chung Website môi giới bất động sản Katana 22 Phát biểu toán hướng giải 22 Công cụ, công nghệ sử dụng 24 Danh sách yêu cầu 25 Mã nguồn 27 I Phân tích, thiết kế 28 Phân tích, thiết kế ứng dụng 28 Phân tích, thiết kế sở liệu 29 Đặc tả 31 II Triển khai 53 III Kiểm thử 63 Chương 04: Kết luận 64 Kết đạt 64 Hướng phát triển 64 TÀI LIỆU THAM KHẢO 66 TÓM TẮT (Abstract) Đồ án “Tìm hiểu NestJS xây dựng ứng dụng minh họa” tập trung vào khảo sát thực trạng doanh nghiệp nghiên cứu ứng dụng công nghệ để từ đó xây dựng Website môi giới bất động sản Katana Đề tài tập trung vào lĩnh vưc bất động sản, cụ thể giới thiệu, quảng bá dự án bất động sản, hỗ trợ khách hàng tiềm đến gần với doanh nghiệp Đề tài áp dụng kiến trúc monolithic cho phía Backend NextJS cho phía Frontend với khả mở rộng, nâng cấp cao Đề tài việc tìm hiểu thực trạng, đưa vấn đề tồn đọng cần cải thiện Xác định phạm vi, toán, mục tiêu đề tài Từ đó đưa chức cần có ứng dụng Ngoài việc xử lý nghiệp vụ cho ứng dụng, em tìm hiểu, so sánh lựa chọn công nghệ phù hợp giúp nâng cao trải nghiệm người dùng, tối ưu chi phí phát triển, triển khai, bảo trì nâng cấp Vì ứng dụng mang tính thực tiễn cao, việc u cầu thay đổi thường xuyên thời gian phát triển ngắn, trình phát triển sản phẩm vận dụng mơ hình Agile làm phương pháp luận cho qui trình phát triển phần mềm Qui trình phát triển ghi nhận công cụ Github project Kết thu giai đoạn phân tích, thiết kế mơ hình hóa UML thơng qua cơng cụ PlantUML giao diện thiết kế Figma Ở giai đoạn thực hiện, client server phát triển song song sử dụng thư viện ReactJS cho client NestJS cho server, sử dụng Visual Studio Code làm IDE Đề tài tập trung vào kiểm thử để đảm bảo chất lượng phần mềm với qui trình kiểm thử gồm unit test phía Backend viết … Frontend sử dụng Jest kết hợp với React Testing Library; manual testing for Backend using Postman Trong giai đoạn vận hành, server triển khai lên máy chủ Heroku, hoàn toàn có thể truy cập dữ liệu thông qua api từ thiết bị gửi yêu cầu có chứa trường xác thực dữ liệu hợp lệ Phần cuối đồ án trình bày kết thực lên báo cáo, đưa kết luận hướng phát triển cho ứng dụng tương lai Nội dung đồ án trình bày … chương, sau: - Chương 01 - Giới thiệu tổng quan: Xác định mục tiêu, nội dung nghiên cứu, phạm vi đề tài thông tin người thực - Chương 02 - NestJS: Giới thiệu NestJS framework, cách thức hoạt động, ưu điểm trường hợp nên sử dụng NestJS - Chương 03 - Xây dựng ứng dụng minh họa “Website môi giới bất động sản Katana” o Giới thiệu ứng dụng: ▪ Bài toán đặt ▪ Hướng giải ▪ Tổng quan công nghệ sử dụng đồ án o Phân tích u cầu: mơ hình hóa toán thành sơ đồ đặc tả o Thiết kế: đưa thiết kế kiến trúc ứng dụng, thiết kế database, thiết kế giao diện o Triển khai kiểm thử: Công cụ, công nghệ sử dụng đề tài, bước triển khai Kiểm thử đơn vị - Chương 04 - Kết luận: Những kết đạt sau kết thúc đồ án, khó khăn, hạn chế định hướng phát triển tương lai Chương 01 Mở đầu Thông tin người thực Họ tên: Trần Bảo Ân MSSV: 20520377 Email: 20520377@gm.uit.edu.vn Lý chọn đề tài mục tiêu Trong kỷ nguyên công nghệ thông tin bùng nổ ngày nay, lĩnh vực cần hỗ trợ từ phía cơng nghệ đặc biệt lĩnh vực bất động sản Đối với ngân hàng, xử lý nghiệp vụ vơ phức tạp việc xây dựng tảng hỗ trợ tính tốn vô cấp thiết Nó mang lại hàng loại lợi ích tuyệt vời, giúp cho nghiệp vụ trở nên dễ dàng nhanh chóng hết Do đó, việc xây dựng ứng dụng website hỗ trợ doanh nghiệp tăng trưởng vượt bậc Hiện nay, có nhiều ngôn ngữ, công nghệ, thư viện, framework hỗ trợ phát triển ứng dụng web cách thuận tiện nhanh chóng mà đảm bảo tính xác, tính bảo mật, tính tiện dụng nhu cầu nâng cấp, mở rộng sau Một những framework đại sử dụng phổ biến giai đoạn để xây dựng backend NestJS Javascript ngôn ngữ lập trình bậc cao có cộng đồng người sử dụng đơng đảo hàng đầu Với nhiều lợi ích to lớn mặt triển khai, cú pháp đơn giản, thực thi phía người dùng nên tăng trải nghiệm người dùng, “viết lần, thực thi khắp nơi” … Javascript lựa chọn hàng đầu nhà phát triển Tuy nhiên, để cấu hình ứng dụng Javascript mà không có hỗ trợ từ thư viện framework nhiều thời gian, công sức không cần thiết Do đó, NestJS đời nhằm Luồng Khách hàng click vào “Giới thiệu” trang chủ Hệ thống truy vấn tải nội dung hiển thị Hệ thống chuyển hướng khách hàng đến trang kết Hệ thống hiển thị kết viết Luồng thay Luồng ngoại lệ 2.3.24 Chuyển đổi ngôn ngữ Tên Use-case Mô tả Chuyển đổi ngôn ngữ Website hỗ trợ đa ngôn ngữ, trước mắt website hỗ trợ hai ngôn ngữ tiếng Anh tiếng Việt Khách hàng có thể lựa chọn ngôn ngữ phù hợp Sự kiện kích hoạt Khách hàng chọn biểu tượng ngơn ngữ trang chủ Điều kiện trước Thiết bị có kết nối Internet Điều kiện sau Luồng Khách hàng click vào biểu tượng “Quốc kì” tương ứng với ngơn ngữ quốc gia trang chủ Hệ thống truy vấn tải nội dung hiển thị Hệ thống chuyển đổi tồn sang ngơn ngữ phù hợp Luồng thay Luồng ngoại lệ 52 Triển khai Hình Giao diện trang Home 53 Hình Chi tiết giao diện trang Home – Phần Hình Chi tiết giao diện trang Giới thiệu dịch vụ Hỗ trợ tư vấn pháp lý 54 Hình Giao diện phần Giới thiệu doanh nghiệp 55 Hình Giao diện phần Liên hệ với chúng tơi 56 Hình Giao diện phần Giới thiệu dự án 57 Hình Giao diện phần biểu mẫu để lại thông tin liên hệ 58 Hình Giao diện danh sách Dự án 59 Hình Giao diện trang tin tức 60 Hình 10 Giao diện trang đăng nhập Admin Hình 11 Giao diện trang Home (Admin) Hình 12 Giao diện trang Danh sách tài sản 61 Hình 13 Giao diện trang Quản lý Danh sách viết giới thiệu dự án Hình 14 Giao diện trang Quản lý Danh sách viết tin tức 62 Hình 15 Giao diện trang Quản lý Danh sách thông tin liên hệ Kiểm thử Hệ thống trải qua kiểm thử đơn vị (Unit Test) kiểm thử chấp nhận (User Acceptance Test) 63 Chương 04: Kết luận Kết đạt Em áp dụng thành công kiến thức NestJS vào việc xây dựng website Ngoài ra, để xây dựng giao diện ứng dụng, em vận dụng thêm kiến thức ReactJS Sản phẩm cung cấp đầy đủ tính website quảng cáo cho doanh nghiệp Về mặt kiến thức, kinh nghiệm tích lũy, em ghi nhận lại kiến thức nghiên cứu vào phần báo cáo cuối kỳ giúp lập trình viên khác có thể tham khảo, sử dụng cho nghiên cứu sau Tuy nhiên, thời gian nguồn lực hạn chế nên chức website có thể nâng cấp Hướng phát triển Về mặt doanh nghiệp, có thể thực hóa thêm chức năng: - Chức chat để quản trị viên người dùng có thể tương tác trực tiếp nhanh Sẽ tiện lợi nhiều tăng trải nghiệm cho người dùng thực chức trò chuyện - Kiểm duyệt viết tự động: Kết hợp trí tuệ nhân tạo để tự động kiểm duyệt viết trước đăng tải Cụ thể ta có thể kiểm duyệt nội dung, từ ngữ văn phong phù hợp với phong mỹ tục Về mặt kĩ thuật: 64 - Back-end dự án sử dụng kiến trúc Monolithic Nếu tương lai, số lượng yêu cầu gửi xử lý nhiều, dữ liệu lưu trữ xử lý phức tạp, kiến trúc không phù hợp nữa mà nên thay Microservice NestJS hỗ trợ mạnh mẽ cho Microservice 65 TÀI LIỆU THAM KHẢO Tiếng Anh: • Pham, A.D., 2020 Developing back-end of a web application with NestJS framework: Case: Integrify Oy’s student management system • Tauda, M., Zainuddin, Z and Tahir, Z., 2021, April Programming Language Translator For Integration Client Application With Web APIs In 2021 International Conference on Artificial Intelligence and Mechatronics Systems (AIMS) (pp 1-4) IEEE • Beckmann, A., Bollmann, M., Buchholz, T., Geiser, R., Kerpen, D and Conrad, J., 2021, November Development of a Digital Collaborative Whiteboard In HCI International 2021-Late Breaking Posters: 23rd HCI International Conference, HCII 2021, Virtual Event, July 24–29, 2021, Proceedings, Part II (pp 242-248) Cham: Springer International Publishing • Maryanski, F.J., 1980 Backend database systems ACM Computing Surveys (CSUR), 12(1), pp.3-25 • Trang chủ NestJS: NestJS - A progressive Node.js framework (tài liệu dùng dự án) • Trang chủ ReactJS: React • Trang chủ NestJS: Docs | Next.js (nextjs.org) 66