Tài liệu Khóa luận tìm hiểu về ngôn ngữ lập trình độc lập trên mobile phonegap

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Nguyễn Văn Điềm TÌM HIỂU VỀ FRAMEWORK NGÔN NGỮ LẬP TRÌNH ĐỘC LẬP TRÊN MOBILE KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC CHÍNH QUY Ngành: Công nghệ thông tin HÀ NỘI – 2014 ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Nguyễn Văn Điềm TÌM HIỂU VỀ FRAMEWORK NGÔN NGỮ LẬP TRÌNH ĐỘC LẬP TRÊN MOBILE ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ thông tin Cán bộ hướng dẫn: TS. Nguyễn Trí Thành (ký tên) HÀ NỘI - 2014 TÓM TẮT 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 như hiện nay, điện thoại thông minh hay còn gọi là Smartphone thực sự đã mang đến một cuốc cách mạng cho các thiết bị di động. Sự tiến bộ vượt bậc của công nghệ đã làm thay đổi hoàn toàn thói quen cũng như hành vi của con người. Thiết bị di động đã đang và sẽ trở thành phương tiện giao tiếp và làm việc chủ yếu của cong người. Và phần cốt lõi để tạo ra sức hấp dẫn từ chiếc Smartphone chính là hệ điều hành và các ứng dụng mà chúng đang chạy. Hiện tại, các ứng dụng dành cho thiết bị di động đang bị phân mảnh rất lớn do các hãng công nghệ lớn cạnh tranh, ganh đua nhau tạo ra các nền tảng hệ điều hành di động của riêng mình: IOS, Android, Window Phone, BlackBerry, webOS,… Vì vậy, các framework ngôn ngữ lập trình lần lượt ra đời với mục đích “viết một lần, có thể chạy khắp nơi – tương thích với hầu hết các nền tảng hệ điều hành di động”, và Phonegap chính là một framework phổ biến nhất đáp ứng được mục đích đó tính đến thời điểm hiện tại. Trong khóa luận này, tôi sẽ tập trung chủ yếu vào việc tìm hiểu Phonegap, và xây dựng một chương trình phần mềm ứng dụng sử dụng Phonegap có thể chạy trên nhiều nền tảng Smartphone khác nhau. Từ khóa: Smartphone, Phonegap, framework, tương thích. 3 Lời cảm ơn Lời đầu tiên, tôi xin bày tỏ lời cảm ơn và lòng biết ơn sâu sắc nhất tới TS.Nguyễn Trí Thành đã tận tình hướng dẫn và chỉ bảo tôi trong suốt quá trình thực hiện khóa luận này. Tôi xin chân thành cảm ơn các thầy, cô trong trường đại học Công Nghệ - Đại học Quốc gia Hà Nội đã tạo mọi điều kiện thuận lợi cho tôi học tập, rèn luyện và ghiên cứu. Tôi cũng xin gửi lời cảm ơn đến các anh chị, các bạn cùng thực hiện khóa luận đã hỗ trợ tôi rất nhiều về kiến thức chuyên môn trong quá trình thực hiện khóa luận. Tôi xin cảm ơn các bạn trong lớp K55CB đã ủng hộ, khích lệ, giúp đỡ và luôn sát cánh bên tôi trong suốt quá trình học tập, rèn luyện tại trường. Và cuối cùng, tôi xin được gửi lời cảm ơn tới gia đình, người thân và bạn bè những người đã luôn ở bên tôi những lúc khó khăn nhất, luôn động viên và khuyến khích tôi trong cuộc sống cũng như trong học tập và công việc. Tôi xin chân thành cảm ơn! Hà Nội, ngày tháng năm 2014 Sinh viên Nguyễn Văn Điềm 4 Lời cam đoan Tôi xin cam đoan các kết quả đạt trong khóa luận này là do tôi thực hiện dưới sự hướng dẫn của TS. Nguyễn Trí Thành. Tất cả các tài liệu tham khảo từ những nghiên cứu liên quan đều được nêu nguồn gốc một cách rõ ràng từ danh mục tài liệu tham khảo trong khóa luận. Trong khóa luận, không có việc sao chép tài liệu, công trình nghiên cứu của người khác mà không chỉ rõ về mặt tài liệu tham khảo. Hà Nội, ngày tháng năm 2014 Sinh viên Nguyễn Văn Điềm 5 Mục lục Danh sách hình vẽ Danh sách bảng 6 Chương 1 MỞ ĐẦU Điện thoại thông minh hay còn gọi là smartphone thực sự đã mang đến một cuộc cách mạng cho các thiết bị di động, trong thời kì mà công nghệ số phát triển với tốc độ chóng mặt như hiện nay. Nhu cầu sử dụng thiết bị di động đã trở nên rất phổ biến không chỉ ở Việt Nam mà trên toàn thế giới. Sự tiến bộ vượt bậc của công nghệ đã làm thay đổi hoàn toàn thói quen cũng như hành vi của con người. Trong tương lai, thiết bị di động sẽ trở thành phương tiện giao tiếp và làm việc chủ yếu của con người. Và phần cốt lõi để tạo ra sức hấp dẫn từ chiếc smartphone chính là hệ điều hành và các ứng dụng mà chúng đang chạy. Hiện tại, các ứng dụng dành cho thiết bị di động đang bị phân mảnh rất lớn do các hãng công nghệ lớn cạnh tranh, ganh đua nhau tạo ra các nền tảng hệ điều hành di động của riêng mình. Do đó có nhiều framework ngôn ngữ lập trình ra đời, với mục đích “viết một lần, biên dịch qua cloud và chạy khắp nơi – tương thích với hầu hết các nền tảng hệ điều hành di động hiện tại”, cũng có nghĩa là những framework này là những ngôn ngữ lập trình độc lập trên mobile. Phonegap chính là một trong những framework phổ biến nhất đáp ứng được mục đích đó. Nó là công cụ phát triển ứng dụng cho cả iOS, Android, Window Phone, BlackBerry, webOS, Bada, Symbian cùng lúc…Việc ra đời của các framework này nói chung và của Phonegap nói riêng đã nhận được sự đóng góp của rất nhiều tổ chức và cộng đồng công nghệ lớn. Đối với các lập trình viên trong việc tạo ra ứng dụng có thể chạy trên đa nền tảng di động thì cần phải nắm bắt và hiểu rõ về các công nghệ bên trong mỗi nền tảng. 7 Nhưng giờ đây, với sự hỗ trợ đắc lực của Phonegap, các lập trình viên chỉ cần nắm bắt và chuyên sau về một công nghệ duy nhất, đó là công nghệ nền Web(bao gồm HTML5, Javascript, CSS3, Jquery Mobile,..). Nội dung đề tài: “Tìm hiểu framework ngôn ngữ lập trình độc lập trên mobile” ngoài việc tìm hiểu tổng quan về Phonegap, các công nghệ nền Web liên quan, còn xây dựng một chương trình phần mềm ứng dụng sử dụng Phonegap – viết một lần, biên dịch qua cloud và có thể chạy trên các nền tảng di động khác nhau. Nội dung Khóa luận này gồm 5 chương: Chương 1 – Mở đầu: Nêu thực trạng, giới thiệu về công việc và nêu những nội dung sẽ được trình bày. Chương 2 – Cơ sở lý thuyết: Giới thiệu về Phonegap và những công nghệ, cơ sở lý thuyết được áp dụng để xây dựng chương trình. Chương 3 – Xây dựng chương trình: phân tích thiết kế và xây dựng, kiểm thử chương trình phần mềm. Chương 4 – Kết quả, đánh giá chương trình phần mềm. Chương 5 – Kết luận: Tóm lược những kết quả của Khóa luận, những đạt được và hạn chế, triển vọng và hướng phát triển trong tương lai. 8 Chương 2 CƠ SỞ LÝ THUYẾT 2.1. HTML5 và CSS3 2.1.1. HTML và CSS Trong những ngày sơ khai của Internet, các công cụ cho việc thiết kế một Web site chỉ là HTML và một số ít các công cụ khác. Nh ưng việc thiết kế một trang Web chỉ với HTML thật tẻ nhạt và nhiều hạn chế. Đó là lí do chúng ta cần đến CSS. HTML5 là phiên bản thứ 5, mới nhất của chuẩn HTML, ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa. HTML5 có nhiều tính năng mới hỗ trợ việc đưa vào và quản lý các nội dung đa phương tiện và đồ họa, không còn phụ thuộc vào các plugin và API. Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệt Web trong việc hiển thị một trang HTML. Về cơ bản, các trang HTML như bộ xương – khuôn khổ cơ bản của một trang web, trong khi các file CSS sẽ cụ thể hóa các thành phần của một trang nên được hiển thị như thế nào. CSS cho phép ta kiểm soát phông chữ, màu chữ, kiểu nền…, của một trang HTML. CSS đã giúp cho việc thay đổi phong cách của một trang Web đơn giản hơn và đỡ tốn thời gian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đó apply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây. CSS3 là phiên bản mới nhất của CSS, được chia thành các module để có thể phát triển và đặc tả độc lập. CSS3 đưa vào nhiều thuộc tính và bộ chọn (selector) mới hỗ trợ 9 xây dựng các trang web với nội dung phong phú, hiêu ứng, giao diện người dùng tốt hơn và vẫn đảm bảo yêu cầu mã tương đối nhẹ. 2.1.2. Một số đặc điểm nổi bật của HTML5 HTML5 mang lại cho người dùng trải nghiệm lướt Web hoàn toàn mới, nhanh hơn, ổn định hơn và bảo mật hơn. HTML5 sẽ giúp các nội dung trên Web hoạt động tốt hơn mà không cần phụ thuộc vào bất kì một ứng dụng phụ trợ nào khác. Bên cạnh đó, HTML5 có khả năng hỗ trợ API (Application Programming Interface) và DOM (Document Object Model) sẽ cho phép dễ dàng mở rộng, giúp các nhà phát triển tự do sang tạo trong việc tạo ra các ứng dụng thân thiện và hữu ích hơn. Hơn nữa, với HTML5 mọi thiết bị từ máy tính cá nhân đến các thiết bị di động sẽ có thể dễ dàng tiếp cận nội dung, chỉ cần duy nhất một điều kiện là trình duyệt đang dùng phải hỗ trợ HTML5. Và hiện nay, hầu hết các trình duyệt phổ biến đều hỗ trợ mạnh mẽ HTML5, từ trình duyệt web: Firefox, Chrome, Opera, Internet Explorer đến các trình duyệt trên iOS, Android,… Với HTML5, các nhà phát triển chỉ cần xây dựng ứng dụng 1 lần, nó có thể hoạt động tốt trên tất cả các thiết bị, không như Flash hoặc Silverlight đòi hỏi phải cài đặt plugin để có thể hiển thị nội dung. Sau đây là một số tính năng nổi trội của HTML5 mà trong quá trình tìm hiểu tôi đã đúc kết được. 2.1.2.1. Hỗ trợ thay thế Flash Flash lâu nay vẫn chiếm phần lớn nội dung trên Web nhưng hiện nay nó đã và đang dần bị thay thế bởi HTML5. Tồn tại quãng thời gian khá dài, Flash có những hạn chế rất lớn mà các giới phát triển đã chỉ ra được, đó là sự bất ổn định, làm thiết bị hoạt động nóng hơn và hao pin 10 hơn, phải yêu cầu cài đặt plugin để hoạt động. Và Flash không phải là tối ưu cho các thiết bị di động khi vấn đề về Pin luôn là mối quan tâm lớn của người dùng. Huyền thoại Steve Jobs đã từng đưa ra quan điểm rất rõ rang, Flash sẽ không bao giờ xuất hiện trên các thiết bị di động của Apple, và cũng đưa ra sự ủng hộ tuyệt đối vào HTML5. Quan điểm này thể hiện rõ ràng đến nỗi Steve Jobs đã viết một bức thư và đăng trên trang chủ của Apple và xóa tan những mong muốn đưa Flash lên iOS của người dùng. Thời gian trước, Google đã phát triển công cụ Google Swiffy cho phép người dùng chuyển đổi nội dung từ Flash sang HTML5, Adobe mua lại Nitobi – công ty sang lập bộ khung lập trình ứng dụng Phonegap và Phonegap Build cho phép lập trình viên phát triển ứng dụng nền tảng cross-flatform trên di động với HTML5 và Javascript. Bên cạnh đó, bản thân Adobe cũng cho ra đời công cụ mang tên Wallaby cho phép chuyển nội dung từ Flash sang HTML5. Và mới đây, chính Adobe đã tuyên bố sẽ ngừng phát triển Flash trên các thiết bị di động mà thay vào đó là tập trung phát triển HTML5. Với giới công nghệ, đây có thể là một bước ngoặt quan trọng. Adobe cho biết họ vẫn sẽ tải lên các bản sửa lỗi, nhưng sẽ không phát triển Flash trên các thiết bị di động nữa, và Flash Player 11.1 sẽ là phiên bản nâng cấp cuối cùng. Adobe cũng có thông báo: “Hiện tại HTML5 đã được triển khai rộng rãi trên nhiều nền tảng khác nhau, nó sẽ trở thành giải pháp tốt nhất cho việc phát triển nội dung trên trình duyệt của thiết bị di động”. Hiện nay, nhiều trang web và dịch vụ lớn đã chuyển sang dùng HTML5, có thể kể ra tiêu biểu trong số đó là Youtube, Nokia Máp,…Ngoài ra, rất nhiều game được xây dựng bằng HTMl5 đã xuất hiện, trong đó có các games nối tiếng như Angry Bird, Fieldrunners… Như vậy với HTML5, người dùng Web sẽ có được một trải nghiệm hoàn toàn mới, có thể thoải mái xem video, chơi games trên trình duyệt với mọi thiết bị mà không cần 11 quan tâm đến các thành phần bổ sung cần phải cài thêm. Với các thiết bị di động như Smartphone, Tablet, người dùng sẽ không cần phải lo lắng về hiệu năng cũng như thời lương sử dụng Pin nữa, vì HTML5 đã tối ưu hóa những lo ngại đó. 2.1.2.2. Tính năng bảo mật Mỗi trình duyệt có một plug-in riêng được lập ra với những tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu bảo mật cũng khác nhau. Thông thường, một số phiên bản plug-in có tính bảo mật hơn so với loại khác. Khi số lượng plug-in gia tăng, chúng làm tăng độ phức tạp trong kiểm tra các lỗi an ninh. Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML5 sẽ bỏ đi được những khuyết điểm có trong các plug-in trước đó. Những khuyết điểm có thể bị lợi dụng để thiết lập mã độc. 2.1.2.3. Đơn giản hóa việc phát triển web Bill Mill – chuyên viên thiết kế cho Lookingglass Cyber Solutions giải thích ngắn gọn về sự thay đổi này: “Tôi thực sự thích HTML5 vì nó cho phép tôi làm việc trong một môi trường thích hợp, trình duyệt kiết hợp với Javascipt, DOM mà không phải bật đi bật lại Flash. Nó vừa là một ngôn ngữ lại vừa là một công cụ, không khác biết lắm so với các plug-in khác”. HTML5 cung cấp một ngôn ngữ lập trình JavaScript, một kiểu dữ liệu (XML hoặc DOM) và một phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video và đồ họa. 2.1.3. Các tính năng mới có trong HTML5 2.1.3.2. HTML5 hỗ trợ các phần tử định nghĩa mới Ta có thể liệt kê các phần tử định nghĩa mới trong HTML5 và các chức năng của chúng trong bảng sau đây. 12 Bảng 1: Các phần tử định nghĩa mới trong HTML5.

Định nghĩa 1 tiêu đề cho 1 số phần tử của trang web, có thể là toàn bộ trang, 1 phần tử

, hay