Отправка сообщения электронной почты из мобильного приложения — важный аспект разработки. К примеру, вы собираете отзывы пользователей своего приложения — электронная почта будет здесь как нельзя кстати. А теперь представим, что у пользователя не настроена почта на устройстве, или у него вообще нет почты. Здесь нам поможет 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:
Поясним пару моментов. Внутри заголовка приложения у нас есть кнопка, при нажатии на которую вызывается метод save. Каждое поле формы имеет тег [(ngModel)], который создаёт двустороннюю привязку данных формы к публичным переменным, объявленным нами ранее.
Приложение готово.
