Como enviar um SMS com o Ionic

O desenvolvimento de aplicativos móveis multiplataforma e a integração com APIs de terceiros são habilidades muito procuradas no setor de tecnologia. Hoje vou mostrar a vocês como criar um aplicativo móvel básico em Ionic que se conecta à SMS API da Vonage para enviar mensagens SMS!

Também vamos montar um barebones back-end para ajudar nosso aplicativo Ionic a enviar mensagens SMS.

Pré-requisitos

Para começar, você vai precisar de:

• Um IDE incrível, como o Visual Studio Code, o WebStorm ou o Sublime Text

• A versão LTS mais recente do Node.js

Criar o aplicativo Ionic

O Ionic é um framework completo e um conjunto de ferramentas que ajuda você a criar aplicativos móveis multiplataforma rapidamente. Você pode usar Angular, Vue.js ou React. É o sonho de qualquer desenvolvedor web!

Instalar o Ionic

Precisaremos instalar o Ionic CLI antes de começarmos a mexer no código.

No seu terminal, execute o seguinte comando:

npm install -g ionic

Vamos construir!

O Ionic vem com alguns modelos integrados para ajudar você a começar com um bom aplicativo de base. Você pode optar por gerar um aplicativo com abas na parte inferior da interface do usuário, um menu lateral ou apenas uma tela em branco. Hoje, vamos usar o modelo em branco.

Como já foi mencionado, o Ionic oferece a opção de desenvolver suas applications móveis multiplataforma com diversos frameworks web. Hoje, vamos usar o Angular.

No terminal, execute:

ionic start

Será solicitado que você digite um nome para o projeto. Dê o nome que quiser. Eu chamei o meu projeto de mobile.

Em seguida, você será solicitado a selecionar um framework web. Escolha Angular.

Em seguida, será exibida uma lista com todos os modelos de formulário para você escolher. Selecione o modelo .

Talvez você seja convidado a participar do envio de dados anônimos ao Google sobre o seu uso do Angular. A decisão é sua 😉.

Instalar pacotes específicos do Angular

Assim que tudo estiver baixado e instalado, você terá uma etapa final para concluir a instalação. Há mais um pacote que contém vários recursos específicos do Ionic para o Angular.

Primeiro, acesse a pasta que o Ionic criou para o seu projeto. Tive que usar o seguinte comando no console:

cd mobile

Para instalar o pacote adicional, execute o seguinte no seu terminal:

npm install @ionic/angular@latest --save

Vai lá!

Só para ter certeza de que tudo correu bem, execute o seguinte no seu console:

ionic serve

Isso executará seu aplicativo padrão em um navegador da internet. Você pode fechá-lo assim que conseguir ver o aplicativo em branco.

Em cenários mais avançados, você pode testar seus aplicativos em um emulador ou até mesmo em um dispositivo móvel conectado ao seu PC. Mas isso fica para outra ocasião.

Configurar o HttpClient do Angular

O Angular vem com uma HttpClient que nos permite enviar solicitações HTTP “ao estilo do Angular”. No tutorial de hoje, usaremos a classe integrada HttpClient para enviar solicitações ao nosso back-end. No entanto, é possível usar outras bibliotecas populares de clientes HTTP, como axios.

Primeiro, precisamos “informar” ao Angular que pretendemos enviar solicitações HTTP. O HttpClientModule nos ajudará a fazer isso. Para instalar o HttpClientModule abra src/app/app.module.ts.

Em seguida, adicione a seguinte importação do TypeScript no início do arquivo:

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

Em seguida, dentro do @NgModule decorador, adicione o HttpClientModule ao imports propriedade:

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

Crie uma interface de usuário agradável

Nosso aplicativo modelo já possui uma página criada para nós em src/app/home/home.page.html.

Abra-o e substitua o interior do <div id="container"> pelo seguinte:

<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-por-trás da página da interface do usuário

Em seguida, precisamos conectar nossa página de interface do usuário ao nosso back-end. Abra o arquivo em src/app/home/home.page.ts.

Mais uma vez, já fiz o trabalho pesado por você! Basta substituir o conteúdo do arquivo pelo seguinte:

// 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();
      });
  }
}

Experimente!

Execute o aplicativo digitando ionic serve no seu console para verificar se você consegue ver o aplicativo em execução.

Back-end com Hapi

Vamos criar nosso back-end usando o Hapi!

Primeiro, crie um diretório para o código do back-end executando mkdir backend && cd backend na pasta raiz do seu projeto.

Em seguida, execute npm install @hapi/hapi @vonage/server-sdk para instalar o hapi e o cliente da API da Vonage.

Servidor HTTP básico

Crie um arquivo /backend/index.js e preencha-o com o seguinte:

'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();

Não se esqueça de substituir sua chave e seu segredo da API!

O temido CORS

Ao conectar um aplicativo Ionic a uma API de back-end que está em localhost, você encontrará alguns problemas relacionados ao CORS.

Para corrigir isso durante o desenvolvimento, você precisará abrir o arquivo hosts com privilégios de administrador. No Windows 10, ele fica em C:\Windows\System32\drivers\etc\hosts. Em máquinas Linux, ele geralmente fica em /etc/hosts.

Adicione a seguinte linha:

127.0.0.1 sms.com

Sempre que acessarmos sms.com, nosso computador local redireciona essa solicitação HTTP para localhost. Estamos apenas fazendo nosso navegador acreditar que está acessando um domínio real.

Vamos lá!

Tudo bem! Abra dois consoles.

Em um deles, acesse /mobile e execute ionic serve.

No outro, acesse /backend e execute node index.js.

Utilizando os números de teste fornecidos no seu painel da Vonage, tente enviar uma mensagem SMS!