Share
Vous voulez apprendre à utiliser PhoneGap, mais vous ne savez pas par où commencer? Rejoignez-nous lors de la création de "Sculder", un hommage non seulement à une excellente série télévisée de science-fiction, mais également à une application mobile native à part entière pour les croyants en vous!
Dans cette série, nous allons construire une application mobile utilisant certaines des fonctionnalités de PhoneGap. Nous allons passer de l’installation du SDK au déploiement dans les magasins d’applications des deux principales plates-formes: iOS et Android. Les concepts abordés dans cette série incluront l'accès à la caméra de l'appareil, au stockage local et à la géolocalisation.
Dans cette première partie, nous examinerons rapidement en quoi consiste PhoneGap et comment l’utiliser, puis nous examinerons l’installation du framework PhoneGap et des SDK dont nous avons besoin pour tester OS X, Windows et Linux. environnements. Nous allons ensuite construire et exécuter la très simple application PhoneGap "Hello World" pour nous assurer que tout fonctionne correctement..
A présent, vous avez probablement une bonne idée de ce qu'est PhoneGap et vous l'avez probablement même utilisé, mais sinon, voici un bref aperçu..
PhoneGap est né de iPhoneDevCamp en 2008, où il a été créé tout simplement parce qu'il n'y avait pas beaucoup de développeurs Objective-C par rapport aux développeurs Web. Le défi consistait à mettre en place un cadre permettant aux développeurs Web d'utiliser HTML, CSS et JavaScript pour coder des applications pouvant tirer parti des fonctionnalités natives du périphérique mobile, telles que les fonctionnalités Appareil photo, Stockage et Géolocalisation. Construit à l’origine pour fonctionner avec l’iPhone, PhoneGap a connu une croissance croissante et a commencé à prendre en charge Android également. Maintenant âgé de presque 4 ans, PhoneGap est l’un des kits de développement d’applications mobiles les plus en vogue. Il prend en charge une gamme beaucoup plus large d’appareils mobiles, notamment iOS, Android, Blackberry, Symbian, webOS, WP7 et Bada..
Au moment de la publication (par exemple, janvier 2012), la structure prenait actuellement en charge les API d'accéléromètre, d'appareil photo, de boussole, de contacts, de fichier, de géolocalisation, de média, de réseau, de notifications (alerte, son et vibration) et de périphérique de stockage. Toutes les fonctionnalités de ce type sont prises en charge dans les nouveaux appareils iOS (3GS +) et Android. Pour plus de détails sur la prise en charge des périphériques Blackberry, WP7, Sybian, webOS et Bada, consultez le tableau de compatibilité officiel..
En dépit de l'opinion contraire, PhoneGap n'est pas une solution en écriture unique, déployable partout (même si elle s'en rapproche). Il s’agit bien d’une infrastructure multiplate-forme pouvant fonctionner sur de nombreux périphériques pris en charge, mais pour réussir le déploiement, vous devrez probablement tester et affiner votre code sur chacun des périphériques cibles..
Si vous souhaitez développer pour iOS, vous aurez besoin d'un ordinateur basé sur Intel exécutant MAC OS X version 10.6 ou ultérieure. Vous aurez également besoin de la dernière version de Xcode (la version 4 au moment de la rédaction) et du SDK iOS pour les tests. Pour télécharger Xcode, vous devez vous inscrire en tant que membre du programme pour développeurs Apple..
Rendez-vous sur www.phonegap.com et dans le coin supérieur gauche, vous verrez un bouton pour télécharger la dernière version de PhoneGap. En cliquant dessus, vous téléchargerez un fichier ZIP contenant tout ce dont vous avez besoin pour commencer..
En décompressant le fichier, vous obtiendrez de nombreux dossiers portant chacun le nom du système d'exploitation ciblé. Lors de l'installation pour iOS, ouvrez le dossier iOS et montez le dossier Dmg fichier. le Dmg contient un pkg fichier. Cliquez dessus et suivez le processus d'installation. Une fois l'installation terminée, vous pouvez lancer Xcode et, lorsque vous créez un nouveau projet, vous devriez pouvoir choisir PhoneGap comme modèle..
Nous pouvons maintenant définir les options pour notre projet et l'emplacement de nos fichiers. Une fois que nous avons terminé, notre projet est construit dans le répertoire spécifié et Xcode nous présente notre page de résumé. Ici, nous pouvons facilement ajouter des icônes d'application et modifier quelques paramètres lorsque notre application est prête à être empaquetée et soumise à la boutique d'applications. Pour l'instant, nous allons simplement appuyer sur RUN dans le coin supérieur gauche. Cela va compiler l'application et lancer le simulateur iOS.
Si vous essayez cela maintenant, après l’écran de démarrage, vous devriez recevoir une erreur indiquant que le index.html fichier n'a pas pu être trouvé. Pas besoin de s'inquiéter, c'est ce qui devrait arriver. Nous devons aller au répertoire de travail du projet (clic droit sur le projet dans Xcode et cliquer sur afficher dans le chercheur) et nous y verrons un www répertoire dans la racine du projet.
Nous devons maintenant faire glisser ce répertoire dans Xcode et l'ajouter au projet..
Dans les options de ces fichiers, vous devez vous assurer que vous sélectionnez "Créer une référence de dossier pour tous les dossiers ajoutés", puis cliquez sur Terminer. Notre www Le répertoire est maintenant ajouté au projet. Nous pouvons maintenant cliquer sur exécuter à nouveau et vous obtiendrez la base "Hello World" pour PhoneGap.
le www Le répertoire sera maintenant notre répertoire racine pour l'application. C’est là que nous conserverons tout code HTML, CSS ou JavaScript qui sera utilisé par notre application, comme vous le feriez pour toute autre application Web. le phonegap.js fichier est le fichier JavaScript qui agira en tant qu'API, nous donnant accès aux API natives que nous pourrions utiliser ultérieurement dans notre application..
Contrairement au développement pour iOS, vous pouvez développer pour Android sur n’importe quelle plate-forme. Bien qu'il soit conseillé d'utiliser l'EDI Eclipse avec quelques plug-ins, il existe un autre moyen d'utiliser PhoneGap (via la ligne de commande), mais il est judicieux de commencer par le plus long chemin avec un IDE, puis de l'essayer. la ligne de commande et voyez laquelle vous préférez. Dans ce tutoriel, nous utiliserons la méthode IDE.
Tout d'abord, vous devrez vous rendre sur le site Web Eclipse et télécharger l'IDE pour la plate-forme de votre choix. La version classique convient à nos besoins. Une fois téléchargé, démarrez Eclipse et vous devez installer le plugin ADT. Vous devez aller à Aide => Installer un nouveau logiciel et cliquez sur ajouter dans le coin droit.
Vous pouvez ensuite entrer ADT Plugin pour le nom du plugin et saisir les informations suivantes pour l'URL du référentiel.
https://dl-ssl.google.com/android/eclipse/
Le plugin va télécharger et installer et Eclipse vous demandera de redémarrer. Une fois qu'il redémarre, vous pouvez créer un nouveau projet Android..
Vous passerez ensuite par l'assistant de projet où vous donnerez un nom à votre application et configurerez son espace de travail. vous sélectionnerez également votre SDK cible de construction - vous pouvez sélectionner le dernier pour l'instant (4.0.3 au moment de la rédaction). Parcourez le reste de l'assistant et configurez les informations restantes pour l'application..
On vous demandera si vous souhaitez télécharger et installer les kits de développement Android requis à ce stade. Si vous les avez déjà sur votre ordinateur, continuez et naviguez jusqu'au dossier. Sinon, vous pouvez laisser Eclipse les télécharger pour vous..
Dans le répertoire racine de l'application, nous devons créer un répertoire appelé les couvercles et dans le répertoire assets, créez un autre répertoire appelé www. Maintenant, revenez au fichier PhoneGap d'origine qui a été téléchargé et dans le dossier Android, vous devez copier le fichier. phonegap.jar déposer au libs répertoire que nous avons créé, puis copions le phonegap.js au www annuaire.
Votre structure devrait ressembler à ceci:
Au sein de notre www répertoire, créer un index.html déposer et déposer dans le code ci-dessous:
mobiletuts phonegap Bienvenue sur PhoneGap
Editer les assets / www / index.html
Maintenant, nous devons apporter quelques modifications au fichier Java principal qui peut être trouvé dans le src dossier. Tout d'abord, nous devons changer de classe ' étendre de Activité à DroidGap.. Nous devons ensuite remplacer setContentView (R.layout.main); avec super.loadUrl ("fichier: ///android_asset/www/index.html"); puis ajouter importer com.phonegap. *; après les deux premières importations. Votre fichier Java une fois terminé devrait ressembler à ceci:
Accentsconagua
package com.shaundunneTest; importer android.app.Activity; importer android.os.Bundle; importer com.phonegap. *; Classe publique TestActivity étend DroidGap / ** Appelé lorsque l'activité est créée pour la première fois. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); super.loadUrl ("fichier: ///android_asset/www/index.html"); Eclipse va probablement lancer quelques erreurs maintenant, faites un clic droit sur le dossier libs et allez à Chemin de construction => Configurer le chemin de construction puis dans l'onglet Bibliothèques, cliquez sur ajouter JAR et aller de l'avant et inclure le phonegap.jar fichier. Cela devrait effacer les erreurs. Maintenant, nous devons ajouter des autorisations au fichier manifeste pour nous assurer que PhoneGap fonctionnera correctement..
Ouvrez le AndroidManifest.xml déposer et ajouter ce qui suit avant la application entrée:
Sur la balise d'activité, ajoutez l'attribut suivant:
android: configChanges = "orientation | keyboardHidden"
Cela garantit que l'application ne recharge pas le index.html à tout moment ces événements se produisent.
La dernière chose à faire est de copier le xml dossier du téléchargement de PhoneGap vers le res répertoire dans le projet. Vous êtes maintenant prêt à exécuter ceci dans l'émulateur.
Vous pouvez cliquer avec le bouton droit sur votre projet maintenant et courir comme une application Android. Si vous n'avez pas encore configuré d'appareil, vous serez invité à le faire. Si vous avez besoin d'aide, consultez la documentation ici.
Et c'est tout ce dont vous avez besoin pour démarrer sur Android!
Jusqu'à présent, nous n'avons couvert que deux des plates-formes mobiles de notre application, mais il est probable que nous voudrions distribuer sur toutes les plates-formes prises en charge par PhoneGap, n'est-ce pas? Eh bien, au lieu d'installer quelques SDK supplémentaires, un autre IDE avec quelques plugins supplémentaires et de configurer une machine virtuelle à des fins de test, cette série utilisera le service PhoneGap: Build au moment de la distribution de l'application..
PhoneGap: Build, comme il est indiqué sur le site Web, est un service basé sur le cloud qui prend une application HTML / CSS / JS compressée et vous renvoie l’application, compilée et prête à être distribuée (une mise en garde: pour Android, iOS et BB, vous aurez besoin des certificats requis pour la distribution). PhoneGap: La version actuelle est en version bêta, et bien qu’il existe des options payantes (qui valent bien la peine d’être utilisées régulièrement), il existe une option gratuite qui permet une application privée. C'est tout ce dont nous avons besoin pour notre projet en ce moment, alors n'hésitez plus et inscrivez-vous maintenant car nous utiliserons le service Build à la fin de la série..
Notre environnement est maintenant prêt pour le développement avec PhoneGap. Dans la prochaine partie de cette série, nous commencerons par examiner les API auxquelles PhoneGap nous permet d'accéder et comment les utiliser dans notre application..
