Đặt vấn đề • Xác định nhiệm vụ, mục đích và phạm vi • Kết luận Chương 2: Kiến thức cơ bản • Internet • ReactJS • Firebase Chương 3: Phân tích và thiết kế hệ thống • Nội dung công việc • Phân tích giao diện của trang web • Phân tích chức năng hệ thống • Biểu dồ luồng hoạt động • Xây dựng cơ sở dữ liệu Chương 4: Triển khai và thực nghiệm • Giao diện hệ thống • Cài đặt, đánh giá và kiểm thử Kết luận Tài liệu tham khảo 5 CHƯƠNG 2: KIẾN THỨC CƠ BẢN 1. Khái niệm cơ bản về internet 1. Giới thiệu chung Internet là gì? Internet là một mạng lưới toàn cầu kết nối hàng tỷ máy tính và máy chủ khác nhau trên khắp thế giới [1]. Nó cho phép trao đổi thông tin và giao tiếp giữa người dùng ở mọi nơi.
Đây là một hệ thống rộng lớn, cho phép thực hiện nhiều hoạt động trực tuyến như duyệt web, gửi nhận email, xem video trực tuyến, chơi trò chơi trực tuyến và nhiều hoạt động khác. Cách hoạt động của Internet Internet hoạt động như thế nào? Câu trả lời chính xác khá phức tạp và sẽ mất một thời gian trễ của bạn để giải thích. Thay vào đó, hãy xem xét một số điều quan trọng mà bạn nên biết. Điều quan trọng là phải nhận ra rằng Internet là một mạng lưới cáp vật lý toàn cầu.
Khi bạn truy cập một trang web, máy tính của bạn sẽ gửi một yêu cầu tới một máy chủ. Máy chủ là nơi lưu trữ các trang web và nó hoạt động giống như ổ cứng máy tính của bạn. Khi yêu cầu đến, máy chủ sẽ truy xuất trang web và gửi dữ liệu chính xác trở lại máy tính của bạn. Thao tác truy vấn này, tất cả được thực hiện chỉ trong vài giây! Bạn có thể tìm hiểu thêm video về cách thức hoạt động tại [6].
Ứng dụng của Internet Bạn có thể: Duyệt web, Email và gửi tin nhắn, Mạng xã hội, Mua sắm trực tuyến, Ngân hàng trực tuyến, Chơi trò chơi trực tuyến, Xem phim, nghe nhạc và đọc sách, Dự đoán thời tiết, Tìm kiếm việc làm, Học trực tuyến, Trò chuyện và gọi video, Tìm kiếm thông tin y tế, Sáng tạo nội dung, Tham gia vào diễn đàn và cộng đồng trực tuyến. 6 Và một trong những tính năng tốt nhất của Internet là Email và gửi tin nhắn khi ta có khả năng giao tiếp gần như ngay lập tức với bất kỳ ai trên thế giới. Khái niệm cơ bản về HTML HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu được sử dụng để tạo ra các trang web. Nó được sử dụng để định dạng và cấu trúc hóa nội dung trên trang web bằng cách sử dụng các thẻ (tags) đặc biệt.
Cấu trúc HTML của website Một Website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng. Điều này có nghĩa là nó không thể thực hiện các chức năng “động”. HTML chỉ có tác dụng bố cục và định dạng trang web và khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng. Ưu và nhược điểm của HTML - Ưu điểm ● Đơn giản và dễ học: HTML là ngôn ngữ đánh dấu cơ bản, rất dễ học và sử dụng.
Điều này làm cho nó trở thành một công cụ lý tưởng cho người mới bắt đầu trong việc phát triển web. ● Hỗ Trợ Toàn Diện: Mọi trình duyệt web hiện đại đều hỗ trợ HTML. Do đó, các trang web được viết bằng HTML có thể được hiển thị chính xác trên nhiều nền tảng và trình duyệt khác nhau. ● Tích Hợp Dễ Dàng: HTML dễ kết hợp với các ngôn ngữ và công nghệ khác như CSS để kiểm soát kiểu dáng và JavaScript để thêm tính năng động.
● Hỗ Trợ Đa Phương Tiện: HTML cho phép nhúng nhiều định dạng phương tiện khác nhau như hình ảnh, video, âm thanh, và nhiều loại tệp tin đa phương tiện khác. - Nhược điểm 7 ● Hạn Chế Trong Việc Tạo Giao Diện Phức Tạp: HTML tập trung vào cấu trúc nội dung và không cung cấp nhiều tính năng kiểu dáng phức tạp. Điều này đòi hỏi sự hỗ trợ của CSS để tạo ra giao diện đẹp mắt và phức tạp. ● Không Hỗ Trợ Tính Năng Động Tích Hợp Sẵn: HTML không có khả năng tương tác hoặc cập nhật dữ liệu mà cần sự hỗ trợ của JavaScript.
Điều này đặc biệt quan trọng đối với các ứng dụng web đòi hỏi tính năng động. ● Có Thể Dễ Dàng Bị Sửa Đổi: Vì HTML là ngôn ngữ văn bản mở, ai cũng có thể xem mã nguồn và thay đổi nó. Bố cục HTML Bên dưới là ví dụ bốc cục HTML của một trang web: Trong đó: ● <!DOCTYPE html> xác định phiên bản HTML. ● <html> bao quanh toàn bộ trang.
● Phần <head> chứa thông tin meta, tiêu đề trang, và liên kết đến các tệp CSS. ● Phần <body> chứa nội dung thực tế của trang. ● Phần <header> chứa tiêu đề và thanh điều hướng. ● Phần <main> chứa nội dung chính.
● Phần <footer> chứa thông tin chân trang. Khái niệm ReactJS ReactJS là một thư viện JavaScript phát triển bởi Facebook, được sử dụng để xây dựng giao diện người dùng (UI) cho các ứng dụng web đơn trang (Single Page Applications hoặc SPAs). Nó được thiết kế để tạo ra các giao diện người dùng tương tác động, dễ duy trì và mở rộng. [2] [4] Dưới đây là một số khái niệm cơ bản về ReactJS: ● Components (Thành phần): ReactJS xây dựng giao diện người dùng bằng cách sử dụng các thành phần.
Mỗi thành phần đại diện cho một phần của giao diện người dùng, như một nút, một form, hoặc thậm chí một trang web đơn. Các thành phần có thể nhúng vào các thành phần khác để xây dựng cấu trúc phức tạp hơn. ● JSX (JavaScript XML): JSX là một phần mở rộng của JavaScript cho phép viết mã HTML trong JavaScript. Nó giúp React tạo và quản lý các thành phần một cách dễ dàng.
● Virtual DOM (DOM Ảo): React sử dụng một cơ chế gọi là Virtual DOM để cải thiện hiệu suất. Thay vì cập nhật DOM trực tiếp, React tạo ra một bản sao ảo của DOM, so sánh nó với phiên bản cũ và chỉ cập nhật những phần thay đổi. Điều này giúp giảm tải cho trình duyệt và cải thiện tốc độ. ● State (Trạng thái): Trạng thái trong React là dữ liệu có thể thay đổi theo thời gian.
Mỗi thành phần có thể có trạng thái riêng của nó và khi trạng thái thay đổi, React sẽ cập nhật giao diện người dùng tương ứng. ● Props (Thuộc tính): Props là các tham số đầu vào mà một thành phần nhận từ các thành phần cha của nó. Props giúp truyền dữ liệu từ thành phần cha xuống thành phần con. ● Unidirectional Data Flow (Luồng dữ liệu một chiều): React theo mô hình luồng dữ liệu một chiều, điều này có nghĩa rằng dữ liệu chỉ di 10 chuyển từ thành phần cha xuống thành phần con và không ngược lại.
Điều này làm cho quy trình quản lý trạng thấy dễ hiểu hơn. ● Lifecycle Methods (Phương thức vòng đời): React cung cấp các phương thức vòng đời cho phép bạn thực hiện hành động cụ thể tại các điểm thời gian cụ thể trong quá trình vòng đời của một thành phần. Đây là ví dụ về cách viết ReactJS 11 2. Hoạt động của ReactJS Hình 2.1: Sơ đồ đơn giản về cách hoạt động của ReactJS [7] Cách một ứng dụng ReactJS hoạt động đơn giản gồm 5 bước: Bước 1: Khởi tạo Component: React bắt đầu bằng việc khởi tạo các thành phần và thiết lập trạng thái ban đầu.
Bước 2: Render Component: React gọi phương thức render() của từng thành phần để tạo ra một cây thành phần. Bước 3: Tạo Virtual DOM: React sử dụng thông tin từ phương thức render() để tạo ra một Virtual DOM, là một bản sao ảo của DOM. Bước 4: So sánh Virtual DOM và DOM thật: React so sánh Virtual DOM với DOM thật để xác định những thay đổi cần được áp dụng. Bước 5: Cập nhật DOM: Dựa trên kết quả so sánh, React cập nhật DOM thật chỉ với những phần cần thay đổi, giúp tối ưu hóa hiệu suất.
Sử dụng localStorage và Cookie trong ReactJS 2. Cookie trong ReactJS Cookie là mẫu tin nhỏ được lưu ở máy người dùng(cụ thể là tại Browser trình duyệt), Cookie sử dụng với mục đích để theo dõi, lưu lại hoạt động truy cập. Ví dụ nhớ tên người dùng truy cập vào website có thể hoạt động qua các bước sau: ● Server gửi các cookie cho browser(Ví dụ tên người dùng: username) ● Browser lưu lại thông tin này (cookie) ● Lần sau truy cập URL cùng domain(tên miền) browser sẽ gửi ngược các Cookie này lên Server và Server nhận được Cookie, từ đó xác định được thông tin như (username) … Nên nhớ Cookie được lưu lại ở Browser, sau đó mỗi lần gửi yêu cầu đến Server nó sẽ tự động gửi thông tin này đến Server - Thiết lập, lưu Cookie Từ ReactJS có thể thiết lập Cookie bằng thư viện Sử dụng Cookie - Truy cập - đọc - Cookie - Xóa Cookie 13 Để yêu cầu trình duyệt xóa Cookie bạn sử dụng hàm removeCookie. Khái niệm về LocalStorage Sử dụng tương tự Cookie nhưng có những điểm khác sau: ● Cách Lưu Trữ Dữ Liệu ● Thời gian tồn tại ● Dung lượng lưu trữ ● Quyền truy cập - Chạy localStorage- Lưu trữ và lấy thông tin Lưu trữ thông tin Lấy dữ liệu - Hủy localStorage Xóa dữ liệu chỉ định Xóa tất cả dữ liệu 14 2.
FireBase và ReactJS Firebase là một nền tảng phát triển ứng dụng di động và web cung cấp một loạt các dịch vụ và công cụ cho việc phát triển ứng dụng. Firebase giúp bạn xây dựng và triển khai ứng dụng nhanh chóng mà không cần quá nhiều kiến thức về việc quản lý máy chủ và cơ sở dữ liệu. ReactJS, mặt khác, là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng (UI) cho ứng dụng web. Nó giúp bạn tạo ra các thành phần tương tác và linh hoạt cho trang web của mình.
Khi kết hợp Firebase với ReactJS, bạn có thể tận dụng các tính năng mạnh mẽ của cả hai để phát triển ứng dụng web đáng tin cậy, linh hoạt và tương tác. Dưới đây là một số cách bạn có thể sử dụng Firebase và ReactJS cùng nhau: ● Xác thực Người Dùng ● Lưu trữ dữ liệu ● Phân tích và theo dõi ● Hosting và triển khai ● Authentication Hook trong React Để kết nối tới Firebase từ ReactJS ta cần 4 bước cơ bản Bước 1: Cài đặt Firebase Bước 2: Kết nối FireBase với ứng dụng React 15 Bước 3: Truy vấn dữ liệu từ cơ sở dữ liệu Firebase Bước 4: Lưu trữ và cập nhật dữ liệu 16 3.