Adobe PhoneGap

Définition

PhoneGap est 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.

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 votre application mobile à l'aide d'un outil visuel plutôt qu'en ligne de commande.

Installer PhoneGap

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

CLI

• Utiliser la commande suivant : npm install -g phonegap

Application Windows/Mac

Télécharger l'application au lien suivant: Télécharger PhoneGap

L'application Mobile

L'application Mobile vous permettra d'avoir un rendu en temps réel de votre 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 information:

• 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 est 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ée et devrait apparaître dans liste des applications dans Phonegap.

Prévisualiser son App

Pour prévisualiser votre application mobile c'est très simple.

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. vous allez devoir insérer l'adresse IP qui était écrite 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".

Prévisualiser son App

Pour modifier votre application, il vous faut vous rendre dans le dossier contenant votre application mobile (voir Path). A l'intérieur du dossier se trouve les fichiers de votre application. 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.