Nghiên cứu công nghệ lập trình ứng dụng di động đa nền PhoneGap. Nghiên cứu công nghệ thành phần phân tán mới nhất của .NET là WCF (Windows Communication Foundation) service, xây dựng các ứng dụng hướng dịch vụ trong môi trường phân tán. Xây dựng ứng dụng di động đa nền tảng đặt tiệc nhà hàng.
Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN LỜI MỞ ĐẦU DANH MỤC TỪ VIẾT TẮT DANH MỤC BẢNG BIỂU DANH MỤC HÌNH VẼ 10 CHƯƠNG I 11 CƠ SỞ LÝ THUYẾT 11 1.1 TỔNG QUAN VỀ LẬP TRÌNH THIẾT BỊ DI ĐỘNG 11 1.2 LẬP TRÌNH ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG PHONEGAP .14 1.2.1 Giới thiệu framework PHONEGAP .14 1.2.1.1 PhoneGap gì? 14 1.2.1.2 Đôi nét lịch sử PhoneGap 15 1.2.1.3 Tại lại sử dụng PhoneGap 16 1.2.2 Cách thức hoạt động PhoneGap 17 1.2.3 Thiết lập cài đặt PHONEGAP cho Android project Eclipse 20 1.2.3.1 Yêu cầu cài đặt 20 1.2.3.2 Tạo chương trình .21 1.2.3.3 Chạy chương trình Android Emulator 26 1.3 GIỚI THIỆU KIỂU DỮ LIỆU JSON .27 1.4 LẬP TRÌNH WCF SERVICE .29 1.4.1 Windows Communication Foundation gì? 29 1.4.2 Tại lại sử dụng WCF 29 1.4.3 Kiến trúc WCF .30 CHƯƠNG II 34 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 34 2.1 PHÂN TÍCH YÊU CẦU 34 2.1.1 Quy trình nghiệp vụ .34 2.1.2 Đặt tả yêu cầu 34 2.1.3 Yêu cầu hệ thống 35 2.1.3.1 Yêu cầu chức 35 Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng 2.1.3.2 Yêu cầu tảng hệ thống 36 2.2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 36 2.2.1 Biểu đồ use case 36 2.2.1.1 Xác định tác nhân 36 2.2.1.2 Xác định use case 36 2.2.1.3 Biểu đồ use case 37 2.2.1.3.1 Biểu đồ use case tổng quan tác nhân khách hàng .37 2.2.1.3.2 Biểu đồ use case tổng quan tác nhân người quản lý 38 2.2.1.3.3 Biểu đồ use case đặt tiệc 39 2.2.1.3.4 Biểu đồ use case xử lý chọn 40 2.2.1.3.5 Biểu đồ use case quản lý 40 2.2.2 Biểu đồ .41 2.2.2.1 Biểu đồ đặt tiệc 41 2.2.2.2 Biểu đồ đăng ký .42 2.2.3 Biểu đồ hoạt động đặt tiệc .43 2.2.4 Biểu đồ lớp 44 2.2.5 Biểu đồ triển khai 45 2.2.6 Thiết kế sở liệu 47 2.2.6.1 Cấu trúc bảng liệu 47 2.2.6.2 Mơ hình quan hệ thực thể 50 CHƯƠNG III 51 CÀI ĐẶT ỨNG DỤNG 51 3.1 GIAO DIỆN ỨNG DỤNG .51 3.1.1 Danh sách loại .51 3.1.2 Danh sách .52 3.1.3 Món chi tiết 53 3.1.4 Danh sách chọn 54 3.2 MỘT SỐ ĐOẠN MÃ CHÍNH 55 3.2.1 Interface RestauranceBook .55 3.2.2 Hiển thị danh sách loại 56 3.2.3 Thêm .57 3.2.4 Đặt tiệc 57 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 60 DANH MỤC TÀI LIỆU THAM KHẢO 61 Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng LỜI CẢM ƠN Đầu tiên, tơi xin bày tỏ lịng biết ơn chân thành đến thầy cô Trường ĐẠI HỌC DUY TÂN hết lòng giảng dạy truyền đạt kiến thức q trình học tập Tơi xin chân thành cảm ơn Th.S Nguyễn Thị Minh Thi tận tình hướng dẫn tơi hồn thành đồ án tốt nghiệp Xin chân thành cảm ơn gia đình, người thân bạn bè động viên giúp đỡ sống học tập đóng góp ý kiến cho tơi suốt trình thực đề tài Cuối xin gửi đến tất nguời lời chúc sức khỏe, hạnh phúc thành đạt Trân trọng cảm ơn! Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng LỜI CAM ĐOAN Tôi xin cam đoan: Những nội dung báo cáo thực hướng dẫn trực tiếp ThS NGUYỄN THỊ MINH THI Mọi tham khảo dùng báo cáo trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian, địa điểm công bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, xin chịu hoàn toàn trách nhiệm Tác giả Phạm Văn Hùng Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng LỜI MỞ ĐẦU ĐẶT VẤN ĐỀ Hiện nay, khắp tỉnh thành nước, đặc biệt thành phố lớn, nhà hàng, quán ăn mọc lên ngày nhiều, mở rộng quy mô số lượng lẫn chất lượng, đáp ứng nhu cầu người dân Ngày có nhiều cá nhân, quan, doanh nghiệp có nhu cầu đặt tiệc dịp lễ, họp mặt, tiệc tùng Tuy nhiên họ khơng có thời gian để đến trực tiếp tìm hiểu thông tin nhà hàng cảnh quan, thực đơn, giá cả… Vì vậy, nhà hàng muốn cung cấp dịch vụ tốt cho khách hàng, đồng thời quảng bá hình ảnh nhà hàng đến khách hàng thành phố, khách du lịch khắp đất nước ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG QUẢN LÝ ĐẶT TIỆC NHÀ HÀNG giúp cho khách hàng đặt tiệc nhanh chóng, lúc, nơi với thiết bị di động, đồng thời giúp nhà hàng quảng bá rộng rãi hình ảnh Đặc biệt ứng dụng xây dựng tảng PhoneGap, framework di động đa tảng PhoneGap giúp cho người phát triển xây dựng ứng dụng lần chạy tảng như: IOS, Android, Windows Phone, Symbian, RIM , khách hàng sử dụng ứng dụng với nhiều chủng loại thiết bị di động khác MỤC TIÊU ĐỀ TÀI - Nghiên cứu cơng nghệ lập trình ứng dụng di động đa PhoneGap - Nghiên cứu công nghệ thành phần phân tán NET WCF (Windows Communication Foundation) service, xây dựng ứng dụng hướng dịch vụ môi trường phân tán - Xây dựng ứng dụng di động đa tảng đặt tiệc nhà hàng o Quảng bá hình ảnh doanh nghiệp o Giúp khách hàng tìm hiểu thơng tin nhà hàng ăn, giá o Khách hàng đặt tiệc nơi thơng qua thiết bị di động Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng o Giúp việc quản lý đặt tiệc nhà hàng thuận tiện, nhanh chóng, xác Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN - Nghiên cứu công nghệ lập trình ứng dụng di động đa tảng PhoneGap, xây dựng ứng dụng di động chạy nhiều hệ điều hành nhiều chủng loại thiết bị di động - Nghiên cứu công nghệ thành phần phân tán WCF Service, cung cấp chức truy cập sở liệu từ xa server - Từ xây dựng ứng dụng đặt tiệc nhà hàng thông qua thiết bị di động PHẠM VI NGHIÊN CỨU - Nghiên cứu cơng nghệ lập trình ứng dụng di động đa tảng PhoneGap - Nghiên cứu công nghệ thành phần phân tán WCF Service - Xây dựng ứng dụng di động đa tảng đặt tiệc nhà hàng - Và dịch vụ phân tán WCF Service server gồm chức sau: o Tìm xem danh sách loại o Tìm xem danh sách o Đặt tiệc o Xem danh sách đặt o Cập nhật danh sách đặt o Đăng nhập thơng tin khách hàng o Đăng ký thông tin khách hàng PHƯƠNG PHÁP NGHIÊN CỨU - Tìm hiểu tài liệu Internet, phân tích, tổng hợp tài liệu - Kết hợp xây dựng ứng dụng thực tiễn Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng CÔNG NGHỆ VÀ MÔI TRƯỜNG PHÁT TRIỂN - Ứng dụng server: NET Framework, C#, WCF Service, MS SQL Server 2005, IDE Visual studio 2010 - Ứng dụng client: PhoneGap Framework, JQuery, JSON, IDE Eclipse BỐ CỤC BÁO CÁO Báo cáo gồm chương: Chương 1: CƠ SỞ LÝ THUYẾT Trình bày tổng quan lập trình thiết bị di động, lập trình ứng dụng di động đa tảng PhoneGap, giới thiệu kiểu đối tượng JSON lập trình dịch vụ phân tán WCF Service Chương 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG Trình bày phân tích u cầu, phân tích, thiết kế hệ thống theo UML gồm biểu đồ: use case, tuần tự, hoạt động, biểu đồ lớp, biểu đồ triển khai phân tích mơ hình quan hệ thực thể thiết kế sở liệu quan hệ Chương 3: CÀI ĐẶT ỨNG DỤNG Trình bày số giao diện số đoạn mã ứng dụng Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng DANH MỤC TỪ VIẾT TẮT STT Từ viết tắt ADT API CLR CPU CSS DOM HTML IDE JDE 10 JS 11 JSON 12 OS 13 RIM 14 SDK 15 SOAP 16 UML 17 WCF 18 XML Tiếng anh Android Development Tools Application Programming Interface Common Language Runtime Central Processing Unit Cascading Style Sheets Document Object Model HyperText Markup Language Integrated Development Environment Java Development Kit JavaScript JavaScript Object Notation Operating System Research In Motion Software Development Kit Simple Object Access Protocol Unified Modeling Language Windows Communication Foundation Extensible Markup Language Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng DANH MỤC BẢNG BIỂU STT Tên hình vẽ Bảng 1: Bảng Hang Bảng 2: Bảng LoaiHang Bảng 3: Bảng DonViTinh Bảng 4: Bảng PhieuDatTiec Bảng 5: Bảng PhieuDatTiecCT Bảng 6: Bảng KhachHang Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng DANH MỤC HÌNH VẼ STT Tên hình vẽ Hình 1.1: Sơ đồ tổng quan cách thức hoạt động PhoneGap Hình 1.2: So sánh ưu điểm việc sử dụng PhoneGap với Java Hình 1.3: Kiến trúc bên ứng dụng PhoneGap Hình 1.4: Cách thức ứng dụng PhoneGap tương tác với thiết bị Hình 1.5: Bảng hàm APIs hỗ trợ cho tảng PhoneGap Hình 1.6: Cách thiết lập thơng số để tạo Android Project Hình 1.7: Cách thêm thư viện cordova-1.9.0.jar vào project Hình 1.8: Cách chỉnh sửa bên file java Hình 1.9: Cấu trúc bên file AndroidManifest.xml 10 Hình 1.10: Hình chạy chương trình Android Emulator 11 Hình 1.11: Kiến trúc WCF 12 Hình 2.1: Use case tác nhân khách hàng 13 Hình 2.2: Use case tác nhân người quản lý 14 Hình 2.3: Biểu đồ use case đặt tiệc 15 Hình 2.4: Biểu đồ use case xử lý chọn 16 Hình 2.5: Biểu đồ use case quản lý 17 Hình 2.6: Biểu đồ chức đặt tiệc 18 Hình 2.7: Biểu đồ chức đăng ký 19 Hình 2.8: Biều đồ hoạt động chức đặt tiệc 20 Hình 2.9: Biểu đồ lớp 21 Hình 2.10: Biểu đồ triển khai 22 Hình 2.11: Mơ hình quan hệ liệu 23 Hình 3.1: Giao diện danh sách loại 24 Hình 3.2: Giao diện danh sách 25 Hình 3.3: Giao diện chi tiết 26 Hình 3.4: Giao diện đặt tiệc Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 10 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng 2.2.6 Thiết kế sở liệu 2.2.6.1 Cấu trúc bảng liệu - Bảng Hàng: o Bảng lưu trữ thông tin hàng o Trường khóa tự động tăng: IdHang o trường khóa ngoại: IdLoaiHang, IdDonViTinh STT Column Kiểu liệu Mô tả IdHang Int Mã hàng – Khóa TenHang Nvarchar(50) Tên hàng IdDonViTinh Int Mã đơn vị tính GiaBan Money Giá bán HinhAnh nvarchar(100) Hình ảnh IdLoaiHang Int Mã loại hàng GhiChu nvarchar(1000) Ghi IsDelete Bit Cờ xóa IsEnable Bit Cờ cho phép hiển thị Bảng 1: Bảng Hang - Bảng Loại Hàng: o Bảng lưu trữ thông tin loại hàng o Trường khóa tự động tăng: IdLoaiHang STT Column Kiểu liệu Mô tả Mã loại hàng – Khóa IdLoaiHang Int TenLoaiHang Nvarchar(50) Tên loại hàng GhiChu nvarchar(1000) Ghi IsDelete Bit Cờ xóa IsEnable Bit Cờ cho phép hiển thị Bảng 2: Bảng LoaiHang Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 47 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng - Bảng Đơn Vị Tính: o Bảng lưu trữ thơng tin đơn vị tính o Trường khóa tự động tăng: IdDonViTinh STT Column Kiểu liệu Mô tả Mã đơn vị tính – Khóa IdDonViTinh Int TenDonViTinh Nvarchar(50) Tên đơn vị tính GhiChu nvarchar(1000) Ghi IsDelete Bit Cờ hàng xóa IsEnable Bit Cờ cho phép hiển thị Bảng 3: Bảng DonViTinh - Bảng Phiếu Đặt Tiệc: o Bảng lưu trữ thơng tin phiếu đặt tiệc o Trường khóa tự động tăng: IdPhieuDatTiec o Trường khóa ngoại: IdKhachHang STT Column Kiểu liệu Mô tả Mã phiếu đặt tiệc – IdPhieuDatTiec Int IdKhachHang Int Mã khách hàng GioDat Int Giờ đặt NgayDat Datetime Ngày đặt SoNguoi Int Số người tham gia TongTien Money Tổng tiền đặt tiệc TinhTrang Bit Tình trạng phiếu đặt Khóa tiệc GhiChu nvarchar(1000) Ghi IsDelete Bit Cờ xóa NgayTao DateTime Ngày tạo phiếu Bảng 4: Bảng PhieuDatTiec Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 48 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng - Bảng Phiếu Đặt Tiệc Chi Tiết: o Bảng lưu trữ thông tin phiếu đặt tiệc chi tiết o Trường khóa chính: IdPhieuDatTiec, IdHang o Trường khóa ngoại: IdKhachHang STT Column Kiểu liệu Mô tả IdPhieuDatTiec Int Mã phiếu đặt tiệc IdHang Int Mã hàng SoLuong Int Số lượng DonGia Money Đơn giá ThanhTien Money Thành tiền GhiChu Nvarchar(1000) Ghi IsDelete Bit Cờ xóa Bảng 5: Bảng PhieuDatTiecCT - Bảng Khách hàng: o Bảng lưu trữ thông tin khách hàng o Trường khóa tự động tăng: IdKhachHang STT Column Kiểu liệu Mô tả IdKhachHang Int Mã khách hàng TenDangNhap Nvarchar(100) Tên đăng nhập MatKhau Nvarchar(100) Mật TenKhachHang Nvarchar(150) Tên khách hàng DiaChi Nvarchar(1000) Địa DienThoai Nvarchar(100) Số điện thoại Email Nvarchar(100) Địa Email GhiChu Nvarchar(1000) Ghi IsDelete Bit Cờ xóa 10 IsEnable Bit Cờ cho phép hiển thị Bảng 6: Bảng KhachHang Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 49 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng 2.2.6.2 Mơ hình quan hệ thực thể Hình 2.11: Mơ hình quan hệ thực thể Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 50 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng CHƯƠNG III CÀI ĐẶT ỨNG DỤNG 3.1 GIAO DIỆN ỨNG DỤNG 3.1.1 Danh sách loại Hình 3.1: Giao diện danh sách loại Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 51 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng 3.1.2 Danh sách Hình 3.2: Giao diện danh sách Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 52 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng 3.1.3 Món chi tiết Hình 3.3: Giao diện chi tiết Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 53 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng 3.1.4 Danh sách chọn Hình 3.4: Giao diện đặt tiệc Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 54 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng 3.2 MỘT SỐ ĐOẠN MÃ CHÍNH 3.2.1 Interface RestauranceBook using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.ServiceModel; using System.Text; using System.ServiceModel.Web; // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IRestaurantBook" in both code and config file together [ServiceContract] public interface IRestaurantBook { [OperationContract] [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetAllLoaiHang")] List GetAllLoaiHang(); [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetHangById")] Hang GetHangById(int IdHang); [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "GetAllHangByIdLoaiHang")] List GetAllHangByIdLoaiHang(int IdLoaiHang); [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "AddPhieuDatTiec")] PhieuDatTiec AddPhieuDatTiec(PhieuDatTiec PhieuDatTiec); Phạm Văn Hùng – Lớp: D17TPM – MSSV: 179122119 55 Ứng dụng di động đa tảng PhoneGap quản lý đặt tiệc nhà hàng [WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped, Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "AddPhieuDatTiecCT")] void AddPhieuDatTiecCT(List ListPhieuDatTiecCT); } 3.2.2 Hiển thị danh sách loại //Add mon into Array function addMon(IdHang){ var soluong = document.getElementById('SoLuong').value; var tenhang = document.getElementById('TenHang').value; var giaban = document.getElementById('GiaBan').value; var donvi = document.getElementById('TenDonViTinh').value; var mon = { "IdHang": IdHang, "TenHang": tenhang, "GiaBan": giaban, "DonVi": donvi, "SoLuong": soluong }; //If exist: Reset soluong if(DSMon !== undefined){ for(i=0; i