PhoneGap - Configuration de l'environnement

Dans ce chapitre, nous allons apprendre à configurer un environnement de base afin de créer des applications sans effort. Bien que PhoneGap prenne en charge la création hors ligne d'applications à l'aide de l' interface de ligne de commande Cordova et du mécanisme de référentiel Github , nous nous concentrerons sur la procédure d'effort minimum.

Nous supposons que vous maîtrisez bien les technologies Web et que votre application Web est prête à être expédiée en tant qu'application. Comme PhoneGap ne prend en charge que HTML, CSS et JavaScript, il est obligatoire que l'application soit créée à l'aide de ces technologies uniquement.

Du point de vue d'un développeur, une application doit inclure les éléments suivants dans son package -

  • Fichiers de configuration
  • Icônes pour l'application
  • Information ou contenu (construit à l'aide des technologies Web)

Configuration

Notre application Web n'aura besoin que d'un seul fichier de configuration qui devrait être suffisant pour configurer tous ses paramètres nécessaires. Son nom est config.xml. Ce fichier contient toutes les informations nécessaires à la compilation de l'application.

Voyons config.xml pour notre exemple -

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

Tout le contenu de la configuration est enveloppé dans la balise <widget>. Une brève description de ceux-ci est la suivante -

<widget id = ”app_id”>

id est votre identifiant d'application réservé sur divers magasins d'applications. C'est dans le style de nom de domaine inversé, c'est-à-dire com.tutorialspoint.onlineviewer, etc.

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

Il s'agit du numéro de version de l'application au format xyz où (x, y, z) sont des entiers positifs, c'est-à-dire 1.0.0, il représente le système de version major.minor.patch.

<name> App Name</name>

Il s'agit du nom de l'application, qui sera affiché sous l'icône de l'application sur l'écran du mobile. Votre application peut être recherchée en utilisant ce nom.

<description> My First Web App </description>

Ceci est une brève description de ce qu'est l'application et de ce qu'elle est.

<author> Author_Name </author>

Ce champ contient le nom du créateur ou du programmeur, généralement défini sur le nom de l'organisation qui lance cette application.

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

La balise de préférences est utilisée pour définir diverses options telles que Plein écran, BackgroundColor et Orientation pour l'application. Ces options sont dans la paire nom et valeur. Par exemple: name = "FullScreen" value = "true" etc. Comme nous n'avons besoin d'aucun de ces paramètres avancés, nous ne mettons aucune autorisation.

<icon>

Nous permet d'ajouter des icônes à nos applications. Il peut être codé de différentes manières, mais puisque nous apprenons des raccourcis de tout, alors le voici. le.srcdétermine le chemin de l'image de l'icône. legap:platformdétermine pour quelle plate-forme OS cette icône doit être utilisée. legap:qualifierest la densité utilisée par les appareils Android. Les appareils iOS utilisentwidth & height paramètres.

Icônes

Il existe des appareils de différentes tailles ayant le même système d'exploitation mobile, donc pour cibler un public d'une plate-forme, vous devez également fournir des icônes de tous les types de mobiles. Il est important que nous préparions des icônes de formes et de tailles exactes selon les besoins du système d'exploitation mobile particulier.

Ici, nous utilisons les dossiers res/icon/ios et res/icon/android/drawable-xxxx..

Pour faire ce travail rapidement, vous pouvez créer un logo de taille 1024x1024 et vous connecter à makeappicon.com. Ce site Web vous aidera à créer instantanément des logos de toutes tailles pour les plates-formes Android et iOS.

Après avoir fourni une image d'icône de taille 1024x1024, makeappicon.com devrait fournir ce qui suit -

Icons for iOS

Icons for Android

Ce site Web vous offre la possibilité d'envoyer par e-mail tous les logos au format zip à votre porte (aka e-mail, bien sûr!)