SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Tìm hiểu nền tảng mã nguồn mở
Phonegap và xây dựng ứng dụng




             Sinh viên thực hiện: Ngô Quang Trung
             Thầy hướng dẫn: ThS. Đoàn Duy Trung
Nội Dung Trình Bày

• Tổng quan về thị trường ứng dụng di động
• So sánh các loại ứng dụng Web apps, Native
  apps, Hybrid apps
• Phonegap là gì?
• Nền tảng kiến trúc của Phonegap
• Giới thiệu về chương trình ứng dụng
Sự phát triển của thị trường ứng
          dụng di động
Tương lai của thị trường máy tính
         truyền thống !
Thị trường ứng dụng di động đang bị
            phân mảnh
Các ứng dụng Mobile Web
• Quá trình phát triển dễ dàng, nhanh chóng và
  đơn giản
• Phải chạy trong trình duyệt browser của
  mobile
• Được xây dựng dựa trên các công nghệ theo
  chuẩn W3C
• Bị giới hạn truy cập tới các tính năng của
  thiết bị
Các ứng dụng bản địa (Native Apps)

• Được phát triển dành riêng cho từng nền
  tảng cụ thể
• Được phát hành thông qua các kho ứng
  dụng
• Được xây dựng dược trên các công nghệ
  và các môi trường phát triển dành riêng
Các ứng dụng lai (Hybrid Apps)
• Được xây dựng với các công nghệ Web
• Có khả năng truy cập vào các tính năng của
  thiết bị
• Được phát hành thông qua kho ứng dụng
Bảng so sánh các dạng ứng dụng
                  mobile
                     Web        Hybrid            Native

Chi phí phát triển   Hợp lý     Hợp lý            Tốn kém

Thời gian phát       Ngắn       Ngắn              Dài
triển
Tính khả chuyển      Cao        Cao               Không có
của ứng dụng
Hiệu năng xử lý      Nhanh      Có tấc độ xử lý   Rất nhanh
                                giống ứng dụng
                                bản địa nếu cần
Các tính năng bản    Không có   Có                Tất cả
địa
Phát hành qua kho    Không có   Có                Có
ứng dụng
Khả năng mở rộng     Không có   Có                Có
Phonegap là gì?
Phonegap là 1 bộ khung phát triển để giúp việc xây dựng các
ứng dụng mobile bằng cách sử dụng các công nghệ Web




   HTML dùng để biểu diễn giao diện (layout)
   Javascript dùng để truy cập tới các tính năng của thiết bị
   và thực thi xử lý tính toán logic
   CSS làm giao diện trở nên sinh động với các hiệu ứng, và
   làm tăng trải nghiệm và cảm nhận của người dùng
Cách thức Phonegap hoạt động
       Xây dựng ứng dụng chỉ với công nghệ web
        tiêu chuẩn:
       Dựa vào HTML5, Phonegap thúc đẩy phát triển các công nghệ
       Web. Do đó nhà lập trình chỉ cần nắm rõ về HTML, CSS và
       Javascript.
        Đóng gói mã nguồn với Phonegap
       Bằng cách sử dụng framework mã nguồn mở Phonegap, thì
       ứng dụng có thể truy cập tới các hàm ApIs bản địa (native APIs)




       Xuất ứng dụng tới nhiều nền tảng khác nhau
Giảm gánh nặng cho lập trình viên




      C, C++,
      C#, …
Biểu đồ kiến trúc Phonegap
               Mobile Device
         Native Mobile Application

                Web View




       PhoneGap JavaScript Interface



             Native Device ApIs
                Device OS
Các tính năng được cung cấp bởi
Phonegap
                       Core APIs
– Media (audio play/record)   – Accelerometer
– Media Capture:              – Compass
audio,video,                  – Camera
camera – (W3C)                – Contacts (W3C)
– Network (W3C)               – File (W3C)
– Notification                – File Transfer
– Storage (HTML5 Web SQL      – Geolocation (HTML5)
&
Web Storage)
Bảng các hàm Phonegap APIs được hỗ
       trợ cho từng nền tảng
Cộng đồng Phonegap
• Được khởi tạo và xây dựng bởi Nitobi từ năm 2008
• Được Adobe chính thức công bố việc mua lại vào
  tháng 10 năm 2011, Phonegap vẫn được giữ là mã
  nguồn mở, hoàn toàn miễn phí và được đổi tên thành
  Apache Cordova
• Cho ra mắt phiên bản thử nghiệm của dịch vụ biên
  dịch đám mây “PhoneGap Build” vào tháng 9 năm
  2012
