LAPORAN 3

PEMOGRAMAN PERANGKAT MOBILE

“TAMPILAN APP RATE, SHARE, MAPS”

NAMA : Muhammad Hasan Z

KELAS : PTIK F 2017

NIM : 1729042068

DOSEN PENGAMPU :

Muhammad Ayat Hidayat S.Kom, M.T.

PROGRAM STUDI PEND. TEKNIK INFORMATIKA DAN KOMPUTER

JURUSAN PENDIDIKAN TEKNIK ELEKTRO

FAKULTAS TEKNIK

2019
 TAMPILAN APP RATE, SHARE, MAPS
Berikut beberapa tampilan pembaharuan Ionic App:
1. Pertama-tama jalankan CMD, kemudian jalankan perintah ionic serve.
2. Setelah ionic app seleai tercompile maka web browser akan terbuka sendiri kemudian akan
tampil tampilan seperti berikut:

3. Selanjutnya membuat App Rate beserta pagenya.

a. Menambahkan plugin AppRate

b. Memasang Module AppRate

c. Membuat page AppRate

 d. Berikut adalah tampilan apprate di page apprate pada emulator web

4. Selanjutnya membuat tampilan Share beserta pagenya

a. Menambahkan plugin x-sosialsharing

b. Memasang modul sosial-sharing

c. Membuat page Social

 d. Berikut adalah tampilan share dipage social pada emulator web

5. Selanjutnya membuat tampilan maps beserta pagenya

a. Menambahkan plugin geolocation

b. Memasang modul geolocation

c. Menambahkan plugin nativegeocoder

 d. Memasang modul nativegeocoder

e. Membuat page Maps

f. Perbaikan Script maps.page.ts

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

declare var google;

@Component({
selector: 'app-maps',
templateUrl: './maps.page.html',
styleUrls: ['./maps.page.scss'],
})
export class MapsPage {
map: any;
infoWindow: any;
alamat:string;
@ViewChild('map') mapElement: ElementRef;

constructor(private geolocation: Geolocation, private nativeGeocoder:

NativeGeocoder)
{ }

ngOnInit(){
this.initMap();
}
initMap(){
this.geolocation.getCurrentPosition().then((position) =>{
let latLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
 let mapOptions = google.maps.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()
});
this.infoWindow=new google.maps.InfoWindow({
content:"information"
});

this.nativeGeocoder.reverseGeocode(position.coords.latitude,
position.coords.longitude)
.then((result: NativeGeocoderReverseResult[]) => this.alamat =
(JSON.stringify(result[0])))
.catch((error: any)=> console.log(error));

google.maps.event.addListener(marker,'click', ()=> {
this.infoWindow.open(this.map,marker);
});
},(err) => {
console.log(err);
});
}

}
 g. Berikut adalah tampilan maps di page maps pada emulator web

6. Kemudian kita build Apk updatenya.

7. Lankah selanjutnya kita mencoba menginstall aplikasinya di android.

a. Cari Apk yang akan diinstall

b. Kemudian klik pasang.

c. Tunggu beberapa saat hingga instalasi selesai.

d. Kemudian klik buka.

 e. Ini adalah tampilan awal pada saat dibuka.

8. Tampilan AppRate di page apprate pada android.

9. Tampilan Share di page social pada android, berikut adalah tampilan share dari aplikasi ionic
kebeberapa aplikasi social media, seperti: Facebook, Twitter, WhatsApp dan Instagram.
10. Tampilan Maps di page maps pada android, jangan lupa untuk mengizinkan akses lokasi agar
maps dapat tampil(bekerja bagaimana semestinya).