Validasi Nomer Handphone di Ionic

2018-01-21 04:10:17

Untuk kebutuhan melakukan validasi nomer handphone di aplikasi Ionic kita bisa menggunakan 2 library/plugin tambahan. Yang pertama adalah ionic-native/sim. Plugin ini berfungsi untuk mendapatkan informasi tentang SIM Card user, salah satu informasi tersebut adalah kode negara dari Sim Card user. Data ini bisa kita manfaatkan untuk melakukan validasi nomer sesuai negara asal user nantinya.


Library berikutnya yang dibutuhkan adalah libphonenumber-js. Library ini berfungsi untuk melakukan proses validasinya.

Buat Ionic Project

Pastikan di komputer anda sudah terinstall nodejs, ionic, cordova dan android studio. Selanjutnya jalankan perintah perintah berikut ini melalui command line.

$ ionic start phone-validation blank

Perintah di atas akan mengcreate sebuah project ionic yang baru dalam folder phone-validation. Tipe project yang digunakan adalah blank project.

Install Plugin dan Library

Masuk ke dalam difolder project kita

$ cd phone-validation

dan jalankan beberapa perintah berikut ini dari command line untuk menginstall ion-native/sim.

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

Selanjutnya kita menginstall library libphonenumber-js dengan perintah

$ npm install libphonenumber-js --save

Coding Time

Buka project anda dengan editor kesayangan anda dan sesuaikanlah beberapa kode berikut sesuai dengan lokasi filenya masing-masing.

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 {Sim} from '@ionic-native/sim';

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

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

Di file app.module.ts kita mengimport plugin Sim dari ion-native/sim dan  menambahkan plugin Sim ke bagian provider agar bisa kita gunakan plugin ini nantinya. Selanjutnya kita akan mengubah file home.html untuk mengatur layout aplikasi.

home.html



Dan yang terakhir tulislah kode program berikut difile home.ts

home.ts
import {Component} from '@angular/core';
import {NavController, AlertController} from 'ionic-angular';
import {Sim} from '@ionic-native/sim';
import {parse, isValidNumber, getPhoneCode} from 'libphonenumber-js';

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

  countryCode : any;
  phoneCode : any;
  phoneNumber : string;

  constructor(public navCtrl : NavController, private sim : Sim, private alertCtrl : AlertController) {}

  ionViewWillEnter() {
    this
      .sim
      .getSimInfo()
      .then(info => {
        this.countryCode = info
          .countryCode
          .toUpperCase();
        this.phoneCode = '+' + getPhoneCode(this.countryCode);
      }, error => {
        this.countryCode = 'ID'
        this.phoneCode = '+' + getPhoneCode(this.countryCode);
        console.log(error);
      });
  }

  validate(phone : string) {
    let valid : boolean = isValidNumber(parse(phone, this.countryCode));
    return valid;
  }

  onValidateNumber() {
    if (this.validate(this.phoneNumber)) {
      const alert = this
        .alertCtrl
        .create({
          title: 'Great!',
          message: 'Your phone number looking good, you ready to go..',
          buttons: [
            {
              text: 'OK',
              role: 'cancel',
              handler: () => {}
            }
          ]
        });
      alert.present();
    } else {
      const alert = this
        .alertCtrl
        .create({
          title: 'Opps!',
          message: 'Invalid phone number format, please update the phone number with International f' +
              'ormat',
          buttons: [
            {
              text: 'OK',
              role: 'cancel',
              handler: () => {}
            }
          ]
        });
      alert.present();
    }
  }
}

Dari kode program di atas kita bisa lihat bahwa saat aplikasi ini dijalankan aplikasi akan mendapatkan informasi dari Sim Card. Informasi yang diambil adalah  info .countryCode. Output dari data ini adalah kode negara sesuai Sim Cardnya misalnya kita di Indonesia  akan diperoleh kode 'ID'. Kemudian dengan menggunakan fungsi  getPhoneCode() dari library  libphonenumber-js kita akan memperoleh kode telepon negara sesuai kode negaranya, misalnya kalau kode negara adalah 'ID' maka kode telepon negaranya adalah '62'. 

Selanjutnya saat tombol validate kita click, maka fungsi yang akan dieksekusi adalah  onValidateNumber(). Fungsi ini akan menampilkan pesan valid atau tidaknya nomer telepon yang diinput user. Untuk menentukan apakah nomer telepon tersebut valid, maka perhatikan fungsi  validate(). Fungsi validate() akan memanggil fungsi  isValidNumber() milik library  libphonenumber-js. Fungsi isValidNumber() menerima 2 parameter yaitu nomer telepon yang diinput user dan country code yang diperoleh dari Sim Card. Selanjutnya fungsi ini akan mengecek apakah nomer telepon yang input sudah benar formatnya sesuai negara asalanya (country code). 

Demo click Youtube