Báo cáo Đồ Án Đồ Án phần mềm web Đề tài blog website dành cho developer

Mở đầu Khi công nghệ không ngừng phát triển mạnh mẽ, nó đóng vai trò ngày càng quan trọng trong cuộc sống của các lập trình viên, những người luôn phải học hỏi và thích nghi với các công

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC KINH DOANH VÀ CÔNG NGHỆ HÀ NỘI

BÁO CÁO ĐỒ ÁN

ĐỒ ÁN PHẦN MỀM WEB

Đề Tài: Blog website dành cho developer

Họ Và Tên: Nguyễn Văn Dũng

Mã Sinh Viên: 2722245151

Chương II: LUỒNG HOẠT ĐỘNG CỦA ỨNG DỤNG

1 Luồng hoạt động tổng quát

2 Luồng hoạt động chi tiết

CHƯƠNG III: TỔNG QUAN GIAO DIỆN VÀ KẾT LUẬN

1.6 Lưu bài viết 1.7 Trang cá nhân người dùng 1.8 Tags

1.9 Search (tìm kiếm)

2 Hạn chế

3 Kết luận

Mở đầu

Khi công nghệ không ngừng phát triển mạnh mẽ, nó đóng vai trò ngày càng quan trọng trong cuộc sống của các lập trình viên, những người luôn phải học hỏi và thích nghi với các công

cụ, framework, và phương pháp mới Việc chia sẻ và tiếp cận kiến thức đã trở thành yếu tố thiết yếu để lập trình viên nâng cao kỹ năng, giải quyết các vấn đề phức tạp, và xây dựng

những phần mềm tốt hơn

Hiểu được tầm quan trọng của việc chia sẻ thông tin trong

cộng đồng lập trình viên, em đã tạo ra một blog website

dành riêng cho developer Website này cung cấp các bài viết,

hướng dẫn, và mẹo vặt hữu ích, dễ hiểu và thực tế Chỉ cần một thiết bị có kết nối internet, các lập trình viên có thể tìm thấy tài liệu mình cần mà không mất quá nhiều thời gian Blog được xây dựng với mục tiêu hỗ trợ lập trình viên học hỏi, phát triển,

và đóng góp cho một hệ sinh thái công nghệ bền vững

CHƯƠNG I: NODE.JS VÀ CÁC CÔNG CỤ HIỆN ĐẠI

Chương này sẽ giới thiệu một số công nghệ chính được sử

dụng để xây dựng đồ án, bao gồm Express.js, Next.js,

TypeScript và MongoDB

1 Node.js

Trước khi đi vào giới thiệu các công nghệ chính, chúng ta cần nói về Node.js, bởi nó là nền tảng cơ bản cho nhiều công nghệ web hiện đại mà chúng ta sẽ sử dụng

Node.js là một nền tảng runtime JavaScript được xây dựng trên V8 Engine của Google, cho phép thực thi mã JavaScript bên ngoài trình duyệt Ra mắt vào năm 2009 bởi Ryan Dahl, Node.js đã nhanh chóng trở thành công cụ quan trọng giúp lập trình viên phát triển các ứng dụng phía server với hiệu suất cao

Điểm mạnh của Node.js là kiến trúc xử lý bất đồng bộ

(asynchronous) và cơ chế không chặn (non-blocking I/O), giúp

xử lý nhiều yêu cầu đồng thời mà không làm giảm hiệu suất Chính vì vậy, Node.js rất phù hợp cho các ứng dụng thời gian thực như chat, game online, hay xử lý dữ liệu lớn

Với hệ sinh thái phong phú nhờ trình quản lý gói npm, Node.js cung cấp hàng triệu thư viện giúp lập trình viên phát triển ứng dụng từ đơn giản đến phức tạp một cách nhanh chóng và hiệu quả Không chỉ dùng cho backend, Node.js còn được ứng dụng rộng rãi trong phát triển API, microservices, và các ứng dụng IoT

Node.js không chỉ giúp thực thi mã JavaScript trên server mà còn tạo ra môi trường để các framework và thư viện khác hoạt động hiệu quả Khi hiểu rõ Node.js, chúng ta sẽ thấy được

cách mà các công nghệ như Express.js, Next.js, TypeScript, và

