PhoneGap - Configurazione dell'ambiente

In questo capitolo impareremo come configurare l'ambiente di base per creare app senza sforzo. Sebbene PhoneGap supporti la creazione offline di app utilizzando l' interfaccia a riga di comando di Cordova e il meccanismo di repository Github , ci concentreremo sulla procedura con il minimo sforzo.

Partiamo dal presupposto che tu sia esperto di tecnologie web e che la tua applicazione web sia pronta per essere spedita come app. Poiché PhoneGap supporta solo HTML, CSS e JavaScript, è obbligatorio che l'applicazione venga creata utilizzando solo queste tecnologie.

Dal punto di vista di uno sviluppatore, un'app dovrebbe avere i seguenti elementi inclusi nel suo pacchetto:

  • File di configurazione
  • Icone per app
  • Informazioni o contenuti (realizzati utilizzando tecnologie web)

Configurazione

La nostra app web avrà bisogno di un solo file di configurazione che dovrebbe essere adeguato per configurare tutte le sue impostazioni necessarie. Il suo nome è config.xml. Questo file contiene tutte le informazioni necessarie richieste per compilare l'app.

Vediamo config.xml per il nostro esempio -

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

Tutti i contenuti della configurazione sono racchiusi nel tag <widget>. Una breve descrizione di questi è la seguente:

<widget id = ”app_id”>

id è il tuo app-id riservato su vari app store. È nello stile del nome di dominio inverso, ad esempio com.tutorialspoint.onlineviewer ecc.

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

Questo è il numero di versione dell'app in formato xyz dove (x, y, z) sono numeri interi positivi cioè 1.0.0, rappresenta il sistema di versione major.minor.patch.

<name> App Name</name>

Questo è il nome dell'app, che verrà visualizzato sotto l'icona dell'app sullo schermo del cellulare. La tua app può essere cercata usando questo nome.

<description> My First Web App </description>

Questa è una breve descrizione di cosa tratta l'app e di cosa è.

<author> Author_Name </author>

Questo campo contiene il nome del creatore o del programmatore, generalmente impostato sul nome dell'organizzazione che sta avviando questa app.

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

Il tag delle preferenze viene utilizzato per impostare varie opzioni come FullScreen, BackgroundColor e Orientation per l'app. Queste opzioni sono in nome e coppia di valori. Ad esempio: name = "FullScreen" value = "true" ecc. Poiché non abbiamo bisogno di nessuna di queste impostazioni avanzate, abbiamo semplicemente assegnato le autorizzazioni a nessuna.

<icon>

Ci permette di aggiungere icone alle nostre app. Può essere codificato in vari modi, ma dal momento che stiamo imparando la scorciatoia di tutto, eccolo qui. Il.srcdetermina il percorso dell'immagine dell'icona. Ilgap:platformdetermina per quale piattaforma OS utilizzare questa icona. Ilgap:qualifierè la densità utilizzata dai dispositivi Android. I dispositivi iOS utilizzanowidth & height parametri.

Icone

Esistono dispositivi di varie dimensioni che hanno lo stesso sistema operativo mobile, quindi per rivolgersi a un pubblico di un'unica piattaforma è necessario fornire anche icone di tutti i tipi di cellulari. È importante preparare icone di forme e dimensioni esatte come richiesto da un particolare sistema operativo mobile.

Qui stiamo usando le cartelle res/icon/ios e res/icon/android/drawable-xxxx..

Per completare velocemente questo lavoro, puoi creare un logo di dimensioni 1024x1024 e accedere a makeappicon.com. Questo sito web ti aiuterà a creare istantaneamente loghi di tutte le dimensioni sia per la piattaforma Android che per quella iOS.

Dopo aver fornito l'immagine dell'icona di dimensioni 1024x1024, makeappicon.com dovrebbe fornire quanto segue:

Icons for iOS

Icons for Android

Questo sito Web ti offre un'opzione per inviare via e-mail tutti i loghi in formato zip a casa tua (alias e-mail, ovviamente!)