Tìm hiểu flutter và xây dựng ứng dụng đặt tour du lịch trực tuyến

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO CUỐI KỲ:
MƠN :ĐỒ ÁN 2
Đề tài: Tìm hiểu Flutter và xây dựng ứng dụng đặt tour du lịch
trực tuyến

Giảng viên hướng dẫn:

ThS. Huỳnh Nguyễn Khắc Huy

Sinh viên thực hiện:
Nguyễn Trọng Khanh

MSSV: 17520627

Lý Đạo Nam

MSSV: 17520777
TP Hồ Chí Minh, Tháng 1, Năm 2021


NHẬN XÉT CỦA GIẢNG VIÊN
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………

………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………
………………………………………………………………………………………………


Lời cảm ơn
Lời đầu tiên, nhóm chúng em xin bày tỏ lòng biết ơn sâu sắc đến thầy Huỳnh Nguyễn
Khắc Huy – Giảng viên hướng dẫn môn Đồ án 2 lớp SE122.L11.PMCL, người đã cùng
đồng hành và tận tình hướng dẫn cho nhóm qua những buổi thảo luận. Chính nhờ sự giúp
đỡ hết lịng của thầy mà nhóm chúng em mới có thể hồn thiện được được đồ án này một
cách sn sẻ nhất.
Mặc dù kiến thức của nhóm chúng em vẫn cịn hạn hẹp nên khơng thể tránh khỏi
những thiếu sót nhưng nhóm chúng em đã cố gắng hồn thiện đồ án đúng thời hạn, hạn chế
mắc lỗi nhất có thể. Vì vậy, mọi thành viên trong nhóm đều ln mong đợi nhận được

những ý kiến đóng góp q báu từ thầy và qua đó lắng nghe, tiếp thu để rút kinh nghiệm,
tự sửa chữa, hoàn thiện bản thân mình trên tinh thần nghiêm túc, tự giác học hỏi.
Bên cạnh đó, xin gửi lời cảm ơn đến tất cả sự đóng góp của các thành viên trong
nhóm, những người đã nổ lực tìm kiếm tài liệu cũng như đưa ra những ý tưởng để hoàn
thành đồ án một cách tốt nhất. Mong rằng sau khi hoàn thành đồ án này cả nhóm sẽ cải
thiện phần nào kĩ năng học tập, kĩ năng làm việc nhóm của bản thân.
Trong quá trình làm đề tài báo cáo, chắc khơng tránh khỏi nhiều điều thiếu sót, rất
mong nhận được phản hồi từ thầy và các bạn để góp phần làm cho bản báo cáo thêm hoàn
thiện hơn.
Chân thành cảm ơn !


MỤC LỤC
THƠNG TIN CHUNG:................................................................................................................................. 2
I. CƠNG NGHÊ FLUTTER: ........................................................................................................................ 1
1.

Tìm hiểu về công nghệ Flutter ....................................................................................................... 1

2.

Kiến trúc Flutter ............................................................................................................................. 3

3.

Kết luận ............................................................................................................................................ 5

II. ỨNG DỤNG ĐẶT TOUR DU LỊCH ...................................................................................................... 6
1.

Phát biểu về bài toán....................................................................................................................... 6

2.

Yêu cầu và thực nghiệm ................................................................................................................. 7

3.

Các chức năng chính ....................................................................................................................... 9
3.1.

Đăng nhập ................................................................................................................................ 9

3.2.

Đăng ký .................................................................................................................................... 9

3.3.

Xem danh sách tour ................................................................................................................ 9

3.4.

Xem chi tiết tour...................................................................................................................... 9

3.5.

Tìm kiếm tour .......................................................................................................................... 9

3.6.

Xem bài viết về du lịch.......................................................................................................... 10

3.7.

Đăng bài viết du lịch ............................................................................................................. 10

3.8.

Đặt tour .................................................................................................................................. 10

4.

Danh sách các APIs ....................................................................................................................... 10

5.

Thiết kế dữ liệu.............................................................................................................................. 11

6.

Mơ hình Usecase ............................................................................................................................ 12

7.

6.1.

Usecase tổng qt .................................................................................................................. 12

6.2.

Usecase phân rã ..................................................................................................................... 13

6.3.

Đặc tả Usecase ....................................................................................................................... 16

Sơ đồ tuần tự ................................................................................................................................. 19
7.1.

Xem lịch sử đặt tour.............................................................................................................. 19

7.2.

