ỨNG DỤNG CHIA SẺ CÔNG THỨC NẤU ĂN YUMMY TRÊN IOS Niên khóa: 2011 – 2015 VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN ĐINH NGỌC LÊ QUÂN XÂY DỰNG ỨNG DỤNG CHIA SẺ CÔNG THỨC NẤU ĂN YUMMY TRÊN HỆ ĐIỀU HÀNH IOS Chuyên ngành: Công Nghệ Thông Tin ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Hà Nội – Năm 2016 VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN ĐINH NGỌC LÊ QUÂN XÂY DỰNG ỨNG DỤNG CHIA SẺ CÔNG THỨC NẤU ĂN YUMMY TRÊN HỆ ĐIỀU HÀNH IOS Chuyên ngành: Công Nghệ Thông Tin Giảng viên hướng dẫn: TS Nguyễn Đức Tuấn ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Hà Nội – Năm 2016 VIỆN ĐẠI HỌC MỞ HÀ NỘI CỘNG HÕA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự – Hạnh phúc - Hà Nội, ngày tháng năm 2016 NHIỆM VỤ CỦA ĐỒ ÁN TỐT NGHIỆP Họ tên: Đinh Ngọc Lê Quân Giới tính: Nam Ngày, tháng, năm sinh: 30/04/1993 Nơi sinh: Hà Nội Chuyên ngành: Mã SV: 11A100292 Công nghệ thông tin TÊN ĐỀ TÀI Xây dựng ứng dụng chia sẻ công thức nấu ăn YMMY hệ điều hành IOS NHIỆM VỤ VÀ NỘI DUNG Nghiên cứu, tìm hiểu hệ điều hành IOS Xây dựng ứng dụng chia sẻ công thức nấu ăn hệ điều hành IOS NGÀY GIAO NHIỆM VỤ:24/08/2016 NGÀY HOÀN THÀNH NHIỆM VỤ:20/11/2016 CÁN BỘ HƢỚNG DẪN: TS Nguyễn Đức Tuấn Nội dung đề cương Đồ án Hội đồng chuyên ngành thông qua Ngày CÁN BỘ HƢỚNG DẪN tháng năm 2016 KHOA CÔNG NGHỆ THÔNG TIN NHIỆM VỤ ĐƢỢC GIAO Đinh Ngọc Lê Quân - Khảo sát thực tế - Phân tích thiết kế hệ thống - Xây dựng ứng dụng phía Server - side - Nghiên cứu ngôn ngữ Objective-C - Xây dựng ứng dụng chạy thiết bị phía Client – side - Tổng hợp xây dựng báo cáo đồ án LỜI NÓI ĐẦU Lời em xin gửi đến thầy Nguyễn Đức Tuấn, người trực tiếp hướng dẫn em suốt trình thực đồ án Những nhận xét, đánh giá chia sẻ kinh nghiệm làm việc thầy thông tin vơ hữu ích cho việc hồn thành dự án em Em xin trân trọng cảm ơn thầy, chúc thầy gia đình ln ln mạnh khỏe đạt thành công sống Bên cạnh đó, em xin cảm ơn thầy thuộc hội đồng kiểm tra tiến độ chuyên môn đồ án tốt nghiệp lời khuyên, góp ý, đánh giá động viên thầy cô giúp em nhiều q trình hồn thành đồ án, giúp em thấy sai sót mắc phải Em xin chúc thầy gia đình mạnh khỏe, ln ln người lái ân cần dìu dắt hệ FITHOU trưởng thành Đinh Ngọc Lê Quân Hà Nội, tháng 11 năm 2016 MỤC LỤC Chƣơng KHẢO SÁT HỆ THỐNG 1.1 Khảo sát thực tế 1.2 Nhiệm vụ 1.3 Quy trình sử dụng Chƣơng PHÂN TÍCH HỆ THỐNG VỀ CHỨC NĂNG 2.1 Sơ đồ phân rã chức 2.1.1 Xác định chức 2.1.2 Gom nhóm chức 2.1.3 Sơ đồ phân rã chức hệ thống 2.2 Sơ đồ luồng liệu 2.2.1 Ký hiệu sử dụng 2.2.2 DFD mức khung cảnh 2.2.3 DFD mức đỉnh 10 2.2.4 DFD mức đỉnh 10 2.3 Đặc tả chức chi tiết 13 Chƣơng PHÂN TÍCH HỆ THỐNG VỀ DỮ LIỆU 25 3.1 ER mở rộng 25 3.1.1 Xác định kiểu thực thể, kiểu thuộc tính 25 3.1.2 Xác định kiểu liên kết 27 3.1.3 Mơ hình ER mở rộng 28 3.2 Chuẩn hóa liệu 29 3.2.1 Chuyển đổi từ ER mở rộng ER kinh điển 29 3.2.2 Chuyển đổi từ ER kinh điển ER hạn chế 34 3.2.3 Chuyển đổi từ ER hạn chế mơ hình quan hệ 38 3.3 Đặc tả bảng liệu mơ hình quan hệ 41 3.4 Hoàn thiện q trình phân tích 48 Chƣơng THIẾT KẾ HỆ THỐNG 52 4.1 Thiết kế tổng thể 52 4.1.1 Phân định công việc người máy 52 4.2 Thiết kế kiểm soát 54 4.2.1 Xác định nhóm người dùng 54 4.2.2 Phân định quyền hạn nhóm người dùng 54 4.3 Thiết kế CSDL vật lý 57 4.3.1 Mơ hình liệu hệ thống 57 4.3.2 Đặc tả bảng liệu 57 4.4 Thiết kế kiến trúc chương trình giao diện 69 4.4.1 Thiết kế kiến trúc 69 4.4.2 Thiết kế hình giao diện 70 Chƣơng TRIỂN KHAI 87 5.1 Cơ sở lý thuyết 87 5.1.1 JSON ứng dụng 87 5.2 Lập trình ứng dụng xử lý phía Server 91 5.2.1 Cơ sở liệu hệ thống 91 5.2.2 Lập trình Website hệ thống 91 5.3 Lập trình ứng dụng xử lý phía thiết bị 92 Chƣơng TỔNG KẾT VÀ ĐÁNH GIÁ 97 6.1 Cấu hình yêu cầu 97 6.2 Kết đạt 97 6.3 Các mặt hạn chế 97 TÀI LIỆU THAM KHẢO 99 TÓM TẮT ĐỒ ÁN - Họ tên: Đinh Ngọc Lê Quân - Chuyên ngành: Công nghệ thông tin Khóa: 11 - Cán hướng dẫn: TS.Nguyễn Đức Tuấn - Tên đề tài: Xây dựng ứng dụng chia sẻ công thức nấu ăn YUMMY hệ điều hành iOS - Tóm tắt: Thực đồ án lần giúp em có thêm kiến thức lập trình iOS, sử dụng JSON để thao tác với Web server sử dụng ngơn ngữ lập trình objective-C việc viết ứng dụng cho thiết bị iDevice Qua giúp em tìm hiểu thêm nhiều kiến thức việc xây dựng triển khai ứng dụng iOS thực tế DANH MỤC CÁC CHỮ VIẾT TẮT STT Tên viết tắt Tên đầy đủ Bussiness Function Dịch Tiếng Việt Sơ đồ phân rã chức BFD C Char CSDL Cơ sở liệu D Date Ngày tháng DFD Data Flow Diagram Sơ đồ luồng liệu ER Entity Relationship Thực thể quan hệ FK Foreign Key Khóa ngoại MT Máy tính N Number Số 10 PK Primary Key Khóa 11 TC Thủ công Diagram Ký tự DANH MỤC BẢNG BIỂU Bảng 2.1 Đặc tả đăng ký tài khoản 13 Bảng 2.2 Đặc tả đăng nhập tài khoản 14 Bảng 2.3 Đặc tả xác thực tài khoản 14 Bảng 2.4 Đặc tả thay đổi thông tin cá nhân 15 Bảng 2.5 Đặc tả đổi mật 15 Bảng 2.6 Đặc tả công thức tạo 16 Bảng 2.7 Đặc tả công thức đánh dấu 16 Bảng 2.8 Đặc tả follow người dùng 17 Bảng 2.9 Đặc tả tạo công thức 17 Bảng 2.10 Đặc tả tạo bước công thức 18 Bảng 2.11 Đặc tả nhận xét (comment) với công thức 18 Bảng 2.12 Đặc tả yêu thích (like) với công thức 19 Bảng 2.13 Đặc tả đánh dấu (Bookmark) với công thức 19 Bảng 2.14 Đặc tả cập nhật công thức` 20 Bảng 2.15 Đặc tả xóa cơng thức 20 Bảng 2.16 Đặc tả cập nhật bước làm 21 Bảng 2.17 Đặc tả xóa bước làm 21 Bảng 2.18 Đặc tả sửa nhận xét 22 Bảng 2.19 Đặc tả xóa nhận xét 22 Bảng 2.20 Đặc tả bỏ yêu thích 23 Bảng 2.21 Đặc tả bỏ đánh dấu 23 Bảng 2.22 Đặc tả tìm kiếm cơng thức theo tên 24 Bảng 2.23 Đặc tả tìm kiếm cơng thức theo danh mục 24 Bảng 2.24 Đặc tả thông báo 24 Bảng 3.1 Các kiểu thực thể hệ thống 25 85 Thiết kế giao diện view thơng tin người dùng Hình 4.20 Giao diện thông tin người dùng ứng dụng 86 - Tên giao diện: thông tin người dùng - Người sử dụng: Người dùng ứng dụng - Nhiệm vụ: Hiển thị view thông tin người dùng - Mẫu thiết kế: Hình 4.22 - Tiền điều kiện: Đã đăng nhập thành cơng - Hậu điều kiện: Khơng có - Biểu đồ trình tự hoạt động: BĐ Hiện view thơng tin người dùng Lựa chọ công thức tạo Lựa chọn xem cơng thức u thích Lựa chọn xem cơng thức đánh dấu Lựa chọn xem người theo dõi Lựa chọn cài đặt Chuyển sang view chi tiết công thức Chuyển sang view chi tiết công thức Chuyển sang view chi tiết công thức Chuyển sang view chi tiết công thức Chuyển sang view chi tiết công thức KT KT KT KT KT Hình 4.21 Biểu đồ trình tự hoạt đơng view thơng tin người dùng 87 Chƣơng TRIỂN KHAI 5.1 Cơ sở lý thuyết 5.1.1 JSON ứng dụng JSON (JavaScrip Object Notation) chuẩn định dạng liệu JSON sử dụng chủ yếu để truyền tải liệu máy chủ ứng dụng web, thay cho XML So sánh với XML, JSON XML văn túy, có tính chất tự mơ tả mình, có cấu trúc phân cấp, có thứ bậc, truy xuất HttpRequest JSON cho phép lưu trữ liệu dạng chữ số JSON hỗ trợ trực tiếp JavaScript Cấu trúc liệu JSON dựa cặp Key/Value Key chuỗi, Value chuỗi, số, giá trị boolean object Một JSON Object bao gồm cặp Key/Value (trong objective c, cặp Key/Value có loại liệu lưu trữ riêng Dictionary), bắt đầu dấu “{“ kết thúc dấu “}” Một mảng giá trị nằm cặp dấu “[“ “]”, ngăn cách dấu “,” File JSON có dạng “.json” JSON sử dụng rộng rãi tính tương thích tốt với nhiều ngơn ngữ lập trình Trong phạm vi đề tài sử dụng đối tượng JSON để kết nối với server thông qua PHP Client iOS 88 Hình 5.1 Mơ hình client - server - Client máy khách, trường hợp thiết bị di động chạy hệ điều hành iOS - Server quản lý sở liệu, có giao thức kết nối - Giao thức trung gian cầu nối server client, có nhiệm vụ nhận yêu cầu trả kết Cơ chế hoạt động Về phía client thiết bị iOS, để lập trình thao tác với đối tượng JSON cần sử dụng đối tượng:[1] - NSURL: xử lý chuỗi ký tự đường dẫn liên kết - NSURLRequest: xử lý tập chuỗi ký tự chứa đường dẫn liên kết - NSURLSession: xử lý phiên làm việc với đối tượng NSURLRequest 89 - NSURLSessionTask: xử lý tác vụ lấy liệu, hỗ trợ cho đối tượng NSURLSession Cơng việc phía client gửi liệu lên server, cần chuẩn bị liệu đầu vào, chuyển liệu từ dạng đối tượng Objective C thành dạng JSON Do JSON thường sử dụng mảng cặp Key/Value nên phía client quản lý liệu bằng: - NSArray/ NSMutableArray : đối tượng mảng liệu[2] - NSDictionary/ NSMutableDictionary: đối tượng mảng liệu với phần tử chứa Khóa Giá trị (Key/Value)[3] Về phía server, việc nhận trả lời yêu cầu PHP, ASP.NET xử lý tùy hệ thống Khi client nhận trả lời, công việc phải làm dịch ngược chuỗi JSON thành liệu ban đầu Về phía server, việc nhận trả lời yêu cầu PHP, ASP.NET xử lý tùy hệ thống Khi client nhận trả lời, công việc phải làm dịch ngược chuỗi JSON thành liệu ban đầu Giả sử chuỗi JSON trả danh bạ người dùng có dạng: { “device_id”: “75”, “list”: [ { “contact_id”: “1”, “name”: “Đinh Ngọc Lê Quân”, “number”: “0948567809” }, { “contact_id”: “2”, “name”: “Nguyễn Quang Trung”, “number”: “0948051993” }, 90 … ] } Hàm đọc chuỗi JSON trả list chứa liệu ban đầu, thực gửi yêu cầu nhận chuỗi JSON sau dịch sang liệu Dictionary Array Đó kết quả, thơng báo lỗi : NSURLSessionConfiguration *defaultConfigObject = [NSURLSessionConfiguration defaultSessionConfiguration]; NSURLSession *defaultSession = [NSURLSession sessionWithConfiguration:defaultConfigObject delegate:nil delegateQueue:[NSOperationQueue mainQueue]]; NSURL *url = [NSURL URLWithString:@"url webservice"]; NSMutableURLRequest *urlRequest = [NSMutableURLRequest requestWithURL:url]; NSURLSessionDataTask *dataTask = [defaultSession dataTaskWithRequest:urlRequest completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) { if (error == nil) { NSDictionary *jsonData = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error]; NSArray *rsArray = [jsonData objectForKey:@"results"]; // câu lệnh xử lý liệu JSON trả } }]; [dataTask resume]; 91 5.2 Lập trình ứng dụng xử lý phía Server 5.2.1 Cơ sở liệu hệ thống Hệ quản trị sử dụng: MySQL Hình 5.2 CSDL server 5.2.2 Lập trình Website hệ thống Ngơn ngữ lập trình sử dụng: PHP … Thư mục Avatar Thư mục Congthuc Các file webservice *.php Hình 5.3 Cấu trúc phân bố thư mục gốc Website Trong đó: - Thư mục Avatar chứa tập tin ảnh đại diện gửi lên từ người dùng 92 - Thư mục Congthuc chứa tập tin ảnh công thức, bước làm tải lên từ người dùng tập tin ảnh công thức, loại công thức - Các file *.php webservice giúp client tương tác với hệ thống 5.3 Lập trình ứng dụng xử lý phía thiết bị Hình 5.4 Cấu trúc mã lệnh chương trình Trong đó: - File Main.storyboard:có cấu trúc dựa XML, tập hợp file XIB (hiển thị giao diện hình) , chịu trách nhiệm xử lý hiển thị tập 93 hợp hình - view controller[4] hỗ trợ người dùng việc dựng giao diện ứng dụng - Assets.xcassets: tương nhự thư mục chứa tập tin ảnh để sử dụng giao diện (như hình nút bấm, label…) để xử lý với nhiều kích thước hình, ứng dụng cần có kích cỡ u cầu tập tin ảnh Assets.xcassets hỗ trợ nhóm chúng lại thành file - LaunchScreen.storyboard: tương tự Main.storyboard, sử dụng cho hình lúc tải ứng dụng khởi chạy - AppDelegate.h/Appdelegate.m : tập tin header implement AppDelegate thực thi chế ủy chạy ứng dụng Có thể nói lý tập tin chứa hàm main() chứa câu lệnh thực thi chế ủy quyền - Info.plist: tập tin dạng Dictionary để thiết lập thuộc tính ứng dụng - Nhóm Sign up: chứa SignUpViewController – xử lý phương thức hình đăng ký - Nhóm Login: chứa ViewController – xử lý phương thức hình đăng nhập - Nhóm MainController: chứa view controller hình khác 94 Hình 5.5 Cấu trúc hình (view controller) 95 Hình 5.6 Cấu trúc nhóm MainController Trong đó: - Các nhóm outlet/customizeOutlet: chứa class đối tượng giao diện tab bar, navigation bar, collectionview cell, table view cell 96 - Nhóm MainScreen: Chứa MainViewController: xử lý phương thức hình trang - Nhóm Search: chứa SearchViewController SearchResultViewController – xử lý phương thức hình tìm kiếm hình kết tìm kiếm trả - Nhóm Create Recipe: chứa CreateViewController – xử lý phương thức hình tạo cơng thức - Nhóm Notification: chứa notificationViewController – xử lý phương thức hình thơng báo - Nhóm UserScreen: chứa userViewController – xử lý phương thức hình thông tin người dùng 97 Chƣơng TỔNG KẾT VÀ ĐÁNH GIÁ 6.1 Cấu hình yêu cầu - Thiết bị sử dụng hệ điều hành iOS 10 trở lên - Yêu cầu có kết nối Internet ổn định 6.2 Kết đạt đƣợc - Nhìn chung ứng dụng đáp ứng nhiệm vụ đề q trình phân tích - Các chức ứng dụng điều hướng hợp lý, dễ sử dụng vài thao tác - Có thể triển khai ứng dụng mà khơng cần tốn chi phí 6.3 Các mặt hạn chế - Các chức điều khiển thực điện thoại đặt chế độ Airplane khơng có kết nối mạng - Đòi hỏi phải có kết nối Internet mạnh để thực thi công việc - Chưa sử dụng NSNotificationCenter[5] việc thông báo kiện xảy cho người dùng - Khi người dùng upload ảnh chọn từ kho ảnh 6.4 Hƣớng phát triển tƣơng lai - Cải tiến giao diện người dùng hiệu sử dụng, cho phép người dùng lấy ảnh thơng qua camera máy thay lựa chọn ảnh chụp library - Phát triển thêm tính giúp bảo mật, mã hóa liệu lưu trữ điện thoại 98 - Sử dụng CSDL nội lưu trữ tạm thời liệu tải từ để tăng tốc độ thực thi ứng dụng - Sử dụng dịch vụ APNs Firebase kết hợp với NSNotificationCenter để thông báo cho người dùng ứng dụng chạy ngầm - Sử dụng NSUserDefaults[6] để người dùng đăng nhập lại mở ứng dụng 99 TÀI LIỆU THAM KHẢO Tiếng Anh [1] Christian Keur, Aaron Hillegass & Joe Conway.“Web Services and UIWebview” in iOS Programming: The big nerd ranch guide, 4th Edition, 2014, pp 403 – 417 [2] Aaron Hillegass and MickeyWard.“NSArray” in Objective – C Programming: The big nerd ranch guide, 2nd Edition, 2014, pp 119 – 123 [3] Aaron Hillegass and MickeyWard “Collection Classes” in Objective – C Programming: The big nerd ranch guide, 2nd Edition, 2014, pp 177 – 187 [4] Christian Keur, Aaron Hillegass & Joe Conway, “View Controllers” in iOS Programming: The big nerd ranch guide, 4th Edition, 2014, pp 120 – 122 [5] Christian Keur, Aaron Hillegass & Joe Conway “Saving, Loading, and Application States” in iOS Programming: The big nerd ranch guide, 4th Edition, 2014, pp 345 – 365 [6] Christian Keur, Aaron Hillegass & Joe Conway, “NSUserDefaults” in iOS Programming: The big nerd ranch guide, 4th Edition, 2014, pp 483 – 489 [7] Robin Nixon, Learning PHP, MySQL & JavaScript: With jQuery, CS & HTML5, 2009 ... 11A100292 Công nghệ thông tin TÊN ĐỀ TÀI Xây dựng ứng dụng chia sẻ công thức nấu ăn YMMY hệ điều hành IOS NHIỆM VỤ VÀ NỘI DUNG Nghiên cứu, tìm hiểu hệ điều hành IOS Xây dựng ứng dụng chia sẻ công thức. .. lập trình ứng dụng di động ngôn ngữ Objective-C, em lựa chọn tảng ứng dụng hệ điều hành iOS Vì vậy, em định chọn đề tài Xây dựng ứng dụng chia sẻ công thức nấu ăn YUMMY hệ điều hành IOS Theo khảo...VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN ĐINH NGỌC LÊ QUÂN XÂY DỰNG ỨNG DỤNG CHIA SẺ CÔNG THỨC NẤU ĂN YUMMY TRÊN HỆ ĐIỀU HÀNH IOS Chuyên ngành: Công Nghệ Thông Tin Giảng viên hướng dẫn: