Ionic Email Composer | Aprende cómo usarlo aquí

¿Pensando en incluir funcionalidades de envío y composición de emails con Ionic Email Composer? O, quizás, ya sabes cómo se hace pero no terminas de encajar del todo las piezas para hacerlo funcionar cómo tú quieres ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a componer emails con Ionic Email Composer en tu app y te mostraré también cómo se utilizan el resto de funcionalidades de la clase.

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.

Instalación de Email Composer Ionic

En primer lugar, como pasa con la mayoría de los componentes, a excepción de que sean nativos del sistema, tenemos que instalarlo. Para ello, vamos a utilizar las siguientes 2 líneas en consola.

$ ionic cordova plugin add cordova-plugin-email-composer
$ npm install --save @ionic-native/email-composer

La primera de ellas instalará el plugin correspondiente de córdoba para que el código se comunique con el dispositivo. La segunda será la encargada de instalar el código TS que nos va a servir de librería para usarla en nuestro proyecto.

Ahora solo tenemos que agregarlo a como provider para poder inyectarlo en nuestros constructores:

providers:[
    ....
    EmailComposer,
    ....
]

Bien, continuemos.

Plataformas aceptadas

La verdad que este componente es genial, y como tan genial que es da posibilidades en las siguientes:

• Amazon Fire OS
• Android
• Browser
• iOS
• Windows
• macOS

Creo recordar que nos da la posibilidad de usarlas en todos los sistemas posibles para los que trabaja Ionic, buen trabajo señores de Ionic “G”.

Configuración de Email Composer en Ionic

Por el momento no es necesaria darle una configuración adicional. Más adelante en el tiempo os enseñaré como podemos extender estos componentes para darle la funcionalidad que nosotros queremos.

Como se usa Email Composer para Ionic con ejemplos.

Vale, ahora a lo que nos concierne. Vamos a ver cómo se puede usar este módulo. Pero para tal fin que mejor que un ejemplo / example y hablar sobre él.

import { EmailComposer } from '@ionic-native/email-composer';

constructor(private emailComposer: EmailComposer) { }

...


this.emailComposer.isAvailable().then((available: boolean) =>{
 if(available) {
   sendMail();
 }
});

sendMail(){
    let email = {
      to: 'max@mustermann.de',
      cc: 'erika@mustermann.de',
      bcc: ['john@doe.com', 'jane@doe.com'],
      attachments: [
        'file://img/logo.png',
        'res://icon.png',
        'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
        'file://README.pdf'
      ],
      subject: 'Cordova Icons',
      body: 'How are you? Nice greetings from Leipzig',
      isHtml: true
    };

    // Send a text message using default options
    this.emailComposer.open(email);
}

En primer lugar, como era de esperar, tenemos que hacer un import del componente en cada una de las clases que vamos a usarlo. Mi consejo aquí es hacerte una clase “servicio” que te permite abstraer todo el código de envío de mails para así usarlo donde queramos.

Después lo inyectamos en el constructor. Recuerda que en Ionic no hace falta declarar un campo de clase y setearlo con el valor que nos llega. Se puede usar directamente en cualquier sitio de la misma clase.

Vale, ahora hacemos una comprobación con la función “isAvailable()” que devuelve una promesa para saber si el sistema está disponible para usar el componente. La controlaremos con el parámetro que trae. Este parámetro es un booleano que nos permite saber si ya está listo. Justo aquí, dentro de esta promesa, es donde tendremos que gestionar todo.

Por otro lado, tenemos la variable mail, en este caso es un simple array asociativo en el que tenemos que pasarle los datos con pares de nombre/valor.

“to” => Para quien va dirigido el mail.

“cc” => En caso de que queramos pone a alguien en copia.

“bcc” => En el caso de que queramos poner a alguien en copia oculta.

“atachements” => Es para cuando queremos enviar documentos adjuntos al mail.

“subject” => Es el asunto del mail.

“body” => Como su propio nombre indica, el cuerpo del mail.

“isHtml” => Nos permite definir si el mail lleva formato html.

Vale, esto es lo que hemos visto en el ejemplo. Ahora, más abajo, veremos el resto de cositas que podemos meter para construir nuestros mails.

