Đang tải... (xem toàn văn)
Nó được sử dụng để xây dựng các ứng dụng web động, đặc biệt là cácứng dụng đơn trang Single Page Applications - SPA, bằng cách cập nhật cácthành phần của trang web mà không cần tải lại t
Trang 1BÁO CÁO THỰC NGHIỆM HỌC PHẦN PHẦN MỀM MÃ NGUỒN MỞ
SỬ DỤNG FRAMEWORK REACTJS KẾT HỢPFISEBASE XÂY DỰNG WEBSITE THƯƠNG MẠI
Trang 22.3.2 Firebase hoạt động với chức năng như thế nào? 16
2.3.3 Ưu nhược điểm của Firebase 17
PHẦN 3: PHÂN TÍCH, THIẾT KẾ, PHÁT TRIỂN DỰ ÁN
Trang 33.2.3 Biểu đồ lớp 41
3.3 Thiết kế, xây dựng, phát triển dự án 42
3.3.1 Tìm hiểu cách hoạt động của ReactJS 42
3.3.2 Sử dụng Mockup thiết kế giao diện các màn hình trang web 45
3.3.3 Xây dựng chương trình 52
TỔNG KẾT
TÀI LIỆU THAM KHẢO
Trang 4LỜI CẢM ƠN
“Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến Trường Đạihọc Công Nghiệp Hà Nội đã đưa môn học Phần mềm mã nguồn mở vào chươngtrình giảng dạy Đặc biệt, chúng em xin gửi lời cảm ơn sâu sắc đến giảng viên bộmôn – Thầy Nguyễn Thái Cường đã dạy, truyền đạt những kiến thức quý báucho em trong suốt thời gian học tập vừa qua Trong thời gian tham gia lớp họcPhần mềm mã nguồn mở của thầy, em đã có thêm cho mình nhiều kiến thức bổích, tinh thần học tập hiệu quả, nghiêm túc Đây chắc chắn sẽ là những kiến thứcquý báu, là hành trang để em có thể vững bước sau này.
Bộ môn Phần mềm mã nguồn mở là môn học thú vị, vô cùng bổ ích và cótính thực tế cao Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễncủa sinh viên Tuy nhiên, do vốn kiến thức còn nhiều hạn chế và khả năng tiếpthu thực tế còn nhiều bỡ ngỡ nhưng chúng em cũng đã cố gắng hoàn thành nhiệm vụcủa học phần, chúng em mong rằng thầy có thể góp ý thêm để nhóm chúng em hoàn thiệnhơn !
Em xin chân thành cảm ơn!”
Trang 5PHẦN 2: TÌM HIỂU CÁC CÔNG NGHỆ SỬ DỤNG TRONG DỰ ÁN2.1 Tìm hiểu về NodeJs
2.1.1 Giới thiệu về NodeJS
Nodejs là một framework mạnh mẽ được phát triển trên engine JavaScriptV8 của Chrome, một trong những engine JavaScript nhanh nhất hiện có trên thịtrường Nó biên dịch JavaScript trực tiếp vào code của máy, điều này dẫn đến hiệuquả cao hơn của các ứng dụng được xây dựng bằng Nodejs Nó là một frameworknhẹ và được sử dụng nhiều để phát triển các ứng dụng web ở phía máy chủ Nó mởrộng API JavaScript để cung cấp các chức năng thông thường phía máy chủ.
Do thông lượng tốt hơn và tính nhất quán cao hơn, nó được sử dụng để pháttriển ứng dụng quy mô lớn như các trang web streaming video, ứng dụng một trangvà các ứng dụng web khác Nodejs sử dụng mô hình event-driven và non-blockingI/O, điều này làm cho nó trở thành một lựa chọn đúng đắn cho các ứng dụng thời
Trang 6Đầu vào-đầu ra không đồng bộ:
I/O không đồng bộ cho phép các ứng dụng xử lý chồng chéo với các hoạtđộng I/O Nói cách đơn giản, mục tiêu là chương trình không bao giờ bị nghẽn lại
Trong I/O đồng bộ, thread - Luồng (một luồng chỉ là một chuỗi các lệnh) sẽđợi cho đến khi toàn bộ hoạt động kết thúc Mặt khác trong I/O không đồng bộ,luồng không đợi trong các hoạt động Thao tác I/O sẽ chạy ở chế độ nền và nó sẽđược gọi khi kết thúc Tính năng I/O không đồng bộ cho phép ứng dụng có thêmthời gian để thực hiện các xử lý khác trong khi I/O đang diễn ra.
LIBUV:
Trang 7LIBUV là một dependency node.js Nó cung cấp cho node.js quyền truy cậpvào hệ điều hành máy, mạng, hệ thống tệp và hơn thế nữa LIBUV là một thư việnmã nguồn mở tập trung mạnh vào I / O không đồng bộ (Input- output) LIBUVđược viết bằng C ++ Ngoài việc tập trung vào I/O không đồng bộ LIBUV còntriển khai hai tính năng quan trọng là event loop và thread pool.
Event Loop chịu trách nhiệm xử lý các tác vụ đơn giản hơn và Thread poolquản lý các tác vụ nặng.
Event Loop:
Khi chúng ta sử dụng Nodejs trên máy tính, có nghĩa là có một tiến trìnhNode đang chạy trên máy tính đó Quá trình này chỉ là một chương trình đang đượcthực thi Bây giờ trong quá trình đó, Nodejs chạy trong một thread (luồng) duynhất Một thread về cơ bản chỉ là một chuỗi các hướng dẫn và không cần thiết phảihiểu sâu về thread hoặc quy trình là gì Chỉ cần tưởng tượng thread là một hộp nơimã của chúng ta được thực thi trong bộ xử lý của máy tính Bây giờ, điều cần thiếtđể hiểu ở đây là thực tế là Node chạy trong single thread,
Thread pool:
Thread pool cung cấp cho chúng ta 4 thread bổ sung hoàn toàn tách biệt vớisingle thread trong Event Loop Chúng ta có thể cấu hình nó lên đến 128 thread,nhưng thông thường, 4 thread này là đủ Vì vậy, 4 thread này cùng nhau tạo thànhmột thread pool Event loop sẽ tải bớt các tác vụ nặng vào Thread pool và điều nàydiễn ra tự động Các DEV không phải là người quyết định cái gì đi vào Threadpool và cái gì không Một số tác vụ tốn kém được giảm tải là: tất cả các hoạt độngxử lý tệp, mọi thứ liên quan đến mật mã, như mật khẩu lưu vào bộ nhớ đệm, sau đólà tất cả các hoạt động liên quan đến nén, tra cứu DNS (khớp các miền web với địachỉ IP thực tương ứng của chúng) và hơn thế nữa Đó là những thứ dễ làm nghẽnluồng chính nhất Vì vậy, Node sẽ xử lý nó bằng cách tự động tải chúng vàoThread pool.
Các thư viện quan trọng khác:
Các thư viện quan trọng nhất cho Nodejs là LIBUV và V8 Tuy nhiên, Nodekhông chỉ hoạt động dựa trên V8 và LIBUV mà còn dựa trên một số thư viện khác
Trang 8như HTTP parser for parsing HTTP, C-ARES for DNS queries, OpenSSL forcryptography, and Zlib for file compression Khi tất cả các thành phần này kết hợphoàn hảo với nhau, NodeJS sẵn sàng được sử dụng ở phía máy chủ cho tất cả cácứng dụng.
Kiến trúc hướng sự kiện - Event-Driven Architecture:
Hầu hết các mô-đun cốt lõi của Node, như HTTP, Hệ thống tệp được xâydựng dựa trên kiến trúc hướng sự kiện Khái niệm này thực sự khá đơn giản TrongNode, có một số đối tượng nhất định được gọi là bộ phát sự kiện phát ra các sựkiện được đặt tên ngay khi có điều gì đó quan trọng xảy ra trong ứng dụng, chẳnghạn như yêu cầu truy cập máy chủ hoặc tệp hoàn tất để đọc Sau đó, các sự kiệnnày được chọn bởi các trình nghe sự kiện đã thiết lập, điều này sẽ kích hoạt cácchức năng (hàm gọi lại) được gắn với mỗi trình nghe.
Hình 2.2 Kiến trúc Node
Trang 9NPM là viết tắt của Node package manager là một công cụ tạo và quản lýcác thư viện lập trình Javascript cho Node.js
NPM cung cấp 2 chức năng chính bao gồm:
Là kho lưu trữ trực tuyến cho các package/module Chúng ta có thể tìmkiếm các package trên search.nodejs.org.
Quản lý các module javascript và phiên bản của chúng trong các dự áncủa chúng ta đơn giản hơn, dễ dàng hơn, tiết kiệm thời gian hơn.
NPM hoạt động như thế nào?Nó hoạt động dựa trên hai vai trò:
Nó là repository được sử dụng rộng rãi để publish project Node.jsnguồn mở Nghĩa là đây là nền tảng trực tuyến – nơi mọi người có thểpublish và chia sẻ công cụ được viết bằng JavaScript.
npm là công cụ dòng lệnh giúp tương tác với các nền tảng trực tuyến,như trình duyệt và máy chủ Tiện ích này hỗ trợ cài đặt và gỡ cài đặt gói,quản lý phiên bản và quản lý dependency cần thiết để chạy dự án.
2.1.3 Giới thiệu về Express
Express là 1 framework nodejs để tạo web application, bao gồm nhiều tínhnăng mạnh mẽ để xây dựng các ứng dụng web và mobile Bản thân expressframework khá tối giản, tuy nhiên các nhà phát triển đã tạo ra rất nhiều thư việngiúp giải quyết hầu hết các vấn đề trong lập trình web, bao gồm thư viện để làmviệc với cookies, sessions, URL parameters, POST data, security headers, …
Cài đặt và xây dựng web application bằng express khá đơn giản, nhanhchóng, đòi hỏi ít kỹ năng vì chỉ sử dụng javascript.
Trang 1010Hình 2.3 ExpressJS
Các thành phần chính:Route Handlers
Route Handlers quyết định ứng dụng sẽ đáp ứng các request từ phía clientnhư thế nào Route là 1 URI (hoặc đường dẫn) và method (POST, GET, PUT, …),mỗi route có thể có 1 hoặc nhiều functions, các function này sẽ được thực thi khiroute khớp Về mặt cơ bản, tất cả route đều có thể được định nghĩa trong file jschính của application.
Function Middleware là các function có thể truy xuất object request (req),object response (res), và function middleware kế tiếp trong chu k¤ request-response của ứng dụng Các function Middleware có thể:
- Thực thi code bất k¤.
- Thay đổi các object request response.- Kết thúc chu k¤ request-response.- Gọi function middleware kế tiếp.
Express application có thể sử dụng các loại middleware sau:
Trang 11- Application-level middleware- Router-level middleware- Error-handling middleware- Third-party middlewareTemplate Engine
Template Engine cho phép ta sử dụng các file view template trong ứng dụng,tại thời điểm thực thi, template engine sẽ thay thế các biến trong file template bằnggiá trị được truyền, và chuyển đổi template đó thành file HTML để trả về phíaclient Các template engine được sử dụng phổ biến trong Express là Pug,Mustache, EJS, Jade, …
2.2 Tìm hiểu về ReactJs2.2.1 ReactJS là gì?
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởiFacebook Nó được sử dụng để xây dựng các ứng dụng web động, đặc biệt là cácứng dụng đơn trang (Single Page Applications - SPA), bằng cách cập nhật cácthành phần của trang web mà không cần tải lại toàn bộ trang.
Hình 2.4 Hình ảnh minh họa ReactJS
ReactJS sử dụng một mô hình lập trình khá đơn giản được gọi là"Component-based architecture", cho phép phát triển và tái sử dụng các thành phầnUI (User Interface) của ứng dụng một cách dễ dàng và hiệu quả Điều này giúp choquá trình phát triển ứng dụng web trở nên đơn giản, dễ dàng quản lý và bảo trì hơn.
Trang 122.2.2 React-Redux
React-Redux là một thư viện JavaScript dùng để quản lý trạng thái (state)cho các ứng dụng React Thư viện này giúp các ứng dụng React của bạn hoạt độnghiệu quả hơn bằng cách tách biệt các thành phần UI và logic xử lý dữ liệu.
React-Redux sử dụng mô hình Flux để quản lý trạng thái của ứng dụng Môhình này bao gồm một "store" lưu trữ toàn bộ trạng thái của ứng dụng, và các"action" để thay đổi trạng thái đó React-Redux cũng cung cấp các "middleware"để thực hiện các xử lý bổ sung khi có các action được gửi đến.
Sử dụng React-Redux giúp cho việc quản lý trạng thái trong ứng dụng Reactdễ dàng hơn, và giúp tách biệt phần UI và logic xử lý dữ liệu một cách rõ ràng hơn,giúp cho ứng dụng của bạn dễ dàng bảo trì và mở rộng.
Hình 2.5 Hình ảnh minh họa React-Redux
Trang 132.2.3 React-Router-Dom
React-router-dom là một thư viện JavaScript được sử dụng để điều hướng(routing) trong ứng dụng web React Nó cho phép bạn định nghĩa các tuyến đường(routes) trong ứng dụng của mình và điều hướng người dùng giữa các trang web vàcác phần khác nhau của ứng dụng của bạn một cách dễ dàng.
Thư viện react-router-dom cung cấp một số thành phần chính, bao gồmRouter, Route và Link, giúp bạn xác định các tuyến đường và điều hướng ngườidùng giữa các tuyến đường khác nhau Nó cũng hỗ trợ các tính năng như tham sốtrên tuyến đường, bảo mật tuyến đường và các chức năng khác để giúp quản lý cáctuyến đường của bạn.
Hình 2.6 Hình ảnh minh họa React-Router DOM
2.2.4 React-Toastify
"React-Toastify" là một thư viện mã nguồn mở cho ReactJS được sử dụngđể hiển thị các thông báo cho người dùng Nó cung cấp các thông báo cảnh báo,thông tin, lỗi và thành công trong một cửa sổ nhỏ (toast) ở góc màn hình React-toastify rất dễ sử dụng và có thể tùy chỉnh với nhiều kiểu dáng khác nhau để phùhợp với giao diện của ứng dụng Thư viện này đã được phát triển và bảo trì bởimột cộng đồng lớn các nhà phát triển.
Trang 14Hình 2.7 Hình ảnh minh họa React-Toastify
2.2.5 Ưu nhược điểm2.2.5.1 ReactJS
Trang 15Với các ứng dụng đơn giản, React-Redux có thể làm cho code của bạn trởnên phức tạp hơn đối với các tính năng nhỏ.
Trang 162.3 Tìm hiểu về FiseBase2.3.1 Fisebase là gì ?
Firebase là một nền tảng dịch vụ đám mây của Google cung cấp cho các nhàphát triển các công cụ để xây dựng và triển khai ứng dụng di động và web Nềntảng này cung cấp nhiều tính năng như cơ sở dữ liệu thời gian thực, phân tích, lưutrữ, xác thực người dùng, push notification và nhiều hơn nữa Với Firebase, cácnhà phát triển không cần phải tự xây dựng các phần mềm phức tạp để quản lý cơsở dữ liệu và hạ tầng, mà có thể tập trung vào việc phát triển ứng dụng của mình.Firebase được sử dụng rộng rãi trong cộng đồng phát triển ứng dụng và web hiệnnay.
Hình 2.8 Hình ảnh minh họa Fisebase
2.3.2 Firebase hoạt động với chức năng như thế nào?
Chức năng hoạt động của Firebase là gì? Kể từ sau khi Google chính thứcmua lại và tiếp tục phát triển, cho đến nay Firebase gồm có các hoạt động điểnhình như sau:
2.3.2.1 Firebase Authentication
Hoạt động nổi trội nhất của Firebase chính là xây dựng những bước xácdụng người dùng thông qua Email, Facebook, Twitter, GitHub hay Google Ngoàira, hoạt động Firebase Authentication cũng hỗ trợ xác thực nặc danh cho những
Trang 17ứng dụng Hoạt động xác thực của Firebase có thể giúp cho thông tin cá nhân củanhững người sử dụng được an toàn hơn Điều này cũng đảm bảo tài khoản và cácthông tin cá nhân của người dùng không bị đánh cắp.
2.3.2.2 Firebase Hosting
Cách thức hoạt động tiếp theo được nhắc đến là Firebase Hosting Đây làmột hoạt động được phân phối thông qua tiêu chuẩn công nghệ bảo mật SSl từ hệthống mạng CDN.
CDN chính là cụm từ viết tắt của Content Delivery Network chính là mộtmạng lưới máy chủ giúp lưu giữ lại các bản sao của các nội dung tĩnh, Những nộidung tĩnh này nằm ở bên trong website và trực tiếp phân phối đến các máy chủPoP khác Mạng lưới của máy chủ CDN được thiết đặt ở khắp nơi trên thế giới.
Từ máy chủ Pop – Points of Presence, nguồn dữ liệu sẽ được gửi đi đếnnhững người dùng cuối cùng.
2.3.2.3 Firebase Realtime Database
Firebase Realtime Database có dạng một JSON đã được đồng bộ thời gianđến với tất cả các kết nối client Để có được hoạt động này thì các lập trình viêncần phải đăng ký tài khoản ở trên Firebase Dữ liệu ở trong database sẽ tự động cậpnhật một cách liên tục khi phát triển ứng dụng Sau khi đã được cập nhật thì nhữngdữ liệu này sẽ được truyền tải thông qua các kết nối SSl có 2048 bit.
2.3.3 Ưu nhược điểm của Firebase2.3.3.1 Ưu điểm:
Sử dụng dễ dàng: Những người dùng có thể đăng ký một tài khoản
Firebase thông qua tài khoản Google Đồng thời, người cùng cũng có thể sửdụng nền tảng này trong quá trình phát triển ứng dụng một cách đơn giản nhất.
Tốc độ phát triển nhanh: Ưu điểm tiếp theo chính là Firebase hỗ trợ cho
việc phát triển ứng dụng rất nhanh chóng Điều này sẽ giúp lập trình viên giảmbớt được thời gian để phát triển cũng như tiếp thị ứng dụng.
Cung cấp nhiều dịch vụ: Firebase còn cung cấp đa dịch vụ cho mục đích
phát triển trang web Người dùng có thể lựa chọn database Firestore hoặcRealtime theo đúng ý muốn của mình.
Trang 18Nền tảng cho Google phát triển: google firebase là gì? Firebase được
Google mua lại và trở thành một phần của Google Ứng dụng này sẽ khai thácđược triệt để sức mạnh cũng như các dịch vụ hiện đang sẵn có của Google.
Giao diện người dùng được chú trọng: Firebase sẽ cho phép các lập trình
viên tập trung hơn vào việc phát triển giao diện của người dùng thông qua khoBackend mẫu vô cùng đa dạng.
Firebase app không có máy chủ: Chính điều này sẽ giúp cho Firebase có
được khả năng tối ưu hóa nhất về hiệu suất làm việc nhờ vào việc mở rộngcụm database.
Học máy: Ứng dụng Firebase sẽ cung cấp học máy cho các lập trình viên
để hỗ trợ tốt nhất cho việc phát triển ứng dụng.
Tạo lưu lượng truy cập: Firebase App sẽ hỗ trợ việc tạo lập các chỉ mục.
Đồng thời, Firebase cũng sẽ giúp nâng cao thứ hạng của ứng dụng ở trên bảngxếp hạng của Google Nhờ vậy mà lượt traffic sẽ tăng lên.
Theo dõi lỗi: Đây là một công cụ để phát triển cũng như khắc phục lỗi vô
cùng tuyệt vời Nhờ vậy khi sử dụng, bạn không cần lo lắng mình sẽ để sót lỗi.
Chức năng sao lưu: cách sử dụng firebase sao lưu một cách thường xuyên
và đảm bảo tính sẵn có Đồng thời, chức năng này cũng giúp cho thông tin vàdữ liệu được bảo mật một cách an toàn nhất.
2.3.3.2 Nhược điểm:
Firebase không là mã nguồn mở: Điều này sẽ giúp cho ứng dụng trở
thành một lựa chọn không quá tối ưu đối với nhiều nhà phát triển Người dùngkhông thể sửa đổi được mã nguồn Firebase.
Người dùng không truy cập được mã nguồn: Đối với những ứng dụng
lớn thì việc chuyển đổi sang các nhà cung cấp khác thực sự không dễ dàng Đểlàm được điều này thì toàn bộ Backend cần phải được xây dựng lại từ đầu.
Nền tảng không hoạt động nhiều quốc gia: Firebase chính là một
Subdomain của Google Trang web chính thức của Firebase hiện tại đang bịchặn ở nhiều quốc gia trên thế giới, trong đó có cả Trung Quốc.
Firebase chỉ hoạt động với CSDL NoSQL: Người dùng sẽ không thể xử
Trang 19lý được dữ liệu một cách nhanh chóng Firebase chỉ sử dụng JSON và hầu nhưkhông có SQL Chính vì vậy, để di chuyển từ cơ sở dữ liệu sẽ không hề dễdàng.
Firebase chỉ chạy trên Google Cloud: Firebase trở thành một phần của
Google và tất cả cơ sở hạ tầng của ứng dụng đều hoạt động trên GoogleCloud Người dùng không thể chạy ứng dụng trên những đơn vị cung cấp đámmây khác.
Truy vấn khám chậm: Không phải các cơ sở dữ liệu đều phù hợp cho mọi
trường hợp và tất nhiên Cloud Firestore cũng không là ngoại lệ Điều nàykhiến bạn rất mất thời gian khi sử dụng ứng dụng.
Các dịch vụ cung cấp không phải đều miễn phí: Không phải tất cả các
dịch vụ được cung cấp đều miễn phí Các chức năng trên đám mây sẽ chỉ cóthể khả dụng trên gói Blaze và dĩ nhiên người dùng cũng không thể sử dụngđược các dịch vụ ở trong gói Spark.
Giá sử dụng dịch vụ Firebase khá cao: Firebase sẽ cung cấp cho người
dùng rất nhiều tính năng hữu ích nhưng giá thành của chúng cũng cao hơn sovới nhà cung cấp IaaS thuần túy.
Thiếu hợp đồng doanh nghiệp: Firebase không có những tùy chọn
Dedicated Servers hoặc các hợp đồng doanh nghiệp Để có thể sử dụng đượcFirebase chính là sử dụng cấu trúc Serverless ít linh hoạt hơn.
Không cung cấp API GraphQL: Ứng dụng không cung cấp API
GraphQL tương tự như một phần của quá trình thiết lập tiêu chuẩn Mặc dùcòn có những giải pháp thay thế khác thế nhưng REST vẫn là một tùy chọnmặc định của nền tảng này.
Trang 20PHẦN 3: PHÂN TÍCH, THIẾT KẾ, PHÁT TRIỂN DỰ ÁN3.1 Khảo sát sơ bộ
3.1.1 Mục tiêu khảo sát
Một website cần có những chức năng chính như sau:
Cung cấp thông tin về các loại sản phẩm, tên sản phẩm, loại sảnphẩm, hình ảnh, giá cả, mô tả,
Cung chấp chức năng mua hàng trực tuyến, thanh toán online,…Cung cấp thông tin liên hệ, hướng dấn mua hàng,…
3.1.2 Phương phápPhỏng vấn:
Kế hoạch phỏng vấn
Người được hỏi : Nguyễn Văn Quân Người phỏng vấn : Đinh Văn PhúcĐịa chỉ : Quán cafe đối diện cổng Thời gian phỏng vấn : 28/11/2023chính trường Đại học công nghiệp Hà
Thời gian bắt đầu : 14h30Thời gian kết thúc : 15h30Đối tượng : Người đang muốn xây
dựng một website thương mại điện tử
Các yêu cầu đòi hỏi