Call Directory Ionic - ¡Qué es y cómo se usa!

¿Necesitas que tu usuario acceda a su directorio de llamadas y contactos desde tu aplicación mediante Call Directory Ionic? O, quizás, ya sabes cómo se hace y lo tienes integrado. Pero, te falta algo para dejarlo cómo tú quieres ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde el 2014, y en este artículo vas a aprender a hacer que tu usuario acceda al directorio de llamadas mediante Call Directory Ionic y, además, de una manera sencilla y rápida.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

¿Qué es el Call Directory o directorio de llamadas y contactos?

Bueno, pues si eres un poco espabilado, que seguro que lo eres, ya sabrás de lo que estamos hablando. Pero para los que no… se trata de un acceso directo al listado de llamadas y contactos. Y también nos permite editar nuestro agenda de contactos. Te aconsejo que lo pruebes para dar una opinión tú mismo.

Nota: De momento esta componente solo es funcional con IOS. Para acceder al listado de Android tendremos que esperar un poquito a ver si adaptan el componente.

Instalación del componente

En primer lugar (al final haré un copia pega :) ) tenemos que importar las dependencias e instalar el plugin en nuestra aplicación. Para ello lo vamos hacer de la siguiente manera:

$ cordova plugin add cordova-plugin-call-directory --variable EXT_NAME="Cordova-Directory" --variable ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES="NO"
$ npm install --save @awesome-cordova-plugins/call-directory

Las variables EXT_NAME y EMBED_SWIFT_STANDARD_LIBRARIES de momento las vamos a dejar como están porque son configuración de sistema que no vamos a tocar ahora mismo. Solo te digo que EXT_NAME se trata del identificador que Swift va a usar como identificador para el acceso a esta información y el segundo para acceder a las librerías nativas de sistema.

Vale, y el último punto que tenemos que realizar antes de poder dar uso al directorio de llamadas es incluir las dependencias de este en nuestro proyecto. Para ello basta con hacerlo de la siguiente manera:

import { CallDirectory } from '@awesome-cordova-plugins/call-directory/ngx';

...

providers: [
    ...,
    CallDirectory,
    ...
]

...

¿Ves qué sencillo es? Basta con que llamemos al componente en el apartado providers de nuestro appmodule.ts y ya está listo para usar.

Bien, pues ya estamos en condiciones de ponernos manos a la obra.

Configuración del componente Call Directory en Ionic

Como todos los tutoriales tienen “la misma” estructura no me podía dejar aislado la configuración. ¿Pero sabes una cosa? Este módulo no la necesita. ¿Cómo? No, no, no necesita configuración basta con hacer lo que hemos hecho :)

¿Cómo usar el directorio de llamadas?

Vale, ahora sí que tenemos algo de chicha aquí. Como podrás comprobar, no se trata de un componente complejo ni extenso. Vale para lo que vale y para nada más

Aquí un ejemplo de uso:

import { CallDirectory } from '@awesome-cordova-plugins/call-directory/ngx';


constructor(private callDirectory: CallDirectory) { }


let items = [{label: "Hello", number: "123"}];
this.callDirectory.addIdentification(items)
  .then((res: any) => console.log(res))
  .catch((error: any) => console.error(error));

this.callDirectory.reloadExtension()
  .then(res: string) => console.log(res))
  .catch((error: any) => console.error(error));

Como vemos en el código, hemos inyectado la dependencia en el constructor para poder usarlo en nuestra clase.

A continuación, hemos creado un array en el que los objetos que contiene tienen dos campos. Por un lado, el label que es el campo que aparecerá en el contacto y por otro lado el número. ¿Sencillo no? Ah! Y también decir, que al ser un array podemos meter todos los que queramos… Y ahora llamamos al método “addIdentification” de nuestra clase “callDirectory” para agregar todo a la lista.

Después de haber agregado todo, basta con que llamemos a la función “reloadExtension” para que procese toda la información que hemos mandado. Y listo, ya estaría todo este contenido dentro de nuestro directorio de llamadas / contactos.

Nota: Si te has fijado en el código, estas funciones devuelven promesas así que tendremos que controlarlas con un “then” y un “catch”.

Vale, ahora pasemos a explicar un poco más en profundidad los entresijos de nuestro componente Call Directory.

Funciones de nuestra clase

• isAvailable -> Comprueba si los datos son accesibles y así poder leer y escribir en nuestra lista de llamadas / contactos. Retorna una promesa que en el then trae un boleano para identificar si todo está correcto.
• addIdentification -> Agrega nuevos registros a nuestro directorio de llamadas / contactos. Devuelve una promesa que trae los datos de las entradas agregadas.
• removeIdentification -> Hace lo mismo que la función anterior, pero en lugar de agregar, elimina. Retorna una promesa con los datos eliminados.
• getAllItems -> Devuelve todas las entradas que tenemos agregadas en nuestro sistema.
• reloadExtension -> Es llamada después de efectuar algún cambio para que este sea aplicado.

Estoy terminando de preparar un vídeo donde explicaré en directo como podemos usar este sistema para los más vaguetes. En cuanto lo tenga lo subiré a este artículo, así que sí te interesa aprender un poco más aún revísa este entrada de vez en cuando.

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Sin nada más que agregar me despido ya geniete. Espero haberte ayudado y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!