Share
Vous voulez apprendre à utiliser PhoneGap, mais vous ne savez pas par où commencer? Rejoignez-nous pour créer «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 le croyant qui vous croit!
Dans notre première partie, nous avons examiné la configuration de notre environnement de développement et la mise en place de PhoneGap sur les SDK iOS et Android. Dans cette deuxième partie de notre série PhoneGap, nous allons examiner certaines des API de périphérique auxquelles PhoneGap nous donne accès et discuter de la façon dont nous pourrions les utiliser..
Pour cette partie de la série, nous allons simplement examiner certaines fonctionnalités de PhoneGap. Nous allons donc configurer un test pour le moment..
Allez-y et configurez votre projet dans l’environnement de votre choix: Xcode pour iOS ou Eclipse pour Android. Je signalerai les différences entre les deux au fur et à mesure que cela deviendra nécessaire.
Nous allons commencer avec un code HTML de base et inclure le fichier Phongap.js. Si vous avez créé votre projet avec Xcode, il s’agit en gros du code HTML de base créé..
Accélération
Tout au long de cette partie de la série, nous allons vouloir pouvoir tester au moins un appareil réel, car le simulateur présente des limites en ce qui concerne les capteurs d’appareil tels que l’accéléromètre et la caméra. Pour qu'un appareil iOS soit opérationnel en tant que périphérique de test, vous devez disposer d'un compte de développeur payant. Lorsque vous connectez votre appareil à votre ordinateur et exécutez Xcode, vous avez la possibilité de faire de ce téléphone un téléphone de développement. Passez en revue la configuration et maintenant, lorsque vous choisissez de créer et d'exécuter votre application, vous pouvez sélectionner votre appareil dans le menu déroulant..
Pour Android, c'est à peu près la même chose sauf que vous faites cela dans Eclipse. Connectez votre téléphone et assurez-vous de l'avoir en mode débogage via VIA USB (dans les paramètres du téléphone), puis lorsque vous souhaitez exécuter votre application, sélectionnez Exécuter en tant qu'application Android..
Jetons un coup d'oeil à quelques bases du capteur de périphérique.
L'accéléromètre fournit un retour d'information sur le mouvement des périphériques sur les trois axes. Nous avons deux méthodes pour l’accéléromètre dans PhoneGap qui sont: getCurrentAcceleration, watchAcceleration et clearWatch
Il y a aussi quelques arguments à transmettre sur la méthode Accéléromètre. accéléromètre, accéléromètreError et accéléromètreOptions.
Nous utilisons notre première méthode, accelerometer.getCurrentAcceleration, comme suit.
navigator.accelerometer.getCurrentAcceleration (accelerometerSuccess, accelerometerError);
L’accélération actuelle est renvoyée à l’aide de la fonction accelerometerSuccess et toutes les données dont nous avons besoin se trouvent dans la liste. accélération objet que nous repassons dans notre fonction de réussite. Permet d’obtenir un exemple opérationnel. Prenons notre mise en page de base que nous avons créée au début de cette partie et ajoutons-y.
Accélération
Lorsque vous exécutez cette opération dans un simulateur ou un appareil, vous serez accueilli par une seule alerte lors du chargement. Ce que nous devons faire, c'est regarder l'accélération à intervalles réguliers, puis sortir les données. Nous pouvons le faire avec le watchAcceleration méthode. Nous l'utilisons comme suit:
var watchID = navigator.accelerometer.watchAcceleration (Réussite, Erreur, [Options]);
le watchID est une référence à laquelle nous pouvons associer nos options et aussi un moyen que nous pouvons utiliser lors de l'utilisation du clearWatch méthode.
Continuons et remplaçons notre ancien JavaScript par le suivant:
Accentsconagua
// attend que PhoneGap charge document.addEventListener ("deviceready", chargé, false); // PhoneGap est prêt function chargée () startWatch (); // Commence à regarder la fonction d'accélération startWatch () // Met à jour l'accélération toutes les 3 secondes. Var options = fréquence: 3000; watchID = navigator.accelerometer.watchAcceleration (onSuccess, onError, options); // Arrête de regarder la fonction d'accélération stopWatch () if (watchID) navigator.accelerometer.clearWatch (watchID); watchID = null; // Fonction de succès onSuccess (accélération) var element = document.getElementById ('accelerometer'); element.innerHTML = 'Accélération X:' + accélération.x + '
'+' Accélération Y: '+ accélération.y +'
'+' Accélération Z: '+ accélération.z +'
'+' Horodatage: '+ accélération.horodatage +'
'; // Erreur fonction onError () alert ('onError!'); Comme vous pouvez le constater, nous passons à la fréquence option dans la méthode de surveillance. Ceci est en millisecondes, donc toutes les 3 secondes, cette méthode sera renvoyée, et en cas de succès, nous mettrons à jour le code HTML d'un élément avec l'identifiant du accéléromètre. Nous avons juste besoin d'inclure cet élément dans notre code HTML actuel.
En attendant l'accéléromètre…
Maintenant, si vous continuez et chargez l'application, vous verrez les données de l'accéléromètre changer.
Si vous utilisez les simulateurs plutôt que les appareils réels, vous ne verrez aucun changement dans la sortie de l'accéléromètre..
Donc, c'est tout pour accéder à l'API de l'accéléromètre. Voyons maintenant comment l'utiliser pour détecter un tremblement dans PhoneGap.
Pour détecter un shake à l’aide de PhoneGap, nous allons nous débarrasser de nos onSuccès fonctionner et réécrire notre startWatch une fonction. Pour savoir si le périphérique a été secoué, nous devrons connaître l’orientation précédente afin de pouvoir la comparer à l’orientation actuelle. Nous faisons cela en définissant une variable au début de la startWatch une fonction.
var previousReading = x: null, y: null, z: null
Ensuite, nous démarrons la fonction watchAcceleration.
navigator.accelerometer.watchAcceleration ();
En cas de succès de l’accélération, nous allons définir quelques variables qui nous aideront à détecter un tremblement.
var changements = , lié = 0,2;
Nous pouvons maintenant comparer l’accélération précédente à l’accélération actuelle et si elle dépasse ce que nous avons défini. lié aussi variable, alors nous pouvons tirer notre fonction secouée.
if (previousReading.x! == null) changes.x = Math.abs (previousReading.x, acceleration.x); changes.y = Math.abs (previousReading.y, accélération.y); changes.z = Math.abs (previousReading.z, accélération.z); if (changes.x> lié && changes.y> lié && modifications.z> lié) shaken ();
Nous pouvons ensuite régler la lecture précédente sur la lecture actuelle pour le prochain tour..
previousReading = x: accélération.x, y: accélération.y, z: accélération.z
Enfin, n'oublions pas d'écrire une fonction "shaken" pour gérer le bougé. Pour l'instant, il suffit d'alerter un message.
fonction shaken () alert ("Shaken"); Vous devez vous rappeler d’ajouter votre gestionnaire d’erreur et votre fréquence à la fin du watchAcceleration méthode.
Votre code final devrait maintenant ressembler à ceci:
Accélération
J'ai trouvé que la borne de 0,2 était assez bonne, mais vous pouvez essayer de l'augmenter après les tests. Nous avons maintenant couvert ce qui peut être réalisé avec les données de l'accéléromètre et la manière de les capturer, alors jetons un coup d'œil à la caméra.
L’appareil photo est probablement l’une des fonctionnalités les plus utilisées sur les téléphones intelligents aujourd’hui, en particulier grâce à la résolution de l’appareil photo de la plupart des téléphones, qui rattrape rapidement les versions plus classiques du type point-and-shoot. Heureusement, PhoneGap nous offre un moyen très simple de capturer des images à partir de la caméra de l'appareil et de les intégrer rapidement à notre application..
La méthode que nous allons utiliser est camera.getPicture () et tout comme l'accéléromètre, il est appelé de la même manière et prend trois paramètres. La méthode signatures ressemble à ceci: navigator.camera.getPicture (cameraSuccess, cameraError, [cameraOptions]). Comme vous le verrez, il y a beaucoup plus d'options à prendre en compte lorsque vous manipulez l'appareil photo de l'appareil que lorsque vous utilisez l'accéléromètre..
Les paramètres facultatifs que vous pouvez transmettre sont les suivants:
qualitétype de destinationType de SourcepermettreModifiertype d'encodagetargetWidthtargetHeightComme vous l'avez peut-être deviné, qualité est la qualité à laquelle l'image est enregistrée, cela prend un nombre compris entre 0 et 100. Le type de destination variable est le format de l'image renvoyée. DATA_URL est une chaîne encodée en base64 et FILE_URI est un URI d'image réelle (jpeg / png). le Type de Source paramètre est l'endroit où vous voulez obtenir l'image source, qui peut être du GALERIE DE PHOTOS, CAMÉRA ou SAVEDPHOTOALBUM. le permettreModifier l'option permet de modifier l'image avant de l'enregistrer. EncodingType définit le codage de l'image renvoyée lors de l'utilisation FILE_URI, à partir duquel vous pouvez utiliser soit JPEG ou PNG. targetWidth et targetHeight correspond à ce que l’image sera mise à l’échelle avec le rapport d’aspect maintenu. Enfin, il y a Type de support qui ne fonctionne que lors de la sélection SAVEDPHOTOALBUM et où vous voudrez peut-être définir ce que l'utilisateur peut sélectionner sur IMAGE, VIDÉO ou ALLMEDIA.
Alors, commençons notre caméra. Tout d'abord, nous allons avoir un bouton qui, une fois cliqué, démarrera notre caméra. Ensuite, lorsque la photo sera prise, nous retournerons l’image base64 codée sous forme de vignette. Le code source ressemble à ceci:
Capture photo
![]()
Comme auparavant, nous attendons que PhoneGap soit chargé. Lorsque le chargement est terminé, nous pouvons définir les options pour le type de destination et le Type de Source, par défaut, ils sont réglés sur CAMÉRA et DATA_URL. Lorsque le bouton est cliqué, nous tirons le capturePhoto une fonction. En cas de succès, capturePhoto commence notre getPhoto une fonction. Notre fonction reçoit les données d'image dans le format que nous avons spécifié et nous pouvons faire avec ce que nous voulons. Tout ce que nous faisons réellement consiste à obtenir un élément HTML spécifié et à placer nos données dans le src de cet élément.
Exécuter et tester votre code sur votre appareil et après avoir pris une photo et testé, vous devriez avoir quelque chose qui ressemble à ci-dessous:
Il est également possible d’éditer la photo après la capture. Tout ce que nous avons à faire est de passer par le allowEdit: true paramètre dans les options, après la prise de la photo. Il se déplacera dans l'écran d'édition, où vous pouvez zoomer et rogner la photo. Nous pouvons utiliser le code suivant lorsque nous capturons l'image:
navigator.camera.getPicture (getPhoto, onFail, allowEdit: true);
Il y a quelques bizarreries à la permettreModifier option à noter. Actuellement, cela ne fonctionne que sur iOS et est ignoré dans Blackberry, Android, Palm et Windows 7..
Si nous voulions obtenir une photo de l’album photo ou un autre stockage (tel que le stockage local), nous utiliserions pictureSource.PHOTOLIBRARY.
Ce sont à peu près les bases dont nous avons besoin pour utiliser la caméra dans PhoneGap. Amusez-vous et essayez certaines choses avec différentes qualités, types et tailles d'image..
Il est possible que nous souhaitions stocker la photo prise ailleurs que dans l'album photo de l'appareil. En fait, cela risque fort d'être le cas. Nous voudrons probablement également stocker d'autres informations. Il existe plusieurs façons d’utiliser le stockage de l’appareil, l’un d’eux étant WebSQL, l’autre utilisant WebStorage - les deux tels que définis par le W3C. Vous pouvez également envoyer les données à un serveur distant si vous souhaitez les diffuser dans une application cloud (Instagr.am), ou aller plus loin et utiliser Lawnchair ou PersistenceJS.
.
Personnellement, je préfère la méthode WebStorage et pour ce projet c'est parfait.
Nous pouvons utiliser WebStorage avec la syntaxe suivante:
// Stocke la fenêtre de données.localStorage.setItem ("key", "value"); // récupère les données var value = window.localStorage.getItem ("key"); // valeur est maintenant égale à "valeur" // supprime la valeur window.localStorage.removeItem ("clé"); Avec cette syntaxe de base, nous avons la possibilité de stocker l’image codée en base64 dans la mémoire de stockage locale et de la récupérer au besoin..
La géolocalisation fournit des informations sur l'emplacement du périphérique. De nombreux appareils peuvent déjà utiliser la capacité des navigateurs d’utiliser l’API de géolocalisation. Si vous utilisez l’implémentation de PhoneGap, celle-ci l’utilise si elle est disponible..
La géolocalisation de PhoneGap a 3 méthodes, getCurrentPosition, watchPosition et clearWatch. le getCurrentPosition La méthode retourne l'emplacement actuel du périphérique avec un objet de position contenant les propriétés pour:
L’utilisation de base de la fonctionnalité de géolocalisation devrait maintenant vous paraître familière:
navigator.geolocation.getCurrentPosition (succès, erreur);
Et puis nous pouvons faire quelque chose comme ceci:
fonction onSuccess (position) var el = document.getElementById ('location'); el.innerHTML = 'Latitude:' + position.coords.latitude + '
'+' Longitude: '+ position.coords.longitude +'
'+' Altitude: '+ position.coords.altitude +'
'+' Précision: '+ position.coords.accuracy +'
'+' Précision d'altitude: '+ position.coords.altitudeAccuracy +'
'+' En-tête: '+ position.coords.heading +'
'+' Vitesse: '+ position.coords.speed +'
'+' Horodatage: '+ nouvelle date (position.timestamp) +'
'; Votre code complet devrait ressembler à ceci:
Géolocalisation Trouver la géolocalisation…
Cela vous donnera les informations de position au moment où le Succès la fonction est déclenchée. Si nous voulons surveiller en permanence la géolocalisation de l'appareil, nous utilisons le navigator.geolocation.watchPosition méthode à la place de navigator.geolocation.getCurrentPosition, en passant la fréquence que nous aimerions mettre à jour. Notre code devrait maintenant ressembler à quelque chose comme ça:
Géolocalisation Trouver la géolocalisation…
Si vous exécutez votre application maintenant, vous devriez vous retrouver avec une application qui ressemble à ceci:
A l'instar de l'accéléromètre, la géolocalisation a également clearWatch méthode pour arrêter de surveiller les modifications, que vous pouvez utiliser avec le code suivant:
navigator.geolocation.clearWatch (watchID);
Grâce à cela, nous avons maintenant les connaissances nécessaires pour utiliser l'API de géolocalisation de PhoneGap pour notre application. Nous pourrions simplement vouloir enregistrer notre emplacement à tout moment et le stocker localement ou à distance. Nous pourrions également enregistrer notre mouvement au fil du temps et le stocker. Quoi que nous voulions faire avec, nous savons maintenant comment obtenir cette information.
En plus des fonctionnalités que PhoneGap offre prêtes à l'emploi, il existe une réserve de plug-ins pour PhoneGap, notamment pour un sélecteur de date, un programme de téléchargement de fichiers et Paypal. Comme nous n'utiliserons aucun plugin dans cette application, il est impossible de passer en revue l'utilisation et l'installation des plugins, mais vous devez savoir quelles options vous avez lorsque vous travaillez avec PhoneGap alors assurez-vous de consulter le GitHub. projet pour les plugins et le wiki pour plus d’informations sur la façon de les utiliser. Si vous souhaitez voir un tutoriel séparé sur l'utilisation des plugins PhoneGap et même l'écriture de vos propres, assurez-vous de nous le faire savoir dans les commentaires.!
Nous n'avons pas encore démarré le développement d'une application, mais nous sommes maintenant opérationnels avec PhoneGap. Nous sommes en mesure de tester un appareil et un simulateur, de bien comprendre le fonctionnement des API de PhoneGap et de savoir comment utiliser l'API dans une application. Dans la prochaine partie, nous commencerons à construire Sculder, notre exemple d’application!
