Ionic 3 Cordova Read SMS plugin

Sunday, 24 September 2017

READ SMS only work with android. Follow this following steps to install this plugin in your ionic project.

Step-1

First you need to install Android Permission Ionic Native Plugin.
run these two commands first to install Android Permission Plugin.


ionic cordova plugin add cordova-plugin-android-permissions

npm install --save @ionic-native/android-permissions

Step-2

Add android-permissions to your app's Module.
import { AndroidPermissions} from '@ionic-native/android-permissions';


@NgModule({
  

  providers: [
   
    AndroidPermissions
    
  ]
  
})
export class AppModule { }

Step 3-

Now check or allow permission for Read SMS for android device goto the page where you want to allow permission for READ SMS and use this code sample.


import { AndroidPermissions } from '@ionic-native/android-permissions';


export class HomePage {

constructor(public androidPermissions: AndroidPermissions) { }
ionViewWillEnter() {

this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.READ_SMS).then(
  success => console.log('Permission granted'),
err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_SMS)
);

this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_SMS]);
}
}


Step-4

After allowing Read SMS permission now you need to install cordova-plugin-sms. Run this command for install it.

cordova plugin add cordova-plugin-sms

These are the following methods you can use for this plugin.

sendSMS(address(s), text, successCallback, failureCallback);

listSMS(filter, successCallback, failureCallback);

deleteSMS(filter, successCallback, failureCallback);

startWatch(successCallback, failureCallback);

stopWatch(successCallback, failureCallback);

enableIntercept(on_off, successCallback, failureCallback);

restoreSMS(msg_or_msgs, successCallback, failureCallback);

setOptions(options, successCallback, failureCallback);

To Read List of SMS:-

First declare var SMS:any; on top of your page. Also import Platform see in this code sample.

import { Component,  } from '@angular/core';
import { NavController,Platform } from 'ionic-angular';
declare var SMS:any;

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

  constructor(public platform:Platform) {

  }

ReadListSMS()
{

this.platform.ready().then((readySource) => {

let filter = {
       box : 'inbox', // 'inbox' (default), 'sent', 'draft'
       indexFrom : 0, // start from index 0
       maxCount : 10, // count of SMS to return each time
            };

       if(SMS) SMS.listSMS(filter, (ListSms)=>{

           console.log("Sms",ListSms);
          },

          Error=>{
          console.log('error list sms: ' + Error);
          });
     
    });
}
}

Make sure always use method in Ionic Framework inside the platform.ready() else it will not work.

To Read SMS on Arrive:-

First startWatch() watching for new messages the and when new message arrive onSMSArrive event is triggered. To read OTP SMS you can use this feature.


import { Component,  } from '@angular/core';
import { NavController,Platform } from 'ionic-angular';
declare var SMS:any;

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

  constructor(public platform:Platform) {

  }

ionViewDidEnter()
{

this.platform.ready().then((readySource) => {

if(SMS) SMS.startWatch(()=>{
           console.log('watching started');
        }, Error=>{
       console.log('failed to start watching');
   });

  document.addEventListener('onSMSArrive', (e:any)=>{
       var sms = e.data;
       console.log(sms);

       });
     
    });
}
}

To Send SMS-


import { Component,  } from '@angular/core';
import { NavController,Platform } from 'ionic-angular';
declare var SMS:any;

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

  constructor(public platform:Platform) {

  }

SendMySMS()
{

this.platform.ready().then((readySource) => {

if(SMS) SMS.sendSMS("+9112345","msg",()=>{
   console.log("Sent");
  }, Error=>{
   console.log("Error occurs")
  });
  });
     
    });
}
}

Read List of SMS OUTPUT:-



Reference is taken from gitHub https://github.com/floatinghotpot/cordova-plugin-sms/tree/master/docs 

If your are looking for Ionic V1 read this article http://www.programmingworldtech.com/2016/12/ionic-cordova-plugin-to-read-sms.html

If you are facing any problem comment below.Thank You.


Set Up Mobile App Development Environment for Ionic Framework

Thursday, 21 September 2017

Technology is growing very fast. Also development mode of Mobile application also changed. With very less effort now we can build cross platform mobile apps. Today there a lots of technology in the market like React Native, Ionic Framework, Native Script which gives us a environment to develop cross platform mobile apps which work on Android , ios like native apps.
Here we provide a complete guide to set up development environment for Ionic Framework.

What is Ionic Framwork?
Ionic is a open source framwork to build amazing cross platform mobile appps. Before staring Ionic framwork you should have knowledge of JavaScrict, Angular, TypeScript, HTML and CSS.
Visit Ionic Framwork official site.

Step-1

First of all we need to install Node.js in our system visit Node.js official site to download and install it.
To check successful installation of node.js open 'Command Prompt' if you are using windows or open 'Terminal' for 'MacOS' or 'Linux'.
and type 'node --version' and press enter button. This will show you installed version of node. Node.js comes with npm package you can also check npm package version by typing 'npm --v'.

Step-2

You need to install Ionic Framework in your system. Just open 'Command Prompt' or 'Terminal' and type 'npm install -g cordova ionic' and press enter.You can also individually install by typing 'npm install -g ionic' and 'npm install -g cordova'.

npm install -g cordova ionic
To check successful installation type 'ionic' and 'cordova'. This will show you install version of Ionic Framwork and cordova with description.

Step 3- 

Now create your first ionic app type 'ionic start myApp tabs'.


ionic start myApp tabs

After running this command a project directory is create with name "myApp". 



Now go to project directory and open project with your favorite code editor like Sublime text, Atom or Visual Studio code any one you can prefer.




This is folder structure of your ionic App. All your editable coding stuff is available in 'src' folder.
You can modify, add ,edit stuffs from 'src folder.

Step- 4

To run your app go to to your project directory using cmd or Terminal and just type 'ionic serve --lab'. This will show you web view of app in your browser.


ionic serve --lab


After running this command a dev server is start in your system. And Show you live preview of your application. 



If you face any problem to set up environment just freely comment below. Thank You.

Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...
 

Most Reading

Labels