Как отправлять СМС и звонить с Angular NativeScript

March 2017

Разработка: Как отправлять СМС и звонить с Angular NativeScript

От­прав­лять СМС из при­ло­же­ния NativeScript очень про­сто! И се­год­ня я по­ка­жу вам как это сде­лать.

Ис­ход­ный код мож­но ска­чать здесь.

Убе­ди­тесь, что у вас уста­нов­лен NodeJS и NativeScript CLI.

Вна­ча­ле со­зда­дим пу­стой про­ект Angular NativeScript:

tns create HelloWorld --template nativescript-template-ng-tutorial

Эта ко­ман­да со­здаст про­ект smsApp. Пе­рей­ди­те в со­здан­ную ди­рек­то­рию про­ек­та и уста­но­ви­те пла­гин nativescript-phone:

tns plugin add nativescript-phone

Им­пор­ти­ру­ем этот мо­дуль в фай­ле app.​com​pone​nt.​ts:

import * as phone from 'nativescript-phone';

Для ис­поль­зо­ва­ния ngModel в на­шем про­ек­те, нуж­но до­ба­вить NativeScriptFormsModule в файл app.​module.​ts:

import {NativeScriptFormsModule} from "nativescript-angular/forms"

@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  imports: [NativeScriptModule, NativeScriptFormsModule],
  schemas: [NO_ERRORS_SCHEMA],
})

До­ба­вим сти­ли в app.​css для кно­пок:

@import "nativescript-theme-core/css/sky.css";

.phone-button {
    background-color:#2ecc71;
    color:white;
}

.text-button {
    background-color:#3498db;
    color:white;
}

Те­перь нуж­но раз­ра­бо­тать ин­тер­фейс. Для про­сто­ты опи­шем его в шаб­лоне в фай­ле app.​com​pone​nt.​ts

@Component({
  selector: "my-app",
  template: `
    <ActionBar class="action-bar" title="NativeScript SMS Application"></ActionBar>
    <StackLayout class="p-20">

      <Label text="Select either TEXT or PHONE to continue."></Label>

      <FlexboxLayout>
        <Button class="phone-button" (tap)="setPhoneType(0)" text="PHONE"></Button>
        <Button class="text-button"(tap)="setPhoneType(1)" text="Text"></Button>
      </FlexboxLayout>

      <StackLayout *ngIf="phoneType === 0">
        <TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
        <Button (tap)="callNumber()" *ngIf="phoneNumber" class="phone-button" [text]="'Call ' + phoneNumber"></Button>
      </StackLayout>

      <StackLayout *ngIf="phoneType === 1">
        <TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
        <TextField keyboardType="text" hint="Enter Message..." [(ngModel)]="message"></TextField>
        <Button (tap)="textNumber()" *ngIf="phoneNumber && message" class="text-button" [text]="'Text ' + phoneNumber"></Button>
      </StackLayout>

    </StackLayout>
  `
})

Для на­бо­ра но­ме­ра мы мо­жем ис­поль­зо­вать функ­цию phone.dial(). Мы по­лу­чим этот но­мер че­рез при­вяз­ку к ngModel в шаб­лоне. Вот как вы­гля­дит эта функ­ция:

Разработка: Как отправлять СМС и звонить с Angular NativeScript
До­ста­точ­но про­сто. Нуж­но про­сто пе­ре­дать но­мер стро­кой в ме­тод. Так как мы пе­ре­да­ём но­мер чис­лом с циф­ро­вой кла­ви­а­ту­ры, до­ста­точ­но бу­дет про­сто пре­об­ра­зо­вать его в стро­ку:

export class AppComponent {
  //Переменные
  phoneNumber: number;
  message: string;

  //Для определения какой выбор сделал пользователь
  phoneType: number;

  //Установим выбор пользователя (смс или звонок)
  setPhoneType(val) {
    this.phoneType = val;
  }

  callNumber() {
    phone.dial(String(this.phoneNumber), true)
  }
}

Для пе­ре­да­чи СМС есть со­от­вет­ству­ю­щий ме­тод:

Разработка: Как отправлять СМС и звонить с Angular NativeScript
Ин­те­рес­ное здесь то, что мы мо­жем от­пра­вить со­об­ще­ние мас­си­ву но­ме­ров, по­это­му мы мо­жем со­здать несколь­ко по­лей для вво­да но­ме­ров. Я по­ка пе­ре­дам толь­ко один но­мер ме­то­ду:

textNumber() {
  /*
    Здесь у нас массив номеров, поэтому легко можем добавить ещё один номер:
    phone.sms(['1234','5678'...], message)
  */
  phone.sms([String(this.phoneNumber)], this.message).then((result) => {
    //Возвращает promise, делайте с ним что хотите
    console.log(result);
  })
}

Вот пол­ный код уро­ка:

import { Component } from "@angular/core";
import * as phone from 'nativescript-phone';
@Component({
  selector: "my-app",
  template: `
    <ActionBar class="action-bar" title="NativeScript SMS Application"></ActionBar>
    <StackLayout class="p-20">

      <Label text="Select either TEXT or PHONE to continue."></Label>

      <FlexboxLayout>
        <Button class="phone-button" (tap)="setPhoneType(0)" text="PHONE"></Button>
        <Button class="text-button"(tap)="setPhoneType(1)" text="Text"></Button>
      </FlexboxLayout>

      <StackLayout *ngIf="phoneType === 0">
        <TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
        <Button (tap)="callNumber()" *ngIf="phoneNumber" class="phone-button" [text]="'Call ' + phoneNumber"></Button>
      </StackLayout>

      <StackLayout *ngIf="phoneType === 1">
        <TextField keyboardType="phone" hint="Enter Phone Number..." [(ngModel)]="phoneNumber"></TextField>
        <TextField keyboardType="text" hint="Enter Message..." [(ngModel)]="message"></TextField>
        <Button (tap)="textNumber()" *ngIf="phoneNumber && message" class="text-button" [text]="'Text ' + phoneNumber"></Button>
      </StackLayout>

    </StackLayout>
  `
})
export class AppComponent {
  //Переменные
  phoneNumber: number;
  message: string;

  //Для определения какой выбор сделал пользователь
  phoneType: number;

  //Установим выбор пользователя (смс или звонок)
  setPhoneType(val) {
    this.phoneType = val;
  }

  callNumber() {
    phone.dial(String(this.phoneNumber), true)
  }

  textNumber() {
    /*
      Здесь у нас массив номеров, поэтому легко можем добавить ещё один номер:
      phone.sms(['1234','5678'...], message)
    */
    phone.sms([String(this.phoneNumber)], this.message).then((result) => {
      //Возвращает promise, делайте с ним что хотите
      console.log(result);
    })
  }
}

Разработка: Как отправлять СМС и звонить с Angular NativeScript

Ис­точ­ник: «How to Send an SMS and Make Phone Calls with Angular NativeScript»

comments powered by Disqus