Sms Ionic | Cómo enviar mensajes de texto desde mi app

¿Necesitas qué tus usuarios envíen sms desde dentro de tu aplicación? O, quizás ya sabes cómo se hace esto con el componente Sms Ionic, pero aún te falta conocer algún campo o función de la clase para poder adaptarla a tu gusto ¿verdad?

Mi nombre es Aitor Sánchez, hago apps desde 2014, y en este artículo vas a aprender a hacer que tus usuarios puedan enviar mensajes cortos desde tu app, o, incluso, si tu quieres enviar mensajes desde código puedas hacerlo.

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 coña, quizás te interese.

Instalación de SMS Ionic

Pues cómo en todos los componentes desacoplados del sistema, necesitamos realizar una instalación para poder usarlo. Para ello vamos a usar las dos siguientes líneas de código:

$ ionic cordova plugin add cordova-sms-plugin 
$ npm install @awesome-cordova-plugins/sms

La primera instalará el plugin necesario para poder realizar la comunicación desde la app con la parte nativa del sistema. Y la segunda instalará el código necesario para la comunicación e nuestro código TS con el plugin.

Configuración de SMS en Ionic

Continuamos avanzando y ahora le toca el turno a la configuración. Recuerda que si estás usando Ionic 4 con el módulo NGX no es necesario que hagas esto, de lo contrario, si lo es.

...

import { SMS } from "@awesome-cordova-plugins/sms/ngx";

...

providers: [
...,
SMS,
...
]

...

Nota recordatoria: No es recomendable que esto se haga en el AppModule a menos que el componente se vaya a usar en toda la aplicación. Lo correcto será que lo incluyas en los providers del module del componente que lo vaya a usar.

Plataformas soportadas por SMS Ionic

La verdad que solo tiene sentido su uso en los dispositivos móviles. Así que son estos:

• Android
• iOS
• Windows Phone 8
• Windows Mobile

Cómo se usa SMS en Ionic con ejemplo / example

Como siempre, antes de continuar, me gusta que tengas un ejemplo de código que te permitirá ilustrarte un poco antes de seguir con la explicación.

...

import { SMS } from "@awesome-cordova-plugins/sms/ngx";

constructor(private sms: SMS) { }

...

// Envía un mensaje con las opciones dadas.
this.sms.send('+678123456', 'Hola mundo!');

...

Cómo puedes ver, no tiene nada, pero nada, de complejidad.

1. Importamos la clase SMS desde el paquete: import { SMS } from '@ionic-native/sms';
2. Inyectamos una instancia del servicio a través del constructor.
3. Enviamos un mensaje con la función “send”.

Funciones y métodos de la clase SMS de Ionic

Continuamos hablando de la funcionalidad. Ahora les toca el turno a las rutinas.

send(phoneNumber, message, options)

• Esta función realiza un envío de un SMS.
• Parámetros:
  • phoneNumber -> string | array<string> -> Será el número/s de teléfono a los que hay que enviar el mensaje.
  • message -> string -> Será el mensaje que vamos a enviar.
  • options -> SmsOptions -> Será una instancia de esta interface. La veremos en la sección de Interfaces y campos.
• Retorna una promesa que tenemos que controlar. Se resolverá si el mensaje ha sido enviado correctamente.

hasPermissions()

• Básicamente, comprueba si tenemos los permisos necesarios para enviar el SMS. En caso de que sea la primera vez, lo solicitará.
• Nota: Solo está disponible para Android.
• Retorna una promesa con un booleano en su interior que nos informa si se han aceptado los permisos.

Interfaces y campos

Ahora vamos a ver las interfaces y los campos de la clase.

SmsOptions

Esta interface contiene las opciones con las que se va a tratar el mensaje. Los campos son los siguientes:

• replaceLineaBreaks -> boolean -> Remplazará los \n por una nueva línea. Por defecto es “false”
• android -> SmsOptionsAndroid -> Ahora vemos esta interface.

SmsOptionsAndroid

Los campos son los siguientes:

• intent -> string -> Con este campo le podemos decir al sistema si queremos que utilice una aplicación diferente para enviar el mensaje. Por ejemplo, la aplicación de mensajes de Android.
• Nota: Si lo dejamos vacío, no usará ninguna aplicación.

Y el tutorial en vídeo, cómo siempre

Algo más que quizás te interese

En el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Y aquí termina el artículo de hoy geniete. Espero haberte ayudado y nos vemos en el siguiente. Hasta entonces ¡que vaya bien!