Thiết kế ứng dụng android và gửi dữ liệu lên database ứng dụng trong việc gọi món trong nhà hàng và quán ăn

Video demo: https:youtu.be0WkCXIwr8Rw Bài báo cáo sử dụng ngôn ngữ lập trình Dart trên SDK Flutter để thiết kế. Sử dụng DB MySql và Localhost để quản lý các đơn hàng, xuất hóa đơn. Kết nối mobile app và database thành một hệ thống hoàn chỉnh.Với phương hướng đặt ra là giảm sự tiếp xúc giữa nhân viên phục vụ trong nhà hàng, quán ăn với thực khách nhiều nhất có thể cũng như tiếp xúc giữa các thực khách với nhau.

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHÂT LƯỢNG CAO ĐỒ ÁN MÔN HỌC ĐỀ TÀI: THIẾT KẾ ỨNG DỤNG ANDROID VÀ GỬI DỮ LIỆU LÊN DATABASE ỨNG DỤNG TRONG VIỆC GỌI MÓN TRONG NHÀ HÀNG VÀ QUÁN ĂN GV hướng dẫn: SV thực hiện: Ngành: TS Phan Học Nguyễn Vũ Long MSSV: 171057 Trần Thái Hà Phong MSSV: 17161115 CNKT Điện tử- Viễn thông Hồ Chí Minh, ngày 10 tháng 01 năm 2022 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** Tp Hồ Chí Minh, ngày 10 tháng 01 năm 2022 NHIỆM VỤ ĐỒ ÁN MÔN HỌC Họ tên sinh viên: Nguyễn Vũ Long Trần Thái Hà Phong MSSV:17161057 MSSV: 17161115 Ngành: CNKT Điện tử- Viễn thông Lớp:18161CLVT2B Giảng viên hướng dẫn:Th.S Phan Học ĐT: 0869683324 Ngày nhận đề tài:06/09/2021 Ngày nộp đề tài: 10/01/2022 Tên đề tài: Thiết kế ứng dụng android gửi liệu lên database ứng dụng việc gọi nhà hàng quán ăn Các số liệu, tài liệu ban đầu: - Trang web https://docs.flutter.dev/ - Trang web https://stackoverflow.com/ Nội dung thực đề tài: - Tìm hiểu cách xây dựng mobile app ngôn ngữ Dart sử dụng SDK Flutter - Tìm hiểu xây dựng database - Kết nối mobile app database thành hệ thống hồn chỉnh Sản phẩm: Ứng dụng android gửi liệu lên database GIẢNG VIÊN HƯỚNG DẪN CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM - Độc lập – Tự – Hạnh Phúc - ******* - PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên: Nguyễn Vũ Long MSSV: 17161057 Trần Thái Hà Khang MSSV: 17161115 Ngành: CNKT Điện tử – Viễn thông Tên đề tài: Thiết kế ứng dụng android gửi liệu lên database ứng dụng việc gọi nhà hàng quán ăn Họ tên Giáo viên hướng dẫn: TS Phan Học NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm:……………….(Bằng chữ: ) Tp Hồ Chí Minh, ngày 10 tháng 01 Giáo viên hướng dẫn năm 2022 (Ký & ghi rõ họ tên) CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM - Độc lập – Tự – Hạnh Phúc - ******* - PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên: Nguyễn Vũ Long MSSV: 17161057 Trần Thái Hà Khang MSSV: 17161115 Ngành: CNKT Điện tử – Viễn thông Tên đề tài: Thiết kế ứng dụng android gửi liệu lên database ứng dụng việc gọi nhà hàng quán ăn Họ tên Giáo viên hướng dẫn: TS Phan Học NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm:……………….(Bằng chữ: .) Tp Hồ Chí Minh, ngày 10 tháng 01 Giáo viên phản biện năm 2022 (Ký & ghi rõ họ tên) LỜI CẢM ƠN Quá trình thực Đồ án mơn học giai đoạn quan trọng quãng đời sinh viên, tiền đề nhằm trang bị kiến thức quý báu, kỹ nghiên cứu lẫn kinh nghiệm thi công để chuẩn bị cho đồ án tốt nghiệp Trước tiên, em xin gửi lời cảm ơn chân thành đến Thầy khoa Đào tạo Chất lượng cao, trường Đại học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh, người truyền đạt cho em kiến thức quý báu, dẫn định hướng cho nhóm trình học tập Em xin trân trọng cảm ơn thầy Phan Học tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực đồ án mà cịn hành trang tiếp bước cho em trình học tập lập nghiệp sau Do kiến thức cịn hạn hẹp nên hồn thành đề tài khó tránh khỏi thiếu sót, mong sự dẫn đóng góp Thầy để đề tài em hoàn thiện Em xin chân thành cảm ơn! LỜI NĨI ĐẦU Trong tình hình dịch bệnh COVID-19 ngày diễn biến theo xu hướng tiêu cực, kéo theo nhiều hệ luỵ khác gây thiệt lớn người nước ta nói riêng tồn giới nói chung Nhưng song song nó, hội để cơng nghệ khơng dây, IoT bước vào thời kì bùng nổ giảm sự tiếp xúc người với người Nắm bắt điều này, nhóm chúngg em định lựa chọn đề tài:” THIẾT KẾ ỨNG DỤNG ANDROID VÀ GỬI DỮ LIỆU LÊN DATABASE ỨNG DỤNG TRONG VIỆC GỌI MÓN TRONG NHÀ HÀNG VÀ QUÁN ĂN” Hưởng ứng theo qui định phòng chống dịch bệnh, đặc biệt qui tắc “5K”, nhóm chúng em tiến hành nghiên cứu xây dựng ứng dụng giúp nhà hàng quán ăn sử dụng để nâng cao hiệu phịng chống dịch bệnh tình hình MỤC LỤC DANH MỤC HÌNH ẢNH Hình 3.2 Mơ hình cấu tạo nên project Flutter…………………………… Hình 3.2.1 Sử dụng Figma thiết kế giao diện ứng dụng……………………………5 Hình 3.2.2 Minh họa tạo text…………………………………………… Hình 3.2.3 Các sử dụng Container…………………………………………… Hình 3.2.4 Cách tạo srolling menu cột………………………………………… Hình 3.3.1 Tạo database MySQL…………………………………………………10 Hình 3.3.2 Bảng sản phẩm…………………………………………………… …11 Hình 3.3.3 Tạo liên kết bảng…………………………………………….12 Hình 3.4.1 Kết bảng báo cáo hóa đơn chi tiết……………………………… 14 CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đặt vấn đề Trong thời điểm dịch bệnh tại, việc qn ăn hay nhà hàng đóng cửa điều khơng tránh khỏi để tránh lây lan dịch khách hàng với Từ đị, nhóm chúng em suy nghĩ phương hướng giải pháp giúp đỡ nhà hàng, quán ăn nâng cao hiệu chống dịch Từ suy nghĩ trên, đồng thơi với thân sinh viên ngành CNKT Điện tử-Viễn thơng, nhóm chúng em định lựa chọn đề:” THIẾT KẾ ỨNG DỤNG ANDROID VÀ GỬI DỮ LIỆU LÊN DATABASE ỨNG DỤNG TRONG VIỆC GỌI MÓN TRONG NHÀ HÀNG VÀ QUÁN ĂN” Với phương hướng đặt giảm sự tiếp xúc nhân viên phục vụ nhà hàng, quán ăn với thực khách nhiều tiếp xúc thực khách với 1.2 Mục tiêu Xây dựng thành công ứng dụng điện thoại, tạo , quản lý thành công sở liệu kết nối thiết bị sở liệu 1.3 Nội dung nghiên cứu Nghiên cứu ngôn ngữ lập trình Dart, cách thức xây dựng ứng dụng Android Đồng thời bổ sung kiến thức lập trình nâng cao khả sáng tạo thân Tạo quản lý hệ sở liệu Kết nối thiết bị với sở liệu 1.4 Phương pháp nghiên cứu Cài đặt sử dụng Flutter, sử dụng ngơn ngữ lập trình Dart để xây dựng ứng dụng điện thoại Cài đặt sử dụng ứng dụng Docker Desktop với mục đích chạy MySQL PhpMyAdmin Sử dụng PhpMyAdmin quản trị hệ sở liệu MySQL: thêm, xóa, cập nhật liệu tạo bảng Kết nối thiết bị với sở liệu 1.5 Bố cục Nội dung đề tài gồm chương - Chương 1: Tổng quan đề tài Chương 2: Cơ sở lý thuyết Chương 3: Thiết kế xây dựng hệ thống Chương 4: Kết thực Chương 5: Kết luận phương hướng phát triển CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngơn ngữ lập trình Dart Flutter 2.1.1 Sơ lược ngôn ngữ lập trình Dart Dart ngữ lập trình với mã nguồn mở đa phát triển Google Ngơn ngữ Dart ứng dụng lập trình web, server di động( Android IOS) Ngôn ngữ lập trình Dart ngơn ngữ lập trình hướng đối tượng, hoạt động theo lớp (class) sử dụng cú pháp kiểu C để dịch mã JavaScript  Ưu điểm sử dụng ngơn ngữ lập trình Dart: - Bộ công cụ đơn giản, dễ sử dụng mang lại hiệu suất cao - Hỗ trợ xác định sửa lỗi type-safe - Có thể biên dịch thành mã x86 ARM giúp hoạt động cách trơn tru IOS, Android 2.1.2 Sơ lược Flutter Flutter SDK (Software Development Kit) hỗ trợ người dùng phát triển ứng dụng dành riêng cho Android IOS Flutter Mobile UI Framework Google dựa ngơn ngữ lập trình Dart Cho phép người dùng tạo giao diện trông tự nhiên đạt hiệu cao chất lượng Android IOS Mơ hình cấu tạo nên project Flutter: Hình 3.2 Mơ hình cấu tạo nên project Flutter MyApp Widget tạo từ Widget gốc Flutter, MaterialApp 10 "BUY", style: TextStyle(fontSize: 16), )), ), ), appBar: AppBar( title: const Text(title), backgroundColor: Colors.pinkAccent, ), body: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(30), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/an1.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Bánh Chocolate"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( 39 number: danhSachSanPham[0], decreaseFunc: () { if (danhSachSanPham[0] > 0) { danhSachSanPham[0] ; setState(() {}); } }, inscreaseFunc: () { danhSachSanPham[0]++; setState(() {}); }) ], ), ), Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/an2.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Bánh kem trân châu"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[1], decreaseFunc: () { if (danhSachSanPham[1] > 0) { danhSachSanPham[1] ; setState(() {}); } 40 }, inscreaseFunc: () { danhSachSanPham[1]++; setState(() {}); }) ], ), ), ], ), const Divider( height: 15, color: Colors.pinkAccent, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/an3.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Bánh kẹp nướng"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[2], decreaseFunc: () { 41 if (danhSachSanPham[2] > 0) { danhSachSanPham[2] ; setState(() {}); } }, inscreaseFunc: () { danhSachSanPham[2]++; setState(() {}); }) ], ), ), Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/an4.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Bánh kem quế"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[3], decreaseFunc: () { if (danhSachSanPham[3] > 0) { danhSachSanPham[3] ; setState(() {}); } }, inscreaseFunc: () { 42 danhSachSanPham[3]++; setState(() {}); }) ], ), ), ], ), const Divider( height: 15, color: Colors.pinkAccent, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/an5.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("1 lát bánh kem dâu"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[4], decreaseFunc: () { if (danhSachSanPham[4] > 0) { danhSachSanPham[4] ; 43 setState(() {}); } }, inscreaseFunc: () { danhSachSanPham[4]++; setState(() {}); }) ], ), ), Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/an6.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Bộ bánh lan"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[5], decreaseFunc: () { if (danhSachSanPham[5] > 0) { danhSachSanPham[5] ; setState(() {}); } }, inscreaseFunc: () { danhSachSanPham[5]++; setState(() {}); 44 }) ], ), ), ], ), const Divider( height: 15, color: Colors.pinkAccent, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/uong1.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Cafe"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[6], decreaseFunc: () { if (danhSachSanPham[6] > 0) { danhSachSanPham[6] ; setState(() {}); } 45 }, inscreaseFunc: () { danhSachSanPham[6]++; setState(() {}); }) ], ), ), Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/uong2.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Ca cao đá xay"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[7], decreaseFunc: () { if (danhSachSanPham[7] > 0) { danhSachSanPham[7] ; setState(() {}); } }, inscreaseFunc: () { danhSachSanPham[7]++; setState(() {}); }) ], 46 ), ), ], ), const Divider( height: 15, color: Colors.pinkAccent, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "assets/images/uong3.jpg", height: 150 * screenHeightPropotion, width: 70 * screenWidthPropotion, fit: BoxFit.fill, ), const SizedBox( height: 10, ), const Text("Soda dưa hấu"), const SizedBox( height: 10, ), const Text("120.000k"), const SizedBox( height: 10, ), AddButton( number: danhSachSanPham[8], decreaseFunc: () { if (danhSachSanPham[8] > 0) { danhSachSanPham[8] ; setState(() {}); } }, inscreaseFunc: () { 47 danhSachSanPham[8]++; setState(() {}); }) ], ), ), ], ), const Divider( height: 15, color: Colors.pinkAccent, ), ], ), ), )); } }  Code chạy PHP MyAdmin MySql Docker version: '3' services: db: image: mysql:latest container_name: db_appBanHang environment: MYSQL_ROOT_PASSWORD: 123 MYSQL_DATABASE: app_db MYSQL_USER: db_user MYSQL_PASSWORD: 321 ports: - "3307:3306" volumes: - /db_data:/var/lib/mysql:rw - /database/init.sql:/docker-entrypoint-initdb.d/init.sql:ro phpmyadmin: image: phpmyadmin/phpmyadmin container_name: pma links: - db environment: PMA_HOST: db_appBanHang PMA_PORT: 3306 PMA_ARBITRARY: restart: always ports: 48 - 8081:80 php-apache-environment: container_name: php-apache build: context: /php dockerfile: Dockerfile depends_on: - db volumes: - /php/src:/var/www/html/ ports: - 8000:80  Code PHP - Ghi liệu vào MySQL