Xây dựng UI Dating App với flutter

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 BÀI TẬP LỚN TÌM HIỂU CƠNG NGHỆ FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ Sinh viên thực hiện: Nguyễn Thị Thu Hương - 5951071038 Võ Tấn Đào - 5951071011 Huỳnh Quang Huy - 5951071032 Ngô Văn Chiến - 5951071004 Giảng viên hướng dẫn: ThS Trần Phong Nhã CQ.59.CNTT CQ.59.CNTT CQ.59.CNTT CQ.59.CNTT TP Hồ Chí Minh, tháng năm 2021 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 BÀI TẬP LỚN TÌM HIỂU CƠNG NGHỆ FLUTTER VÀ XÂY DỰNG ỨNG DỤNG MINH HOẠ Sinh viên thực hiện: Nguyễn Thị Thu Hương - 5951071038 Võ Tấn Đào - 5951071011 Huỳnh Quang Huy - 5951071032 Ngô Văn Chiến - 5951071004 Giảng viên hướng dẫn: ThS Trần Phong Nhã CQ.59.CNTT CQ.59.CNTT CQ.59.CNTT CQ.59.CNTT TP Hồ Chí Minh, tháng năm 2021 LỜI CẢM ƠN Trong trình thực nghiên cứu tập lớn, nhóm nhận hỗ trợ, giúp đỡ thầy cô, bạn bè Với tình cảm chân thành, cho phép nhóm bày tỏ lòng biết ơn đến tất người tạo điều kiện giúp đỡ nhóm q trình học tập nghiên cứu Trước hết nhóm gửi tới thầy cô Bộ môn Công nghệ thông tin Trường Đại học Giao thông Vận tải Phân hiệu TP Hồ Chí Minh lời chào trân trọng, lời chúc sức khỏe lời cảm ơn sâu sắc Đặc biệt nhóm xin gửi lời cảm ơn chân thành tới thầy Trần Phong Nhã, thầy quan tâm giúp đỡ, hướng dẫn em hoàn thành tập lớn với đề tài: Tìm hiểu cơng nghệ Flutter xây dựng ứng dụng minh hoạ Với điều kiện thời gian kinh nghiệm cịn hạn chế thành viên nhóm, nên khơng thể tránh thiếu sót Nhóm mong nhận bảo, đóng góp ý kiến thầy để nhóm có điều kiện bổ sung, nâng cao ý thức mình, phục vụ tốt cơng tác thực tế sau Nhóm xin chân thành cảm ơn! NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN …………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ……………………………………………………………………………………… Tp Hồ Chí Minh, ngày …… tháng 10 năm 2021 Giảng viên hướng dẫn (Ký ghi họ tên) ……………………………………………… MỤC LỤC DANH MỤC HÌNH ẢNH VIẾT TẮT NoSQL UI API I/O ARM JSON CDN PoP DIỄN GIẢI No-Structure Query Language Ý NGHĨA Thuật ngữ chung cho hệ sở liệu khơng sử dụng mơ hình liệu quan hệ User Interface Giao diện người dùng Application Programming Interface Một trung gian phần mềm cho phép hai ứng dụng giao tiếp với Input/Output Nhập/Xuất Advanced RISC Machine Một họ kiến trúc cho vi xử lý máy tính, cấu hình cho mơi trường khác JavaScript Object Notation Một kiểu định dạng liệu tuân theo quy luật định mà hầu hết ngôn ngữ lập trình đọc Content Delivery Network Mạng lưới máy chủ lưu giữ nội dung tĩnh bên website phân phối đến nhiều máy chủ PoP Points of Presence Điểm diện - điểm mà hai nhiều mạng thiết bị thông tin liên lạc khác xây dựng mối liên hệ với CHƯƠNG 1: CÔNG NGHỆ FLUTTER 1.1 Tổng quan Flutter 1.1.1 Giới thiệu Flutter Flutter công cụ giao diện người dùng Google để xây dựng ứng dụng đẹp, biên dịch nguyên cho thiết bị di động , web , máy tính để bàn thiết bị nhúng từ sở mã [1] Phiên Flutter gọi "Sky" chạy hệ điều hành Android công bố hội nghị nhà phát triển Dart năm 2015 Flutter mã nguồn mở miễn phí tạo Google Hình 1.1: Logo Flutter ứng dụng xây dựng Flutter 1.1.2 Các vấn đề bật Flutter Ba đặc điểm bật nhắc đến Flutter: • Fast Development (Phát triển nhanh): Flutter hỗ trợ tính Hot Reload, giúp thỉ giao diện thiết kế vừa chỉnh sửa vài mili giây Google muốn phát triển ngôn ngữ cải tiến JavaScript hỗ trợ cách biên dịch Just In Time (JIT) Ahead Of Time (AOT) Với AOT trình biên dịch chuyển ngơn ngữ Dart sang thẳng Native Code giúp hiệu tốt có thể, tức chạy chương trình, biên dịch từ đầu đến cuối Đối với JIT, cho phép hot reloading hoạt động, giúp phát triển sản phẩm nhanh tiện dụng hơn, viết đến đâu biên dịch đến • Expressive and Flexible UI (Giao diện người dùng linh hoạt): Flutter tập trung vào trải nghiệm người dùng cuối, phù hợp với tảng, sở hữu nhiều thiết kế đem lại thoải mái linh hoạt phát triển, sử dụng Flutter xây dựng giao diện từ nhiều thành phần khác Điều khiến cho giao diện Flutter trở nên đẹp mắt có phong cách chuẩn Material Design Cupertino, giúp hỗ trợ Smooth Scrolling hay APIs chuyển động tốt • Native Performance (Hiệu suất gốc): Các widget Flutter kết hợp tất khác biệt quan trọng tảng cuộn, điều hướng, biểu tượng phông chữ, đồng thời mã Flutter biên dịch thành mã máy ARM gốc trình biên dịch gốc Dart Không giống framework khác, Flutter khơng phụ thuộc vào trung gian để build code tảng Nó có build riêng code build trực tiếp sang mã máy, giúp giảm thiểu bug trình trung gian Các ứng dụng xây dựng Flutter: My BMW, Nubank, Google Assistant, eBay Motors, Google Ads, Grab, Baidu, … 1.2 Hướng dẫn cài đặt Flutter Windows Các bước cài đặt Flutter hệ điều hành Windows [2] Bước 1: Truy cập địa https://flutter.dev/docs/get-started/install/windows tải phiên Flutter SDK Bước 2: Giải nén vơ thư mục ví dụ C:\flutter\ Bước 3: Cập nhật system path cho thư mục flutter\bin Trong tìm kiếm Start, gõ ‘env’ sau chọn Edit environment variables for your account Dưới dòng chữ User variables, kiểm tra thấy Path: , thêm 10 đường dẫn đầy đủ thư mục flutter\bin sử dụng dấu “;” để ngăn cách với biến khác Bước 4: Flutter cung cấp tool gọi flutter doctor để kiểm tra tất yêu cầu cần thiết cho môi trường phát triển Flutter Bước : Chạy lệnh phía để hệ thống kiểm tra đưa báo cáo sau: Bước 6: Cài đặt Android SDK bạn chưa cài đặt cảnh báo flutter doctor Bước 7: Cài đặt Android Studio bạn chưa cài đặt cảnh báo ... tin liên lạc khác xây dựng mối liên hệ với 8 CHƯƠNG 1: CÔNG NGHỆ FLUTTER 1.1 Tổng quan Flutter 1.1.1 Giới thiệu Flutter Flutter công cụ giao diện người dùng Google để xây dựng ứng dụng đẹp,... [1] Phiên Flutter gọi "Sky" chạy hệ điều hành Android công bố hội nghị nhà phát triển Dart năm 2015 Flutter mã nguồn mở miễn phí tạo Google Hình 1.1: Logo Flutter ứng dụng xây dựng Flutter 1.1.2... Flexible UI (Giao diện người dùng linh hoạt): Flutter tập trung vào trải nghiệm người dùng cuối, phù hợp với tảng, sở hữu nhiều thiết kế đem lại thoải mái linh hoạt phát triển, sử dụng Flutter xây dựng