Cordova - Contatos

Este plugin é usado para acessar o banco de dados de contatos do dispositivo. Neste tutorial, mostraremos como criar, consultar e excluir contatos.

Etapa 1 - instalar o plug-in de contatos

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

Etapa 2 - Adicionando botões

O botão será usado para chamar o createContactfunção. Vamos colocá-lo nodiv class = "app" no index.html Arquivo.

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

Etapa 2 - Adicionar ouvintes de eventos

Abrir index.js e copie o seguinte snippet de código no onDeviceReady função.

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

Etapa 3A - Função de retorno de chamada (navigator.contacts.create)

Agora, não temos nenhum contato armazenado no dispositivo.

Nossa primeira função de retorno de chamada irá chamar o navigator.contacts.createmétodo onde podemos especificar os novos dados de contato. Isso criará um contato e o atribuirá aomyContactvariável, mas não será armazenado no dispositivo. Para armazená-lo, precisamos chamar osave método e criar funções de retorno de chamada de sucesso e erro.

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

Quando clicamos no ADD CONTACT botão, o novo contato será armazenado na lista de contatos do dispositivo.

Etapa 3B - Função de retorno de chamada (navigator.contacts.find)

Nossa segunda função de retorno de chamada irá consultar todos os contatos. Vamos usar onavigator.contacts.findmétodo. O objeto de opções possui um parâmetro de filtro que é usado para especificar o filtro de pesquisa.multiple = trueé usado porque queremos retornar todos os contatos do dispositivo. ofield chave para pesquisar contatos por displayName já que o usamos ao salvar o contato.

Depois que as opções forem definidas, estamos usando findmétodo para consultar contatos. A mensagem de alerta será acionada para cada contato encontrado.

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

Quando pressionamos o FIND CONTACT botão, um pop-up de alerta será acionado, pois salvamos apenas um contato.

Etapa 3C - função de retorno de chamada (excluir)

Nesta etapa, usaremos o método find novamente, mas desta vez definiremos opções diferentes. ooptions.filter está definido para pesquisar isso Test Userque deve ser excluído. Depois decontactfindSuccess função de retorno de chamada retornou o contato que queremos, vamos excluí-lo usando o remove método que requer seus próprios retornos de chamada de sucesso e erro.

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

Agora, temos apenas um contato armazenado no dispositivo. Adicionaremos manualmente mais um para mostrar o processo de exclusão.

Vamos agora clicar no DELETE CONTACT botão para deletar o Test User. Se verificarmos a lista de contatos novamente, veremos que oTest User não existe mais.