Saltar al contenido

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

SMS Ionic

¿Pensando en incluir algún sistema de envio de mensaje (sms) dentro de tu aplicación? O, quizás ya sabes cómo se hace 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?

Lo más lógico es que hayas respondido que sí, si no, no estarías aquí. Así que te digo, que no te preocupes que no serás el último, ni eres el primero, que pasa por aquí a intentar dar respuestas a estas preguntas.

Es más, hasta los que ya somos un poco más expertos en el tema, hacemos uso de este tipo de artículos cuando tenemos que implementar algo que no hemos usado nunca, o que llevamos mucho tiempo sin hacerlo.

Por si no me conoces aún, mi nombre es Aitor Sánchez, hago aplicaciones móviles desde 2014, y en este artículo te mostraré cómo puedes enviar mensajes desde tu aplicación hecha con Ionic.

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 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.

 

Más contenidos del curso

 


 

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

 

Y con esto terminado el artículo. La verdad que no ha sido para nada largo en comparación con otros del mismo estilo. Pero bueno, solo queda despedirme hasta el siguiente artículo. Hasta entonces, que vaya bien.