LAPORAN PRAKTIKUM

APLIKASI MOBILE

Oleh:
GUSTI AHMAD HAFI
A1317025

Dosen Pengampu:
Fathurrahmani, M.Kom

PROGRAM STUDI TEKNIK INFORMATIKA

POLITEKNIK NEGERI TANAH LAUT
PELAIHARI
2019
1. Membuat Aplikasi Menggunakan Framework IONIC

A. CAMERA

1. Buka folder dengan nama “HelloIonic” kemudian jalankan di command

prompt (CMD).

2. Buat halaman dengan cara “ionic generate page camera”.

3. Kemudian ketikkan “ionic cordova plugin add cordova-plugin-camera”.
4. Jika sudah selesai ketikkan “npm install –save @ionic-native/camera”.
5. Tunggu proses sampai selesai.
6. Kemudian buka aplikasi Visual Studio Code, masukkan folder “HelloIonic”.
7. Lalu pilih “src” klik “pages”, jika “camera” ada di dalam pages maka telah
berhasil membuat halaman dengan nama camera.

8. Buka “camera.ts”, kemudian isi codingan seperti gambar dibawah ini.

1
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@IonicPage()
@Component({
selector: 'page-camera',
templateUrl: 'camera.html',
})
export class CameraPage {
cameraData: string;
constructor(private camera : Camera){ }
openCamera(){
const options : CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.CAMERA,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true
}
this.camera.getPicture(options).then((imageData) => {
this.cameraData = 'data:image/jpeg:base64,' + imageData;
}, (err) => {
});
}
openLibrary(){
const options: CameraOptions = {
quality: 100,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true
}
this.camera.getPicture(options).then((imageData) => {
this.cameraData = 'data:image/jpeg:base64,' + imageData;
}, (err) => {

});
}
}

2
 9. Buka “camera.html”, kemudian isi codingan seperti gambar dibawah ini.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>camera</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<img src="{{cameraData}}" width="100%">
<button ion-button (click)="openCamera()">Open Camera</button>
<button ion-button (click)="openLibrary()">Open Library</button>
</ion-content>

10. Buka “app.modules.ts”, kemudian isi codingan seperti gambar dibawah ini.
Ambil yang berhubungan dengan camera
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { CameraPage } from '../pages/camera/camera';
import { Camera} from '@ionic-native/camera';
import { AppratePage } from '../pages/apprate/apprate';
import { SocialPage } from '../pages/social/social';
import { GeolocationPage } from '../pages/geolocation/geolocation';
import { SmsPage} from '../pages/sms/sms';
import { CallPage } from '../pages/call/call';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';
import { AppRate } from '@ionic-native/app-rate';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder} from '@ionic-native/native-geocoder';
import { SMS} from '@ionic-native/sms';
import { CallNumber} from '@ionic-native/call-number';

@NgModule({
declarations: [

3
 MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,
SmsPage,
CallPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,
SmsPage,
CallPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Camera,
AppRate,
SocialSharing,
Geolocation,
NativeGeocoder,
SMS,
CallNumber
]
})
export class AppModule {}

11. Kemudian coba kembali ke cmd lalu jalankan dengan cara ketikkan “ionic
serve”, jika tampilannya seperti gambar dibawah ini maka telah berhasil.

4
 Untuk mencoba kameranya bisa koneksikan dengan smartphone kalian. Dan
tutorial ada pada akhir.

B. APP RATE

1. Buat halaman sama seperti cara awal yaitu ketikkan “ionic generate
page apprate” di command prompt.
2. Kemudian kembali ke Visual Studio Code, maka apprate akan muncul.

3. Buka “apprate.ts”, kemudian isi codingan seperti gambar dibawah ini.

import { Component } from '@angular/core';
import { IonicPage} from 'ionic-angular';
import { AppRate } from '@ionic-native/app-rate';
@IonicPage()
@Component({
selector: 'page-apprate',
templateUrl: 'apprate.html',
})
export class AppratePage {

5
 constructor(private appRate: AppRate) {}
giveRate(){
this.appRate.preferences.storeAppURL = {
ios: '<app_id>',
android: 'market://details?id=<package_name>',
windows: 'ms-windows-store: //review/?ProductId=<store_id>'
};
this.appRate.promptForRating(true);
}

4. Buka “apprate.html”, kemudian isi codingan seperti gambar dibawah

ini.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>apprate</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click) ="giveRate()">Berikan Bintang</button>
</ion-content>

5. Kemudian buka “app.module.ts”, isi codingan seperti gambar dibawah

