Đồ án tìm hiểu về flutter và xây dựng ứng dụng

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN 2 TÌM HIỂU VỀ FLUTTER VÀ XÂY DỰNG ỨNG DỤNG GIẢNG VIÊN HƯỚNG DẪN ThS Nguyễn Công Hoan Sinh viên thực hiệ[.]

TP HỒ CHÍ MINH, THÁNG 12 NĂM 2022

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Sinh viên thực hiện:

Huỳnh Anh Kiệt - 19520664

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Sinh viên thực hiện:

Huỳnh Anh Kiệt - 19520664

Xin chân thành cảm ơn thầy!

Thành phố Hồ Chí Minh, tháng 12 năm 2022

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

Tp.HCM, ngày tháng 12 năm 2022

GVHD

ThS Nguyễn Công Hoan

MỤC LỤC

Chương 2 - Ngôn ngữ lập trình và công nghệ 5

3.1.2 Chức năng liên quan đến trạng thái các tác vụ 12

Chương 4 - Thiết kế cơ sở dữ liệu 14

3.2 Đặc tả use-case “Thay đổi tên danh sách" 18

3.4 Đặc tả use-case “Xoá các tác vụ đã hoàn thành trong danh sách" 20

3.6 Đặc tả use-case “Đánh dấu hoàn thành tác vụ" 213.7 Đặc tả use-case “Đánh dấu yêu thích tác vụ" 223.8 Đặc tả use-case “Sửa nội dung tác vụ" 23

3.10 Đặc tả use-case “Thay đổi theme ứng dụng" 25

Chương 6 - Thiết kế giao diện 26

Chương 1 - Thông tin chung

1. Tên đề tài

Tìm hiểu về Flutter và xây dựng ứng dụng

2 Thông tin sinh viên

a MSSV: 19520664

b Họ và tên: Huỳnh Anh Kiệt

c Email: 19520664@gm.uit.edu.vn

3 Môi trường phát triển

- Visual Studio Code: Viết mã

- Android Studio: Giả lập Android

- Material Design: Style phong cách Google cho ứng dụng Flutter

4 Môi trường triển khai

- Android và iOS

Chương 2 - Ngôn ngữ lập trình và công nghệ

- Dart cũng là nền tảng của Flutter Dart cung cấp ngôn ngữ và môi trường chạy cho Flutter, nhưng Dart cũng hỗ trợ các khía cạnh khác như formatting, analyzing, testing

1.1.2 Ngôn ngữ

- Dart là ngôn ngữ type-safe, nó sử dụng cơ chế kiểm tra static type

để đảm bảo rằng giá trị của một biến luôn trùng với static type của biến đó Đôi khi nó được đề cập như là sound typing Mặc dùkiểu dữ liệu thì bắt buộc, nhưng type annotation thì không bắt buộc bởi vì cơ chế type inference

- Dart cho phép kiểu dữ liệu dynamic kết hợp với runtime check,

rất hữu dụng trong những trường hợp cụ thể

- Encoders và decoders cho việc chuyển đổi giữa các dạng

dữ liệu với nhau, bao gồm JSON và UTF-8 (dart:convert)

- Hàm và các hằng số toán học, và lấy số ngẫu nhiên (dart:math)

- File, socket, HTTP, and hỗ trợ I/O khác cho các ứng dụng

non-web (dart:io).

- Hỗ trợ asynchronous programming, với class như Future

và Stream (dart:async)

- Và còn nhiều các thư viện khác

- Ngoài các core libraries, còn có rất nhiều API được publish lên pub.dev bởi đội ngũ phát triển của Google

1.1.4 Nền tảng

- Native platform: Nhắm vào thiết bị di động và desktop, bao gồm Dart VM cùng với bộ biên dịch just-in-time (JIT) và ahead-of-time (AOT)

- Web platform: Nhắm vào ứng dụng web, bao gồm bộ biên dịch Dart sang Javascript

1.2 Lợi ích khi sử dụng Dart

- Năng suất: Cú pháp Dart rõ ràng và súc tích, công cụ của nó đơn

giản nhưng mạnh mẽ Type-safe giúp bạn xác định sớm các lỗi tinh tế

- 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ự đoán hiệu suất cao và khởi động nhanh trên các thiết

bị di động và web

- Dart biên dịch thành mã ARM và x86, để các ứng dụng di động

của Dart có thể chạy tự nhiên trên iOS, Android và hơn thế nữa Đối với các ứng dụng web, chuyển mã từ Dart sang JavaScript.

- Dễ gần: Dart quen thuộc với nhiều nhà phát triển hiện có, nhờ

vào cú pháp và định hướng đối tượng

- 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

2 Flutter

2.1 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

- Flutter hoàn toàn miễn phí và cũng là mã nguồn mở

