Menu

Implementando el plugin de Contacts con Ionic Native

tips - June 22, 2017 por Daniel Londoño Sanchez
ionic3.3.0ionic-app-scripts1.3.7cordova-cli7.0.0ionic-cli3.4.0

Ionic Native Contacts, te permite acceder y administrar la lista de contactos de tu dispositivo.

Hola a chic@s el dia de hoy les vengo presentando este nuevo post el cual nos guiara al momento de implementar el plugin Contacts de ionic native.

En esta oportunidad vamos a listar los contactos de nuestro dispositivo y a presentarlos en una lista, pero también tendremos un botón en el header de nuestra página el cual servirá para crear un nuevo contacto en nuestro dispositivo. Espero este post sea de gran utilidad para ustedes. Ahora solo nos queda comenzar :)

1. CREAMOS EL PROYECTO IONIC

Creamos un proyecto nuevo de ionic, en mi caso lo llame “ionic-contactos“.

$ ionic start ionic-contactos blank --v2

2. INGRESAMOS A LA CARPETA CREADA DEL PROYECTO IONIC

Ingresamos a la carpeta que se genero al ejecutar el comando “ionic start ionic-contactos blank –v2” la cual contiene todos los fuentes de nuestra aplicación. Para ingresar a la carpeta usamos el comando “cd ionic-contactos”.

$ cd ionic-contactos

3. AGREGAMOS LA PLATAFORMA EN LA QUE VAMOS A DESARROLLAR

En este punto agregamos la plataforma para la cual vamos a desarrollar nuestra app, en este caso usaremos la plataforma de android. Para agregarla digitamos el comando

$ ionic platform add android

4. AGREGAMOS EL PLUGIN “CONTACTS” DE IONIC NATIVE

Agregamos el plugin con el que vamos a trabajar el cual se encargara de administrar las funcionalidades que podemos hacer con los contactos. Ingresamos los comandos

$ ionic plugin add cordova-plugin-contacts

y

$ npm install –save @ionic-native/contacts

5. IMPORTAR EL PLUGIN A NUESTRO PROYECTO

Una vez listo los pasos anteriores nos dirigimos al archivo app.module.ts en la ruta (En mi caso)ionic-contactos/src/app/app.module.ts y agregamos el plugin y lo referenciamos como un “providers” de nuestra aplicación.

Ahora estamos listos para usar el plugin en nuestra aplicación…

6. AGREGAMOS UNA PAGINA NUEVA

Esta página se encargara de crear un contacto en nuestro dispositivo. Usamos el comando

ionic g page crearContacto

7. IMPORTAR MODULO DE LA PAGINA NUEVA

Nos dirigimos al archivo module.ts y hacemos referencia al modulo de la pagina nueva agregada.

8. AGREGAMOS EL CODIGO A NUESTRA PAGINA “home.ts”

Abrimos el archivo home.ts que se encuentra en la ruta ionic-contactos/src/app/pages/home/home.ts y en este vamos a hacer el código para recuperar los contactos del dispositivo en nuestra aplicación.

cargarListaContactos(): La función se encargara de recuperar el listado de contactos de nuestro dispositivo. En mi caso agregué un fragmento de código el cual lo que hará será recorrer el listado de contactos recuperado del dispositivo y cargaremos una variable “datosMostrar” solo con los contactos que tienen los campos displayName,phoneNumbers y photos.

modalNuevoContacto(): La función se encargara de abrir una página tipo modal la cual mostrara un formulario para crear un nuevo contacto y agregarlo a la lista.

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
/**
 * PLUGINS IONIC NATIVE
 */
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts';

/**
 * PAGINAS
 */
import { CrearContacto } from '../crear-contacto/crear-contacto';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  /**
   * listaContactos => se encarga de almacenar el listado de contactos recuperados del dispositivo
   * y pinta la lista que se ve en la vista.
   */
  listaContactos:any[]=[];
  avatar:string="./assets/icon/avatar.png";
  constructor(public navCtrl: NavController, private contacts:Contacts, private modalCtrl:ModalController) {
    this.cargarListaContactos();
  }
  /**
   * Funcion encargada de cargar la lista de contactos del celular, en mi caso filtrare y mostrare solo
   * los objetos que tienen valor en los campos dislplayName, photos, phoneNumbers. Con estos cargare
   * la lista a mostrar.
   */
  cargarListaContactos(){
    this.contacts.find(["*"])
    .then(res => {
      console.log({funcion:'CargarListaContactos',res:res})
      let datosMostar:any[]=[];
      res.map((item) =>{
        if(item.displayName != null && item.photos != null && item.phoneNumbers != null){
          datosMostar.push({displayName:item.displayName,photos:[{value:this.avatar}],phoneNumbers:item.phoneNumbers})
        }        
      })
      console.log({funcion:'CargarListaContactos',datosMostar:datosMostar})
      this.listaContactos = datosMostar;
    },error => {
      console.log({error:error})
    })
  }
  /**
   * Abre una ventana modal para ingresar la informacion del contacto a crear
   */
  modalNuevoContacto(){
    let modal = this.modalCtrl.create(CrearContacto);
    modal.onDidDismiss(data => {
      console.log({dataOnDidDismiss:data});
      if(data.estado){
        console.log(data)
        this.listaContactos.push({displayName:data.contacto.displayName,photos:[{value:this.avatar}],phoneNumbers:data.contacto.phoneNumbers});
      }
    });
    modal.present();
  }
}