ini. Ambil yang berhubungan dengan apprate.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { CameraPage } from '../pages/camera/camera';
import { Camera} from '@ionic-native/camera';
import { AppratePage } from '../pages/apprate/apprate';
import { SocialPage } from '../pages/social/social';
import { GeolocationPage } from '../pages/geolocation/geolocation';
import { SmsPage} from '../pages/sms/sms';

6
import { CallPage } from '../pages/call/call';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';
import { AppRate } from '@ionic-native/app-rate';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder} from '@ionic-native/native-geocoder';
import { SMS} from '@ionic-native/sms';
import { CallNumber} from '@ionic-native/call-number';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,
SmsPage,
CallPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,
SmsPage,
CallPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Camera,
AppRate,
SocialSharing,
Geolocation,

7
 NativeGeocoder,
SMS,
CallNumber
]
})
export class AppModule {}

6. Kemudian buka kembali ke command prompt, coba jalankan dengan

cara “ionic serve”. Jika tampilannya seperti gambar dibawah ini maka
telah berhasil membuat apprate.

Untuk mencobanya bias koneksikan ke smartphone.

C. SOCIAL SHARING

1. Buat halaman sama seperti cara awal yaitu ketikkan “ionic generate page
social” di command prompt.
2. Kemudian ketikkan “ionic cordova plugin add cordova-plugin-x-social-
sharing”.
3. Jika sudah, ketikkan lagi “npm install –save @ionic-native/social-sharing”.
4. Kemudian kembali ke Visual Studio Code, maka social akan muncul.

8
 5. Buka “social.ts”, isi codingan seperti gambar dibawah ini.
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';

@IonicPage()
@Component({
selector: 'page-social',
templateUrl: 'social.html',
})
export class SocialPage {
pesan: string;
subjek: string;
gambar: string;
link: string;
email: string;

constructor( public socialSharing: SocialSharing){

this.pesan = "Ini di-share dari aplikasiku";
this.subjek = "Test Share";
this.gambar = "assets/thumbnail-duckling-1.jpg";
this.link = "";
this.email = "daffa@gmail.com";
}
shareGeneral(){
this.socialSharing.share(this.pesan, this.subjek, this.gambar, this.link);
}
shareWhatsApp(){
this.socialSharing.shareViaWhatsApp(this.pesan, this.gambar, this.link);
}
shareTwitter(){
this.socialSharing.shareViaTwitter(this.pesan, this.gambar, this.link);
}

9
 shareFacebook(){
this.socialSharing.shareViaFacebook(this.pesan, this.gambar, this.link);
}
shareInstagram(){
this.socialSharing.shareViaInstagram(this.pesan, this.gambar);
}
shareEmail(){
this.socialSharing.shareViaEmail(this.pesan, this.subjek,
['daffa@gmail.com'], null, null, this.gambar);
}
}

//ionViewDidLoad() {
// console.log('ionViewDidLoad SocialPage');
//}

//}

6. Buka “social.html”, kemudian isi codingan seperti dibawah ini.

<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>social</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button icon-only clear (click)="shareGeneral()">
<ion-icon name="share"></ion-icon>
</button>
<button ion-button icon-only clear (click)="shareFacebook()">
<ion-icon name=logo-facebook></ion-icon>
</button>
<button ion-button icon-only clear (click)="shareTwitter()">
<ion-icon name="logo-twitter"></ion-icon>
</button>
<button ion-button icon-only clear (click)="shareWhatsApp()">
<ion-icon name="logo-whatsapp"></ion-icon>
</button>
<button ion-button icon-only clear (click)="shareInstagram()">

10
 <ion-icon name="logo-instagram"></ion-icon>
</button>
<button ion-button icon-only clear (click)="shareEmail()">
<ion-icon name="mail"></ion-icon>
</button>
</ion-content>

7. Buka “app.module.ts”, kemudian isi codingan seperti gambar dibawah ini.

Ambil yang berhubungan dengan social sharing.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { CameraPage } from '../pages/camera/camera';
import { Camera} from '@ionic-native/camera';
import { AppratePage } from '../pages/apprate/apprate';
import { SocialPage } from '../pages/social/social';
import { GeolocationPage } from '../pages/geolocation/geolocation';
import { SmsPage} from '../pages/sms/sms';
import { CallPage } from '../pages/call/call';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';
import { AppRate } from '@ionic-native/app-rate';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder} from '@ionic-native/native-geocoder';
import { SMS} from '@ionic-native/sms';
import { CallNumber} from '@ionic-native/call-number';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,

11
 SmsPage,
CallPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,
SmsPage,
CallPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Camera,
AppRate,
SocialSharing,
Geolocation,
NativeGeocoder,
SMS,
CallNumber
]
})
export class AppModule {}

8. Kemudian kembali ke command prompt, jalankan dengan cara “ionic

serve”. Jika tampilannya seperti ini maka telah berhasil membuat social.

Untuk mencoba sharing/berbagi koneksikan dengan smartphone.

12
 D. GEOLOCATION

1. Buat halaman sama seperti cara awal yaitu ketikkan “ionic generate
page geolocation” di command prompt.
2. Kemudian ketikkan “ionic cordova plugin add cordova-plugin-
geolocation”.
3. Kemudian ketikkan “npm install –save @ionic-native/geolocation”.
4. Kemudian kembali ke Visual Studio Code, maka geolocation akan
muncul.

5. Buka “geolocation.ts”, kemudian isi codingan seperti dibawah ini.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import {Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder, NativeGeocoderReverseResult } from '@ionic-
native/native-geocoder';

declare var google;

@IonicPage()
@Component({
selector: 'page-geolocation',
templateUrl: 'geolocation.html',
})

13
export class GeolocationPage {
map: any;
infoWindow: any;
alamat: string;

@ViewChild('map') mapElement: ElementRef;

constructor(private geolocation: Geolocation, private nativeGeocoder:

NativeGeocoder) { }
ionViewDidLoad(){
this.loadMap();
}
loadMap(){
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new
google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.mapTypeId.ROADMAP
}
this.map = new
google.maps.Map(this.mapElement.nativeElement, mapOptions);

let marker = new google.maps.Marker({

map: this.map,
animation: google.maps.Animation.DROP,
draggable: true,
position: this.map.getCenter()
});
google.maps.event.addListener(marker, 'click', () => {
this.infoWindow.open(this.map, marker);
});
}, (err) => {
console.log(err);
});
}

//ionViewDidLoad() {
// console.log('ionViewDidLoad GeolocationPage');
//}

14
 6. Buka “geolocation.html”, kemudian isi codingan seperti gambar
dibawah ini.
<ion-header>
<ion-navbar>
<ion-title>geolocation</ion-title>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="photo-map" #map id="map"></div>
</ion-content>

7. Kemudian buka file “geolocation.scss”, kemudian isi codingan seperti

gambar dibawah ini.
page-geolocation {
.photo-map{
height: 200px;
}
}

8. Kemudian buka file “index.php”, masih didalam folder geolocation. Isi

codingan seperti berikut
<script src="http://maps.google.com/maps/api/js?key=xxx"></script>

9. Kemudian kembali ke command prompt, jalankan dengan cara “ionic

serve”. Jika tampilannya seperti ini maka telah berhasil membuat
geolocation.

15
E. GEOCODER

1. Ketikkan “ionic cordova plugin add cordova-plugin-nativegeocoder”.

