PhoneGap - Guide rapide

Les appareils mobiles, portables et faciles à transporter ont lancé une nouvelle révolution dans l'ingénierie logicielle. Ces appareils petits mais efficaces sont capables d'exécuter des applications créées avec des langages de programmation haut de gamme. Les personnes qui possèdent ces appareils ont tendance à les utiliser au maximum, car ces appareils, tels que les téléphones portables, sont très pratiques à utiliser à tout moment, n'importe où.

L'architecture d'un appareil mobile est similaire à celle d'un système informatique. Il dispose d'un matériel, d'un micrologiciel et de systèmes d'exploitation personnalisés.

Ces trois éléments sont pour la plupart exclusifs et sont conçus, développés et assemblés sous une seule organisation phare. Les applications (logiciels d'application) sont développées à la fois par une organisation phare et des développeurs extérieurs à l'organisation.

Un certain nombre de systèmes d'exploitation mobiles bien connus sont disponibles sur le marché dans les catégories propriétaires et open source. Les systèmes d'exploitation mobiles les plus largement utilisés sont -

  • Android
  • IOS
  • BlackBerry
  • Windows

Chaque système d'exploitation mobile fournit son propre ensemble d'outils et d'environnements pour développer des applications qui s'exécuteront sur eux. Les applications créées pour un système d'exploitation ne peuvent pas fonctionner sur une autre plate-forme car elles sont entièrement différentes. Les développeurs ont tendance à couvrir tous les principaux systèmes d'exploitation mobiles afin d'améliorer l'accessibilité parmi leurs utilisateurs.

Ainsi, il devient une tâche fastidieuse de développer un programme d'application qui peut fonctionner sur toutes les principales plates-formes OS, en gardant son aspect, sa convivialité et ses fonctionnalités identiques sur toutes les plates-formes. Pour ce travail, un développeur doit comprendre toutes les plates-formes et doit avoir une bonne compréhension des principaux outils de développement pour différents systèmes d'exploitation.

PhoneGap

PhoneGap peut être considéré comme une solution à tous les problèmes mentionnés ci-dessus. PhoneGap est un framework qui permet aux développeurs de développer leurs applications à l'aide d'API Web standard pour tous les principaux systèmes d'exploitation mobiles. Il est open-source et gratuit.

Les développeurs doivent uniquement connaître le développement Web en utilisant HTML, CSS et JavaScript. PhoneGap s'occupe du reste du travail, comme l'apparence et la convivialité de l'application et la portabilité entre divers systèmes d'exploitation mobiles.

En utilisant PhoneGap, on peut créer des applications pour tous les principaux systèmes d'exploitation mobiles tels qu'Apple iOS, Android, BlackBerry, Windows, etc. pour coder l'application à partir de zéro.

PhoneGap permet à ses utilisateurs de télécharger le contenu des données sur le site Web et le convertit automatiquement en divers fichiers d'application.

Dans ce didacticiel, nous verrons comment créer une application pour les plates-formes Apple, Android et Windows en ligne sans utiliser d'outil hors ligne.

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!)

Les sites Web hors ligne sont copiés sur le disque dur local et accessibles chaque fois que l'utilisateur en a besoin sans aucune connexion Internet. De même, cette application Web hors ligne vous permettra de créer une application Web qui est téléchargée dans son intégralité sur les appareils mobiles d'un utilisateur qui peut y accéder hors ligne.

Une application pour ce type d'application peut inclure une application ayant une collection d'histoires, de courts tutoriels ou tout autre contenu hors ligne intéressant les utilisateurs, qu'il / elle peut lire hors ligne même lorsque Internet n'est pas disponible.

App hors ligne

L'image suivante représente la structure de dossiers pour l'application hors connexion. Dans le répertoire racine, il ne nécessite que deux fichiers, config.xml et index.xml.

Le config.xml contient les paramètres de configuration de l'application que nous avons appris dans la section précédente. Le fichier index.html contient la page d'accueil du contenu Web.

