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.

C:\Users\LENOVO\Pictures\ioni app1.1.png

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

C:\Users\LENOVO\Pictures\ionic app1.2.png

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

C:\Users\LENOVO\Pictures\LP PPM 3\04.png

  1. Memasang Module AppRate

C:\Users\LENOVO\Pictures\LP PPM 3\05.png

  1. Membuat page AppRate

C:\Users\LENOVO\Pictures\LP PPM 3\06.png

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

C:\Users\LENOVO\Pictures\LP PPM 3\01.png

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

C:\Users\LENOVO\Pictures\LP PPM 3\07.png

  1. Memasang modul sosial-sharing

C:\Users\LENOVO\Pictures\LP PPM 3\08.png

  1. Membuat page Social

C:\Users\LENOVO\Pictures\LP PPM 3\09.png

  1. Berikut adalah tampilan share dipage social pada emulator web

C:\Users\LENOVO\Pictures\LP PPM 3\02.1.png

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

  1. Memasang modul geolocation

C:\Users\LENOVO\Pictures\LP PPM 3\11.png

  1. Menambahkan plugin nativegeocoder

  1. Memasang modul nativegeocoder

C:\Users\LENOVO\Pictures\LP PPM 3\13.png

  1. Membuat page Maps

C:\Users\LENOVO\Pictures\LP PPM 3\14.png

  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

C:\Users\LENOVO\Pictures\LP PPM 3\03.png

  1. Kemudian kita build Apk updatenya.

 

C:\Users\LENOVO\Pictures\ionic app0.3.png

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

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190421-173533.png

  1. Kemudian klik pasang.

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190421-173536.png

  1. Tunggu beberapa saat hingga instalasi selesai.

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190421-173540.png

  1. Kemudian klik buka.

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190421-173549.png

  1. Ini adalah tampilan awal pada saat dibuka.

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190421-173559.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-203559.png

  1. Tampilan AppRate di page apprate pada android.

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-193559.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-193604.png

  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.

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-193607.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-193615.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-193954.png

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-194209.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-194308.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190422-194333.png

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

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190420-043337.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190420-180711.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190420-180804.png

C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190420-180809.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190420-180706.png C:\Users\LENOVO\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Screenshot_20190420-180741.png

Tinggalkan Balasan

Need Help? Chat with us