Xem chi tiết tour.................................................................................................................... 20

7.3.

Tìm kiếm tour ........................................................................................................................ 20

7.4.

Xem danh sách tour .............................................................................................................. 21

7.5.

Đặt tour .................................................................................................................................. 21

7.6.

Xem bài viết ........................................................................................................................... 22

7.7.

Đăng bài viết .......................................................................................................................... 22


7.8.

Đăng xuất ............................................................................................................................... 23

7.9.

Quên mật khẩu ...................................................................................................................... 23

7.10.

Đăng nhập .......................................................................................................................... 24

7.11.

Đăng ký .............................................................................................................................. 24

Sơ đồ hoạt động ............................................................................................................................. 25

8.

8.1.

Xem lịch sử đặt tour.............................................................................................................. 25

8.2.

Xem chi tiết tour.................................................................................................................... 25

8.3.

Tìm kiếm tour ........................................................................................................................ 25

8.4.

Xem danh sách tour .............................................................................................................. 26

8.5.

Đặt tour .................................................................................................................................. 26

8.6.

Xem bài viết ........................................................................................................................... 26

8.7.

Đăng bài viết .......................................................................................................................... 27

8.8.

Đăng xuất ............................................................................................................................... 27

8.9.

Quên mật khẩu ...................................................................................................................... 28

8.10.

Đăng nhập .......................................................................................................................... 28

8.11.

Đăng ký .............................................................................................................................. 28

Thiết kế màn hình chi tiết............................................................................................................. 29

9.

9.1.

Màn hình đăng nhập ............................................................................................................. 29

9.2.

Màn hình đăng ký ................................................................................................................. 30

9.3.

Màn hình danh sách tour ..................................................................................................... 31

9.4.

Màn hình chi tiết tour ........................................................................................................... 32

9.5.

Màn hình tìm kiếm tour ....................................................................................................... 33

9.6.

Màn hình xem bài viết du lịch.............................................................................................. 34

9.7.

Màn hình đặt tour ................................................................................................................. 35

10.

Kết luận ...................................................................................................................................... 36

Đồ Án 2 : SE122.L11.PMCL – VN

1


THÔNG TIN CHUNG:
1. Tên đề tài: Ứng dụng đặt tour du lịch trực tuyến.
2. Link: />3. Thơng tin nhóm:
STT

MSSV

Họ và tên

1

17520627 Nguyễn Trọng Khanh

2

17520777 Lý Đạo Nam

Điện thoại

Email

0399529209




4. Đánh giá công việc:
Thái độ

Đánh giá

Nguyễn Trọng Khanh 80%

Tốt

Đạt

Lý Đạo Nam

Tốt

Đạt

Tên

Mức độ hồn
thành cơng việc

80%

Đồ Án 2 : SE122.L11.PMCL – VN

2


I. CƠNG NGHÊ FLUTTER:
1. Tìm hiểu về cơng nghệ Flutter
a. Flutter là gì?
Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS và
Android trong khoảng thời gian ngắn. Flutter hoạt động với những code sẵn có được sử dụng bởi
các lập trình viên, các tổ chức.
Phiên bản đầu tiên của Flutter được gọi là "Sky" và chạy trên hệ điều hành Android. Nó được
cơng bố tại hội nghị nhà phát triển Dart 2015, với dự định ban đầu để có thể kết xuất ổn định ở mức
120 khung hình trên giây. Trong bài phát biểu chính ở hội nghị Google Developer Days tại Thượng
Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiên bản lớn cuối cùng trước
Flutter 1.0. Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự kiện Flutter Live, là
phiên bản "ổn định" đầu tiên của khung ứng dụng này.
Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS và

Android trong khoảng thời gian ngắn. Flutter hoạt động với những code sẵn có được sử dụng bởi
các lập trình viên, các tổ chức.
Flutter sử dụng ngôn ngữ DART cũng do Google phát triển và flutter cũng đã được sử dụng để
tạo ra các ứng dụng native cho Google.
Flutter được phát triển nhằm giải quyết bài toán thường gặp trong mobile là Fast Development và
Native Performance. Nếu như React Native chỉ đảm bảo Fast Development và code native thuần chỉ
đảm bảo Native Performance thì Flutter làm được cả 2 điều trên.
Flutter hoàn toàn miễn phí và cũng là mã nguồn mở.
b. Sự khác biệt giữa Flutter và các công nghệ khác

