Création d'une application Hello World Android avec PhoneGap

PhoneGap est une plate-forme open source qui vous permet de créer des applications mobiles multiplates-formes avec HTML, JavaScript et CSS. Afin d'interagir avec le matériel de l'appareil, PhoneGap fournit une API JavaScript qui interagira avec des fonctionnalités telles que la caméra embarquée, le GPS et l'accéléromètre.. 

Même si PhoneGap est idéal pour développer des applications multiplates-formes, le code permettant de développer des applications tout en ciblant une plate-forme ou une autre variera. Une des plus grandes différences à surmonter est la configuration logicielle requise. 

Ce didacticiel présentera une analyse détaillée de la configuration de votre environnement de développement pour Android et créera une application simple "Hello World"..

Si vous voulez aller plus loin avec PhoneGap, consultez la gamme de scripts PhoneGap et de modèles d’application sur Envato Market..

Exigences PhoneGap pour le développement Android

JDK Java

Vous devrez installer le kit de développement Java (JDK). Suivez les instructions officielles pour la mise en place.

SDK Android

Vous aurez également besoin du kit de développement logiciel Android. Lorsque vous installez le Kit de développement logiciel (SDK), vous devez définir le programme android-sdk.-/ outils pour votre variable utilisateur PATH.

Éclipse

Vous devrez télécharger et installer Eclipse si vous ne l'avez pas déjà sur votre ordinateur..

Eclipse ADT Plugin

