ĐỒ án tìm HIỂU REACTJS và xây DỰNG BLOG CHIA sẻ KIẾN THỨC (đồ án SE121 l21 PMCL)

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY INFORMATION TECHNOLOGY UNIVERSITY SOFTWARE ENGINEERING FACULTY BÁO CÁO CUỐI KỲ ĐỒ ÁN - SE121.L21.PMCL TÌM HIỂU REACTJS VÀ XÂY DỰNG BLOG CHIA SẺ KIẾN THỨC GVHD: Thái Thụy Hàn Uyển Nhóm thực hiện: Dương Minh Sang Lê Hoàng Thiện 18520144 18521426 TPHCM, Tháng năm 2021 NHẬN XÉT ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………… LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin chúng em trang bị kiến thức bản, kỹ thực tế để hồn thành đồ án mơn học Chúng em xin gửi lời cảm ơn chân thành đến cô Thái Thụy Hàn Uyển quan tâm, hướng dẫn, truyền đạt kiến thức kinh nghiệm cho chúng em suốt thời gian học tập môn Nhập môn ứng dụng di động Trong q trình làm đồ án mơn khơng tránh khỏi sai sót, chúng em mong nhận góp ý quý thầy bạn để hoàn thiện TP Hồ Chí Minh, tháng 6, năm 2021 MỤC LỤC NHẬN XÉT LỜI CẢM ƠN GIỚI THIỆU ĐỀ TÀI 1.1 Hiện trạng 1.2 Mục đích yêu cầu đề tài 1.2.1 Mục đích 1.2.2 Yêu cầu 1.2.3 Người dùng 1.3 Phương pháp phát triển ứng dụng 1.3.1 Quy trình phát triển ứng dụng 1.3.2 Kiến trúc ứng dụng: Client -Server 1.4 Các chức PHÂN TÍCH YÊU CẦU 2.1 Danh sách tác nhân 10 2.2 Danh sách use case 10 2.3 Đặc tả: 11 2.3.1 Đặc tả Use-case “Login” 11 2.3.2 Đặc tả Use-case “Logout” 12 2.3.3 Đặc tả Use-case “Sign Up” 13 2.3.4 Đặc tả Use-case “Xem viết” 14 2.3.5 Đặc tả Use-case “Sửa viết” 15 2.3.6 Đặc tả Use-case “Thêm viết” 16 2.3.7 Đặc tả Use-case “Xóa viết” 17 2.3.8 Đặc tả Use-case “Like viết” 18 2.3.9 Đặc tả Use-case “Share viết” 19 2.3.10 Đặc tả Use-case “Comment viết” 20 2.3.11 Đặc tả Use-case “Tìm kiếm viết” 21 3.THIẾT KẾ 22 3.1 Thiết kế liệu 22 3.1.1 Cơ sở liệu 22 3.1.2 Mô tả chi tiết 22 3.2 Thiết kế kiến trúc chương trình 24 3.2.1 Tổng quát kiến trúc hệ thống 24 3.2.2 Chi tiết mô tả kiến trúc hệ thống 26 3.2 Thiết kế giao diện 31 3.2.1 Danh sách hình 31 3.2.2 Mơ tả hình 37 CÀI ĐẶT VÀ KIỂM THỬ 46 KẾT LUẬN VÀ HƯỚNG MỞ RỘNG 47 5.1 Kết luận 47 5.2 Hướng mở rộng 48 TÀI LIỆU THAM KHẢO: 48 GIỚI THIỆU ĐỀ TÀI 1.1 Hiện trạng Hiện nay,mỗi cá nhân có động lực riêng để viết blog Nhiều người số họ sử dụng thay để giữ nhật ký tạp chí Viết blog cung cấp cho họ địa điểm để chia sẻ sáng tạo ý tưởng họ cho nhiều đối tượng Các thương hiệu doanh nghiệp hàng đầu tạo blog để giáo dục khách hàng họ, chia sẻ tin tức tiếp cận đối tượng rộng Viết blog phần thiết yếu chiến lược tiếp thị trực tuyến cho nhiều doanh nghiệp Sau vài lợi ích Blog: ● ● ● ● ● ● ● ● Cung cấp đại lộ để xếp suy nghĩ ý tưởng bạn Cho phép bạn thể kỹ năng, sáng tạo tài Giúp cá nhân trở thành người có thẩm quyền ngành cơng nghiệp họ Giúp bạn giao lưu với người chí hướng thú vị mạng Nhiều blogger kiếm tiền từ blog họ nhiều phương pháp kiếm tiền khác Các doanh nghiệp sử dụng blog để đưa nhiều khách hàng tiềm đến trang web họ Phi lợi nhuận sử dụng blog để nâng cao nhận thức, chạy chiến dịch truyền thông xã hội gây Ảnh hưởng đến dư luận 1.2 Mục đích yêu cầu đề tài 1.2.1 Mục đích - Chia sẻ kiến thức cá nhân - Giao lưu học hỏi nhiều kinh nghiệm kiến thức từ người - Tạo mơi trường để giúp lập trình viên, sinh viên học cơng nghệ thơng tin giao lưu, chia sẻ 1.2.2 Yêu cầu - Tính tiện dụng: Ứng dụng phải dễ học, dễ dùng Thiết kế phải (modern), nhiên không cầu kỳ phức tạp gây khó chịu cho người dùng - Tính đắn: Ứng dụng chạy khơng lỗi - Tính thích nghi: Ứng dụng chạy tốt nhiều thiết bị với cấu hình phần cứng khác thiết kế kiến trúc thiết bị khác - Tính tiến hoá: Ứng dụng phải dễ dàng phát triển thêm tính mà khơng gây ảnh hưởng đến tính phát triển trước 1.2.3 Người dùng - Dành cho lập trình viên có nhu cầu đọc blog để mở rộng thêm kiến thức - Nhưng bạn bắt đầu tìm hiểu lập trình - Những bạn làm trái ngành, muốn chuyển sang làm developer 1.3 Phương pháp phát triển ứng dụng 1.3.1 Quy trình phát triển ứng dụng Nhóm phát triển tn theo quy chuẩn thiết kế ứng dụng hành Nhóm thực toán bước sau trình phát triển ứng dụng: ● Bước 1: Nhóm tiến hành nghiên cứu ứng dụng sẵn có (với chức gần giống, chưa có ứng dụng hỗ trợ điều này) thị trường để bắt kịp xu hướng ● Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mơ hình hố u cầu người dùng ● Bước 3: Nhóm tiến hành vẽ Activity Diagram để mơ hình hố tương tác thành phần hệ thống ● Bước 4: Nhóm thực chỉnh sửa lại mơ hình hố u cầu người dùng theo thu thập ● Bước 5: Nhóm thực thiết kế CSDL ● Bước 6: Nhóm tiến hành nghiên cứu cơng nghệ sẵn có để lựa chọn mơi trường phù hợp phát triển ứng dụng Nhóm chọn ReactJS (JavaScript library for building user interfaces) để phát triển front-end cho ứng dụng library cơng ty lập trình viên ưu tiên cơng nghệ nhóm chia sẻ qua đồ án ● Bước 7: Nhóm tiến hành thiết kế giao diện Prototype cho ứng dụng ● Bước 8: Nhóm tiến hành cơng đoạn cài đặt cho ứng dụng ● Bước 9: Nhóm tiến hành cơng việc bảo trì (sửa chữa lỗi phát triển thêm tính chưa đề ban đầu) ● Bước 10: Nhóm hồn thành đồ án 1.3.2 Kiến trúc ứng dụng: Client -Server 1.4 Các chức • • • • • • • • Xác thực người dùng Xem viết Tạo viết mới, publish quản lí viết (chỉnh sửa xóa) Tương tác với viết cách Like, Share Comment Đề xuất viết có liên quan Xem lại viết Like Tìm kiếm viết thơng qua từ khóa tìm kiếm Đề xuất Top viết xem nhiều PHÂN TÍCH YÊU CẦU 2.1 Danh sách tác nhân STT Tác nhân Ý nghĩa Là người xem nội dung viết Nếu User đăng nhập có quyền quản lí viết thân, like share comment viết khác User 2.2 Danh sách use case STT Use case Ý nghĩa Login Đăng nhập Sign up Đăng ký Log out Đăng xuất Xem viết Xem viết Sửa viết Sửa viết tạo Thêm viết Thêm viết Xóa viết Xố viết tạo Like viết Thích viết khác Share viết Chia sẻ viết 10 Comment viết Comment viết 11 Tìm kiếm viết Tìm kiếm viết theo tag name viết 12 Lưu viết Lưu lại viết thích 10 Màn hình xố Màn hình Edit Post 35 Màn hình About Us 36 Màn hình Post Detail 3.2.2 Mơ tả hình 37 Màn hình trang chủ STT Tên control Chức năng/Xử lý Image Chuyển giao diện sang trang Post Detail Link Đăng nhập Link Chuyển giao diện sang trang About Us Input Tìm kiếm viết 38 Màn hình đăng nhập STT Tên control Chức năng/Xử lý Input Nhập Email người dùng Input Nhập mật Button Thực đăng nhập vào hệ thống Button Chuyển sang đăng nhập tài khoản Google Button Chưa có tài khoản Khách hàng chuyển sang trang đăng kí để thực tạo tài khoản 39 Màn hình trang đăng kí STT Tên control Chức năng/Xử lý Input Nhập First Name người dùng Input Nhập Last Name người dùng Input Nhập Email người dùng Input Nhập password Input Nhập lại password 40 Button Thực đăng kí tài khoản Nếu thành công hệ thống tự động đăng nhập vào trang chủ Button Chuyển sang giao diện Signin để thực việc đăng nhập Màn hình Post Detail STT Tên control Chức năng/Xử lý Thẻ div Thực chia sẻ qua Facebook Thẻ div Thực chia sẻ qua Instagram 41 Thẻ div Thích viết Button Trỏ vào lựa chọn Settings Logout Chọn Settings để chuyển sang giao diện quản lí viết Chọn Logout để đăng xuất khỏi hệ thống Button Chuyển sang trang danh sách viết thích Link Chuyển giao diện sang trang chủ Link Xem viết khác Màn hình Content 42 STT Tên control Chức năng/Xử lý Thẻ div Chuyển sang giao diện Edit Post Thẻ a Chuyển sang giao diện Add Post Button Chuyển trang trang trước Button Chuyển trang trang sau Màn hình Edit Post 43 STT Tên control Chức năng/Xử lý Input Nhập Title cho viết Button Chọn hình ảnh từ máy tính Input Nhập tag liên quan đến viết Input Nhập viết mở đầu Input Nhập nội dung viết Chỉnh sửa nội dung dựa công cụ phía Button Chuyển sang chế độ xem lại nội dung viết Button Lưu nội dung chỉnh sửa viết Màn hình Add Post 44 STT Tên control Chức năng/Xử lý Input Nhập Title cho viết Button Chọn hình ảnh từ máy tính Input Nhập tag liên quan đến viết Input Nhập viết mở đầu Input Nhập nội dung viết Chỉnh sửa nội dung dựa cơng cụ phía 45 Button Chuyển sang chế độ xem lại nội dung viết Button Thực thêm viết vào hệ thống Màn hình About Us CÀI ĐẶT VÀ KIỂM THỬ Môi trường cài đặt: Visual Studio Code Ngôn ngữ cài đặt: ● Front-End sử dụng library ReactJS, Redux để quản lý state ● Back-End sử dụng NodeJS Framework ExpressJS ● Database MongoDB 46 Thử nghiệm: Chạy trình duyệt web KẾT LUẬN VÀ HƯỚNG MỞ RỘNG 5.1 Kết luận Kết đạt được: ● Kết thúc mơn học, nhóm tìm hiểu hoàn thành ứng dụng tương đối hoàn chỉnh Với hướng dẫn từ giảng viên, kiến thức cung cấp, chúng em áp dụng design pattern tốt quy chuẩn phát triển ứng dụng để có ứng dụng tốt ● Trong khoảng thời gian hạn chế, nhóm phát triển phần mềm tương đối hoàn thiện Phần mềm đáp ứng tốt chức người sử dụng thông thường việc đọc viết, đăng nhập, quản lý nội dung viết, tương tác với viết thông qua Like, Share Comment ● Giao diện đẹp, thân thiện dễ sử dụng với người dùng ● Trải nghiệm người dùng tốt có Loading Skeleton load liệu giúp cho trang web trở nên sinh động mượt mà hơn, trang web hay ứng dụng tiếng dùng phương pháp loading để làm đẹp trang web hay ứng dụng Ưu điểm: ● Chỉ cần sử dụng JavaScript để phát triển ứng dụng web hoàn chỉnh ● MERN Stack tỏ hiệu mặt thời gian mà bạn muốn phát triển ứng dụng nhanh chóng ● Hiệu tương đối ổn định ● Cực kì dễ để viết test case giao diện virtual DOM cài đặt hồn tồn JS ● Sử dụng 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 47 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 ● ReactJS có 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 ● Có số lợi làm việc với sở liệu NoSQL MongoDB Những ưu điểm khả mở rộng tính sẵn sàng cao Khuyết điểm: ● Config project thời gian cho người học web ● 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 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 hồn chỉnh 5.2 Hướng mở rộng ● ● ● ● Phân loại viết thành Category Tìm kiếm viết Có thể like reply comment Hiển thị lượt xem viết đề xuất viết phổ biến trang Home ● Validate liệu username, password, ràng buộc thêm sửa viết ● Thêm phần profile setting cho người dùng để người dùng thay đổi thơng tin cá nhân, ● Thêm Table of Content cho viết TÀI LIỆU THAM KHẢO: Stack-Overflow: https://stackoverflow.com/ 48 React-Native Doc: React Native · A framework for building native apps using React YouTube Channel: Easy Frontend - YouTube, https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg Introducing Hooks: https://reactjs.org/docs/hooks-intro.html Redux: https://redux.js.org/introduction/getting-started Material-UI: https://material-ui.com/ React-router: https://reactrouter.com/ Express: https://www.npmjs.com/package/express 49 ... Mục đích - Chia sẻ kiến thức cá nhân - Giao lưu học hỏi nhiều kinh nghiệm kiến thức từ người - Tạo môi trường để giúp lập trình viên, sinh viên học công nghệ thông tin giao lưu, chia sẻ 1.2.2... viết blog Nhiều người số họ sử dụng thay để giữ nhật ký tạp chí Viết blog cung cấp cho họ địa điểm để chia sẻ sáng tạo ý tưởng họ cho nhiều đối tượng Các thương hiệu doanh nghiệp hàng đầu tạo blog. .. chúng em trang bị kiến thức bản, kỹ thực tế để hồn thành đồ án mơn học Chúng em xin gửi lời cảm ơn chân thành đến cô Thái Thụy Hàn Uyển quan tâm, hướng dẫn, truyền đạt kiến thức kinh nghiệm cho