2.2 Tại sao dùng Flutter?

- Nếu bạn đang tìm kiếm các phương pháp thay thế để phát triển ứng dụng Android, bạn nên cân nhắc thử Flutter của Google, một framework dựa trên ngôn ngữ lập trình Dart

- Các ứng dụng được xây dựng với Flutter hầu như không thể phânbiệt với những ứng dụng được xây dựng bằng cách sử dụng Android SDK, cả về giao diện và hiệu suất Hơn nữa, với những tinh chỉnh nhỏ, chúng có thể chạy trên thiết bị iOS

- Flutter sử dụng Dart, một ngôn ngữ nhanh, hướng đối tượng với nhiều tính năng hữu ích như mixin, generic, isolate, và static type

- Flutter có các thành phần UI của riêng nó, cùng với một cơ chế

để kết xuất chúng trên nền tảng Android và iOS Hầu hết các thành phần giao diện người dùng, đều sẵn dùng, phù hợp với các nguyên tắc của Material Design

- Các ứng dụng Flutter có thể được phát triển bằng cách sử dụng

IntelliJ IDEA, một IDE rất giống với Android Studio.

2.3 Đặc điểm nổi bật

- Fast Development: Tính năng Hot Reload hoạt động trong milliseconds để hiện thị giao diện tới bạn Sử dụng tập hợp các widget có thể customizable để xây dựng giao diện trong vài phút Ngoài ra Hot Reload còn giúp bạn thêm các tính năng, fix bug tiết kiệm thời gian hơn mà không cần phải thông qua máy ảo, máy android hoặc iOS

- Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng giao diện của Flutter vô cùng đẹp mắt theo phong cách Material Design và Cupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling…

- Native Performance: Các widget của Flutter kết hợp các sự khác biệt của các nền tảng ví dụ như scrolling, navigation, icons, font

để cung cấp một hiệu năng tốt nhất tới iOS và Android

3.1 SQLite là gì?

- SQLite là hệ quản trị cơ sở dữ liệu (DBMS) quan hệ tương tự như Mysql, Đặc điểm nổi bật của SQLite so với các DBMS khác là gọn, nhẹ, đơn giản, đặt biệt không cần mô hình server-client, không cần cài đặt, cấu hình hay khởi động nên không có khái niệm user, password hay quyền hạn trong SQLite Database

Dữ liệu cũng được lưu ở một file duy nhất

- SQLite thường không được sử dụng với các hệ thống lớn nhưng với những hệ thống ở quy mô vừa và nhỏ thì SQLite không thua các DBMS khác về chức năng hay tốc độ Vì không cần cài đặt hay cấu hình nên SQLite được sử dụng nhiều trong việc phát

triển, thử nghiệm … vì tránh được những rắc rối trong quá trình cài đặt.

3.2 Tính năng của SQLite

- Transaction trong SQLite tuân thủ theo nguyên tắc (ACID) ngay

cả sau khi hệ thống treo và mất điện

- Không cấu hình, không cần thiết lập hoặc quản trị

- SQLite hỗ trợ với đầy đủ tính năng với các khả năng nâng cao như các chỉ mục 1 phần, các chỉ mục về các biểu thức, JSON và các biểu thức bảng chung

- Một sở dữ liệu hoàn chỉnh được lưu trữ trong một tệp đa nền tảngduy nhất Phù hợp với sử dụng dưới dạng định dạng tệp ứng dụng

- Hỗ trợ các cơ sở dữ liệu có kích thước terabyte và các chuỗi có kích thước gigabyte

- API đơn giản, dễ sử dụng

- Nhanh: Trong một số trường hợp, SQLite nhanh hơn hệ thống tệptin trực tiếp I/O

- Được viết bằng ANSI-C

- Bindings cho hàng chục ngôn ngữ khác có sẵn 1 cách riêng biệt

- Mã nguồn đầy, nguồn mở đủ có thể kiểm tra nhánh 100%

- Vì SQLite không cần cấu hình, cài đặt, không hỗ trợ GRANT và REVOKE nên việc phân quyền truy cập cơ sở dữ liệu chỉ có thể

là quyền truy cập file của hệ thống

- SQLite không phù hợp với các hệ thống có nhu cầu xử lý trên

một khối lượng dữ liệu lớn, phát sinh liên tục.

Chương 3 - Phát biểu bài toán

1 Khảo sát hiện trạng

- Cuộc sống hằng ngày của chúng ta luôn đầy những công việc và sở

thích Đôi khi chúng ta lại quên mất đi những thứ mình muốn làm bởi vìchúng ta không thể nhớ hết được Do đó, ghi chú lại dần trở nên phổ

biến hơn bao giờ hết

- Cùng với sự phát triển của xã hội hiện đại, mỗi người trong chúng ta đều