2. Kemudian ketikkan “npm install –save @ionic-native/native-geocoder”.
3. Kemudian kembali ke Visual Studio Code, tambahkan beberapa kodingan
di Geolocation.
4. Buka “geolocation.ts”, kemudian tambahkan codingan seperti gambar
dibawah ini.
import { NativeGeocoder, NativeGeocoderReverseResult } from '@ionic-
native/native-geocoder';
..
export class GeolocationPage {
map: any;
infoWindow: any;
alamat: string;
constructor(private geolocation: Geolocation, private nativeGeocoder:
NativeGeocoder){}

5. Buka “geolocation.html”, kemudian tambahkan codingan seperti gambar

dibawah ini.
<ion-content padding>
<div class="photo-map" #map id="map"></div>
<p>Alamat: {{alamat}}</p>
</ion-content>

6. Hasilnya akan seperti berikut

16
 F. SMS

1. Buat halaman sama seperti cara awal yaitu ketikkan “ionic generate page
sms” di command prompt.
2. Kemudian ketikkan “ionic cordova plugin add cordova-sms-plugin”.
3. Kemudian ketikkan “npm install –save @ionic-native/sms@4”.
4. Kemudian kembali ke Visual Studio Code, maka sms akan muncul.

5. Buka “sms.ts”, kemudian isi codingan seperti gambar dibawah ini.

import { Component } from '@angular/core';
import { IonicPage} from 'ionic-angular';
import { SMS} from '@ionic-native/sms';

@IonicPage()
@Component({
selector: 'page-sms',
templateUrl: 'sms.html',
})
export class SmsPage {
nohp: string;
pesan: string;

constructor(private sms: SMS) {}

sendSMS(){
this.sms.send(this.nohp, this.pesan);
}

ionViewDidLoad() {
console.log('ionViewDidLoad SmsPage');
}

17
 6. Buka “sms.html”, kemudian isi codingan seperti gambar dibawah ini.
<ion-header>
<ion-navbar>
<ion-title>SMS</ion-title>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label floating>No. HP</ion-label>
<ion-input type="text" [(ngModel)]="nohp"></ion-input>
</ion-item>

<ion-item>
<ion-label floating>Pesan</ion-label>
<ion-textarea [(ngModel)]="pesan"></ion-textarea>
</ion-item>
</ion-list>
<div padding>
<button ion-button (click)="sendSMS()">Kirim Pesan</button>
</div>
</ion-content>

7. Tambahkan kodingan di “app.module.ts” seperti sebelumnya ambil bagian

sms.
8. Kemudian kembali ke command prompt, jalankan dengan cara “ionic
serve”. Jika tampilannya seperti ini maka telah berhasil membuat sms.

18
 G. CALL NUMBER

1. Buat halaman sama seperti cara awal yaitu ketikkan “ionic generate page
call” di command prompt.
2. Kemudian ketikkan “ionic cordova plugin add call-number”.
3. Kemudian ketikkan “npm install –save @ionic-native/ call-number”.
4. Kemudian kembali ke Visual Studio Code, maka call akan muncul.

5. Buka “call.ts”, kemudian isi codingan seperti gambar dibawah ini.

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { CallNumber} from '@ionic-native/call-number';

@IonicPage()
@Component({
selector: 'page-call',
templateUrl: 'call.html',
})
export class CallPage {
nohp: string;

constructor(private callNumber: CallNumber) {}

doCall(){
this.callNumber.callNumber(this.nohp, true);
}
}

19
6. Buka “call.html”, kemudian isi codingan seperti gambar dibawah ini.
<ion-header>
<ion-navbar>
<ion-title>call</ion-title>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="doCall()">Call Center</button>
</ion-content>

9. Buka “app.module.ts”, kemudian isi codingan seperti gambar dibawah ini.

Ambil yang berhubungan dengan call.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-
angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { CameraPage } from '../pages/camera/camera';
import { Camera} from '@ionic-native/camera';
import { AppratePage } from '../pages/apprate/apprate';
import { SocialPage } from '../pages/social/social';
import { GeolocationPage } from '../pages/geolocation/geolocation';
import { SmsPage} from '../pages/sms/sms';
import { CallPage } from '../pages/call/call';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';
import { AppRate } from '@ionic-native/app-rate';
import { SocialSharing } from '@ionic-native/social-sharing';
import { Geolocation } from '@ionic-native/geolocation';

20
import { NativeGeocoder} from '@ionic-native/native-geocoder';
import { SMS} from '@ionic-native/sms';
import { CallNumber} from '@ionic-native/call-number';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,
SmsPage,
CallPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
CameraPage,
AppratePage,
SocialPage,
GeolocationPage,
SmsPage,
CallPage
],
providers: [
StatusBar,

21
 SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Camera,
AppRate,
SocialSharing,
Geolocation,
NativeGeocoder,
SMS,
CallNumber
]
}) export class AppModule {}

10. Kemudian kembali ke command prompt, jalankan dengan cara “ionic

serve”. Jika tampilannya seperti ini maka telah berhasil membuat call
number.

Jika berhasil membuat seperti gambar dibawah ini, maka telah berhasil
melakukan latihan modul 10.

22
H. Cara Koneksi Ke Smartphone
1. Pastikan wifi di laptop dan smartphone koneksinya sama

23
2. Buka cmd/command prompt di windows, lalu masuk ke direktori
“HalloIonic” atau nama folder project. Dan ketikkan “ionic serve” untuk
menjalankan project.

3. Tunggu sampai proses jalannya project selesai sampai terlihat IP eksternal

seperti berikut.

Ambil IP yang terakhir untuk memasukkan ke smartphone

4. Untuk di smartphone download aplikasi “DEVAPP” di Playstore untuk
android dan AppStore untuk IOS.
5. Lalu buka aplikasi “DEVAPP”, maka tampilannya akan seperti berikut.

24
6. Lalu pilih menu, dan pilih Enter address manually.

7. Kemudian masukkan IP tadi dan port 8100.

25
8. Dan tunggu sampai proses selesai, tampilannya akan seperti berikut.

9. Maka tampilannya akan seperti berikut, pilih menu nya dan selesai. Selamat
mencoba.

26
27