Tutorial Ionic Membuat Tampilan App Rate Share Maps

Tutorial IONIC Membuat TAMPILAN APP RATE, SHARE, MAPS

Berikut beberapa tampilan pembaharuan Ionic App:

1. Pertama-tama jalankan CMD, kemudian jalankan perintah ionic serve.

1. Setelah ionic app seleai tercompile maka web browser akan terbuka sendiri kemudian akan tampil tampilan seperti berikut:

1. Selanjutnya membuat App Rate beserta pagenya.
2. Menambahkan plugin AppRate

1. Memasang Module AppRate

1. Membuat page AppRate

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

1. Selanjutnya membuat tampilan Share beserta pagenya
2. Menambahkan plugin x-sosialsharing

1. Memasang modul sosial-sharing

1. Membuat page Social

1. Berikut adalah tampilan share dipage social pada emulator web

1. Selanjutnya membuat tampilan maps beserta pagenya
2. Menambahkan plugin geolocation

1. Memasang modul geolocation

1. Menambahkan plugin nativegeocoder

1. Memasang modul nativegeocoder

1. Membuat page Maps

1. 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);

});

}

}

1. Berikut adalah tampilan maps di page maps pada emulator web

1. Kemudian kita build Apk updatenya.

 

1. Lankah selanjutnya kita mencoba menginstall aplikasinya di android.
2. Cari Apk yang akan diinstall

1. Kemudian klik pasang.

1. Tunggu beberapa saat hingga instalasi selesai.

1. Kemudian klik buka.

1. Ini adalah tampilan awal pada saat dibuka.

1. Tampilan AppRate di page apprate pada android.

1. Tampilan Share di page social pada android, berikut adalah tampilan share dari aplikasi ionic kebeberapa aplikasi social media, seperti: Facebook, Twitter, WhatsApp dan Instagram.

1. Tampilan Maps di page maps pada android, jangan lupa untuk mengizinkan akses lokasi agar maps dapat tampil(bekerja bagaimana semestinya).