Gunadarma University. Google Map API

Transkripsi

1 Gunadarma University Google Map API

2 Google Maps INTRODUCTION API EXAMPLE Menampilkan Peta Di Dalam Website

3 Google Maps INTRODUCTION API EXAMPLE Fitur Utama Pada Google Maps

4 Google Maps INTRODUCTION API EXAMPLE Map Dapat Diterapkan pada Aplikasi Android

5 Google Maps INTRODUCTION API EXAMPLE Google Map API untuk membuat map dan informasi secara spesifik API yang disediakan adalah services / fungsi yang terdiri dari : Marker Directions Coordinates Mengakomodasi Fungsi Utama Google Map Versi Web Services Lainnya

6 Case Study Menampilkan Alamat yang telah diinput pada Map Menampilkan Lokasi sebenarnya pada Map

7 Case Study

8 Step by Step 1. Membuat nama projek tampilan : a. Buka panel Properties. b. ubah Title menjadi Map it 2. Membuat Label Google Map a. klik Label pada Pada Palette -> lalu tarik ke halaman Viewer Project. b. Melakukan pengaturan pada Properties

9 Pengaturan Properties Label Google map 1. BackgroundColor : Light Gray 2. FontBold : Ceklis 3. FontSize : FontTypeface : default 5. HasMargins : Ceklis 6. Height : Automatic 7. Width : Fill parent 8. Text : Google Map 9. TextAlignment : Center : TextColor : Red 11. Visible : ceklis

10 Membuat layout baru 1. Klik VerticalArrangement pada Palette Layout. 2. Tarik kehalaman Viewer. 3. Atur Properties Layout. Pengaturan Properties Layout 1. AllignHorizotal : Left:1 2. AllignVertical : Top:1 3. BockgroundColor : Light Gray 4. Height : Automatic 5. Width : Fill parent 6. Image : None 7. Visible : Ceklis

11 Pengaturan VerticalArrangement Input Componet VerticalArrangement a. klik & tahan Label pada Palette - User Interface -> lalu tarik ke halaman Viewer. b. klik & tahan TextBox Pada Palette - User Interface -> lalu tarik ke halaman Viewer. c. klik & tahan Button Pada Palette - User Interface -> lalu tarik ke halaman Viewer. d. Melakukan pengaturan pada Masing-Masing Component VerticalArrangement2.

12 Langkah-langkah Merubah Nama Component 1. Klik Component yang akan dirubah namanya 3. Ketikan Nama baru yang diinginkan untuk mengganti nama yang lama pada kolom New name OK 2. Klik Rename yang berada pada bagian paling bawah Component 4. Maka nama baru pada Component yang dipilih akan sesuai dengan yg telah diketikan.

13 Pengaturan Properties Label SelectedAddresLabel 1. BackgroundColor : None 2. FontBold : Ceklis 3. FontSize : FontTypeface : default 5. HasMargins : Ceklis 6. Height : Automatic 7. Width : Fill parent 8. Text : Masukan Alamat 9. TextAlignment : left: TextColor : Black 11. Visible : Ceklis

14 Pengaturan Properties Label AddresForMApLabel 1. BackgroundColor : Default 2. Enabled : Ceklis 3. FontSize : FontTypeface : default 5. Height : Automatic 6. Width : Fill parent 7. Hint : masukan alamat yang dicari 8. TextAlignment : left: 0 9. TextColor : Black 10. Visible : Ceklis

15 Pengaturan Properties Button ViewOnMapButton 1. BackgroundColor : Default 2. Enabled : Ceklis 3. FontBold : Ceklis 4. Fontitalic : Blank 5. FontSize : FontTypeface : default 7. Height : Automatic 8. Width : Fill parent 9. Image : None 10. Shape : default 11. Text : View On Map 12. TextAlignment : Center:1 13. TextColor : Default 14. Visible : Ceklis

16 Membuat Button baru 1. Klik Button pada Palette user Interface 2. Tarik kehalaman Viewer. 3. Atur Properties Button.

17 Pengaturan Properties Button MyLocationButton 1. BackgroundColor : Default 2. Enabled : Ceklis 3. FontBold : Ceklis 4. Fontitalic : Blank 5. FontSize : FontTypeface : default 7. Height : Automatic 8. Width : Fill parent 9. Image : None 10. Shape : default 11. Text : My Location On The Map 12. TextAlignment : Center:1 13. TextColor : Default 14. Visible : Ceklis

18 Menambahkan Database Step by step : 1. Klik & tahan TinyDB pada Pallete Storage. 2. Tarik menuju halaman Viewer 3. Lepaskan

19 Menambahkan Notifikasi Step by step : 1. Klik & tahan Notifier pada Pallete User Interface. 2. Tarik menuju halaman Viewer 3. Lepaskan.

20 Menambahkan ActivityStrarter Step by step : 1. Klik & tahan ActivityStarter pada Pallete Connectivity. 2. Tarik menuju halaman Viewer 3. Lepaskan

21 Menambahkan LocationSensor Step by step : 1. Klik & tahan LocationSensor pada Pallete Sensors. 2. Tarik menuju halaman Viewer 3. Lepaskan

22 Mengaktivkan Setiap Component Dengan Control Block

23 Pengaturan Control Block Klik tombol Blocks untuk pindah pada tampilan Pengaturan activity Componen

24 Case Study Menampilkan Peta dari Alamat yang Diinput Aksi yang Ditampilkan saat Tombol View On Map Di Klik

