Tìm hiểu nextjs và xây dựng blog chia sẻ kiến thức

1 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 để hồ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 21 Đặc tả Use-case “Tìm kiếm viết” 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 q 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 hố: Ứ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 tuân theo quy chuẩn thiết kế ứng dụng hành Nhóm thực tố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 User use-case diagram 10 Màn hình xố 42 Màn hình Edit Post Màn hình About Us 43 Màn hình Post Detail 3.3.2 Mơ tả hình 44 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 45 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 46 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 47 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 Thẻ div Thích viết 48 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 STT Tên control Chức năng/Xử lý 49 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 STT Tên control Chức năng/Xử lý 50 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 51 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 52 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 NextJS ● Back-End sử dụng NodeJS Framework ExpressJS ● Database MongoDB Thử nghiệm: Chạy trình duyệt web 53 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 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 54 ● 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/ YouTube Channel: Easy Frontend - YouTube, https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg Introducing Hooks: https://reactjs.org/docs/hooks-intro.html 55 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 56 ... 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... hiển thị trước thời điểm xây dựng Nhược điểm lớn việc sử dụng SSG thời gian xây dựng lâu Bạn khơng gặp vấn đề có vài trang tạo tĩnh, ứng dụng bạn phát triển, thời gian xây dựng tăng lên Trường hợp... 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,