Ionic 3 - Slanje SMS poruka - Tomislav Stanković

U ovom ću blog postu pokazati kako poslati SMS poruku iz Ionic 3 aplikacije koristeći Ionic Native 3x SMS plugin.

Prije svega, moram napomenuti da korištenje ovog plugina zahtijeva da mobilni uređaj na kojemu je instalirana aplikacija ima valjanu SIM karticu sa dovoljnim iznosom na računu. Ako se koristi neka od tarifa s neograničenom mogučnošću slanja SMS-ova onda ste bez brige.

Kreiranje aplikacije

Za početak ćemo kreirati novi Ionic 3 projekt.

$ ionic start Ionic3sms blank --v2
$ cd Ionic3sms

1 2	$ ionic start Ionic3sms blank --v2 $ cd Ionic3sms

Odmah možemo dodati i Ionic Native 3x SMS plugin.

$ ionic cordova plugin add cordova-sms-plugin
$ npm install --save @ionic-native/sms

1 2	$ ionic cordova plugin add cordova-sms-plugin $ npm install --save @ionic-native/sms

I navesti SMS plugin unutar app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { SMS } from '@ionic-native/sms';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SMS,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { SMS } from '@ionic-native/sms';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

SMS,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Također, s obzirom da ću aplikaciju testirati na Android mobilnom uređaju treba dodati i Android platformu.

$ ionic platform add android

1	$ ionic platform add android

Sada imamo sve što nam je potrebno kako bi napravili primjer aplikacije iz koje će se moći slati SMS poruke.

Postavljanje SMS funkcionalnosti

Plan je napraviti ekran s dva gumba. Jedan će slati SMS za zadanim tekstom na zadani broj mobitela, a drugi će koristiti formu unutar koje se upisuje broj na koji se SMS želi poslati kao i sadržaj SMS-a.

<ion-header>
  <ion-navbar color="primary"> 
    <ion-title>
      Ionic3 SMS
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-card>
 <ion-card-header>
    SMS sa zadanim podacima:
  </ion-card-header>
<ion-card-content>
<button ion-button (click)="posaljiSMS1()">Pošalji SMS 1</button>
</ion-card-content>
</ion-card>

<hr>

<ion-card>
  <ion-card-header>
    SMS sa promjenjivim podacima:
  </ion-card-header>

  <ion-card-content>
<ion-list>
  <ion-item>
    <ion-label floating>Broj mobitela:</ion-label>
    <ion-input type="tel" [(ngModel)]="objekt.broj"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Sadržaj SMS-a:</ion-label>
    <ion-input type="text" [(ngModel)]="objekt.sadrzaj"></ion-input>
  </ion-item>
</ion-list>

<button ion-button (click)="posaljiSMS2(objekt)">Pošalji SMS 2</button>
</ion-card-content>
</ion-card>

</ion-content>

<ion-header>

<ion-navbar color="primary">

<ion-title>

Ionic3 SMS

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-header>

SMS sa zadanim podacima:

</ion-card-header>

<ion-card-content>

<button ion-button (click)="posaljiSMS1()">Pošalji SMS 1</button>

</ion-card-content>

</ion-card>

<hr>

<ion-card>

<ion-card-header>

SMS sa promjenjivim podacima:

</ion-card-header>

<ion-card-content>

<ion-list>

<ion-item>

<ion-label floating>Broj mobitela:</ion-label>

<ion-input type="tel" [(ngModel)]="objekt.broj"></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Sadržaj SMS-a:</ion-label>

<ion-input type="text" [(ngModel)]="objekt.sadrzaj"></ion-input>

</ion-item>

</ion-list>

<button ion-button (click)="posaljiSMS2(objekt)">Pošalji SMS 2</button>

</ion-card-content>

</ion-card>

</ion-content>

