đồ án 1 xây dựng ứng dụng nghe nhạc và chia sẻ bài hát với flutter

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠO </b>

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

<b>ĐỒ ÁN 1 </b>

<b>XÂY DỰNG ỨNG DỤNG NGHE NHẠC VÀ CHIA SẺ BÀI HÁT VỚI FLUTTER</b>

<b>Giảng viên hướng dẫn : ThS. Trần Thị Hồng Yến </b>

<b>Sinh viên thực hiện 1 : Nguyễn Anh Khoa </b>

<b>Sinh viên thực hiện 2 : Nguyễn Trương Đình Du </b>

Tp HCM, tháng 12 năm 2023

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI CẢM ƠN </b>

Nhóm em xin chân thành cảm ơn sự hướng dẫn tận tình của cơ Trần Thị Hồng Yến - 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 hồ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.

<b>Nhóm sinh viên thực hiện </b>

<b>Nguyễn Anh Khoa – Nguyễn Trương Đình Du </b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>MỤC LỤC </b>

Chương 1: GIỚI THIỆU ĐỀ TÀI ... 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: CƠ SỞ LÝ THUYẾT ... 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

2.3. Hướng dẫn cài đặt Flutter ... 15

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

2.5. Cài đặt Firebase lưu trữ cơ sở dữ liệu: ... 18

2.5.1. Tạo Project Firebase ... 18

2.5.2. Thêm Android vào project Firebase: ... 21

2.5.3. Thêm IOS vào project Firebase: ... 25

Chương 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG ... 30

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

3.2. Phân tích thiết kế: ... 30

3.2.1. Sơ đồ use case và đặc tả use case: ... 30

3.2.2. Thiết kế cơ sở dữ liệu: ... 40

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

4.8. Màn hình thơng tin chi tiết bài hát: ... 48

4.9. Màn hình tìm kiếm: ... 49

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

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

KẾT LUẬN ... 52

Kết quả thu được: ... 52

Ưu điểm: ... 52

Khó khăn: ... 52

Phương hướng phát triển: ... 52

TÀI LIỆU THAM KHẢO ... 54

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>MỤC LỤC HÌNH ẢNH </b>

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 2.4. Chỉnh sửa biến mơi trường ... 16

Hình 2.5. Chuẩn đốn Flutter với flutter doctor ... 16

Hình 2.6. Extension Flutter trên Visual Studio ... 17

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

Hình 2.8. Nhập tên project Flutter mới ... 17

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

Hình 2.10. Tạo project Firebase ... 18

Hình 2.11. Nhập tên project Firebase mới ... 19

Hình 2.12. Chọn các tiêu chí và Create project. ... 20

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

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

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

Hình 2.16. Cấu hình file build gradle ... 24

Hình 2.17. Thêm Firebase vào app IOS ... 25

Hình 2.18. Lấy Bundle id IOS ... 26

Hình 2.19. Tải và di chuyển file GoogleService.json ... 27

Hình 2.20. Cấu hình Firebase ... 28

Hình 2.21. Giao diện thiết lập Firebase với IOS thành công ... 29

Hình 3.1. Sơ đồ use case tổng quát. ... 31

Hình 3.2. Database diagram. ... 40

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

Hình 4.7. Màn hình thơng tin chi tiết Playlist ... 47

Hình 4.8. Màn hình thơng tin chi tiết bài hát ... 48

Hình 4.9. Màn hình tìm kiếm ... 49

Hình 4.10. Màn hình thư viện lưu trữ ... 50

Hình 4.11. Màn hình thông tin tài khoản ... 51

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Việc xây dựng một ứng dụng nghe nhạc, đăng tải nhạc và cá nhân hóa âm nhạc sẽ giúp người dùng khám phá vô số thể loại âm nhạc, trải nghiệm và sở hữu âm nhạc theo cách riêng của họ. Ứng dụng sẽ cung cấp một không gian tuyệt vời để người dùng khám phá âm nhạc mới, tìm kiếm nghệ sĩ yêu thích, và xây dựng danh sách phát cá nhân.

Chúng tôi tin rằng ứng dụng của chúng tôi sẽ là một điểm đến hấp dẫn cho người yêu âm nhạc. Với khả năng khám phá âm nhạc phong phú, người dùng có thể tìm kiếm và nghe nhạc từ nhiều thể loại khác nhau, từ pop, rock, hip-hop đến jazz, classical và nhiều hơn nữa. Ứng dụng sẽ cung cấp thông tin chi tiết về nghệ sĩ, album, và bài hát để người dùng có thể tìm hiểu thêm về âm nhạc mình u thích.

Mục tiêu của chúng tơi là tạo ra một ứng dụng âm nhạc thu hút và nổi bật, nơi người dùng có thể thỏa sức khám phá âm nhạc và tận hưởng những trải nghiệm nghe nhạc tuyệt vời.

<b>1.2. Phương pháp nghiên cứu và phát triển: </b>

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>Bước 1: Nhóm tiến hành thu thập thông tin yêu cầu người dùng. </b>

<b>Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mơ hình hoá yêu cầu của người </b>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>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 </b>

giống) trên thị trường để bắt kịp xu hướng.

<b>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 </b>

những gì đã thu thập được.

<b>Bước 5: Nhóm thực hiện thiết kế CSDL. </b>

<b>Bước 6: Nhóm chọn Flutter (Cross platform) để phát triển ứng dụng vì phát huy </b>

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

<b>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 </b>

những tính năng chưa được đề ra ban đầu).

