PhoneGap - Ortam Kurulumu

Bu bölümde, uygulamaları zahmetsizce yapmak için temel ortamı nasıl kuracağımızı öğreneceğiz. PhoneGap, Cordova komut satırı arayüzü ve Github depo mekanizmasını kullanarak uygulamaların çevrimdışı oluşturulmasını desteklese de , minimum çaba prosedürüne odaklanmalıyız.

Web teknolojileri konusunda bilgili olduğunuzu ve web uygulamanızı uygulama olarak gönderilmeye hazır hale getirdiğinizi varsayıyoruz. PhoneGap yalnızca HTML, CSS ve JavaScript desteklediğinden, uygulamanın yalnızca bu teknolojiler kullanılarak oluşturulması zorunludur.

Bir geliştiricinin bakış açısından, bir uygulamanın paketinde şu öğeler bulunmalıdır:

  • Yapılandırma dosyaları
  • Uygulama simgeleri
  • Bilgi veya içerik (web teknolojileri kullanılarak oluşturulmuş)

Yapılandırma

Web uygulamamız, tüm gerekli ayarlarını yapılandırmak için yeterli olması gereken tek bir yapılandırma dosyasına ihtiyaç duyacaktır. Adı config.xml'dir. Bu dosya, uygulamayı derlemek için gerekli tüm gerekli bilgileri içerir.

Örneğimiz için config.xml'ye bakalım -

<?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>

Tüm konfigürasyon içerikleri <widget> etiketi içine alınır. Bunların kısa açıklaması aşağıdaki gibidir -

<widget id = ”app_id”>

id, çeşitli uygulama mağazalarında rezerve edilmiş uygulama kimliğinizdir. Ters alan adı stilindedir, yani com.tutorialspoint.onlineviewer vb.

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

Bu, xyz biçimindeki uygulamanın sürüm numarasıdır, burada (x, y, z) pozitif tamsayılardır, yani 1.0.0, major.minor.patch sürüm sistemini temsil eder.

<name> App Name</name>

Bu, mobil ekranda uygulama simgesinin altında görüntülenecek olan uygulamanın adıdır. Uygulamanız bu isim kullanılarak aranabilir.

<description> My First Web App </description>

Bu, uygulamanın ne hakkında olduğu ve ne olduğu hakkında kısa bir açıklama.

<author> Author_Name </author>

Bu alan, genellikle bu uygulamayı başlatan kuruluşun adına ayarlanan oluşturucu veya programcının adını içerir.

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

Tercihler etiketi, uygulama için FullScreen, BackgroundColor ve Orientation gibi çeşitli seçenekleri ayarlamak için kullanılır. Bu seçenekler isim ve değer çifti halindedir. Örneğin: name = "FullScreen" value = "true" vb. Bu gelişmiş ayarların hiçbirine ihtiyaç duymadığımız için, izinleri hiçbirine koymuyoruz.

<icon>

Uygulamalarımıza simge eklememize izin verir. Çeşitli şekillerde kodlanabilir, ancak her şeyin kısa yolunu öğrendiğimiz için, işte burada. .srcsimge görüntüsünün yolunu belirler. gap:platformbu simgenin hangi işletim sistemi platformu için kullanılacağını belirler. gap:qualifierandroid cihazlar tarafından kullanılan yoğunluktur. İOS cihazlar şunu kullanır:width & height parametreleri.

Simgeler

Aynı mobil işletim sistemine sahip çeşitli boyutlarda cihazlar vardır, bu nedenle tek bir platformun hedef kitlesini hedeflemek için tüm mobil cihaz türlerinin simgelerini de sağlamanız gerekir. Belirli mobil işletim sisteminin gerektirdiği şekilde tam şekil ve boyutta simgeler hazırlamamız önemlidir.

Burada klasörleri kullanıyoruz res/icon/ios ve res/icon/android/drawable-xxxx..

Bu işi hızlı bir şekilde yapmak için 1024x1024 boyutunda bir logo oluşturabilir ve makeappicon.com'da oturum açabilirsiniz. Bu web sitesi, hem android hem de iOS platformu için anında her boyutta logo oluşturmanıza yardımcı olacaktır.

1024x1024 boyutunda simge görüntüsü sağladıktan sonra makeappicon.com aşağıdakileri sağlamalıdır -

Icons for iOS

Icons for Android

Bu web sitesi size tüm logoları zip formatında e-postayla kapınıza gönderme seçeneği sunar (tabii ki e-posta olarak da bilinir!)