Na koji način će se odvijati slanje SMS poruke može se vidjeti u home.ts datoteci. Imamo dvije funkcije posaljiSMS1() i posaljiSMS2(). Unutar svake od funkcija imamo options objekt. Više o njemu kao i ostalim mogućnostima možete pronaći u dokumentaciji https://github.com/cordova-sms/cordova-sms-plugin

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SMS } from '@ionic-native/sms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  objekt = {broj: '', sadrzaj: ''};

  constructor(public _navCtrl: NavController,
              private _sms: SMS) {

  }
  
  posaljiSMS1(){
    var options = {
        replaceLineBreals: false,
        android: {
          intent: 'INTENT'  // Otvara zadanu SMS aplikaciju na mobilnom uređaju
        }
    }
    this._sms.send('00385*********', 'Ovo je sadržaj SMS poruke!', options);
    console.log("Poslao sam SMS 1");
  }

  posaljiSMS2(){
      var options = {
        replaceLineBreals: false,
        android: {
          intent: '' // Ne otvara zadanu SMS aplikaciju na mobilnom uređaju
        }
    }
    this._sms.send(this.objekt.broj, this.objekt.sadrzaj, options);
    console.log(this.objekt.broj + " " +  this.objekt.sadrzaj);
    console.log("Poslao sam SMS 2");
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { SMS } from '@ionic-native/sms';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

objekt = {broj: '', sadrzaj: ''};

constructor(public _navCtrl: NavController,

private _sms: SMS) {

}

posaljiSMS1(){

var options = {

replaceLineBreals: false,

android: {

intent: 'INTENT' // Otvara zadanu SMS aplikaciju na mobilnom uređaju

}

this._sms.send('00385*********', 'Ovo je sadržaj SMS poruke!', options);

console.log("Poslao sam SMS 1");

}

posaljiSMS2(){

var options = {

replaceLineBreals: false,

android: {

intent: '' // Ne otvara zadanu SMS aplikaciju na mobilnom uređaju

}

this._sms.send(this.objekt.broj, this.objekt.sadrzaj, options);

console.log(this.objekt.broj + " " + this.objekt.sadrzaj);

console.log("Poslao sam SMS 2");

}

Ako aplikaciju pokrenemo u web pregledniku $ ionic serve dobijemo ispis naših console.log poruka kao i obavijest da je aplikaciju potrebno pokrenuti na mobilnoj uređaju “Native: tried calling SMS.send, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator“.

Pokretanje aplikacije na mobilnom uređaju

Prilikom instalacije aplikacije na mobilni uređaj će prikazati koje sve dozvole zahtjeva aplikacija. U ovom slučaju to je “slanje i pregled SMS poruka”.

Također, prilikom prvog slanja SMS poruke aplikacije će pitati korisnika za dozvolu slanja i pregleda SMS poruka na njegovom mobilnom uređaju.

S obzirom da funkcija posaljiSMS1() u sebi sadržaja postavku koja poziva otvaranje zadane SMS aplikacije mobilnog uređaja na sljedećoj se slici može vidjeti kako to izgleda.

Ako pozovemo drugi gumb tj. funkciju posaljiSMS2() SMS ćemo poslati direktno iz Ionic 3 aplikacije. Poslani SMS ostaje u mobilnom uređaju i moguće ga je kasnije vidjeti u zadanoj aplikacija koja inače služi za slanje i primanje SMS-ova.

Osoba koja primi SMS poruku ne zna da je poruka poslana putem Ionic 3 aplikacije.

Zaključak

I to je sve! Ovo je bio prikaz korištenja Ionic Native 3.x SMS plugina koji omogućava slanje SMS poruka iz Ionic aplikacije.

2 misli o “Ionic 3 – Slanje SMS poruka”

TOPRAK napisao:

06/04/2018 u 22:58

I’ve looked for many page include Stackoverflow for ‘INTENT’ and I found there your this page. I’m so glad come across your blog. Thank you for your good post!

Odgovori
1. Tomislav Stanković napisao:
  
  07/04/2018 u 18:17
  
  I’m glad if I could help.
  
  Odgovori

Ionic 3 – Slanje SMS poruka

Kreiranje aplikacije

Postavljanje SMS funkcionalnosti

Pokretanje aplikacije na mobilnom uređaju

Zaključak

Objavio

Tomislav Stanković

2 misli o “Ionic 3 – Slanje SMS poruka”

Odgovori Otkaži odgovor