Framework phát triển ứng dụng di động đa nền tảng

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN ĐÀO TẠO SAU ĐẠI HỌC ============ FRAMEWORK PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG Giảng Viên : TS Nguyễn Thanh Hùng Học viên : Nguyễn Tuấn Anh Lớp : CNTT1 2013B Hà Nội – 2015 LỜI CAM ĐOAN Tôi xin cam đoan luận văn thực trình nghiên cứu khoa học thân đúc kết từ trình nghiên cứu từ việc tập hợp nguồn tài liệu, kiến thức học đến việc tự thu thập thông tin liên quan liên hệ thực tế đơn vị công tác Mọi giúp đỡ cho việc thực luận văn tác giả cảm ơn thông tin trích dẫn luận văn rõ nguồn gốc Tác giả Nguyễn Tuấn Anh LỜI CẢM ƠN Luận văn hoàn thành trường Đại học bách khoa Hà Nội, kết khố cao học CH2013B Đầu tiên cho phép tơi chân thành cám ơn tới Thầy giáo TS Nguyễn Thanh Hùng trực tiếp hướng dẫn sửa chữa suốt thời gian nghiên cứu hồn thành luận văn Tơi xin bày tỏ lòng biết ơn sâu sắc tới thầy cô giáo Viện đào tạo sau đại học tham gia giảng dạy lớp Cao học ngành công nghệ thơng tin khóa 2013B Tơi xin cảm ơn gia đình, đồng nghiệp, phịng ban chức bạn bè giúp đỡ động viên suốt thời gian học tập hoàn thiện luận văn Xin chân thành cảm ơn! Người thực Nguyễn Tuấn Anh MỤC LỤC LỜI CAM ĐOAN LỜI CẢM ƠN MỤC LỤC DANH SÁCH HÌNH VẼ DANH SÁCH BẢNG TÓM TẮT 10 CHƯƠNG MỞ ĐẦU 11 1.1 Giới thiệu 11 1.2 Những thách thức trước phát triển ứng dụng đa tảng đời 14 1.3 Kết luận 17 CHƯƠNG CƠ SỞ LÝ THUYẾT 18 2.1 Phân loại ứng dụng di động 18 2.2 So sánh Framework phát triển di động đa tảng 19 2.2.1 Xamarin Tools 20 2.2.2 Appcelerator Titanium 21 2.2.3 Phonegap 22 2.2 Giới thiệu Framework mã nguồn mở Phonegap 23 2.2.1 Phonegap gì? 23 2.1.3 Đôi nét lịch sử Phonegap 23 2.1.4 Tại lại sử dụng Phonegap? 24 2.1.5 Cách thức Phonegap hoạt động 25 2.1.6 Các hàm APIs mà Phonegap hỗ trợ tảng mobile 28 CHƯƠNG XÂY DỰNG CHƯƠNG TRÌNH ỨNG DỤNG 30 3.1 Mô hình phát triển ứng dụng đa tảng 30 3.2 Môi trường quy trình phát triển 31 3.2.1 Môi trường phát triển 31 3.2.2 Quy trình phát triển 31 3.3 Phân tích thiết kế xây dựng chương trình ứng dụng 34 3.3.1 Giới thiệu chung chương trình ứng dụng 34 3.3.2 Phân tích chức chương trình 36 3.3.2.1 Biểu đồ phân rã chức 36 3.3.2.2 Đặc tả chức chương trình 37 3.3.3 Phân tích chương trình ứng dụng biểu đồ Use Case 41 3.3.3.1 Biểu đồ phân rã use case thể chức Đăng nhập 42 3.3.3.2 Biểu đồ phân rã use case thể chức Đăng xuất 42 3.3.3.3 Biểu đồ phân rã use case thể chức Quản lý bảng tin 43 3.3.3.4 Biểu đồ phân rã use case thể chức Quản lý bảng lương 43 3.3.3.5 Biểu đồ phân rã use case thể chức Tìm kiếm cán 44 3.3.3.6 Biểu đồ phân rã use case thể chức Xem thông tin cán 44 3.3.3.7 Biểu đồ phân rã use case thể chức Liên lạc nhanh 45 3.4 Thiết kế sở liệu 45 3.4.1 Thiết kế sở liệu bảng Account 46 3.4.2 Thiết kế sở liệu bảng Employee 46 3.4.3 Thiết kế sở liệu bảng Employee_News 47 3.4.4 Thiết kế sở liệu bảng News 47 3.4.5 Thiết kế sở liệu bảng Salary 47 3.4.6 Thiết kế sở liệu bảng Cat_Salary 48 3.5 Thiết kế giao diện 48 3.5.1 Màn hình Đăng nhập 49 3.5.2 Màn hình Trang chủ 49 3.5.3 Màn hình Danh sách tin tức 50 3.5.4 Màn hình Danh sách lương 50 3.5.5 Màn hình danh sách cán 51 3.5.6 Màn hình Xem thông tin cán 52 3.6 Đánh giá mức độ phù hợp sử dụng Phonegap để phát triển ứng dụng 53 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 55 4.1 Kết quả, đánh giá chương trình phần mềm 55 4.2 Kết luận hướng phát triển 55 TÀI LIỆU THAM KHẢO 57 DANH SÁCH HÌNH VẼ Hình I - Tổng quan Mobile Application Hình I - Sự khách phương thức giao tiếp Hình I - Sự phân mảnh phát triển song song với số lượng hệ điều hành Hình I - Sự gia tăng nguồn nhân lực cho tảng phát triển Hình I - Phát triển ứng dụng riêng biệt tảng Hình II - Kiến trúc bên ứng dụng Phonegap Hình II - Cách thức ứng dụng Phonegap tương tác với thiết bị Hình III - Tổng quan ứng dụng Hình III - Quy trình phát triển phần mềm đa tảng sử dụng Phonegap Hình III - Biểu đồ phân rã chức Hình III - Biểu đồ Use Case tổng quát Hình III - Biểu đồ Use case chức Đăng nhập Hình III - Biểu dồ Use case chức Đăng xuất Hình III - Biểu đồ Use case chức Quản lý bảng tin Hình III - Biểu đồ Use case chức Quản lý bảng lương Hình III - Biểu đồ Use case chức Tìm kiếm cán Hình III - 10 Biểu đồ Use case chức Xem thơng tin cán Hình III - 11 Biểu đồ Use case chức Liên lạc nhanh Hình III - 12 Cơ sở liệu Hình III - 13 Màn hình chức Đăng nhập Hình III - 14 Màn hình Trang chủ Hình III - 15 Màn hình Danh sách tin tức Hình III - 16 Màn hình Chi tiết tin tức Hình III - 17 Màn hình Danh sách lương Hình III - 18 Màn hìn chi tiết lương Hình III - 19 Màn hình Danh sách cán Hình III - 20 Màn hình thơng tin cán Hình III - 21 Màn hình danh sách cán quyền DANH SÁCH BẢNG Bảng Phân mảnh theo tính Bảng Bảng so sánh dạng ứng dụng Mobile Bảng Bảng so sánh dạng ứng dụng Mobile Bảng Bảng hàm APIs hỗ trợ cho tảng Phonegap Bảng Bảng đặc tả chức chương trình Bảng Thiết kế sở liệu bảng Account Bảng Thiết kế sở liệu bảng Employee Bảng Thiết kế sở liệu bảng Employee_News Bảng Thiết kế sở liệu bảng News Bảng 10 Thiết kế sở liệu bảng Salary Bảng 11 Thiết kế sở liệu bảng Cat_Salary TĨM TẮT Trong thời kì mà cơng nghệ số phát triển với tốc độ chóng mặt nay, điện thoại thơng minh hay cịn gọi Smartphone thực mang đến cuốc cách mạng cho thiết bị di động Sự tiến vượt bậc cơng nghệ làm thay đổi hồn tồn thói quen hành vi người Thiết bị di động trở thành phương tiện giao tiếp làm việc chủ yếu cong người Và phần cốt lõi để tạo sức hấp dẫn từ Smartphone hệ điều hành ứng dụng mà chúng chạy Hiện tại, ứng dụng dành cho thiết bị di động bị phân mảnh lớn hãng công nghệ lớn cạnh tranh, ganh đua tạo tảng hệ điều hành di động riêng mình: IOS, Android, Window Phone, BlackBerry, webOS,… Vì vậy, framework ngơn ngữ lập trình đời với mục đích “viết lần, chạy khắp nơi – tương thích với hầu hết tảng hệ điều hành di động”, Phonegap framework phổ biến đáp ứng mục đích tính đến thời điểm Trong luận văn này, tập trung chủ yếu vào việc tìm hiểu Phonegap, xây dựng chương trình phần mềm ứng dụng sử dụng Phonegap chạy nhiều tảng Smartphone khác 10 3.3.3.3 Biểu đồ phân rã use case thể chức Quản lý bảng tin Đăng nhập Danh sách tin «extends» Quản lý bảng tin * «extends» * Xem chi tiết tin Người dùng Hình III - Biểu đồ Use case chức Quản lý bảng tin 3.3.3.4 Biểu đồ phân rã use case thể chức Quản lý bảng lương Đăng nhập Danh sách lương «extends» Quản lý bảng lương * Người dùng * «extends» Xem chi tiết lương tháng Hình III - Biểu đồ Use case chức Quản lý bảng lương 43 3.3.3.5 Biểu đồ phân rã use case thể chức Tìm kiếm cán Nhập liệu tìm kiếm Đăng nhập Danh sách cán «extends» «extends» Tìm kiếm Xem chi tiết cán Người dùng Hình III - Biểu đồ Use case chức Tìm kiếm cán 3.3.3.6 Biểu đồ phân rã use case thể chức Xem thơng tin cán Đăng nhập Nhập liệu tìm kiếm Xem thông tin cán Danh sách cán Người dùng Liên lạc nhanh Xem thông tin người quản lý Hình III - 10 Biểu đồ Use case chức Xem thông tin cán 44 Xem danh sách cán quyền 3.3.3.7 Biểu đồ phân rã use case thể chức Liên lạc nhanh Đăng nhập Xem thông tin cán Người dùng Gọi điện thoại di động Gửi Email Gửi tin nhắn sms Gọi điện thoại bàn Hình III - 11 Biểu đồ Use case chức Liên lạc nhanh 3.4 Thiết kế sở liệu Account PK Account_id FK1 Employee_id Username Password Employee PK Employee_Id firstName lastName managerId title department officePhone cellPhone email city picture Employee_News PK,FK1 PK,FK2 employee_id news_id News PK news_id title content publish_date Cat_Salary Salary PK Id FK1 Employee_id Month Salary_id Amount Type FK2 Hình III - 12 Cơ sở liệu 45 PK salary_id salary_name 3.4.1 Thiết kế sở liệu bảng Account STT Tên trường Kiểu liệu Thuộc tính khóa Ghi Account_Id Number(10) Primary Key Id bảng Employee_Id Number(10) Foreign Key Id Cán Username Varchar(100) Tên đăng nhập Password Varchar(100) Mật Bảng Thiết kế sở liệu bảng Account 3.4.2 Thiết kế sở liệu bảng Employee STT Tên trường Kiểu liệu Thuộc tính khóa Ghi Employee_Id Number(10) Primary Key Id bảng FirstName Varchar(50) Họ Tên đệm LastName Varchar(50) Tên cán ManagerId Number(10) Title Varchar(100) Chức vụ Department Varchar(100) Tên phòng ban OfficePhone Varchar(20) Số điện thoại bàn CellPhone Varchar(20) Số điện thoại di động Email Varchar(20) Địa Email 10 City Varchar(100) Nơi sống 11 Picture Varchar(100) Đường dẫn ảnh đại diện Foreign Key Id người quản lý Bảng Thiết kế sở liệu bảng Employee 46 3.4.3 Thiết kế sở liệu bảng Employee_News STT Tên trường Kiểu liệu Thuộc tính khóa Ghi Employee_Id Number(10) Primary Key, Foreign Key Id cán News_Id Number(10) Primary Key, Foreign Key Id tin Bảng Thiết kế sở liệu bảng Employee_News 3.4.4 Thiết kế sở liệu bảng News STT Tên trường Kiểu liệu Thuộc tính khóa Ghi News _Id Number(10) Primary Key Id bảng Title Varchar(200) Tiêu đề tin Content Varchar(4000) Nội dung tin Publish_Date Date Ngày gửi Bảng Thiết kế sở liệu bảng News 3.4.5 Thiết kế sở liệu bảng Salary STT Tên trường Kiểu liệu Thuộc tính khóa Ghi Id Number(10) Primary Key Id bảng Employee_Id Number(10) Foreign Key Id cán Month Date Salary_Id Number(10) 47 Tháng nhận lương Foreign Key Loại thu nhập Amount Number(10) Số tiền Type Number(1) Loại thu nhập: 0-> Thu, 1-> Chi Bảng 10 Thiết kế sở liệu bảng Salary 3.4.6 Thiết kế sở liệu bảng Cat_Salary STT Tên trường Kiểu liệu Thuộc tính khóa Ghi Salary_Id Number(10) Primary Key Id bảng Salary_Name Varchar(100) Tên loại lương Bảng 11 Thiết kế sở liệu bảng Cat_Salary 3.5 Thiết kế giao diện Dựa phân tích thiết kế bên chương trình phần mềm cần có hình hiển thị chức sau: 48 - Màn hình Đăng nhập - Màn hình Trang chủ - Màn hình Danh sách tin tức - Màn hình Xem chi tiết tin tức - Màn hình Danh sách lương - Màn hình Xem chi tiết lương - Màn hình danh sách cán - Màn hình Xem thơng tin cán - Màn hình Danh sách cán quyền 3.5.1 Màn hình Đăng nhập Khi người dùng mở chương trình lên, chương trình kiểm tra người dùng chưa đăng nhập từ trước đó, hình Đăng nhập lên Hình III - 13 Màn hình chức Đăng nhập 3.5.2 Màn hình Trang chủ Sau Đăng nhập thành cơng, chương trình chuyển sang hình Trang chủ, người dùng Xem bảng tin, Xem bảng lương, Tra cứu danh sách cán thực Đăng xuất khỏi chương trình Hình III - 14 Màn hình Trang chủ 49 3.5.3 Màn hình Danh sách tin tức Hình III - 15 Màn hình Danh sách tin tức Hình III - 16 Màn hình Chi tiết tin tức Tại hình Danh sách tin tức, người dùng nhìn thấy tin hệ thống gửi cho mình, người dùng xem chi tiết tin tức cách chọn tin muốn xem 3.5.4 Màn hình Danh sách lương Tại hình Danh sách lương, người dùng nhìn thấy danh sách lương chia theo tháng, người dùng xem chi lương tháng cụ thể cách chọn tháng 50 Hình III - 17 Màn hình Danh sách lương Hình III - 18 Màn hìn chi tiết lương 3.5.5 Màn hình danh sách cán Màn hình thị Danh sách cán công ty, người dùng nhập ký tự vào tìm kiếm, hình hiển thị danh sách cán có liên quan đến từ khóa tìm kiếm 51 Hình III - 19 Màn hình Danh sách cán 3.5.6 Màn hình Xem thơng tin cán Như thấy hình trên, ta biết thơng tin bản: Họ tên, vị trí làm việc cơng ty ảnh nhận diện, ngồi biết số cán mà người quản lý trực tiếp (chính số nhỏ bên phải) Nếu muốn biết thông tin cán nào, người dùng thao tác chạm vào cán đó, hình thơng tin chi tiết cán hiển thị 52 Hình III - 20 Màn hình thơng tin cán Hình III - 21 Màn hình danh sách cán quyền Tùy vào vị trí làm việc cơng ty mà cán có thơng tin khác đơi chút Như trên, Lê Thị Hồng Ái Trưởng ban nên có thơng tin Người quản lý Danh sách cán quyền Cịn nhân viên cấp thấp khơng có lựa chọn 3.6 Đánh giá mức độ phù hợp sử dụng Phonegap để phát triển ứng dụng Bảo Việt nói riêng doanh nghiệp nói chung có số lượng người dùng phong phú việc yêu cầu nhiều tảng điều tất yếu Trong thời gian ngắn, doanh nghiệp xây dựng được nhiều đội ngũ phát triển cho nhiều tảng khác việc sử dụng ứng dụng đa tảng đắn phù hợp Phần mềm BaoVietHR phần mềm phục vụ cho công việc quản lý doanh nghiệp di động Với mục đích đưa phần mềm quản lý chạy tốt tảng khác desktop, web lên di động khơng u cầu việc xử lý đồ họa mà chủ yếu xử lý nghiệp vụ Đây lý cho thấy việc định xử dụng 53 Phonegap hoàn tồn phù hợp, với u cầu xử lý nghiệp vụ, hiển thị thơng tin ứng dụng viết Phonegap đem lại hiệu không ứng dụng Native Ngồi với mơ hình phát triển sử dụng web services, ta tận dụng liệu database sẵn có mà khơng cần phải mua sắm thêm thiết bị phần cứng khác Với yêu cầu ứng dụng web chạy di động hoàn toàn đáp ứng được, nhiên việc phát triển ứng dụng chạy thiết bị có đặc điểm quan trọng mà ứng dụng web khơng có Đầu tiên khả lưu trữ liệu offline thiết bị, người dùng lúc kết nối internet, việc lưu trữ liệu offline cho phép người dùng sử dụng ứng dụng lúc Thứ hai chức thông báo, với ứng dụng cho doanh nghiệp phục vụ vào mục đích kinh doanh, yêu cầu tính sẵn sàng cần thiết, với chức gửi thông báo, người dùng không bị bỏ lỡ thông tin quan trọng kịp thời xử lý Như thấy việc sử dụng framework đa tảng mà cụ thể Phonegap để xây dựng ứng dụng doanh nghiệp nói chung ứng dụng BaoVietHR nói riêng hồn tồn phù hợp 54 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết quả, đánh giá chương trình phần mềm Như vậy, sau trình tìm hiểu nghiên cứu framework ngơn ngữ lập trình độc lập mobile cụ thể framework Phonegap, tơi xây dựng chương trình phần mềm sử dụng Phonegap ngơn ngữ lập trình web: HTML, CSS, JavaScript, Jquery,JqueryMobile…Qua thể ưu việt sử dụng Phonegap để viết chương trình lần, sau build qua cloud chạy nhiều tảng smartphone khác Phonegap thật framework đơn giản mà hữu hiệu để làm việc Chương trình phần mềm BaoViet HR xây dựng theo quy trình chương trình phần mềm sử dụng framework PhoneGap Cấu trúc file chương trình: file java, file html, file.jss file.css xây dựng theo chuẩn đúc kết từ trình tìm hiểu khóa luận tơi Chương trình hoạt động trơn tru máy ảo, tơi hoạt động tương tự chạy máy thật Mặc dù chương trình đơn giản, thể việc sử dụng framework ngơn ngữ lập trình độc lập mobile, cụ thể Phonegap việc hữu ích Vì cần "Viết lần, Build Cloud chạy đa tảng smartphone khác nhau" 4.2 Kết luận hướng phát triển Với mục đích: “Viết lần, biên dịch qua Cloud chạy nhiều tảng Smartphone khác nhau” Phonegap đã, framework hữu ích tân tiến cho nhà lập trình di động Mặc dù số hạn chế việc tương thích số tính tảng di động như: ios android Phonegap cải tiến ngày, update phiên để khắc phục điều Chương trình ứng dụng BaoViet HR trình bày khóa luận ứng dụng đơn giản xây dựng sử dụng Phonegap ngôn ngữ lập trình web, sau 55 biên dịch, chạy hoạt động trơn tru số tảng mobile Như minh chứng cho sức mạnh tính hỗ trợ framework Phonegap Hơn gánh nặng việc thấu hiểu ngơn ngữ khơng cịn nỗi lo ngại với nhà lập trình nữa, cần hiểu ngơn ngữ lập trình web: HTML, CSS, JavaScript, … hỗ trợ tuyệt vời framework Phonegap Chương trình đáp ứng tốt yêu cầu phần mềm HR thu nhỏ, nhiên số hạn chế, thiếu xót, đề xuất số hướng phát triển chương trình tối ưu thêm tính tăng Push Notification, giúp cán nhận thơng báo đâu, cần có smartphone kết nối Internet, thêm chức gửi Thông báo cán bộ, nghiên cứu tối ưu hóa chương trình để chạy nhanh ổn định nữa, thu nhỏ khoảng cách với phần mềm Native 56 TÀI LIỆU THAM KHẢO [1] PhoneGap 2.x Mobile Application Development - Tác giả Kerri Shotts - NXB Packt Publishing [2] PhoneGap Mobile Application Development Cookbook - Tác giả Matt Gifford- NXB Packt Publishing [3] Beginning PhoneGap - Tác giả Rohit Ghatol, Yogesh Patel - NXB Apress [4] http:// www.phonegap.com [5] http://www.w3schools.com [6] https://chuwxntc.wordpress.com/2013/02/01/hieu-ve-phat-trien-ung-dung-di-dong-danen-tang-cross-platform/ [7] https://jquerymobile.com/ [8] http://developer.android.com/ [9] https://www.genymotion.com/ [10] jQuery Mobile Cookbook - Tác giả Chetan K Jain - NXB Packt Publishing 57 ... liệu sử dụng nhiều tảng điều kiện cần cho việc phát triển ứng dụng di động đa tảng 3.2 Mơi trường quy trình phát triển 3.2.1 Môi trường phát triển Để phát triển ứng dụng đa tảng, ta cần thiết... tảng di động định: Sự địi hỏi kinh nghiệm chun mơn nhà phát triển ứng dụng di động điều bắt buộc Điều đảm bảo mức độ chuyên nghiệp việc xây dựng ứng dụng di động tảng 15 Hình I - Phát triển ứng dụng. .. Xamarin Studio IDE đa tảng, thiết kế tốt dễ dàng sử dụng Công cụ Xamarin có plugin cho Visual Studio, cho phép phát triển ứng dụng đa tảng Visual Studio Plugin chí cho phép phát triển ứng dụng iOS