- Là một bộ SDK đa nền tảng, các ứng dụng Flutter có thể hoạt động trên cả iOS và Android.
- Chúng chạy trên engine render Flutter (được viết bằng C++) và Flutter Framework (được viết
bằng Dart, cũng như các ứng dụng Flutter)
- Flutter được thiết kế từ đầu để đạt tới tốc độ khung hình 60fps. Trong khi đây khơng phải là một
con số hiếm gặp trên iOS, nhưng với Android, bạn có thể cảm thấy sự khác biệt rõ rệt ngay lập
tức.
- Hỗ trợ Hot ReLoad rất tiện lợi, giảm thời gian debug từ đó dẫn đến hiệu quả cao hơn khi thực
hiện.

 So sánh nhỏ giữa Flutter và React native.
Khả năng dùng lại code

Flutter
Flutter cho phép overwriting
code. Nếu bạn có kế hoạch
cho việc sử dụng lại code thì
Flutter là tùy chọn tốt nhất
để có thể tối ưu được việc
lựa sử dụng lại code.

React Native
React Native cho phép bạn
sử dụng lại code, nhưng điều
này lại bị giới hạn trong một
vài components cơ bản. Để
có thể định nghĩa các style
cho nền tảng React Native
sẽ mất khá nhiều thời gian.

Đồ Án 2 : SE122.L11.PMCL – VN

1


Các thư viện Third Party

Có nhiều các third-party
packages đang được sử dụng
và đang ngày càng được
phát triển, và chúng thực sự
rất hữu dụng.

Độ phổ biến

Với khoảng 111k Github
stars, Flutter đã trở thành
trends trong việc phát triển.
Như Google đã giới thiệu về
framework này. Nó chắc
chắn muốn trở thành một

nền tảng phổ biến trong sự
lựa chọn của các developer.
Từ khi Flutter mới được giới
thiệu, đã có một lượng lớn
các bài viết hướng dẫn được
đưa lên online, trong đó có
rất nhiều các tài ngun hữu
ích để có thể bắt đầu viết
ứng dụng đầu tiên trên
mobile app.

Cộng đồng phát triển

Từ khi React Native trở lên
phổ biến, đã có rất nhiều các
third-party packages được
phát triển và được sử dụng
rất nhiều trong ứng dụng,
chúng có thể được thêm bớt
một cách linh động trong
ứng dụng của bạn.
Với 92k Github stars, React
Native có lượng developer
sử dụng đang nhiều hơn bởi
vì lượng developer sử dụng
JavaScript rất dễ dàng để sử
dụng với các thư viện của
React.
React Native đã được phổ
biến từ lâu, vì thế cho nên

nó cũng có rất nhiều các
cộng đồng để hỗ trợ online.
Những kỹ năng của các lập
trình viên có kinh nghiệm
trong JavaScript chắc chắn
sẽ đưa ra giải pháp cho bất
kỳ vấn đề nào trong quá
trình phát triển của bạn.

c. Ưu điểm, Nhược điểm
Ưu điểm:

- Ngôn ngữ Dart: Dart - OOP, nó khá dài, nhưng những người quen viết bằng Java / C # sẽ
hài lòng với Dart.
- Ít phải viết các config khi tạo project mới theo cách thủ công, ngược lại với React Native.
- Chỉ cần tải về Flutter từ git, chạy “flutter doctor”, và nó sẽ cho bạn biết những loại vấn đề
bạn có thể có trong hệ thống. Sau đó, tạo một project từ Android Studio hoặc bất kỳ IDE
nào sau khi cài đặt Flutter Plug-in sơ bộ và start project. Ngoài ra nó cịn có Hot-reload
giống như trong React-Native.
- Hỗ trợ tuyệt vời cho IDE (Android Studio, IDE IntelliJ, VSCode)
- Trình điều hướng tích hợp sẵn. Sau khi tạo ra một ứng dụng trên Flutter, bạn có thể thấy nó
có Navigator được xây dựng sẵn. Bạn có thể tạo một route mới mà khơng cần kết nối bất
kỳ thứ gì (khơng giống như trong RN, nơi bạn cần kết nối bất kỳ package điều hướng gốc
nào v.v);
- Giải pháp quản lý dữ liệu được tạo sẵn, ví dụ trong Flutter này là "Mọi thứ đều có một
Widget" cho nó. Có một StatefulWidget đặc biệt, với sự giúp đỡ của nó mà chúng ta có thể
quản lý trạng thái widget và thay đổi nó một cách năng động.
Nhược điểm:

