Saltar al contenido

Ionic Email Composer

Email Composer Ionic

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

Si has respondido que sí a alguna de estas dos preguntas, estate tranquilo, no eres el único, ni serás el último, que pasa por aquí a intentar conseguir respuesta para estas.

Es más, hasta los que somos más senior hacemos uso de estos artículos porque es imposible mantener todo esto en la cabeza, así que no te preocupes.

Mi nombre es Aitor Sánchez y soy desarrollador de apps desde el año 2014. Y, en este artículo, te enseñaré a implementar Ionic Email Composer en tu app y te mostraré también cómo se utiliza.

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.

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.

 

Más tutoriales de Ionic

 

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 🙂