Cómo enviar un SMS con Ionic

El desarrollo de aplicaciones móviles multiplataforma y la conexión a API de terceros son habilidades muy demandadas en tecnología. Hoy te mostraré cómo crear una aplicación móvil básica de Ionic que se conecte a la API de SMS de Vonage para enviar mensajes SMS.

También construiremos un barebones hapi para ayudar a nuestra aplicación Ionic a enviar mensajes SMS.

Requisitos previos

Para empezar, necesitarás:

• Un IDE impresionante como Visual Studio Code, WebStorm o Sublime Text

• La última versión LTS de Node.js

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Crear la aplicación Ionic

Ionic es un framework completo y un conjunto de herramientas que te ayudan a crear aplicaciones móviles multiplataforma rápidamente. Puedes utilizar Angular, Vue.js o React. Es el sueño de cualquier desarrollador web.

Instalar Ionic

Necesitaremos instalar la CLI de Ionic antes de jugar con algo de código.

En su consola, ejecute el siguiente comando:

npm install -g ionic

¡Construyámoslo!

Ionic viene con unas cuantas plantillas incorporadas para ayudarte a empezar con una bonita app boilerplate. Puedes elegir generar una aplicación con pestañas en la parte inferior de la interfaz de usuario, un menú lateral, o simplemente un lienzo en blanco. Hoy vamos a utilizar la plantilla en blanco.

Como hemos mencionado, Ionic te da la opción de construir tus aplicaciones móviles multiplataforma con múltiples frameworks web. Hoy, vamos a utilizar Angular.

En una consola, ejecute:

ionic start

Se te pedirá un nombre para el proyecto. Ponle el nombre que quieras. Yo he llamado a mi proyecto mobile.

A continuación, se le pedirá que seleccione un marco web. Elija Angular.

A continuación, aparecerá una lista con todas las plantillas de solicitud entre las que podrá elegir. Seleccione la plantilla en blanco en blanco.

Es posible que se te pida que participes en el envío a Google de datos anónimos sobre tu uso de Angular. Esa elección depende de ti 😉.

Instalar paquetes específicos de Angular

Una vez que todo esté descargado e instalado, tendrás un último paso para tener todo instalado. Hay un paquete más que contiene muchas cosas específicas de Ionic para Angular.

En primer lugar, navegue hasta la carpeta que ionic ha creado para su proyecto. Tuve que utilizar el siguiente comando de consola:

cd mobile

Para instalar el paquete adicional, ejecute lo siguiente en su consola:

npm install @ionic/angular@latest --save

¡Corre!

Para asegurarte de que todo ha ido bien, ejecuta lo siguiente en tu consola:

ionic serve

Esto ejecutará su aplicación en un navegador de Internet. Puede cerrarla cuando vea la aplicación en blanco.

En escenarios más avanzados, puedes probar tus aplicaciones en un emulador o incluso en un dispositivo móvil conectado a tu PC. Pero eso será en otra ocasión.

Configurar HttpClient de Angular

Angular viene con una clase HttpClient que nos permitirá realizar peticiones HTTP al "estilo Angular". En el tutorial de hoy, usaremos la clase incorporada HttpClient para enviar peticiones a nuestro backend. Sin embargo, es posible utilizar otras librerías de clientes HTTP populares como axios.

En primer lugar, tenemos que "decirle" a Angular que tenemos la intención de emitir peticiones HTTP. El HttpClientModule nos ayudará a hacerlo. Para instalar el HttpClientModule abrir src/app/app.module.ts.

A continuación, añada la siguiente importación TypeScript en la parte superior del archivo:

import { HttpClientModule } from '@angular/common/http';

A continuación, dentro del @NgModule añade el carácter HttpClientModule a la propiedad imports propiedad

