Getting Started with Ionic, Part 3

| February 6, 2018 | in

Software Engineering

In my previous post, we did things that really didn’t utilize any device features. In this post, we are going to use two native device features: email and phone.

Let’s get started by installing the email plugin.

ionic cordova plugin add cordova-plugin-email-composer npm install –save @ionic-native/email-composer

Using this plugin can be a little tricky. We have to first verify that we are running on a device and that email is configured on the device. We also do a quick verification to ensure that the user has an email address.

	sendEmail() {
	if (this.platform.is('cordova')) {
	if (this.email != null && this.email.length > 0) {
	this.emailComposer.isAvailable().then((available: boolean) => {
	if (available) {
	let email = {
	to: this.email,
	attachments: [
	],
	subject: 'Hey',
	body: '',
	isHtml: true
	};

	// Send a text message using default options
	this.emailComposer.open(email);
	} else {
	this.alertMessage('Email not available', "Email is not configured on this device, or this application doesn't have access to email");
	}
	});
	} else {
	this.alertMessage('No email address', 'You need to save an email address before you can send an email.');
	}
	} else {
	this.alertMessage('Not running in device mode.', 'You can only send an email when running as an application');
	}
	}

view raw sendemail.ts hosted with ❤ by GitHub

Next, let’s install the phone plugin.

ionic cordova plugin add call-number
npm install –save @ionic-native/call-number

The phone plugin code is a little simpler. We again need to check if we have access to the phone device.

	usePhone() {
	if (this.platform.is('cordova')) {
	if (this.phone != null && this.phone.length > 0) {
	this.callNumber.callNumber(this.phone, true)
	.then(() => console.log('Launched dialer!'))
	.catch(() => {
	this.alertMessage('Unable to use phone', "Application was unable to use the device's phone");
	});
	} else {
	this.alertMessage('No phone number', 'You need to save a phone number before you can dial a number.');
	}
	} else {
	this.alertMessage('Not running in device mode.', 'You can only send an email when running as an application');
	}
	}

view raw usephone.ts hosted with ❤ by GitHub

To use the email plugin or the phone plugin, you will need to enable those providers.

	import { BrowserModule } from '@angular/platform-browser';
	import { ErrorHandler, NgModule } from '@angular/core';
	import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

	import { MyApp } from './app.component';
	import { HomePage } from '../pages/home/home';
	import { ListPage } from '../pages/list/list';
	import { DetailPage } from '../pages/detail/detail';

	import { ContactService } from '../services/contactservice';

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

	import { EmailComposer } from '@ionic-native/email-composer';
	import { CallNumber } from '@ionic-native/call-number';

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

view raw app.modules.ts hosted with ❤ by GitHub

Normally when we run Ionic we use a simple command line.

ionic serve

You can use Ionic serve to run the application, but when doing so you are running in a web browser, and these device native features will not be available.

On a Mac, you can run the emulator with a simple command line.

ionic cordova emulate ios

But when you’re running in the emulator, you can’t test sending emails. To fully test email functionality, you need to deploy the app to a device.

Detail.ts

	import { Component } from '@angular/core';
	import { NavController, NavParams } from 'ionic-angular';
	import { ContactService } from '../../services/contactservice';
	import { ContactDetail } from '../../DTO/contactdetail';
	import { EmailComposer } from '@ionic-native/email-composer';
	import { AlertController } from 'ionic-angular';
	import { Platform } from 'ionic-angular';
	import { CallNumber } from '@ionic-native/call-number';

	@Component({
	selector: 'page-list',
	templateUrl: 'detail.html'
	})
	export class DetailPage {
	selectedItem: ContactDetail;

	id: string;
	name: string;
	email: string;
	phone: string;

	constructor(public navCtrl: NavController,
	public navParams: NavParams,
	public contactService: ContactService,
	public emailComposer: EmailComposer,
	public alertController: AlertController,
	public platform: Platform,
	public callNumber: CallNumber) {

	// If we navigated to this page, we will have an item available as a nav param
	this.selectedItem = navParams.get('item');

	this.contactService.find(this.selectedItem.id).then(contact => {
	this.id = contact.id;
	this.name = contact.name;
	this.email = contact.email;
	this.phone = contact.phone;
	});

	}

	alertMessage(title, detail) {
	let alert = this.alertController.create({
	title: title,
	subTitle: detail,
	buttons: ['Dismiss']
	});
	alert.present();
	}

	save() {
	var item = {
	id: this.id,
	name: this.name,
	email: this.email,
	phone: this.phone,
	};

	this.contactService.save(item).then(
	contact => {

	this.navCtrl.pop();

	});
	}

	sendEmail() {
	if (this.platform.is('cordova')) {
	this.emailComposer.requestPermission().then(yesNo => {
	if (this.email != null && this.email.length > 0) {
	this.emailComposer.isAvailable().then((available: boolean) => {
	if (available) {
	let email = {
	to: this.email,
	attachments: [
	],
	subject: 'Hey',
	body: '',
	isHtml: true
	};

	// Send a text message using default options
	this.emailComposer.open(email);
	} else {
	this.alertMessage('Email not available', "Email is not configured on this device, or this application doesn't have access to email");
	}
	});
	} else {
	this.alertMessage('No email address', 'You need to save an email address before you can send an email.');
	}
	});
	} else {
	this.alertMessage('Not running in device mode.', 'You can only send an email when running as an application');
	}
	}

	usePhone() {
	if (this.platform.is('cordova')) {
	if (this.phone != null && this.phone.length > 0) {
	this.callNumber.callNumber(this.phone, true)
	.then(() => console.log('Launched dialer!'))
	.catch(() => {
	this.alertMessage('Unable to use phone', "Application was unable to use the device's phone");
	});
	} else {
	this.alertMessage('No phone number', 'You need to save a phone number before you can dial a number.');
	}
	} else {
	this.alertMessage('Not running in device mode.', 'You can only send an email when running as an application');
	}
	}
	}

view raw detail.ts hosted with ❤ by GitHub

Detail.html

	<ion-header>
	<ion-navbar color="primary">
	<ion-title>{{selectedItem.name}}</ion-title>
	<ion-buttons right>
	<button ion-button icon-only (click)='usePhone();'>
	<ion-icon name="call"></ion-icon>
	</button>
	</ion-buttons>
	<ion-buttons right>
	<button ion-button icon-only (click)='sendEmail();'>
	<ion-icon name="mail"></ion-icon>
	</button>
	</ion-buttons>
	<ion-buttons right>
	<button ion-button icon-only (click)='save();'>
	<ion-icon name="sync"></ion-icon>
	</button>
	</ion-buttons>
	</ion-navbar>
	</ion-header>

	<ion-content>

	<ion-item>
	<ion-label floating>Name</ion-label>
	<ion-input type="text" [(ngModel)]="name"></ion-input>
	</ion-item>
	<ion-item>
	<ion-label floating>Email
	</ion-label>
	<ion-input type="email" [(ngModel)]="email"></ion-input>
	</ion-item>
	<ion-item>
	<ion-label floating>Phone</ion-label>
	<ion-input type="tel" [(ngModel)]="phone"></ion-input>
	</ion-item>


	</ion-content>