Hướng dẫn xây dựng ứng dụng nghe nhạc và chia sẻ bài hát sử dụng Flutter

Kiến trúc của Flutter: [2]

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

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

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

Việc cài đặt Flutter diễn ra nhanh chóng, tiện lợi với sự hỗ trợ của câu lệnh flutter doctor -v giúp chẩn đoán lỗi trong quá 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ó 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. 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 ngoài, yêu cầu người dùng phải kiếm tài liệu cho từng bộ mặc dù Facebook đã khá.

Tạo Project Firebase

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

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

Thêm Android vào project Firebase

Bao gồm các thông tin về package, SHA1 và nick name của Project sau khi hoà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. Chọn Next và Continue ở màn hình sau đó, thế là xong phần cấu hình cho Android.

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

Ở bước add SDK nên build App lên điện thoại để quá trình kết nối giữa iOS và Firebase diễn ra, nếu thành công thì sẽ hiển thị theo bên dưới.

Phân tích thiết kế

• Sơ đồ use case và đặc tả use case

Người dùng xem thư viện lưu trữ bài hát, danh sách bài hát, nghệ sĩ yêu thích đã thêm. Mô tả Đăng nhập vào hệ thống với tài khoản đã được đăng ký hoặc tài khoản Google, Facebook hoặc Instagram Điều kiện trước Người dùng chưa đăng nhập vào ứng dụng. Điều kiện trước Người dùng chưa có tài khoản đăng ký bởi Số điện thoại hoặc Email xác định.

Mô tả Người dùng tìm kiếm bài hát theo tên bằng thanh tìm kiếm Điều kiện trước Người dùng đã đăng nhập vào ứng dụng. Điều kiện sau Hiển thị danh sách bài hát liên quan theo tên bài hát người dùng đã nhập. Mô tả Người dùng tìm kiếm bài hát dựa theo danh mục Điều kiện trước Người dùng đã đăng nhập vào ứng dụng.

Mô tả Người dùng xem thông tin chi tiết danh sách bài hát Điều kiện trước Người dùng đã đăng nhập vào ứng dụng. Mô tả Người dùng xem thông tin chi tiết bài hát gồm tên nghệ sĩ, album, năm phát hành, lời bài hát, và đánh giá. Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hệ thống hiển thị thông tin chi tiết bài hát Luồng chính 1.

Mô tả Thêm bài hát yêu thích vào thư viện Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Bài hát được thêm vào thư viện. Mô tả Người dùng nghe nhạc, phát bài hát Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Bài hát được phát để nghe. Bảng 3.10 Use-case “Thêm danh sách bài hát yêu thích” Tên Use-case Thêm danh sách bài hát yêu thích.

Mô tả Thêm danh sách bài hát vào thư viện Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Danh sách bài hát được thêm vào thư viện Luồng chính 1. Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Nghệ sĩ được thêm vào thư viện. Điều kiện trước Người dùng đã đăng nhập vào ứng dụng Điều kiện sau Hệ thống hiển thị thư viện của người dùng Luồng chính 1.

Mô tả Người dùng tải lên và chia sẻ bài hát tự sản xuất hoặc cá nhân lên ứng dụng nghe nhạc. Điều kiện sau Hệ thống hiển thị các bài hát, danh sách bài hát người dùng đã đăng tải lên.

Màn hình khởi động

- Phần 1 trên cùng gồm một TextView và một Button thoát để quay trở lại màn hình khởi động. - Phần 2 gồm 2 TextInput nơi người dùng nhập Email và mật khẩu để đăng nhập vào ứng dụng. - Phần 3 là một button Đăng nhập sau khi người dùng nhập đầy đủ email và mật khẩu.

- Phần 4 là một TextView hỏi người dùng muốn đăng kí tài khoản không và một Button chuyển qua màn hình đăng kí tài khoản. - Phần 4 là TextView hỏi người dùng đã có tài khoản chưa và một button chuyển qua màn hình đăng nhập. - Phần 1 gồm tên ứng dụng và 2 Button ở góc phải là thông báo và lịch sử phát nhạc.

- Phần 2 là các ListView bài hát, danh sách bài hát, nghệ sĩ mới, nổi bật, thịnh hành, … khi bấm vào một trong các item sẽ hiện ra các bài hát và thông tin chi tiết. - Phần 1 gồm TextView tiêu đề màn hình và mô tả về màn hình và button back để quay lại màn hình Trang chủ. - Phần 2 là các ListView hiện các thông báo, mỗi item gồm tên thông báo và thông tin chi tiết thông báo đó.

- Phần 1 gồm TextView tiêu đề màn hình và button thoát để quay lại màn hình Trang chủ. - Phần 2 là các ListView hiện các danh sách các bài hát người dùng đã phát nhạc. - Phần 1 là tên Playlist và hình ảnh đại diện và một Botton quay lại màn hình trước đó.

- Phần 2 gồm TextView hiển thị tên nhà phát hành, thông tin mô tả, số lượt người thích, thời gian phát của Playlist, số lượt bài hát và 2 button phát và lặp bài hát ngẫu nhiên. - Phần 3 danh sách các bài hát có trong Playlist, mỗi item gồm tên bài hát, nhạc sĩ và button cài đặt.

Màn hình thông tin chi tiết bài hát

- Phần 3 là TextView Lời bài hát, sẽ tự động cuộn tương ứng với phần nhạc đang phát.