Cordova - Guide rapide

Cordova est une plate-forme de création d'applications mobiles hybrides utilisant HTML, CSS et JavaScript.

La documentation officielle nous donne la définition de la Cordova -

"Apache Cordova est un cadre de développement mobile open source. Il vous permet d'utiliser des technologies Web standard telles que HTML5, CSS3 et JavaScript pour le développement multiplateforme, en évitant chaque langage de développement natif de plate-forme mobile. Les applications s'exécutent dans des wrappers ciblés sur chaque plate-forme, et s'appuyer sur des liaisons API conformes aux normes pour accéder aux capteurs, aux données et à l'état du réseau de chaque appareil. "

Caractéristiques de Cordova

Comprenons maintenant les caractéristiques de Cordova en bref.

Interface de ligne de commande (CLI Cordova)

Cet outil peut être utilisé pour démarrer des projets, créer des processus pour différentes plates-formes, installer des plugins et bien d'autres choses utiles qui facilitent le processus de développement. Vous apprendrez à utiliser l'interface de ligne de commande dans les chapitres suivants.

Composants principaux de Cordova

Cordova propose un ensemble de composants de base dont chaque application mobile a besoin. Ces composants seront utilisés pour créer la base de l'application afin que nous puissions passer plus de temps à implémenter notre propre logique.

Plugins Cordova

Cordova propose une API qui sera utilisée pour implémenter des fonctions mobiles natives dans notre application JavaScript.

Licence

Cordova est sous licence Apache, version 2.0. Apache et les logos Apache en plumes sont des marques déposées de The Apache Software Foundation.

Avantages de Cordova

Nous allons maintenant discuter des avantages de Cordova.

  • Cordova propose une plate-forme pour créer des applications mobiles hybrides afin que nous puissions développer une application qui sera utilisée sur différentes plates-formes mobiles - IOS, Android, Windows Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu et tizien.

  • Il est plus rapide de développer une application hybride puis une application native afin que Cordova puisse économiser sur le temps de développement.

  • Puisque nous utilisons JavaScript lorsque nous travaillons avec Cordova, nous n'avons pas besoin d'apprendre les langages de programmation spécifiques à la plate-forme.

  • Il existe de nombreux modules complémentaires de la communauté qui peuvent être utilisés avec Cordova, ceux-ci ont plusieurs bibliothèques et frameworks, qui sont optimisés pour travailler avec lui.

Limitations de Cordova

Voici les limites de Cordova.

  • Les applications hybrides sont plus lentes que les applications natives, il n'est donc pas optimal d'utiliser Cordova pour les grandes applications qui nécessitent beaucoup de données et de fonctionnalités.

  • La compatibilité entre navigateurs peut créer de nombreux problèmes. La plupart du temps, nous créons des applications pour différentes plates-formes, de sorte que les tests et l'optimisation peuvent prendre du temps, car nous devons couvrir un grand nombre d'appareils et de systèmes d'exploitation.

  • Certains plugins ont des problèmes de compatibilité avec différents appareils et plates-formes. Il existe également des API natives qui ne sont pas encore prises en charge par Cordova.

Dans ce chapitre, nous allons comprendre la configuration de l'environnement de Cordova. Pour commencer l'installation, nous devons d'abord installer quelques composants. Les composants sont répertoriés dans le tableau suivant.

S.Non Logiciel et description
1

NodeJS and NPM

NodeJS est la plate-forme nécessaire au développement de Cordova. Consultez notre configuration de l'environnement NodeJS pour plus de détails.

2

Android SDK

Pour la plate-forme Android, vous devez avoir le SDK Android installé sur votre ordinateur. Consultez la configuration de l'environnement Android pour plus de détails.

3

XCode

Pour la plate-forme iOS, vous devez avoir installé xCode sur votre machine. Consultez la configuration de l'environnement iOS pour plus de détails

Installation de Cordova

Avant de commencer, vous devez savoir que nous utiliserons Windows command prompt dans notre tutoriel.

Étape 1 - Installation de git

Même si vous n'utilisez pas git, il doit être installé car Cordova l'utilise pour certains processus d'arrière-plan. Vous pouvez télécharger git ici . Après avoir installé git, ouvrez votre variable d'environnement.

  • Cliquez avec le bouton droit sur l'ordinateur
  • Properties
  • Réglages avancés du système
  • Variables d'environnement
  • Variables système
  • Edit

Copiez ce qui suit à la fin du variable value field. C'est le chemin par défaut de l'installation de git. Si vous l'avez installé sur un chemin différent, vous devez l'utiliser au lieu de notre exemple de code ci-dessous.

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

Maintenant vous pouvez taper git dans votre invite de commande pour tester si l'installation a réussi.

Étape 2 - Installation de Cordova

Cette étape téléchargera et installera le module Cordova dans le monde entier. Ouvrez l'invite de commande et exécutez ce qui suit -

C:\Users\username>npm install -g cordova

Vous pouvez vérifier la version installée en exécutant -

C:\Users\username>cordova -v

C'est tout ce dont vous avez besoin pour commencer à développer les applications Cordova sur le système d'exploitation Windows. Dans notre prochain tutoriel, nous allons vous montrer comment créer une première application.

Nous avons compris comment installer Cordova et mettre en place son environnement. Une fois que tout est prêt, nous pouvons créer notre première application hybride Cordova.

Étape 1 - Création de l'application

Ouvrez le répertoire dans lequel vous souhaitez installer l'application dans l'invite de commande. Nous allons le créer sur le bureau.

C:\Users\username\Desktop>cordova 
   create CordovaProject io.cordova.hellocordova CordovaApp
  • CordovaProject est le nom du répertoire dans lequel l'application est créée.

  • io.cordova.hellocordovaest la valeur de domaine inverse par défaut. Vous devez utiliser votre propre valeur de domaine si possible.

  • CordovaApp est le titre de votre application.

Étape 2 - Ajout de plates-formes

Vous devez ouvrir le répertoire de votre projet dans l'invite de commande. Dans notre exemple, c'est leCordovaProject. Vous ne devez choisir que les plates-formes dont vous avez besoin. Pour pouvoir utiliser la plateforme spécifiée, vous devez avoir installé le SDK de plateforme spécifique. Puisque nous développons sous Windows, nous pouvons utiliser les plates-formes suivantes. Nous avons déjà installé le SDK Android, nous n'installerons donc que la plate-forme Android pour ce tutoriel.

C:\Users\username\Desktop\CordovaProject>cordova platform add android

Il existe d'autres plates-formes qui peuvent être utilisées sur le système d'exploitation Windows.

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8

C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos

C:\Users\username\Desktop\CordovaProject>cordova platform add windows

C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10

C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos

Si vous développez sur Mac, vous pouvez utiliser -

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

Vous pouvez également supprimer la plateforme de votre projet en utilisant -

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

Étape 3 - Construction et exécution

Dans cette étape, nous allons créer l'application pour une plate-forme spécifiée afin de pouvoir l'exécuter sur un appareil mobile ou un émulateur.

C:\Users\username\Desktop\CordovaProject>cordova build android

Nous pouvons maintenant exécuter notre application. Si vous utilisez l'émulateur par défaut, vous devez utiliser -

C:\Users\username\Desktop\CordovaProject>cordova emulate android

Si vous souhaitez utiliser l'émulateur externe ou le périphérique réel, vous devez utiliser -

C:\Users\username\Desktop\CordovaProject>cordova run android

NOTE - Nous utiliserons le Genymotion android emulatorcar il est plus rapide et plus réactif que celui par défaut. Vous pouvez trouver l'émulateur ici . Vous pouvez également utiliser un appareil réel pour tester en activantUSB debuggingà partir des options et de le connecter à votre ordinateur via un câble USB. Pour certains appareils, vous devrez également installer le pilote USB.

