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

2.2 Danh sách use case 4 Xem bài viết Xem bài viết 5 Sửa bài viết Sửa bài viết đã tạo 6 Thêm bài viết Thêm bài viết mới 7 Xóa bài viết Xoá bài viết đã tạo 8 Like bài viết Thích một bài v

Trang 2

NHẬN XÉT

………

Trang 3

………

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin chúng em đã được trang bị các kiến thức cơ bản, các kỹ năng thực tế để có thể hoàn thành đồ án môn học của mình

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 những kiến thức và kinh nghiệm cho chúng em trong suốt thời gian học tập môn Nhập môn ứng dụng di động Trong quá trình làm đồ án môn không tránh khỏi được những sai sót, chúng em mong nhận được sự góp ý của quý thầy và các bạn để được hoàn thiện hơn

Trang 4

TP Hồ Chí Minh, tháng 6, năm 2021.

Trang 6

3.2 Thiết kế kiến trúc chương trình 24

Trang 7

1 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 trong số họ sửdụng nó như là một thay thế để giữ một cuốn nhật ký hoặc tạp chí Viết blogcung cấp cho họ một địa điểm để chia sẻ sự sáng tạo và ý tưởng của họ chonhiều đối tượng hơn

Các thương hiệu và doanh nghiệp hàng đầu tạo ra các blog để giáo dục kháchhàng của họ, chia sẻ tin tức và tiếp cận đối tượng rộng hơn Viết blog là mộtphần thiết yếu của chiến lược tiếp thị trực tuyến cho nhiều doanh nghiệp

Sau đây chỉ là một vài lợi ích của Blog:

● Cung cấp một đại lộ để sắp xếp những suy nghĩ và ý tưởng của bạn

● Cho phép bạn thể hiện kỹ năng, sáng tạo và tài năng của mình

● Giúp các cá nhân trở thành một người có thẩm quyền trong ngành côngnghiệp của họ

● Giúp bạn giao lưu với những người cùng chí hướng thú vị trên mạng

● Nhiều blogger kiếm tiền từ blog của họ bằng nhiều phương pháp kiếmtiền khác nhau

● Các doanh nghiệp sử dụng blog để đưa nhiều khách hàng tiềm nănghơn đến trang web của họ

● Phi lợi nhuận có thể sử dụng blog để nâng cao nhận thức, chạy cácchiến dịch truyền thông xã hội và gây

● Ảnh hưởng đến dư luận

1.2 Mục đích và yêu cầu của đề 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 cũng như kiến thức từ mọi người

- Tạo một môi trường để có thể giúp các lập trình viên, sinh viên học côngnghệ thông tin giao lưu, chia sẻ

Trang 8

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 mới

(modern), tuy nhiên không quá cầu kỳ phức tạp gây khó chịu cho ngườidùng

- Tính đúng đắn: Ứng dụng chạy không lỗi

- Tính thích nghi: Ứng dụng có thể chạy tốt trên nhiều thiết bị với cấu hìnhphần cứng khác nhau và thiết kế kiến trúc thiết bị khác nhau

- Tính tiến hoá: Ứng dụng phải dễ dàng được phát triển thêm tính năng màkhông gây ảnh hưởng đến những tính năng đã phát triển trước đó

1.2.3 Người dùng

- Dành cho những lập trình viên có nhu cầu đọc các bài blog để mở rộngthêm kiến thức

- Nhưng bạn mới bắt đầu tìm hiểu về lập trình

- Những bạn làm trái ngành, muốn chuyển sang làm developer

● Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mô hình hoá yêu cầu củangười dùng

● Bước 3: Nhóm tiến hành vẽ Activity Diagram để mô hình hoá sự tương tácgiữa các thành phần trong hệ thống

● Bước 4: Nhóm thực hiện chỉnh sửa lại mô hình hoá yêu cầu người dùngtheo những gì đã thu thập được

● Bước 5: Nhóm thực hiện thiết kế CSDL

● Bước 6: Nhóm tiến hành nghiên cứu các công nghệ sẵn có để lựa chọnmột môi trường phù hợp phát triển ứng dụng của mình Nhóm đã chọn

Trang 9

ReactJS (JavaScript library for building user interfaces) để phát triển

front-end cho ứng dụng vì đây đang là library được các công ty cũng nhưlập trình viên ưu tiên và cũng vì đây là công nghệ nhóm sẽ chia sẻ qua đồ

án này

● 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 và phát triển thêmnhững tính năng chưa được đề ra ban đầu)

● Bước 10: Nhóm hoàn thành đồ án

1.3.2 Kiến trúc ứng dụng: Client-Server

1.4 Các chức năng chính