25 Case Study Menampilkan Peta Lokasi Asal saat Button My Location Di klik

26 Menampilkan Peta dari Alamat yang Diinput Step by Step : 1. Klik Blocks-Prosedures 2. Pilih tipe prosedures to-do 3. Klik pada tipe yang sesuai lalu tarik menuju halaman Viewer Ubah Menjadi : showmap

27 Menampilkan Peta dari Alamat yang Diinput Step by Step : 1. Klik Blocks-ActivityStarter1 2. Pilih tipe set-action-to 3. Klik pada tipe yang sesuai lalu tarik menuju halaman Viewer 4. Gabungkan dengan Block sebelumnya.

28 Menampilkan Peta dari Alamat yang Diinput Step by Step : 1. Klik Blocks- Text 2. Pilih tipe Banks Text 3. Klik pada tipe yang sesuai lalu tarik menuju halaman Viewer 4. Gabungkan dengan Blocks sebelumnya. Isi bagian kosong dengan : Android.intent.action.VIEW

29 Menampilkan Peta dari Alamat yang Diinput Lanjutkan Hingga membentuk pola seperti dibawah ini :

30 Menampilkan Peta dari Alamat yang Diinput 4 Blocks Text.. Isi dengan : geo:0,0?q= 3 2 Blocks ActivityStarter1 Call ActivityStarter1. StartActivity 1 Blocks ActivityStarter1 DataUri. to Blocks Text Join 5 Blocks AddressForMapText AddressForMapText. Text

31 Aksi yang Ditampilkan saat Tombol View On Map Di Klik Membuat Pola baru untuk menambahkan aksi pada tombol view on map.

32 Aksi yang Ditampilkan saat Tombol View On Map Di Klik 3 Blocks Text is empty 4 Blocks AddressForMapText AddressForMapText. Text 6 Blocks Text. 1 Blocks ViewOnMapButton when ViewOnMapButton. Click Blocks Text Okay Blocks Text Info Blocks Control if then (lalu klik kotak biru untuk menambahkan kondisi else) 9 Blocks Procedures Call ShowMap 5 Blocks Notifier1 Call Notifier1. ShowMessageDialog message title button text

33 Menampilkan Peta Lokasi Asal saat Button My Location Di klik Membuat Pola baru untuk menambahkan aksi pada tombol My Location

34 Menampilkan Peta Lokasi Asal saat Button My Location Di klik 2 Blocks ActivityStarter1 Set ActivityStarter1.Action. to Blocks Text.. Isi bagian kosong dengan : Android.intent.action.VIEW 6 3 Blocks Text.. 1 Blocks MyLocationButton When MyLocationButton Click, do Blocks Procedures Call ActivityStarter1. StartActivity 5 Blocks Text Join Isi dengan : geo:0,0?q= 7 8 Blocks LocationSensor1 LocationSensor1.Currentaddress 4 Blocks ActivityStarter1 Set ActivityStarter1.DataUri. to

35 Gunadarma University Database Dengan TinyDB

36 Database Kumpulan informasi yang disimpan di dalam komputer secara sistematik Dapat dilihat kembali dengan menggunakan program aplikasi Bersifat Persisten

37 Database Database Tabel Atribut Sekolah Siswa Guru nisn nama_siswa NIP nama_guru Mapel Kode_mapel Nama_mapel

38 TinyDB Menerima / Membaca Data di TinyDB

39 TinyDB Menyimpan Data di dalam storage Devices

40 TinyDB Mengambil Nilai dari Database

41 Case Study Menggunakan Projek Sebelumnya Menyimpan Alamat Dalam Database Memilih Alamat yang telah disimpan di dalam database Menampilkan Alamat pada Map

42 Case Study Menggunakan Projek Sebelumnya

43 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Label 3 Ubah Text sesuai SS

44 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop ListPicker 2 Ubah Text sesuai SS

45 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Horizontal Arrang.

46 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Horizontal Arrang.

47 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Dua Button

48 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Vertical Arrang.

49 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Label 2 Ubah Text dari Label

50 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Label 2 Ubah Text dari Label

51 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop TextBox 2 Ubah Text dari Label

52 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Horizontal Arrangment

53 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop 2 Button

54 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop 2 Button

55 Case Study Menggunakan Projek Sebelumnya 1 Set background ke white 1 Drag n Drop Label, Mengganti TextBox

56 Case Study Menggunakan Projek Sebelumnya Definisi Variabel Membaca Database saat Aplikasi Dibuka

57 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Definisi Variabel 2 Drag n Drop dan Pasang ke tagadress 3 Drag n Drop dan Pasang ke listlocations

58 Case Study Menggunakan Projek Sebelumnya 1 Drag n Drop Membaca Database saat Aplikasi Dibuka 2 Drag n Drop dan Pasang ke block When-Do 3 2 Drag n Drop dan Pasang ke listlocations Drag n Drop dan Pasang ke block When-Do

59 Case Study Menggunakan Projek Sebelumnya 4 Drag n Drop dan psang ke ListPikcer Membaca Database saat Aplikasi Dibuka

60 Case Study Menggunakan Projek Sebelumnya Fungsi Membaca Data Aksi Ketika Tombol Add Location Di-Klik Aksi Ketika Tombol Cancel Di-Klik

61 Case Study Menggunakan Projek Sebelumnya Fungsi Menambah Data Alamat yang Diinput Menampilkan alamat yang dipilih pada label

62 Case Study Menggunakan Projek Sebelumnya