Une fois que nous avons exécuté l'application, elle l'installera sur la plate-forme que nous avons spécifiée. Si tout est terminé sans erreur, la sortie doit afficher l'écran de démarrage par défaut de l'application.

Dans notre prochain tutoriel, nous vous montrerons comment configurer l'application Cordova.

le config.xmlfile est l'endroit où nous pouvons modifier la configuration de l'application. Lorsque nous avons créé notre application dans le dernier didacticiel, nous avons défini le domaine et le nom inversés. Les valeurs peuvent être modifiées dans leconfig.xmlfichier. Lorsque nous créons l'application, le fichier de configuration par défaut sera également créé.

Le tableau suivant explique les éléments de configuration dans config.xml.

Table de configuration config.xml

S.Non Élément et détails
1

widget

La valeur de domaine inverse de l'application que nous avons spécifiée lors de la création de l'application.

2

name

Le nom de l'application que nous avons spécifié lors de la création de l'application.

3

description

Description de l'application.

4

author

Auteur de l'application.

5

content

La page de démarrage de l'application. Il est placé à l'intérieur duwww annuaire.

6

plugin

Les plugins actuellement installés.

sept

access

Utilisé pour contrôler l'accès aux domaines externes. Le défautoriginLa valeur est définie sur *, ce qui signifie que l'accès est autorisé à n'importe quel domaine. Cette valeur ne permettra pas d'ouvrir certaines URL spécifiques pour protéger les informations.

8

allow-intent

Permet à des URL spécifiques de demander à l'application de s'ouvrir. Par exemple,<allow-intent href = "tel:*" /> permettra à tel: links d'ouvrir le numéroteur.

9

platform

Les plates-formes pour créer l'application.

Nous pouvons utiliser l'API de stockage disponible pour stocker des données sur les applications clientes. Cela facilitera l'utilisation de l'application lorsque l'utilisateur est hors ligne et peut également améliorer les performances. Puisque ce tutoriel est destiné aux débutants, nous allons vous montrer comment utiliserlocal storage. Dans l'un de nos derniers tutoriels, nous allons vous montrer les autres plugins qui peuvent être utilisés.

Étape 1 - Ajout de boutons

Nous allons créer quatre boutons dans le index.htmlfichier. Les boutons seront situés à l'intérieur dudiv class = "app" élément.

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

Il produira l'écran suivant -

Étape 2 - Ajout d'écouteurs d'événements

La politique de sécurité de Cordova n'autorise pas les événements en ligne, nous allons donc ajouter des écouteurs d'événements dans les fichiers index.js. Nous attribuerons égalementwindow.localStorage à un localStorage variable que nous utiliserons plus tard.

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage); 
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage); 
document.getElementById("removeProjectFromLocalStorage").addEventListener 
   ("click", removeProjectFromLocalStorage); 
document.getElementById("getLocalStorageByKey").addEventListener 
   ("click", getLocalStorageByKey);  
var localStorage = window.localStorage;

Étape 3 - Création de fonctions

Nous devons maintenant créer des fonctions qui seront appelées lorsque les boutons sont appuyés. La première fonction est utilisée pour ajouter des données au stockage local.

function setLocalStorage() { 
   localStorage.setItem("Name", "John"); 
   localStorage.setItem("Job", "Developer"); 
   localStorage.setItem("Project", "Cordova Project"); 
}

Le suivant enregistrera les données que nous avons ajoutées à la console.

function showLocalStorage() { 
   console.log(localStorage.getItem("Name")); 
   console.log(localStorage.getItem("Job")); 
   console.log(localStorage.getItem("Project")); 
}

Si nous tapons SET LOCAL STORAGEbouton, nous allons définir trois éléments sur le stockage local. Si nous taponsSHOW LOCAL STORAGE ensuite, la console enregistrera les éléments que nous voulons.

Créons maintenant une fonction qui supprimera le projet du stockage local.

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

Si nous cliquons sur le SHOW LOCAL STORAGE après avoir supprimé le projet, la sortie affichera null valeur du champ de projet.

Nous pouvons également obtenir les éléments de stockage local en utilisant le key() méthode qui prendra l'index comme argument et retournera l'élément avec la valeur d'index correspondante.

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

Maintenant, quand nous tapons sur le GET BY KEY , la sortie suivante sera affichée.

REMARQUE

Lorsque nous utilisons le key() méthode, la console enregistrera le job à la place du name même si nous avons passé la dispute 0pour récupérer le premier objet. En effet, le stockage local stocke les données par ordre alphabétique.

Le tableau suivant présente toutes les méthodes de stockage local disponibles.

S.Non Méthodes et détails
1

setItem(key, value)

Utilisé pour définir l'élément sur le stockage local.

2

getItem(key)

Utilisé pour obtenir l'article à partir du stockage local.

3

removeItem(key)

Utilisé pour supprimer l'élément du stockage local.

4

key(index)

Utilisé pour obtenir l'article en utilisant le indexde l'article dans le stockage local. Cela permet de trier les éléments par ordre alphabétique.

5

length()

Utilisé pour récupérer le nombre d'éléments qui existent dans le stockage local.

6

clear()

Utilisé pour supprimer toutes les paires clé / valeur du stockage local.

Il existe différents événements qui peuvent être utilisés dans les projets Cordova. Le tableau suivant présente les événements disponibles.

S.Non Événements et détails
1

deviceReady

Cet événement est déclenché une fois que Cordova est complètement chargé. Cela permet de garantir qu'aucune fonction Cordova n'est appelée avant que tout ne soit chargé.

2

pause

Cet événement est déclenché lorsque l'application est mise en arrière-plan.

3

resume

Cet événement est déclenché lorsque l'application est renvoyée depuis l'arrière-plan.

4

backbutton

Cet événement est déclenché lorsque le bouton retour est enfoncé.

5

menubutton

Cet événement est déclenché lorsque le bouton de menu est enfoncé.

6

searchbutton

Cet événement est déclenché lorsque le bouton de recherche Android est enfoncé.

sept

startcallbutton

Cet événement est déclenché lorsque le bouton de démarrage d'appel est enfoncé.

8

endcallbutton

Cet événement est déclenché lorsque le bouton de fin d'appel est enfoncé.

9

volumedownbutton

Cet événement est déclenché lorsque le bouton de réduction du volume est enfoncé.

dix

volumeupbutton

Cet événement est déclenché lorsque le bouton d'augmentation du volume est enfoncé.

Utilisation des événements

Tous les événements sont utilisés presque de la même manière. Nous devons toujours ajouter des écouteurs d'événements dans notrejs à la place du inline event calling depuis le Cordova Content Security Policyn'autorise pas le Javascript en ligne. Si nous essayons d'appeler l'événement en ligne, l'erreur suivante sera affichée.

La bonne façon de travailler avec les événements consiste à utiliser addEventListener. Nous comprendrons comment utiliser levolumeupbutton événement à travers un exemple.

document.addEventListener("volumeupbutton", callbackFunction, false);  
function callbackFunction() { 
   alert('Volume Up Button is pressed!');
}

Une fois que nous appuyons sur le volume up , l'écran affichera l'alerte suivante.

Manipulation du bouton Retour

Nous devrions utiliser le bouton de retour Android pour les fonctionnalités de l'application, comme le retour à l'écran précédent. Pour implémenter votre propre fonctionnalité, nous devons d'abord désactiver le bouton de retour utilisé pour quitter l'application.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

Maintenant, lorsque nous appuyons sur le bouton de retour natif d'Android, l'alerte apparaîtra à l'écran au lieu de quitter l'application. Cela se fait en utilisant lee.preventDefault() commander.