Đồ Án 2 : SE122.L11.PMCL – VN

2


- Có một rào cản lớn cho những người chỉ học JS, hoặc đến từ RN. Do thực tế là Dart được
sử dụng với sự thừa kế, đa hình của nó và tất cả các thứ về OOP.
- Khơng có JSX mà tất cả chúng ta đã quen khi làm RN. Nhìn vào tệp Dart trong đó khơng
có phân chia thành template, styling và data, nó trở nên khó chịu.
- Styling là một nhược điểm. Thực tế là khơng có sự tách biệt thành Styles, templates và
controller, có một vấn đề khi mơ tả một thành phần thì chúng ta cũng cần mơ tả các styles
cùng một lúc.
- Animation cịn khó khăn hơn. Mặc dù nó có một animation tốt, nhưng nó sẽ khó hơn khi
tạo hiệu ứng động, khơng giống như trong RN.
- Tối ưu hóa. Trong Fluter, chỉ có thừa kế widget với các điều kiện có thể thay đổi (trạng
thái) và không thể thay đổi (không trạng thái). Trong khi ở React-Native chúng ta có thể
quản lý vịng đời. Ngồi ra, một nhược điểm lớn là thiếu các công cụ để lưu trạng thái của
ứng dụng, vấn đề này có thể, tuy nhiên, được giải quyết bằng cách tuần tự hóa trạng thái
hiện tại.
d. Mục đích sử dụng Flutter cho đồ án.

- Framework hiện đại và reactive: Dễ dàng tạo giao diện người dùng của bạn với framework
hiện đại, reactive của Flutter và tập hợp các platform, layout và widget phong phú. Giải quyết
các thách thức giao diện người dùng khó khăn của bạn với các API mạnh mẽ và linh hoạt cho
2D, animation, gesture, hiệu ứng và hơn thế nữa.
- UI đẹp và biểu cảm: Thỏa mãn người dùng của bạn với các widget built-in đẹp mắt của
Flutter theo Material Design và Cupertino (iOS-flavor), các API chuyển động phong phú,
scroll tự nhiên mượt mà và tự nhận thức được nền tảng.
- Phát triển ứng dụng thống nhất: Flutter có các cơng cụ và thư viện để giúp bạn dễ dàng đưa ý
tưởng của mình vào cuộc sống trên iOS và Android. Nếu bạn chưa có kinh nghiệm phát triển
trên thiết bị di động, thì Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng

dụng di động tuyệt đẹp.
- Flutter sở hữu bộ doc (document) phải nói là khơng bỏ sót thứ gì. Đi từ cài đặt, hướng dẫn
viết app cơ bản cho tới CI/CD, debug, test và profiling. Bộ profiling của Flutter cũng cực kì
hay dùng để đo đạc các chỉ số về performance khá chi tiết.

2. Kiến trúc Flutter
Flutter được thiết kế như 1 hệ thống nhiều lớp, và có thể mở rộng. Nó tồn tại dưới dạng một
loạt các thư viện độc lập mà mỗi thư viện phụ thuộc vào lớp bên dưới. Khơng có lớp nào có quyền
truy cập đặc biệt vào lớp bên dưới, và mọi phần ở framework level đều được thiết kế để trở thành
tùy chọn và có thể thay thế.

Đồ Án 2 : SE122.L11.PMCL – VN

3


a. Embedder

- Đối với hệ điều hành, các ứng dụng Flutter được đóng gói theo cách giống như bất kì ứng
dụng gốc nào khác. Một platform-specific embedder cung cấp 1 entrypoint, phối hợp với
hệ điều hành để truy cập vào các dịch vụ như rendering surfaces, accessibility, input, và
quản lý message event loop.
- Embedder được viết bằng ngôn ngữ phù hợp với nền tảng: hiện tại là Java và C++ cho
Android, Objective- C/Objecttive-C++ cho iOS và macOS, và C++ cho Windows và
Linux.
- Khi sử dụng embedder, mã Flutter có thể tích hợp vào ứng dụng hiện có dưới dạng
module, hoặc cũng có thể là tồn bộ nội dung ứng dụng.
b. Flutter Engine

- Cốt lõi của Flutter là Flutter Engine, phần lớn được viết bằng C++, có các nguyên tắc cần

thiết để hỗ trợ tất cả ứng dụng Flutter.
- Engine có trách nhiệm chuyển đổi các composited scenes bất cứ khi nào 1 frame mới cần
được thiết kế. Nó cung cấp khả năng triển khai các API cốt lõi của Flutter bao gồm đồ
họa (thông qua Skia), text layout, file và network I/O, trợ năng, kiến trúc plugin và Dart
runtime – compile tool.

