Membuat Fitur Social Sharing di Ionic

2018-01-16 15:08:10

Untuk mengimplementasikan fitur ini di aplikasi ionic, kita akan menggunakan Social Sharing plugin dari ionic native yang bisa ditemukan pada link berikut https://ionicframework.com/docs/native/social-sharing.


Berikut adalah langkah-langkah untuk membuat fitur social sharing di ionic

Buat project ionic baru

$ ionic start myApp blank 

Install plugin social sharing

Masuk kedalam folder aplikasi yang baru dibuat dan lakukan instalasi plugin

$ cd myApp

$  ionic cordova plugin add cordova-plugin-x-socialsharing

$  npm install --save @ionic-native/social-sharing

Coding

Setelah proses instalasi selesai sekarang saatnya kita coding. Silahkan buka source code aplikasi dengan editor kesayangan anda.  Saya disini akan menggunakan Visual Studio Code.


Selanjut kita akan menambahkan plugin ini di app module. Silahkan buka file /src/app/app.module.ts, pada bagian import kita tambahkan code berikut.
import { SocialSharing } from '@ionic-native/social-sharing';
Demikian juga pada bagian providers kita tambakan SocialSharing sehingga bentuk lengkap dari file app.module.ts adalah sebagai berikut
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 { SocialSharing } from '@ionic-native/social-sharing';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SocialSharing,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
Selanjutnya kita juga akan melakukan perubahan pada file /pages/home/home.html untuk menambahkan textarea dan sebuah button seperti berikut ini

Dan yang terakhir kita akan menambahkan kode pada file /pages/home/home.ts untuk melakukan proses sharing saat button share diclick 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';

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

  messages: string = '';

  constructor(public navCtrl: NavController,private socialSharing: SocialSharing) {

  }

  onShareNow(){
    this.socialSharing.share(this.messages).then(value=>{
      console.log(value);
    }).catch(reason=>{
      console.log(reason);
    })
  }

}
Dan yang terakhir kita coba jalankan aplikasi ini. Untuk mencoba social sharing aplikasi ini harus dijalankan di device yang sudah terinstal beberapa apliaksi social media seperti Facebook atau twitter. 
 
$ ionic cordova run android 

Jika tidak ada masalah aplikasi akan berjalan dan fungsi social sharing berhasil kita implementasikan.



Happy Coding :)



Share