Manipulation du bouton Retour

Vous voudrez généralement utiliser le bouton de retour Android pour certaines fonctionnalités de l'application, comme le retour à l'écran précédent. Pour pouvoir implémenter vos propres fonctionnalités, vous devez d'abord désactiver la sortie de l'application lorsque vous appuyez sur le bouton Retour.

document.addEventListener("backbutton", onBackKeyDown, false);  
function onBackKeyDown(e) { 
   e.preventDefault(); 
   alert('Back Button is Pressed!'); 
}

Maintenant, lorsque nous appuyons sur le bouton de retour natif d'Android, l'alerte apparaîtra à l'écran au lieu de quitter l'application. Ceci est fait en utilisante.preventDefault().

Cordova Plugman est un outil de ligne de commande utile pour installer et gérer des plugins. Tu devrais utiliserplugmansi votre application doit s'exécuter sur une plate-forme spécifique. Si vous souhaitez créer uncross-platform application que vous devriez utiliser cordova-cli qui modifiera les plugins pour différentes plates-formes.

Étape 1 - Installation de Plugman

Ouvrez le command prompt window et exécutez l'extrait de code suivant pour installer plugman.

C:\Users\username\Desktop\CordovaProject>npm install -g plugman

Étape 2 - Installation des plugins

Pour comprendre comment installer le plugin Cordova à l'aide de plugman, nous utiliserons le plugin Camera comme exemple.

C:\Users\username\Desktop\CordovaProject>plugman  
   install --platform android --project platforms\android  
   --plugin cordova-plugin-camera 
   plugman uninstall --platform android --project platforms\android  
   --plugin cordova-plugin-camera

Nous devons considérer trois paramètres comme indiqué ci-dessus.

  • --platform - plateforme que nous utilisons (android, ios, amazon-fireos, wp8, blackberry10).

  • --project- chemin où le projet est construit. Dans notre cas, c'estplatforms\android annuaire.

  • --plugin - le plugin que nous voulons installer.

Si vous définissez des paramètres valides, la fenêtre d'invite de commande doit afficher la sortie suivante.

Méthodes supplémentaires

Vous pouvez utiliser le uninstall méthode de la même manière.

C:\Users\username\Desktop\CordovaProject>plugman uninstall  
   --platform android --project platforms\android --plugin cordova-plugin-camera

le command prompt La console affichera la sortie suivante.

Plugman propose des méthodes supplémentaires pouvant être utilisées. Les méthodes sont répertoriées dans le tableau suivant.

S.Non Méthode et détails
1

install

Utilisé pour installer les plugins Cordova.

2

uninstall

Utilisé pour désinstaller les plugins Cordova.

3

fetch

Utilisé pour copier le plugin Cordova vers un emplacement spécifique.

4

prepare

Utilisé pour mettre à jour le fichier de configuration afin d'aider la prise en charge du module JS.

5

adduser

Utilisé pour ajouter un compte d'utilisateur au registre.

6

publish

Utilisé pour publier le plugin dans le registre.

sept

unpublish

Utilisé pour annuler la publication du plugin du registre.

8

search

Utilisé pour rechercher les plugins dans le registre.

9

config

Utilisé pour la configuration des paramètres de registre.

dix

create

Utilisé pour créer un plugin personnalisé.

11

platform

Utilisé pour ajouter ou supprimer une plate-forme du plugin personnalisé créé.

Commandes supplémentaires

Si vous êtes bloqué, vous pouvez toujours utiliser le plugman -helpcommander. La version peut être vérifiée en utilisantplugman -v. Pour rechercher le plugin, vous pouvez utiliserplugman search et enfin vous pouvez changer le registre du plugin en utilisant le plugman config set registry commander.

REMARQUE

Puisque Cordova est utilisé pour le développement multiplateforme, dans nos chapitres suivants, nous utiliserons Cordova CLI au lieu de Plugman pour installer des plugins.

Ce plugin Cordova est utilisé pour surveiller l'état de la batterie de l'appareil. Le plugin surveillera chaque changement qui se produit sur la batterie de l'appareil.

Étape 1 - Installation du plug-in de batterie

Pour installer ce plugin, nous devons ouvrir le command prompt window et exécutez le code suivant.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status

Étape 2 - Ajouter un écouteur d'événements

Lorsque vous ouvrez le index.js fichier, vous trouverez le onDeviceReadyfonction. C'est là que l'écouteur d'événements doit être ajouté.

window.addEventListener("batterystatus", onBatteryStatus, false);

Étape 3 - Créer une fonction de rappel

Nous allons créer le onBatteryStatus fonction de rappel au bas de la index.js fichier.

function onBatteryStatus(info) { 
   alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " + info.isPlugged); 
}

Lorsque nous exécutons l'application, une alerte sera déclenchée. Pour le moment, la batterie est chargée à 100%.

Lorsque l'état est modifié, une nouvelle alerte s'affiche. L'état de la batterie indique que la batterie est maintenant chargée à 99%.

Si nous connectons l'appareil au chargeur, la nouvelle alerte montrera que le isPlugged la valeur est remplacée par true.

Événements supplémentaires

Ce plugin propose deux événements supplémentaires en plus du batterystatusun événement. Ces événements peuvent être utilisés de la même manière que lebatterystatus un événement.

S.Non Détails de l'évènement
1

batterylow

L'événement est déclenché lorsque le pourcentage de charge de la batterie atteint une valeur faible. Cette valeur varie selon les appareils.

2

batterycritical

L'événement est déclenché lorsque le pourcentage de charge de la batterie atteint la valeur critique. Cette valeur varie selon les appareils.

Ce plugin est utilisé pour prendre des photos ou utiliser des fichiers de la galerie d'images.

Étape 1 - Installez le plug-in de caméra

Exécutez le code suivant dans le command prompt fenêtre pour installer ce plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Étape 2 - Ajout d'un bouton et d'une image

Maintenant, nous allons créer le bouton pour appeler la caméra et imgoù l'image sera affichée une fois prise. Cela sera ajouté àindex.html à l'intérieur de div class = "app" élément.

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

Étape 3 - Ajout d'un écouteur d'événements

L'écouteur d'événement est ajouté à l'intérieur du onDeviceReady pour garantir que Cordova est chargé avant de commencer à l'utiliser.

document.getElementById("cameraTakePicture").addEventListener 
   ("click", cameraTakePicture);

Étape 4 - Ajout de fonctions (prise de photo)

Nous allons créer le cameraTakePicturefonction qui est passée en tant que rappel à notre écouteur d'événements. Il sera déclenché lorsque le bouton est appuyé. À l'intérieur de cette fonction, nous appellerons lenavigator.cameraobjet global fourni par l'API du plugin. Si la prise de vue réussit, les données seront envoyées auonSuccessfonction de rappel, sinon, l'alerte avec message d'erreur sera affichée. Nous placerons ce code au bas deindex.js.

function cameraTakePicture() { 
   navigator.camera.getPicture(onSuccess, onFail, {  
      quality: 50, 
      destinationType: Camera.DestinationType.DATA_URL 
   });  
   
   function onSuccess(imageData) { 
      var image = document.getElementById('myImage'); 
      image.src = "data:image/jpeg;base64," + imageData; 
   }  
   
   function onFail(message) { 
      alert('Failed because: ' + message); 
   } 
}

Lorsque nous exécutons l'application et que nous appuyons sur le bouton, la caméra native sera déclenchée.

Lorsque nous prenons et enregistrons une photo, elle sera affichée à l'écran.