Vous devrez également installer le plug-in ADT pour Eclipse. ADT (Android Development Tools) est un plug-in d'éclipse qui fournit un IDE complet pour le développement d'applications Android. ADT vous permet de créer de nouveaux projets Android, ainsi que de créer des projets Android à partir de sources existantes (c'est ainsi que nous ouvrirons notre application PhoneGap pour Android sur Eclipse). En utilisant ADT, vous pouvez également déboguer une application Android. Comme ADT est bien intégré au SDK Android, l'application exécutant l'application à partir de l'EDI lance directement l'émulateur Android..

Pour installer ADT, cliquez sur "installer un nouveau logiciel" dans la fenêtre d'aide de votre Eclipse et entrez sur le site suivant: http://dl-ssl.google.com/android/eclipse/. Suivez ensuite l’assistant présenté pour installer ADT.

Plateformes et composants Android

Une fois que vous avez installé ADT, vous devez installer la plate-forme Android et d'autres composants. Pour ce faire, allez dans la fenêtre des options de menu-> Gestionnaire Android DK et AVD et sélectionnez la plate-forme et le niveau de l'API. Android api 2.2 est le plus tard au moment de la rédaction de cet article.

Apache Ant

Si Apache Ant n'est pas installé sur votre ordinateur, vous pouvez le télécharger à l'adresse http://ant.apache.org/bindownload.cgi. Pour l'installer, il vous suffira d'extraire le fichier Zip téléchargé et de définir le dossier bin dans le répertoire ant de votre variable PATH..

Rubis

Si Ruby n’est pas installé, vous pouvez le télécharger à partir de ce programme d’installation gratuit. Une fois installé, ajoutez le chemin Ruby / bin dans les variables PATH de votre compte..

Cadre PhoneGap

Bien entendu, vous aurez également besoin du framework PhoneGap.

Création de votre espace de travail de développement

Vérification des variables d'environnement:

Les chemins suivants doivent être définis dans la variable PATH de votre compte:

  • votre chemin_système / jdk / bin
  • your_system_path / android-sdk / tools
  • votre chemin_system / ruby ​​/ bin
  • votre chemin_système / apache-ant / bin

En dehors de ceux-ci, vous devrez également définir les variables suivantes:

  • JAVA_HOME - chemin de votre répertoire JDK
  • ANT_HOME - chemin de votre répertoire apache-ant
  • ANDROID_HOME - chemin d'accès à votre répertoire SDK Android.

Pour créer un espace de travail pour votre application PhoneGap sur Android, accédez au dossier «phonegap-android» à l'invite de commande ou au terminal:

ruby ./droidgap "[android_sdk_path]" [nom] [nom_package] "[www]" "[chemin]"
  • android_sdk_path: Où vous avez installé le SDK
  • prénom: Le nom à donner à la nouvelle application.
  • nom du paquet: Le nom que vous voulez donner à votre application.
  • www: Le dossier à partir duquel vous souhaitez copier les fichiers de votre application PhoneGap.
  • chemin: L'espace de travail de l'application pour votre projet.

Une fois que vous exécutez la commande et si tout se passe bien, les messages indiqués ci-dessous seront visibles:

Ce qui précède devrait créer un espace de travail complet pour votre application Android PhoneGap..

Configurez votre projet dans Eclipse

Une fois que cela est fait, cet espace de travail peut être ouvert dans eclipse. Dans Eclipse, choisissez Nouveau projet, puis choisissez Projet Android..

Sélectionnez ensuite "créer un projet à partir d'une source existante" et attribuez-lui un nom, comme indiqué ci-dessous..

Si vous essayez de construire et d'exécuter le projet dans Eclipse, vous obtiendrez une erreur de construction. En effet, vous n'avez pas ajouté la bibliothèque externe (phonegap.jar) créée dans le dossier libs de votre espace de travail..

Pour ajouter cette bibliothèque externe, cliquez avec le bouton droit de la souris sur le projet et sélectionnez Chemin de construction-> Ajouter une archive externe, puis sélectionnez le fichier phonegap.jar dans votre dossier libs..

Si tout se passe bien, cela devrait supprimer toutes les erreurs de construction de votre projet. Maintenant, essayez d'exécuter votre projet dans l'émulateur. Vous devriez voir l'écran ci-dessous. En effet, vous n'avez ajouté aucun fichier PhoneGap HTML ou JavaScript dans votre projet..

Dans le dossier assets / www de l'espace de travail, il y aura déjà un fichier appelé phonegap.js. Dans ce dossier, créez un fichier appelé index.html avec le code suivant:

     Application Android PhoneGap      

Dans le code la ligne:

inclut le fichier phonegap.js qui vous permet d’appeler des API natives d’android. Lors du chargement du corps, la fonction init enregistre la fonction showMessageBox sur l'événement PhoneGap deviceready qui est déclenché lorsque phonegap a effectué le traitement pour tout initialiser pour votre programme afin qu'il puisse appeler les API PhoneGap. La fonction showMessageBox appelle l’API PhoneGap navigator.notification.alert qui affiche la boîte de message à l’écran. Si vous exécutez l'application après avoir ajouté le fichier index.html et actualisé le projet dans Eclipse, l'écran suivant s'affiche:

Ajoutons maintenant quelques fonctionnalités supplémentaires à notre application. Le code suivant crée une zone de texte permettant de saisir le nom de la personne. Un clic sur ce bouton permet d'afficher une boîte de message:

     PhoneGap     
Dis bonjour

Dans la ligne de code suivante, nous avons créé une zone de texte dans laquelle vous pouvez entrer votre nom..

Dans la ligne

 Dis bonjour

Nous avons créé un lien qui, au clic, appelle la fonction displayHello, qui extrait la valeur de la zone de texte et affiche une boîte de message disant bonjour au nom saisi par l'utilisateur..

L’interface graphique présentée ci-dessus n’a pas de style. Vous pouvez embellir l’affichage et y ajouter des couleurs à l’aide d’un fichier CSS. Créez un fichier master.css dans votre dossier assets \ www avec le code suivant:

#bdy background: # F0F0F0;  #btn a border: 1px solid # 555; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; bloc de visualisation; float: gauche; arrière-plan: # 6600CC; largeur: 308px; couleur: #FFF; taille de police: 1.1em; texte-décoration: aucun; rembourrage: 1.2em 0; marge: 3px 0px 3px 5px;  #txt border: 1px solid # 555; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; bloc de visualisation; float: gauche; arrière-plan: # 00FFCC; largeur: 308px; couleur: # 9ab; taille de police: 1.1em; texte-décoration: aucun; rembourrage: 1.2em 0; marge: 3px 0px 3px 5px; 

Dans votre index.html, ajoutez la ligne suivante auparavant dans vos balises head pour créer un lien vers master.css:

Maintenant, si vous exécutez l'application, vous devriez voir un écran comme celui-ci:

Conclusion

Pour créer une application PhoneGap sur Android, de nombreux logiciels doivent fonctionner ensemble. Cela pourrait signifier que vous pourriez avoir des difficultés à configurer l'environnement complet pour créer une application PhoneGap sur Android. Cependant, une fois que tous les logiciels sont en place, vous pouvez facilement créer des applications PhoneGap en utilisant des normes Web ouvertes telles que HTML, JavaScript, CSS et les propres API de PhoneGap pour effectuer un traitement spécifique au matériel de l'appareil. Cela vous évite d'avoir à apprendre le langage natif pour la programmation Android et vous permet de bénéficier de la puissance des applications Android natives et personnalisées..

Si vous avez encore besoin d’aide, essayez de contacter l’un des développeurs Android d’Envato Studio pour vous aider dans la réalisation de votre projet ou même de concevoir votre application pour vous dès le début.!