Cordova - Contacts

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.