9. DISEÑAMOS LA VISTA DE LA LISTA DE CONTACTOS

Ahora agregamos el código en el archivo home.html para la vista de nuestra aplicación la cual se encargara de listar los contactos recuperados del dispositivo. En esta pagina agregaremos un botón en el header el cual se encargara de llamar la función modalNuevoContacto() al hacerle click, en el content de la pagina implementaremos un *ngFor para cargar la lista de contactos.


<ion-header>
  <ion-navbar>
    <ion-title>
      Contacts Ionic Native
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="modalNuevoContacto()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let contacto of listaContactos">
      <ion-avatar item-start>
        <img [src]="contacto.photos[0].value ">
      </ion-avatar>
      <h2>{{contacto.displayName }}</h2>
      <p>Dispositivo: {{contacto.phoneNumbers[0].type}} - Numero: {{contacto.phoneNumbers[0].value}}</p>
    </ion-item>
  </ion-list>
</ion-content>

Con estos pasos hemos terminado el código necesario para listar los contactos. Ahora realizaremos el código para la pagina “crear-contacto”.

10. PAGINA CREAR CONTACTO

Primero que todo agregamos el plugin y lo referenciamos como un “providers” de nuestra aplicación en el archivo “crear-contacto.module.ts”.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CrearContacto } from './crear-contacto';
import { Contacts } from '@ionic-native/contacts';
@NgModule({
  declarations: [
    CrearContacto,
  ],
  imports: [
    IonicPageModule.forChild(CrearContacto),
  ],
  exports: [
    CrearContacto
  ],
  providers:[Contacts]
})
export class CrearContactoModule {}

11. INGRESAMOS CODIGO PARA CREAR UN NUEVO CONTACTO

Ahora agreguemos el código necesario en la pagina “crear-contacto.ts” la cual se encargara de crear un contacto nuevo. La vista de esta página será un simple formulario para ingresar los datos deseados.

crearContacto(): Esta función se encargara de implementar la lógica para crear un contacto, por medio de ngModel cargamos la información en la propiedad datos y esta la usamos para crear nuestro contacto nuevo.

dismiss(): Esta función se encargara de retornar a la pagina “home” en la que visualizaremos la lista con el contacto agregado una vez se crea.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

/**
 * PLUGINS IONIC NATIVE
 */
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts';

/**
 * Generated class for the CrearContacto page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-crear-contacto',
  templateUrl: 'crear-contacto.html',
})
export class CrearContacto {
  datos:any[]=[];

  constructor(public navCtrl: NavController, public navParams: NavParams, private contacts:Contacts,
              public viewCtrl: ViewController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CrearContacto');
  }

  /**
   * Funsion para agregar un nuevo contacto a la lista de contactos del telefono.
   */
  crearContacto(){
    let contact: Contact = this.contacts.create();
    let avatar ="./assets/icon/avatar.png";
    contact.displayName = this.datos['nombre'];
    contact.phoneNumbers = [new ContactField(this.datos['tipoNumero'], this.datos['numero'])];
    contact.photos = [new ContactField('url',avatar,false)]
    contact.save().then(
      () => { 
        console.log('Contact Guardado!', contact)
        this.dismiss({estado:true,contacto:contact});
      },
      (error: any) => {
        console.error('Error al guardar el contacto.', error)
        this.dismiss({estado:false});
      }
    );
  }

  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }

}

12. AGREGAR EL CODIGO PARA CREAR LA VISTA DE LA PAGINA CREAR CONTACTO

Ahora ingresamos el código a nuestra página “crear-contacto.html” la cual pintara un formulario para crear un contacto. Esta página se abrirá en forma de un modal.


<ion-header>
  <ion-navbar>
    <ion-title>crearContacto</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label floating>Nombre</ion-label>
      <ion-input type="text"  name="nombre" [(ngModel)]="datos.nombre"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Tipo numero</ion-label>
      <ion-select [(ngModel)]="datos.tipoNumero" name="tipoNumero">
        <ion-option value="Movil">Movil</ion-option>
        <ion-option value="Fijo">Fijo</ion-option>
        <ion-option value="Fax">Fax</ion-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label floating>Numero telefonico</ion-label>
      <ion-input type="number" [(ngModel)]="datos.numero" name="numero"></ion-input>
    </ion-item>
  </ion-list>
  <div padding>
    <button ion-button color="primary" block (click)="crearContacto()">Crear contacto</button>
    <button ion-button color="danger" block (click)="dismiss(false)">Cancelar</button>
  </div>
</ion-content>

Esto es todo, ahora solo falta compilar nuestra aplicación para generar nuestro apk y realizar nuestra prueba.

Ver código

¡Compártelo!