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

GIỚI THIỆU ĐỀ TÀI

Hiện trạng

Hiện nay, nhiều cá nhân viết blog với động lực riêng, trong đó nhiều người sử dụng nó như một hình thức thay thế cho nhật ký hoặc tạp chí Viết blog không chỉ giúp họ ghi lại suy nghĩ mà còn là một không gian để chia sẻ sự sáng tạo và ý tưởng với đông đảo độc giả.

Các thương hiệu hàng đầu và doanh nghiệp đang sử dụng blog để giáo dục khách hàng, chia sẻ thông tin và mở rộng đối tượng tiếp cận Việc viết blog trở thành một yếu tố quan trọng trong chiến lược tiếp thị trực tuyến của 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ông nghiệ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ếm tiền khác nhau

● Các doanh nghiệp sử dụng blog để đưa nhiều khách hàng tiềm năng hơ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ác chiến dịch truyền thông xã hội và gây

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

Mục đích và yêu cầu của đề tài

- 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ông nghệ thông tin giao lưu, chia sẻ

- 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ười dù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ình phầ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 đó

- Dành cho những lập trình viên có nhu cầu đọc các bài blog để mở rộng thê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

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 thủ các tiêu chuẩn thiết kế ứng dụng hiện hành và đã thực hiện một cách bài bản từng bước trong quá trình phát triển ứng dụng.

Nhóm tiến hành nghiên cứu các ứng dụng hiện có trên thị trường với chức năng tương tự nhằm bắt kịp xu hướng, vì chưa có ứng dụng nào hỗ trợ điều này.

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

● Bước 3: Nhóm tiến hành vẽ Activity Diagram để mô hình hoá sự tương tác giữ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ùng theo 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ọn một môi trường phù hợp phát triển ứng dụng của mình Nhóm đã chọn ReactJS

JavaScript là thư viện phổ biến cho việc xây dựng giao diện người dùng, được các công ty và lập trình viên ưu tiên sử dụng trong phát triển front-end cho ứng dụng Công nghệ này sẽ được nhóm chia sẻ trong đồ á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êm nhữ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

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

• 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

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

Danh sách tác nhân

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.

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 Lưu bài viết Lưu lại những bài viết đã thích

Đặc tả

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

Tên chức năng Authentication(Login)

Mô tả Người dùng có thể đăng nhập tài khoản cho trang web

Tác nhân User Điều kiện trước Người dùng đã có tài khoản Điều kiện sau Không có

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

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ủ

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ặc nhậ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

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ại trang chủ của web và hiển thị avatar, tên người dùng, bookmark, thông

12 báo, nút đăng xuất và quản lí nội dung trên thanh điều hướng của trang web

- 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ười dùng nhập lại tên tài khoản và mật khẩu

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

Tên chức năng Show Bills

Mô tả User đăng xuất

Tác nhân User Điều kiện trước Đã đăng nhập Điều kiện sau User đăng xuất khỏi trang web

1 User chọn lựa chọn Logout từ biểu tượng mũi tên đi xuống tại góc phải trên của màn hình

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

2.3.3 Đặc tả Use-case “Sign Up”

Tên chức năng Sign Up

Mô tả User đăng ký thông tin tài khoản

Người dùng chưa có tài khoản sẽ được yêu cầu đăng ký Sau khi hoàn tất quá trình đăng ký thành công, người dùng sẽ tự động được đăng nhập vào hệ thống.

1 User khi đang ở trang đăng nhập, nhấn vào “Don’t have an account? Sign Up” để chuyển sang đăng ký tài khoản mới

2 User nhập nhập đầy đủ các trường First Name, Last Name, Email,

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

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

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ào trang web

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

Tên chức năng Xem bài viết

Người dùng có thể xem bài viết, nhưng nếu chưa đăng nhập, họ chỉ có quyền xem nội dung Khi đã đăng nhập, người dùng sẽ có khả năng thích, bình luận và chia sẻ bài viết đó.

Tác nhân User Điều kiện trước Không có Điều kiện sau Không có

1 User chọn bài viết muốn xem trên trang chủ hoặc từ danh sách các bài viế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

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

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

Tên chức năng Sửa bài viết

Mô tả User chỉnh sửa những bài viết mà

