Đồ án môn học xây dựng website đặt tour du lịch
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.37 MB, 44 trang )
ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
Phạm Phùng Gia Khiêm – 20521459
Cao Phạm Tiến Anh – 20520380
ĐỒ ÁN MÔN HỌC
XÂY DỰNG WEBSITE ĐẶT TOUR DU LỊCH
GIẢNG VIÊN GIẢNG DẠY
THÁI THỤY HÀN UYỂN
TP. HỒ CHÍ MINH, 2022
LỜI CẢM ƠN
Trước khi bước vào phần báo cáo đồ án, nhóm chúng em trân trọng gửi lời cảm ơn đến cô Thái
Thụy Hàn Uyển đã tạo điều kiện cho chúng em có cơ hội được thực hiện đồ án và đã nhiệt tình góp
ý, giúp đỡ chúng em trên lớp, cung cấp cho chúng em rất nhiều kiến thức và cả kinh nghiê ̣m hữu
ích trong và ngoài mảng lâ ̣p triǹ h web.
Dù vậy, trong quá trình học tập, cũng như làm đồ án vì thời gian và kiến thức có hạn nên nhóm em
khơng thể tránh khỏi những thiếu sót. Nhóm em mong nhận được sự thơng cảm, đóng góp và xây
dựng từ cơ để nhóm em có thêm nhiều kiến thức có ích và ngày càng hồn thiện hơn nữa.
Nhóm thực hiện
Trường Đại học Cơng nghệ Thông tin, tháng 12 năm 2022
MỤC LỤC
Contents
CHƯƠNG I.
GIỚI THIỆU ĐỀ TÀI ............................................................................. 7
1.
Giới thiệu chung ................................................................................................... 7
2.
Mục tiêu đề tài ...................................................................................................... 7
2.1.
Lý thuyết ....................................................................................................... 7
2.2.
Mục tiêu ........................................................................................................ 8
3.
Quá trình hiện thực ............................................................................................... 8
4.
Tổng quan về chức năng ....................................................................................... 9
CHƯƠNG II.
1.
2.
3.
CƠ SỞ LÝ THUYẾT ........................................................................... 10
React JS .............................................................................................................. 10
1.1.
Tổng quan và lịch sử ................................................................................... 10
1.2.
Thành phần của React.JS............................................................................. 11
1.3.
Một số đặc điểm nổi bật .............................................................................. 12
1.4.
Ưu và nhược điểm của React JS: ................................................................. 13
Ngôn ngữ lập trình JavaScript ............................................................................. 13
2.1.
Tổng quan ................................................................................................... 13
2.2.
Tại sao ReactJS? ......................................................................................... 14
Hệ quản trị cơ sở dữ liệu Firebase ....................................................................... 14
3.1.
Firebase là gì? ............................................................................................. 14
3.2.
Firebase Realtime database ......................................................................... 14
3.3.
Firebase Authentication............................................................................... 14
3.4.
Firebase Hosting ......................................................................................... 15
3.5.
Ưu điểm của Firebase.................................................................................. 15
3.6.
Nhược điểm của Firebase ............................................................................ 16
CHƯƠNG III. XÂY DỰNG HỆ THỐNG .................................................................... 17
1.
Xây dựng kiến trúc hệ thống ............................................................................... 17
1.1.
Công nghệ sử dụng ..................................................................................... 17
1.2.
Kiến trúc hệ thống: Mơ hình Client-Server .................................................. 17
1.3.
Mơ tả thành phần hệ thống .......................................................................... 18
1.4.
Sơ đồ Use case ............................................................................................ 19
1.5.
2.
Mơ tả Use case ............................................................................................ 20
Mơ tả các màn hình ............................................................................................. 21
2.1.
Màn hình đăng nhập .................................................................................... 21
2.2.
Màn hình đăng ký ....................................................................................... 22
2.3.
Màn hình chính ........................................................................................... 23
2.4.
Màn hình danh sách các Tour ...................................................................... 24
2.5.
Màn hình Detail_Tour ................................................................................. 25
2.6.
Màn hình đặt vé Tour .................................................................................. 26
2.7.
Màn hình thanh tốn Tour ........................................................................... 27
2.8.
Màn hình Confirm information Tour ........................................................... 28
2.9.
Màn hình danh sách các Hotel..................................................................... 29
2.10.
Màn hình chi tiết Hotel................................................................................ 30
2.11.
Màn hình đặt phịng Hotel ........................................................................... 32
2.12.
Màn hình Thanh tốn phịng Hotel .............................................................. 33
2.13.
Màn hình Confirm phịng Hotel .................................................................. 34
2.14.
Màn hình danh sách Flight-ticket: ............................................................... 35
2.15.
Màn hình chi tiết Flight-ticket ..................................................................... 35
2.16.
Màn hình thanh tốn Flight-ticket ............................................................... 36
2.17.
Màn hình thanh tốn Flight-ticket ............................................................... 37
2.18.
Màn hình Confirm Flight-ticket .................................................................. 38
1.
Sơ đồ lớp............................................................................................................. 40
2.
Sơ đồ hoạt động .................................................................................................. 41
2.1.
Hoạt động đăng ký ...................................................................................... 41
2.2.
Hoạt động đặt vé ......................................................................................... 42
CHƯƠNG II.
KẾT LUẬN .......................................................................................... 43
1.
Kết quả đạt được ................................................................................................. 43
2.
Ưu điểm .............................................................................................................. 43
3.
Nhược điểm và giải pháp .................................................................................... 43
DANH MỤC HÌNH ẢNH
Hình 1. Tổng quan chức năng ........................................................................................... 9
Hình 2. Một số ứng dụng nổi tiếng được viết bằng React JS ........................................... 11
Hình 3 Kiến trúc của React JS ........................................................................................ 12
Hình 4. Cấu trúc Firebase ............................................................................................... 15
Hình 5. Kiến trúc hệ thống client server .......................................................................... 17
Hình 6. Sơ đồ use case .................................................................................................... 19
Hình 7. Màn hình đăng nhập ........................................................................................... 21
Hình 8. Màn hình đăng ký .............................................................................................. 22
Hình 9. Màn hình trang chủ ............................................................................................ 23
Hình 10. Màn hình danh sách sản các Tour ..................................................................... 24
Hình 11. Màn hình Detail_Tour ...................................................................................... 25
Hình 12. Màn hình đặt vé Tour ....................................................................................... 26
Hình 13. Màn hình thanh tốn Tour ................................................................................ 27
Hình 14. Màn hình Confirm information Tour ................................................................ 28
Hình 15. Màn hình danh sách các Hotel .......................................................................... 29
Hình 16. Màn hình chi tiết Hotel..................................................................................... 31
Hình 17. Màn hình đặt phịng Hotel ................................................................................ 32
Hình 18. Màn hình thanh tốn phịng Hotel .................................................................... 33
Hình 19. Màn hình Confirm phịng Hotel........................................................................ 34
Hình 20. Màn hình danh sách các Flight-ticket ............................................................... 35
Hình 21. Màn hình chi tiết vé Flight-ticket ..................................................................... 36
Hình 22. Màn hình đặt vé Flight-ticket ........................................................................... 37
Hình 23. Màn hình thanh tốn Flight-ticket..................................................................... 38
Hình 24. Màn hình Confirm Flight-ticket ........................................................................ 38
Hình 25. Sơ đồ lớp.......................................................................................................... 40
Hình 26. Sơ đồ hoạt động đăng ký .................................................................................. 41
Hình 27. Sơ đồ hoạt động đặt vé ..................................................................................... 42
DANH MỤC BẢNG
Bảng 1. Mô tả thành phần ứng dụng ............................................................................... 18
Bảng 2. Mô tả use case ................................................................................................... 20
Bảng 3. Mơ tả màn hình đăng nhập ................................................................................. 21
Bảng 4. Mơ tả màn hình đăng ký .................................................................................... 22
Bảng 5. Mơ tả màn hình trang chủ .................................................................................. 23
Bảng 6. Mơ tả màn hình danh sách Tour ......................................................................... 24
Bảng 7. Mơ tả màn hình Detail_Tour .............................................................................. 25
Bảng 8. Mơ tả màn hình đặt vé Tour ............................................................................... 26
Bảng 9. Mơ tả màn hình thanh tốn Tour ........................................................................ 27
Bảng 10. Mơ tả màn hình Confirm information Tour ...................................................... 28
Bảng 11. Mơ tả màn hình danh sách Hotel ...................................................................... 29
Bảng 12. Mơ tả màn hình chi tiết Hotel........................................................................... 31
Bảng 13. Mơ tả màn hình đặt phịng Hotel ...................................................................... 32
Bảng 14. Mơ tả màn hình thanh tốn phịng Hotel .......................................................... 33
Bảng 15. Mơ tả màn hình Corfirm phịng Hotel .............................................................. 34
Bảng 16. Mơ tả màn hình danh sách các Flight-ticket ..................................................... 35
Bảng 17. Mơ tả màn hình chi tiết vé Flight-ticket ........................................................... 36
Bảng 18. Mô tả màn hình đặt vé Flight-ticket ................................................................. 37
Bảng 19. Mơ tả màn hình thanh tốn Flight-ticket .......................................................... 38
Bảng 20. Mơ tả màn hình Confirm Flight-ticket.............................................................. 39
CHƯƠNG I.
GIỚI THIỆU ĐỀ TÀI
1. Giới thiệu chung
Ngày nay, ứng dụng cơng nghệ thơng tin và việc tin học 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ác chính phủ, tổ chức,
cũng như của các cơng ty; nó đóng vai trị hết sức quan trọng, có thể tạo ra những bước
đột phá mạnh mẽ.
Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức,
công ty thậm chí các cá nhân, ngày nay, khơng lấy gì làm xa lạ. Với một vài thao tác đơn
giản, một người bất kì có thể trở thành chủ của một website giới thiệu về bất cứ gì anh ta
quan tâm: một website giới thiệu về bản thân và gia đình anh ta, hay là một website trình
bày các bộ sưu tập hình ảnh các loại xe hơi mà anh ta thích chẳng hạn.
Đối với các chính phủ và các cơng ty thì việc xây dựng các website riêng càng
ngày càng trở nên cấp thiết. Thông qua những website này, thông tin về họ cũng như các
công văn, thông báo, quyết định của chính phủ hay các sản phẩm, dịch vụ mới của công
ty sẽ đến với những người quan tâm, đến với khách hàng của họ một cách nhanh chóng
kịp thời, tránh những phiền hà mà phương thức giao tiếp truyền thống thường gặp phải.
Hoạt động của một công ty du lịch có quy mơ khá lớn sẽ càng được tăng cường và
mở rộng nếu xây dựng được một website tốt. Bắt nguồn với ý tưởng này, cùng với những
gợi ý của cô Thái Thụy Hàn Uyển, chúng em đã thực hiện đồ án “XÂY DỰNG
WEBSITE ĐẶT TOUR DU LỊCH” như nội dung trình bày sau đây..
2. Mục tiêu đề tài
2.1. Lý thuyết
-
Nghiên cứu về React JS và ngôn ngữ lập trình JavaScript.
-
Nắm rõ các thao tác trên mơi trường phát triển Web và cơng cụ lập trình Visual
studio code.
-
Nghiên cứu và sử dụng dịch vụ cơ sở dữ liệu trên nền tảng đám mây – Firebase.
-
Nghiên cứu cách thức phát triển ứng dụng đa nền tảng.
2.2. Mục tiêu
-
Người dùng có thể đặt, xem tour một cách dễ dàng và minh bạch.
-
Ứng dụng sẽ hỗ trợ từ cơ bản đến đầy đủ chức năng của một ứng dụng đặt tour
điển hình.
-
Ứng dụng có giao diện thân thiện, dễ sử dụng.
3. Quá trình hiện thực
Trải qua quá trình tìm hiểu và thực hiện đề tài, nhóm đã giải quyết được các vấn đề đặt ra
ban đầu, từng bước giải quyết và liên tục đặt ra những vấn đề mới để ngày càng hoàn
thiện sản phẩm. Những bước thực hiện:
-
Phân tích u cầu bài tốn
-
Lựa chọn nền tảng công nghệ phù hợp với yêu cầu
-
Nghiên cứu cơ sở lý thuyết của công nghệ lựa chọn
-
Áp dụng lý thuyết vào xây dựng ứng dụng thực tiễn
-
Kiểm tra và khám phá các ứng dụng tương tự để tối ưu hoá trải nghiệm người dùng
và cải thiện các tính năng cho ứng dụng
4. Tổng quan về chức năng
Hình 1. Tổng quan chức năng
CHƯƠNG II. CƠ SỞ LÝ THUYẾT
1. React JS
1.1. Tổng quan và lịch sử
React là một thư viện JavaScript mã nguồn mở phổ biến thực hiện việc xem dữ liệu với
sự trợ giúp của HTML. Nó cịn được gọi là ReactJS và React.js, vì vậy đừng nhầm lẫn
nếu bạn đọc các ký hiệu khác nhau ở những nơi khác nhau. Vì nó được phát triển bởi
Facebook, nên nó cịn được gọi phổ biến là “Facebook React.js.” Hiện tại, nó được duy trì
bởi những người như Instagram, Facebook và các nhà phát triển cộng đồng quan tâm đến
thư viện.
Vì vậy, làm thế nào nó hoạt động? ReactJS hoạt động dưới dạng các khung nhìn sử dụng
hệ thống dựa trên thành phần. Các thành phần được chỉ định dưới dạng thẻ HTML tùy
chỉnh, mang lại khả năng sử dụng dễ dàng. React rất hữu ích khi bảo vệ các thành phần
bên trong hoặc luồng dữ liệu. Các thành phần con không thể bị ảnh hưởng trực tiếp với
các truy vấn bên ngoài, tạo ra một lựa chọn tốt cho việc phát triển các chế độ xem giao
diện người dùng. Nó cũng rất hiệu quả trong việc cập nhật tài liệu HTML với dữ liệu mới,
khiến nó trở thành lựa chọn hồn hảo cho ứng dụng web dựa trên dữ liệu như Facebook
hoặc Instagram. Thư viện cũng đảm bảo rằng một sự tách biệt rõ ràng được thực hiện
giữa các thành phần khác nhau, đảm bảo dễ dàng bảo trì và nâng cấp trong tương lai.
React là một công nghệ mới khi so sánh với các cơng nghệ khác trên thị trường. Nó ra đời
vào năm 2011, khi Jordan Walke, một kỹ sư phần mềm tại Facebook tạo ra thư viện.
React bị ảnh hưởng bởi những thứ như XHP, một khung thành phần HTML đơn giản cho
PHP. Trường hợp sử dụng đầu tiên của React là trên newsfeed của Facebook vào năm
2011. Sau đó, nó được Instagram chọn để sử dụng trong hệ thống của họ. Theo thời gian,
React đã phát triển và Facebook đã quyết định biến nó thành mã nguồn mở vào tháng 5
năm 2013 tại JSConf US. Vào năm 2015 JSConf, React Native đã được công bố cho phép
phát triển dễ dàng với Android và iOS deveopment. Trong cùng năm đó, React Native
được mã nguồn mở để giúp nó phát triển.:
Một số trang web tiêu biểu hiện năng được tạo nên bởi React.JS:
Hình 2. Một số ứng dụng nổi tiếng được viết bằng React JS
1.2. Thành phần của React.JS
Một ReactJS bao gồm các thành phần chính dưới đây:
-
-
Redux là một phần cực kỳ quan trọng đối với ReactJS và được sử dụng phổ biến.
Trong một ReactJS khơng có các module chun dụng để xử lý dữ liệu nên nó
được thiết lập một cách độc lập bằng việc chia nhỏ view thành các thành phần
khác nhau giúp chúng liên kết chặt chẽ với nhau tốt hơn. Sự liên kết và các mối
quan hệ giữa các component trong ReactJS cần được quan tâm đặc biệt bởi chỉ có
một luồng dữ liệu duy nhất là luồng dữ liệu từ cha sang con. Việc sử dụng luồng
dữ liệu một chiều này có phần khó khăn đối với những người mới tìm hiểu sử dụng
và ứng dụng vào các dự án. Bên cạnh các mặt hạn chế, ReactJS có thể phát huy
được tất cả chức năng cũng như vai trị của mình trong q trình sử dụng cơ chế
một chiều này. Bởi các chức năng của view trở nên phức tạp hơn rất nhiều.
Virtual Dom là một phần quan trọng mà hầu như các framework đều sử dụng nó
như một ReactJS. Người dùng khơng cần thao tác trực tiếp trên Dom mà vẫn có
thể thấy được view và các thay đổi đó. Bởi Virtual Dom đóng vai trò là một model
và kiêm cả vai trò là một view nên sự thay đổi một trong hai nhân tố sẽ kéo theo
các nhân tố khác thay đổi. Ngược lại, nếu bạn không thao tác trực tiếp trên các
phân tử Dom, bạn vẫn có thể thực hiện được các cơ chế Data Binding.
Hình 3 Kiến trúc của React JS
-
-
-
-
1.3. Một số đặc điểm nổi bật
ReactJS tạo ra cho bản thân nó một Dom ảo, nơi các Component được tồn tại trên
đó và việc tạo ra Dom giúp cải thiện hiệu suất làm việc tốt hơn. Khi bạn cần cập
nhật các thông tin lên Dom hoặc thay đổi gì đó, ReactJS đều có thể tính tốn trước
và thực hiện chúng. Nhờ đó mà ReactJS sẽ tránh được các thao tác cần có trên
Dom và không tốn thêm bất cứ hành động nào khác.
Việc viết code trở nên dễ dàng hơn bởi nó sử dụng một cú pháp đặc biệt là JSX,
cho phép trộn được giữa code HTML và JavaScript. Bên cạnh đó người dùng có
thể sử dụng đoạn code này để thêm vào hàm Render mà không cần thực hiện việc
nối chuỗi. Điều này được đánh giá là một trong những đặc tính mới cực kỳ thú vị
của ReactJS. Đồng thời, việc chuyển đổi các đoạn HTML thành các hàm khởi
động đều được thực hiện từ bộ biến đổi chính là JSX.
ReactJS có nhiều công cụ phát triển nhờ cài đặt thêm ứng dụng mở rộng của
Chrome chuyên sử dụng cho ReactJS. Các lập trình viên có thể debug code một
cách dễ dàng hơn, giúp bạn quan sát trực tiếp vào Virtual Dom.
Thư viện ReactJS thân thiện với SEO, được sự hỗ trợ từ các Render, trả về trình
duyệt dưới dạng khi bạn chạy ReactJS trên server và Virtual Dom.
1.4. Ưu và nhược điểm của React JS:
1.4.1. Ưu điểm:
-
-
-
Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là
JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có
thể them vào các đoạn HTML vào trong hàm render mà khơng cần phải nối chuỗi.
Đây là đặc tính thú vị của Reactjs. Nó sẽ chuyển đổi các đoạn HTML thành các
hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.
Nó có nhiều cơng cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng
dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng
hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual
DOM như thể bạn đang xem cây DOM thông thường.
Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu
SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện
ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều
này thực tế là chậm. Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao?
Reactjs là một thư viện component, nó có thể vừa render ở ngồi trình duyệt sử
dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về.
-
Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì
virtual DOM được cài đặt hồn tồn bằng JS.
-
Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo
trì và sửa lỗi.
1.4.2. Nhược điểm:
-
-
Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là
một MVC framework như những framework khác. Đây chỉ là thư viện của
Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và
Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2-way
binding hay là 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 khá nặng nếu so với các framework khác React có kích thước tương tương
với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một
framework hồn chỉnh.
-
Khó tiếp cận cho người mới học Web
2. Ngơn ngữ lập trình JavaScript
2.1. Tổng quan
- Javascript chính là một ngơn ngữ lập trình web rất phổ biến ngày nay. Javascript
được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống
động hơn. Chúng cũng đóng vai trị tương tự như một phần của website, cho phép
Client-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo ra những
website động.
-
-
-
-
-
Brendan Eich chính là người đã phát triển Javascript tại Netscape với tiền thân là
Mocha. Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi thành
JavaScript.
Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và đến
năm 1999 thì ECMAScript 3 được ra mắt.
Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng, đồng
thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lập trình viên.
2.2. Tại sao ReactJS?
ReactJS giúp cho việc viết các đoạn code Javascript sẽ trở nên dễ dàng hơn vì nó
sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX. Thơng qua JSX cho phép
nhúng code HTML và Javascript.
ReactJS cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những
component độc lập. Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây
Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component
đơn giản hơn.
Đi kèm với ReactJS là rất nhiều các công cụ phát triển giúp cho việc debug code
một cách dễ dàng hơn.
Một trong những ưu điểm nữa của ReactJS đó là sự thân thiện với SEO. Hầu như
các JS Frameworks không thân thiện với các tìm kiếm mặc dù đã được cải thiện
nhiều nhưng dưới sự hỗ trợ của các render dữ liệu trả về dưới dạng web page giúp
cho SEO chuẩn hơn.
3. Hệ quản trị cơ sở dữ liệu Firebase
3.1. Firebase là gì?
Firebase chính là một dịch vụ cơ sở dữ liệu được hoạt động ở trên nền tảng đám mây
(Cloud). Đi kèm với đó là một hệ thống máy chủ mạnh mẽ của Google. Hệ thống có chức
năng chính là giúp cho người dùng có thể lập trình ứng dụng thơng qua cách đơn giản hóa
những thao tác với các cơ sở dữ liệu.
3.2. 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ên cần phải đăng ký tài
khoản ở trên Firebase. Dữ liệu ở trong database sẽ tự động cập nhậ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ững dữ liệu này sẽ được truyền tải
thông qua các kết nối SSl có 2048 bit.
3.3. 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ác dụng người dùng
thông qua Email, Facebook, Twitter, GitHub hay Google. Ngoài ra, hoạt động Firebase
Authentication cũng hỗ trợ xác thực nặc danh cho những ứ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ủa nhữ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ác thông tin cá nhân của người dùng không bị
đánh cắp.
3.4. 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ột mạ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ội dung 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 đến những người dùng cuối cùng.
Hình 4. Cấu trúc Firebase
3.5. Ưu điểm của Firebase
- Tốc độ cao: Firebase hỗ trợ phát triển ứng dụng với tốc độ nhanh chóng, giảm bớt
-
-
thời gian phát triển và tiếp thị ứng dụng
Đơn giản, dễ dàng trong sử dụng: Người dùng có thể tạo tài khoản Firebase bằng
tài khoản Google và cũng như sử dụng nền tảng này trong phát triển ứng dụng một
cách dễ dàng
Một nền tảng, đa dịch vụ: Firebase cung cấp đầy đủ các dịch vụ hỗ trợ phát triển
web, bạn có thể chọn database Firestore hoặc Realtime theo ý muốn
- Là một phần của Google: Firebase đã được mua lại và hiện tại đang là một phần
-
-
của Google. Nó khai thác triệt để sức mạnh và các dịch vụ sẵn có của Google
Tập trung phát triển chủ yếu về giao diện người dùng: Firebase cho phép lập trình
viên tập trung chủ yếu vào phát triển phần giao diện người dùng nhờ kho Backend
mẫu phong phú đa dạng
Khơng có máy chủ: Điều này giúp Firebase có khả năng tối ưu hóa về hiệu suất
làm việc thơng qua mở rộng cụm database
Học máy: Firebase cung cấp học máy cho lập trình viên, hỗ trợ tối đa cho việc phát
triển ứng dụng
Tạo ra lưu lượng truy cập: Với khả năng hỗ trợ tạo lập các chỉ mục, Firebase giúp
nâng cao thứ hạng của ứng dụng trên bảng xếp hạng Google, từ đó tăng lượt traffic
Theo dõi lỗi: Firebase là công cụ phát triển, khắc phục lỗi tuyệt vời
Sao lưu: Firebase sao lưu thường xun, giúp đảm bảo tính sẵn có và bảo mật
thông tin cho dữ liệu
3.6. Nhược điểm của Firebase
-
Không phải mã nguồn mở
Chỉ hoạt động trên CSDL NoSQL
Lập trình viên không được truy cập vào mã nguồn
Truy vấn chậm
Phạm vi hoạt động bị hạn chế ở một vài quốc gia
Một vài dịch vụ cần trả phí, chi phí dành cho Firebase tương đối lớn và không ổn
định
Thiếu Dedicated Servers và cả hợp đồng doanh nghiệp
CHƯƠNG III. XÂY DỰNG HỆ THỐNG
1. Xây dựng kiến trúc hệ thống
1.1. Công nghệ sử dụng
● Ngôn ngữ: JavaScript, CSS
● UI Framework: ReactJS
● UI Design tool: Figma
● Database: Firebase
● IDE: Visual Studio Code
1.2. Kiến trúc hệ thống: Mơ hình Client-Server
- Lớp Client: Hiển thị giao diện người dùng, thông qua kết nối Internet để kết nối đến cơ
sở dữ liệu quản lý thư viện. Là nơi diễn ra các tương tác của người dùng với chương trình
như nhập, các thao tác truy xuất dữ liệu.
- Lớp Server: Quản lý và chứa toàn bộ dữ liệu của phần mềm. Đồng thời xử lý các yêu
cầu nhập/xuất được gửi xuống từ lớp Client. Ứng dụng được dùng làm lớp Server là
Firebase.
Hình 5. Kiến trúc hệ thống client server
1.3. Mô tả thành phần hệ thống
STT
Thành Phần
Mô tả
1
Repository
Chứa các service được cung cấp từ firebase
2
Model
Chứa các class đối tượng từ database.
3
Screen
Chứa các thiết kế giao diện cho các màn hình.
4
Widget
Chứa các thành phần có thể được tái sử dụng cho
các màn hình khác nhau.
5
Bloc
Chứa các file state, event, bloc riêng biệt của các
màn hình.
6
Assets
Chứa các file hình ảnh của ứng dụng.
Bảng 1. Mô tả thành phần ứng dụng
1.4. Sơ đồ Use case
Hình 6. Sơ đồ use case
1.5. Mơ tả Use case
STT
Chức năng
Mơ tả
1
Đăng ký
Người dùng có thể tạo tài khoản mới bằng email và mật
khẩu
2
Đăng nhập bằng
email và mật
khẩu
Người dùng tiến hành đăng nhập bằng email và mật khẩu
đã được đăng ký trước đó
3
Thanh tốn
Người dùng có thể thanh tốn cho vé của mình sau khi
chọn đặt vé
4
Đặt vé Tour
Người dùng có thể tiến hành đặt vé Tour du lịch
5
Đặt vé Hotel
Người dùng có thể tiến hành đặt vé phịng Hotel
6
Đặt vé máy bay
Người dùng có thể tiến hành đặt vé Máy bay
7
Tìm kiếm thơng
tin các vé
Tìm kiếm các thơng tin của vé thơng qua bộ lọc
8
Xem vé đã đặt
Xem lại các thông tin vé đã đặt của bản thân
Bảng 2. Mô tả use case
2. Mơ tả các màn hình
2.1. Màn hình đăng nhập
Hình 7. Màn hình đăng nhập
STT
Biến cố
1
Click to Login
2
Click Sign Up
3
Click Forgot Password
Xử lý
Đăng nhập vào trang chủ dựa trên
Email và password
Chuyển sang màn hình đăng ký tài
khoản
Chuyển sang màn hình đăng ký tài
khoản
Bảng 3. Mơ tả màn hình đăng nhập
2.2. Màn hình đăng ký
Hình 8. Màn hình đăng ký
STT
Biến cố
Xử lý
1
Click to Register
Tiến hành đăng ký tài khoản
2
Click Login
Di chuyển qua màn hình đăng nhập
Bảng 4. Mơ tả màn hình đăng ký
2.3. Màn hình chính
Hình 9. Màn hình trang chủ
STT
Biến cố
Xử lý
1
Click Home
Di chuyển qua màn hình trang chủ
2
Click Tour
3
Click Hotel
4
Click Air Ticket
5
Click Book Ticket
Di chuyển qua màn hình danh sách các
Tour
Di chuyển qua màn hình danh sách các
Hotel
Di chuyển đến màn hình danh sách các
Air Ticket
Di chuyển đến màn hình danh sách các
Tour
Bảng 5. Mơ tả màn hình trang chủ
2.4. Màn hình danh sách các Tour
Hình 10. Màn hình danh sách sản các Tour
STT
Biến cố
Xử lý
1
Chọn Icon kính lúp
Tìm kiếm Tour theo tên
2
Chọn Checked All
Hiển thị tất cả các Tour
3
Hiện thị các Tour theo giá đã chọn
4
Chọn Checked các mục
giá
Chọn icon quay lại
5
Chọn Tour
Chuyển đến màn hình chi tiết Tour
Quay về màn hình trang chủ
Bảng 6. Mơ tả màn hình danh sách Tour
2.5. Màn hình Detail_Tour
Hình 11. Màn hình Detail_Tour
STT
Biến cố
Xử lý
1
Load page
Hiện thị nội dung chi tiết của Tour
2
Click Book Now
Chuyển đến màn hình tiến hành đặt vé
Tour
Bảng 7. Mơ tả màn hình Detail_Tour
