Đồ án tìm hiểu flutter và xây dựng ứng dụng nghe nhạc và chia sẻ bài hát

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

TÌM HIỂU FLUTTER VÀ XÂY DỰNG ỨNG DỤNG
NGHE NHẠC VÀ CHIA SẺ BÀI HÁT
Giảng viên hướng dẫn :

ThS. Nguyễn Công Hoan

Sinh viên thực hiện 1 :

Nguyễn Việt Hoàng

Mã sinh viên 1

19521540

:

Sinh viên thực hiện 2 :

Bùi Đức Hoàng Nhật

Mã sinh viên 2

20520260

:

Tp HCM, tháng 6 năm 2023


ĐỒ ÁN 1

SE121.N21.PMCL

LỜI CẢM ƠN
Nhóm em xin chân thành cảm ơn sự hướng dẫn tận tình của thầy Nguyễn Cơng Hoan
- giảng viên hướng dẫn môn Đồ án 1 đã hỗ trợ cho nhóm trong q trình nghiên cứu
để nhóm hoàn thành đề tài này.
Trong khoảng thời gian thực hiện đồ án, chúng em đã học hỏi thêm được nhiều kiến
thức, kinh nghiệm, biết được thêm về nhiều công nghệ mới. Nhóm em đã vận dụng
những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên
cứu những kiến thức mới. Từ đó, vận dụng tối đa những gì đã học hỏi được để hồn
thành báo cáo đồ án này.
Vì kiến thức của 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
trong q trình thực hiện đồ án. Vì vậy nhóm chúng em ln mong đợi nhận được
những ý kiến đóng góp q báu từ phía giảng viên để qua đó có thể rút kinh nghiệm,
tự sửa chữa, hồ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. Một
lần nữa nhóm chúng em xin chân thành cảm ơn thầy.
Nhóm sinh viên thực hiện

Nguyễn Việt Hồng – Bùi Đức Hoàng Nhật

2

ĐỒ ÁN 1

SE121.N21.PMCL

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
Tp.HCM, ngày … tháng 7 năm 2023
GVHD

ThS. Nguyễn Công Hoan

3


ĐỒ ÁN 1

SE121.N21.PMCL

MỤC LỤC
Chương 1: MỞ ĐẦU ..................................................................................................8
1.1. Lý do chọn đề tài: ..........................................................................................8
1.2. Phương pháp nghiên cứu và phát triển: .........................................................8
1.3. Đối tượng hướng đến: ....................................................................................9
Chương 2: GIỚI THIỆU VỀ FLUTTER .................................................................10
2.1. Giới thiệu ngơn ngữ lập trình Dart: .............................................................10
2.1.1. Ngơn ngữ lập trình Dart là gì? .................................................................10
2.1.2. Ưu điểm của Dart: ....................................................................................10
2.2. Giới thiệu về framework Flutter: .................................................................11
2.2.1. Flutter là gì? .............................................................................................11
2.2.2. Kiến trúc của Flutter: ...............................................................................12
2.2.3. Ưu điểm của Flutter so với các framework khác: ....................................13
Chương 3: CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER ..........................16
3.1. Yêu cầu cấu hình phần cứng: ......................................................................16
3.2. Hướng dẫn cài đặt Futter: ............................................................................16
3.3. Tạo project Flutter đầu tiên với Visual Studio Code: ..................................17
Chương 4: CÀI ĐẶT FIREBASE LƯU TRỮ CƠ SỞ DỮ LIỆU ...........................19
4.1. Tạo Project Firebase: ...................................................................................19
4.2. Thêm Android vào project Firebase: ...........................................................21
4.3. Thêm IOS vào project Firebase: ..................................................................25

Chương 5: NGHIÊN CỨU TIỀN DỰ ÁN ...............................................................30
5.1. Mơ hình kinh doanh:....................................................................................30
5.2. Đối tượng sử dụng: ......................................................................................30
5.3. Rủi ro: ..........................................................................................................30
5.4. Tiêu chí thành công: ....................................................................................31
Chương 6: PHÁT TRIỂN ỨNG DỤNG NGHE NHẠC VÀ CHIA SẺ BÀI HÁT .33
6.1. Đặt vấn đề: ...................................................................................................33
6.2. Phạm vi ứng dụng: .......................................................................................34
6.3. Mơ tả bài tốn: .............................................................................................34
6.4. Các chức năng chính: ..................................................................................34
4