Đồ Án 2 : SE122.L11.PMCL – VN

4


- Engine tiếp xúc với Flutter framework thông qua dart:ui– thư viện bao bọc mã C++ cơ
bản trong các lớp Dart. Thư viện này bao gồm các lớp có nhiệm vụ điều khiển hệ thống
nhập liệu, đồ họa và text rendering.
c. Flutter Framework

- Flutter Framework chính là nơi các nhà phát triển tương tác với Flutter, cung cấp một
framework hiện đại và reactive được viết bằng ngơn ngữ Dart. Nó là một bộ thư viện
phong phú các platform, layout bao gồm một loạt các layer. Từ dưới lên, đó là:
• Foundation: Được xem là core library, định nghĩa và cung cấp các utility classes, functions
và được nhiều layer khác sử dụng trong Flutter.
• Animation/Painting/Gesture: Là các thư viện cung cấp các khối xây dựng cơ bản (basic
building blocks) cho việc thực hiện hóa các chuyển động trong Flutter (Animation), hỗ trợ
xây dựng giao diện (Painting), nhận dạng tương tác cử chỉ của người dùng (Gesture).
• Rendering: Trong Flutter, các UI components được tổ chức dưới dạng cây phân tầng với
mỗi node là 1 RenderObject.
• Widgets: Được xây dựng bởi Dart với cảm hứng từ React. Widgets được xây dựng theo
dạng cây với những object là lớp kế thừa của RenderObject. Ý tưởng trọng tâm của widgets
là bạn sẽ xây dựng UI trên các widgets này. Widgets nhận và lưu trữ trạng thái (state) của
UI, và sẽ rebuild nếu state thay đổi.

• Material/Cupertino: Được xây dựng từ Widgets library để triển khai ngôn ngữ thiết kế
Material hoặc iOS (Cupertino)

3. Kết luận
- Chọn Flutter nếu bạn muốn cross-platform, UI hấp dẫn, native performance tuyệt vời, time-tomarket nhanh hơn và tận dụng lợi thế cạnh tranh của Dart trong mơi trường lập trình của bạn.
- Flutter dù mới nhưng cũng là một công nghệ mà những nhà phát triển mobile không thể không
biết đến.
- Tại thời điểm viết báo cáo (01/2021), Flutter đã vượt lên trên React Native về số lượt star trên
Github (111k star so với 92k star ), (thời điểm tháng 9/2019, Flutter chỉ bằng một nửa), cũng
như vượt số lượt search trên Google (số liệu của Google Trend), qua đó cũng đủ cho thấy độ nổi
tiếng ngày càng cao của nó.

Đồ Án 2 : SE122.L11.PMCL – VN

5


II. ỨNG DỤNG ĐẶT TOUR DU LỊCH
1. Phát biểu về bài toán
1.1.Giới thiệu về đề tài
Ứng dụng đặt tour du lịch trực tuyến của nhóm em có hàng loạt thơng tin tour du lịch trọn
gói, địa điểm du lịch, sự kiện du lịch, bài viết du lịch trong nước và du lịch nước ngồi với đa
dạng hình ảnh, bình luận và đánh giá để người dùng tham khảo.
Các tour du lịch trọn gói được phân loại theo điểm đến kèm theo hình ảnh rõ nét, giao
diện đơn giản nhưng khơng kém phần đặc sắc, dễ nhìn, dễ sử dụng, màu sắc trang nhã …
giúp người dùng dễ dàng lựa chọn được tour phù hợp. Ứng dụng của chúng em còn là nơi
giao lưu và chia sẻ trải nghiệm giữa các thành viên yêu thích du lịch bằng cách chia sẻ và
xem các tips và kinh nghiệm du lịch từ các thành viên sử dụng app
Hãy tải ngay và tận hưởng các tiện ích du lịch tuyệt vời từ sản phẩm của chúng tôi.
1.2.Lý do chọn đề tài