@NgModule({
  declarations: [AppComponent],
  entryComponents: [], // ** 👇 right here! **
  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

Construir una interfaz de usuario agradable

Nuestro modelo de aplicación ya tiene una página creada para nosotros en src/app/home/home.page.html.

Ábralo y sustituya el interior del <div id="container"> con lo siguiente:

<ion-grid>
  <ion-row>
    <ion-col class="ion-align-self-center">
      <ion-input placeholder="Enter your SMS message" [(ngmodel)]="text"></ion-input>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-align-self-center">
      <ion-input placeholder="Enter the sender phone #" [(ngmodel)]="from" type="tel"></ion-input>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-align-self-center">
      <ion-input placeholder="Enter the destination phone #" [(ngmodel)]="to" type="tel"></ion-input>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-align-self-center">
      <ion-button expand="full" color="primary" (click)="sendSms()">
        Send It!
        <ion-icon slot="end" name="send-outline"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

Código fuente de la página de interfaz de usuario

A continuación, tenemos que conectar nuestra página de interfaz de usuario a nuestro back-end. Abra el archivo en src/app/home/home.page.ts.

De nuevo, ¡he hecho el trabajo pesado por ti! Sólo tienes que sustituir el contenido del archivo con el siguiente:

// import { HttpClient, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { AlertController } from '@ionic/angular';
import { Component } from '@angular/core';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public text: string;
  public from: string;
  public to: string;

  constructor(private http: HttpClient, private alert: AlertController) { }

  public sendSms() {
    const payload = new HttpParams()
      .set('from', this.from)
      .set('to', this.to)
      .set('text', this.text);

    return this.http.post('http://sms.com:3000/send-sms', payload)
      .pipe(
        catchError((error: HttpErrorResponse) => {
          this.alert.create({ message: 'Oops!'})
            .then((alert) => alert.present());
          return throwError('Oops!');
        }))
      .subscribe(async (resp: any) => {
        const alert = await this.alert.create({ message: resp.message });
        await alert.present();
      });
  }
}

Póngalo a prueba

Ejecute la aplicación ejecutando ionic serve en tu consola para asegurarte de que puedes ver la aplicación ejecutándose.

Back End con Hapi

¡Vamos a crear nuestro backend usando hapi!

En primer lugar, cree un directorio para el código back-end ejecutando mkdir backend && cd backend desde la carpeta raíz del proyecto.

A continuación, ejecuta npm install @hapi/hapi @vonage/server-sdk para instalar hapi y el cliente API de Vonage.

Servidor HTTP básico

Crea un archivo /backend/index.js y rellénalo con lo siguiente

'use strict';

const Hapi = require('@hapi/hapi');
const Vonage = require('@vonage/server-sdk');
const {
    Console
} = require('console');

const vonage = new Vonage({
    apiKey: /** PUT YOUR KEY HERE! **/
    apiSecret: /** PUT YOUR SECRET HERE! **/
}, {
    debug: true
});

const init = async () => {

    const server = Hapi.server({
        port: 3000,
        host: 'localhost',
        routes: {
            cors: {
                origin: ['*']
            }
        }
    });
    server.route({
        method: 'POST',
        path: '/send-sms',
        options: {
            cors: true,
            handler: async (request, h) => {
                const payload = request.payload;
                const result = await new Promise((resolve, reject) => {
                    vonage.message.sendSms(payload.from, payload.to, payload.text, (error, response) => {
                        if (error) {
                            return reject(error)
                        } else {
                            return resolve(response);
                        }
                    });
                });

                console.log(JSON.stringify(result));

                if (result.messages[0].status === '0') {
                    return { message: 'It Worked!' };
                } else {
                    return { message: result.messages[0]['error-text'] };
                }
            }
        }
    });

    await server.start();
    console.log('Server running on %s', server.info.uri);
};

process.on('unhandledRejection', (err) => {
    console.log(err);
    process.exit(1);
});

init();

Asegúrese de sustituir la clave y el secreto de su API.

El temido CORS

Cuando estás conectando una aplicación Ionic a una API back-end que está en localhosttendrás algunos problemas relacionados con CORS.

Para solucionar esto durante el desarrollo, tendrás que abrir tu archivo hosts como administrador. En Windows 10 se encuentra en C:\Windows\System32\drivers\etc\hosts. En máquinas Linux suele estar en /etc/hosts.

Añade la siguiente línea:

127.0.0.1 sms.com

Siempre que naveguemos a sms.comnuestra máquina local redirigirá esa petición HTTP a localhost. Sólo estamos engañando a nuestro navegador para que piense que está accediendo a un dominio real.

¡A correr!

¡Muy bien! Abre dos consolas.

En uno de ellos, vaya a /mobile y ejecute ionic serve.

En el otro, vaya a /backend y ejecute node index.js.

Usando los números de prueba provistos en tu panel de Vonage¡intenta enviar un mensaje SMS!