La même procédure peut être utilisée pour obtenir une image à partir du système de fichiers local. La seule différence est la fonction créée à la dernière étape. Vous pouvez voir que lesourceType un paramètre facultatif a été ajouté.

Étape 1 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

Étape 2 B

<button id = "cameraGetPicture">GET PICTURE</button>

Étape 3 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

Étape 4 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

Lorsque nous appuierons sur le deuxième bouton, le système de fichiers s'ouvrira à la place de la caméra afin que nous puissions choisir l'image à afficher.

Ce plugin offre de nombreux paramètres optionnels pour la personnalisation.

S.Non Paramètre et détails
1

quality

Qualité de l'image comprise entre 0 et 100. La valeur par défaut est 50.

2

destinationType

DATA_URL ou 0 Renvoie une chaîne encodée en base64.

FILE_URI ou 1 Renvoie l'URI du fichier image.

NATIVE_URI ou 2 Renvoie l'URI natif de l'image.

3

sourceType

PHOTOLIBRARY ou 0 Ouvre la photothèque.

CAMERA ou 1 Ouvre la caméra native.

SAVEDPHOTOALBUM ou 2 Ouvre l'album photo enregistré.

4

allowEdit

Permet l'édition d'image.

5

encodingType

JPEG ou 0 Renvoie une image encodée en JPEG.

PNG ou 1 Renvoie une image codée au format PNG.

6

targetWidth

Largeur de mise à l'échelle de l'image en pixels.

sept

targetHeight

Hauteur de mise à l'échelle de l'image en pixels.

8

mediaType

PICTURE ou 0 Autorise uniquement la sélection d'image.

VIDEO ou 1 Autorise uniquement la sélection vidéo.

ALLMEDIA ou 2 Permet la sélection de tous les types de supports.

9

correctOrientation

Utilisé pour corriger l'orientation de l'image.

dix

saveToPhotoAlbum

Utilisé pour enregistrer l'image dans l'album photo.

11

popoverOptions

Utilisé pour définir l'emplacement de popover sur IOS.

12

cameraDirection

FRONT ou 0 Caméra frontale.

BACK ou 1 Caméra arrière.

ALLMEDIA

Ce plugin est utilisé pour accéder à la base de données de contacts de l'appareil. Dans ce tutoriel, nous allons vous montrer comment créer, interroger et supprimer des contacts.

Étape 1 - Installer le plugin Contacts

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

Étape 2 - Ajout de boutons

Le bouton sera utilisé pour appeler le createContactfonction. Nous allons le placer dans lediv class = "app" dans index.html fichier.

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

Étape 2 - Ajouter des écouteurs d'événements

Ouvert index.js et copiez l'extrait de code suivant dans le onDeviceReady fonction.

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

Étape 3A - Fonction de rappel (navigator.contacts.create)

Désormais, aucun contact n'est stocké sur l'appareil.

Notre première fonction de rappel appellera le navigator.contacts.createméthode où nous pouvons spécifier les nouvelles données de contact. Cela créera un contact et l'attribuera aumyContactvariable mais il ne sera pas stocké sur l'appareil. Pour le stocker, nous devons appeler lesave et créez des fonctions de rappel de réussite et d'erreur.

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);
    
   function contactSuccess() {
      alert("Contact is saved!");
   }
	
   function contactError(message) {
      alert('Failed because: ' + message);
   }
	
}

Lorsque nous cliquons sur le ADD CONTACT bouton, le nouveau contact sera stocké dans la liste de contacts de l'appareil.

Étape 3B - Fonction de rappel (navigator.contacts.find)

Notre deuxième fonction de rappel interrogera tous les contacts. Nous utiliserons lenavigator.contacts.findméthode. L'objet options a un paramètre de filtre qui est utilisé pour spécifier le filtre de recherche.multiple = trueest utilisé car nous voulons renvoyer tous les contacts de l'appareil. lefield touche pour rechercher des contacts par displayName puisque nous l'avons utilisé lors de l'enregistrement du contact.

Une fois les options définies, nous utilisons findméthode pour interroger les contacts. Le message d'alerte sera déclenché pour chaque contact trouvé.

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
    
   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }
	
   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Lorsque nous appuyons sur le FIND CONTACT bouton, un popup d'alerte sera déclenché puisque nous n'avons enregistré qu'un seul contact.

Étape 3C - Fonction de rappel (supprimer)

Dans cette étape, nous utiliserons à nouveau la méthode find mais cette fois nous définirons différentes options. leoptions.filter est prêt à rechercher que Test Userqui doit être supprimé. Après lecontactfindSuccess fonction de rappel a renvoyé le contact souhaité, nous le supprimerons en utilisant le remove méthode qui nécessite ses propres rappels de succès et d'erreur.

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }
	
}

Désormais, nous n'avons qu'un seul contact stocké sur l'appareil. Nous en ajouterons manuellement un autre pour vous montrer le processus de suppression.

Nous allons maintenant cliquer sur le DELETE CONTACT bouton pour supprimer le Test User. Si nous vérifions à nouveau la liste de contacts, nous verrons que leTest User n'existe plus.

Ce plugin est utilisé pour obtenir des informations sur l'appareil de l'utilisateur.

Étape 1 - Installation du plug-in de périphérique

Pour installer ce plugin, nous devons exécuter l'extrait de code suivant dans le command prompt.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device

Étape 2 - Ajout d'un bouton

Nous utiliserons ce plugin de la même manière que nous avons utilisé les autres plugins Cordova. Ajoutons un bouton dans leindex.htmlfichier. Ce bouton sera utilisé pour obtenir des informations sur l'appareil.

<button id = "cordovaDevice">CORDOVA DEVICE</button>

Étape 3 - Ajout d'un écouteur d'événements

Les plugins Cordova sont disponibles après la deviceready événement afin que nous placions l'auditeur d'événement dans le onDeviceReady fonction dans index.js.

document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);

Étape 4 - Création de la fonction

La fonction suivante montre comment utiliser toutes les possibilités offertes par le plugin. Nous allons le placer dansindex.js.

function cordovaDevice() {
   alert("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
}

Lorsque nous cliquons sur le CORDOVA DEVICE , l'alerte affichera la version de Cordova, le modèle de l'appareil, la plate-forme, l'UUID et la version de l'appareil.

Le plugin Accelerometer est également appelé le device-motion. Il est utilisé pour suivre le mouvement de l'appareil en trois dimensions.

Étape 1 - Installer le plug-in Accelerometer

Nous installerons ce plugin en utilisant cordova-CLI. Tapez le code suivant dans lecommand prompt la fenêtre.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-motion

Étape 2 - Ajouter des boutons

Dans cette étape, nous ajouterons deux boutons dans le index.htmlfichier. L'un sera utilisé pour obtenir l'accélération actuelle et l'autre surveillera les changements d'accélération.

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

Étape 3 - Ajouter des écouteurs d'événements

Ajoutons maintenant des écouteurs d'événements pour nos boutons onDeviceReady fonction à l'intérieur index.js.

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

Étape 4 - Création de fonctions

Maintenant, nous allons créer deux fonctions. La première fonction sera utilisée pour obtenir l'accélération actuelle et la deuxième fonction surveillera l'accélération et les informations sur l'accélération seront déclenchées toutes les trois secondes. Nous ajouterons également leclearWatch fonction enveloppée par le setTimeoutpour arrêter de regarder l'accélération après le laps de temps spécifié. lefrequency Le paramètre est utilisé pour déclencher la fonction de rappel toutes les trois secondes.

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);
   };

   function accelerometerError() {
      alert('onError!');
   };
	
}