ĐỒ ÁN 1

SE121.N21.PMCL

6.5. Phân tích thiết kế: ........................................................................................35
6.5.1. Sơ đồ use case và đặc tả use case: ............................................................35
6.6. Giao diện ứng dụng: ....................................................................................44
6.6.1. Màn hình khởi động: ................................................................................44
6.6.2. Màn hình đăng nhập: ................................................................................45
6.6.3. Màn hình đăng kí: ....................................................................................47
6.6.4. Màn hình trang chủ: .................................................................................48
6.6.5. Màn hình thơng báo: ................................................................................49
6.6.6. Màn hình lịch sử phát nhạc: .....................................................................51
6.6.7. Màn hình thơng tin chi tiết Playlist: .........................................................52
6.6.8. Màn hình thơng tin chi tiết bài hát: ..........................................................53
6.6.9. Màn hình tìm kiếm: ..................................................................................55
6.6.10.

Màn hình thư viện lưu trữ: ....................................................................57

6.6.11.

Màn hình thơng tin tài khoản: ...............................................................59

Chương 7: ..................................................................................................................61
KẾT LUẬN ...............................................................................................................61
7.1. Kết quả thu được: ........................................................................................61
7.2. Ưu điểm: ......................................................................................................61
7.3. Khó khăn: ....................................................................................................61
7.4. Phương hướng phát triển: ............................................................................61
TÀI LIỆU THAM KHẢO .........................................................................................63

5


ĐỒ ÁN 1

SE121.N21.PMCL

MỤC LỤC HÌNH ẢNH

Hình 2.1. Logo Dart ..................................................................................................10
Hình 2.2. Logo Flutter ...............................................................................................11
Hình 2.3. Kiến trúc Flutter ........................................................................................12
Hình 3.1 Chỉnh sửa biến mơi trường .........................................................................16
Hình 3.2. Chuẩn đốn Flutter với flutter doctor........................................................17
Hình 3.3. Extension Flutter trên Visual Studio .........................................................17

Hình 3.4. Tạo project Flutter mới trong Visual Studio Code ..................................18
Hình 3.5. Nhập tên project Flutter mới ....................................................................18
Hình 3.6. Giao diện Visual Studio Code sau khi tạo thành công project Flutter ......18
Hình 4.1. Tạo project Firebase ..................................................................................19
Hình 4.2. Nhập tên project Firebase mới ..................................................................19
Hình 4.3. Chọn các tiêu chí và Create project. ........................................................20
Hình 4.4. Hồn thành tạo project ..............................................................................21
Hình 4.5. Thêm Firebase vào app android ................................................................22
Hình 4.6. Điền thơng tin đăng ký ..............................................................................23
Hình 4.7. Cấu hình file build gradle ..........................................................................24
Hình 4.8. Thêm Firebase vào app IOS ......................................................................25
Hình 4.9. Lấy Bundle id IOS ....................................................................................26
Hình 4.10. Tải và di chuyển file GoogleService.json ...............................................27
Hình 4.11. Cấu hình Firebase ....................................................................................28
Hình 4.12. Giao diện thiết lập Firebase với IOS thành cơng ....................................29
Hình 5.1. Sơ đồ use case tổng quát. ..........................................................................36
Hình 6.1. Màn hình khởi động ..................................................................................44

6


ĐỒ ÁN 1

SE121.N21.PMCL

Hình 6.2. Màn hình đăng nhập ..................................................................................46
Hình 6.3. Màn hình đăng kí ......................................................................................47
Hình 6.4. Màn hình trang chủ ...................................................................................48
Hình 6.5. Màn hình thơng báo ..................................................................................50
Hình 6.6. Màn hình lịch sử phát nhạc .......................................................................51

Hình 6.7. Màn hình thơng tin chi tiết Playlist ...........................................................52
Hình 6.8. Màn hình thơng tin chi tiết bài hát ............................................................54
Hình 6.9. Màn hình tìm kiếm ....................................................................................57
Hình 6.10. Màn hình thư viện lưu trữ .......................................................................58
Hình 6.11. Màn hình thơng tin tài khoản ..................................................................59

7


ĐỒ ÁN 1

SE121.N21.PMCL

Chương 1:

