Comment envoyer un SMS avec Ionic

Développer des applications mobiles multiplateformes et se connecter à des API tierces sont des compétences très demandées dans la tech. Aujourd'hui, je vais vous montrer comment construire une application mobile Ionic de base qui se connecte à l'API SMS de Vonage pour envoyer des SMS !

Nous construirons également un hapi pour aider notre application Ionic à envoyer des SMS.

Conditions préalables

Pour commencer, vous aurez besoin de

• Un excellent IDE comme Visual Studio Code, WebStorm ou Sublime Text

• La dernière version 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.

Créer l'application Ionic

Ionic est un framework à part entière et une suite d'outils qui vous aide à créer rapidement des applications mobiles multiplateformes. Vous pouvez utiliser Angular, Vue.js ou React. C'est le rêve de tout développeur web !

Installer Ionic

Nous allons devoir installer le CLI Ionic avant de bricoler un peu de code.

Dans votre console, exécutez la commande suivante :

npm install -g ionic

Construisons-le !

Ionic est livré avec quelques modèles intégrés pour vous aider à démarrer avec une belle application standard. Vous pouvez choisir de générer une application avec des onglets en bas de l'interface, un menu latéral, ou simplement une toile blanche. Aujourd'hui, nous allons utiliser le modèle vierge.

Comme mentionné, Ionic vous donne la possibilité de construire vos applications mobiles multiplateformes avec plusieurs frameworks web. Aujourd'hui, nous allons utiliser Angular.

Dans une console, exécutez :

ionic start

Un nom de projet vous sera demandé. Donnez-lui le nom que vous souhaitez. J'ai nommé mon projet mobile.

Ensuite, vous serez invité à sélectionner un cadre web. Choisissez Angular.

Ensuite, une liste de tous les modèles de demande sera disponible pour que vous puissiez choisir. Sélectionnez le modèle vierge vierge.

Il est possible que l'on vous demande de participer à l'envoi à Google de données anonymes sur votre utilisation d'Angular. C'est un choix qui vous appartient 😉.

Installer les paquets spécifiques à Angular

Une fois que tout est téléchargé et installé, il vous reste une dernière étape pour tout installer. Il y a encore un paquet qui contient beaucoup de choses spécifiques à Ionic pour Angular.

Tout d'abord, naviguez jusqu'au dossier créé par ionic pour votre projet. J'ai dû utiliser la commande console suivante :

cd mobile

Pour installer le paquet supplémentaire, exécutez ce qui suit dans votre console :

npm install @ionic/angular@latest --save

Courir !

Pour vous assurer que tout s'est bien passé, exécutez ce qui suit dans votre console :

ionic serve

Cette opération permet d'exécuter votre application standard dans un navigateur internet. Vous pouvez le fermer une fois que vous êtes en mesure de voir l'application vierge.

Dans des scénarios plus avancés, vous pouvez tester vos applications dans un émulateur ou même sur un appareil mobile connecté à votre PC. Mais c'est pour une autre fois.

Configurer le client HttpClient d'Angular

Angular est livré avec une classe intégrée HttpClient qui nous permet d'émettre des requêtes HTTP à la "manière Angular". Pour le tutoriel d'aujourd'hui, nous allons utiliser la classe intégrée HttpClient pour envoyer des requêtes à notre back-end. Cependant, il est possible d'utiliser d'autres bibliothèques client HTTP populaires telles que axios.

Tout d'abord, nous devons "dire" à Angular que nous avons l'intention d'émettre des requêtes HTTP. L'option HttpClientModule nous aidera à le faire. Pour installer l'outil HttpClientModule ouvrez src/app/app.module.ts.

Ensuite, ajoutez l'importation TypeScript suivante en haut du fichier :

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

Ensuite, dans le décorateur @NgModule ajoutez le décorateur HttpClientModule à la propriété imports à la propriété

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

Construire une belle interface utilisateur

Une page a déjà été créée pour notre application standard à l'adresse suivante src/app/home/home.page.html.

Ouvrez-la et remplacez l'intérieur du <div id="container"> par ce qui suit :

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

Code-Behind de la page UI

Ensuite, nous devons relier notre page d'interface utilisateur à notre back-end. Ouvrez le fichier à src/app/home/home.page.ts.

Encore une fois, j'ai fait le gros du travail pour vous ! Il suffit de remplacer le contenu du fichier par ce qui suit :

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

Testez-le !

Lancez l'application en exécutant ionic serve dans votre console pour vous assurer que vous pouvez voir l'application fonctionner.

Back End utilisant Hapi

Créons notre back-end en utilisant hapi !

Tout d'abord, créez un répertoire pour le code back-end en exécutant la commande mkdir backend && cd backend à partir du dossier racine de votre projet.

Ensuite, exécutez npm install @hapi/hapi @vonage/server-sdk pour installer hapi et le client API de Vonage.

Serveur HTTP de base

Créez un fichier /backend/index.js et le remplir avec ce qui suit :

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

Veillez à remplacer votre clé API et votre secret !

Le redoutable CORS

Lorsque vous connectez une application Ionic à une API back-end qui se trouve sur . localhostvous rencontrerez des problèmes liés à CORS.

Pour corriger ce problème pendant le développement, vous devrez ouvrir votre fichier hosts en tant qu'administrateur. Sous Windows 10, il se trouve à l'adresse C:\Windows\System32\drivers\etc\hosts. Sur les machines Linux, il se trouve généralement à /etc/hosts.

Ajouter la ligne suivante :

127.0.0.1 sms.com

Chaque fois que nous naviguons vers sms.comnotre machine locale redirigera cette requête HTTP vers localhost. Nous ne faisons que tromper notre navigateur web en lui faisant croire qu'il accède à un vrai domaine.

Exécutons-le !

Très bien ! Ouvrez deux consoles.

Dans l'un d'eux, naviguez jusqu'à /mobile et exécutez ionic serve.

Dans l'autre, naviguez jusqu'à /backend et exécutez node index.js.

En utilisant les numéros de test fournis sur votre tableau de bord Vonageessayez d'envoyer un SMS !