MongoDB kết hợp với nhau để tạo ra các ứng dụng web mạnh

mẽ và tối ưu

2 Express.js

Express.js là một framework web tối giản và linh hoạt được xây dựng trên nền tảng Node.js Ra đời vào năm 2010, Express.js cung cấp một tập hợp các công cụ và tính năng mạnh mẽ, giúp lập trình viên dễ dàng xây dựng ứng dụng web và API một

Với sự hỗ trợ của hệ sinh thái Node.js và trình quản lý gói npm, Express.js cho phép lập trình viên tích hợp dễ dàng với các công cụ và thư viện khác, giúp tăng tốc quá trình phát triển ứng dụng Đây là một trong những framework backend phổ biến nhất hiện nay, đặc biệt phù hợp cho các dự án cần sự tối ưu và hiệu quả

3 NextJS

Next.js là một framework được xây dựng bởi Vercel, dựa trên

React – framework frontend phổ biến nhất thời điểm hiện tại

Next.js mở rộng và bổ sung các tính năng mạnh mẽ như

Server-Side Rendering (SSR), Static Site Generation (SSG) và API Routes

Next.js giúp tối ưu hóa hiệu suất ứng dụng, cải thiện SEO và mang lại trải nghiệm người dùng mượt mà hơn Nhờ vào khả năng tối ưu hóa tốc độ tải trang, hỗ trợ render phía server và tính năng tạo trang tĩnh, Next.js đã trở thành một lựa chọn phổ

biến cho việc phát triển các ứng dụng web hiện đại, từ các

TypeScript được sử dụng trong phát triển ứng dụng web vì nhiều lý do, trong đó quan trọng nhất là khả năng kiểm tra lỗi tại thời điểm biên dịch Điều này giúp phát hiện các lỗi tiềm ẩn trong mã nguồn trước khi ứng dụng được chạy, giảm thiểu rủi

ro và chi phí sửa lỗi trong quá trình phát triển Ngoài ra, hệ

thống kiểu dữ liệu của TypeScript giúp cải thiện khả năng hiểu

mã, hỗ trợ autocompletion và tăng cường khả năng làm việc nhóm nhờ vào sự rõ ràng trong định nghĩa kiểu dữ liệu

Sử dụng TypeScript giúp tạo ra mã nguồn an toàn, dễ bảo trì

và mở rộng, đặc biệt khi dự án trở nên phức tạp hoặc làm việc với các team phát triển lớn Thêm vào đó, TypeScript có sự tương thích tuyệt vời với các thư viện và framework phổ biến như React, Node.js, và Next.js, giúp tăng cường hiệu quả trong phát triển ứng dụng web hiện đại

5 MongoDB

MongoDB là một cơ sở dữ liệu NoSQL mã nguồn mở, được thiết kế để lưu trữ dữ liệu dưới dạng tài liệu (document) thay vì các bảng như trong các cơ sở dữ liệu quan hệ (SQL) Dữ liệu trong MongoDB được lưu trữ dưới dạng BSON (Binary JSON), cho phép lưu trữ các kiểu dữ liệu phức tạp như mảng, đối

tượng lồng nhau, giúp dễ dàng mở rộng và linh hoạt hơn trong việc quản lý dữ liệu MongoDB được sử dụng rộng rãi trong các ứng dụng web hiện đại, đặc biệt là các ứng dụng cần xử lý

dữ liệu lớn hoặc dữ liệu có cấu trúc không cố định

MongoDB được ưa chuộng vì tính linh hoạt và khả năng mở rộng Dữ liệu trong MongoDB không yêu cầu phải có cấu trúc

cố định, giúp ứng dụng dễ dàng thích nghi với sự thay đổi và

mở rộng theo thời gian Điều này rất hữu ích trong các ứng dụng phát triển nhanh hoặc khi dữ liệu có sự thay đổi liên tục Hơn nữa, MongoDB hỗ trợ khả năng phân tán (sharding) và sao lưu (replication), giúp tối ưu hóa hiệu suất và độ tin cậy của

hệ thống trong môi trường đám mây hoặc các hệ thống phân tán

Với khả năng làm việc tốt trong các ứng dụng cần xử lý dữ liệu phi cấu trúc hoặc bán cấu trúc, MongoDB là lựa chọn lý tưởng cho các dự án web hiện đại, từ các trang web tĩnh đến các ứng dụng phức tạp đòi hỏi khả năng mở rộng và linh hoạt cao