Tác nhân User Điều kiện trước User đăng nhập thành công tài khoản Điều kiện sau Không có

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àn hì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 đang hiể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 User đang thực hiện thực hiện thay đổi nhưng điều hướng sang màn hình khác Ứng dụng sẽ gửi thông báo xác nhận

1.1 Nếu người dùng chọn Continue Editing, User sẽ tiếp tục chỉnh sửa bài viết

1.2 Nếu người dùng chọn Discard Post Người dùng sẽ dừng chỉnh sửa và thông tin chỉnh sửa sẽ không được lưu lại

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 xem bài viết đã chỉnh sửa

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

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

Mô tả User thêm bài viết mới

Tác nhân User Điều kiện trước User đăng nhập thành công tài khoản Điều kiện sau Không có

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ết thành công

1 User đang thực hiện điền thông tin nhưng điều hướng sang màn hình khác Ứng dụng sẽ gửi thông báo xác nhận

1.1 Nếu người dùng chọn Continue Editing, User sẽ tiếp tục việc chỉnh sửa nội dung cho bài viết cần thêm

1.2 Nếu người dùng chọn Discard Post Bài viết sẽ không được thêm

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 Add Post

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

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

Tên chức năng Xóa bài viết

Mô tả User xóa những bài viết của mình

Tác nhân User Điều kiện trước User đã đăng nhập vào trang web và đã publish ít nhất 1 bài viết Điều kiện sau Không có

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

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

5.2 Bài viết được xóa, trang web reload lại danh sách các bài viết

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

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

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.3.8 Đặc tả Use-case “Like bài viết”

Tên chức năng Like bài viết

Mô tả User like những bài viết mình thích

Tác nhân User Điều kiện trước User đã đăng nhập vào trang web Điều kiện sau Không có

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

Người dùng đã đã đăng nhập

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

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

Tên chức năng Share bài viết

Mô tả User xóa những bài viết của mình

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

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

Tên chức năng Comment bài viết

Mô tả User comment 1 bài viết bất kì

Tác nhân User Điều kiện trước Không có Điều kiện sau Không có

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 đó

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

Tên chức năng Tìm kiếm bài viết

Mô tả User tìm kiếm bài viết theo tag name được gắn theo từng bài viết

1 User ở trang chủ nhập vào thanh tìm kiếm tên của bài viết hoặc tag name muốn tìm kiếm

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ệ

Thiết kế 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

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.

2 email String tên đăng nhập

4 name String Tên người dùng

Post: Lưu trữ thông tin hóa đơn

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 Post được tạo.

2 tags Array Danh sách các tag liên quan của bài viết

3 likes Array Số like của bài viết

4 createdAt String Thời gian bài Blog được tạo

5 title String Tiêu đề bài Blog

6 opening String Phần mở đầu của bài Blog

7 selectedFile String File hình ảnh cover của bài blog

8 name String tên người tạo bài Blog

9 detail String Chi tiết nội dung bài Blog

10 comments Array Mảng chứa danh sách các các Object là các comment của bài bài Blog đó

11 creator String id của người tạo bài Blog này

12 views Integer Số lượt xem bài Blog

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

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

Trước đây, việc ứng dụng giao tiếp trực tiếp với cơ sở dữ liệu giúp tăng tốc độ lập trình, nhưng đồng thời cũng tiềm ẩn rủi ro về bảo mật và gây ra sự phức tạp trong quá trình phát triển.

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

Mô hình Client-Server là một cấu trúc mạng máy tính bao gồm hai thành phần chính: máy khách (client) và máy chủ (server) Trong mô hình này, máy chủ chịu trách nhiệm lưu trữ dữ liệu, cài đặt các chương trình dịch vụ và xử lý các yêu cầu từ máy khách Ngược lại, máy khách có nhiệm vụ gửi yêu cầu đến máy chủ để nhận dữ liệu và dịch vụ cần thiết.

Máy tính hoạt động như một máy khách trong mô hình client-server, chỉ sử dụng dữ liệu từ máy chủ mà không cung cấp dữ liệu Trong một số trường hợp, máy khách cũng có thể đóng vai trò là máy chủ cho mô hình khác, tùy thuộc vào nhu cầu của người dùng.

Máy tính hoạt động như một máy chủ (Server) cung cấp tài nguyên và dịch vụ cho các máy khách trong mạng Vai trò của Server là hỗ trợ các hoạt động của máy khách, giúp chúng 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ệp request và respond