Une chose importante à apprendre ici est que tous les liens à l'intérieur de tous les fichiers html ne doivent contenir que des chemins relatifs. Autrement dit, aucun chemin absolu ou balise href de base ne doit être présent.

Application en ligne

L'image suivante montre la structure des dossiers pour que notre application soit en mode en ligne. En mode en ligne, tout le contenu Web est chargé à partir du site Web Internet.

Vous remarquerez peut-être que dataLe dossier est manquant dans l'application en mode en ligne, car tous les fichiers résident sur le serveur réel et sont accessibles via Internet. Le fichier index.html contient les liens réels tels qu'il les contient sur le serveur Web et tous ses liens sont soit absolus, soit utilisés avecbase href marque.

Après avoir décidé du mode de votre application et organisé ses fichiers dans la structure de fichiers mentionnée ci-dessus, vous devez compresser votre fichier avec n'importe quel outil zip standard et l'enregistrer. Nous utiliserons ce fichier dans la section suivante.

Signez votre application

Il est essentiel que toute application soit signée par ses développeurs ou par l'organisation en développement pour garder les choses en ordre. Pour cette raison, vous devez signer votre application. Tu pourrais avoir besoin dekeytool qui fait partie de la distribution Java standard.

Exécutez la commande suivante dans% JAVA_HOME% dans votre invite de commande Windows ou Linux Shell -

keytool -genkey -v -keystore my_keystore.keystore 
   -alias TutorialsPoint -keyalg RSA -keysize 2048 -validity 10000

Cela devrait générer le fichier my_keystore.keystore, dont nous aurons besoin dans la section suivante.

Nous sommes maintenant prêts à compiler notre première application en mode rapide basée sur l'API Web. Dans ce dernier segment, nous découvrirons le processus de transformation de notre contenu Web en un format d'application, qui peut être téléchargé sur les magasins d'applications en ligne.

PhoneGap accepte la connexion utilisateur créée sur GitHub ou à l'aide d'AdobeID. GitHub est un service de référentiel où les utilisateurs peuvent télécharger leur contenu et les utiliser en fournissant leurs références URL. Par exemple, le contenu que nous venons de créer peut être téléchargé sur GitHub puis l'appeler directement vers PhoneGap.

Les étapes suivantes expliquent comment créer un ID Adobe.

Créer un identifiant Adobe

Allez sur www.build.phonegap.com et cliquez sur S'inscrire

Une nouvelle fenêtre s'ouvrira comme indiqué ci-dessous -

Remplissez vos coordonnées et cliquez sur vous inscrire. Vous pouvez maintenant vous connecter avec le même identifiant d'utilisateur à PhoneGap. Par défaut, cette page doit mener à la console PhoneGap comme indiqué ci-dessous -

Cliquez sur «Télécharger un fichier .zip» et téléchargez le fichier .zip que nous avons créé, qui contient l'intégralité du contenu Web et des configurations. Vous devriez voir la fenêtre suivante après un téléchargement réussi -

Vous pouvez voir instantanément que l'application iOS a échoué son traitement car nous n'avons fourni aucune clé signée. Nous nous concentrons uniquement sur Android et vous pouvez voir qu'il a été créé par PhoneGap. Cette application ne peut pas être téléchargée sur Google Store car elle n'est pas signée par clé.

Cliquez sur l'icône Android et l'écran suivant devrait apparaître -

Cliquez sur le menu d'options déroulant à côté de l'icône Android qui indique Aucune clé sélectionnée, cliquez sur Ajouter une clé et l'écran suivant devrait apparaître -

Fournissez le titre et l'alias de votre choix et cliquez sur le fichier Keystore. Fournissez le fichier de keystore créé dans la dernière section. Cliquez ensuite sur le bouton «Reconstruire» à côté.

L'application créée par ce processus peut être directement téléchargée sur Google Play. Cliquez sur le fichier .apk et vous pouvez télécharger votre première application gratuite basée sur le Web.

Avant le téléchargement, l'application doit être testée sur des appareils virtuels ou réels.