● Xác thực người dùng

● Xem các bài viết

● Tạo bài viết mới, publish và quản lí các bài viết đó (chỉnh sửa và xóa)

● Tương tác với một bài viết bằng cách Like, Share và Comment

● Đề xuất các bài viết có liên quan

● Xem lại các bài viết đã Like

● Tìm kiếm các bài viết thông qua từ khóa tìm kiếm

● Đề xuất Top các bài viết được xem nhiều nhất

Trang 10

2 PHÂN TÍCH YÊU CẦU

User use-case diagram

Trang 11

Admin use-case diagram

Trang 12

2.1 Danh sách tác nhân

STT Tác nhân Ý nghĩa

1 User Là người xem nội dung bài viết Nếu User đã đăng nhập sẽ có quyền quản

lí bài viết của bản thân, like share comment bài viết khác.

2 Admin Là người tạo ra bài viết, quản lí tất cả bài viết trên website, tạo và thêm bài

viết vào các Series khác nhau.

2.2 Danh sách use case

4 Xem bài viết Xem bài viết

5 Sửa bài viết Sửa bài viết đã tạo

6 Thêm bài viết Thêm bài viết mới

7 Xóa bài viết Xoá bài viết đã tạo

8 Like bài viết Thích một bài viết khác

9 Share bài viết Chia sẻ một bài viết

10 Comment bài viết Comment 1 bài viết

11 Tìm kiếm bài viết Tìm kiếm bài viết theo tag name của bài viết

12 Thêm bài viết Thêm bài viết vào Series

13 Xoá bài viết Xoá bài viết khỏi Series

14 Thêm category Thêm category mới

15 Xoá category Xoá category đã tạo.

Trang 13

2.3 Đặc tả:

2.3.1 Đặc tả Use-case “Login”

2.3.1.1 Tóm tắt

khoản cho trang web

Điều kiện trước Người dùng đã có tài khoản

Các yêu cầu đặc biệt Không có

2.3.1.2 Dòng sự kiện

Dòng sự kiện chính

1 User truy cập vào trang chủ bấm vào nút Sign in

2 User được chuyển sang trang đăng nhập

3 User nhập thông tin tài khoản, mật khẩu

4 Hệ thống xác thực thông tin trên database

5 Đăng nhập thành công chuyển người dùng trở về trang chủ

Các dòng sự kiện khác

1 Khi đăng nhập nếu người dùng nhập sai tên tài khoản hoặc mật khẩu

hệ thống sẽ thông báo và yêu cầu người dùng nhập lại

2 Khi đăng ký nếu người dùng nhập một tên tài khoản đã tồn tại hoặcnhập lại mật khẩu sai thì hệ thống sẽ thông báo và yêu cầu nhập lại

2.3.1.3 Các yêu cầu đặc biệt

Không có

Trang 14

2.3.1.4 Trạng thái hệ thống khi bắt đầu thực hiện Use-case

-Người dùng ở trang chủ và chưa đăng nhập

2.3.1.5 Trạng thái hệ thống sau khi thực hiện Use-case

- Nếu đăng nhập thành công hệ thống sẽ điều hướng người dùng trở lạitrang chủ của web và hiển thị avatar, tên người dùng, bookmark, thôngbáo, nút đăng xuất và quản lí nội dung trên thanh điều hướng của trangweb

- Nếu thất bại hệ thống sẽ gửi thông báo lên màn hình và yêu cầu ngườidùng nhập lại tên tài khoản và mật khẩu

2.3.1.6 Điểm mở rộng

Không có

2.3.2 Đặc tả Use-case “Logout”

2.3.2.1 Tóm tắt

Điều kiện sau User đăng xuất khỏi trang web

Trang 15

2 Đăng xuất thành công.

3 Thanh điều hướng sẽ hiển thị lại nút Sign In

Điều kiện trước User chưa có tài khoản

Điều kiện sau User sau khi đăng ký thành công sẽ

tự động được đăng nhập vào hệthống

Trang 16

3 Sau khi nhập đầy đủ và hợp lệ các trường, người dùng được tạo mộttài khoản mới, tự động đăng nhập vào hệ thống và điều hướng đếntrang Home.

Các dòng sự kiện khác

1 Người dùng nhập không đầy đủ các trường hoặc các trường không hợp

lệ thì hệ thống thông báo lỗi cụ thể và yêu cầu nhập lại

Người dùng có thể quay lại trang đăng nhập hoặc trang Home

Không có

2.3.4 Trạng thái hệ thống khi bắt đầu thực hiện Use-case

User chưa có tài khoản và chưa đăng nhập vào trang web

