Luận văn thạc sĩ kỹ thuật phần mềm tìm hiểu đánh giá các framework phát triển ứng dụng di động đa nền tảng

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ HỒ DANH CHUẨN TÌM HIỂU ĐÁNH GIÁ CÁC FRAMEWORK PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG LUẬN VĂN THẠC SĨ KỸ THUẬT PHẦN MỀM Hà Nội - 2017 ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ HỒ DANH CHUẨN TÌM HIỂU ĐÁNH GIÁ CÁC FRAMEWORK PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG Ngành: Công nghệ thông tin Chuyên ngành: Kỹ thuật phần mềm Mã số: 60480103 LUẬN VĂN THẠC SĨ KỸ THUẬT PHẦN MỀM NGƯỜI HƯỚNG DẪN KHOA HỌC: TS TRẦN THỊ MINH CHÂU XÁC NHẬN CỦA CÁN BỘ HƯỚNG DẪN XÁC NHẬN CỦA CHỦ TỊCH HỘI ĐỒNG Hà Nội - 2017 LỜI CAM ĐOAN Tôi xin cam đoan nội dung kết luận văn tốt nghiệp tự nghiên cứu hướng dẫn TS Trần Thị Minh Châu Trong toàn nội dung luận văn, nội dung trình bày cá nhân tổng hợp từ nhiều nguồn tài liệu khác Tất tài liệu tham khảo trích dẫn rõ ràng phần cuối luận văn Tôi xin cam đoan lời thật Nếu sai tơi xin hồn toàn chịu trách nhiệm Hà Nội, ngày tháng năm 2017 Học viên Hồ Danh Chuẩn LỜI CẢM ƠN Đầu tiên xin chân thành cảm ơn TS Trần Thị Minh Châu tận tình hướng dẫn đóng góp ý kiến q báu chun mơn phương pháp nghiên cứu khoa học để thực luận văn tốt nghiệp thạc sĩ Cô gương mặt sống để học tập noi theo Trong suốt trình học tập trường Đại học Công nghệ - Đại học Quốc gia Hà Nội, xin chân thành cảm ơn thầy, cô giáo cung cấp cho tơi kiến thức hữu ích, bổ trợ cho q trình phát triển sau tơi Cuối xin gửi lời cảm ơn tới gia đình tơi ln ủng hộ tơi đường học tập nghiên cứu với nhiều khó khăn, vất vả Mặc dù cố gắng q trình làm luận văn khơng thể tránh khỏi thiếu sót, mong nhận góp ý thầy cô Hà Nội, ngày tháng Học viên năm 2017 Hồ Danh Chuẩn MỤC LỤC DANH MỤC CHỮ VIẾT TẮT DANH MỤC HÌNH VẼ DANH MỤC BẢNG BIỂU CHƯƠNG 1: GIỚI THIỆU 1.1 Đặt vấn đề 1.2 Mục tiêu phạm vi nghiên cứu CHƯƠNG 2: NGHIÊN CỨU TỔNG QUAN VỀ PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG ĐA NỀN TẢNG 2.1 Các cách tiếp cận việc phát triển ứng dụng di động 2.1.1 Phát triển ứng dụng native 2.1.2 Phát triển ứng dụng web 2.1.3 Phát triển ứng dụng hybrid 10 2.2 Ionic framework 10 2.2.1 Giới thiệu 10 2.2.2 Kiến trúc 12 2.2.3 Điểm bật 16 2.2.4 Ưu điểm nhược điểm 18 2.3 Xamarin framework 20 2.3.1 Điểm bật 21 2.3.2 Kiến trúc [3] 22 2.3.3 Ưu điểm nhược điểm 24 CHƯƠNG 3: SO SÁNH VÀ ĐÁNH GIÁ 28 3.1 So sánh 28 3.2 Đánh giá 30 CHƯƠNG 4: ỨNG DỤNG THỬ NGHIỆM 39 4.1 Ứng dụng so sánh khả phát triển hai tảng 39 4.1.1 Nội dung ứng dụng 39 4.1.2 Kết thực nghiệm 42 4.2 Ứng dụng so sánh hiệu 44 4.2.1 Nội dung thực nghiệm 44 4.2.2 Kết thực nghiệm 44 4.3 Khuyến nghị 45 CHƯƠNG 5: KẾT LUẬN 47 TÀI LIỆU THAM KHẢO 48 DANH MỤC CHỮ VIẾT TẮT Chữ viết tắt Diễn giải IDE Intergrated Development Environtment MVC Model View Controller API Application Programming Interface SDK Software Development Kit HTML Hyper Text Mark-up Language DOM Document Object Model JNI Java Native Interface CLR Common Language Runtime CLI Common Language Infrastructure AOT Ahead Of Time JIT Just In Time IL Intermediate Language REST Representation State Transfer JSON Javascript Object Notation WCF Windows Communication Foundation MSIL Microsoft Intermediate Language GPU Graphics Processing Unit CPU Central Processing Unit DANH MỤC HÌNH VẼ Hình 2.1: Thanh Tab bar Ionic, biểu diễn Android iOS 11 Hình 2.2: Cấu trúc ứng dụng Ionic/Cordova 13 Hình 2.3: Kiến trúc Cordova plugin 14 Hình 2.4: Phương thức hoạt động ứng dụng Xamarin iOS 24 Hình 4.1: Ứng dụng thực nghiệm minh họa việc phát triển chức Ionic Xamarin 40 Hình 4.2: Giao diện hình hiển thị đồ Google Maps 41 Hình 4.3: Giao diện hình hiển thị danh sách ảnh 42 Hình 4.4: So sánh hiệu ứng dụng iOS phát triển ObjC, Xamarin iOS 45 DANH MỤC BẢNG BIỂU Bảng 3.1: Bảng so sánh tính hỗ trợ Ionic Xamarin tảng iOS 28 Bảng 4.1: Bảng so sánh chức hai tảng Ionic Xamarin 42 CHƯƠNG 1: GIỚI THIỆU 1.1 Đặt vấn đề Ngày nay, hệ sinh thái di động đóng vai trò quan trọng chiến lược kinh doanh hầu hết doanh nghiệp Các doanh nghiệp nghiêm túc việc phát triển phát hành ứng dụng phục vụ mục đích kinh doanh họ Tuy nhiên dù mục đích doanh nghiệp phát triển ứng dụng di động vấn đề ln hữu việc lựa chọn cách tiếp cận tốt cho họ - công cụ hay phương pháp nên triển khai để họ đưa ứng dụng đến khách hàng, thời điểm mà không cần quan tâm đến thiết bị, tảng người dùng cuối sử dụng Tuỳ thuộc vào ứng dụng có u cầu tính năng, trải nghiệm người dùng, vòng đời sản phẩm, Có ứng dụng có vòng đời ngắn phục vụ thời điểm định ứng dụng phục vụ kiện; có ứng dụng lại có vòng đời dài, gắn liền với tồn doanh nghiệp; có ứng dụng yêu cầu tương tác nhiều với thành phần thiết bị; có ứng dụng cần người dùng tương tác nhiều lên thiết bị, Tuy nhiên, tựu chung lại tất có điểm chung: ứng dụng cần xây dựng nhanh tốt, rẻ tốt chạy nhiều thiết bị tốt Để lựa chọn chiến lược phát triển ứng dụng tốt, bên liên quan phải đánh giá tiềm ứng dụng, cân yêu cầu khoảng thời gian cần thiết để đưa ứng dụng thị trường Sự phát triển tảng di động phụ thuộc nhiều vào trải nghiệm người dùng tảng Apple chiếm vị trí cao thị phần di động nhờ việc cung cấp cho người dùng trải nghiệm đồng với chất lượng cao Tương ứng, nhà phát triển ứng dụng đa tảng phải hướng đến việc tạo ứng dụng đáp ứng yêu cầu người dùng Trong trải nghiệm người dùng trở thành mục tiêu ứng dụng, có đến bốn đến năm tảng di động cần cân nhắc phát triển: iOS, Android, BlackberryOS, Windows Phone Mobile Web để đưa sản phẩm đến với khách hàng Trong hai tảng trọng nhiều iOS Android Blackberry Microsoft dừng sản xuất thiết bị chạy BlackberryOS Windows Phone Tất hệ điều hành di động khác công nghệ, ngơn ngữ lập trình, cách thức lập trình tiếp cận lập trình viên cần sỡ hữu lượng kỹ đủ lớn để có thể đưa sản phẩm đáp ứng yêu cầu độ phủ tính đa dạng theo cách truyền thống Nếu ứng dụng cần phát triển nhiều hai tảng, việc đưa sản phẩm có trải nghiệm trung thành tất tảng tiêu tốn nhiều thời gian cơng sức a Ionic b Xamarin Hình 4.2: Giao diện hình hiển thị đồ Google Maps - Đa luồng: Để minh họa chức này, ứng dụng xây dựng danh sách cuộn cho phép tải ảnh luồng chạy thực tương tác với giao diện luồng 41 a Ionic b Xamarin Hình 4.3: Giao diện hình hiển thị danh sách ảnh 4.1.2 Kết thực nghiệm Bảng 4.1: Bảng so sánh chức hai tảng Ionic Xamarin Chức UI UX Ionic Xamarin Tôi phải tương tác với thành phần WebKit để thực tính tuỳ chỉnh trình chuyển đổi trang Quá trình phức tạp cần có kiến thức tảng web native viết đoạn mã để chụp lại ảnh hình, sau sử dụng thư viện Sử dụng chế hỗ trợ có sẵn Xamarin Custom Renderer [16] kết hợp với tìm hiểu tài liệu tuỳ chỉnh chuyển đổi iOS để thực tính hồn tồn tương tư cách nhà phát triển thực tảng iOS Cụ thể tơi sử dụng thư viện CoreAnimation có sẵn 42 CoreAnimation có sẵn iOS để thực iOS để thực trình chuyển đổi “lật” hai trình chuyển đổi Bên cạnh trang Tồn mã nguồn thực đó, tơi cần phải viết tính 26 dòng đoạn mã wrapper javascript để gọi tính từ ứng dụng Ionic Tồn mã nguồn thực tính 299 dòng Layout Cả hai khung phát triển có chế riêng để thành phần giao diện tự động tính tốn thay đổi kích thước đáp ứng lại với kích cỡ thiết bị khác Animation Để thực animation cần kết hợp animation riêng lẻ thành chuỗi thực Cả hai khung phát triển hỗ trợ tốt tính Dịch vụ thư viện từ Cả hai khung phát triển hỗ trợ cho phép tích hợp bên thứ ba Google Maps SDK vào ứng dụng Đa luồng Để thực chức cho phép tải ảnh luồng chạy ngầm cần có kết hợp API native (NSMutableURLRequest) cho phép thực yêu cầu tầng thông báo (sử dụng Rxjs) cho thành phần web cập nhật giao diện nội dung sẵn sàng Sử dụng NET Api [13] tích hợp sẵn Xamarin để tạo tác vụ chạy ngầm sử dụng API (Device.InvokeOnMainThread) cho phép tương tác với thành phần giao diện luồng để cập nhật giao diện nộik dung sẵn sàng Bằng ứng dụng thực nghiệm, thấy phần trình phát triển chức cần có ứng dụng Cả Ionic Xamarin cung cấp cho nhà phát triển khả để tích hợp chức phổ biến vào ứng dụng Tuy nhiên, qua ứng dụng thực nghiệm, thấy việc triển 43 khai chức mà chưa Ionic hỗ trợ nhà phát triển thơng thường phức tạp khó khăn nhiều so với Xamarin Điều đến từ khác biệt cách tiếp cận hai khung phát triển Ứng dụng Xamarin chất ứng dụng native, kết hợp với khả tương tác tốt với tảng native Các API Xamarin xây dựng tương ứng với API native tảng cụ thể Điều giúp cho lập trình viên sử dụng tài liệu có sẵn để triển khai tính chưa hỗ trợ mặc định Trong đó, ứng dụng Ionic chạy tảng web, lập trình viên phải tương tác với thành phần tảng qua tầng trung gian WebKit Điều dẫn đến việc nhà phát triển cần phải có kĩ rộng bao gồm tảng web native để xử lý vấn đề mức độ sâu Chính lý dẫn đến nhược điểm lớn Ionic việc phụ thuộc vào plugin, nói xác phụ thuộc vào số nhỏ lập trình viên có kinh nghiệm, có khả triển khai tính 4.2 Ứng dụng so sánh hiệu 4.2.1 Nội dung thực nghiệm Khi nhắc đến khung phát triển ứng dụng đa tảng sử dụng công nghệ web, nhiều nhà phát triển phân vân hiệu ứng dụng xây dựng dựa khung phát triển Tuy nhiên, khung phát triển ứng dụng di động dựa cơng nghệ web có bước phát triển nhanh chóng hiệu nhờ trình tối ưu khung phát triển, sức mạnh phần cứng mạnh thiết bị, trình tối ưu engine web hệ điều hành Để so sánh hiệu khung phát triển ứng dụng đa tảng, viết ứng dụng nhỏ đo thời gian ứng dụng xây dựng dựa vào khung xử lý tác vụ ứng dụng Ứng dụng mô trình xử lý liệu ứng dụng thể thao, cho phép xử lý liệu vị trí người dùng Dữ liệu ứng dụng biểu diễn dạng JSON CSV bao gồm 531 dòng liệu thể trình di chuyển người dùng Ứng dụng xây dựng dựa ba tảng công nghệ native iOS, Xamarin Ionic với logic Ứng dụng thực nghiệm hai thiết bị iPhone SE iPhone 8+ chạy tảng iOS 11 Ứng dụng thực nghiệm 10 lần với 1000 vòng lặp lần lấy kết trung bình 4.2.2 Kết thực nghiệm Biểu đồ thể thời gian xử lý ứng dụng giống tảng iOS sử dụng Objective-C, Xamarin Ionic 44 Hình 4.4: So sánh hiệu ứng dụng iOS phát triển ObjC, Xamarin Ionic Trong phạm vi thử nghiệm, ứng dụng tập trung vào việc xử lý chuỗi ký tự tính tốn toạ độ Qua biểu đồ thấy hiệu ứng dụng phát triển Xamarin tương đương với ứng dụng phát triển cách truyền thơng sử dụng native SDK Trong hiệu ứng dụng thử nghiệm phát triển Ionic tốt khoảng lần so với ứng dụng phát triển Xamarin native Objective-C Điều không chứng tỏ hiệu ứng dụng phát triển Ionic tốt so với ứng dụng phát triển Xamarin hay Objective-C thể khả Ionic việc tối ưu hiệu ứng dụng số trường hợp 4.3 Khuyến nghị Ionic Xamarin khung phát triển ứng dụng di động đa tảng tốt có lợi định Nếu Xamarin mạnh khả tương tác với thư viện native, hiệu khả tuỳ biến Ionic mạnh tính quán cần có khung phát triển đa tảng Việc lựa chọn khung phát triển phù hợp phù thuộc vào yêu cầu ứng dụng tảng cơng nghệ lập trình viên Nếu ứng dụng yêu cầu không phức tạp, không cần xử lý nhiều liệu, sử dụng dịch vụ phổ biến, cần có thời gian phát triển nhanh, chi phí hạn chế Ionic lựa chọn tốt Trong ứng dụng yêu cầu hiệu tốt, cần xử lý 45 nhiều tác vụ nặng, cần tuỳ biến nhiều tảng sử dụng tính đặc biệt tảng sử dụng nhiều thư viện native Xamarin lựa chọn tốt 46 CHƯƠNG 5: KẾT LUẬN Luận văn tốt nghiệp giới thiệu cách tổng quát cách tiếp cận để phát triển ứng dụng di động Dựa vào xu phát triển khung phát triển di động đa tảng, luận văn lựa chọn giới thiệu, phân tích ưu nhược điểm so sánh hai khung phát triển Ionic Xamarin, đại diện cho hai trường phái phát triển ứng dụng đa tảng sử dụng công nghệ web công nghệ native Cụ thể, luận văn thực việc phân tích so sánh dựa tiêu chí cần thiết mà nhà phát triển quan tâm để phát triển ứng dụng di động giao diện, trải nghiệm người dùng, hiệu năng, đa luồng, hỗ trợ dịch vụ bên thứ ba kiểm thử tự động Qua phân tích cho thấy khả tương thích tốt với thư viện native, khả tuỳ biến tảng Xamarin, nhiên kèm với việc tính đa tảng không đảm bảo cao, dẫn đến việc kéo Xamarin gần trở thành khung phát triển ứng dụng native khung phát triển đa tảng Trong Ionic có khả tương thích với tảng hơn, phụ thuộc nhiều vào trình cắm cần lập trình viên có kinh nghiệm lại có tính đa tảng cao hơn, tảng công nghệ phổ biến Để minh hoạ phân tích so sánh đưa trên, phạm vi luận văn xây dựng ứng dụng nhỏ dựa theo tiêu chí so sánh Luận văn đánh giá khả phát triển hai tảng Ionic Xamarin dựa vào cách tiếp cận số dòng mã nguồn cần sử dụng để triển khai tính tương tự dựa hai khung phát triển tảng Bên cạnh đó, luận văn xây dựng ứng dụng dựa vào việc xử lý chuỗi tính tốn liệu để so sánh hiệu ba cách tiếp cận việc phát triển ứng dụng di động Kết cho thấy số trường hợp hiệu Ionic Xamarin tốt, so sánh với ứng dụng xây dựng dựa tảng native Tổng kết lại, việc lựa chọn khung phát triển phù hợp phụ thuộc vào yêu cầu ứng dụng khả lập trình viên Ionic phù hợp với ứng dụng khơng q phức tạp, tuỳ biến, không yêu cầu xử lý nhiều liệu, hiệu mức tương đối, sử dụng dịch vụ phổ biến lập trình viên có sẵn kinh nghiệm tảng công nghệ web, muốn tiết kiệm thời gian chi phí phát triển Xamarin phù hợp với ứng dụng lớn hơn, cần tuỳ biến nhiều, hiệu tốt, muốn tiết kiệm phần chi phí thời gian phát triển ứng dụng 47 TÀI LIỆU THAM KHẢO [1] Ionic team, Ionic docs, http://ionicframework.com/docs/ [2] Xamarin team, Xamarin docs, http://developer.xamarin.com/guides/cross-platfrom [3] Xamarin team, Architecture, https://developer.xamarin.com/guides/crossplatform/application_fundamentals/building_cross_platform_applications/part_2 architecture/ [4] Gartner, Market Share, “Mobile communination devices(2012)” [5] Charland A., Leroux B., “Mobile application development: web vs native,” in ACM 54, pp 49-53, 2011 [6] Goadrich M H., Rogers M.P, “Smart smartphone development: iOS versus Android”, in Proc SIGCSE 2011, pp 607-612, New York, 2011 [7] Anderson R.S., Gestwicki P., “Hello, worlds: an introduction to mobile application development for iOS and Android” J Comput Sci Coll 27, pp 32–33, 2011 [8] Newman B, “Are cross-platform mobile app frameworks right for your business?”, 2011, http://mashable.com/2011/03/21/cross-platform-mobile-frameworks/ [9] Behrens H., “Cross-Platform App Development for iPhone, Android & Co”, 2010, http://heikobehrens.net/2010/10/11/cross-platform-app-development-for-iphoneandroid-co-—-a-comparison-i-presented-at-mobiletechcon-2010/ [10] Cordova team, Cordova https://cordova.apache.org/docs/en/latest/guide/overview/ guide, [11] John Resig, “How javascript timer work”, https://johnresig.com/blog/howjavascript-timers-work/ [12] Tom Buyse, “End to end testing an Ionic application with appium and protractor”, http://tombuyse.com/end-to-end-testing-an-ionic-application-with-appium-andprotractor/ [13] Appium Team, Appium docs, http://appium.io/slate/en/master/?ruby - aboutappium [14] Microsoft Team, Thread Pools, https://msdn.microsoft.com/enus/library/windows/desktop/ms686760(v=vs.85).aspx [15] Xamarin Team, Linking native libraries, https://developer.xamarin.com/guides/ios/advanced_topics/native_interop/ 48 [16] Xamarin Team, Custom Renderer, https://developer.xamarin.com/guides/xamarinforms/application-fundamentals/custom-renderer/introduction/ [17] Estaun.net blog, Some thoughts after (almost) a year of real Xamarin use, http://www.estaun.net/blog/some-thoughts-after-almost-a-year-of-real-xamarin-use/ [18] Xamarin Team, Limitations, https://developer.xamarin.com/guides/ios/advanced_topics/limitations/ [19] Xamarin Team, Limitations, https://developer.xamarin.com/guides/android/advanced_topics/limitations/ [20] Herman Schoenfeld, Xamarin iOS memory leaks everywhere, https://stackoverflow.com/questions/25532870/xamarin-ios-memory-leakseverywhere [21] Nexgendesign.com, Xamarin troubles, http://www.nexgendesign.com/xamarintroubles [22] Siddharth, 15 important consideration for choosing a web dev framework, 2009, https://code.tutsplus.com/tutorials/15-important-considerations-for-choosing-a-webdev-framework net-8035 [23] Daniel Pfeiffer, Which cross-platform framework is right for me?, 2011, https://gowithfloat.com/2011/07/which-cross-platform-framework-is-right-for-me/ [24] Heitkăotter, H., Hanschke, S., Majchrzak, T.A.: Evaluating cross-platform development approaches for mobile applications In: Cordeiro, J., Krempels, K.-H (eds.) Web Information Systems and Technologies LNBIP, vol 140, pp 120–138 Springer, Heidelberg (2013) doi:10.1007/978-3-642-36608-6_8 49 CQNG HOA XA HQI CHU NGHiA DQc - Tlf - NAM phuc ==================== BAN NHAN XET PHAN BIEN LUAN VAN THAC Si HQ va ten can b :]i ··· ro i •tc c ['._, / ::: ·· • c.".ct'-1 •••• ff'Vt7t •••• /.en c/..,7' /7' ·j· 0.1A4 '1''; - ,/ xAc - / ciJA co QUAN coNG TAc (/ - CAN B