Maintenant, si nous appuyons sur le GET ACCELERATIONbouton, nous obtiendrons la valeur d'accélération actuelle. Si nous appuyons sur leWATCH ACCELERATIONbouton, l'alerte sera déclenchée toutes les trois secondes. Après la troisième alerte, leclearWatch La fonction sera appelée et nous n'obtiendrons plus d'alertes puisque nous avons défini le délai d'expiration à 10000 millisecondes.

La boussole est utilisée pour indiquer la direction par rapport au point cardinal nord géographique.

Étape 1 - Installer le plugin d'orientation des périphériques

Ouvrez le command prompt et exécutez ce qui suit.

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugindevice-orientation

Étape 2 - Ajouter des boutons

Ce plugin est similaire au accelerationbrancher. Créons maintenant deux boutons dansindex.html.

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

Étape 3 - Ajouter des écouteurs d'événements

Maintenant, nous allons ajouter event listeners à l'intérieur de onDeviceReady fonction dans index.js.

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

Étape 4 - Création de fonctions

Nous allons créer deux fonctions; la première fonction générera l'accélération actuelle et l'autre vérifiera les changements d'orientation. Vous pouvez voir que nous utilisons lefrequency à nouveau pour surveiller les changements qui se produisent toutes les trois secondes.

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess, 
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

Puisque le plugin de boussole est presque le même que le plugin d'accélération, nous allons vous montrer un code d'erreur cette fois. Certains appareils ne disposent pas du capteur magnétique nécessaire au fonctionnement de la boussole. Si votre appareil ne l'a pas, l'erreur suivante s'affichera.

Le plugin Cordova Dialogs appellera l'élément d'interface utilisateur de dialogue natif de la plateforme.

Étape 1 - Boîte de dialogue d'installation

Tapez la commande suivante dans le command prompt fenêtre pour installer ce plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

Étape 2 - Ajouter des boutons

Ouvrons maintenant index.html et ajoutez quatre boutons, un pour chaque type de boîte de dialogue.

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

Étape 3 - Ajouter des écouteurs d'événements

Nous allons maintenant ajouter les écouteurs d'événements dans le onDeviceReady fonction dans index.js. Les auditeurs appelleront la fonction de rappel après avoir cliqué sur le bouton correspondant.

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);

Étape 4A - Créer une fonction d'alerte

Depuis que nous avons ajouté quatre écouteurs d'événements, nous allons maintenant créer les fonctions de rappel pour chacun d'eux dans index.js. Le premier estdialogAlert.

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);
   
   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

Si nous cliquons sur le ALERT bouton, nous verrons la boîte de dialogue d'alerte.

Lorsque nous cliquons sur le bouton de dialogue, la sortie suivante sera affichée sur la console.

Étape 4B - Créer une fonction de confirmation

La deuxième fonction que nous devons créer est la dialogConfirm fonction.

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

Quand le CONFIRM est enfoncé, la nouvelle boîte de dialogue apparaîtra.

Nous cliquons sur le YESbouton pour répondre à la question. La sortie suivante sera affichée sur la console.

Étape 4C - Créer une fonction d'invite

La troisième fonction est la dialogPromptfonction. Cela permet aux utilisateurs de saisir du texte dans l'élément d'entrée de la boîte de dialogue.

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback, 
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

le PROMPT Le bouton déclenchera une boîte de dialogue comme dans la capture d'écran suivante.

Dans cette boîte de dialogue, nous avons une option pour taper le texte. Nous enregistrerons ce texte dans la console, avec un bouton sur lequel vous aurez cliqué.

Étape 4D - Créer une fonction de bip

Le dernier est le dialogBeepfonction. Ceci est utilisé pour appeler la notification sonore du bip. letimes définit le nombre de répétitions du signal sonore.

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

Lorsque nous cliquons sur le BEEP bouton, nous entendrons le son de notification deux fois, car le times la valeur est définie sur 2.

Ce plugin est utilisé pour manipuler le système de fichiers natif sur l'appareil de l'utilisateur.

Étape 1 - Installation du plug-in de fichier

Nous devons exécuter le code suivant dans le command prompt pour installer ce plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

Étape 2 - Ajouter des boutons

Dans cet exemple, nous allons vous montrer comment créer un fichier, écrire dans un fichier, le lire et le supprimer. Pour cette raison, nous allons créer quatre boutons dansindex.html. Nous ajouterons égalementtextarea dans lequel, le contenu de notre fichier sera affiché.

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

Étape 3 - Ajouter des écouteurs d'événements

Nous ajouterons event listeners dans index.js à l'intérieur de onDeviceReady pour vous assurer que tout a démarré avant l'utilisation du plugin.

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

Étape 4A - Fonction de création de fichier

Le fichier sera créé dans le dossier racine des applications sur l'appareil. Pour pouvoir accéder au dossier racine, vous devez fournirsuperuseraccéder à vos dossiers. Dans notre cas, le chemin du dossier racine est\data\data\com.example.hello\cache. Pour le moment, ce dossier est vide.

Ajoutons maintenant une fonction qui créera le fichier log.txt. Nous écrirons ce code dansindex.jset envoyez une demande au système de fichiers. Cette méthode utilise WINDOW.TEMPORARY ou WINDOW.PERSISTENT. La taille qui sera nécessaire pour le stockage est évaluée en octets (5 Mo dans notre cas).

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

Maintenant, nous pouvons appuyer sur le CREATE FILE et l'alerte confirmera que nous avons créé le fichier avec succès.

Maintenant, nous pouvons vérifier à nouveau le dossier racine de nos applications et nous pouvons y trouver notre nouveau fichier.

Étape 4B - Fonction d'écriture de fichier

Dans cette étape, nous allons écrire du texte dans notre fichier. Nous enverrons à nouveau une demande au système de fichiers, puis créerons le rédacteur de fichier pour pouvoir écrireLorem Ipsum texte que nous avons attribué au blob variable.

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Après avoir appuyé sur le WRITE FILE bouton, l'alerte nous informera que l'écriture est réussie comme dans la capture d'écran suivante.

Maintenant nous pouvons ouvrir log.txt et voir ça Lorem Ipsum est écrit à l'intérieur.

Étape 4C - Fonction de lecture de fichier

Dans cette étape, nous allons lire le fichier log.txt et l'afficher dans le textareaélément. Nous enverrons une requête au système de fichiers et obtiendrons l'objet fichier, puis nous créonsreader. Lorsque le lecteur est chargé, nous attribuerons la valeur renvoyée àtextarea.

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Lorsque nous cliquons sur le READ FILE bouton, le texte du fichier sera écrit à l'intérieur textarea.

Étape 4D - Fonction de suppression de fichier

Et enfin, nous allons créer une fonction de suppression log.txt fichier.

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

Nous pouvons maintenant appuyer sur le DELETE FILEpour supprimer le fichier du dossier racine des applications. L'alerte nous informera que l'opération de suppression est réussie.

Si nous vérifions le dossier racine des applications, nous verrons qu'il est vide.

Ce plugin est utilisé pour télécharger et télécharger des fichiers.

Étape 1 - Installation du plug-in de transfert de fichiers

Nous devons ouvrir command prompt et exécutez la commande suivante pour installer le plugin.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

Étape 2 - Créer des boutons

Dans ce chapitre, nous allons vous montrer comment télécharger et télécharger des fichiers. Créons deux boutons dansindex.html

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

Étape 3 - Ajouter des écouteurs d'événements

Les écouteurs d'événements seront créés dans index.js à l'intérieur de onDeviceReadyfonction. Nous ajoutonsclick événements et callback les fonctions.

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

Étape 4A - Fonction de téléchargement