Người dùng sau khi đăng ký thành công sẽ tự động được đăng nhập vàotrang web

2.3.6 Điểm mở rộng

Không có

2.3.4 Đặc tả Use-case “Xem bài viết ”

2.3.4.1 Tóm tắt

chưa đăng nhập thì User chỉ đượcxem Nếu đã đăng nhập User cóthể like,comment,share bài viết đó

Trang 17

User thành công xem thông tin bài viết

Không có

2.3.5 Đặc tả Use-case “Sửa bài viết”

2.3.5.1 Tóm tắt

Trang 18

1 User trỏ chuột vào icon mũi tên hướng xuống góc trên bên phải mànhình Sau đó chọn Content.

2 User được chuyển màn hình sang màn hình Content

3 User click vào một bài viết muốn chỉnh sửa từ danh sách bài viết đanghiển thị

4 User được điều hướng đến trang Edit Post và chỉnh sửa bài viết đãchọn

5 Sau khi User hoàn thành việc chỉnh sửa

6 User nhấn vào nút Publish Changes để lưu thay đổi

7 Bài viết được thay đổi thành công

1 Các trường không được để trống

2 Blog Title không quá 200 ký tự

3 Tags phải có ít nhất 1 tag

4 Opening không quá 500 ký tự

5 Detail ít nhất 100 ký tự

Người dùng đã được chuyển sang trang Edit Post

Bài viết được lưu thành công Người dùng được chuyển sang trang xembài viết đã chỉnh sửa

Không có

Trang 19

2.3.6 Đặc tả Use-case “Thêm bài viết”

2.3.6.1 Tóm tắt

3 User bấm vào nút Add Post trên màn hình

4 User được chuyển đến màn hình Add Post

5 User nhập tất cả thông tin cho bài viết

6 Sau khi hoàn tất nhập thông tin, User bấm vào nút Publish để thêm bài viếtthành công

1 Các trường không được để trống

2 Blog Title không quá 200 ký tự

3 Tags phải có ít nhất 1 tag

Trang 20

4 Opening không quá 500 ký tự

5 Detail ít nhất 100 ký tự

Người dùng đã được chuyển sang trang Add Post

Bài viết được thêm thành công Người dùng được chuyển sang trang xembài viết đã thêm

Không có

2.3.7 Đặc tả Use-case “Xóa bài viết”

2.3.7.1 Tóm tắt

Điều kiện trước User đã đăng nhập vào trang web

và đã publish ít nhất 1 bài viết

2 User rê con trỏ chuột vào bài viết muốn xóa, cuối dòng của bài viết.muốn đó sẽ hiện ra icon “Xóa” (hình thùng rác)

3 Người dùng click vào icon “Xóa” để xóa bài viết

Trang 21

4 Hệ thống thông báo “Your Post will be deleted permanently Are yousure want to delete this post?”

6.2 Bài viết không được xóa

Không có

2.7.4 Trạng thái hệ thống khi bắt đầu thực hiện Use-case

Người dùng đã đã đăng nhập vào đã publish it61 nhất 1 bài viết

2.7.5 Trạng thái hệ thống sau khi thực hiện Use-case

Trang Content sẽ load lại danh sách các bài viết của user Bài viết được xóa

2.7.6 Điểm mở rộng

Không có

2.3.8 Đặc tả Use-case “Like bài viết”

2.3.8.1 Tóm tắt

Trang 22

1 User chọn bài viết muốn xem trên trang chủ hoặc từ danh sách các bàiviết được đề xuất có liên quan trong trang hiển thị bài viết đang đọc

2 User được điều hướng đến trang Post Detail để đọc bài viết đã chọn

3 User nhấn vào biểu tượng thích trên bài viết

Trang Post Detail sẽ cập nhật số lượng likes của bài viết đó

Không có

2.3.9 Đặc tả Use-case “Share bài viết”

2.3.9.1 Tóm tắt

Trang 23

1 User chọn bài viết muốn xem trên trang chủ hoặc từ danh sách các bàiviết được đề xuất có liên quan trong trang hiển thị bài viết đang đọc.

2 User được điều hướng đến trang Post Detail để đọc bài viết đã chọn

3 User nhấn vào biểu tượng share trên bài viết

Bài viết được chia sẻ lên các kênh mạng xã hội khác

Không có

2.3.10 Đặc tả Use-case “Comment bài viết”

2.3.10.1 Tóm tắt

Trang 24

3 User comment vào khung comment dưới bài viết.

4 User nhấn lưu để lưu comment đó

Comment được lưu theo bài viết đó

Không có

2.3.11 Đặc tả Use-case “Tìm kiếm bài viết”

