PhoneGap là một Framework phát triển phần mềm của Adobe System, được sử dụng để phát triển các ứng dụng di động. Để phát triển các ứng dụng sử dụng PhoneGap, nhà phát triển không cần phải có kiến thức về ngôn ngữ lập trình di động mà chỉ là những ngôn ngữ phát triển web như HTML, CSS và JScript. PhoneGap tạo ra các ứng dụng cho tất cả các nền tảng hệ điều hành di động phổ biến như iOS, Android, BlackBerry và Windows Mobile OS ... Trong tutorial này, tôi sẽ tập trung nói về việc phát triển ứng dụng cho nền tảng Android. Tutorial này sẽ cung cấp cho bạn thông tin đầy đủ về cách tạo ứng dụng nhanh chóng bằng các dịch vụ PhoneGap.

Để hiểu được tutorial này, bạn nên có kiến thức về HTML, CSS và JavaScript để tạo ra trang web mà bạn muốn đặt trên App. Không cần ngôn ngữ lập trình khác để sử dụng PhoneGap.

Tổng quan

Điện thoại di động, thiết bị cầm tay và các thiết bị dễ-mang-theo đã bắt đầu một cuộc cách mạng mới trong công nghệ phần mềm. Những thiết bị nhỏ nhưng hiệu quả này có khả năng chạy các ứng dụng được tạo ra bằng các ngôn ngữ lập trình cao cấp. Những người sở hữu các thiết bị này có xu hướng sử dụng chúng tối đa như các thiết bị này như điện thoại di động, rất thuận tiện để sử dụng bất cứ lúc nào, bất cứ nơi nào.

Kiến trúc của một thiết bị di động tương tự như kiến trúc của một hệ thống máy tính. Nó có tùy chỉnh được xây dựng phần cứng, firmware, và hệ điều hành.

Ba phần này chủ yếu là độc quyền và được thiết kế, phát triển và lắp ráp dưới một tổ chức chủ đạo. Ứng dụng (Ứng dụng Phần mềm) được phát triển bởi tổ chức hàng đầu và các nhà phát triển từ bên ngoài tổ chức.

Một số hệ điều hành di động được công nhận rộng rãi hiện có trên thị trường trong cả hai loại độc quyền và mã nguồn mở. Hầu hết các hệ điều hành di động được sử dụng rộng rãi là

• Android
• iOS
• Windows
• BlackBerry

Mỗi hệ điều hành di động cung cấp bộ công cụ và môi trường riêng để phát triển các ứng dụng sẽ chạy trên chúng. Ứng dụng được thực hiện cho một hệ điều hành không thể chạy trên bất kỳ nền tảng khác vì chúng hoàn toàn khác nhau. Các nhà phát triển có xu hướng bao gồm tất cả các hệ điều hành di động chính để tăng khả năng truy cập giữa người dùng của họ.

Do đó nó trở thành một công việc tẻ nhạt để phát triển một chương trình ứng dụng có thể chạy trên tất cả các nền tảng hệ điều hành chính, giữ cho giao diện, cảm nhận và chức năng giống nhau trên tất cả các nền tảng. Đối với công việc này, một nhà phát triển cần phải hiểu tất cả các nền tảng và cần phải có một sự hiểu biết tốt về các công cụ phát triển chính cho các hệ điều hành khác nhau.

PhoneGap

PhoneGap có thể được xem như là một giải pháp cho tất cả các vấn đề đã đề cập ở trên. PhoneGap là một khung làm cho các nhà phát triển phát triển các ứng dụng của họ bằng cách sử dụng các API web tiêu chuẩn cho tất cả các hệ điều hành di động chính. Nó là mã nguồn mở và miễn phí.

Các nhà phát triển chỉ cần biết phát triển web sử dụng HTML, CSS và JavaScript. PhoneGap đảm nhiệm phần còn lại của công việc, chẳng hạn như giao diện và tính di động giữa các hệ điều hành di động khác nhau.

Sử dụng PhoneGap, người ta có thể tạo ra các ứng dụng cho tất cả các hệ điều hành di động chính như Apple iOS, Android, BlackBerry, Windows vv Điều này không đòi hỏi nhà phát triển phải có chuyên môn về bất kỳ nền tảng nào được đề cập ở trên, cũng như không cần phải biết lập trình để mã ứng dụng từ cơ bản.

Thiết lập môi trường

