Envía emails fácilmente desde tu aplicación móvil con Appery.io y Mailgun

Este artículo ha sido escrito y aportado por Max Katz, responsable de Relaciones con la Comunidad de Desarrollo en Appery.io.

Muchos profesionales del desarrollo que utilizan la plataforma de apps móviles en la nube, Appery.io, envían emails desde sus aplicaciones para registros, confirmaciones y mucho más. Para facilitar el uso de la API de Mailgun en Appery.io, hemos introducido un plugin de Mailgun en Appery.io.

El plugin incluye una app de muestra con una página que enseña a enviar un email utilizando la API. Puedes usar la app de muestra como punto de partida o añadir el plugin a cualquier otra app existente.

Antes de enseñarte a usar el plugin, me gustaría contarte un poco más sobre la plataforma de desarrollo Appery.io.

Appery.io es una plataforma de desarrollo y ejecución en la nube que permite crear rápidamente aplicaciones móviles empresariales multiplataforma conectadas a las API. Estas son las ventajas y características de la plataforma:

• Crea rápidamente aplicaciones móviles multiplataforma con el creador visual de arrastrar y soltar de Appery.io. Las aplicaciones se crean con tecnologías de código abierto como jQuery Mobile, Ionic, Bootstrap y Apache Cordova.
• Conecta fácilmente bases de datos SQL externas y otras fuentes de datos empresariales con Appery.io API Express.
• Envía notificaciones push segmentadas rápidamente con Appery.io Push.
• Añade bases de datos a tu app rápidamente con Appery.io Database.
• Escribe lógica del lado del servidor y crea API personalizadas de forma rápida con Appery.io Server Code.
• Prueba o comparte tus aplicaciones al instante con cualquier persona y en cualquier dispositivo con la app Appery.io Tester.
• Empaqueta rápidamente tu app para iOS, Android y Windows Phone para enviarla a una tienda de aplicaciones con Appery.io Cloud Build.

Ahora que ya hemos presentado la plataforma, vamos a crear una aplicación móvil que utilice la API de Mailgun para enviar mensajes de email desde la app.

El primer paso es añadir un plugin a una aplicación nueva o existente. El plugin está disponible para las aplicaciones de Ionic y jQuery Mobile. Si ya conoces AngularJS, puedes usar la versión de Ionic. Si aún no conoces AngularJS, es mejor probar la versión de jQuery Mobile (solo tienes que saltar a la siguiente sección).

1. Dentro del creador de aplicaciones (puedes usar una app existente o crear una nueva), selecciona Create new > From Plugin.
2. Busca Mailgun Mail API en la categoría Communication . Marca la casilla del plugin y haz clic en el botón Import selected plugins .

1. Dentro del creador de aplicaciones (puedes usar una app existente o crear una nueva), selecciona Create new > From Plugin.
2. Busca Mailgun Mail API en la categoría Communication . Marca la casilla del plugin y haz clic en el botón Import selected plugins .
3. En la página siguiente, marca la casilla para abrir el archivo de ajustes. Establece también la página de inicio en Mailgun. A continuación, haz clic en el botón Apply settings . El plugin se añadirá a tu app. ¡Listo! El plugin se ha añadido a tu app.

Ahora que el plugin está disponible en tu aplicación, necesitas realizar una configuración mínima. Esta sección consta de tres partes:

1. Configurar el dominio de Mailgun
2. Proteger las credenciales de la API de Mailgun
3. Configurar un proxy seguro

El dominio de Mailgun identifica tu cuenta.

1. Si no tienes una cuenta de Mailgun, regístrate!
2. Abre los ajustes de tu dominio y copia el valor del dominio (todo lo que va antes de .mailgun.org).
3. Pega el valor de la propiedad domain en el archivo Services/Mailgun_settings .

La API de Mailgun utiliza autenticación básica. Debes asegurarte de que la información de autenticación no quede expuesta en el cliente, por lo que vamos a mantenerla segura en el servidor.

1. En el creador de aplicaciones, haz clic en Database (en la barra de herramientas, arriba a la derecha).
2. Haz clic en Create new database. Llama a la base de datos mailgunDB.
3. Haz clic en Create new collection. Llama a la colección secret.
4. Dentro de la colección “secret”, crea dos columnas haciendo clic en el enlace +Col . Ambas columnas contendrán strings.
   1. keyName (tipo string)
   2. keyValue (tipo string)
5. Haz clic en +Row para añadir datos a la colección.
6. En la columna “keyName”, introduce mailgunAuthProxy.
7. Como Mailgun utiliza autenticación básica, es necesario codificar el nombre de usuario y la contraseña. La forma más sencilla de hacerlo es abrir las Chrome Dev. Tools Console, introduce lo siguiente y pulsa Intro (encontrarás la clave de API en el panel de control del dominio): >window.btoa(“api:key-0ce1xxxxxx”);
8. El valor codificado se mostrará en la siguiente línea:
 >”YXBpOmtleS0wYxxxx“
9. Copia el valor completo (incluido lo del final). Vuelve a la colección de la base de datos; para el valor de mailgunAuthProxy introduce “Basic ” (con un espacio) y, a continuación, pega todo el valor.


Ahora las credenciales de la API de Mailgun están seguras en el servidor. A continuación, vamos a configurar el proxy para usar este valor.

Configurar el proxy es muy rápido:

1. Abre la página del proxy.
2. Haz clic en Create new proxy. Llama al proxy MailgunProxy.
3. Selecciona la opción Use proxy + store sensitive data option.
   1. Para Database, selecciona mailgunDB
   2. Para Collection, selecciona secret
   3. Para Key column, selecciona keyName
   4. Para Value column, selecciona keyValue
4. Haz clic en Save.
5. Vuelve a tu app en el creador de aplicaciones. Abre el servicio Mailgun sending. En la pestaña Settings, actualiza la lista de proxies y selecciona Mailgun_Proxy.

Si estás creando una app de Ionic, debes completar un paso más:

• Abre Pages/mailgun y cambia a la pestaña Scope.
• Para la variable de ámbito (‘scope’) del email, cambia su tipo a Email (es un error que se solucionará pronto).

De forma opcional, puedes abrir Pages/index y cambiar el texto del Header como API de Mailgun y su Color como positive.

Ya puedes ejecutar la app.

Existen dos formas de ejecutar y probar tu app. Puedes ejecutarla en el navegador o directamente en el dispositivo. También te enseñaremos cómo compartir la app con quien quieras.

Prueba rápidamente la app en el navegador haciendo clic en el botón Test dentro del creador de aplicaciones. Así es como se ve la app al ejecutarse en el navegador:

También es muy fácil probar la app en un dispositivo real. Ni siquiera necesitas instalarla. Solo tienes que instalar la app Appery.io Tester  en tu dispositivo iOS o Android  y ejecutar la app rápidamente. Al iniciar sesión en la app Tester, verás todas las aplicaciones que has creado y podrás ejecutarlas al instante. Cuando ejecutes la app a través de la app Tester, también podrás probar cualquier API nativa de forma rápida.

También es muy sencillo compartir tu app con tu clientela, amistades y equipo. Lo único que tienen que hacer es instalar la app Appery.io Tester. Dales un código especial para compartir y podrán probar tu app.

¿Quieres crear aplicaciones rápidamente? Empieza desarrollar con el plan de prueba gratuito de Appery.io.

Autor: The Sinch Mailgun team The Sinch Mailgun team shares news, best practices, and strategies to take your products and apps to the next level using email. Subscribe to our newsletter to get all the articles in your inbox!