Cette fonction sera utilisée pour télécharger les fichiers d'un serveur à un autre. Nous avons téléchargé le fichier surpostimage.orgpour rendre les choses plus simples. Vous voudrez probablement utiliser votre propre serveur. La fonction est placée dansindex.js et sera déclenché lorsque le bouton correspondant est enfoncé. uri est le lien de téléchargement du serveur et fileURI est le chemin d'accès au dossier DCIM sur notre appareil.

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },
		
      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },
		
      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

Une fois que nous appuyons sur le DOWNLOAD bouton, le fichier sera téléchargé à partir du postimg.orgserveur sur notre appareil mobile. Nous pouvons vérifier le dossier spécifié et voir quemyFile y a-t-il.

La sortie de la console ressemblera à ceci -

Étape 4B - Fonction de téléchargement

Créons maintenant une fonction qui prendra le fichier et le téléchargera sur le serveur. Encore une fois, nous voulons simplifier cela autant que possible, nous allons donc utiliserposttestserver.comserveur en ligne pour les tests. La valeur de l'URI sera liée pour être publiée surposttestserver.

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";
   
   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }
	
}

Maintenant, nous pouvons appuyer sur le UPLOADbouton pour déclencher cette fonction. Nous obtiendrons une sortie de console pour confirmer que le téléchargement a réussi.

Nous pouvons également vérifier le serveur pour nous assurer que le fichier a été téléchargé.

La géolocalisation est utilisée pour obtenir des informations sur la latitude et la longitude de l'appareil.

Étape 1 - Installation du plug-in

Nous pouvons installer ce plugin en tapant le code suivant pour command prompt la fenêtre.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

Étape 2 - Ajouter des boutons

Dans ce didacticiel, nous allons vous montrer comment obtenir la position actuelle et comment surveiller les changements. Nous devons d'abord créer des boutons qui appelleront ces fonctions.

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

Étape 3 - Ajouter des écouteurs d'événements

Nous voulons maintenant ajouter des écouteurs d'événements lorsque l'appareil est prêt. Nous ajouterons l'exemple de code ci-dessous àonDeviceReady fonction dans index.js.

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);

Étape 3 - Créer des fonctions

Deux fonctions doivent être créées pour deux écouteurs d'événements. L'un sera utilisé pour obtenir la position actuelle et l'autre pour regarder la position.

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

Dans l'exemple ci-dessus, nous utilisons deux méthodes - getCurrentPosition et watchPosition. Les deux fonctions utilisent trois paramètres. Une fois que nous cliquonsCURRENT POSITION bouton, l'alerte affichera les valeurs de géolocalisation.

Si nous cliquons WATCH POSITIONbouton, la même alerte sera déclenchée toutes les trois secondes. De cette façon, nous pouvons suivre les changements de mouvement de l'appareil de l'utilisateur.

REMARQUE

Ce plugin utilise le GPS. Parfois, il ne peut pas renvoyer les valeurs à temps et la demande renverra une erreur de délai d'expiration. C'est pourquoi nous avons spécifiéenableHighAccuracy: true et maximumAge: 3600000.Cela signifie que si une demande n'est pas terminée à temps, nous utiliserons la dernière valeur connue à la place. Dans notre exemple, nous définissons maximumAge sur 3600000 millisecondes.

Ce plugin est utilisé pour obtenir des informations sur la langue locale des utilisateurs, la date et le fuseau horaire, la devise, etc.

Étape 1 - Installation du plug-in de globalisation

Ouvert command prompt et installez le plugin en tapant le code suivant

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

Étape 2 - Ajouter des boutons

Nous ajouterons plusieurs boutons à index.html pour pouvoir appeler différentes méthodes que nous créerons plus tard.

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

Étape 3 - Ajouter des écouteurs d'événements

Des écouteurs d'événements seront ajoutés à l'intérieur getDeviceReady fonction dans index.js pour nous assurer que notre application et Cordova sont chargés avant de commencer à l'utiliser.

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

Étape 4A - Fonction de langage

La première fonction que nous utilisons renvoie la balise de langue BCP 47 de l'appareil du client. Nous utiliseronsgetPreferredLanguageméthode. La fonction a deux paramètres onSuccess etonError. Nous ajoutons cette fonction dansindex.js.

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

Une fois que nous appuyons sur le LANGUAGE bouton, l'alerte sera affichée à l'écran.

Étape 4B - Fonction locale

Cette fonction renvoie la balise BCP 47 pour les paramètres locaux du client. Cette fonction est similaire à celle que nous avons créée auparavant. La seule différence est que nous utilisonsgetLocaleName méthode cette fois.

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

Lorsque nous cliquons sur le LOCALE bouton, l'alerte affichera notre balise locale.

Étape 4C - Fonction de date

Cette fonction est utilisée pour renvoyer la date en fonction des paramètres régionaux et de fuseau horaire du client. date paramètre est la date actuelle et options le paramètre est facultatif.

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

Nous pouvons maintenant exécuter l'application et appuyer sur DATE bouton pour voir la date actuelle.

La dernière fonction que nous allons afficher est de renvoyer les valeurs de devise selon les paramètres de l'appareil du client et le code de devise ISO 4217. Vous pouvez voir que le concept est le même.

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

le CURRENCY Le bouton déclenchera une alerte qui montrera le modèle de devise des utilisateurs.

Ce plugin propose d'autres méthodes. Vous pouvez voir tout cela dans le tableau ci-dessous.

méthode paramètres détails
getPreferredLanguage onSuccess, onError Renvoie la langue actuelle du client.
getLocaleName onSuccess, onError Renvoie les paramètres régionaux actuels du client.
dateToString date, onSuccess, onError, options Renvoie la date en fonction des paramètres régionaux et du fuseau horaire du client.
stringToDate dateString, onSuccess, onError, options Analyse une date en fonction des paramètres du client.
getCurrencyPattern currencyCode, onSuccess, onError Renvoie le modèle de devise du client.
getDatePattern onSuccess, onError, options Renvoie le modèle de date du client.
getDateNames onSuccess, onError, options Renvoie un tableau de noms des mois, des semaines ou des jours selon les paramètres du client.
isDayLightSavingsTime date, succèsCallback, errorCallback Utilisé pour déterminer si l'heure d'été est active en fonction du fuseau horaire et du calendrier du client.
getFirstDayOfWeek onSuccess, onError Renvoie le premier jour de la semaine selon les paramètres du client.
numberToString nombre, onSuccess, onError, options Renvoie le nombre selon les paramètres du client.
stringToNumber chaîne, onSuccess, onError, options Analyse un nombre en fonction des paramètres du client.
getNumberPattern onSuccess, onError, options Renvoie le modèle numérique en fonction des paramètres du client.

Ce plugin est utilisé pour ouvrir le navigateur Web dans l'application Cordova.

Étape 1 - Installation du plug-in

Nous devons installer ce plugin dans command prompt fenêtre avant que nous puissions l'utiliser.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

Étape 2 - Bouton Ajouter

Nous ajouterons un bouton qui sera utilisé pour l'ouverture inAppBrowser fenêtre dans index.html.

Étape 3 - Ajouter un écouteur d'événements

Ajoutons maintenant un écouteur d'événements pour notre bouton dans onDeviceReady fonction dans index.js.

document.getElementById("openBrowser").addEventListener("click", openBrowser);

Étape 4 - Créer une fonction

Dans cette étape, nous créons une fonction qui ouvrira le navigateur dans notre application. Nous l'attribuons auref variable que nous pouvons utiliser plus tard pour ajouter des écouteurs d'événements.

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);
   
   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

Si nous pressons BROWSER bouton, nous verrons la sortie suivante à l'écran.

La console écoutera également les événements. loadstart l'événement se déclenchera lorsque l'URL commencera à se charger et loadstopse déclenche lorsque l'URL est chargée. Nous pouvons le voir dans la console.

