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.
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 berikutimport { 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
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.