GIỚI THIỆU ĐỀ TÀI
Tổng quan
InStare là mạng xã hội chuyên về nội dung trực quan như hình ảnh và video, giúp người dùng kết nối và thể hiện bản thân Với giao diện thân thiện và công cụ chỉnh sửa ảnh tiện lợi, InStare cho phép bạn chia sẻ khoảnh khắc, sự sáng tạo và sở thích đến với người theo dõi, lan tỏa nguồn cảm hứng trong cộng đồng.
Mục đích
Mạng xã hội là nền tảng trực tuyến giúp cá nhân và tổ chức tương tác qua việc chia sẻ thông tin, ý kiến, hình ảnh và video Nó kết nối người dùng với cộng đồng có cùng sở thích và quan điểm, đồng thời cung cấp công cụ quản lý mối quan hệ, xây dựng thương hiệu, quảng cáo và kinh doanh trực tuyến.
- Đem đến một cộng đồng có thể đưa những người cùng sở thích, sở trường đến với nhau, cùng nhau chia sẻ và tạo dựng mối quan hệ
- Cung cấp một nền tảng cho mọi người giao tiếp với nhau qua tin nhắn
- Chia sẻ hình ảnh và video đến lượng lớn người dùng
- Cung cấp các tính năng và công cụ để nâng cao tầm nhìn, tạo giá trị cho cộng đồng và đóng góp vào cuộc sống của người dùng
- Thiết kế và phát triển một ứng dụng web chất lượng cao, đáp ứng các yêu cầu của người dùng và đảm bảo tính ổn định và an toàn
- Tối ưu hóa trải nghiệm người dùng bằng cách xây dựng một hệ thống trực quan, dễ sử dụng, cải thiện tính năng, hiệu suất, giao diện
- Thiết kế và triển khai một hệ thống lưu trữ và quản lý dữ liệu hiệu quả
1.1.3 Đối tượng sử dụng: Đối tượng sử dụng của mạng xã hội có thể là bất kỳ ai (thông thường là từ 13 tuổi trở lên), bao gồm các cá nhân, tổ chức, doanh nghiệp hoặc cộng đồng Mạng xã hội
Mạng xã hội đã trở thành một công cụ mạnh mẽ để kết nối và tương tác với những người có cùng sở thích và quan điểm Nó cho phép người dùng chia sẻ thông tin, bày tỏ ý kiến, giải trí và xây dựng mối quan hệ kinh doanh Người dùng có thể tùy chỉnh trang cá nhân và lựa chọn kết nối với những người bạn mong muốn, từ đó tạo ra một mạng lưới cá nhân hoặc cộng đồng trực tuyến.
Case-study tham khảo
Môi trường phát triển
- Cơ sở dữ liệu: MongoDB
- Công cụ phân tích, thiết kế: Figma, draw.io, StarUML,…
- Môi trường làm việc nhóm: Notion, Google Drive, Microsoft Teams,
- Các framework sử dụng: NodeJS, NestJS, ReactJS
- Ngôn ngữ lập trình: JavaScript, TypeScript
- Quản lý phiên bản: Git.
Mô tả quy trình thực hiện các công việc chính
• Bước 1: Xác định các yêu cầu:
- Phân tích khả thi quy mô thực hiện
- Tìm hiểu quy trình nghiệp vụ
- Tham khảo và trải nghiệm các ứng dụng liên quan
- Khảo sát người dùng qua mạng
- Thu thập thông tin yêu cầu
• Bước 2: Thiết kế hệ thống:
- Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan
• Bước 3: Thiết kế dữ liệu
Thiết kế dữ liệu phù hợp với từng loại yêu cầu của phần mềm là rất quan trọng để đảm bảo tính chính xác và khả năng phát triển của hệ thống, đồng thời nâng cao hiệu quả trong việc truy xuất và lưu trữ thông tin.
- Xác định và lập danh sách các bảng dữ liệu cần thiết cho các yêu cầu của phần mềm
- Xây dựng sơ đồ logic cụ thể của phần mềm
• Bước 4: Thiết kế giao diện
- Lập ra danh sách các màn hình khi người dùng tương tác với phần mềm
- Mô tả các đối tượng trên từng màn hình
- Xác định những chức năng hiển thị trên từng màn hình
• Bước 5: Code và kiểm thử
- Code trình bày theo mô hình 3 lớp và được phân chia theo các nhiệm vụ yêu cầu
- Testcase rõ ràng để kiểm tra tính hiệu quả của hệ thống
CƠ SỞ LÝ THUYẾT
Ngôn ngữ lập trình Javascript
JavaScript là ngôn ngữ lập trình phổ biến cho việc phát triển các trang web tương tác, được tích hợp vào HTML để làm cho website trở nên sống động Nó thực hiện vai trò quan trọng trong việc chạy các script phía người dùng (Client-Side Script) và cả phía máy chủ thông qua Node.js, giúp tạo ra các trang web động.
JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng
HTML, CSS và JavaScript là ba ngôn ngữ chính trong lập trình web, có mối liên hệ chặt chẽ để tạo ra một website sống động và chuyên nghiệp.
• HTML: Cung cấp cấu trúc cơ bản, hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website
• CSS: Được sử dụng để kiểm soát và hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…
• JavaScript: Tạo nên những nội dung “động” trên website
2.1.2 Cách thức hoạt động của Javascript trên trang web:
JavaScript thường được nhúng trực tiếp vào trang web hoặc tham chiếu từ file js riêng Là ngôn ngữ phía client, JavaScript sẽ được tải về máy client khi truy cập và xử lý tại đó, thay vì tải về máy server và phản hồi kết quả sau khi xử lý xong.
Cách thức hoạt động của Typescript trên trang web
JavaScript có các ưu điểm được xem là vượt trội so với các đối thủ khác trong các trường hợp thực tế như:
• Chương trình JavaScript rất dễ học
• Lỗi JavaScript dễ phát hiện và sẽ giúp bạn sửa lỗi nhanh hơn
• Các trình duyệt web có thể dịch nó bằng HTML mà không cần một compiler
• JS hoạt động trên rất nhiều nền tảng và trình duyệt khác nhau
• Được đánh giá là ngôn ngữ lập trình nhẹ, nhanh so với các ngôn ngữ khác
• JS có thể được gắn trên một số element hoặc các events của trang web
• Khi website có sử dụng JS thì sẽ giúp cho trang web đó tương tác và tăng trải nghiệm người dùng khi truy cập
• Bạn có thể tận dụng JavaScript để kiểm tra các input thay vì kiểm tra thủ công thông qua việc truy xuất database
• Giao diện phong phú gồm các thành phần Drag and Drop, Slider để cung cấp một Rich Interface (Giao diện giàu tính năng)
Mặt khác, ngoài những ưu điểm nhưng mọi ngôn ngữ lập trình khác đều có những nhược điểm riêng của nó như:
• Dễ bị khai thác từ những hacker và scammer
• Có thể được dụng để thực thi mã độc trên máy tính của người dùng
• Các thiết bị khác nhau có thể thực hiện JS khác nhau dẫn đến không đồng nhất
• Vì tính bảo mật nên client-side JavaScript không cho phép đọc và ghi các file
• JS không được hỗ trợ khi sử dụng trong kết nối mạng
• JavaScript không có khả năng đa luồng hoặc đa xử lý.
Ngôn ngữ lập trình Typescript
TypeScript là một ngôn ngữ lập trình mã nguồn mở do Microsoft phát triển, được nâng cấp từ JavaScript với tính năng kiểu tĩnh và hỗ trợ lập trình hướng đối tượng, giúp tăng cường tốc độ và độ ổn định cho các ứng dụng.
Mặc dù ra đời sau CoffeeScript và Dart nhưng TypeScript vẫn nhận được phản hồi vượt trội của nhiều lập trình viên bởi tính năng vận hành vượt trội
TypeScript, được phát triển bởi Anders Hejlsberg, là một ngôn ngữ lập trình mã nguồn mở nổi bật, đóng góp lớn cho nhiều ngôn ngữ khác như Delphi, Turbo Pascal và C# Ngày nay, TypeScript được ứng dụng rộng rãi trong các ứng dụng client-side như Angular và NodeJS.
TypeScript hoàn toàn tích hợp tính năng classes và modules tương đương với ECMAScript 2015 (ES6) Hơn nữa, TypeScript còn nâng cấp phiên bản của mình để áp dụng nhiều kỹ thuật mới từ ECMAScript.
Nhiều framework JavaScript hiện nay khuyến khích người dùng sử dụng TypeScript để phát triển, giúp quá trình lập trình trở nên dễ dàng và tối ưu hơn Điển hình là các phiên bản Ionic 2.0 và AngularJS 2.0.
TypeScript hỗ trợ phát triển các dự án lớn một cách dễ dàng nhờ vào việc tích hợp nhiều kỹ thuật hiện đại, đảm bảo tính lập trình hướng đối tượng chính xác và nhanh chóng.
TypeScript là một mã nguồn mở cho phép người dùng sử dụng miễn phí để phục vụ cho công việc của mình, đồng thời hỗ trợ tích cực cho cộng đồng phát triển.
TypeScript hỗ trợ đầy đủ các tính năng hiện đại của JavaScript, bao gồm cả những cập nhật mới nhất từ ECMAScript 2015 (ES6).
• TypeScript là JavaScript: Khả năng biên dịch tạo ra những đoạn mã
TypeScript là một ngôn ngữ lập trình linh hoạt và ổn định, cho phép lập trình viên dễ dàng chạy mã ở bất kỳ đâu miễn là có hỗ trợ biên dịch.
JavaScript Đặc điểm của Typescript
TypeScript cung cấp nhiều tính năng hiện đại, mang đến trải nghiệm phong phú cho người dùng nhờ vào những ưu điểm nổi bật Nó đáp ứng tốt nhu cầu đa dạng của lập trình viên, giúp tối ưu hóa quy trình phát triển phần mềm.
• Vận hành miễn phí, tiết kiệm thời gian sử dụng nhờ vào IDE và trình biên dịch vượt trội
• Giảm thiểu phần trăm va chạm lỗi trong suốt quá trình vận hành
• Đảm bảo tính hoạt động ổn định – thuận tiện
• Thao tác mượt mà, nhanh chóng, vô cùng đơn giản, dễ sử dụng
• TypeScript hỗ trợ các bước chỉnh sửa code tiện lợi hơn nhờ vào lệnh Rename Symbol, Find All Occurrences và RegEx
• Giúp người dùng tái cấu trúc, nâng cấp hệ thống, phần mềm và ứng dụng vượt trội hơn nhờ vào tính xử lý thông minh
• Hạn chế thử nghiệm Boilerplate rất hiệu quả, gia tăng xác suất hoàn thành công việc
• TypeScript còn hợp nhất mã code và đánh giá chính xác khi biên dịch cực kỳ dễ dàng, đơn giản
• Hỗ trợ tối ưu hóa quy trình làm việc của người dùng, hạn chế tính nhảy bước rồi thực hiện sai thao tác Ưu điểm của Typescript
Mặc dù TypeScript có nhiều ưu điểm nổi bật, nhưng vẫn tồn tại một số nhược điểm mà lập trình viên gặp phải trong quá trình sử dụng.
• Người dùng cần biên dịch đuôi js tệp TypeScript tại nền tảng Node.js
• TypeScript cần đảm bảo máy chủ Node.js, webpack và trình thử nghiệm hoạt động ổn định
• Cần thêm Typedef mỗi khi apply Redux, Styled-Component và React
• TypeScript không vận hành độc lập hay thay thế bất kỳ vai trò chính nào của JavaScript
• TypeScript chỉ nâng cấp những nhược điểm còn hạn chế của JavaScript
Hệ quản trị cơ sở dữ liệu MongoDB
• MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở dữ liệu NoSQL(*) hàng đầu, được hàng triệu người sử dụng MongoDB được viết bằng C++
MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động dựa trên các khái niệm Collection và Document Nó nổi bật với hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng.
NoSQL là một loại cơ sở dữ liệu mã nguồn mở không sử dụng Transact-SQL để truy vấn thông tin, viết tắt từ None-Relational SQL hoặc Not-Only SQL Được phát triển trên Javascript Framework với kiểu dữ liệu JSON (cú pháp "key:value"), NoSQL ra đời nhằm khắc phục những khuyết điểm và hạn chế của mô hình dữ liệu quan hệ RDBMS, đặc biệt về tốc độ, tính năng, khả năng mở rộng và memory cache.
• MongoDB hoạt động dưới một tiến trình ngầm service, luôn mở một cổng
(Cổng mặc định là 27017) để lắng nghe các yêu cầu truy vấn, thao tác từ các ứng dụng gửi vào sau đó mới tiến hành xử lý
• Mỗi một bản ghi của MongoDB được tự động gắn thêm một field có tên
Trường dữ liệu “_id” là kiểu ObjectId, giúp xác định tính duy nhất của từng bản ghi và hỗ trợ cho các thao tác tìm kiếm cũng như truy vấn thông tin sau này Ngoài ra, “_id” luôn được tự động đánh index để đảm bảo tốc độ truy vấn đạt hiệu suất tối ưu.
• Mỗi khi có một truy vấn dữ liệu, bản ghi được cache (ghi đệm) lên bộ nhớ
Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng
Khi có yêu cầu thêm, sửa hoặc xóa bản ghi, MongoDB sẽ không ngay lập tức cập nhật dữ liệu xuống ổ cứng mà sẽ thực hiện sau 60 giây để đảm bảo hiệu suất của ứng dụng.
MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng
Schema ít hơn trong MongoDB cho phép nhóm các đối tượng vào một cụm dễ quản lý, như việc tạo một schema tên là "Students" chỉ chứa thông tin liên quan đến sinh viên Trong khi đó, MongoDB cho phép một collection chứa nhiều document khác nhau, với số trường, nội dung và kích thước có thể thay đổi linh hoạt.
• Cấu trúc của một đối tượng rõ ràng
• Không có các Join phức tạp
MongoDB cung cấp khả năng mở rộng cực lớn, cho phép mở rộng dữ liệu một cách dễ dàng mà không cần lo lắng về các vấn đề như khóa ngoại, khóa chính hay kiểm tra ràng buộc Với tính năng replication và sharding, việc mở rộng hệ thống trở nên thuận lợi và hiệu quả hơn.
Sử dụng bộ nhớ trong để lưu trữ cửa sổ làm việc giúp tăng tốc độ truy cập dữ liệu Quá trình cập nhật diễn ra nhanh chóng nhờ vào tính năng cập nhật tại chỗ (in-place).
• Dữ liệu được caching, lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn
Mọi thay đổi về dữ liệu mặc định chưa được ghi xuống ổ cứng ngay lập tức, do đó, nguy cơ mất dữ liệu do mất điện đột ngột là rất cao.
NodeJS
Node.js, được phát triển từ năm 2009 và bảo trợ bởi công ty Joyent tại California, là một nền tảng độc lập dựa trên V8 JavaScript engine Nền tảng này cho phép tạo ra các ứng dụng web như video clip và diễn đàn, với khả năng mở rộng nhanh chóng và dễ dàng Node.js hoạt động trên nhiều hệ điều hành khác nhau, bao gồm Windows, Linux và OS X, mang lại lợi thế lớn cho các nhà phát triển Ngoài ra, Node.js còn cung cấp một thư viện phong phú hỗ trợ việc xây dựng ứng dụng.
Node.js cung cấp 21 mô-đun Javascript phong phú giúp đơn giản hóa lập trình và tiết kiệm thời gian Với nguyên tắc non-blocking, Node.js cho phép định tuyến nhanh chóng dữ liệu đầu vào và đầu ra thông qua các tác vụ thời gian thực Khả năng mở rộng nhanh chóng và xử lý nhiều kết nối đồng thời với thông lượng cao là những ưu điểm nổi bật của Node.js.
Hầu hết các ứng dụng web truyền thống tiêu tốn tài nguyên hệ thống một cách không hiệu quả do tạo ra nhiều luồng xử lý yêu cầu, dẫn đến việc sử dụng bộ nhớ lớn NodeJS giải quyết vấn đề này bằng cách sử dụng luồng đơn (Single-Threaded) kết hợp với I/O không chặn (non-blocking I/O), cho phép xử lý hàng chục nghìn kết nối đồng thời một cách hiệu quả.
Các mô-đun JavaScript là thành phần quan trọng trong ứng dụng NodeJS, cung cấp nhiều chức năng cần thiết Để chèn một mô-đun vào ứng dụng, người dùng chỉ cần sử dụng hàm `require()` và đặt tên mô-đun trong dấu ngoặc đơn NodeJS sở hữu nhiều mô-đun cơ bản giúp phát triển ứng dụng web hiệu quả.
Bảng điều khiển cung cấp phương pháp gỡ lỗi tương tự như bảng điều khiển
JavaScript cơ bản trong trình duyệt internet Nó sẽ in các thông báo ra stdout và stderr
NodeJS được phát triển dựa trên lập trình đơn luồng, nhưng mô-đun Cluster cho phép thực hiện đa luồng bằng cách tạo ra các quy trình con chia sẻ cùng một cổng máy chủ và hoạt động đồng thời.
Global variables in Node.js, also known as global scope variables, are accessible across all modules and include functions, modules, strings, and more Common global variables include dirname, filename, exports, module, and require.
Khi thực thi lệnh thì Node.js sẽ có cơ chế báo lỗi, và bạn sẽ gặp các lỗi như là
In Node.js, errors are categorized into standard JavaScript errors, system errors, user-specific errors, and assertion errors It is crucial to handle these exceptions promptly and efficiently to ensure that the application functions smoothly.
Streaming là công cụ cho phép đọc và ghi dữ liệu liên tục, thường được sử dụng với Buffer để xử lý các stream chứa dữ liệu nhị phân Các loại stream này được phân loại để tối ưu hóa việc truyền tải và xử lý thông tin.
• Readable: Là loại stream mà từ đó dữ liệu có thể đọc được
• Writable: Là loại stream mà dữ liệu có thể được viết lên đó
• Duplex: Là loại stream có thể đọc và viết được
• Transform: Là loại stream có thể thao tác dữ liệu trong khi nó đang được đọc hoặc viết
Bộ đệm là một module dùng để xử lý các luồng dữ liệu nhị phân Để tạo ra một bộ đệm trống với độ dài 10, bạn có thể sử dụng phương thức var buf = Buffer.alloc(10).
Domain Đây là một mô-đun giúp chặn các lỗi chưa được xử lý trong quá trình hoạt động, và có thể chia thành hai phương thức đó là:
Internal Binding (lệnh chạy trong phương thức run): Error emitter thực thi code trong phương thức run
External Binding được thêm trực tiếp vào miền thông qua phương thức add, cho phép tích hợp Error emitter vào domain Module DNS hỗ trợ kết nối đến máy chủ DNS, thực hiện phân giải tên miền bằng phương thức dns.resolve(), đồng thời cho phép phân giải tên miền mà không cần kết nối mạng thông qua dns.lookup().
Node.js cung cấp các tính năng gỡ lỗi cơ bản thông qua ứng dụng gỡ lỗi tích hợp của nó Mặc dù trình gỡ lỗi Node.js không phong phú về tính năng, nhưng nó vẫn hỗ trợ kiểm tra mã hiệu quả Bạn có thể dễ dàng sử dụng trình gỡ lỗi này thông qua hộp lệnh bằng cách sử dụng từ khóa thích hợp.
“inspect” trước tên tệp JavaScript
• IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời
• Sử dụng JavaScript – một ngôn ngữ lập trình dễ học
• Chia sẻ cùng code ở cả phía client và server
• NPM (Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ
• Cộng đồng hỗ trợ tích cực
• Cho phép stream các file có kích thước lớn
• Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình đa lõi trong các phần cứng cấp server hiện nay
• Khó thao tác với cơ sử dữ liệu quan hệ
• Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác
• Cần có kiến thức tốt về JavaScript
• Không phù hợp với các tác vụ đòi hỏi nhiều CPU.
ReactJS
ReactJS là một thư viện mã nguồn mở do Facebook phát triển vào năm 2013, nhằm tạo ra các ứng dụng web nhanh chóng, hiệu quả và hấp dẫn với mã nguồn tối thiểu Mục tiêu chính của ReactJS là đảm bảo rằng các trang web sử dụng nó hoạt động mượt mà, nhanh chóng, có khả năng mở rộng cao và dễ dàng triển khai.
ReactJS nổi bật với khả năng tập trung vào các phần riêng lẻ, giúp các nhà phát triển dễ dàng tách rời và chuyển đổi giao diện người dùng từ các cấu trúc phức tạp thành những phần đơn giản hơn Điều này cho phép kết xuất dữ liệu không chỉ ở phía máy chủ mà còn có thể thực hiện ngay tại vị trí khách hàng, mang lại sự linh hoạt và hiệu quả trong việc phát triển ứng dụng web.
2.5.2 Những thành phần chính của ReactJS:
Redux là một thành phần thiết yếu trong ReactJS mà mọi người đều nên biết Do ReactJS không cung cấp mô-đun riêng để quản lý dữ liệu, nó chia chế độ xem thành các thành phần nhỏ hơn, cho phép bạn thiết lập chúng độc lập và tạo sự liên kết chặt chẽ hơn giữa chúng.
Trong ReactJS, các liên kết và mối quan hệ giữa các thành phần cần được chú ý đặc biệt do luồng dữ liệu một chiều từ cấp độ mẹ đến cấp độ con là duy nhất Mặc dù có những điều cần lưu ý trong các dự án, nhưng ReactJS cũng mang lại nhiều lợi ích, đặc biệt là trong việc tối ưu hóa các tính năng và vai trò khi sử dụng engine.
Virtual DOM là một thành phần quan trọng mà hầu hết các framework hiện nay đều áp dụng, trong đó có ReactJS Khi Virtual DOM thay đổi, bạn không cần phải thao tác trực tiếp với DOM mà vẫn có thể theo dõi các lượt xem và thực hiện các thay đổi một cách dễ dàng.
Virtual Dom hoạt động như một mô hình và khung nhìn, cho phép thay đổi một yếu tố mà không cần thao tác trực tiếp lên yếu tố kia Điều này hỗ trợ cơ chế mù dữ liệu, giúp tăng tốc đáng kể ứng dụng của bạn, là một trong những lợi ích lớn nhất khi sử dụng Virtual Dom.
ReactJS là lựa chọn lý tưởng cho nhiều loại trang web, giúp đơn giản hóa quá trình phát triển nhờ việc giảm thiểu mã cần viết so với việc sử dụng JavaScript hoặc HTML thuần túy Hơn nữa, ReactJS cung cấp nhiều công cụ và tính năng hữu ích, cho phép bạn áp dụng trong nhiều tình huống khác nhau.
Tái sử dụng thành phần là một cách hiệu quả để xây dựng các thành phần linh hoạt, phục vụ cho nhiều dự án khác nhau Bằng cách đầu tư thời gian vào việc tạo ra và sử dụng lại các thành phần này, bạn có thể tiết kiệm công sức cho các dự án tiếp theo Điều này không chỉ áp dụng cho ReactJS mà còn cho các framework khác như Flutter.
ReactJS không chỉ dành cho phát triển web mà còn hỗ trợ xây dựng ứng dụng di động thông qua React Native Khuôn khổ này, được phát triển bởi Facebook, cho phép người dùng dễ dàng chia sẻ các thành phần và tái sử dụng logic nghiệp vụ trong các ứng dụng, mang lại hiệu quả cao trong quá trình phát triển.
Công cụ phát triển web phổ biến nhất hiện nay là React, với số lượng việc làm cho các nhà phát triển React đang tăng cao tại Việt Nam Theo thống kê từ Google Xu hướng, các trang web việc làm hàng đầu như Topdev và Itviec đang ghi nhận nhu cầu tuyển dụng mạnh mẽ cho vị trí này.
28 một mức lương rất hấp dẫn và mức độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam
SEO là yếu tố quan trọng giúp website của bạn có thứ hạng cao trong tìm kiếm của Google ReactJS, một thư viện JavaScript, hỗ trợ việc này, nhưng cần có thêm các thư viện khác để công cụ tìm kiếm của Google có thể thu thập thông tin và lập chỉ mục mã JavaScript hiệu quả.
ReactJS chỉ là một thư viện cho tầng View, không phải là một framework MVC như các framework khác Được phát triển bởi Facebook, React giúp render phần view nhưng không bao gồm Model và Controller, vì vậy cần kết hợp với các thư viện khác Ngoài ra, React cũng không hỗ trợ 2-way binding hay Ajax.
• Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại
React có kích thước tương đương với Angular, với khoảng 35kb so với 39kb của Angular Tuy nhiên, Angular lại là một framework hoàn chỉnh, trong khi React có thể được coi là nặng hơn so với các framework khác.
• Khó tiếp cận cho người mới học Web
XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU PHẦN MỀM
Yêu cầu nghiệp vụ
InStare là một nền tảng mạng xã hội giúp người dùng kết nối, chia sẻ nội dung và xây dựng cộng đồng Người dùng có thể quản lý hồ sơ cá nhân, đăng tải hình ảnh và video, nhắn tin, và tương tác với các thành viên khác trên trang web.
Một quy trình cơ bản của mạng xã hội chia sẻ ảnh và video gồm các bước như sau:
Để đăng ký tài khoản trên mạng xã hội, người dùng cần cung cấp thông tin như username, email và mật khẩu Sau đó, hệ thống sẽ gửi mã OTP đến email để xác thực tài khoản Nếu mã OTP được nhập đúng, quy trình đăng ký sẽ thành công.
- Đăng nhập: Sau khi đăng ký, người dùng đăng nhập vào tài khoản của mình bằng cách nhập username hoặc địa chỉ email và mật khẩu
Người dùng có thể dễ dàng tạo trang cá nhân trên mạng xã hội bằng cách cung cấp thông tin cá nhân, tiểu sử và ảnh đại diện Trang cá nhân này cho phép người khác xem thông tin, số lượng người theo dõi, người đang theo dõi và các bài đăng của họ.
Người dùng có thể tạo bài đăng đa phương tiện với tối đa 10 ảnh và video, cho phép chỉnh sửa từng nội dung, viết mô tả và chia sẻ lên bảng tin Bài đăng này sẽ xuất hiện trên bảng tin của những người theo dõi.
Người dùng có thể dễ dàng kết nối với bạn bè và các tài khoản yêu thích trên mạng xã hội thông qua việc tìm kiếm và theo dõi họ trên trang cá nhân.
Người dùng có thể tương tác với bài đăng của bạn bè và người họ theo dõi bằng cách thích, bình luận và chia sẻ thông qua tin nhắn hoặc các mạng xã hội khác.
Người dùng có thể dễ dàng tìm kiếm các bài đăng trên mạng xã hội thông qua hashtag, hoặc tìm kiếm trang cá nhân của người khác bằng cách sử dụng tên, username hoặc email.
- Nhắn tin: Người dùng có thể gửi và nhận tin nhắn văn bản, hình ảnh và video với các người dùng khác trên mạng xã hội.
Yêu cầu chức năng
- Thư viện ảnh và video cá nhân
- Tương tác với các bài đăng
- Quản lý hồ sơ cá nhân
- Theo dõi tài khoản khác
Yêu cầu phi chức năng
- Chỉnh sửa ảnh và video
Yêu cầu hiệu suất
STT Nghiệp vụ Tốc độ xử lý Ghi chú
1 Truy cập và tải bảng tin 5-10 tin/lần
2 Tương tác bài đăng và thông báo tương tác Ngay tức thì
3 Nhắn tin và thông báo tin nhắn Ngay tức thì
4 Tìm kiếm 10 kết quả/lần
5 Đăng tải bài viết Dưới 5 phút
6 Cập nhật hồ sơ cá nhân Ngay tức thì
Yêu cầu tiện dụng
STT Nghiệp vụ Mức độ dễ học Mức độ dễ sử dụng Ghi chú
1 Truy cập và tải bảng tin
Tỉ lệ phạm lỗi trung bình là 1%
2 Tương tác bài đăng và thông báo tương tác
Tỉ lệ phạm lỗi trung bình là 1%
3 Nhắn tin và thông báo tin nhắn
Tỉ lệ phạm lỗi trung bình là 1%
4 Tìm kiếm Không cần hướng dẫn
Không nhớ rõ thông tin cần tìm
5 Đăng tải bài viết Dưới 5 phút hướng dẫn
Tỉ lệ phạm lỗi trung bình là 1%
6 Cập nhật hồ sơ cá nhân
Tỉ lệ phạm lỗi trung bình là 1%
Yêu cầu tương thích
STT Nghiệp vụ Đối tượng liên quan Ghi chú
1 Chia sẻ bài đăng Chia sẻ sang trang mạng xã hội khác
2 Đăng ký tài khoản Xác nhận OTP qua email
3 Tính ổn định Tương thích với nhiều web browser và hệ điều hành
Yêu cầu bảo mật
STT Nghiệp vụ Quản trị hệ thống
Người dùng có tài khoản
2 Truy cập và tải bảng tin x
3 Quản lý hồ sơ cá nhân x
6 Tương tác với bài đăng x
7 Xem hồ sơ người dùng x x
Yêu cầu an toàn
STT Nghiệp vụ Đối tượng Ghi chú
2 Hủy thật sự Bài đăng đã xóa, lịch sử tìm kiếm
3 Không cho phép xóa Người dùng, tin nhắn
Yêu cầu công nghệ
STT Yêu cầu Mô tả chi tiết Ghi chú
1 Dễ sửa lỗi Xác định lỗi trong vòng 15 phút
Không ảnh hưởng đến module khác khi sửa module này
2 Dễ bảo trì Sửa lỗi trung bình trong vòng 1 giờ
3 Dễ nâng cấp Thêm mới tính năng hoặc nâng cấp tính năng có sẵn nhanh chóng
4 Tính tái sử dụng Một số module có thể sử dụng ở dự án khác
Xây dựng ứng dụng mạng xã hội trung bình trong vòng 8-10 tuần
6 Tính linh hoạt Chuyển đổi cơ sở dữ liệu trong vòng 2 ngày
Sơ đồ Use-case
STT Tên actor Ý nghĩa/Ghi chú
1 Người dùng Người dùng sử dụng hệ thống
3.10.3 Danh sách các Use-case:
STT Tên Use-case Ý nghĩa/Ghi chú
Sau khi người dùng đăng nhập thành công, hệ thống sẽ tự động chuyển đến trang chủ, nơi hiển thị danh sách các bài đăng.
3 Quản lý hồ sơ cá nhân Người dùng có thể thực hiện các thao tác như xem và chỉnh sửa thông tin cá nhân
4 Tương tác với bài đăng Người dùng có thể tương tác với bài đăng trên bảng tin bằng cách thích, chia sẻ và bình luận
5 Tạo bài đăng Người dùng có thể tạo bài đăng bao gồm các hình ảnh hoặc video kèm nội dung
6 Theo dõi người dùng Người dùng có thể theo dõi các người dùng khác để bài đăng của họ hiện trên bảng tin của mình
7 Nhắn tin Người dùng có thể nhắn tin trực tiếp với người dùng khác
8 Xem bài đăng Mọi người dùng đều có thể xem bài đăng nếu có đường dẫn của bài đăng đó
9 Xem hồ sơ người dùng Mọi người dùng đều có thể truy cập đến hồ sơ của người dùng bất kì và xem thông tin của họ
10 Tìm kiếm người dùng Mọi người dùng đều có thể tìm kiếm người dùng khác nếu có thể truy cập được vào các trang có thanh tìm kiếm
Thiết kế Activity Diagram
3.11.2 Activity Diagram “Quản lý hồ sơ cá nhân”:
3.11.3 Activity Diagram “Tương tác với bài đăng”:
3.11.4 Activity Diagram “Tạo bài đăng”:
3.11.5 Activity Diagram “Theo dõi người dùng”:
Thiết kế Sequence Diagram
3.12.2 Sequence Diagram “Quản lý hồ sơ cá nhân”:
3.12.3 Sequence Diagram “Tương tác với bài đăng”:
3.12.4 Sequence Diagram “Tạo bài đăng”:
3.12.5 Sequence Diagram "Theo dõi người dùng”:
Thiết kế Class Diagram
3.13.2 Đặc tả chi tiết Class Diagram:
Giá trị của các trường trong cơ sở dữ liệu bao gồm: userId (ObjectId) là ID tự sinh bởi hệ thống, email (String) là địa chỉ email của người dùng, username (String) là tên tài khoản, password (String) là mật khẩu được mã hóa bằng argon2, name (String) là tên người dùng, ava (String) là ảnh đại diện và bio (String) là tiểu sử của người dùng.
Lần cuối thay đổi username (nếu dưới 14 ngày sẽ không được đổi)
Hàm getUser () được sử dụng để lấy thông tin người dùng, trong khi updateProfile() cho phép cập nhật thông tin cá nhân Để đổi mật khẩu, người dùng có thể sử dụng hàm changePassword() Nếu muốn gỡ ảnh đại diện, hàm removeAva() sẽ thực hiện chức năng này Để tìm kiếm người dùng, hàm searchUser () cho phép tìm theo tên hoặc username Cuối cùng, viewUser Profile() giúp xem thông tin người dùng, bao gồm tên, username, số người theo dõi và bài đăng.
The article outlines the key components of a social media post, which includes a unique post ID generated by the database, a user ID representing the individual who created the post, a media list containing strings of images or videos, a caption that serves as the title of the post, and a timestamp indicating when the post was created.
Hàm createPost() dùng để tạo bài đăng mới, trong khi getAllPosts() lấy danh sách các bài đăng để hiển thị trên trang chủ Hàm viewPost() cho phép người dùng xem chi tiết bài đăng, bao gồm số lượt thích và bình luận Cuối cùng, sharePost() giúp gửi bài đăng qua tin nhắn.
Giá trị Ý nghĩa likeId: ObjectId Id tự sinh bởi database postId: ObjectId Bài đăng được thích userId: ObjectId Người dùng thích bài đăng
Hàm Ý nghĩa likePost() Thích bài đăng dislikePost() Bỏ thích bài đăng
Giá trị Ý nghĩa cmtId: ObjectId Id tự sinh bởi database postId: ObjectId Bài đăng được bình luận userId: ObjectId Người dùng bình luận bài đăng
Hàm Ý nghĩa comment() Bình luận bài đăng
The article discusses the key attributes of a post in a database, including the storyId, which is an auto-generated ObjectId; userId, representing the user who temporarily created the post; media, which refers to the image associated with the post; createdAt, indicating the date and time the post was published; and expiredAt, marking the expiration date and time of the post.
The `createStory()` method allows users to create temporary posts, while the `getAllStories()` function retrieves a list of users who have made temporary posts Additionally, the `getUser Stories()` method enables users to view all temporary posts made by a specific user.
Giá trị Ý nghĩa viewedId: ObjectId Id tự sinh bởi database storyId: ObjectId Id bài đăng tạm thời userId: ObjectId Người dùng xem bài đăng tạm thời
Hàm Ý nghĩa viewStory() Xem bài đăng tạm thời
Giá trị Ý nghĩa followId: ObjectId Id tự sinh bởi database followerId: ObjectId Người dùng theo dõi followingId: ObjectId Người dùng được theo dõi
Hàm Ý nghĩa followUser() Theo dõi người dùng unfollowUser() Bỏ theo dõi người dùng
Giá trị Ý nghĩa notiId: ObjectId Id tự sinh bởi database
3.13.2.11 Message: notiType: String Loại thông báo notifiedUserId: ObjectId Người dùng được thông báo interactedUserId: ObjectId Người dùng tương tác postId: ObjectId Bài đăng được tương tác read: Boolean Đã xem createdAt: DateTime Thời gian tạo
Hàm Ý nghĩa getUserNotification() Lấy danh sách thông báo của người dùng readNotification() Xem thông báo
Giá trị Ý nghĩa conversationId: ObjectId Id tự sinh bởi database
Hàm Ý nghĩa enterConversation() Tham gia đoạn chat
Giá trị Ý nghĩa userId: ObjectId Id người dùng trong đoạn chat conversationId: ObjectId Id đoạn chat
Hàm Ý nghĩa getListContact() Lấy danh sách liên lạc của người dùng
The messageId is an automatically generated ObjectId by the database, while conversationId represents the unique identifier for the chat segment The senderId indicates the individual who sent the message, and the message itself is stored as a string Additionally, the read status is a boolean that signifies whether the message has been viewed, and createdAt records the date and time when the message was sent.
Hàm Ý nghĩa message() Nhắn tin
THIẾT KẾ HỆ THỐNG
Kiến trúc hệ thống
Hệ thống được xây dựng theo mô hình 3 lớp gồm: lớp Presentation, lớp
Application, lớp Data Kiến trúc hệ thống như sau:
Mô tả các thành phần của hệ thống
Diễn giải Ứng dụng sử dụng
1 Presentation Hiển thị giao diện người dùng, các biểu mẫu, danh sách, các tương tác với hệ thống cho người dùng.
2 Application Xử lý các yêu cầu người dùng, và trả về kết quả sau khi yêu cầu đã được xử lý
3 Data Lưu trữ thông tin và thực hiện các thao tác với database như thêm, xóa, sửa và lấy dữ liệu
Quá trình hoạt động của hệ thống
Quá trình hoạt động của ứng dụng sẽ được thực hiện qua các bước sau:
Người dùng tương tác với hệ thống thông qua giao diện người dùng ở lớp Presentation bằng cách sử dụng trình duyệt, thông qua các đường dẫn hoặc nhập trực tiếp vào ô địa chỉ Khi đó, trình duyệt sẽ tạo một HTTP request dưới dạng JSON và gửi yêu cầu này đến server.
• B2: Server nhận được request được gửi từ trình duyệt và thực hiện routing
Routing trong B3 sẽ xác định controller nào sẽ xử lý yêu cầu (Request) được gửi đến thông qua địa chỉ API trong request Chẳng hạn, khi một yêu cầu gọi đến API: http://localhost:2041/user/getUser , yêu cầu này sẽ được chuyển đến controller để thực hiện xử lý.
Sau khi Request được gửi tới Controller, Controller sẽ xử lý dữ liệu trong Request Nếu cần truy cập thông tin từ cơ sở dữ liệu, Controller sẽ kết nối và lấy thông tin cần thiết.
• B5: Sau khi hoàn tất xử lý, Controller sẽ gửi HTTP response tương ứng kèm dữ liệu dạng JSON đến các View
• B6: View sẽ tiến hành xử lý các thông tin từ HTTP response và tạo ra các file html hoàn chỉnh
Sau khi hệ thống nhận các file HTML hoàn chỉnh từ View, nó sẽ tiến hành xử lý và gửi lên trình duyệt web, nơi giao diện sẽ được hiển thị cho người dùng.
THIẾT KẾ GIAO DIỆN
Màn hình Đăng nhập
Màn hình Xác thực OTP
Màn hình Tạo mật khẩu mới
Màn hình Trang chủ
Story của người khác trong trạng thái chưa xem
Story của người khác trong trạng thái đã xem
5.6.5.1 Danh sách các liên hệ:
Khung Tìm kiếm
Khung Thông báo
Màn hình Đổi mật khẩu
Màn hình Bài đăng chi tiết
Giao diện màn hình Chia sẻ bài đăng
69Giao diện màn hình Chia sẻ bài đăng ở trạng thái sau khi search
Màn hình Tạo bài đăng
Giao diện màn hình Tạo bài đăng khi người dùng chưa thêm ảnh/video
71Giao diện màn hình Tạo bài đăng khi người dùng đã thêm ảnh/video
5.11.6.1 Màn hình chèn chữ tổng quan:
5.11.6.2 Màn hình chỉnh sửa chữ:
Giao diện màn hình Chỉnh sửa chữ
Màn hình hồ sơ cá nhân
Giao diện màn hình Hồ sơ cá nhân của bản thân
78Giao diện màn hình Hồ sơ cá nhân của người khác
Màn hình Chỉnh sửa hồ sơ
5.13.2 Màn hình Chỉnh sửa ảnh đại diện:
Màn hình Tin nhắn
Màn hình tin nhắn tổng quan
Khung tìm kiếm liên hệ
Màn hình Tin nhắn trong trạng thái “Blocked”
83Màn hình Tin nhắn trong trạng thái “After blocked”
Màn hình Danh sách story
Màn hình Tạo story
Màn hình Tạo story chữ
Giao diện Màn hình tạo story chữ
Các bảng chọn màu nền và chữ
Màn hình Tạo story hình ảnh/video
5.18.3 Màn hỉnh Chỉnh sửa màu ảnh:
5.18.5.1 Màn hình Thêm chữ trong trạng thái thêm chữ:
5.18.5.2 Màn hình Thêm chữ trong trạng thái chỉnh sửa chữ:
Giao diện màn hình Thêm chữ trong trạng thái chỉnh sửa chữ