Une fois que nous fermons le navigateur, exit L'événement se déclenchera.

Il existe d'autres options possibles pour la fenêtre InAppBrowser. Nous l'expliquerons dans le tableau ci-dessous.

S.Non option et détails
1

location

Utilisé pour activer ou désactiver la barre d'adresse du navigateur. Les valeurs sontyes ou no.

2

hidden

Utilisé pour masquer ou afficher dansAppBrowser. Les valeurs sontyes ou no.

3

clearCache

Utilisé pour vider le cache des cookies du navigateur. Les valeurs sontyes ou no.

4

clearsessioncache

Utilisé pour vider le cache des cookies de session. Les valeurs sontyes ou no.

5

zoom

Utilisé pour masquer ou afficher les commandes de zoom du navigateur Android. Les valeurs sontyes ou no.

6

hardwareback

yes pour utiliser le bouton de retour matériel pour revenir en arrière dans l'historique du navigateur. no pour fermer le navigateur une fois que le bouton de retour est cliqué.

On peut utiliser ref(référence) variable pour certaines autres fonctionnalités. Nous allons vous en montrer quelques exemples rapides. Pour supprimer les écouteurs d'événements, nous pouvons utiliser -

ref.removeEventListener(eventname, callback);

Pour fermer InAppBrowser, nous pouvons utiliser -

ref.close();

Si nous avons ouvert une fenêtre cachée, nous pouvons la montrer -

ref.show();

Même le code JavaScript peut être injecté dans InAppBrowser -

var details = "javascript/file/url"
ref.executeScript(details, callback);

Le même concept peut être utilisé pour injecter du CSS -

var details = "css/file/url"
ref.inserCSS(details, callback);

Le plugin multimédia Cordova est utilisé pour enregistrer et lire des sons audio dans les applications Cordova.

Étape 1 - Installation du plug-in multimédia

Le plugin multimédia peut être installé en exécutant le code suivant dans command prompt la fenêtre.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

Étape 2 - Ajouter des boutons

Dans ce tutoriel, nous allons créer un lecteur audio simple. Créons les boutons dont nous avons besoinindex.html.

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

Étape 3 - Ajouter des écouteurs d'événements

Nous devons maintenant ajouter des écouteurs d'événements pour nos boutons à l'intérieur onDeviceReady fonction à l'intérieur index.js.

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

Étape 4A - Fonction de lecture

La première fonction que nous allons ajouter est playAudio. Nous définissonsmyMediaen dehors de la fonction car nous souhaitons l'utiliser dans des fonctions qui seront ajoutées ultérieurement (pause, stop, volumeUp et volumeDown). Ce code est placé dansindex.js fichier.

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

On peut cliquer PLAY pour démarrer la musique de piano à partir du src chemin.

Étape 4B - Fonctions de pause et d'arrêt

Les prochaines fonctions dont nous avons besoin sont pauseAudio et stopAudio.

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

Maintenant, nous pouvons mettre en pause ou arrêter le son du piano en cliquant PAUSE ou STOP boutons.

Étape 4C - Fonctions de volume

Pour régler le volume, nous pouvons utiliser setVolumeméthode. Cette méthode prend un paramètre avec des valeurs de0 à 1. Nous définirons la valeur de départ sur0.5.

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

Une fois que nous pressons VOLUME UP ou VOLUME DOWN nous pouvons changer la valeur du volume en 0.1.

Le tableau suivant montre les autres méthodes fournies par ce plugin.

S.Non Méthode et détails
1

getCurrentPosition

Renvoie la position actuelle d'un audio.

2

getDuration

Renvoie la durée d'un audio.

3

play

Utilisé pour démarrer ou reprendre l'audio.

4

pause

Utilisé pour interrompre l'audio.

5

release

Libère les ressources audio du système d'exploitation sous-jacent.

6

seekTo

Utilisé pour changer la position d'un audio.

sept

setVolume

Utilisé pour régler le volume de l'audio.

8

startRecord

Démarrez l'enregistrement d'un fichier audio.

9

stopRecord

Arrêtez l'enregistrement d'un fichier audio.

dix

stop

Arrêtez la lecture d'un fichier audio.

Ce plugin est utilisé pour accéder aux options de capture de l'appareil.

Étape 1 - Installation du plug-in Media Capture

Pour installer ce plugin, nous allons ouvrir command prompt et exécutez le code suivant -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

Étape 2 - Ajouter des boutons

Puisque nous voulons vous montrer comment capturer de l'audio, de l'image et de la vidéo, nous allons créer trois boutons dans index.html.

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

Étape 3 - Ajouter des écouteurs d'événements

La prochaine étape consiste à ajouter des écouteurs d'événements à l'intérieur onDeviceReady dans index.js.

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

Étape 4A - Fonction de capture audio

La première fonction de rappel dans index.js est audioCapture. Pour démarrer l'enregistreur de son, nous utiliseronscaptureAudiométhode. Nous utilisons deux options -limit permettra d'enregistrer un seul clip audio par opération de capture unique et duration est le nombre de secondes d'un clip audio.

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Quand on presse AUDIO bouton, l'enregistreur de son s'ouvrira.

La console affichera le tableau retourné d'objets capturés par les utilisateurs.

Étape 4B - Fonction de capture d'image

La fonction de capture d'image sera la même que la dernière. La seule différence est que nous utilisonscaptureImage méthode cette fois.

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Maintenant nous pouvons cliquer IMAGE pour démarrer la caméra.

Lorsque nous prenons une photo, la console enregistre le tableau avec l'objet image.

Étape 4C - Fonction de capture vidéo

Répétons le même concept pour la capture vidéo. Nous utiliseronsvideoCapture méthode cette fois.

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

Si nous pressons VIDEO bouton, la caméra s'ouvre et nous pouvons enregistrer la vidéo.

Une fois la vidéo enregistrée, la console renverra le tableau une fois de plus. Cette fois avec un objet vidéo à l'intérieur.

Ce plugin fournit des informations sur le réseau de l'appareil.

Étape 1 - Installation du plug-in d'informations réseau

Pour installer ce plugin, nous allons ouvrir command prompt et exécutez le code suivant -

C:\Users\username\Desktop\CordovaProject>cordova plugin 
   add cordova-plugin-network-information

Étape 2 - Ajouter des boutons

Créons un bouton dans index.html qui sera utilisé pour obtenir des informations sur le réseau.

<button id = "networkInfo">INFO</button>

Étape 3 - Ajouter des écouteurs d'événements

Nous ajouterons trois écouteurs d'événements à l'intérieur onDeviceReady fonction dans index.js. L'un écoutera les clics sur le bouton que nous avons créé auparavant et les deux autres écouteront les changements d'état de la connexion.

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

Étape 4 - Création de fonctions

networkInfoLa fonction retournera des informations sur la connexion réseau actuelle une fois que le bouton sera cliqué. Nous appelonstypeméthode. Les autres fonctions sontonOffline et onOnline. Ces fonctions écoutent les changements de connexion et tout changement déclenchera le message d'alerte correspondant.

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

Lorsque nous démarrons l'application connectée au réseau, onOnline La fonction déclenchera une alerte.

Si nous pressons INFO bouton, l'alerte affichera l'état de notre réseau.

Si nous nous déconnectons du réseau, onOffline La fonction sera appelée.

Ce plugin est utilisé pour afficher un écran de démarrage au lancement de l'application.

Étape 1 - Installation du plugin Splash Screen

Le plugin d'écran de démarrage peut être installé dans command prompt window en exécutant le code suivant.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen

Étape 2 - Ajouter un écran de démarrage

