Отправка сообщений через Rackspace Mailgun из приложений NativeScript Angular 2

Разработка /
Разработка: Отправка сообщений через Rackspace Mailgun из приложений NativeScript Angular 2

Отправка сообщения электронной почты из мобильного приложения — важный аспект разработки. К примеру, вы собираете отзывы пользователей своего приложения — электронная почта будет здесь как нельзя кстати. А теперь представим, что у пользователя не настроена почта на устройстве, или у него вообще нет почты. Здесь нам поможет Rackspace Mailgun API.

Rackspace Mailgun API это веб-сервис, включающий и бесплатный тариф, для рассылки сообщений через RESTful API. Не требуется настраивать почтовый аккаунт, даже почтовый ящик иметь необязательно. Превосходно!

Вначале зарегистрируйте бесплатный аккаунт Mailgun, с ним у вас будет доступ к Mailgun URL и ключу Mailgun API. А без них не получится отправить электронное сообщение.

Создадим новое приложение NativeScript Angular 2:

tns create MailgunProject --ng
cd MailgunProject
tns platform add ios
tns platform add android

Логика нашего приложения будет описана в трёх файлах. Зависимости будут описаны в файле app/main.ts, форма отправки сообщения — в файле app/app.component.html, а логика работы с Mailgun — в файле app/app.component.ts.

Откроем файл app/main.ts и включим в него такой код:

import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
 
@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule
    ],
})
class AppComponentModule {}
 
platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

Этот код почти не отличается от шаблонного, за исключением пары моментов: мы добавили NativeScriptFormsModule и NativeScriptHttpModule и теперь мы можем делать HTTP-запросы и привязывать данные к полям ввода в UI.

Теперь откроем файл app/app.component.ts и заменим код в нём на следующий:

import { Component } from "@angular/core";
import { Http, Headers, RequestOptions } from "@angular/http";
import "rxjs/Rx";
 
@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
 
    public recipient: string;
    public subject: string;
    public message: string;
    private mailgunUrl: string = "MAILGUN_URL_HERE";
    private apiKey: string = "BASE64_API_KEY_HERE";
 
    public constructor(private http: Http) {
 
    }
 
    public send() {
        if(this.recipient && this.subject && this.message) {
            let headers = new Headers(
                {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "Authorization": "Basic " + this.apiKey
                }
            );
            let options = new RequestOptions({ headers: headers });
            let body = "from=test@example.com&to=" + this.recipient + "&subject=" + this.subject + "&text=" + this.message;
            this.http.post("https://api.mailgun.net/v3/" + this.mailgunUrl + "/messages", body, options)
                .map(result => result.json())
                .do(result => console.log("RESULT: ", JSON.stringify(result)))
                .subscribe(result => {
                    console.log("SENT!");
                    this.recipient = "";
                    this.subject = "";
                    this.message = "";
                }, error => {
                    console.log(error);
                });
        }
    }
 
}

Рассмотрим этот кусок кода пошагово:

import { Component } from "@angular/core";
import { Http, Headers, RequestOptions } from "@angular/http";
import "rxjs/Rx";

Здесь мы импортируем Http, Headers и RequestOptions для того, чтобы сделать HTTP запрос к Mailgun API. Этот запрос должен содержать определённые служебные заголовки, иначе он будет отвергнут сервисом. А с RxJS HTTP-запросы в Angular 2 более мощные, поэтому он тут.

Внутри класса AppComponent мы ввели несколько переменных:

public recipient: string;
public subject: string;
public message: string;
private mailgunUrl: string = "MAILGUN_URL_HERE";
private apiKey: string = "BASE64_API_KEY_HERE";

Публичные переменные будут привязаны к интерфейсу приложения. И здесь есть две важные переменные — mailgunUrl и apiKey. Обязательно введите их правильно, иначе ничего не получится. Значения этих переменных можно найти в консоли управления Mailgun. А ключ API ещё нужно немного подкорректировать.

Изначально ключ выглядит примерно так: api:key-sdf7sfadyuhk и перед использованием его нужно закодировать в base64. Это можно сделать онлайн на сайте base64encode.org.

Перед созданием HTTP запросов нужно включить компонент Http в метод constructor класса.

Далее мы создаём метод send:

public send() {
    if(this.recipient && this.subject && this.message) {
        let headers = new Headers(
            {
                "Content-Type": "application/x-www-form-urlencoded",
                "Authorization": "Basic " + this.apiKey
            }
        );
        let options = new RequestOptions({ headers: headers });
        let body = "from=test@example.com&to=" + this.recipient + "&subject=" + this.subject + "&text=" + this.message;
        this.http.post("https://api.mailgun.net/v3/" + this.mailgunUrl + "/messages", body, options)
            .map(result => result.json())
            .do(result => console.log("RESULT: ", JSON.stringify(result)))
            .subscribe(result => {
                console.log("SENT!");
                this.recipient = "";
                this.subject = "";
                this.message = "";
            }, error => {
                console.log(error);
            });
    }
}

Внутри метода мы проверяем, что в переменных формы есть данные. Мы должны указать заголовок Authorization и Content-Type в x-www-form-urlencoded.
Обратите внимание, что данные в поле body в запросе разделены символом амперсанда, это из-за того, что мы используем x-www-form-urlencoded.

Перейдём к интерфейсу приложения.

Откроем файл app/app.component.html и добавим в него следующую разметку XML:

<ActionBar title="Mailgun Example">
    <ActionItem text="Send" ios.position="right" (tap)="send()"></ActionItem>
</ActionBar>
<StackLayout class="form">
    <StackLayout class="input-field">
        <Label class="label" text="Recipient (To):"></Label>
        <TextField class="input input-border" [(ngModel)]="recipient" autoCapitalizationType="none"></TextField>
    </StackLayout>
    <StackLayout class="input-field">
        <Label class="label" text="Subject:"></Label>
        <TextField class="input input-border" [(ngModel)]="subject"></TextField>
    </StackLayout>
    <StackLayout class="input-field">
        <Label class="label" text="Subject:"></Label>
        <TextField class="input input-border" [(ngModel)]="message"></TextField>
    </StackLayout>
</StackLayout>

Поясним пару моментов. Внутри заголовка приложения у нас есть кнопка, при нажатии на которую вызывается метод save. Каждое поле формы имеет тег [(ngModel)], который создаёт двустороннюю привязку данных формы к публичным переменным, объявленным нами ранее.

Приложение готово.

Источник на англ.
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.