Membuka aplikasi lain dengan Ionic

Mari Belajar Coding    3/15/2019    android , ionic   

Selamat datang di blog Mari belajar koding. Buat teman teman yang mengembangkan aplikasi mobile dengan framework ionic, apakah teman-teman bertanya-tanya bagaimana cara membuka aplikasi lain di projek aplikasi yang kita buat dengan ionic atau membuka google play jika aplikasi yang di maksud belum terinstal? nah, kali ini kita akan belajar bagaimana cara membuka aplikasi lain di aplikasi yang di kembangkan dengan framework Ionic. Untuk versi ionic nya saya menggunakan versi 3.

Membuka aplikasi lain dengan Ionic

Buat projek baru dengan Ionic bernama myapp .

ionic start myapp blank

Instal plugin cordova-plugin-app-launcher dan cordova-plugin-market.

ionic cordova plugin add cordova-plugin-app-launcher

ionic cordova plugin add cordova-plugin-market

npm install @ionic-native/market@4

Untuk menghindari pemblokiran kesalahan kompilasi karena cordova, buat file bernama launcher.js di myapp/src/assets/js, kalau belum ada folder js buat satu folder bernama js. Salin kode berikut kemudian simpan. Kamu bisa mengganti com.facebook.katana dengan id aplikasi yang ingin kamu buka di projek aplikasi yang kamu buat. Di sini saya ambil contoh untuk membuka aplikasi facebook.

module.exports = {
    packageLaunch: function(appSchemeStr){
        // launch app using package name (for Android devices)
        window.plugins.launcher.launch({
                packageName: appSchemeStr
            }, 
            function(){ }, 
            function(){ 
                cordova.plugins.market.open('com.facebook.katana')
            }
        );
    },
    uriLaunch: function(appUriStr){
        // launch app using URI (for iOS devices)
        window.plugins.launcher.launch({
                uri: appUriStr
            }, 
            function(){ }, 
            function(){ alert('Failed to open app') }
        );
    },
}

Tambahkan import Market di app.module.ts, lihat baris yang di beri highlight dibawah ini.

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 { Market } from '@ionic-native/market';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Market,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Buka file home.html yang berada di myapp/src/pages/home, tambahkan button untuk membuka aplikasi lain. 

<ion-header>
  <ion-navbar>
    <ion-title>
      Mari belajar coding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="secondary" (click)="OpenFacebook()">Buka Aplikasi Facebook</button>
</ion-content>

Buka file home.ts yang berada di myapp/src/pages/home, kemudian edit seperti di bawah ini.

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

import * as launcher from '../../assets/js/launcher';

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

  constructor(public navCtrl: NavController,  public alertCtrl: AlertController,) {

  }
  OpenFacebook(){
    const confirm = this.alertCtrl.create({
      message: 'Anda akan diarahkan ke aplikasi facebook.',     
      buttons: [
        {
          text: 'Tidak',
          handler: () => {
            //console.log('Disagree clicked');
          }
        },
        {
          text: 'Ya',
          handler: () => {
            launcher.packageLaunch("com.facebook.katana");
            confirm.present();
          }
        }
      ]
    });
    confirm.present();
 }
 
}

Untuk mengetahui id aplikasi atau packageID aplikasi, kamu bisa buka goole play di browser, kemudian cari aplikasi yang ingin kamu buka dengan projek aplikasi ionic kamu.

Jalankan projek kamu dengan emulator android untuk mencobanya.

Tutorial membuka aplikasi lain dengan Ionic sampai disini, sekian semoga bermanfaat.

Related seacrh:

• Membuka aplikasi lain di ionic
• Membuka aplikasi dengan packageId di Ionic
• Opening another app within Ionic
• How to open already installed app on Ionic
• Open other app using package ID/name on Ionic