2.3.11.1 Tóm tắt

name được gắn theo từng bài viết

Trang 25

2 User nhấn vào nút Search để tìm kiếm.

3 Hệ thống trả về danh sách các bài viết hợp lệ

Hiển thị danh sách kết quả tìm kiếm hợp lệ

Không có

2.3.12 Đặc tả Use-case “Thêm bài viết vào Series”

2.3.12.1 Tóm tắt

Tên chức năng Thêm bài viết vào Series

category hợp lí

Điều kiện trước Đã đăng nhập vào trang web bằng

tài khoản admin

Trang 26

2 Admin được chuyển màn hình sang màn hình Content.

3 Admin nhấn vào 1 category muốn thêm bài viết

4 Admin chọn bài viết từ danh sách để add vào category

Không có

2.3.13 Đặc tả Use-case “Xoá bài viết trong Series”

2.3.13.1 Tóm tắt

Tên chức năng Thêm bài viết vào Series

Trang 27

3 Admin nhấn vào 1 category.

4 Admin chọn bài viết từ danh sách để xoá khỏi category

2.3.14 Đặc tả Use-case “Thêm category”

2.3.14.1 Tóm tắt

2 Admin được chuyển màn hình sang màn hình Content

3 Admin nhấn nút tạo category

4 Hệ thống trả về danh sách các category bao gồm category mới được thêm

Trang 28

Không có

2.3.15 Đặc tả Use-case “Xoá category”

2.3.15.1 Tóm tắt

2 Admin được chuyển màn hình sang màn hình Content

3 Admin nhấn nút xoá bên cạnh category

4 Hệ thống trả về danh sách các category bao gồm category mới bị xoá

Không có

Trang 29

3.THIẾT KẾ

3.1 Thiết kế dữ liệu

3.1.1 Cơ sở dữ liệu

STT Tên Collection Ý nghĩa/mô tả

1 User Chứa thông tin các tài khoản của người dùng

2 Post Danh sách các bài Post của trong web

3 Series Danh sách các loại bài viết

4 Admin Chứa thông tin các tài khoản admin

3.1.2 Mô tả chi tiết

Danh sách các collection

User: Lưu trữ danh sách người dùng

STT Tên thuộc tính Kiểu dữ

liệu

Ý nghĩa

1 _id Object ID Được sử dụng để lưu giữ ID của Document Do

MongoDB tự tạo khi object user được tạo.

Trang 30

Post: Lưu trữ thông tin bài viết

liệu

Ý nghĩa

MongoDB tự tạo khi object Post được tạo.

10 likes [String] Lượng yêu thích của bài viết

Series: Lưu trữ các loại bài viết

liệu

Ý nghĩa

MongoDB tự tạo khi object Post được tạo.

Trang 31

4 slug String Giúp Url đẹp hơn

5 count Number Số lượng bài viết trong series đó

3.2 Thiết kế kiến trúc chương trình

3.2.1Tổng quát kiến trúc của hệ thống

Trước kia ứng dụng giao tiếp với database trực tiếp, việc giao tiếp trực tiếp nàylàm làm cho việc code trở nên nhanh chóng nhưng độ bảo mật không cao và khá

là phức tạp

Chính vì vậy người ta đã cho ra đời mô hình Client - Server và nhóm đã dựa trên

mô hình này để phát triển ứng dụng cho đồ án

Trang 32

Client-Server là mô hình mạng máy tính bao gồm 2 thành phần chính là máykhách (client) và máy chủ (server) Trong mô hình này, server là nơi lưu trữ dữliệu, cài đặt các chương trình dịch vụ và thực hiện các yêu cầu của client Client

có vai trò là gửi yêu cầu đến server

Máy tính đóng vai trò là máy khách – Client: Với vai trò là máy khách, chúng sẽkhông cung cấp mà chỉ sử dụng dữ liệu được cung cấp từ máy chủ Một clienttrong mô hình này có thể là một server cho mô hình khác, tùy thuộc vào nhu cầu

sử dụng của người dùng

Máy tính đóng vai trò là máy chủ – Server: Là máy tính có khả năng cung cấp tàinguyên và các dịch vụ đến các máy khách khác trong hệ thống mạng Server đóngvai trò hỗ trợ cho các hoạt động trên máy khách client diễn ra hiệu quả hơn.Client và server sẽ giao tiếp với nhau qua giao thức http(s) bằng các thông điệprequest và respond

Việc sử dụng mô hình Client - Server sẽ giúp chống quá tải mạng,mở rộng hệthống, frontend và backend không cần chung nền tảng là có thể hoạt độngđược

Định dạng
Số trang	56
Dung lượng	3,58 MB