Báo cáo thực tập chuyên ngành kỹ thuật phần mềm đề tài sử dụng framework reactjs kết hợp firebasexây dựng website thương mại điện tử eshop

Ứng dụng của công nghệ thông tin kết hợp với truyền thông hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của công ty, các tổ chức… nó đóng vai trò quan trọng

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

======***======

BÁO CÁO THỰC TẬP CHUYÊN NGÀNH KỸ THUẬT PHẦN MỀM

Đề tài

SỬ DỤNG FRAMEWORK REACTJS KẾT HỢP FIREBASE XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ ESHOP

Giáo viên hướng dẫn:

Lớp: 20232IT6041002 - Nhóm 3

Sinh viên thực hiện:

Nguyễn Quang Hưng 2020600649

LỜ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 Đại học Công Nghiệp Hà Nội đã đưa môn học Phần mềm mã nguồn mở vào chương trì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 – Cô Nguyễn Thị Hoa Huệ đã dạy, truyền đạt những kiến thức quý báu cho em trong suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học Phần mềm mã nguồn mở của thầy, chúng 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ức quý báu, là hành trang để chúng

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ễn củ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ếp thu 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ện hơn !

Em xin chân thành cảm ơn!”

PHẦN 1: GIỚI THIỆU ĐỀ TÀI

1.1 Tên đề tài

Sử dụng Framework ReactJS kết hợp FiseBase xây dựng website thương mại điện tử Eshop

1.2 Lí do chọn đề tài

Hiện nay, ngành Công nghệ thông tin đã có những bước phát triển nhanh chóng về ứng dụng của nó trong mọi lĩnh vực trong cuộc sống trên phạm vi toàn thế giới nói chung và việt nam nói riêng Công nghệ thông tin là một phần không thể thiếu của cuộc sống văn minh, góp phần đẩy mạnh công cuộc công nghiệp hóa hiện đại hóa đất nước Việc ứng dụng những thành quả của khoa học công nghệ vào trong đời sống, trong công tác là hết sức thiết yếu Ứng dụng của công nghệ thông tin kết hợp với truyền thông hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của công ty, các tổ chức… nó đóng vai trò quan trọng và không thể thiếu Công nghệ thông tin và truyền thông hóa góp phần làm thay đổi suy nghĩ, lối mòn tư duy của mỗi con người, nó giúp con người năng động hơn, kết nối nhanh hơn ở mọi lúc mọi nơi làm tăng mức độ hiệu quả, năng suất của công việc

PHẦN 2: TÌM HIỂU CÁC CÔNG NGHỆ SỬ DỤNG TRONG

DỰ ÁN

2.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 JavaScript V8 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ệu quả cao hơn của các ứng dụng được xây dựng bằng Nodejs Nó là một framework nhẹ 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át triển ứng dụng quy mô lớn như các trang web streaming video, ứng dụng một trang và các ứng dụng web khác Nodejs sử dụng mô hình event-driven và non-blocking I/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 gian thực sử dụng nhiều dữ liệu

Hình 2 1 Nodejs ExpressJs

2.1.2 Kiến trúc NodeJs

V8:

Nodejs được xây dựng trên V8 engine của Google Nó là công cụ javascript nhanh nhất V8 engine chuyển đổi code javascript thành mã máy mà máy tính

thực sự hiểu được Kết quả sau đó được tạo và trả về nodejs Nodejs không thể hiểu mã javascript mà chúng ta viết mà không có V8 Bên cạnh javascript, V8 cũng sử dụng C ++

Đầ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êm thời gian để thực hiện các xử lý khác trong khi I/O đang diễn ra

LIBUV:

LIBUV là một dependency node.js Nó cung cấp cho node.js quyền truy cập và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ện mã 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òn triể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 pool quả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ình Node đang chạy trên máy tính đó Quá trình này chỉ là một chương trình đang được thực thi Bây giờ trong quá trình đó, Nodejs chạy trong một thread (luồng) duy nhấ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ải hiể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ơi mã 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ới single 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ành mộ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ày diễn ra tự động Các DEV không phải là người quyết định cái gì đi vào Thread pool 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 động xử 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 địa chỉ IP thực tương ứng của chúng)

và hơn thế nữa Đó là những thứ dễ làm nghẽn luồng chính nhất Vì vậy, Node sẽ xử lý nó bằng cách tự động tải chúng vào Thread 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, Node khô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 như HTTP parser for parsing HTTP, C-ARES for DNS queries, OpenSSL for cryptography, and Zlib for file compression Khi tất cả các thành phần này kết hợp hoà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ây dự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 Trong Node, 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ẳng hạ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ện nà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ác chứ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