có thể tiếp xúc với những thiết bị di động Thiết bị di động là một vật không thể thiếu của người dân hiện đại

- Công việc ngày càng nhiều, đòi hỏi chúng ta phải ghi chú một cách

nhanh chóng và thuận tiện Do đó phát triển một ứng dụng di động cho ghi chú là một hướng đi đúng đắn

2 Phát biểu bài toán

Tầm nhìn Áp dụng các kiến thức về lập trình thiết bị di động và Flutter để

xây dựng ứng dụng ghi chú tác vụ

Mục tiêu Hướng tới một ứng dụng có giao diện hiện đại, dễ dàng sử dụng,

phù hợp cho mọi đối tượng có nhu cầu ghi chú nhanh chóng vàhiệu quả

Đối tượng Những cá nhân có nhu cầu ghi chú tác vụ

3 Yêu cầu

3.1 Yêu cầu chức năng

3.1.1 Chức năng quản lý tác vụ

Mô tả Các chức năng cơ bản như thêm, sửa, xóa tác vụ

Mục đích Quản lý cấp độ tác vụ

Tiêu chí chấp nhận Đảm bảo tính chính xác của các chức năng

3.1.2 Chức năng liên quan đến trạng thái các tác vụ

Mô tả Các chức năng cơ bản đánh dấu hoàn thành, yêu thích

Mục đích Quản lý cấp độ tác vụ

Tiêu chí chấp nhận Đảm bảo tính chính xác của các chức năng

3.1.3 Chức năng quản lý danh sách tác vụ

Mô tả Các chức năng cơ bản như thêm, sửa, xoá các danh sách tác

vụ

Mục đích Quản lý cấp độ danh sách tác vụ

Tiêu chí chấp nhận Đảm bảo tính chính xác của các chức năng

3.2 Yêu cầu phi chức năng

3.2.1 Yêu cầu giao diện

- Giao diện thân thiện, hiện đại, dễ sử dụng

- Giao diện đồng bộ giữa các thành phần

- Màu sắc thích hợp3.2.2 Yêu cầu độ tin cậy

- Các chức năng phải được thực hiện chính xác

- Thông tin giống như người dùng nhập vào

3.2.3 Yêu cầu về khả năng mở rộng

- Có thể mở rộng sang các nền tảng khác

- Có thể mở rộng back-end

3.2.4 Yêu cầu về tính tương thích

- Tương thích với các thiết bị Android và iOS đời mới

Chương 4 - Thiết kế cơ sở dữ liệu

2.2 Task

5 completed BOOLEAN Đã hoàn thành chưa

6 favorited BOOLEAN Có phải là tác vụ yêu

3 completed BOOLEAN Đã hoàn thành chưa

Chương 5 - USE CASE

1 Sơ đồ use-case

2 Danh sách các use-case

STT Tên Use-case Ý nghĩa

9 Xoá tác vụ Người dùng xóa tác vụ

10 Cài đặt Thay đổi theme ứng

dụng

Người dùng chuyển đổi theme cho ứng dụng

3 Đặc tả use-case

3.1. Đặc tả use-case “Thêm danh sách"

Tóm tắt Người dùng thêm danh sách vào ứng dụng

Dòng sự kiện chính ● Người dùng mở drawer

● Người dùng nhấn “Add list”

● Người dùng thêm thành côngDòng sự kiện khác

Các yêu cầu đặc biệt Tên được nhập không được trống

Người dùng thêm thành công

3.2. Đặc tả use-case “Thay đổi tên danh sách"

Tóm tắt Người dùng thay đổi tên hiển thị danh sách

Dòng sự kiện chính ● Người dùng mở danh sách cần sửa

● Người dùng nhấn “More”

● Người dùng chọn “Rename list”

● Người dùng nhập tên mớiDòng sự kiện khác

Các yêu cầu đặc biệt Tên được nhập không được trống

Trạng thái hệ thống khi bắt

đầu thực hiện Use-case

Ứng dụng được mở lênDanh sách được chọn không phải là danh sáchmặc định của ứng dụng

Trạng thái hệ thống sau khi

thực hiện Use-case

Người dùng thay đổi thành công

3.3. Đặc tả use-case “Xoá danh sách"

Tóm tắt Người dùng xóa danh sách

Dòng sự kiện chính ● Người dùng mở danh sách cần xoá

Trạng thái hệ thống sau khi

thực hiện Use-case

Người dùng xóa thành công

3.4. Đặc tả use-case “Xoá các tác vụ đã hoàn thành trong danh

Trạng thái hệ thống sau khi

thực hiện Use-case

Người dùng thêm tác vụ vào trong ứng dụng thành công

3.6. Đặc tả use-case “Đánh dấu hoàn thành tác vụ"

Tóm tắt Người dùng đánh dấu hoàn thành tác vụ

Dòng sự kiện chính ● Người dùng mở danh sách cần thực hiện

Các yêu cầu đặc biệt Danh sách phải có ít nhất một tác vụ

Trạng thái hệ thống khi bắt

đầu thực hiện Use-case

Ứng dụng được mở lênĐang ở một danh sách cụ thể

Trạng thái hệ thống sau khi

thực hiện Use-case

Người dùng đánh dấu hoàn thành tác vụ thành công

3.7. Đặc tả use-case “Đánh dấu yêu thích tác vụ"

Tóm tắt Người dùng đánh dấu yêu thích tác vụ

Dòng sự kiện chính ● Người dùng mở danh sách cần thực hiện

thực hiện Use-case công.

3.8. Đặc tả use-case “Sửa nội dung tác vụ"

Tóm tắt Người dùng sửa nội dung tác vụ

Dòng sự kiện chính ● Người dùng mở chi tiết tác vụ cần thực

Trạng thái hệ thống sau khi

Trạng thái hệ thống sau khi

thực hiện Use-case

Người dùng xóa tác vụ thành công

3.10. Đặc tả use-case “Thay đổi theme ứng dụng"

Tóm tắt Người dùng thay đổi theme cho ứng dụng

Dòng sự kiện chính ● Người dùng chuyển sang Settings

Chương 6 - Thiết kế giao diện

1 Danh sách màn hình

Màn hình Home Màn hình khi khởi động ứng dụng

Màn hình Drawer Màn hình Navigate giữa các danh sách

Màn hình chi tiết Màn hình chi tiết thông tin của một tác vụMàn hình thêm tác vụ Màn hình để thêm tác vụ vào danh sáchMàn hình Settings Màn hình cài đặt cho ứng dụng

Màn hình Search Màn hình tìm kiếm tác vụ

2 Mô tả chi tiết

2.1 Màn hình Home

Biểu tượng Drawer Dùng để mở drawer để điều hướng

Tiêu đề Tiêu đề của danh sách được chọn

Biểu tượng More Dùng để mở thêm các chức năng khác

Ô Search Dùng để tìm kiếm tác vụ

Tác vụ Hiển thị tác vụ có trong danh sách

Nút Float Action Button Dùng để thêm tác vụ vào trong danh sáchThanh Bottom Navigation Dùng để điều hướng những màn hình chính

2.2 Màn hình Drawer

Danh sách tác vụ Hiện các danh sách tác vụ cụ thể

Nút “Add" Dùng để thêm danh sách vào trong ứng dụng

Ô danh sách Dùng để thay đổi danh sách khác cho tác vụTiêu đề Hiển thị tiêu đề tác vụ

Chi tiết Hiển thị chi tiết mô tả tác vụ

Ngày tháng Hiển thị ngày tháng của tác vụ

Tác vụ phụ Hiển thị các tác vụ phụ trong tác vụ hiện tạiNút “Add subtask" Dùng để thêm tác vụ phụ vào tác vụ hiện tạiNút Floating Action Button Dùng để đánh dấu hoàn thành cho tác vụ

2.4 Màn hình thêm tác vụ

Ô New task Dùng để nhập tiêu đề cho tác vụ mới

Nút “Details" Dùng để ô nhập chi tiết cho tác vụ mới

Nút “Date" Dùng để chọn ngày tháng cho tác vụ mớiNút Star Dùng để đánh dấu yêu thích cho tác vụ mới

2.5 Màn hình Settings

Thành phần Mô tả

Tiêu đề Hiển thị tên đại diện màn hình hiện tại

Mục “Theme” Dùng để chọn sang màn hình chọn theme

2.6 Màn hình Search

Nút Back Dùng để điều hướng ngược về màn hình trước

Ô search Dùng để nhập dữ liệu truy vấn

Nút Xoá Dùng để clear dữ liệu nhập vào

Search item Kết quả truy vấn

Chương 7 - Kết luận

- Chức năng đầy đủ và cơ bản cho một ứng dụng ghi chú

- Giao diện hiện đại, bắt mắt

- Chưa có các chức năng nổi bật

- Sử dụng cơ sở dữ liệu nội bộ nên bị hạn chế rất nhiều

3 Hướng phát triển

- Mở rộng back-end sang remote để có thể đồng bộ dữ liệu

- Phát triển sang các nền tảng khác như Desktop, Web,

TÀI LIỆU THAM KHẢO

[1] Flutter Documentation: https://docs.flutter.dev/

[2] Dart Documentation: https://dart.dev/guides

[3] Flutter Youtube Official Channel: https://www.youtube.com/@flutterdev [4] Material Design: https://m3.material.io/

[5] GSkinner Blog: https://blog.gskinner.com/