Saltar al contenido

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

Call Directory Ionic

¿Pensando en acceder al 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?

Si has respondido si a cualquiera de estas dos preguntas, tranquilo, no eres el único que se las hace y no serás el último. Es más, y cómo digo siempre, hasta los que somos más expertos necesitamos de estos artículos cuando queremos usar algún componente que no hemos usado antes, o que llevamos mucho sin usar.

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde el 2014, y en este artículo aprenderás cómo acceder a dicho directorio mediante Call Directory Ionic y, además, de una manera sencilla y rápida.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

¿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.

 

Más tutoriales de Ionic

 

En fin, ya hemos llegado al final. No te imaginas lo cuesta arriba que se me hace escribir estas últimas líneas. Nunca se lo que poner para despedirme de ti L Bueno, pues nada, recordarte que te pases por el círculo, en este enlace, que es una red que estoy montando alrededor de esta profesión de la que me encantaría que formaras parte, si no lo haces ya, en la que hablo con mi audiencia de manera directa. ¿Te apuntas? Na, seguro que sí.

Un saludo y nos vemos en el siguiente capítulo.