Mô hình Client - Server giúp ngăn ngừa tình trạng quá tải mạng, đồng thời cho phép hệ thống mở rộng dễ dàng Hơn nữa, frontend và backend có thể hoạt động độc lập mà không cần phải chung nền tảng.

3.2.2 Chi tiết mô tả kiến trúc của hệ thống

Theo thống kê từ TopDev, công ty tuyển dụng IT hàng đầu tại Việt Nam, nhu cầu tuyển dụng MEAN Stack Developer đang gia tăng mạnh mẽ cả trong và ngoài nước Tuy nhiên, thị trường lao động đang đối mặt với tình trạng thiếu hụt nhân sự nghiêm trọng trong lĩnh vực này, mặc dù các công ty đã đưa ra mức lương và đãi ngộ hấp dẫn hơn so với trước đây.

Thấy được sự phổ biến của MERN Stack và những ưu điểm vượt trội của Technical Stack này, nhóm đã quyết định áp dụng vào đồ án của mình

Technical stack là sự kết hợp các công nghệ/framework/ngôn ngữ lập trình, vv để tạo nên một phần mềm hoàn chỉnh

Trong phát triển phần mềm hiện đại, thường có hai thành phần chính: client side (front-end) và server side (back-end) Điều này dẫn đến việc phân chia các stack công nghệ thành backend stack và frontend stack Các tên gọi cho các stack này thường được viết tắt bằng chữ cái đầu, ví dụ như LAMP (Linux, Apache, MySQL, PHP) và MEAN (MongoDB, Express).

MERN Stack là nguyên bộ combo open source các công nghệ đều liên quan đến

Javascript là cũng hot nhất hiện nay: MongoDB, ExpressJS, React/React Native, NodeJS Người ta dùng MERN stack để xây dựng React Universal App

Là một noSQL database hot nhất hiện nay MongoDB thường đi với Mongoose - một library để giao tiếp với MongoDB dễ dàng hơn

● MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng

MongoDB là một cơ sở dữ liệu tài liệu, lưu trữ dữ liệu dưới dạng document kiểu JSON, giúp truy vấn nhanh chóng hơn so với các cơ sở dữ liệu quan hệ truyền thống.

Cơ sở dữ liệu quan hệ sử dụng bảng để lưu trữ dữ liệu, với các hệ quản trị như MySQL và SQL Server, giúp tổ chức và quản lý thông tin một cách hiệu quả.

MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

● So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong

● Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

● Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

NodeJS được xây dựng dựa trên JavaScript runtime Nghe thật tuyệt, nhưng mà nó có nghĩa là gì? Nó hoạt động như thế nào?

Nền tảng Node runtime bao gồm mọi thứ mà bạn cần để hoàn thành một chương trình viết bằng JavaScript

NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viết bằng c++ và Javascript Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009

Node.js được phát triển bởi các lập trình viên JavaScript tiên phong, biến nó từ một ngôn ngữ chỉ có thể chạy trên trình duyệt thành một nền tảng cho phép chạy ứng dụng độc lập trên máy tính cá nhân.

Giờ đây bạn có thể làm được nhiều thứ với JavaScript hơn là chỉ tương tác với các website

Cả trình duyệt JavaScript và Node.js đều sử dụng động cơ V8 để thực thi mã Động cơ này chuyển đổi mã JavaScript thành mã máy (bytecode), giúp tăng tốc độ thực thi Mã máy là dạng mã thấp cấp, cho phép máy tính chạy mà không cần biên dịch lại.

ExpressJs là một framework nhẹ nhưng linh hoạt, được phát triển dựa trên nền tảng Node.js Nó mang lại nhiều tính năng mạnh mẽ, hỗ trợ hiệu quả cho việc phát triển ứng dụng web và di động.

Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên các bạn không phải lo lắng khi làm việc với Framework này

Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ của NodeJS

Và hơn hết, các Framework nổi tiếng của NodeJS hiện nay đều sử dụng ExpressJS như một core function, chẳng hạn: SailsJS, MEAN,

React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI)

Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới để render trang web

Công cụ này, được phát triển bởi Facebook, ra mắt vào năm 2013 dưới dạng mã nguồn mở JavaScript Hiện nay, nó đã vượt qua các đối thủ lớn như Angular và Bootstrap, trở thành một trong những thư viện JavaScript phổ biến nhất.

