Adobe PhoneGap

Définition

PhoneGap était un framework open source développé par Adobe permettant le développement d'application mobile hybride avec les technologies traditionnelle du web, c'est-à-dire le HTML, le CSS et le JavaScript. Historiquement, les plateformes supportées étaient Android, iOS et Windows Phone. L’outil était disponible en anglais.

Historique

C'est l'entreprise Nitobi Software qui est à l'origine du projet PhoneGap. Ils seront par la suite racheté par Adobe.

En 2011, le projet PhoneGap est offert à la Foundation Apache. Il deviendra ce qui est aujourd'hui Apache Cordova. PhoneGap devient ensuite une distribution de Cordova et offre des services additionnels tels que PhoneGap Build qui permet la compilation de l’application mobile à l'aide d'un outil visuel plutôt qu'en ligne de commande.

Depuis le 1er octobre 2020, Adobe a interrompu le service de PhoneGap, PhoneGap Build et Apache Cordova. PhoneGap demeure gratuit et open source, mais n’est donc plus développé et l’outil est aujourd’hui obsolète en raison des mises à jour des systèmes d’exploitation d’Android, iOS et Windows Phone. PhoneGap Build n’étant pas open source, la distribution du logiciel a pris fin le 1er octobre 2020.

Adobe PhoneGap demeure cependant utilisé dans la suite Adobe Expérience Manager (AEM).

Installer PhoneGap

PhoneGap pouvait être installé de deux façons:

CLI

• En utilisant la commande npm suivante :

npm install -g phonegap

Application Windows/Mac

• en téléchargeant l'application en suivant le lien suivant: Télécharger PhoneGap

L'application mobile

L'application mobile permettait d'avoir un rendu en temps réel de l’application durant le développement.

Vous pouvez trouver les différentes versions aux liens suivants:

• Android: PhoneGap - Play Store
• iOS: PhoneGape - AppStore
• Windows Phone: PhoneGap - Windows Store

Créer une App

Pour commencer, il faut ouvrir l'application desktop que vous avez installé. Dans le menu de gauche, vous pouvez cliquer sur le petit + et choisir "Create new PhoneGap project..."

Vous allez ensuite voir une série de template qui vous sera proposé.

Pour commencer, choisissez "Hello World". Cliquez ensuite sur le bouton "Next" Vous allez maintenant devoir renseigner plusieurs informations:

• Local path: choisissez le dossier de destination pour votre application ;
• Name: choisissez le nom de l'application (Ce nom sera utilisé lors de la publication de votre application) ;
• ID: vous pouvez laissez ce qui vous est proposé, l’ID étant l'identifiant unique de votre application. En règle générale, on utilise le format du reverse domain name. EXEMPLE: www.google.com donnerait com.google.www).

Une fois ces trois champs remplis, cliquez sur "Create Project"

Votre application est maintenant créé et devrait apparaître dans la liste des applications dans Phonegap.

Modifier son App

Pour modifier votre application, il vous faut vous rendre dans le dossier contenant votre application mobile (voir Local path). A l'intérieur du dossier se trouve les fichiers de votre application (voir Name). Pour la modifier, il suffit simplement d'ouvrir les différents fichiers à l'aide d'un éditeur de texte et de modifier le code HTML, CSS ou Javascript comme vous le feriez pour un site Web.

Prévisualiser son App

Pour prévisualiser votre application mobile, il convient de suivre les étapes suivantes :

• Dans l'application Phonegap, vérifiez que le petit symbol > est bien vert. Cela veut dire que votre application est lancée (pour l'arrêter, cliquez simplement sur le carré).

• Tout en bas de l'application Phonegap, dans un bandeau vert, vous devriez voir "Server is running on http://" suivi d'une adresse IP.

• Notez cette adresse.

• Lancez ensuite l'application Phonegap sur votre smartphone.

• Insérez l'adresse IP précédemment copiée dans l'application Phonegap sur votre desktop.

• Cliquez ensuite sur le bouton "Connect" sur l'application Phonegap sur votre Smartphone.

Après quelques secondes, vous devriez voir apparaître le logo Phongap avec écrit "Phonegap" et "Device is Ready".