PhoneGap - Pengaturan Lingkungan

Dalam bab ini, kita akan belajar bagaimana mengatur lingkungan dasar untuk membuat aplikasi dengan mudah. Meskipun PhoneGap mendukung pembuatan aplikasi secara offline menggunakan antarmuka baris perintah Cordova dan mekanisme repositori Github , kami akan berkonsentrasi pada prosedur upaya minimum.

Kami berasumsi bahwa Anda berpengalaman dengan teknologi web dan menyiapkan aplikasi web Anda untuk dikirim sebagai aplikasi. Karena PhoneGap hanya mendukung HTML, CSS dan JavaScript, aplikasi wajib dibuat hanya dengan menggunakan teknologi ini.

Dari perspektif pengembang, aplikasi harus memiliki item berikut yang disertakan dalam paketnya -

  • File konfigurasi
  • Ikon untuk aplikasi
  • Informasi atau konten (dibangun menggunakan teknologi web)

Konfigurasi

Aplikasi web kita hanya membutuhkan satu file konfigurasi yang memadai untuk mengonfigurasi semua pengaturan yang diperlukan. Namanya config.xml. File ini berisi semua informasi yang diperlukan untuk mengompilasi aplikasi.

Mari kita lihat config.xml untuk contoh kita -

<?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 = "[email protected]">
      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>

Semua konten konfigurasi dibungkus dalam tag <widget>. Deskripsi singkatnya adalah sebagai berikut -

<widget id = ”app_id”>

id adalah app-id Anda yang dipesan di berbagai toko aplikasi. Itu dalam gaya nama domain terbalik yaitu com.tutorialspoint.onlineviewer dll.

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

Ini adalah nomor versi aplikasi dalam format xyz di mana (x, y, z) adalah bilangan bulat positif yaitu 1.0.0, ini mewakili sistem versi major.minor.patch.

<name> App Name</name>

Ini adalah nama aplikasi, yang akan ditampilkan di bawah ikon aplikasi di layar ponsel. Aplikasi Anda dapat dicari menggunakan nama ini.

<description> My First Web App </description>

Ini adalah deskripsi singkat tentang apa aplikasi itu, dan apa itu.

<author> Author_Name </author>

Bidang ini berisi nama pembuat atau pemrogram, umumnya diatur ke nama organisasi yang meluncurkan aplikasi ini.

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

Tag preferensi digunakan untuk mengatur berbagai pilihan seperti FullScreen, BackgroundColor dan Orientation untuk aplikasi. Opsi ini ada dalam pasangan nama dan nilai. Misalnya: name = "FullScreen" value = "true" dll. Karena kami tidak memerlukan pengaturan lanjutan ini, kami hanya memberikan izin ke none.

<icon>

Memungkinkan kami menambahkan ikon ke aplikasi kami. Itu dapat dikodekan dengan berbagai cara, tetapi karena kita mempelajari jalan pintas dari semuanya, jadi ini dia. Itu.srcmenentukan jalur gambar ikon. Itugap:platformmenentukan untuk platform OS mana ikon ini akan digunakan. Itugap:qualifieradalah kepadatan yang digunakan oleh perangkat android. Perangkat iOS menggunakanwidth & height parameter.

Ikon

Ada perangkat dengan berbagai ukuran yang memiliki sistem operasi seluler yang sama, jadi untuk menargetkan audiens dari satu platform, Anda juga perlu memberikan ikon dari semua jenis ponsel. Penting bagi kami untuk menyiapkan ikon dengan bentuk dan ukuran yang tepat seperti yang dipersyaratkan oleh sistem operasi seluler tertentu.

Di sini kami menggunakan folder res/icon/ios dan res/icon/android/drawable-xxxx..

Untuk menyelesaikan pekerjaan ini dengan cepat, Anda dapat membuat logo berukuran 1024x1024 dan masuk ke makeappicon.com. Situs web ini akan membantu Anda membuat logo dengan semua ukuran secara instan untuk platform Android dan iOS.

Setelah memberikan gambar ikon dengan ukuran 1024x1024, makeappicon.com harus menyediakan yang berikut -

Icons for iOS

Icons for Android

Situs web ini memberi Anda opsi untuk mengirim email semua logo dalam format zip ke depan pintu Anda (alias email, tentu saja!)