Por último tenemos la función “open(params)”. Esta función es la que nos permite enviar el mensaje con el cuadro de dialogo correspondiente del sistema. El parámetro que recibe “params” es el array asociativo que hemos preparado un poquito más arriba en este texto.

Vale, pues visto el ejemplo que hemos puesto, vamos a ver los campos de clase y las funciones que tiene el componente para poder toquetear cosas de los mails.

¿Email composer not working? pues seguro que es por esto :)

Bien, ya son muchas las preguntas que respondo por privado conforme a este problema. Oye Aitor, ¿por qué no me funciona el envío de mails del mail composer? Pues en el 90% de los casos, la gente no utiliza el siguiente código previo a la construcción y el envío:

this.emailComposer.isAvailable().then((available: boolean) =>{ 
    if(available) { 
        //Desde aquí ya se puede enviar lo que quieras.
    } else {
        //Algo ha fallado, revísalo e inténtalo de nuevo.
    }
});

Cómo vemos en el ejemplo de código, al comprobar le retorno de la promesa podremos saber si la funcionalidad del composer esta lista (available) o no lo está (not available) y a partir de ahí hacemos lo que creamos oportuno.

Pues sí, el problema reside aquí. Revísalo e inténtalo de nuevo. En caso de que lo hayas hecho y siga sin funcionar, déjamelo en los comentarios y revisamos más a fondo.

Campos de clase y funciones de email composer ionic

Vale, si has llegado hasta aquí es que más o menos tienes clara la lógica del módulo. Ahora vamos a ver cómo podemos usarlo un poco más en profundidad. Como digo siempre llegados a este punto, solo mostraré los campos y las funciones propias de este módulo. Si buscas algo que no esté aquí es porque, posiblemente, sean de algún parent de este.

hasPermision()

Esta función devuelve una promesa que tendremos que controlar con un “then” que lleva un booleano. Este booleanonos permite conocer si tenemos los permisos suficientes como para poder hacer uso del sistema de composición de mails.

requestPermisions()

Esta función devuelve una promise que tendremos que controlar con un “then”. Esta lleva consigo un booleanoque nos permite conocer si se han concedido los permisos o no. Como es de esperar, y como su propio nombre indica, esta función hace una solicitud de permisos al usuario para poder usar el sistema.

isAvailable()

Esta función nos permite conocer si es posible enviar emails desde el dispositivo que estamos usando.

Devuelve una promesa con datos sobre la solicitud, pero nada importante dentro. En caso de que sea posible entrará al “then” y en caso de que no se pueda el mismo hilo de ejecución se irá al “reject” de la promesa.

open(options, scope)

Esta función nos permite abrir el cuadro de dialogo de envío de mails con los datos que le hemos pasado como hemos visto antes en el ejemplo.

El parámetro “options” es el array que hemos construido en el ejemplo. Y el segundo parámetro es el contexto de la aplicación desde donde queremos enviarlo. Recordemos que es opcional y cogerá “this” por defecto como componente.

addAlias(alias, packageName)

Nos permite enviar el mail desde una aplicación concreta como, por ejemplo, Gmail, directamente.

Y su uso es el siguiente:

this.email.addAlias('gmail', 'com.google.android.gm');

opciones de construcción del array para el mail 

Como puedes observar, tenemos bastantes parámetros de construcción para nuestro sistema de envío de mails. Más o menos como si enviaras un mail normal desde tu ordenador.

Pues todo queda más o menos bien explicado por aquí. Aun así iré actualizando este artículo con lo que me vais solicitando y poco a poco ir completando más y más la información.

Video tutorial por si no te gusta leer

Algo más que quizás te interese

Mira, en el momento que tu mejoras el icono de tu app, las descargas aumentan y los ingresos también. El logo es la puerta de entrada de tu app, y de la transición del listado a la ficha de Google Play. Y no es lo mismo tener una puerta de una mansión de 20 millones, que la puerta de una cuadra (si, de esas dobles que todos conocemos).

Bien, basándonos en esta premisa, hemos construido esta aplicación para que mejorando tu logo con sus consejos, y viendo en que nivel se encuentra, entrar a competir con los logos de la mansión de 20 millones. No te espoileo más, entra al enlace.

Espero haberte ayudado geniete, nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!