Ionic 4: Test mobile contacts at the local browser at development time using the mock plugin ( Part - 1 )

Introduction:

In Ionic 4 had been provided with native API "Cordova-plugin-Contacts" to access mobile contacts. At development to test, accessing mobile contacts either we need to configure mobile emulators, or we need to connect the real device which bit complex approach.

"Cordova-Plugin-Contacts-Mock" a third party plugin helps to mock the contacts and access them in the browser and test on the browser like do on mobile. So testing on the browser is the fastest and comfortable approach to test user contacts

"Cordova-Plugin-Contact-Mock" API helps mock the contacts in our local browser (Developer Tools => Application => Local Storage) which helps to test all the features that are originally provided by Ionic 4 native API  "Cordova-Plugin-Contacts".

"Note: Mocking of contact only works with chrome browser".

About Platform :

1.Ionic 4
2.Angular 8.0v

Create Ionic4 Application:

Create an Ionic 4 application, in this sample, I'm using a predefined tabs template project provided by Ionic 4 CLI. Read more for Ionic 4 project creation here.
After the project created, run the application with the command "ionic serve" and the application gets launched as below.

Install Ionic & Cordova Contact Plugin:

Now here from this sample app, we are going to implement functionality to access or modify mobile contacts with help "Cordova-plugin-Contacts" API. Install below packages to our project

           "ionic cordova plugin add cordova-plugin-contacts"
           "npm install @ionic-native/contacts"

Create Contacts Form:

Now we are going to create a form in our ionic application, this form uses to create a new contact on a mobile device, but using same contact adding Cordova functionality we are going to use this form to mock the mobile contacts into the browser so that we can test them on Chrome Browser. Need to design add new contact page as below.

Add the below HTML code to tabe2.page.html file

  <ion-header>
  <ion-toolbar>
    <ion-title>
      Create New Contacts
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
 
  <form [formGroup]="createContacts">
    <ion-item>
      <ion-label position="floating">First Name</ion-label>
      <ion-input formControlName="firstName"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Last Name</ion-label>
      <ion-input formControlName="lastName"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Contat Number</ion-label>
      <ion-input formControlName="contactNumber"></ion-input>
    </ion-item>
    <ion-button expand="full" (click)="add()">Add Contact</ion-button>
  </form>
</ion-content>

here using angular reactive form consist of first name, last name, and phone number fields to create contact

Add Contacts :

Add follow code tab2.page.ts file as below

  import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Contacts,Contact, ContactName, ContactField } from '@ionic-native/contacts/ngx';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  createContacts: FormGroup;

  constructor(private fb: FormBuilder, private contacts: Contacts,private route:Router) {
    this.initializeForm();
  }

  initializeForm() {
    this.createContacts = this.fb.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      contactNumber: ['', [Validators.required]]
    });
  }

  resetForm(){
    this.createContacts.patchValue({
      firstName:'',
      lastName:'',
      contactNumber:''
    })
  }

  add() {
    if(!this.createContacts.valid){
      return;
    }
    let contact:Contact = this.contacts.create();
    contact.name = new ContactName(null, 
                                  this.createContacts.controls.lastName.value, 
                                  this.createContacts.controls.firstName.value);
    contact.phoneNumbers = [new ContactField('mobile', this.createContacts.controls.contactNumber.value)];  
    contact.save().then(
      () =>{ 
        this.resetForm();
        this.route.navigate(['tabs/tab3']) 
      },
      (error: any) => console.error('Error saving contact.', error)
    );  
  }
}

.'Contacts.create()' method instantiate an object to create new contact.
. 'Contact.name' is a property which holds memory to the contact name, for this creates an object of 'new ContactName()'. This 'ContactName' constructor accept 6 optional parameters.

 'formatted' The complete name of the contact.
 'familyName' The family name of the contact or last name of the person.
 'givenName' The contact's given name or person's first name.
 'middleName' The contact's middle name.
 'honorificPrefix' The contact' name prefix like 'Mr.' or 'Dr.'
 'honorificSuffix' The contact's name suffix.

In our sample, we provide 'givenName' and 'familyName' for testing to create contact.

.'Contact.phoneNumber' property holds a collection of 'ContactField' objects. 'ContactFiled' accepts
parameter like the type of contact and contact number.
.'Contact.save()' is a promise, which helps to create a new contact with provided data.

Summary:

Till now we have not used any mock plugin to create contacts. Now using this application by opening the mobile emulator or connecting to real device we can create new contacts into the device. But our main aim is to test the contact in the chrome browser, for that, we need to install contacts mock plugin. To test mock contacts visit part -2

Refer:

. Part - 2

. Source Code

Facebook

Twitter

Pinterest