<b>Bước 10: Nhóm hồn thành đồ án </b>

Mơ hình sử dụng để xây dựng đề tài: MVC

<b>1.3. Đối tượng hướng đến: </b>

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>Chương 2: </b>

<b>CƠ SỞ LÝ THUYẾT </b>

<b>2.1. Giới thiệu ngơn ngữ lập trình Dart: </b>

<i>Hình 2.1. Logo Dart </i>

<b>2.1.1. Ngơn ngữ lập trình Dart là gì? </b>

- 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)<small>[1]</small>. - 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.

<b>2.1.2. Ưu điểm của Dart: </b>

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:

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

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.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<i><b>- Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có </b></i>

được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web.

<i><b>- 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 </b></i>

đã 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.

<i><b>- Reactive: Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản </b></i>

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 Flutter sử dụng ngôn ngữ Dart để phát triển ứng dụng di động chạy đa nền tảng.

<b>2.2. Giới thiệu về framework Flutter: </b>

<i>Hình 2.2. Logo Flutter </i>

<b>2.2.1. Flutter là gì? </b>

- 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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

- 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 framework này.

<b>2.2.2. Kiến trúc của Flutter:<small>[2]</small></b>

<i>Hình 2.3. Kiến trúc Flutter </i>

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

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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 ngồ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.

<b>2.2.3. Ưu điểm của Flutter so với các framework khác: </b>

- 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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<i>So sánh Flutter và React Native </i>

Khả năng tái

<i>sử dụng </i>

Flutter cho phép Overwriting code. Hỗ trợ tốt cho việc tái sử dụng về sau.

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ấu trúc mã

<i>nguồn </i>

Khi sử dụng Flutter, các Developer có thể thực hiện mọi thứ trên cùng một màn hình, trong đó đặc biệt khơng 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.

Sử dụng React Native cần có thêm JSX hoặc XML để tạo giao diện hay các công cụ đặc biệt để tạo layout.

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

trong q trình cài đặt.

Cài đặt môi trường phát triển React Native trơng khá loằng ngoằng và khó khăn đối với các lập trình viên mới.

Các thư viện

<i>hỗ trợ </i>

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.

Từ khi React Native trở lên phổ biến, đã có rất nhiều các thirdparty packages được phát triển và được sử dụng rất nhiều trong ứng dụng.

<i>Độ phổ biến Số lượng người sử dụng </i>

Flutter đang ngày càng gia tăng. Đặc biệt nhờ sự hậu

React Native có lượng

developer sử dụng đang nhiều hơn bởi vì lượng developer sử

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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

<i>khảo </i>

Cách viết tài liệu của Google đơn giản, dễ hiểu nên việc tài liệu hóa cho Flutter cơ bản là hiệu quả.

Việc tìm kiếm tài liệu có lúc khá khó khăn, phụ thuộc vào các cơng cụ dev bên ngồi, u cầu người dùng phải kiếm 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.

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

<b>2.3. Hướng dẫn cài đặt Flutter </b>

- Tải Flutter tại đường dẫn: <i> </i>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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<i>Hình 2.4. Chỉnh sửa biến môi trường </i>

+ 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

<i>Hình 2.5. Chuẩn đốn Flutter với flutter doctor </i>

- Cài đặt extension/plugin hỗ trợ cho IDE. Ví dụ như extension Flutter

<i>(sẽ tự động cài thêm Dart) trên Visual Studio Code. </i>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<i>Hình 2.6. Extension Flutter trên Visual Studio </i>

<b>2.4. Tạo project Flutter đầu tiên với Visual Studio Code: </b>

- 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.

<i>Hình 2.7. Tạo project Flutter mới trong Visual Studio Code </i>

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

<i>Hình 2.8. Nhập tên project Flutter mới </i>

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<i>Hình 2.9. Giao diện Visual Studio Code sau khi tạo thành công project Flutter </i>

<b>2.5. Cài đặt Firebase lưu trữ cơ sở dữ liệu^[3]: 2.5.1. Tạo Project Firebase </b>

Truy cập đường dẫn: vào Add project và đặt tên cho project: </b>

<i>Hình 2.10. Tạo project Firebase </i>

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<i>Hình 2.11. Nhập tên project Firebase mới </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.

<b>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 </b>

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.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<i>Hình 2.12. Chọn các tiêu chí và Create project. </i>

Đợ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.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<i>Hình 2.13. Hoàn thành tạo project</i>

<b>2.5.2. Thêm Android vào project Firebase: </b>

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

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<i>Hình 2.14. Thêm Firebase vào app android </i>

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 google-services.json và import vào trong project Flutter như ảnh bên dưới.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<i>Hình 2.15. Điền thơng tin đăng ký </i>

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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<i>Hình 2.16. Cấu hình file build gradle </i>

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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>2.5.3. Thêm IOS vào project Firebase: </b>

Bước đầu cũng giống như Android. Click vào icon iOS thay vì icon Android.

<i>Hình 2.17. Thêm Firebase vào app IOS </i>

Để 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.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<i>Hình 2.18. Lấy Bundle id IOS </i>

Ở Xcode, chọn thư mục Runner ở Root -> trong General, các bạn sẽ tìm thấy bundle identifier, nó chính là bundle id. Sau đó quay lại Firebase console, nhập bundle Id và tìm được -> click Register app Tiếp theo tải file GoogleService-Info.plist ở bước kế tiếp.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<i>Hình 2.19. Tải và di chuyển file GoogleService.json </i>

File tải về phải được bỏ vào thư mục Runner/Runner.

</div>