Mọi người sẽ dễ dàng tìm kiếm được cho mình và người thân tour du lịch như ý và đầy
đủ thông tin điểm đến, ngày khởi hành, lịch trình và chi phí chỉ bằng một thiết bị di động
được kết nối internet, với đề tài chúng em luôn muốn xây dựng một ứng dụng về du lịch hiển
thị các tour đa dạng và phong phú với các điểm đến trong nước lẫn nước ngoài.
Nếu ai cảm thấy mất thời gian, quá rắc rối khi tìm kiếm thơng tin trên internet và đăng ký
tour tại các công ty du lịch?
Với ứng dụng đặt tour của chúng em, chỉ bằng vài thao tác ngay trên điện thoại di động,
bạn đã có thể tìm hiểu thơng tin và đăng ký xong tour du lịch yêu thích.
Khi bạn đi du lịch, sẽ rất phiền phức khi lúc nào cũng phải mang theo tờ chương trình để
biết được mình đang đi đâu, sẽ tham quan địa điểm nào
Chỉ cần cầm theo chiếc di động đã cài ứng dụng, ta đã có ngay hành trình tour cực kỳ
thơng minh, cung cấp cho bạn thông tin cần biết về điểm đến …
Tuyệt vời hơn nữa là ta có thể chia sẻ tức thì hình ảnh, cảm xúc của mình với tất cả thành
viên trong cộng đồng qua các tính năng like, share, bình luận, trả lời bình luận.
1.3.Mục tiêu
Tầm nhìn:

Cộng đồng sử dụng app lớn, quảng bá qua các kênh mạng xã hội như Facebook,
Twitter, Instagram, ….
Cạnh tranh trực tiếp với các ứng dụng du lịch hàng đầu Việt Nam như Viettravel,
Klook,…
Vươn ra quốc tế: quảng bá hình ảnh đất nước Việt Nam tươi đẹp đến mắt của du khách
nước ngoài, tạo điều kiện cho du khách tiếp cận du lịch Việt Nam với nhiều tour hấp dẫn,
đẩy mạnh cải thiện trải nghiệm người dùng (UX) làm hài lòng những khách hàng nước
ngoài cũng như trong nước mang lại khối tài sản làm giàu cho đất nước
Hướng phát triển:

Trở thành ứng dụng không chỉ riêng về đặt tour du lịch trực tuyến mà đáp ứng về mọi
tiện ích về du lịch như mạng xã hội chính thức về du lịch, thanh tốn trực tuyến bằng mọi
ví điện tử và internet banking, phát triển những tính năng mới trong tương lai như hướng

Đồ Án 2 : SE122.L11.PMCL – VN

6


dẫn du lịch bằng giọng nói, hướng dẫn du lịch real-time, cho người dùng thân thiết tham
gia chương trình tích điểm và sử dụng điểm cùng những ưu đãi về du lịch, ăn uống, dịch
vụ

2. Yêu cầu và thực nghiệm
2.1.Môi trường xây dựng, phát triển và cài đặt, sử dụng
Môi trường xây dựng và phát triển
- Mơi trường lập trình: Android Studio, Simulator, MySql Workbench
- Công nghệ:
o Di động: Flutter, Dart.
o Server: Spring Boot, deploy trên Heroku
o Cơ sở dữ liệu: MySql
o Rest API
2.1.2.
Môi trường cài đặt và sử dụng
2.1.1.

Sử dụng
-

Các thiết bị di động sử dụng hệ điều hành Android

Cài đặt

-

-

Yêu cầu cấu hình máy :
o Hệ điều hành: Windows 7, Windows 8.1 và Windows 10.
o Dung lượng đĩa trống: 400 MB (không bao gồm dung lượng cho IDE).
o Công cụ: Windows PowerShell, Git for Windows.
- Cài đặt Flutter SDK
o Tải Flutter SDK:
/>windows_v0.10.2-beta.zip
Thiết lập môi trường.
o Sau khi giải nén xong bạn nên thiết lập biến môi trường, vào Control Panel
tìm kiếm từ khóa System và chọn vào mục Edit the system environment
variables.

Đồ Án 2 : SE122.L11.PMCL – VN

7


o

o
o

Chọn Environment Variables, tại mục System Variables bạn chọn PATH và
nhấn tiếp chọn Edit. Trong cửa sổ Edit System Variable bạn chọn New và
dán đường dẫn tới thư mục Flutter đã giải nén trước đó.
Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi chạy

sau đó nhập lệnh flutter doctor.
Tiếp theo chúng ta tiếp tục bấm Y(Yes) tất cả để hồn tất q trình cài đặt

Đồ Án 2 : SE122.L11.PMCL – VN

8


o
o

o

