Tìm hiểu về reactjs springbootframework

ĐẠI HỌC QUỐC GIA TP 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 ReactJS-SpringBootFramework GVHD: ThS Nguyễn Cơng Hoan Nhóm thực hiện: Ngơ Tấn Hồi – 19520086 Lâm Văn Hồng - 19520094 TP HỒ CHÍ MINH, 2022 MỤC LỤC Chương THÔNG TIN CHUNG .6 1.1 Tên đề tài: Tìm hiểu ReactJS-SpringBootFramework 1.2 Thơng tin nhóm: .6 Chương CÔNG NGHỆ 2.1 ReactJs 2.1.1 ReactJs gì? 2.1.2 Lợi ích sử dụng ReactJs 2.2 Spring Boot 2.2.1 Spring Boot gì? 2.2.2 Lợi ích sử dụng Spring Boot 2.3 MySQL 2.3.1 MySQL gì? 2.3.2 Lợi ích sử dụng MySQL 2.4 Figma .9 2.4.1 Figma gì? 2.4.2 Lợi ích sử dụng Figma 10 2.5 NodeJs 11 2.5.1 NodeJs gì? 11 2.5.2 Lợi ích sử dụng NodeJs .11 2.6 Mailtrap 12 2.6.1 Mailtrap gì? 12 2.6.2 Các tính bật Mailtrap 12 2.7 Hardhat 12 2.7.1 Hardhat gì? 12 2.7.2 Các tính bật Hardhat 13 2.8 Ethers.js 13 2.8.1 Ethers.js gì? 13 2.8.2 Các tính bật Ethers.js 13 2.9 Alchemy .14 2.9.1 Alchemy gì? 14 2.9.2 Alchemy Build gì? 14 Chương PHÁT BIỂU BÀI TOÁN 14 3.1 Khảo sát trạng 14 3.2 Phát biểu toán 15 3.3 Yêu cầu 15 3.3.1 Yêu cầu chức .15 3.3.2 Yêu cầu phi chức .25 Chương THIẾT KẾ CƠ SỞ DỮ LIỆU 27 4.1 Sơ đồ ERD 27 4.2 Mô tả chi tiết 27 4.2.1 User 27 4.2.2 Verification_token .28 4.2.3 Refresh_token 28 4.2.4 Post 29 4.2.5 Image 29 4.2.6 Donation 30 4.2.7 Volunteer 30 Chương USE CASE 31 5.1 Sơ đồ 31 5.2 Danh sách Actor 32 5.3 Danh sách Use-case .32 5.4 Đặc tả Use-case 35 5.4.1 Đặc tả Use-case “Đăng nhập” 35 5.4.2 Đặc tả Use-case “Thông tin tài khoản” 36 5.4.3 Đặc tả Use-case “Tạo tài khoản” 37 5.4.4 Đặc tả Use-case “Các chương trình từ thiện” 38 5.4.5 Đặc tả Use-case “Chọn chương trình từ để ủng hộ” 39 5.4.6 Đặc tả Use-case “Thanh toán Crypto” 40 5.4.7 Đặc tả Use-case “Lựa chọn toán online” 42 5.4.8 Đặc tả Use-case “Đăng ký làm tình nguyện viên” 43 5.4.9 Đặc tả Use-case “Xem phân tích chương trình” 43 5.4.10 Đặc tả Use-case “Xem trang dashboard chi tiết” .44 5.4.11 Đặc tả Use-case “Xem tất chương trình quyền admin” 45 5.4.12 Đặc tả Use-case “Duyệt tình nguyện viên” .46 5.4.13 Đặc tả Use-case “Lựa chọn toán online” 47 Chương THIẾT KẾ GIAO DIỆN 48 6.1 Danh sách hình 48 6.2 Mơ tả chi tiết hình 49 6.2.1 Màn hình 49 6.2.2 Màn hình danh sách chương trình từ thiện 50 6.2.3 Màn hình đăng ký tình nguyện viên 51 6.2.4 Màn hình trợ giúp 52 6.2.5 Màn hình thơng tin cá nhân .53 6.2.6 Màn hình đăng nhập 54 6.2.7 Màn hình dashboard chương trình 55 6.2.8 Màn hình tổng quan tất chương trình 56 6.2.9 Màn hình người đóng góp 57 6.2.10 Màn hình nhập thơng tin toán .59 Chương KẾT LUẬN 60 7.1 Môi trường phát triển 60 7.2 Môi trường triển khai 60 7.3 Hướng phát triển: 60 7.4 Bảng phân công 60 Chương THÔNG TIN CHUNG 1.1 Tên đề tài: Tìm hiểu ReactJS-SpringBootFramework 1.2 Thơng tin nhóm: STT MSSV Họ tên Email 19520086 Ngô Tấn Hoài 19520086@gm.uit.edu.vn 19520094 Lâm Văn Hồng 19520094@gm.uit.edu.vn Chương CƠNG NGHỆ 2.1 ReactJs 2.1.1 ReactJs gì? - ReactJS opensource phát triển Facebook, mắt vào năm 2013, thân thư viện Javascript dùng để để xây dựng tương tác với thành phần website Một điểm bật ReactJS việc render liệu không thực tầng Server mà cịn Client 2.1.2 Lợi ích sử dụng ReactJs - ReactJS giúp cho việc viết đoạn code Javascript trở nên dễ dàng sử dụng cú pháp đặc biệt cú pháp JSX Thông qua JSX cho phép nhúng code HTML Javascript - ReactJS cho phép Developer phá vỡ cấu tạo UI phức tạp thành component độc lập Dev lo lắng tổng thể ứng dụng web, Developer dễ dàng chia nhỏ cấu trúc UI/UX phức tạp thành component đơn giản - Đi kèm với ReactJS nhiều công cụ phát triển giúp cho việc debug code cách dễ dàng - Một ưu điểm ReactJS thân thiện với SEO Hầu JS Frameworks không thân thiện với tìm kiếm cải thiện nhiều hỗ trợ render liệu trả dạng web page giúp cho SEO chuẩn 2.2 Spring Boot 2.2.1 Spring Boot gì? - Spring Boot mô-đun nằm Spring Framework tiếng Java Sự đời năm 2014 muộn so với mô-đun khác sáng kiến tuyệt vời Spring Team, giúp giảm tải cơng việc cấu hình(configuration) lập trình viên cho việc phát triển dự án - Spring toàn hệ sinh thái để phát triển Java bao gồm số lượng lớn mơ-đun có sẵn Spring MVC, Spring JDBC, Spring Security mô-đun khác 2.2.2 Lợi ích sử dụng Spring Boot - Sở hữu đầy đủ tính Spring Framework - Tạo ứng dụng cách độc lập, chạy tảng Java Web - Cho phép nhúng trực tiếp web server Jetty, Tomcat,… mà không cần phải triển khai file WAR - Cung cấp nhiều plugin - Tối ưu hóa cơng đoạn cấu hình cho ứng dụng, khơng sinh code cấu hình khơng u cầu người dùng phải cấu hình lại XML Từ đó, giúp tiết kiệm thời gian viết code tăng suất lao động - Có thể đóng gói ứng dụng Spring dạng file JAR dễ dàng khởi động ứng dụng với câu lệnh ngắn gọn, quen thuộc: java – jar,… - Giảm thiểu thời gian phát triển code, tăng hiệu suất phát triển chung dự án - Dễ dàng tích hợp mơ-đun liên quan Sping-MVC, Spring Data, Spring Sercurity, Spring Cloud,v.v… - Nó cung cấp HTTPs servers Tomcat, Jety, để phát triển, kiểm thử, deploy cách dễ dàng - Cung cấp công cụ CLI(Command Line Interface) cho việc phát triển test ứng dụng nhanh chóng từ command line - Ngồi cịn có nhiều plugins để phát triển nhanh chóng công cụ Build Maven Gradle 2.3 MySQL 2.3.1 MySQL gì? - Như đề cập viết trước Database (cơ sở liệu), database lưu trữ quản lý hệ quản trị sở liệu, đó, MySQL hệ quản trị sở liệu – Database Management System (DBMS) - MySQL phần mềm mã nguồn mở ưa chuộng hoàn toàn miễn phí phổ biến giới MySQL phát triển, phân phối hỗ trợ Oracle Corporation Phần mềm đặt tên theo tên gái người đồng sáng lập Monty Widenius: My 2.3.2 Lợi ích sử dụng MySQL - Là sở liệu tốc độ cao, ổn định - Độ bảo mật thông tin cao - Dễ sử dụng có tính khả chuyển: có tính cao thực sự, MySQL hệ thống sở liệu đơn giản phức tạp - Có thể hoạt động nhiều hệ điều hành với lượng lớn hàm tiện ích: MySQL thích hợp cho ứng dụng có truy cập sở liệu Internet MySQL có nhiều phiên cho hệ điều hành khác nhau: phiên Win32 cho hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS, - Hồn tồn miễn phí: Là mã nguồn mở, MySQL sử dụng GNU General Public License nên hồn tồn miễn phí Tuy nhiên,trong trường hợp bạn cần hỗ trợ từ MySQL, bạn phải trả phí - Cộng đồng hỗ trợ : Vì lượng người dùng MySQL vô lớn nên hỗ trợ từ cộng đồng lớn theo Khi trở thành thành viên cộng đồng người dùng, bạn người cộng đồng tư vấn giải pháp họ biết cho vấn đề bạn gặp phải 2.4 Figma 2.4.1 Figma gì? - Figma cơng cụ mắt vào năm 2016, với giao diện thân thiện tính dễ sử dụng, Figma nhanh chóng lên trở thành công cụ thiết kế giao diện người dùng phổ biến cộng đồng công nghệ toàn cầu Một số thương hiệu lớn sử dụng Figma thời điểm kể đến Microsoft, Twitter, GitHub, Dropbox…Khác với công cụ thiết kế trước đây, Figma thiết kế tảng đám mây Đây cơng cụ có tính tương tự Sketch, nhiên hỗ trợ làm việc nhóm tốt 2.4.2 Lợi ích sử dụng Figma - Khả tương thích cao: Là phần mềm tảng website, Figma truy cập sử dụng hầu hết hệ điều hành phổ biến Windows, MacOS hay chí Linux, cần thiết bị bạn kết nối internet Hiện tại, Figma cịn có phiên ứng dụng máy tính điện thoại để người dùng sáng tạo hay theo dõi dự án nơi đâu - Tính cộng tác cao: Ưu điểm hàng đầu Figma phải kể đến tính cộng tác thời gian thực Với Figma, làm việc nhóm từ xa trở nên dễ dàng cho phép người khác dự án cộng tác thiết kế, cung cấp phản hồi, kiểm tra tiến độ công việc gắn cờ vấn đề xảy theo thời gian thực - Trang bị nhiều công cụ plugin mạnh mẽ: Kho plugin khổng lồ hữu ích có Figma giúp bạn khắc phục lỗi nhỏ tăng hiệu suất làm việc Việc quản lý màu sắc, nội dung hình ảnh hay hoạt ảnh trở nên dễ dàng hết - Thiết kế nhiều layout sản phẩm: Tính quản lý nhiều artboard lúc tích hợp Figma Với tính này, bạn sáng tạo nhiều layout với kích thước khác sản phẩm mà không cần phải tạo thêm tệp - Xuất đa dạng file ảnh cực sắc nét: Tương tự Illustrator, Figma thiết kế hình ảnh dạng vector nên chất lượng hình ảnh khơng bị giảm bạn thay đổi kích thước chúng Hình ảnh xuất giữ độ sắc nét với nhiều định dạng khác PNG, SVG, JPG hay chí PDF - Hỗ trợ lưu trữ đám mây: Figma sử dụng dịch vụ đám mây để lưu trữ chỉnh sửa liệu, điều tương tự bạn thay đổi nội dung Dịng kiện khác Chấp nhận tình nguyện viên Xố tình nguyện viên Chấm điểm cho tình nguyện viên Các u cầu đặc biệt Khơng có Trạng thái hệ thống bắt Người dùng đăng nhập quyền admin đầu thực Use-case Admin chọn xem tất tình nguyện viên hệ thống Trạng thái hệ thống sau Hệ thống trả kết phù hợp cho admin thực Use-case Điểm mở rộng Khơng có 5.4.13.Đặc tả Use-case “Lựa chọn tốn online” Tóm tắt Admin sau đăng nhập, tiến hành vào mục tạo chương trình từ thiện Dịng kiện Admin sau đăng nhập, điều hướng đến trang tạo chương trình từ thiện Điền đầy đủ thông tin cần thiết Hệ thống ghi nhận chương trình từ thiện bạn vào sở liệu Dịng kiện khác Khơng có Các u cầu đặc biệt Khơng có Trạng thái hệ thống bắt Người dùng đăng nhập quyền admin đầu thực Use-case Admin chọn tạo chương trình Trạng thái hệ thống sau Hệ thống xác minh lưu lại thơng tin chương trình thực Use-case từ thiện Điểm mở rộng Khơng có Chương THIẾT KẾ GIAO DIỆN 6.1 Danh sách hình Tên hình Màn hình Màn hình danh sách chương trình từ thiện Màn hình thống kê chi tiết Màn hình chi tiết chương trình Màn hình thống kê cho chương trình Màn hình profile Mơ tả Màn hình vào trang web Danh sách chương trình từ thiện Trang dashboard cho tồn chương trình hệ thống Trang chi tiết chương trình từ thiện Trang thống kê cho chương trình từ thiện Trang xem quản lý thông tin người dùng Màn hình đăng ký tình nguyện viên Màn hình trợ giúp Trang đăng ký làm tình nguyện viên Trang xem thông tin trợ giúp Trang điền thông tin ủng hộ lựa chọn Màn hình ủng hộ phương thức tốn Trang tạo chương trình từ thiện cho tổ chức từ Màn hình tạo chương trình thiện Bảng 5-2 Bảng mơ tả tổng qt danh sách hình 6.2 Mơ tả chi tiết hình 6.2.1 Màn hình Hình 5-3 Màn hình Thành phần Mơ tả Button Ủng hộ Xem tồn chương trình từ thiện Button Tình nguyện viên Đăng ký làm tình nguyện viên Trợ giúp Thống kê Xem thơng tin trợ giúp Vào trang thống kê tồn chương trình hệ thống Đăng nhập Mở trang đăng nhập Đăng ký Mở trang đăng ký Ủng hộ Vào trang ủng hộ Số người ủng hộ Vào trang dashboard người ủng hộ Số chươg trình thiện Vào trang dashboard chương trình từ thiện Số tiền ủng hộ Vào trang dashboard tổng quan chi tiết Bảng 5-3 Mơ tả chi tiết hình 6.2.2 Màn hình danh sách chương trình từ thiện Hình 5-4 Màn hình danh sách từ thiện Thành phần Mơ tả Button tabbar Chọn xem loại từ thiện tổ chức từ thiện Button Tìm kiếm Tìm kiếm chương trình từ thiện Card Item Từng chương trình từ thiện Processbar Mức độ hồn thành chương trình Title Tên chương trình Button ủng hộ Vào hình chi tiết chương trình từ thiện Bảng 5-4 Mơ tả chi tiết hình danh sách từ thiện 6.2.3 Màn hình đăng ký tình nguyện viên Hình 5-5 Màn hình đăng ký tình nguyện viên Thành phần Input Số điện thoại Mô tả Nhập số điện thoại Input email Nhập email Input Name Nhập tên Textarea Tên chương trình Nhập tên chương trình muốn tham gia Button Đăng ký Đăng ký tham gia Bảng 5-5 Mơ tả chi tiết hình đăng ký tình nguyện viên 6.2.4 Màn hình trợ giúp Hình 5-6 Màn hình trợ giúp Thành phần Mơ tả Text Title trang Item Từng nội dung trợ giúp Button detail Xem chi tiết trợ giúp Bảng 5-6 Mơ tả chi tiết hình trợ giúp 6.2.5 Màn hình thơng tin cá nhân Hình 5-7 Màn hình thông tin cá nhân Thành phần Mô tả Button tab Mở qua tab khác Text header Title tab Input field Nhập thông tin theo mục Button Huỷ bỏ Huỷ bỏ thay đổi Button Cập nhật Lưu thay đổi Bảng 5-7 Mơ tả chi tiết hình thơng tin cá nhân 6.2.6 Màn hình đăng nhập Hình 5-8 Màn hình đăng ký nhập Thành phần Mơ tả Input email Nhập email Input password Nhập mật Text Tên chào mừng Button Đăng nhập Đăng nhập vào trang Button Onother login Các phương thức đăng nhập khác Bảng 5-8 Mô tả chi tiết hình đăng nhập 6.2.7 Màn hình dashboard chương trình Hình 5-9 hình dashboard cho chương trình Thành phần Button tab Mơ tả Chọn tab tương ứng (tổng quan, danh sách ủng hộ, kê, thành quả) Button chi tiết Đi đến trang chi tiết chương trình Button save Lưu chương trình lại Right pannel Các thông tin tương ứng Text Tên chương trình Bảng 5-10 Mơ tả chi tiết hình dashboard cho chương trình 6.2.8 Màn hình tổng quan tất chương trình Hình 5-11 Màn hình tổng quan tồn chương trình Thành phần Mơ tả Button tab Trang cho mục Input search Search nội dung Button trang chủ Điều hướng trang chủ web Right content Nội dung , biểu đồ, số liệu đóng góp hệ thống Button Đăng ký đăng nhập Đăng nhập đăng ký vào hệ thống Bảng 5-11 Mơ tả chi tiết hình tổng quan tồn chương trình 6.2.9 Màn hình người đóng góp Hình 5-12 Màn hình đóng góp Thành phần Mơ tả Button tab Trang cho mục Input search Search nội dung Button trang chủ Điều hướng trang chủ web Right content Danh sách người ủng hộ Button xuất file Xuất file excel,… Button lọc Lọc theo mục Bảng 5-12 Mô tả chi tiết hình đóng góp 5.2.2.10 Màn hình tạo chương trình Hình 5-13 Màn hình tạo chương trình Thành phần Mơ tả Text title Tiêu đề trang tạo nội dung Input file Các trường thông tin yêu cầu người dùng nhập Button chọn hình Chọn hình ảnh thumbnail Content Input Nhập nội dung trang web Button hoàn tất Xác nhận thơng tin hồn tất Bảng 5-13 Mơ tả chi tiết hình tạo chương trình 6.2.10 Màn hình nhập thơng tin tốn Hình 5-14 Màn hình nhập thơng tin tốn Thành phần Mơ tả Input file Nhập thông tin cần thiết Button Money Chọn số tiền cần đóng góp Input money Nhập số tiền cần đóng góp Textare Lời nhắn người ủng hộ Button tốn Chọn tốn Bảng 5-4 Mơ tả chi tiết hình nhập thơng tin tốn Chương KẾT LUẬN 7.1 7.2 Mơi trường phát triển - Visual Studio: Viết sửa script - Figma: Thiết kế giao diện - MySQL Workbench: Giao tiếp với hệ sở liệu MySQL - Alchemy: Hỗ trợ tích hợp Blockchain Mơi trường triển khai - 7.3 - Window 10 Hướng phát triển: Triển khiển Microservices cho web để tăng tính ổn định dễ dang mở rộng cho web - Tích hợp Blockchain để chứa giao dịch tiền thật để tăng tính minh bạch bảo mật cho web 7.4 Bảng phân công Thành viên Ngơ Tấn Hồi Cơng việc - Nghiên cứu Blockchain, Ethereum, Alchemy - Lập trình tính cho website - Lập trình smart contract - Làm video báo cáo - Viết báo cáo Lâm Văn Hồng - Khảo sát website từ thiện có - Thiết kế giao diện Figma - Lập trình giao diện ReactJs - Nghiên cứu Blockchain, Ethereum, Alchemy - Viết báo cáo -Hết - ... tài: Tìm hiểu ReactJS- SpringBootFramework 1.2 Thơng tin nhóm: .6 Chương CÔNG NGHỆ 2.1 ReactJs 2.1.1 ReactJs gì? 2.1.2 Lợi ích sử dụng ReactJs. .. tài: Tìm hiểu ReactJS- SpringBootFramework 1.2 Thơng tin nhóm: STT MSSV Họ tên Email 19520086 Ngơ Tấn Hồi 19520086@gm.uit.edu.vn 19520094 Lâm Văn Hồng 19520094@gm.uit.edu.vn Chương CÔNG NGHỆ 2.1 ReactJs. .. ReactJs 2.1.1 ReactJs gì? - ReactJS opensource phát triển Facebook, mắt vào năm 2013, thân thư viện Javascript dùng để để xây dựng tương tác với thành phần website Một điểm bật ReactJS việc render