L'ajout d'un écran de démarrage est différent de l'ajout des autres plugins Cordova. Nous devons ouvrirconfig.xml et ajoutez les extraits de code suivants dans le widget élément.

Le premier extrait est SplashScreen. Il avalue propriété qui est le nom des images dans platform/android/res/drawable- Dossiers. Cordova propose par défautscreen.pngimages que nous utilisons dans cet exemple, mais vous souhaiterez probablement ajouter vos propres images. L'important est d'ajouter des images pour la vue portrait et paysage et également de couvrir différentes tailles d'écran.

<preference name = "SplashScreen" value = "screen" />

Le deuxième extrait que nous devons ajouter est SplashScreenDelay. Nous établissonsvalue à 3000 pour masquer l'écran de démarrage après trois secondes.

<preference name = "SplashScreenDelay" value = "3000" />

La dernière préférence est facultative. Si la valeur est définie surtrue, l'image ne sera pas étirée pour s'adapter à l'écran. S'il est réglé surfalse, il sera étiré.

<preference name = "SplashMaintainAspectRatio" value = "true" />

Maintenant, lorsque nous exécuterons l'application, nous verrons l'écran de démarrage.

Ce plugin est utilisé pour se connecter à la fonctionnalité de vibration de l'appareil.

Étape 1 - Installation du plug-in Vibration

Nous pouvons installer ce plugin dans command prompt window en exécutant le code suivant -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration

Étape 2 - Ajouter des boutons

Une fois le plugin installé, nous pouvons ajouter des boutons dans index.html qui sera utilisé plus tard pour déclencher la vibration.

<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>

Étape 3 - Ajouter des écouteurs d'événements

Maintenant, nous allons ajouter des écouteurs d'événements à l'intérieur onDeviceReady dans index.js.

document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);

Étape 4 - Créer des fonctions

Ce plugin est très simple à utiliser. Nous allons créer deux fonctions.

function vibration() {
   var time = 3000;
   navigator.vibrate(time);
}

function vibrationPattern() {
   var pattern = [1000, 1000, 1000, 1000];
   navigator.vibrate(pattern);
}

La première fonction prend le paramètre de temps. Ce paramètre est utilisé pour régler la durée de la vibration. L'appareil vibre pendant trois secondes une fois que nous appuyons surVIBRATION bouton.

La deuxième fonction utilise patternparamètre. Ce tableau demandera à l'appareil de vibrer pendant une seconde, puis attendra une seconde, puis répétera le processus.

Ce plugin nous permet de mettre en œuvre une politique de liste blanche pour la navigation de l'application. Lorsque nous créons un nouveau projet Cordova, lewhitelistLe plugin est installé et implémenté par défaut. Vous pouvez ouvrir leconfig.xml fichier à voir allow-intent paramètres par défaut fournis par Cordova.

Liste blanche de navigation

Dans l'exemple simple ci-dessous, nous autorisons les liens vers certaines URL externes. Ce code est placé dansconfig.xml. Navigation versfile:// Les URL sont autorisées par défaut.

<allow-navigation href = "http://example.com/*" />

Le signe astérisque, *, est utilisé pour permettre la navigation vers plusieurs valeurs. Dans l'exemple ci-dessus, nous autorisons la navigation vers tous les sous-domaines duexample.com. La même chose peut être appliquée au protocole ou au préfixe de l'hôte.

<allow-navigation href = "*://*.example.com/*" />

Liste blanche d'intention

Il y a aussi le allow-intentélément utilisé pour spécifier les URL autorisées à ouvrir le système. Vous pouvez voir dans leconfig.xml que Cordova nous a déjà permis la plupart des liens nécessaires.

Liste blanche des demandes de réseau

Quand tu regardes à l'intérieur config.xml fichier, il y a <access origin="*" />élément. Cet élément permet toutes les requêtes réseau à notre application via des crochets Cordova. Si vous souhaitez autoriser uniquement des requêtes spécifiques, vous pouvez le supprimer du fichier config.xml et le définir vous-même.

Le même principe est utilisé que dans les exemples précédents.

<access origin = "http://example.com" />

Cela permettra à toutes les demandes réseau de http://example.com.

Politique de sécurité du contenu

Vous pouvez voir la politique de sécurité actuelle de votre application dans le head élément dans index.html.

<meta http-equiv = "Content-Security-Policy" content = "default-src 
   'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 
   'self' 'unsafe-inline'; media-src *">

Il s'agit de la configuration par défaut. Si vous souhaitez tout autoriser de la même origine etexample.com, alors vous pouvez utiliser -

<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">

Vous pouvez également tout autoriser, mais restreindre CSS et JavaScript à la même origine.

<meta http-equiv = "Content-Security-Policy" content = "default-src *; 
   style-src 'self' 'unsafe-inline'; script-src 'self' 
   'unsafe-inline' 'unsafe-eval'">

Comme il s'agit d'un tutoriel pour débutants, nous recommandons les options Cordova par défaut. Une fois que vous vous êtes familiarisé avec Cordova, vous pouvez essayer différentes valeurs.

Cordova est utilisé pour créer des applications mobiles hybrides, vous devez donc en tenir compte avant de le choisir pour votre projet. Vous trouverez ci-dessous les meilleures pratiques pour le développement d'applications Cordova.

Applications à page unique

C'est la conception recommandée pour toutes les applications Cordova. SPA utilise un routeur côté client et une navigation chargée sur la page unique (généralementindex.html). Le routage est géré via AJAX. Si vous avez suivi nos tutoriels, vous avez probablement remarqué que presque tous les plugins Cordova doivent attendre que l'appareil soit prêt avant de pouvoir être utilisé. La conception du SPA améliorera la vitesse de chargement et les performances globales.

Événements tactiles

Depuis Cordova est utilisé pour le monde mobile, il est naturel d'utiliser touchstart et touchend événements au lieu de clickévénements. Les événements de clic ont un retard de 300 ms, de sorte que les clics ne semblent pas natifs. D'autre part, les événements tactiles ne sont pas pris en charge sur toutes les plates-formes. Vous devez en tenir compte avant de décider quoi utiliser.

Animations

Vous devez toujours utiliser le matériel accéléré CSS Transitions au lieu des animations JavaScript, car elles fonctionneront mieux sur les appareils mobiles.

Espace de rangement

Utilisez autant que possible la mise en cache de stockage. Les connexions au réseau mobile sont généralement mauvaises, vous devez donc minimiser les appels réseau dans votre application. Vous devez également gérer l'état hors ligne de l'application, car il y aura des moments où les appareils de l'utilisateur seront hors ligne.

Défilement

La plupart du temps, la première partie lente de votre application sera des listes déroulantes. Il existe plusieurs façons d'améliorer les performances de défilement de l'application. Notre recommandation est d'utiliser le défilement natif. Lorsqu'il y a beaucoup d'éléments dans la liste, vous devez les charger partiellement. Utilisez des chargeurs si nécessaire.

Images

Les images peuvent également ralentir l'application mobile. Vous devez utiliser des sprites d'image CSS chaque fois que possible. Essayez d'adapter parfaitement les images au lieu de les mettre à l'échelle.

Styles CSS

Vous devez éviter les ombres et les dégradés, car ils ralentissent le temps de rendu de la page.

Simplification

Le DOM du navigateur est lent, vous devriez donc essayer de minimiser la manipulation du DOM et le nombre d'éléments DOM.

Essai

Assurez-vous de tester votre application sur autant d'appareils et de versions de système d'exploitation que possible. Si l'application fonctionne parfaitement sur un appareil, cela ne signifie pas nécessairement qu'elle fonctionnera sur un autre appareil ou plate-forme.