MỞ ĐẦU
1.1. Lý do chọn đề tài:
Âm nhạc là một trong những ngành công nghiệp lớn nhất trên thế giới, và hàng
triệu người trên khắp thế giới đều u thích và nghe nhạc hàng ngày. Vì vậy, nghiên
cứu về hệ hỗ trợ quyết định là rất cần thiết và có tính ứng dụng cao trong thực tế.
Việc xây dựng một hệ thống gợi ý bài hát sẽ giúp người dùng có thể tìm thấy
những bài hát mới, phù hợp với sở thích của họ. Ngồi ra hệ thống có thể cung cấp
cho người dùng danh sách các bài hát mà họ có thể thích dựa trên các yếu tố như sở
thích âm nhạc, lịch sử nghe nhạc, thời gian nghe nhạc, v.v.
Việc sử dụng hệ thống gợi ý bài hát có thể giúp cho người dùng tiết kiệm thời
gian tìm kiếm và chọn lựa bài hát, đồng thời cũng giúp tăng trải nghiệm nghe nhạc
cho người dùng.
Để giải quyết vấn đề trên, nhóm em quyết định chọn đề tài Xây dựng hệ thống
gợi ý bài hát nhằm phát triển một ứng dụng cung cấp một lựa chọn phù hợp với người
sử dụng nhất giúp cải thiện trải nghiệm người dùng và tăng khả năng giữ chân khách

hàng.
1.2. Phương pháp nghiên cứu và phát triển:
Nhóm chúng em sẽ thực hiện đề tài này bằng ngôn ngữ Dart với cơng nghệ ứng
dụng là Flutter.
Trong q trình tìm hiểu nghiệp vụ, nhóm chúng em có tham khảo các diễn đàn
âm nhạc trên mạng xã hội. Cùng với đó là các ứng dụng có sẵn và phát triển thành
cơng trên App store và CH Play để có cái nhìn tổng qt về đề tài đã chọn.
Nhóm phát triển tuân theo quy chuẩn thiết kế ứng dụng hiện hành. Nhóm đã
thực hiện bài bản từng bước sau trong quá trình phát triển ứng dụng:
Bước 1: Nhóm tiến hành thu thập thơng tin yêu cầu người dùng.
Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mơ hình hố u cầu của người
dùng.
Bước 3: Nhóm tiến hành nghiên cứu các ứng dụng sẵn có (với chức năng gần
giống) trên thị trường để bắt kịp xu hướng.
8


ĐỒ ÁN 1

SE121.N21.PMCL

Bước 4: Nhóm thực hiện chỉnh sửa lại mơ hình hố u cầu người dùng theo
những gì đã thu thập được.
Bước 5: Nhóm thực hiện thiết kế CSDL.
Bước 6: Nhóm chọn Flutter (Cross platform) để phát triển ứng dụng vì phát huy
tối đa được tốc độ thực thi, đồng thời hỗ trợ các tính năng cấp phục vụ cho yêu cầu
của người dùng.
Bước 7: Nhóm tiến hành thiết kế giao diện Prototype cho ứng dụng.
Bước 8: Nhóm tiến hành cơng đoạn cài đặt cho ứng dụng.
Bước 9: Nhóm tiến hành cơng việc bảo trì (sửa chữa lỗi và phát triển thêm

những tính năng chưa được đề ra ban đầu).
Bước 10: Nhóm hồn thành đồ án
Mơ hình sử dụng để xây dựng đề tài: MVC
1.3. Đối tượng hướng đến:
Nhóm đối tượng chủ yếu của ứng dụng là các tổ chức/cá nhân có và biết sử
dụng smart phone ở mọi độ tuổi từ 12 -> 60, cụ thể:
-

Bất kỳ ai u thích âm nhạc và có nhu cầu lắng nghe nhạc trên thiết bị
di động.

-

Những nghệ sĩ có mong muốn đăng tải bài hát để lan tỏa đến với mọi
người.

Ứng dụng này sẽ là trợ thủ đắc lực giúp người dùng nghe nhạc và truy cập
thông tin về các bài hát, nghệ sĩ, và album. Người dùng sẽ có thể tìm kiếm bài
hát theo tên, nghệ sĩ, thể loại, hay lời bài hát. Ứng dụng sẽ cung cấp cho người
dùng thông tin chi tiết về các bài hát, bao gồm tên nghệ sĩ, album, năm phát
hành, lời bài hát, và đánh giá. Ngồi ra, người dùng cũng có thể tạo danh sách
phát cá nhân, lưu trữ bài hát yêu thích, và chia sẻ những bài hát mà họ đang
nghe với bạn bè qua mạng xã hội.