Tại sao sử dụng React?

React là một thư viện JavaScript phổ biến được sử dụng bởi nhiều công ty lớn trên toàn cầu như Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay và Instagram, chứng tỏ rằng nó sở hữu những lợi thế vượt trội so với các đối thủ khác.

Dưới đây là một số lý do để sử dụng nó:

React là một thư viện GUI mã nguồn mở bằng JavaScript, chuyên tập trung vào việc tối ưu hóa hiệu suất cho giao diện người dùng (UI) Nó thuộc loại "View" trong mô hình MVC (Model-View-Controller).

Là lập trình viên JavaScript, bạn sẽ dễ dàng hiểu được những điều cơ bản về

React Bạn thậm chí có thể bắt đầu phát triển các ứng dụng dựa trên web bằng cách sử dụng react chỉ trong vài ngày

Thiết kế giao diện

3.2.1 Danh sách các màn hình

3.2.2 Mô tả các màn hình

STT Tên control Chức năng/Xử lý

1 Image Chuyển giao diện sang trang Post Detail

3 Link Chuyển giao diện sang trang About Us

4 Input Tìm kiếm bài viết

1 Input Nhập Email người dùng

3 Button Thực hiện đăng nhập vào hệ thống

4 Button Chuyển sang đăng nhập bằng tài khoản Google

5 Button Chưa có tài khoản Khách hàng sẽ chuyển sang trang đăng kí để thực hiện tạo tài khoản

Màn hình trang đăng kí

1 Input Nhập First Name người dùng

2 Input Nhập Last Name người dùng

3 Input Nhập Email người dùng

6 Button Thực hiện đăng kí tài khoản Nếu thành công hệ thống sẽ tự động đăng nhập vào trang chủ

7 Button Chuyển sang giao diện Signin để thực hiện việc đăng nhập

1 Thẻ div Thực hiện chia sẻ qua Facebook

2 Thẻ div Thực hiện chia sẻ qua Instagram

3 Thẻ div Thích bài viết

4 Button Trỏ vào sẽ hiện ra 2 lựa chọn Settings và Logout Chọn

Settings để chuyển sang giao diện quản lí bài viết Chọn Logout để đăng xuất khỏi hệ thống

5 Button Chuyển sang trang danh sách các bài viết đã thích

6 Link Chuyển giao diện sang trang chủ

7 Link Xem bài viết khác

1 Thẻ div Chuyển sang giao diện Edit Post

2 Thẻ a Chuyển sang giao diện Add Post

3 Button Chuyển trang về trang trước

4 Button Chuyển trang về trang sau

1 Input Nhập Title cho bài viết

2 Button Chọn hình ảnh từ máy tính

3 Input Nhập các tag liên quan đến bài viết

4 Input Nhập bài viết mở đầu

5 Input Nhập nội dung chính của bài viết Chỉnh sửa nội dung dựa trên thanh công cụ phía trên

6 Button Chuyển sang chế độ xem lại nội dung của bài viết

7 Button Lưu nội dung đã chỉnh sửa của bài viết

1 Input Nhập Title cho bài viết

2 Button Chọn hình ảnh từ máy tính

3 Input Nhập các tag liên quan đến bài viết

4 Input Nhập bài viết mở đầu

5 Input Nhập nội dung chính của bài viết Chỉnh sửa nội dung dựa trên thanh công cụ phía trên

6 Button Chuyển sang chế độ xem lại nội dung của bài viết

7 Button Thực hiện thêm bài viết vào hệ thống

CÀI ĐẶT VÀ KIỂM THỬ

Môi trường cài đặ t: Visual Studio Code

● Front-End sử dụng library ReactJS, Redux để quản lý state

● Back-End sử dụng NodeJS và Framework ExpressJS

Thử nghiệm: Chạy được trên các trình duyệt web.

Tiêu đề	Tìm Hiểu Reactjs Và Xây Dựng Blog Chia Sẻ Kiến Thức
Tác giả	Dương Minh Sang, Lê Hoàng Thiện
Người hướng dẫn	GVHD: Thái Thụy Hàn Uyển
Trường học	Vietnam National University Ho Chi Minh City
Chuyên ngành	Software Engineering
Thể loại	báo cáo cuối kỳ
Năm xuất bản	2021
Thành phố	TPHCM

Định dạng
Số trang	49
Dung lượng	1,69 MB