Share
PhoneGap est un framework open source permettant de créer des applications mobiles multiplates-formes avec HTML, CSS et JavaScript. Il s’agit d’une solution idéale pour les développeurs Web intéressés par le développement mobile car elle leur permet d’exploiter les compétences existantes au lieu de commencer à zéro avec un langage compilé spécifique à l’appareil. C'est également une solution idéale pour ceux qui souhaitent créer une application pouvant s'exécuter sur plusieurs périphériques avec le même code de base. Dans ce didacticiel, vous apprendrez à configurer l'environnement de développement PhoneGap et à vous familiariser avec les considérations de développement fondamentales de la plate-forme..
Les applications construites avec PhoneGap ne ressemblent pas aux sites Web mobiles classiques. Les applications PhoneGap peuvent interagir avec le matériel d'un appareil mobile, tel que l'accéléromètre ou le GPS, de manière inaccessible aux applications Web normales. Les applications PhoneGap sont également conçues et regroupées comme des applications natives, ce qui signifie qu'elles peuvent être distribuées via l'App Store d'Apple ou l'Android Market..
PhoneGap prend en charge un certain nombre de plates-formes mobiles différentes, notamment:
PhoneGap SDK fournit une API qui est une couche d’abstraction fournissant au développeur un accès à des fonctionnalités spécifiques au matériel et à la plate-forme. Lorsque PhoneGap résume la plate-forme mobile native, le même code peut être utilisé sur plusieurs plates-formes mobiles avec peu ou pas de changement, rendant votre application disponible à un public plus large..
Les fonctionnalités spécifiques au matériel prises en charge par l’API PhoneGap incluent:
Pour créer des applications avec PhoneGap, vous devez d'abord installer le SDK standard pour les plates-formes mobiles que vous souhaitez cibler pour votre application. En effet, PhoneGap utilisera ces SDK lors de la compilation de votre application pour cette plate-forme..
Donc, si vous développez pour Android, vous aurez besoin de:
Il existe également des exigences spécifiques supplémentaires de PhoenGap pour le développement Android, notamment:
La documentation de PhoneGap Android fournit la liste complète des exigences avec les instructions d’installation pour chaque.
Si vous développez pour l'iPhone, vous aurez besoin de:
Lisez notre tutoriel Introduction au développement iPhone pour plus d'informations sur la configuration d'un environnement de développement iPhone..
Une fois que vous avez téléchargé et décompressé phonegap, Phonegap contient un dossier distinct pour chaque plate-forme prise en charge par PhoneGap:
PhoneGap est fourni avec une application par défaut qui peut être utilisée pour présenter les fonctionnalités puissantes du SDK. La suite de ce tutoriel sera consacrée à vous montrer comment configurer cette application par défaut pour Android et iPhone..
Pour créer un espace de travail pour votre application PhoneGap sur Android, accédez au dossier "phonegap-android" de l'invite de commande ou du terminal..
Exécutez la commande suivante:
ruby ./droidgap "[android_sdk_path]" [nom] [nom_package] "[www]" "[chemin]"
Une fois cette commande exécutée, l’espace de travail de l’application sera généré dans le chemin que vous avez indiqué. Ensuite, vous pouvez ouvrir Eclipse et d'abord choisir "Nouveau projet Android" puis "Créer à partir d'une source existante" et sélectionner l'espace de travail de l'application créé avec la commande précédente..
Une fois que cela est fait, copiez les fichiers suivants du dossier phonegap / phonegap-android / example dans le dossier www de votre espace de travail:
Cliquez ensuite sur Exécuter pour voir l'exemple d'application phonegap dans le simulateur Android..
Pour créer une application PhoneGap pour iPhone, accédez au dossier phonegap-iphone où vous avez dézippé les fichiers PhoneGap..
Une fois que vous êtes dans ce dossier dans votre terminal, tapez 'make' pour construire PhoneGapLibInstaller.pkg..
Ensuite, vous devrez exécuter PhoneGapLibInstaller.pkg qui installera PhoneGapLib et le modèle PhoneGap dans Xcode..
Ensuite, vous pouvez lancer Xcode et créer un «nouveau projet». Ensuite, choisissez un modèle d'application basé sur PhoneGap.
Ensuite, copiez les fichiers suivants dans le dossier www de votre espace de travail:
Exécutez l'application pour lancer l'application de démonstration PhoneGap dans le simulateur iPhone..
Alors maintenant, vous avez l'application de démonstration PhoneGap en cours d'exécution sur votre simulateur. Vous pouvez jouer avec l'application et voir comment elle se comporte. Cette application de base montre l'utilisation générale des différentes API exposées
par le kit de développement PhoneGap.
Allez-y et ouvrez index.htm. En haut de la page, vous verrez le code suivant:
PhoneGap
La première chose est un lien vers master.css qui donne tout le style au bouton que vous avez vu à l'écran.
La deuxième ligne comprend le fichier phonegap.js, généré lorsque nous avons créé un espace de travail pour notre application. Ce fichier fait toute la magie d'appeler les API natives via JavaScript.
Maintenant, si vous faites défiler jusqu'à la fin de index.html, vous verrez le code suivant:
Bienvenue sur PhoneGap!
ce fichier se trouve à assets / index.html
Plate-forme:
Version:
UUID:
Ce code HTML crée les liens affichés sous forme de boutons sur l'écran de votre appareil mobile. Des gestionnaires onclick associés à ces liens, appelant des fonctions JavaScript définies dans le même fichier, sont chargés d'appeler l'API PhoneGap pour interagir avec le matériel natif du périphérique..
La première fonction appelée en JavaScript est init (). Cela enregistrera notre fonction JavaScript Info appareil à l'événement PhoneGap.
Événement deviceready
le prêt PhoneGap déclenche un événement lorsque tous les composants du SDK sont correctement logés. Il est donc logique que les API JavaScript de PhoneGap soient utilisées après le déclenchement de cet événement..
Vous pouvez en savoir plus sur prêt dans la documentation de l'API.
Objet de périphérique
L'objet Device contient des informations de base sur le périphérique sur lequel l'application est exécutée, telles que la plate-forme, la version, etc. Ces valeurs peuvent être utilisées pour effectuer des vérifications spécifiques au périphérique dans votre code..
Vous pouvez en savoir plus sur l’objet appareil dans la documentation officielle de l’API..
Accéléromètre
Le premier lien du corps appelle la fonction watchAccel:
Montre accéléromètre
Cette partie de l'API surveille et envoie des notifications sur l'accélération du périphérique à intervalles réguliers. Il renvoie l’accélération actuelle de l’appareil en passant les coordonnées x, y et z à la callBackonSuccess fonction enregistrée. Les valeurs x, y, z peuvent ensuite être utilisées dans l'application pour répondre au mouvement.
En savoir plus sur l'accéléromètre ici.
GPS et positionnement
Le deuxième lien dans le corps est responsable de la collecte de l'emplacement actuel du périphérique:
Obtenir l'emplacement
le callBackonSuccessla fonction reçoit un objet contenant les coordonnées GPS pouvant être utilisées dans votre application pour effectuer un traitement basé sur la localisation.
Vous pouvez en savoir plus sur l'API de géolocalisation.
Passer des appels
La troisième ligne du corps lancera le numéroteur avec le numéro "411":
Appelez le 411
Notifications de périphérique
Les deux lignes suivantes du corps servent à émettre un bip ou à faire vibrer un périphérique:
Bip vibrer
En savoir plus sur le bip et la vibration dans la documentation officielle.
Utiliser la caméra
La ligne suivante du corps appelle la fonction show_pic Prendre une photo:
Obtenir une photo
Cette API lance l'application Appareil photo de l'appareil et attend
pour que l'utilisateur capture une image.
En savoir plus sur la prise de photos dans la documentation officielle de l'API.
Conclusion
PhoneGap est un cadre très puissant pour le développement multiplate-forme. Si vous avez déjà une solide expérience en développement Web et êtes intéressé par la création d'applications pour un ou plusieurs appareils, PhoneGap est sûrement un candidat sérieux à considérer.!
Accentsconagua