9


ĐỒ ÁN 1

SE121.N21.PMCL

Chương 2:

GIỚI THIỆU VỀ FLUTTER

Hình 2.1. Logo Dart
2.1. Giới thiệu ngơn ngữ lập trình Dart:
2.1.1.
-

Ngơn ngữ lập trình Dart là gì?
Dart là ngơn ngữ lập trình mới, được phát triển bởi Google, hiện đã
được chấp thuận bởi tổ chức Ecma (ECMA-408). Nó được sử dụng để
xây dựng các loại ứng dụng: web, server, di động (IOS và Android).

-

Dart là ngơn ngữ lập trình hướng đối tượng, với cơ chế garbage
collector, cú pháp kiểu C. Nó hỗ trợ những khái niệm lập trình hiện đại
như interface, mixin, abstract, generic, và type - safe. Đây là ngơn ngữ
lập trình mã nguồn mở, được công bố trên Github.

2.1.2.

Ưu điểm của Dart:

Một số ưu điểm vượt trội của Dart so với các ngơn ngữ lập trình khác:
-

Năng suất: Dart có cú pháp dễ hiểu, rõ ràng và súc tích. Type-safe giúp

lập trình viên có thể xác định sớm các lỗi. Bên cạnh đó Dart có hệ sinh
thái rộng lớn lên đến hàng nghìn packages.

10


ĐỒ ÁN 1

SE121.N21.PMCL

-

Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có
được dự đốn hiệu suất cao và khởi động nhanh trên các thiết bị di động
và web.

-

Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên rất dễ học. Nếu bạn
đã biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ
sau vài ngày.

-

Reactive: Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản
lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget
UI, thông qua phân bổ đối tượng nhanh và garbage collector. Dart hỗ
trợ lập trình khơng đồng bộ thơng qua các tính năng ngơn ngữ và API
sử dụng các đối tượng Future và Stream.

Từ ngôn ngữ lập trình Dart, Google giới thiệu Framework Futter sử dụng ngôn
ngữ Dart để phát triển ứng dụng di động chạy đa nền tảng.
2.2. Giới thiệu về framework Flutter:

Hình 2.2. Logo Flutter
2.2.1.
-

Flutter là gì?
Flutter được phát triển nhằm giải quyết bài toán thường gặp trong việc
phát triển ứng dụng là Fast Development (phát triển ứng dụng nhanh)
và Native Performance (hiệu suất tối ưu cho từng nền tảng). Nếu như
React Native chỉ đảm bảo Fast Development còn Native language chỉ
đảm bảo Native Performance thì Flutter làm được cả 2 điều trên.

-

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,
hỗ trợ các ứng dụng hoạt động ở mức 120 khung hình trên giây.
11


ĐỒ ÁN 1

SE121.N21.PMCL

-

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.

-

2.2.2.

Flutter Live, là phiên bản "ổn định" đầu tiên framework này.
Kiến trúc của Flutter:

Hình 2.3. Kiến trúc Flutter
Flutter được viết chia làm hai tầng:
-

Tầng ở trên sử dụng ngôn ngữ Dart cung cấp các đoạn mã xây dựng lên
một ứng dụng Flutter. Các đoạn mã này cung cấp phương tiện để có thể
thay đổi và chỉnh sửa chúng. Từ đó giúp ứng dụng của lập trình viên có
thể được tùy chỉnh theo mong muốn. Tầng Framework này giúp lập
trình viên thay đổi mã nguồn ứng dụng ở thời điểm compile time.

-

Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng ngôn
ngữ C++. Tầng Shell này chứa các công cụ trợ giúp ứng dụng Flutter
trong quá trình chạy. Ở tầng này cịn có máy ảo Dart VM. Khái niệm

máy ảo là khái niệm về một ứng dụng chạy song song với mã nguồn

12


ĐỒ ÁN 1

SE121.N21.PMCL

chính như một phần của ứng dụng. Máy ảo Dart VM có ba nhiệm vụ
chính bao gồm:
+ Làm ứng dụng trung gian giữa mã nguồn được viết bởi Dart
và thiết bị phần cứng (hoặc phần mềm nằm ngoài ứng dụng).
+ Thông dịch các đoạn mã Dart theo phương thức JIT (Just in
time) hoặc AOT (Ahead of Time).
+ Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng
như cung cấp các runtime system bao gồm garbage collector, và
các thư viện cần có khác.
→ Máy ảo Dart VM chịu trách nhiệm lớn nhất trong việc quản
lý các runtime system, hỗ trợ debugging hoặc hot reload cho các
ứng dụng viết bằng Flutter.