CHƯƠNG II: LUỒNG HOẠT ĐỘNG CỦA ỨNG DỤNG

1 Luồng hoạt động tổng quát

- Người dùng đăng nhập hoặc đăng ký tài khoản

- Người dùng có thể tạo, quản lý bài viết, bình luận, và tương tác với các bài viết qua các tính năng như like, sửa/xóa

- Người dùng theo dõi các tag hoặc người dùng khác để xem các bài viết liên quan

- Người dùng có thể tìm kiếm và lọc bài viết theo các tiêu chí như thời gian hoặc sự tương tác

- Người dùng có thể chỉnh sửa trang cá nhân

2 Luồng hoạt động chi tiết

- Đăng ký và Xác thực Email

người dùng, mật khẩu) vào form đăng ký

đăng ký và kích hoạt tài khoản

- Đăng nhập (Username/Mật khẩu, Google/GitHub)

(username/mật khẩu hoặc Google/GitHub)

thống kiểm tra thông tin và xác thực đăng nhập, chuyển hướng về url cuối trước khi chuyển vào trang đăng nhập

 Bước 3: Nếu đăng nhập bằng Google/GitHub, người dùng được chuyển hướng đến trang xác thực của

Google/GitHub, chuyển hướng về url cuối trước khi

chuyển vào trang đăng nhập

hoàn tất việc thay đổi, loại bỏ toàn bộ các phiên đăng

nhập khác ngoài người dùng vừa thay đổi mật khẩu

- Đăng bài và Quản lý Bài viết (Sửa/Xóa)

đăng bài

sau đó nhấn “Start Publishing”, một cửa sổ sẽ hiện lên để nhập tóm tắt bài viết, các tag và sau đó đăng bài Nếu người dùng thoát khỏi trang đăng bài, nội dung bài viết sẽ được tự động lưu lại

 Bước 3: Bài viết được lưu vào cơ sở dữ liệu và hiển thị trên trang chủ

mình bất cứ lúc nào

- Bình luận và Quản lý Bình luận (Sửa/Xóa)

luận

 Bước 2: Người dùng nhập bình luận và nhấn "Submit" Hoặc “Reply” nếu đang trả lời, nhấn “Dismiss” để tắt

editor

thị dưới bài viết

mình

- Like Bài Viết và Bình luận

tim) trên bài viết hoặc bình luận

 Bước 2: Hệ thống cập nhật trạng thái "Like" và lưu vào cơ

sở dữ liệu

 Bước 3: Số lượng "Like" sẽ được hiển thị trên bài viết hoặc bình luận

- Follow Tag/User

dùng muốn theo dõi

 Bước 2: Nhấn "Follow" để theo dõi tag hoặc người dùng

dùng theo dõi sẽ được hiển thị trong trang cá nhân của người dùng

 Bước 3: Người dùng có thể lọc theo tag hoặc user mà họ

đã follow để chỉ xem bài viết từ những nguồn này

- Sửa Thông Tin Trang Cá Nhân (Username, Mô Tả, Ảnh Đại Diện)

"Chỉnh sửa trang cá nhân"

username, mô tả (about) và ảnh đại diện

"Lưu thay đổi" để hệ thống cập nhật và lưu lại thông tin mới

CHƯƠNG III: TỔNG QUAN GIAO DIỆN VÀ KẾT LUẬN

1 Giao diện

1.1 Giao diện chính với hai chế độ sáng/tối

Giao diện trương trình hiện thị những bài viết mới nhất, một thanh điều hướng phía trên để thực hiện các tác vụ như đăng

nhập/đăng ký, tìm kiếm, thay đổi chế độ sáng/tối và lọc bài viết:

1.2 Đăng nhập/đăng ký

Khi người dùng nhấn “Sign in” hoặc “Create account” thì sẽ được đưa đến trang đăng nhập hoặc đăng ký:

Đăng nhập:

Đăng ký:

1.3 Sau khi đăng nhập

Sau khi đăng nhập, thanh điều hướng sẽ thay đổi Giờ đây sẽ

