Córdoba - Contactos

Este complemento se utiliza para acceder a la base de datos de contactos del dispositivo. En este tutorial le mostraremos cómo crear, consultar y eliminar contactos.

Paso 1: instalar el complemento de contactos

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

Paso 2: agregar botones

El botón se utilizará para llamar al createContactfunción. Lo colocaremos en eldiv class = "app" en index.html archivo.

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

Paso 2: agregar oyentes de eventos

Abierto index.js y copie el siguiente fragmento de código en el onDeviceReady función.

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

Paso 3A - Función de devolución de llamada (navigator.contacts.create)

Ahora, no tenemos ningún contacto almacenado en el dispositivo.

Nuestra primera función de devolución de llamada llamará al navigator.contacts.createmétodo donde podemos especificar los nuevos datos de contacto. Esto creará un contacto y lo asignará almyContactvariable pero no se almacenará en el dispositivo. Para almacenarlo, debemos llamar alsave y cree funciones de devolución de llamada de éxito y error.

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);
   }
	
}

Cuando hacemos clic en el ADD CONTACT , el nuevo contacto se almacenará en la lista de contactos del dispositivo.

Paso 3B - Función de devolución de llamada (navigator.contacts.find)

Nuestra segunda función de devolución de llamada consultará todos los contactos. Usaremos elnavigator.contacts.findmétodo. El objeto de opciones tiene un parámetro de filtro que se utiliza para especificar el filtro de búsqueda.multiple = truese utiliza ya que queremos devolver todos los contactos del dispositivo. losfield tecla para buscar contactos por displayName ya que lo usamos al guardar el contacto.

Una vez configuradas las opciones, usamos findmétodo para consultar contactos. El mensaje de alerta se activará para cada contacto que se encuentre.

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);
   }
	
}

Cuando presionamos el FIND CONTACT , se activará una ventana emergente de alerta ya que solo hemos guardado un contacto.

Paso 3C - Función de devolución de llamada (eliminar)

En este paso, usaremos el método de búsqueda nuevamente pero esta vez configuraremos diferentes opciones. losoptions.filter está configurado para buscar eso Test Userque tiene que ser eliminado. Después de lacontactfindSuccess La función de devolución de llamada ha devuelto el contacto que queremos, lo eliminaremos usando el remove método que requiere sus propias devoluciones de llamada de éxito y error.

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);
   }
	
}

Ahora, solo tenemos un contacto almacenado en el dispositivo. Agregaremos manualmente uno más para mostrarle el proceso de eliminación.

Ahora haremos clic en el DELETE CONTACT botón para eliminar el Test User. Si volvemos a revisar la lista de contactos, veremos que elTest User No existe más.