2.2.3.

Ưu điểm của Flutter so với các framework khác:

-

Flutter là bộ SDK đa nền tảng, hỗ trợ cả Android, iOS và web.

-

Hỗ trợ hot reload – các sửa đổi trong mã nguồn sẽ được cập nhật trực
tiếp lên ứng dụng đang chạy. Ngồi ra Flutter cịn bổ sung thêm tính
năng stateful hot reload - cập nhật ngay lập tức các thay đổi lên ứng
dụng đang chạy mà không cần phải khởi động lại và giữ trạng thái đang
có. Tính năng này đặc biệt hữu ích, giúp nhà phát triển ứng dụng tiết
kiệm rất nhiều thời gian.

-

Ứng dụng được viết bằng Flutter hỗ trợ hiển thị lên đến 60FPS (hoặc
120FPS tuỳ thiết bị). Cho hiệu ứng chuyển cảnh mượt mà, nâng cao trải
nghiệm người dùng.

-

Một đối thủ khác của Flutter là React Native. Đây là framework được
tạo bởi Facebook. Tương tự như Flutter, React Native cũng cho phép
các lập trình viên sử dụng JavaScript để làm ứng dụng di động đa nền
tảng, trên cả Android và iOS.

13


ĐỒ ÁN 1

SE121.N21.PMCL

So sánh Flutter và React Native

Flutter

React Native

Khả năng tái

Flutter cho phép Overwriting

React Native cho phép bạn sử

sử dụng

code. Hỗ trợ tốt cho việc tái

dụng lại code, nhưng điều này

sử dụng về sau.

lại bị giới hạn trong một vài
components cơ bản.

Cấu trúc mã

Khi sử dụng Flutter, các

Sử dụng React Native cần có

nguồn

Developer có thể thực hiện

thêm JSX hoặc XML để tạo

mọi thứ trên cùng một màn

giao diện hay các cơng cụ đặc

hình, trong đó đặc biệt khơng

biệt để tạo layout.

cần phải chuyển từ code sang
chế độ thiết kế hoặc ngược lại,
vì vậy các trải nghiệm trên
Flutter khá tiết kiệm thời gian.
Cài đặt môi

Việc cài đặt Flutter diễn ra

Cài đặt mơi trường phát triển

trường phát

nhanh chóng, tiện lợi với sự

React Native trông khá loằng

triển

hỗ trợ của câu lệnh flutter

ngoằng và khó khăn đối với

doctor -v giúp chẩn đốn lỗi

các lập trình viên mới.

trong q trình cài đặt.
Các thư viện

Có nhiều các third-party

Từ khi React Native trở lên

hỗ trợ

packages đang được sử dụng

phổ biến, đã có rất nhiều các

và đang ngày càng được phát

thirdparty packages được phát

triển, và chúng thực sự rất hữu triển và được sử dụng rất

Độ phổ biến

dụng.

nhiều trong ứng dụng.

Số lượng người sử dụng

React Native có lượng

Flutter đang ngày càng gia

developer sử dụng đang nhiều

tăng. Đặc biệt nhờ sự hậu

hơn bởi vì lượng developer sử

14


ĐỒ ÁN 1

SE121.N21.PMCL

thuẫn tích cực từ phía Google.

dụng JavaScript rất dễ dàng để
sử dụng với các thư viện của
React.

Tài liệu tham Cách viết tài liệu của Google

Việc tìm kiếm tài liệu có lúc

đơn giản, dễ hiểu nên việc tài

khá khó khăn, phụ thuộc vào

liệu hóa cho Flutter cơ bản là

các cơng cụ dev bên ngồi,

hiệu quả.

u cầu người dùng phải kiếm

khảo

tài liệu cho từng bộ mặc dù
Facebook đã khá
nỗ lực để xây dựng một kho
tài liệu trực quan nhất.

Bảng 2.1 So sánh giữa Flutter và React Native

15


ĐỒ ÁN 1

SE121.N21.PMCL

Chương 3:

CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER
3.1. Yêu cầu cấu hình phần cứng:
-

