LẬP TRÌNH ANDROID CƠ BẢN Đề tài : Xây dựng app đặt đồ ăn HaNoi Food Tour

HỌC VIỆN KỸ THUẬT MẬT MÃ KHOA CÔNG NGHỆ THÔNG TIN LẬP TRÌNH ANDROID CƠ BẢN Đề tài Xây dựng app đặt đồ ăn HaNoi Food Tour Sinh viên thực hiện Bùi Quang Tuấn CT030453 Bùi Việt Kiều CT030428 Nguyễn Việt Tùng CT030454 Nhóm 1 – C3D02 Giảng viên hướng dẫn ThS Lê Bá Cường Hà Nội, 2022 77 LỜI NÓI ĐẦU Ngày nay, với sự phát triển mạnh mẽ của khoa học công nghệ, Công nghệ Thông tin là một trong những ngành có vị thế dẫn đầu và có vai trò rất lớn trong sự phát triển chung đó Các ứng dụng của công nghệ thông.

HỌC VIỆN KỸ THUẬT MẬT MÃ KHOA CÔNG NGHỆ THÔNG TIN LẬP TRÌNH ANDROID CƠ BẢN Đề tài : Xây dựng app đặt đồ ăn HaNoi Food Tour Sinh viên thực hiện: Bùi Quang Tuấn: CT030453 Bùi Việt Kiều: CT030428 Nguyễn Việt Tùng: CT030454 Nhóm – C3D02 Giảng viên hướng dẫn: ThS Lê Bá Cường Hà Nội, 2022 LỜI NÓI ĐẦU Ngày nay, với phát triển mạnh mẽ khoa học công nghệ, Công nghệ Thông tin ngành có vị dẫn đầu có vai trị lớn phát triển chung Các ứng dụng cơng nghệ thơng tin áp dụng lĩnh vực nghiên cứu khoa học lĩnh vực đời sống Là phần Công nghệ Thông tin, Mobile App có phát triển mạnh mẽ phổ biến nhanh lợi ích mà mang lại cho cộng đồng lớn Bằng việc lựa chọn thực đề tài “Hanoi Food Tour”, nhóm em muốn tìm hiểu đưa giải pháp tốt nhằm giới thiệu địa điểm ẩm thực đặc trưng Hà Nội cho du khách nước du khách nước Ứng dụng mang lại cho người dùng nhiều lợi ich như: khả tìm kiếm, đặt hàng tốn địa điểm ăn uống chất lượng nội thành Hà Nội Ngồi ra, ứng dụng cịn nơi quảng bá đại điểm, danh lam thắng cảnh ăn truyền thông người Hà Nội Ứng dụng giúp cho cửa hàng cung cấp cho khách hàng lựa chọn linh hoạt tiện lợi việc tìm mua sản phẩm thơng qua chức tìm kiếm giỏ hàng Các thông tin sản phẩm hiển thị chi tiết với sản phẩm, từ khách hàng dễ dàng nhận biết lựa chọn thứ cần Về phía cửa hàng, hệ thống mang lại tiện dụng việc cập nhập quản lý thông tin cho app, tạo khả liên lạc nhanh dễ dàng với khách hàng Tuy đề tài hoàn thành điều kiện thời gian khơng cho phép tài liệu không đầy đủ nên app số hạn chế định Rất mong nhận đóng góp ý kiến thầy, bạn để app ngày hồn thiện Trân trọng chân thành cảm ơn! MỤC LỤC LỜI NÓI ĐẦU .1 MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG BIỂU CHƯƠNG GIỚI THIỆU VỀ MOBILE APP 1.1 Giới thiệu Mobile App .7 1.1.1 Khái niệm Mobile App 1.1.2 Phân loại Mobile App 1.1.3 Tầm quan trọng Mobile App 1.1.4 Ngơn ngữ lập trình để tạo Mobile App 10 1.2 Các công cụ sử dụng 11 1.2.1 Visual Studio Code IDE .11 1.2.2 Ngôn ngữ JavaScript 14 1.2.3 Giới thiệu NodeJS 16 1.2.4 ExpressJS .17 1.2.5 React Native 20 1.2.6 MongoDB 22 CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 25 2.1 Phân tích hệ thống 25 2.1.1 Khảo sát trạng 25 2.1.2 Mục tiêu xây dựng ứng dụng .25 2.2 Biểu đồ Usecase tổng quan 26 2.3 Đặc tả ca sử dụng 27 2.3.1 Ca sử dụng Quản lý cửa hàng 27 2.3.2 Ca sử dụng Quản lý ăn 28 2.3.3 Ca sử dụng Quản lý đơn hàng 29 2.3.4 Ca sử dụng Quản lý doanh thu .30 2.3.5 Ca sử dụng quản lý thông tin .30 2.3.6 Ca sử dụng Đặt hàng 31 2.4 Thiết kế sở liệu 32 2.4.1 Bảng quản trị viên 32 2.4.2 Bảng quản lý đơn hàng 33 2.4.3 Bảng ăn 33 2.4.4 Bảng đơn hàng .34 CHƯƠNG THỰC NGHIỆM 35 3.1 Thiết kế giao diện ứng dụng .35 3.1.1 Giao diện đăng ký 35 3.1.2 Giao diện đăng nhập 37 3.1.3 Giao diện trang chủ 38 3.1.4 Giao diện danh mục ăn 39 3.1.5 Giao diện chi tiết cửa hàng 40 3.1.6 Giao diện tìm kiếm 41 3.1.7 Giao diện đặt hàng .42 3.1.8 Giao diện chi tiết đơn hàng 43 3.1.9 Giao diện giỏ hàng .44 3.1.10 Giao diện toán 45 3.1.11 Giao diện quản lý lịch sử đơn hàng 46 3.2 Thiết kế giao diện website quản lý .47 3.2.1 Giao diện đăng ký 47 3.2.2 Giao diện đăng nhập 47 3.2.3 Giao diện trang chủ 48 3.2.4 Giao diện chi tiết đơn hàng 49 3.2.5 Giao diện quản lý đơn hàng 50 3.2.6 Giao diện thống kê doanh thu 50 3.3 Hướng dẫn sử dụng ứng dụng 51 KẾT LUẬN 52 DANH MỤC HÌNH ẢNH Hình 1-1 Giới thiệu Mobile App Hình 1-2 Phân loại Mobile App Hình 1-3 Sự phổ biến Mobile App 10 Hình 1-4 Android IOS 11 Hình 1-5 Visual Studio Code IDE 13 Hình 1-6 Các tính Visual Studio Code 13 Hình 1-7 React Native 21 Hình 1-8 Ảnh minh họa MongoDB 25 Hình 2-1 Biểu đồ Usecase tổng quan 27 Hình 3-1 Giao diện dăng ký 36 Hình 3-2 Màn hình đăng ký tài khoản thành cơng 37 Hình 3-3 Giao diện đăng nhập 38 Hình 3-4 Giao diện trang chủ .39 Hình 3-5 Giao diện chi tiết danh mục ăn 40 Hình 3-6 Giao diện chi tiết cửa hàng 41 Hình 3-7 Giao diện tìm kiếm 42 Hình 3-8 Giao diện đặt hàng thành cơng 43 Hình 3-9 Giao diện chi tiết đơn hàng 44 Hình 3-10 Giao diện giỏ hàng .45 Hình 3-11 Giao diện xác nhận tốn .46 Hình 3-12 Giao diện tốn thành cơng 46 Hình 3-13 Giao diện quản lý lịch sử đơn hàng .47 Hình 3-14 Giao diện hình đăng ký 48 Hình 3-15 Giao diện hình đăng nhập 48 Hình 3-16 Giao diện trang chủ .49 Hình 3-17 Giao diện chi tiết đơn hàng 50 Hình 3-18 Giao diện quản lý đơn hàng 51 Hình 3-19 Giao diện thống kê doanh thu 51 DANH MỤC BẢNG BIỂU Bảng 2.1 Ca sử dụng Quản lý cửa hàng 28 Bảng 2.2 Ca sử dụng Quản lý ăn 29 Bảng 2.3 Ca sử dụng Quản lý đơn hàng .30 Bảng 2.4 Ca sử dụng Quản lý doanh thu 31 Bảng 2.5 Ca sử dụng Quản lý thông tin 31 Bảng 2.6 Ca sử dụng Đặt hàng .32 Bảng 2.7 Bảng quản trị viên 33 Bảng 2.8 Bảng quản lý đơn hàng 34 Bảng 2.9 Bảng ăn 34 Bảng 2.10 Bảng đơn hàng 35 CHƯƠNG GIỚI THIỆU VỀ MOBILE APP 1.1 Giới thiệu Mobile App 1.1.1 Khái niệm Mobile App Mobile app chương trình ứng dụng dành riêng cho thiết bị di động tablet hay smartphone cho phép người dùng sử dụng để truy cập vào nội dung mà bạn mong muốn thiết bị điện thoại di động Những nhà lập trình mobile app biến trở thành không gian lớn thu nhỏ để người dùng giải trí, xem tin tức, mua sắm, Hình 1-1 Giới thiệu Mobile App Mobile app chứa lượng lớn khách hàng tiềm mà doanh nghiệp tìm kiếm Vì mà ngày có vô số app thuộc nhiều lĩnh vực ngành nghề khác đời 1.1.2 Phân loại Mobile App Khi hiểu khái niệm mobile app việc tìm hiểu thêm phân loại mobile app bỏ qua:  Native Mobile App: Đây loại ứng dụng mà bạn sử dụng để tải nội dung mong muốn xuống thiết bị điện thoại di động sử dụng chúng cách truy cập Một số native app kể đến ứng dụng tra từ điển hay loại game mobile offline,  Hybrid Mobile App: Hybrid Mobile App ứng dụng lai kết hợp điểm đặc trưng bật web app native app Web ứng dụng viết ngơn ngữ lập trình web CSS3, Javascript, hay HTML5 bao bọc lớp vỏ container bên ngồi để tương tự native mobile app tải kho ứng dụng Hình 1-2 Phân loại Mobile App 1.1.3 Tầm quan trọng Mobile App Sự phổ biến smartphone: Smartphone ngày thay feature phone cửa hàng Hầu hết người có khả sử dụng App smartphone, từ doanh nhân, social networker game thủ Smartphone ngày phổ biến Khả đa dạng: Smartphone ngày có sức hút mạnh mẽ Chúng ngày phù hợp với lượng lớn công việc ngày tăng mà trước bị hạn chế bở máy tính xách tay hay máy tính để bàn Ngày nay, smartphone app công ty sử dụng để quảng bá thương hiệu/sản phẩm, để cung cấp quyền truy cập vào sản phẩm có Trong tương lai, thấy nhiều ứng dụng khác như: Kích hoạt sản phẩm mới, y tế lưu động, bán hàng điện thoại, App giúp cải thiện hiệu làm việc Sự phổ biến App stores: Trong tương lai gần, smartphone phụ thuộc vào App store Bởi bạn có smartphone hay advanced feature phone dễ dàng thuận tiện tiếp cận với giới ứng dụng Trong tương lai gần, smartphone ln phụ thuộc vào App store Hình 1-3 Sự phổ biến Mobile App Unmatched user-experience: Mobile App mang đến trải nghiệm mà Mobile Web hay cơng cụ khác khơng thể có Mobile App mang đến trải nghiệm khác biệt 3.1.3 Giao diện trang chủ Hình 3-13 Giao diện trang chủ 38 3.1.4 Giao diện danh mục ăn Hình 3-14 Giao diện chi tiết danh mục ăn 39 3.1.5 Giao diện chi tiết cửa hàng Hình 3-15 Giao diện chi tiết cửa hàng 40 3.1.6 Giao diện tìm kiếm Tại khách hàng nhập từ khóa tìm kiếm để tìm giày cách nhanh chóng Hình 3-16 Giao diện tìm kiếm 41 3.1.7 Giao diện đặt hàng Hình 3-17 Giao diện đặt hàng thành công Sau đặt hàng thành công, đơn hàng xuất giỏ hàng bạn 42 3.1.8 Giao diện chi tiết đơn hàng Hình 3-18 Giao diện chi tiết đơn hàng 43 3.1.9 Giao diện giỏ hàng Hình 3-19 Giao diện giỏ hàng 44 3.1.10 Giao diện tốn Hình 3-20 Giao diện xác nhận tốn Hình 3-21 Giao diện tốn thành cơng 45 3.1.11 Giao diện quản lý lịch sử đơn hàng Hình 3-22 Giao diện quản lý lịch sử đơn hàng 46 3.2 Thiết kế giao diện website quản lý 3.2.1 Giao diện đăng ký Hình 3-23 Giao diện hình đăng ký 3.2.2 Giao diện đăng nhập Hình 3-24 Giao diện hình đăng nhập 47 Chức cho phép người quản trị đăng nhập vào website tên đăng nhập mật muốn quản lý cửa hàng Sau đăng nhập thành cơng họ quản lý cửa hàng Đầu vào: Tên đăng nhập, mật Quá trình: Nhập tên đăng nhập mật Kiểm tra xem tên đăng nhập mật có hợp lệ không Đầu ra: Nếu tên đăng nhập mật người sử dụng đăng nhập vào hệ thống Nếu sai hệ thống yêu cầu nhập lại 3.2.3 Giao diện trang chủ Đây giao diện trang web Tại người quản lý xem giới thiệu sơ qua website thơng tin khác Hình 3-25 Giao diện trang chủ 48 3.2.4 Giao diện chi tiết đơn hàng Hình 3-26 Giao diện chi tiết đơn hàng 49 3.2.5 Giao diện quản lý đơn hàng Hình 3-27 Giao diện quản lý đơn hàng 3.2.6 Giao diện thống kê doanh thu Hình 3-28 Giao diện thống kê doanh thu 50 3.3 Hướng dẫn sử dụng ứng dụng Khi vào website quản trị cửa hàng cần phải đăng nhập để quản lý website - Đối với quản trị cửa hàng:  Khi đăng nhập chuyển đến trang chủ chuyên dụng cho quản trị viên để quản lý website  Quản trị viên thêm/sửa/xóa ăn website theo ý thích  Quản trị viên có quyền xem quản lý đơn hàng website  Quản trị viên xem thống kê shop - Đối với khách hàng:  Khách hàng tìm kiếm ăn thơng qua search tìm kiếm  Bấm vào cửa hàng để xem chi tiết cửa hàng  Khách hàng lọc ăn theo danh mục có sẵn  Bấm vào giỏ hàng để xem quản lý giỏ hàng: thêm/sửa/xóa giỏ hàng  Mua hàng ứng dụng cách nhấn vào mua hàng gửi yêu cầu mua hàng, sau hệ thống chuyển sang trang mua hàng  Đánh giá chất lượng phục vụ shop sau mua hàng Các liệu người dùng, ăn, đơn hàng lưu sở liệu Mongodb, thuận tiện cho việc quản lý liệu quản trị viên 51 KẾT LUẬN Kết đạt - Sau thời gian tập trung triển khai đề tài, nhóm hồn thành ứng dụng Hanoi Food Tour với giao diện đẹp, thao tác sử dụng dễ dàng, thân thiện với người dùng - Phần mềm có ứng dụng thực tiễn nhà hàng, quán ăn khách du lịch - Website quản trị dùng để quản lý thơng tin liên quan đến ăn, đơn hàng, thống kê, … - Nắm bước xây dựng ứng dụng mobile website quản lý bán hàng trực tuyến, thực quy trình - Bên cạnh đó, nhóm mở rộng thêm kiến thức chuyên ngành nhờ việc tìm hiểu số kiến thức lập trình để áp dụng vào việc phát triển ứng dụng Nhờ vậy, kỹ tự học vận dụng kỹ nhóm nâng cao - Khi thực hoàn thành dự án, nhóm biết thêm nhiều kinh nghiệm quý giá xây dựng app mobile nói riêng phát triển phần mềm nói chung Những kỹ tảng để giúp nhóm em nâng cao trình độ thân, kinh nghiệm thực tế để làm việc ngồi doanh nghiệp sau Hạn chế đề tài Phần mềm xây dựng ứng dụng Hanoi Food Tour hoàn thành xong khơng tránh khỏi thiếu xót hạn chế định: - Kỹ phân tích hệ thống nhiều hạn chế - Các chức chưa đầy đủ hoàn hảo mong đợi Hướng phát triển - Tiếp tục bổ sung chức mà ứng dụng chưa có để ứng dụng sử dụng rộng rãi - Tiếp tục hồn thiện chương trình hi vọng đáp ứng nhu cầu người sử dụng 52 ... cơng việc lập trình c) Có thể lập trình đa dạng hệ điều hành: React Native bước chuyển lớn mobile app Việc lập trình đa dạng hệ điều hành mang đến tiện ích cho cộng đồng dev tồn cầu d) Cộng đồng... db.createCollection(‘students’); Tạo bảng ghi: db.students.insert({name:’thanh’,gender:’male’}); Cập nhật: db.students.update({_id:1},{$set:{name:’thanh update’}}); Xóa ghi: db.students.remove({_id:1}); Tìm kiếm: db.students.find({name:’thanh’});... 31 Bảng 2.5 Ca sử dụng Quản lý thông tin 31 Bảng 2.6 Ca sử dụng Đặt hàng .32 Bảng 2.7 Bảng quản trị viên 33 Bảng 2.8 Bảng quản lý đơn hàng 34 Bảng 2.9 Bảng ăn