Wie man eine SMS mit Ionic sendet

Die Entwicklung plattformübergreifender mobiler Applications und die Anbindung an APIs von Drittanbietern sind gefragte Fähigkeiten in der Tech-Branche. Heute zeige ich Ihnen, wie Sie eine einfache Ionic-Mobilanwendung erstellen, die sich mit der Vonage SMS API verbindet, um SMS-Nachrichten zu versenden!

Wir werden auch ein einfaches hapi Backend, um unsere Ionic-Anwendung beim Senden von SMS-Nachrichten zu unterstützen.

Voraussetzungen

Für die ersten Schritte benötigen Sie:

• Eine großartige IDE wie Visual Studio Code, WebStorm oder Sublime Text

• Die neueste LTS-Version von Node.js

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Die Ionic-Anwendung erstellen

Ionic ist ein vollwertiges Framework und eine Reihe von Tools, mit denen Sie schnell plattformübergreifende mobile Applications erstellen können. Sie können Angular, Vue.js oder React verwenden. Der Traum eines jeden Webentwicklers!

Ionic installieren

Wir müssen die Ionic CLI installieren, bevor wir mit dem Code herumspielen.

Führen Sie in Ihrer Konsole den folgenden Befehl aus:

npm install -g ionic

Lasst uns bauen!

Ionic verfügt über einige integrierte Vorlagen, die Ihnen den Einstieg in eine schöne Boilerplate-App erleichtern. Sie können wählen, ob Sie eine App mit Registerkarten am unteren Rand der Benutzeroberfläche, ein Seitenmenü oder einfach eine leere Vorlage erstellen möchten. Heute werden wir die leere Vorlage verwenden.

Wie bereits erwähnt, können Sie mit Ionic Ihre plattformübergreifenden mobilen Anwendungen mit mehreren Web-Frameworks erstellen. Heute werden wir Angular verwenden.

Führen Sie in einer Konsole aus:

ionic start

Sie werden nach einem Projektnamen gefragt. Nennen Sie es, wie Sie wollen. Ich habe meinem Projekt den Namen mobile.

Als nächstes werden Sie aufgefordert, ein Web-Framework auszuwählen. Wählen Sie . Angular.

Daraufhin wird eine Liste mit allen Bewerbungsvorlagen angezeigt, aus der Sie auswählen können. Wählen Sie die leere Vorlage.

Möglicherweise werden Sie gebeten, sich an der Übermittlung anonymer Daten über Ihre Nutzung von Angular an Google zu beteiligen. Diese Entscheidung liegt ganz bei Ihnen 😉.

Angular-spezifische Pakete installieren

Sobald alles heruntergeladen und installiert ist, müssen Sie noch einen letzten Schritt durchführen, um alles zu installieren. Es gibt ein weiteres Paket, das viele Ionic-spezifische Goodies für Angular enthält.

Navigieren Sie zunächst zu dem Ordner, den ionic für Ihr Projekt erstellt hat. Ich musste den folgenden Konsolenbefehl verwenden:

cd mobile

Um das Zusatzpaket zu installieren, führen Sie Folgendes in Ihrer Konsole aus:

npm install @ionic/angular@latest --save

Laufen lassen!

Um sicherzugehen, dass alles gut gelaufen ist, führen Sie Folgendes in Ihrer Konsole aus:

ionic serve

Dadurch wird Ihre Boilerplate-Anwendung in einem Internet-Browser ausgeführt. Sie können ihn schließen, sobald Sie die leere Anwendung sehen können.

In fortgeschritteneren Szenarien können Sie Ihre Anwendungen in einem Emulator oder sogar auf einem an Ihren PC angeschlossenen Mobilgerät testen. Aber das ist für ein anderes Mal.

Konfigurieren Sie den HttpClient von Angular

Angular kommt mit einer eingebauten HttpClient Klasse, mit der wir HTTP-Anfragen auf die "Angular-Art" stellen können. Für das heutige Tutorial werden wir die eingebaute HttpClient um Anfragen an unser Backend zu senden. Es ist jedoch auch möglich, andere populäre HTTP-Client-Bibliotheken zu verwenden, wie z.B. axios.

Zunächst müssen wir Angular mitteilen, dass wir beabsichtigen, HTTP-Anfragen zu stellen. Die HttpClientModule wird uns dabei helfen, dies zu tun. Zur Installation der HttpClientModule öffnen src/app/app.module.ts.

Fügen Sie dann den folgenden TypeScript-Import am Anfang der Datei hinzu:

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

Als nächstes fügen Sie innerhalb des @NgModule Dekors fügen Sie das HttpClientModule zu der imports Eigenschaft hinzu:

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

Eine schöne UI erstellen

Unsere Boilerplate-Anwendung hat bereits eine Seite für uns erstellt unter src/app/home/home.page.html.

Öffnen Sie es und ersetzen Sie das Innere des <div id="container"> durch den folgenden Text:

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

UI Seite Code-Behind

Als nächstes müssen wir unsere UI-Seite mit unserem Backend verbinden. Öffnen Sie die Datei unter src/app/home/home.page.ts.

Auch hier habe ich Ihnen die Arbeit abgenommen! Ersetzen Sie einfach den Inhalt der Datei durch den folgenden Text:

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

Testen Sie es!

Führen Sie die Anwendung aus, indem Sie ionic serve in Ihrer Konsole ausführen, um sicherzustellen, dass Sie die Anwendung laufen sehen.

Backend mit Hapi

Lassen Sie uns unser Backend mit hapi erstellen!

Erstellen Sie zunächst ein Verzeichnis für den Back-End-Code, indem Sie mkdir backend && cd backend aus dem Stammverzeichnis Ihres Projekts ausführen.

Führen Sie als nächstes npm install @hapi/hapi @vonage/server-sdk um hapi und den Vonage API-Client zu installieren.

Grundlegender HTTP-Server

Erstellen Sie eine Datei /backend/index.js und füllen Sie diese mit folgendem Inhalt:

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

Stellen Sie sicher, dass Sie Ihren API-Schlüssel und Ihr Geheimnis ersetzen!

Gefürchtete CORS

Wenn Sie eine Ionic-Anwendung mit einer Back-End-API verbinden, die sich auf localhostist, werden Sie einige Probleme im Zusammenhang mit CORS bekommen.

Um dies während der Entwicklung zu beheben, müssen Sie Ihre Hosts-Datei als Administrator öffnen. Unter Windows 10 befindet sie sich unter C:\Windows\System32\drivers\etc\hosts. Auf Linux-Rechnern befindet sie sich normalerweise unter /etc/hosts.

Fügen Sie die folgende Zeile hinzu:

127.0.0.1 sms.com

Wann immer wir zu sms.comnavigieren, leitet unser lokaler Rechner diese HTTP-Anfrage um zu localhost. Wir gaukeln unserem Webbrowser nur vor, dass er auf eine echte Domäne zugreift.

Los geht's!

Also gut! Öffnen Sie zwei Konsolen.

In einem navigieren Sie zu /mobile und führen Sie ionic serve.

In der anderen navigieren Sie zu /backend und führen Sie node index.js.

Unter Verwendung der Test Numbers, die Sie auf Ihrem Vonage Dashboard findenversuchen Sie, eine SMS zu senden!