• Đã có trên 10,000,000 lượt truy cập vào website:
  www.phonegap.com, có trên 1,000,000 lượt tải về, và
  Phonegap được sử dụng bởi trên 400,000 nhà phát
  triển
Sức mạnh của “Phonegap Build”
Các tổ chức tham gia đóng góp
Chương trình ứng dụng
Chức năng chính



      Sedi
Chức năng tổng thể
Video ghi lại quá trình sử dụng
   chương trình ứng dụng
Cảm ơn đã lắng nghe !

Weitere ähnliche Inhalte

Andere mochten auch

Thiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tán
Thiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tánThiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tán
Thiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tán
Ngo Trung
 
Lập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kế
Lập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kếLập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kế
Lập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kế
Ngo Trung
 
lý thuyết cơ sở dữ liệu phân tán
lý thuyết cơ sở dữ liệu phân tánlý thuyết cơ sở dữ liệu phân tán
lý thuyết cơ sở dữ liệu phân tán
Ngo Trung
 

Andere mochten auch (11)

Ile de france_ensadlab
Ile de france_ensadlabIle de france_ensadlab
Ile de france_ensadlab
 
Xu hướng và giải pháp phát triển ứng dụng di động đa nền tảng cho doanh nghiệ...
Xu hướng và giải pháp phát triển ứng dụng di động đa nền tảng cho doanh nghiệ...Xu hướng và giải pháp phát triển ứng dụng di động đa nền tảng cho doanh nghiệ...
Xu hướng và giải pháp phát triển ứng dụng di động đa nền tảng cho doanh nghiệ...
 
Thiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tán
Thiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tánThiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tán
Thiết kế mạng máy ATM dựa vào thuyết cơ sở dữ liệu phân tán
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
PhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or LessPhoneGap in 60 Minutes or Less
PhoneGap in 60 Minutes or Less
 
Lập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kế
Lập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kếLập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kế
Lập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kế
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
 
lý thuyết cơ sở dữ liệu phân tán
lý thuyết cơ sở dữ liệu phân tánlý thuyết cơ sở dữ liệu phân tán
lý thuyết cơ sở dữ liệu phân tán
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 
Phân biệt Marketing và Truyền thông
Phân biệt Marketing và Truyền thôngPhân biệt Marketing và Truyền thông
Phân biệt Marketing và Truyền thông
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
 

Mehr von Ngo Trung

Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7
Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7 Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7
Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7
Ngo Trung
 
Ubercart 3.x trong drupal 7 - tiếng việt
Ubercart 3.x trong drupal 7 - tiếng việtUbercart 3.x trong drupal 7 - tiếng việt
Ubercart 3.x trong drupal 7 - tiếng việt
Ngo Trung
 
php với oracle database
php với oracle databasephp với oracle database
php với oracle database
Ngo Trung
 

Mehr von Ngo Trung (6)

Cách tối ưu hóa môi trường lập trình ứng dụng cho Android - Tăng tốc máy ảo A...
Cách tối ưu hóa môi trường lập trình ứng dụng cho Android - Tăng tốc máy ảo A...Cách tối ưu hóa môi trường lập trình ứng dụng cho Android - Tăng tốc máy ảo A...
Cách tối ưu hóa môi trường lập trình ứng dụng cho Android - Tăng tốc máy ảo A...
 
Drupal 7 cho người mới học
Drupal 7 cho người mới họcDrupal 7 cho người mới học
Drupal 7 cho người mới học
 
Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7
Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7 Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7
Cách cài đặt và thiết lập Netbean 7 làm IDE cho drupal 7
 
Ubercart 3.x trong drupal 7 - tiếng việt
Ubercart 3.x trong drupal 7 - tiếng việtUbercart 3.x trong drupal 7 - tiếng việt
Ubercart 3.x trong drupal 7 - tiếng việt
 
php với oracle database
php với oracle databasephp với oracle database
php với oracle database
 
Range Searching computational geometry ii
Range Searching computational geometry iiRange Searching computational geometry ii
Range Searching computational geometry ii
 