NPM 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ìm kiế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ự án củ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.js nguồ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ính năng mạnh mẽ để xây dựng các ứng dụng web và mobile Bản thân express framework khá tối giản, tuy nhiên các nhà phát triển đã tạo ra rất nhiều thư viện giú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àm việ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, nhanh chóng, đòi hỏi ít kỹ năng vì chỉ sử dụng javascript.

Hì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 client như 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 khi route khớp Về mặt cơ bản, tất

cả route đều có thể được định nghĩa trong file js chính của application.

· Middleware

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礃 function Middleware có thể:

- Thực thi code bất k礃

- Thay đổi các object request response

- Kết thúc chu k礃

- Gọi function middleware kế tiếp

Express application có thể sử dụng các loại middleware sau:

- Application-level middleware

- Router-level middleware

- Error-handling middleware

- Third-party middleware

· Template 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ằng giá trị được truyền,

và chuyển đổi template đó thành file HTML để trả về phía client 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ề ReactJs

2.2.1 ReactJS là gì?

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook 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ác thà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ần UI (User Interface) của ứng dụng một cách dễ dàng và hiệu quả Điều

này giúp cho quá 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

ReactJS cũng được hỗ trợ bởi một cộng đồng rộng lớn, cung cấp nhiều thư viện và công cụ hỗ trợ để tăng tốc quá trình phát triển

ReactJS ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

2.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 động hiệ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 React

dễ 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

2.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ồm Router, Route và Link, giúp bạn xác định các tuyến đường và điều hướng người dù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ác tuyế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ởi một cộng đồng lớn các nhà phát triển

2.2.5 Ưu nhược điểm

2.2.5.1 ReactJS

Ưu điểm:

· ReactJS có hiệu suất nhanh và khả năng tự cập nhật tốt, giúp cho ứng dụng chạy mượt mà hơn

· ReactJS cung cấp cách tiếp cận component-based development, giúp bạn tập trung xây dựng thành phần cụ thể và quản lý chúng dễ dàng hơn

· ReactJS có thể tái sử dụng thành phần được phát triển cho các dự án khác nhau, giúp tiết kiệm thời gian phát triển và giảm chi phí

Nhược điểm:

· ReactJS đòi hỏi bạn phải học JSX, một cú pháp mới và khá khó học đối với một số người mới học ReactJS

· Một số nhà phát triển cho rằng ReactJS khó thực hiện với các ứng dụng lớn, vì nó có thể trở nên phức tạp và khó bảo trì trong quá trình phát triển

2.2.5.2 React-Router-DOM

Ưu điểm:

· React-Router-DOM giúp xây dựng ứng dụng đơn trang (single-page application) dễ dàng và một cách tự nhiên

· React-Router-DOM có thể tạo chuyển đổi trang nhanh hơn mà không cần tải lại toàn bộ trang

· React-Router-DOM có nhiều tính năng hỗ trợ khác nhau, cho phép bạn tăng cường trải nghiệm người dùng và đầy đủ hơn

Nhược điểm:

· React-Router-DOM có thể trở nên khó khăn nếu bạn không quản lý quá nhiều Route, có thể dẫn đến bug hoặc khó khăn trong việc bảo trì kéo dài

· Việc tạo và xử lý URL của React-Router-DOM là trọng tâm của việc phát triển của một ứng dụng, do đó sẽ có một số khó khăn về cấu trúc và bảo trì

2.2.5.3 React-Redux

Ưu điểm:

· React-Redux giúp quản lý state của ứng dụng dễ dàng hơn, đảm bảo tính nhất quán trong toàn bộ ứng dụng

· React-Redux giúp bạn tổ chức và quản lý code một cách tốt hơn, giúp bạn tập trung vào việc lập trình trực tiếp hơn là lo lắng về data

· React-Redux là một thư viện phổ biến trong cộng đồng React, cung cấp cho bạn nhiều tài liệu và hỗ trợ

Nhược điểm:

· Thể hiện bằng cách bọc trong Wrapper Component gây ra độ phức tạp không cần thiết, làm cho một số người mới học Redux cảm thấy khó khăn hơn

· Vớ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ỏ

2.3 Tìm hiểu về FiseBase

2.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ền tả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ưu trữ, xác thực người dùng, push notification và nhiều hơn nữa Với Firebase, các nhà 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ện nay

Hình 2.7 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ức mua lại và tiếp

tục phát triển, cho đến nay Firebase gồm có các hoạt động điển hình như sau: