Đề tài tìm hiểu công nghệ flutter và xây dựng ứng dụng minh họa

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MƠN CƠNG NGHỆ THƠNG TIN BÁO CÁO Mơn học: Cơng nghệ Oracle Đề tài: Tìm hiểu công nghệ Flutter xây dựng ứng dụng minh họa Nhóm sinh viên thực hiện: Lớp: CQ.59.CNTT Trần Ngọc Tín Dương Cơng Hậu Đồn Bùi Quang Vĩnh Đinh Hữu T Nguyên Nguyễn Đức Duy 5851071074 5951071023 5951071122 5951071065 5951071009 NỘI DUNG BÁO CÁO  Ngơn ngữ lập trình  Flutter gì?  Tính Flutter  Tại nên sử dụng Flutter?  Kiến trúc Flutter Flutter  Ưu điểm hạn chế Flutter  Tại nên học Flutter?  Tổng kết  Demo FLUTTER LÀ GÌ?  Flutter tảng phát triển ứng dụng đa tảng cho iOS Android Google phát triển sử dụng để tạo ứng dụng gốc (native app) cho Google FLUTTER LÀ GÌ? Flutter gồm thành phần quan trọng:  Một SDK (Software Development Kit)  Một Framework (UI Library based on widgets) TÍNH NĂNG CỦA FLUTTER • Flutter react framework • Sử dụng ngơn ngữ lập trình Dart đơn giản dễ đọc • Phát triển ứng dụng nhanh • Giao diện người dùng đẹp linh hoạt • Hổ trợ nhiều widget khác • Thể UI nhiều tảng • Ứng dụng có hiệu cao TẠI SAO NÊN SỬ DỤNG FLUTTER? • Phát triển ứng dụng nhanh chóng • Giao diện người dùng đẹp thu hút • Framework đại KIẾN TRÚC FLUTTER Widgets  Khái niệm cốt lõi Flutter framework là  Trong Flutter, thứ widget Widget (tiện tích) thành phần giao diện tạo nên toàn giao diện người dùng ứng dụng KIẾN TRÚC FLUTTER Widgets Trong Flutter tất widget phân loại dựa chức thành nhóm sau: • Các widget giao diện đặc thù theo tảng -Platform widgets • Các widget hỗ trợ bố trí giao diện - Layout widgets • Các widget quản lý trạng thái - State maintenance widgets • Các widget độc lập với tảng - Platform independent / basic widgets KIẾN TRÚC FLUTTER Gestures  Flutter widget hỗ trợ tương tác thông qua widget đặc bi ệt gọi là  GestureDetector. GestureDetector là tiện ích khơng hiển thị giao diện có khả nắm bắt thao tác người dùng nhấp, kéo, vu ốt, chạm Phần lớn widget gốc Flutter hỗ trợ tương tác giao diện thông qua  GestureDetector KIẾN TRÚC FLUTTER Gestures Gesture (cử chỉ) cách mà người dùng tương tác với thiết bị di động Có nhi ều cử khác vu ốt, chạm, lắc  Gesture  trong Flutter giúp ta xử lý cử người dùng, tương tự việc bắt kiện Android Một số cử sử dụng rộng rãi: • Tap • Double Tap • Drag • Flick • Pinch • Spread/Zoom • Panning KIẾN TRÚC FLUTTER Layers  Các thành phần nhóm lại theo độ phức tạp xếp rõ ràng tầng có độ phức tạp giảm dần Một layer (tầng,lớp) tạo thành việc sử dụng class cạnh KIẾN TRÚC FLUTTER Layers  Trong Flutter các layout cũng loại widget Flutter cung cấp nhiều loại layout khác như Container, Center, Align    Có hai loại widget layout Flutter • Single Child Widgets - Chỉ có widget • Multiple Child Widgets - Có nhiều widget KIẾN TRÚC FLUTTER Tổng kết điểm kiến trúc Flutter • Trong Flutter, tất quy widget, widget phức hợp bao gồm widget khác bên • Các tính tương tác tích hợp nhờ GestureDetector widget • Trạng thái widget quản lý cập nhật bởi StatefulWidget widget • Flutter cung cấp thiết kế class để lớp lập trình tùy thuộc vào độ phức tạp tác vụ NGƠN NGỮ LẬP TRÌNH FLUTTER • Dart ngơn ngữ lập trình mã nguồn mở đa năng, ngơn ngữ lập trình hướng đối tượng sử dụng cú pháp C Nó hỗ trợ khái niệm interface, class, Dart không hổ trợ mảng Dart collections có th ể s d ụng cấu trúc liệu thay • Dart tập trung vào phát triển front end, bạn sử dụng để tạo ứng dụng di động ứng d ụng web void main() { print("Dart"); } NGÔN NGỮ LẬP TRÌNH FLUTTER Biến (Variable) là tên đại diện cho nơi lữu trự liệu còn Kiểu liệu (Data types) đơn giản loại kích thước liệu liện kết với biến hàm Dart sử dụng từ khoá var để khai báo biến.  var name = 'Dart'; NGƠN NGỮ LẬP TRÌNH FLUTTER Hằng Từ khoá final và const được sử dụng để khai báo số (constants) void main() { final a = 12; const pi = 3.14; print(a); print(pi); } NGƠN NGỮ LẬP TRÌNH FLUTTER Dart hỗ trợ kiểu liệu đây: •Numbers •Strings •Lists and Maps void main() { var list = [1,2,3,4,5]; print(list); } void main() { var mapping = {'id': 1,'name':'Dart'}; print(mapping); } •Dynamic void main() { dynamic name = “Dart”; print(name); } NGƠN NGỮ LẬP TRÌNH FLUTTER Điều khiển vịng lặp • Dart hỗ trợ khối lênh If, If else switch • Dart hỗ trợ vịng lặp for in, while while NGƠN NGỮ LẬP TRÌNH FLUTTER Hàm (Functions) • Hàm nhóm câu lệnh nhằm thực tác vụ định void main() { add(3,4); } void add(int a,int b) { int c; c = a+b; print(c); } NGƠN NGỮ LẬP TRÌNH FLUTTER Dart là ngơn ngữ lập trình hướng đối tượng (object-oriented language) Nó hỗ trợ số tính l ập trình hướng đối tượng class, interface, Mỗi class (lớp) định nghĩa cho loại đối tượng Một class bao gồm nội dung sau đây: •Các thuộc tính (Fields) •Các hàm Getter setter •Hàm khởi tạo (Constructor) •Phương thức (Function) ƯU ĐIỂM VÀ HẠN CHẾ CỦA FLUTTER Ưu điểm  Các Widget tạo sẵn tùy chỉnh để mã hóa giao diện người dùng nhanh chóng  Dart ngơn ngữ lập trình đơn giản hiệu phù hợp với lập trình viên Java  Có cộng đồng nhà phát triển Flutter sẵn sàng chia sẻ kiến thức sử dụng công cụ  Giao diện người dùng Flutter linh hoạt phong phú  Với khả giao tiếp trực tiếp với hệ thống giúp nhà phát triển thuận tiện  Widget có khả kết hợp đa tảng mang lại hiệu vô tuyệt vời  Xây dựng ứng dụng có khả chạy giả lập thiết bị web ƯU ĐIỂM VÀ HẠN CHẾ CỦA FLUTTER Hạn chế •Bộ Render UI gần viết lại toàn dẫn đến sử dụng nhiều nhớ •Cần phải tìm hiểu tự học thêm ngơn ngữ lập trình Dart •Phải học thêm mơ hình liệu khác Flutter sử dụng mơ hình hồn tồn m ới Dart streaming block pattern TẠI SAO NÊN SỬ HỌC FLUTTER? • Dễ học dễ sử dụng • Biên dịch nhanh, tối đa hóa hiệu suất • Nhanh chóng thực hóa ý tưởng cho Startup • Cộng đồng học tập phát triển mạnh mẽ TỔNG KẾT Nhìn chung, Flutter tảng với hỗ trợ tối ưu giúp người dùng dễ dàng cá nhân hóa ứng d ụng di động tùy vào ý thích nhu cầu Flutter với đa tính ưu việt, ngơn ngữ l ập trình d ễ h ọc, giao di ện Framework dễ sử dụng lựa chọn an tồn cho muốn tìm kiếm tảng tạo ứng dụng di động gốc DEMO ... lập trình  Flutter gì?  Tính Flutter  Tại nên sử dụng Flutter?  Kiến trúc Flutter Flutter  Ưu điểm hạn chế Flutter  Tại nên học Flutter?  Tổng kết  Demo FLUTTER LÀ GÌ?  Flutter tảng... (native app) cho Google FLUTTER LÀ GÌ? Flutter gồm thành phần quan trọng:  Một SDK (Software Development Kit)  Một Framework (UI Library based on widgets) TÍNH NĂNG CỦA FLUTTER • Flutter react framework... NÊN SỬ DỤNG FLUTTER? • Phát triển ứng dụng nhanh chóng • Giao diện người dùng đẹp thu hút • Framework đại KIẾN TRÚC FLUTTER Widgets  Khái niệm cốt lõi Flutter framework là  Trong? ?Flutter, thứ