Lưu Ý :
Là bước chấp nhận điều khoản rất quan trọng, nếu như bạn không chấp
nhận điều khoản SDK, khi bạn build app sẽ bị lỗi ngay và không thể build
được.
Chúng em sử dụng một công cụ đã được học để thực hiện Flutter là
Android Studio.

3. Các chức năng chính
3.1.Đăng nhập
Giúp người dùng đăng nhập vào hệ thống. Người dùng sau khi đăng nhập vào hệ thống sẽ
được thao tác các chức năng : bình luận, đăng bài viết, xem lịch sử đặt tour
3.2.Đăng ký
Giúp người dùng đăng ký tài khoản.
3.3.Xem danh sách tour
Xem danh sách các tour du lịch.
3.4.Xem chi tiết tour
Xem thông tin chi tiết tour du lịch (giá, địa điểm, thời gian, lịch trình).

3.5.Tìm kiếm tour
Tìm kiếm tour theo mong muốn của người dùng

Đồ Án 2 : SE122.L11.PMCL – VN

9


3.6.Xem bài viết về du lịch
Người dùng xem các bài viết về du lịch, chia sẽ kinh nghiệm du lịch của mọi người
3.7.Đăng bài viết du lịch
Người dùng đã đăng nhập vào ứng dụng được phép đăng các bài viết về du lịch, chia sẽ
kinh nghiệm đi du lịch của bản với mọi người
3.8.Đặt tour
Người dùng đặt tour du lịch. Người dùng có thể lựa chọn tour, số vé.

4. Danh sách các APIs
-

Đăng nhập
o Method POST : />Đăng ký
o Method POST: />Tìm kiếm tour
o Method POST: />Lấy danh sách tour:
o Method GET: />Lấy chi tiết tour
o Method GET: />Đặt tour:
o Method POST: />Lấy danh sách tour đã đặt:
o Method GET: />Lấy danh sách bài viết:
o Method GET: />Đăng bài viết:
o Method POST: />
Đồ Án 2 : SE122.L11.PMCL – VN

10


5. Thiết kế dữ liệu

Đồ Án 2 : SE122.L11.PMCL – VN

11


6. Mơ hình Usecase
6.1.Usecase tổng qt

Đồ Án 2 : SE122.L11.PMCL – VN

12


6.2.Usecase phân rã
6.2.1.

Đăng nhập

Đồ Án 2 : SE122.L11.PMCL – VN

13


6.2.2.

Đăng xuất

Đồ Án 2 : SE122.L11.PMCL – VN

14


6.2.3.

Đặt tour

Đồ Án 2 : SE122.L11.PMCL – VN

15


6.2.4.

Xem danh sách tour

6.3.Đặc tả Usecase
6.3.1.

Đăng nhập

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ

Tiền điều kiện
Hậu điều kiện
6.3.2.

Người dùng muốn sử dụng chức năng đăng nhập vào hệ thống
Người dùng chọn mở ứng dụng.
Người dùng chọn mục tài khoản ở thanh menu phía dưới màn hình
Người dùng ấn vào nút đăng nhập
Người dùng nhập vào tên tài khoản và mật khẩu
Ấn nút “đăng nhập”
Khơng có
Khơng có
Ứng dụng chuyển sang màn hình chính

Đăng ký

Mơ tả
Dịng sự kiện chính

Người dùng muốn tạo tài khoản và đăng kí thành viên để sử dụng
một số tính năng
Người dùng chọn mở ứng dụng.
Người dùng vuốt chọn mục tài khoản ở thanh menu phía dưới màn
hình

Đồ Án 2 : SE122.L11.PMCL – VN

16

Dịng sự kiện phụ
Tiền điều kiện
Hậu điều kiện
6.3.3.

Qn mật khẩu

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện
Hậu điều kiện
6.3.4.

Người dùng nhấn vào nút Đăng nhập
Người dùng ấn vào dòng chữ Đăng ký bên dưới form đăng nhập
Người dùng nhập đầy đủ thông tin đăng ký như trên form
Người dùng ấn nút đăng ký
Khơng có
Khơng có
Khơng có

Người dùng qn mật khẩu và muốn đăng nhập vào hệ thống
Người dùng chọn mở ứng dụng.
Người dùng vuốt chọn mục tài khoản ở thanh menu phía dưới màn
hình
Người dùng nhấn vào nút Đăng nhập
Người dùng ấn vào dòng chữ “Bạn quên mật khẩu ?” bên dưới
form đăng nhập

