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

Разработка /
Разработка: Как отправлять СМС и звонить с 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.component.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.component.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»
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.