Hệ điều hành: Windows 7, Windows 8.1, Windows 10

-

Dung lượng ổ cứng: 1GB

-

Công cụ: Visual Studio Code, Android Studio, IntelliJ,…

3.2. Hướng dẫn cài đặt Futter:
-

Tải Flutter tại đường dẫn: rồi
giải nén. Tránh giải nén thư mục flutter vào ổ C:\Program Files\

-

Sau khi giải nén xong, 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.

Hình 3.1 Chỉnh sửa biến mơi trường

16

ĐỒ ÁN 1

SE121.N21.PMCL

+ 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 -v

Hình 3.2. Chuẩn đoán Flutter với flutter doctor
-

Cài đặt extension/plugin hỗ trợ cho IDE. Ví dụ như extension Flutter
(sẽ tự động cài thêm Dart) trên Visual Studio Code.

Hình 3.3. Extension Flutter trên Visual Studio

3.3. Tạo project Flutter đầu tiên với Visual Studio Code:
-

Mở Visual Studio Code, nhấn tổ hợp phím Ctrl + Shift + P sau đó gõ
“new project” và ấn Enter để tạo project mới.

17


ĐỒ ÁN 1

SE121.N21.PMCL

Hình 3.4. Tạo project Flutter mới trong Visual Studio Code
-

Sau đó chọn thư mục đích nơi chứa project, và nhập tên project

Hình 3.5. Nhập tên project Flutter mới
-

Sau khi hồn tất q trình tạo project mới. Chúng ta sẽ thấy Visual
Studio Code có giao diện tương như sau.

Hình 3.6. Giao diện Visual Studio Code sau khi tạo thành công project Flutter
18


ĐỒ ÁN 1

SE121.N21.PMCL

Chương 4:

CÀI ĐẶT FIREBASE LƯU TRỮ CƠ SỞ DỮ LIỆU
4.1. Tạo Project Firebase:
Truy cập đường dẫn: />Nhấp vào Add project và đặt tên cho project:

Hình 4.1. Tạo project Firebase

Hình 4.2. Nhập tên project Firebase mới
Lưu ý: Tên dự án thực tế có thể tạo thêm một số ký tự ở cuối để tạo tính duy
nhất.
Nhấp vào Continue. Để đơn giản, khơng bật Google Analytics cho dự án này,
vì vậy hãy tắt nó và nhấp vào Create project. Nếu bạn muốn sử dụng Google
19


ĐỒ ÁN 1

SE121.N21.PMCL

Analytics, hãy bật nó lên và sẽ có thêm một bước là chọn hoặc tạo dự án
Google Analytics.

Hình 4.3. Chọn các tiêu chí và Create project.
Đợi trong vài giây khi dự án được tạo, cho đến khi bạn thấy rằng nó đã sẵn
sàng và nhấp vào Continue.

20


ĐỒ ÁN 1

SE121.N21.PMCL

Hình 4.4. Hồn thành tạo project

4.2. Thêm Android vào project Firebase:
Chọn vào icon Android để thêm Android vào project Firebase mới.

21


ĐỒ ÁN 1

SE121.N21.PMCL

Hình 4.5. Thêm Firebase vào app android

Sau đó điền các thông tin lấy ra từ project Flutter và điền vào. Bao gồm các
thông tin về package, SHA1 và nick name của Project sau khi hồn thành thì
click vào Register app. Bước tiếp theo thì chúng ta sẽ phải tải file googleservices.json và import vào trong project Flutter như ảnh bên dưới.

22


ĐỒ ÁN 1

SE121.N21.PMCL

Hình 4.6. Điền thơng tin đăng ký

Cấu hình build.gradle theo hướng dẫn.

23


ĐỒ ÁN 1

SE121.N21.PMCL

Hình 4.7. Cấu hình file build gradle
Chọn Next và Continue ở màn hình sau đó, thế là xong phần cấu hình cho
Android.

24


ĐỒ ÁN 1

SE121.N21.PMCL

4.3. Thêm IOS vào project Firebase:
Bước đầu cũng giống như Android. Click vào icon iOS thay vì icon Android.

Hình 4.8. Thêm Firebase vào app IOS
Để lấy Bundle id app chúng ta làm như sau: vào Android studio (nếu đang
dùng để code Flutter) chuột phải vào folder iOS và chọn Flutter -> Open
module in Xcode.

25