Nhập email đã đăng ký với hệ thống
Ấn “Gửi”
Vào email cá nhân đã đăng ký với hệ thống để xem mật khẩu
Khơng có
Khơng có
Khơng có

Đăng xuất

Mơ tả
Dịng sự kiện chính

Người dùng muốn đăng xuất khỏi tài khoản hoặc chuyển tài khoản
Người dùng chọn mở ứng dụng.
Người dùng vuốt chọn mục tài khoản ở thanh menu phía dưới màn
hình
Ấn nút Đăng Xuất

Dịng sự kiện phụ
Tiền điều kiện
Hậu điều kiện

Khơng có
Người dùng đã đăng nhập vào hệ thống
Khơng có

6.3.5.

Đăng bài viết

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện

Người dùng muốn sử dụng chức năng cập nhật giá vàng
1. Người dùng chọn mở ứng dụng.
2. Người dùng vuốt chọn mục Cộng đồng ở thanh menu phía
dưới màn hình
3. Chọn vào thẻ “bạn đang nghĩ gì”
4. Nhập vào trường “Hãy viết gì đó”
5. Ấn nút chọn ảnh và chọn ảnh từ thiết bị
6. Ấn icon gửi hình tam giác nhọn
Khơng có
Người dùng đã đăng nhập vào hệ thống

Đồ Án 2 : SE122.L11.PMCL – VN

17


Hậu điều kiện
6.3.6.

Chuyển sang trang cộng đồng và load lại bài viết
Xem bài viết

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện
Hậu điều kiện

6.3.7.

Đặt tour

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện
Hậu điều kiện
6.3.8.

Người dùng muốn đặt tour được chọn sau khi tham khảo tour
1. Người dùng chọn mở ứng dụng.
2. Người dùng vuốt chọn mục Yêu thích ở thanh menu phía
dưới màn hình
3. Chọn tour muốn đặt
4. Xem chi tiết tour và ấn Đặt Ngay
5. Điền đầy đủ thơng tin vào form
6. Ấn Đặt Tour
Khơng có
Khơng có
Khơng có

Xem danh sách tour

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện
Hậu điều kiện
6.3.9.

Người dùng muốn sử dụng chức năng cập nhật giá vàng
1. Người dùng chọn mở ứng dụng.
2. Người dùng vuốt chọn mục Cộng đồng ở thanh menu phía
dưới màn hình
Khơng có
Người dùng đã đăng nhập vào hệ thống
Hiển thị những bài viết đã được đăng

Người dùng muốn tham khảo một số tour đang khai thác
1. Người dùng chọn mở ứng dụng.
2. Người dùng vuốt chọn mục u thích ở thanh menu phía
dưới màn hình
Khơng có
Khơng có
Hiển thị những tour đang được khai thác

Tìm kiếm tour

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện

Người dùng muốn tìm kiếm tour phù hợp với chuyến đi của mình
1. Người dùng chọn mở ứng dụng.
2. Ấn vào thanh tìm kiếm ở trên cùng màn hình
3. Nhập địa điểm đến hoặc chọn các chip có sẵn
4. Ấn icon kính lúp để tìm kiếm
Khơng có
Khơng có

Đồ Án 2 : SE122.L11.PMCL – VN

18


Hậu điều kiện

6.3.10.

Hiển thị những tour có điểm đến liên quan đến từ khóa người dùng
nhập

Xem chi tiết tour

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện

Hậu điều kiện
6.3.11.

Người dùng muốn xem chi tiết về mô tả và lịch trình , hình ảnh
tham khảo của tour
Người dùng chọn mở ứng dụng.
Người dùng vuốt chọn mục Yêu thích ở thanh menu phía dưới màn
hình
Chọn tour cần xem
Chọn hình cần xem hoặc “ẩn đi, xem thêm” mơ tả
Khơng có
Khơng có

Xem lịch sử đặt tour

Mơ tả
Dịng sự kiện chính

Dịng sự kiện phụ
Tiền điều kiện
Hậu điều kiện

Người dùng muốn xem lại lịch sử đặt tour của mình
1. Người dùng chọn mở ứng dụng.
2. Người dùng vuốt chọn mục tài khoản ở thanh menu phía
dưới màn hình
3. Chọn trường “Lịch sử đặt tour”
Khơng có
Khơng có
Hiển thị lịch sử đặt tour của người dùng

7. Sơ đồ tuần tự
7.1. Xem lịch sử đặt tour

Đồ Án 2 : SE122.L11.PMCL – VN

19