Saltar al contenido

Ionic Email Composer

Email Composer Ionic

En el artículo de hoy vamos a ver cómo podemos hacer un uso regular de un componente que no tiene mucho tirón entre los desarrolladores, pero ahí está, y está para usarlo. Hablamos de Ionic Email Composer. Un módulo que nos permite elaborar emails dentro de nuestra aplicación para luego ser enviados desde nuestro dispositivo. ¡Comencemos!

Eyyyyyyyy! Hola 🙂 Guapa lectora / majo lector. ¿Cómo van pasando las navidades? Espero que bien entre fiestas, jamón, vino y buena cerveza. Pues como has visto en la presentación del artículo hoy vamos a hablar un poquito de Mail composer, algo que no es muy utilizado, pero que con un uso correcto puede cubrir nichos de mercado interesantes.

Antes de continuar me gustaría comentarte que hace unas semanas me cambié de hosting por recomendación de un grande del sector. Y la verdad que estoy contentísimo con los chicos de Raiola Networks. He mejorado los rendiminetos de las webs y las apis más de un 30% en comparación de donde estaba antes. Así que si tienes pensado cambiarte, o pillar hosting nuevo, aquí te dejo un enlace por si quieres probarlo. Seguro que te ayudan igual que lo han hecho conmigo.

Ahora si, vamos al lio.
 

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: '[email protected]',
      cc: '[email protected]',
      bcc: ['[email protected]', '[email protected]'],
      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 

ParamTypeDetails
appstringLa aplicación con la que se va a mandar el mail por defecto
tostring | string[]El email/s a los que va dirigido
ccstring | string[]Los mail/s que queremos en copia
bccstring | string[]Los mail/s que queramos en copia oculta.
attachmentsstring[]Las rutas de los adjuntos codificados en base64
subjectstringEl asunto del mensaje
bodystringEl cuerpo del mensaje
isHtmlbooleanIndica si el mensaje que vamos a mandar está codificado en html
typestringEl tipo de contenido (solo es necesario en Android)

 

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.

El videotutorial para los más ganduletes 🙂

 

Simplemente espero haberte ayudado y si es así agradecería que compartieses este artículo con tus contactos para darle una mayor difusión. Pero antes de despedirme me gustaría que te pasases, si no lo has hecho ya, por el círculo en este enlace. Se trata de una comunidad online que estoy montando alrededor de esta genial disciplina que es la programación. En el enlace tienes más detalles 🙂

Sin más que agregar, me despido ya. Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien 🙂