có nút tạo bài viết (Create artice), và khi nhấn vào avatar người dùng sẽ hiển thị một menu dropdown để truy cập vào trang cá nhân, trang các bài viết đã lưu hoặc đăng xuất:

Sau khi đăng nhập, các trạng thái như bài viết đã thích cũng sẽ được hiển thị, ví dụ như trái tim màu đỏ là hiển thị rằng người dùng đăng nhập đã like bài viết này, trái tim rỗng là chưa:

Tương tự với trạng thái follow (theo dõi):

1.4 Giao diện bên trong một bài viết

Bên trong bài viết sẽ là tiêu đề, sau đó là các tag, người đăng

và thời gian đăng Bên dưới đó sẽ là nội dung bài viết

Phía dưới cùng bài viết sẽ có một mục cho phép like bài viết, nút share để copy link bài viết, và bên dưới là phần comment:

1.5 Đăng bài viết, sửa và xóa

Khi nhấn “Create article” (tạo bài viết), người dùng sẽ được chuyển đến trang tạo bài viết:

Phần nhập nội dung bài viết sẽ hỗ trợ markdown, hỗ trợ nhiều chức năng như up ảnh, viết code, tự tạo mục lục Mục bên trái

là editor, bên phải là phần xem trước:

Sau khi hoàn thiện nội dung, người dùng có thể nhấn “Start Publishing” (bắt đầu xuất bản) để tiếp tục, sau đó sẽ có một cửa sổ hiện lên để nhập tóm tắt và tags (không bắt buộc) để xuất bản bài viết:

Sau khi đăng bài, người dùng sẽ được chuyển hướng tới bài viết vừa đăng Ở đây người dùng có thể nhấn vào dấu 3 chấm bên phải tác giả, trong đó có thể lưu bài viết, copy link bài viết Nếu là tác giả thì sẽ có thêm mục update/delete (sửa, xóa):

Vì mục đích SEO, các bài viết sẽ có URL dạng viết-abcd” Ví dụ như bài đăng trên có tiêu đề “New article” thì

“Tiêu-đề-bài-sẽ có URL như ảnh dưới đây Như vậy “Tiêu-đề-bài-sẽ dễ lên top tìm kiếm của google:

1.6 Lưu bài viết

Các bài viết được người dùng lưu lại (để đọc sau) sẽ được lưu tại một trang riêng gọi là “Bookmarks” có thể truy cập thông qua thanh điều hướng:

Người dùng có thể lưu (bookmark) bài viết ngay tại danh sách bài viết (góc dưới bên phải của bài viết), hoặc bên trong bài viết ở phần menu bên phải tác giả:

1.7 Trang cá nhân người dùng

Trang cá nhân sẽ hiển thị các thông tin như avatar, username, giới thiệu, số bài viết đã đăng, số lượng follower, thời gian

tham gia nền tảng và danh sách bài viết của người dùng đó:

Người dùng có thể sửa thông tin cá nhân thông qua nút “Edit profile”:

Vừa rồi là tổng thể giao diện chương trình, và một điều nữa là

tất cả những giao diện trên đều fully responsive Tức là tất cả

đều sẽ hoạt động và hiển thị tốt trên mobile, giao diện sẽ thay đổi tùy biến vào thiết bị

2 Hạn chế

- Website chưa được thử nghiệm trên internet

- Có thể còn lỗi nhỏ chưa phát hiện

3 Kết luận

Sau thời gian thực hiện đề tài, chương trình phần lớn đã hoàn thành và giúp em học được nhiều kiến thức mới, tích lũy thêm kinh nghiệm, và nắm được cách làm việc với các framework và công cụ hiện đại Quá trình phát triển không chỉ giúp em hiểu rõ hơn về Node.js, Express.js, Next.js, TypeScript và MongoDB

mà còn rèn luyện kỹ năng giải quyết vấn đề và tối ưu hóa hiệu suất Chương trình được xây dựng khá bài bản, với giao diện thân thiện và dễ sử dụng, đáp ứng được các yêu cầu của

người dùng Em cũng đã có cơ hội cải thiện kỹ năng, quản lý thời gian và triển khai ứng dụng từ giai đoạn thiết kế đến hoàn thiện Đây là một bước tiến quan trọng trong việc phát triển kỹ năng lập trình và thiết kế ứng dụng web của bản thân em