Trong chương này, chúng ta sẽ học cách thiết lập môi trường cơ bản để tạo ra các ứng dụng một cách dễ dàng. Mặc dù PhoneGap hỗ trợ tạo các ứng dụng offline bằng cách sử dụng giao diện dòng lệnh Cordova và cơ chế kho Github, chúng ta sẽ tập trung vào việc tối giản hoá các thủ tục.

Tôi giả định rằng bạn đã có kinh nghiệm về công nghệ web và đã sẵn sàng gửi ứng dụng web của bạn dưới dạng ứng dụng. Bởi vì PhoneGap chỉ hỗ trợ HTML, CSS và JavaScript, bắt buộc ứng dụng phải được tạo ra bằng cách sử dụng các công nghệ này.

Theo quan điểm của nhà phát triển, một ứng dụng nên có các mục sau đây được bao gồm trong gói của nó -

• Configuration files
• Các icons cho app
• Thông tin hoặc nội dung (được xây dựng bằng công nghệ web)

Thiết lập

Ứng dụng web của chúng ta sẽ chỉ cần một tệp cấu hình cần đủ để định cấu hình tất cả cài đặt cần thiết của nó. Tên của nó là config.xml. Tập tin này chứa tất cả các thông tin cần thiết để biên dịch ứng dụng.

Hãy cho chúng tôi xem config.xml ví dụ của chúng tôi -

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" 
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "http://tutorialspoint.com" email = "contact@tutorialspoint.com">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

Tất cả các nội dung cấu hình được gói trong thẻ <widget>. Mô tả ngắn gọn về mục như sau -

<widget id = ”app_id”>

id là id ứng dụng dành riêng của bạn trên các cửa hàng ứng dụng khác nhau. Đó là trong kiểu tên miền đảo ngược, tức là com.tutorialspoint.onlineviewer vv

<widget version = "x.y.z">

Đây là số phiên bản của ứng dụng ở định dạng x.y.z trong đó (x, y, z) là số nguyên dương, tức là 1.0.0, nó đại diện cho hệ thống phiên bản major.minor.patch.

<name> App Name</name>

Đây là tên của ứng dụng, sẽ được hiển thị bên dưới biểu tượng ứng dụng trên màn hình di động. Bạn có thể tìm kiếm ứng dụng bằng cách sử dụng tên này.

<description> My First Web App </description>

Đây là một mô tả ngắn gọn về ứng dụng là về, và về nó là cái gì.

<author> Author_Name </author>

Trường này chứa tên của người tạo hoặc người lập trình, thường được đặt thành tên tổ chức đang khởi chạy ứng dụng này.

<preferences name = "permissions" value = "none">

Thẻ preferences được sử dụng để đặt các tùy chọn khác nhau như FullScreen, BackgroundColor và Hướng xoay cho ứng dụng. Các tùy chọn này nằm trong cặp key value. Ví dụ: name = "FullScreen" value = "true" vv Vì ta không yêu cầu bất kỳ cài đặt trước, chúng ta sẽ để trống phần này.

<icon>

Cho phép chúng ta thêm biểu tượng vào ứng dụng của mình. Nó có thể được mã hóa bằng nhiều cách khác nhau, nhưng vì chúng ta đang học cách rút ngắn tất cả mọi thứ, vậy nên ở đây. Tập tin .src xác định đường dẫn của biểu tượng hình ảnh. Phần gap:platform tảng xác định nền tảng hệ điều hành nào biểu tượng này sẽ được sử dụng. Phần gap:qualifier là mật độ được sử dụng bởi thiết bị android. Các thiết bị iOS sử dụng tham số width và height

Icons

Có các thiết bị có nhiều kích cỡ khác nhau nhưng có cùng hệ điều hành di động, do đó để nhắm mục tiêu một đối tượng của một nền tảng, bạn cũng cần cung cấp các biểu tượng của tất cả các loại điện thoại di động. Điều quan trọng là chúng ta sẽ chuẩn bị biểu tượng hình dạng và kích thước chính xác theo yêu cầu của hệ điều hành di động cụ thể.

Ở đây chúng tôi đang sử dụng thư mục res / icon / ios và res / icon / android / drawable-xxxx ..

Để công việc này được thực hiện nhanh chóng, bạn có thể tạo một ảnh có kích thước 1024x1024 và đăng nhập vào makeappicon.com. Trang web này sẽ giúp bạn ngay lập tức tạo icon cho tất cả kích cỡ cho cả nền tảng Android và iOS.