Tìm hiểu nền tảng mã nguồn mở Phonegap và xây dựng ứng dụng

  • 1. Tìm hiểu nền tảng mã nguồn mở Phonegap và xây dựng ứng dụng Sinh viên thực hiện: Ngô Quang Trung Thầy hướng dẫn: ThS. Đoàn Duy Trung
  • 2. Nội Dung Trình Bày • Tổng quan về thị trường ứng dụng di động • So sánh các loại ứng dụng Web apps, Native apps, Hybrid apps • Phonegap là gì? • Nền tảng kiến trúc của Phonegap • Giới thiệu về chương trình ứng dụng
  • 3. Sự phát triển của thị trường ứng dụng di động
  • 4. Tương lai của thị trường máy tính truyền thống !
  • 5. Thị trường ứng dụng di động đang bị phân mảnh
  • 6. Các ứng dụng Mobile Web • Quá trình phát triển dễ dàng, nhanh chóng và đơn giản • Phải chạy trong trình duyệt browser của mobile • Được xây dựng dựa trên các công nghệ theo chuẩn W3C • Bị giới hạn truy cập tới các tính năng của thiết bị
  • 7. Các ứng dụng bản địa (Native Apps) • Được phát triển dành riêng cho từng nền tảng cụ thể • Được phát hành thông qua các kho ứng dụng • Được xây dựng dược trên các công nghệ và các môi trường phát triển dành riêng
  • 8. Các ứng dụng lai (Hybrid Apps) • Được xây dựng với các công nghệ Web • Có khả năng truy cập vào các tính năng của thiết bị • Được phát hành thông qua kho ứng dụng
  • 9. Bảng so sánh các dạng ứng dụng mobile Web Hybrid Native Chi phí phát triển Hợp lý Hợp lý Tốn kém Thời gian phát Ngắn Ngắn Dài triển Tính khả chuyển Cao Cao Không có của ứng dụng Hiệu năng xử lý Nhanh Có tấc độ xử lý Rất nhanh giống ứng dụng bản địa nếu cần Các tính năng bản Không có Có Tất cả địa Phát hành qua kho Không có Có Có ứng dụng Khả năng mở rộng Không có Có Có
  • 10. Phonegap là gì? Phonegap là 1 bộ khung phát triển để giúp việc xây dựng các ứng dụng mobile bằng cách sử dụng các công nghệ Web HTML dùng để biểu diễn giao diện (layout) Javascript dùng để truy cập tới các tính năng của thiết bị và thực thi xử lý tính toán logic CSS làm giao diện trở nên sinh động với các hiệu ứng, và làm tăng trải nghiệm và cảm nhận của người dùng
  • 11. Cách thức Phonegap hoạt động Xây dựng ứng dụng chỉ với công nghệ web tiêu chuẩn: Dựa vào HTML5, Phonegap thúc đẩy phát triển các công nghệ Web. Do đó nhà lập trình chỉ cần nắm rõ về HTML, CSS và Javascript.  Đóng gói mã nguồn với Phonegap Bằng cách sử dụng framework mã nguồn mở Phonegap, thì ứng dụng có thể truy cập tới các hàm ApIs bản địa (native APIs) Xuất ứng dụng tới nhiều nền tảng khác nhau
  • 12. Giảm gánh nặng cho lập trình viên C, C++, C#, …
  • 13. Biểu đồ kiến trúc Phonegap Mobile Device Native Mobile Application Web View PhoneGap JavaScript Interface Native Device ApIs Device OS
  • 14. Các tính năng được cung cấp bởi Phonegap Core APIs – Media (audio play/record) – Accelerometer – Media Capture: – Compass audio,video, – Camera camera – (W3C) – Contacts (W3C) – Network (W3C) – File (W3C) – Notification – File Transfer – Storage (HTML5 Web SQL – Geolocation (HTML5) & Web Storage)
  • 15. Bảng các hàm Phonegap APIs được hỗ trợ cho từng nền tảng
  • 16. Cộng đồng Phonegap • Được khởi tạo và xây dựng bởi Nitobi từ năm 2008 • Được Adobe chính thức công bố việc mua lại vào tháng 10 năm 2011, Phonegap vẫn được giữ là mã nguồn mở, hoàn toàn miễn phí và được đổi tên thành Apache Cordova • Cho ra mắt phiên bản thử nghiệm của dịch vụ biên dịch đám mây “PhoneGap Build” vào tháng 9 năm 2012 • Đã có trên 10,000,000 lượt truy cập vào website: www.phonegap.com, có trên 1,000,000 lượt tải về, và Phonegap được sử dụng bởi trên 400,000 nhà phát triển
  • 17. Sức mạnh của “Phonegap Build”
  • 18. Các tổ chức tham gia đóng góp
  • 22. Video ghi lại quá trình sử dụng chương trình ứng dụng
  • 23. Cảm ơn đã lắng nghe !