Map Tour

PENDAHULUAN

Assalamualaikum wr wb

Terima kasih sudah membaca tutorial ini dengan sabar, seksama dan semoga ilmu nya dapat bermanfaat bagi kita semua.

Saya mendapat pelajaran ini dari Acara Revitalisasi Pendidikan pada mata pelajaran SIMDIG 2.0 di Jakarta, Universitas Bina Nusantara (BINUS University), dan saya mencoba untuk mengimbaskan kepada yang berkenan.

Mentor kami boleh dikatakan merupakan orang yang termasuk pemerhati pendidikan, dalam penerapannya, kita diajarkan dan diberikan keteladanan untuk literasi, kolaborasi, berpikir komputasional, empati, meningkatkan softskill dan meningkatkan pendidikan spritual masing-masing dalam artian Higher Learning (HL), peserta pada acara tersebut lebih dari 20 tim dan berskala nasional.

Dengan banyaknya sumber belajar baik dari teman, guru maupun dari youtube atau dari hal lainnya, maka dapat kita manfaatkan dengan sebaik-baiknya.

Beberapa prasyarat umum yang dipenuhi agar enak dalam menggunakan tutorial ini antara lain, PC atau Laptop dengan koneksi internet minimal 2Mbps, browser firefox yang diupdate, didalamnya sudah diinstal ekstensi adguard firefox atau adblock plus firefox dan email Gmail yang aktif.

Beberapa prasyarat khusus yang dipenuhi yaitu softskil editing gambar, monitor yang agak besar atau browsernya bisa di zoom jadi 140% atau lebih, bila belum memiliki prasyarat khusus ini, boleh lanjut mempelajari tutorial ini.

Demikian, mohon maaf bila ada kekurangan dan semoga tutorial ini dapat digunakan dengan sebaik baiknya.

Wassalamualaikum wr wb

Sempor, 05 November 2023

Hormat saya,

WASITA ADINUGRAHA

www.smkwongso.com/dkvmm

PENGENALAN WEBSITE APPINVENTOR

Website ini dari Massachusetts Institute of Technology dari Amerika yang beralamat di

77 Massachusetts Ave, Cambridge, MA 02139, United States

Tim kecil MIT CSAIL di pimpin oleh Professor HAL ABELSON

Keterangan lengkap ada di alamat website https://appinventor.mit.edu/about-us

Aplikasi ini akan dibuat dengan website https://ai2.appinventor.mit.edu

Ada beberapa web lain yang bisa dipakai misal Kodular, Thunkable, AppSheet

Pada tutorial ini saya memakai website https://ai2.appinventor.mit.edu atau saya sebut MITAI2

gunakan email gmail untuk sign in, masukkan email dan password, maka akan ada konfirmasi dari appinventor bahwa akun gmail akan login, ijinkan untuk login

maka akan terbuka suatu jendela pembuatan aplikasi yang pada menu nya ada Project, Connect Build Setting dan Help

Kemudian dalam web ini ada dua tombol di kanan atas dibawah informasi user email yaitu tombol Designer dan Block

Tombol Designer berfungsi untuk mendesain tampilan user interface dari app yang akan dibuat, dan Tombol Block berfungsi untuk mengisi kode program yang akan dimasukkan kedalam app yang akan dibuat.

Ada bagian utama pada Designer ini yaitu Pallete, Viewer, Component dan Properties

Itu dulu pengenalan tampilan antar muka website nya.

01 MAP TOUR

Deskripsi :

Aplikasi ini untuk menujukan peta lokasi suatu tempat di smartphone menggunakan model menekan button dan akan muncul gambar serta marker untuk menunjukan lokasi di peta

Prinsip yang dipakai pada aplikasi ini telah di nilai oleh Dewan Juri dan mendapat penghargaan Juara 3 Nasional pada Event tersebut yang berhasil diraih rekan sejawat kami dari Tim lain.

Detail :

A. Menggunakan screen : screen1 dan screen2

B. Component yang digunakan : Button, Image, Marker, Lokasi Latitude, Longitude, Text to speech

C. Bahan ada 4 gambar thumbnail yang size nya tidak terlalu besar misal 383×272 pixel, 4 buah lokasi Latitude dan Longitude, 4 buah nama lokasi sesuai nama gambar.

D. Langkah pembuatan

1. Login https://ai2.appinventor.mit.edu, buat new project, beri nama maptour tanpa spasi lalu tekan OK, gunakan browser Firefox, bisa saja mungkin Chrome bisa, tapi ada beberapa hal nantinya yang belum kompatibel. (nama file ini bisa disesuaikan, yang penting tidak pakai spasi)

2. Web itu akan langsung menyiapkan dari awal program ada screen1, nama Screen 1 ini nanti bisa diganti, baiklah pada Screen 1 tambahkan Vertical Arrangement ke viewer dari Pallete yang namanya Layout, dengan cara lihat Pallete, pilih Layout, pilih Vertical Arrangement, tekan jangan dilepas, seret ke Viewer. Tekan jangan dilepas lalu seret ketempat lain, disingkat menjadi drag.

Lihat bagian properties milik Vertical Arrangement dan atur height dan Width nya 100 percent, klik OK

3. Masukkan Button

Cara nya dari Pallete Klik User InterFace, pilih Button, tekan jangan dilepan, seret ke Viewer, letakan dibawah Vertical Arrangement.

Maka pada Screen 1 sudah ada Component VerticalArragement1 dan Button1

4. Isi VerticalArragement1 dengan gambar bacground2.jpg, caranya upload dulu bacground2.jpg ke website dengan pilih upload dibagian Media, bagian Media ini ada di bawahnya Component

Berinama button, isinya button adalah text dengan isi MASUK, nama button nya adalah Button1

5. Upload juga map1.jpg sampai map4.jpg, dan iconpeta.jpg satu demi satu, maka pada Bagian Media ada gambar-gambar yang di butuhkan, untuk preview gambar tersebut bisa klik salah satu gambar dan plih preview

menu pada klik salah satu gambar, ada preview, delete dan download to my

computer

tampilan Screen1, nantinya untuk masuk Screen2, klik tombol MASUK.

Sampai disini, Screen 1 sudah selesai. Lanjut ke Screen2

6. Buat Screen2

Caranya klik Add Screen, tulis Screen2, tekan OK

7. Pindah Screen caranya , disebelah Add Screen ada Nama Screen1 klik, lalu pilih Screen mana yang akan di proses, termasuk bila akan menghapus Screen ada Remove Screen, itu untuk menghapus Screen dan kodingan nya.

8. Di Screen 1 Beri perintah untuk Button1 = klik design

1. pilih Button1

2. dan pilih control

3. scroll pakai klik kiri mouse

4. Drag open another screenName Screen1

5. ganti Screenname Screen1 menjadi Screen2 karena kita akan membuka Screen2

9. Pindah ke Designer Pada Screen 2 ini kita akan membuat interface, pembuatan interface menggunakan komponen berikut : 4 Button,4 Marker, 1 Image, 1 TextToSpeech

1. Button

2. Map

3. Image

4. TextToSpeech1 (komponen tak terlihat tapi ada)

5. TableArrangement

Table arrangement width nya dibuat fill parent, fill parent artinya lebarnya akan menyesuaikan lebar layar smartphone, ukuran lebar atau tinggi bisa dibuat persen, px, atau sesuai layar (fill Parent), atau automatic. Isinya TableArrangement ada 2 column (kolom) dan 2 rows (baris)

4 tombol, yang di posisikan pada

kolom 1 baris 1 = Button1,

kolom 2 baris 1 = Button 2,

kolom 1 baris 2 = Button 3,

kolom 2 baris 2 = Button 4,

lihat gambar, atau boleh bebas yang penting masuk, lalu tiap button di berinama sesuai kebutuhan

10. Masukan Map

Drag map ke Screen 2, map ada di Pallete_Map

atur map diproperties nya

Center from string -7.668737,109.651933 (pertama tampil akan ke Kordinat tersebut)

Height 48 % , Width fillparent

map type Road

Zoom Level 18, bisa diatur lebih besar atau lebih kecil

11. Masukkan ke Screen 2 komponen berikut Image, Marker empat kali masuk, dan TextToSpeech

12. Masuk ke Coding, tekan tombol Block

Kerjakan coding untuk button 1

13. Proses Koding Untuk Komponen Marker

Klik Marker1, ada di no 1, lalu klik pakai mouse di nomer 3 untuk melihat blok koding yang lainnya, pilih nomer 2 yaitu Call Marker1.showinfobox, dan pasang ke kodingan when Button1.click do

set Marker1 Fill Color to biru

klik Built in menu ada di nomer 1 dan Color di nomor 2, lalu pilihan color ada di nomer 3

(seperti itu prinsip nya, ambil di bagian Block, pilih komponen, pasang di Viewer)

ini koding untuk button 1

14. Proses koding untuk komponen Map

15. Proses koding untuk Untuk Komponen Image

16. Proses Koding untuk komponen TextTo Speech

nomer 4 bisa mengambil dari Buit-in yang Text, ikuti langkah nya.

17. Untuk zoom menggunakan built-in Math

18. Koding Button 2

19. Koding Button 3

20. Koding Button 4

21. Kembali ke Designer untuk Screen 2

atur Marker 1 sampai 4, aturlah satu demi satu mulai dari marker1,

Klik Designer Klik marker 1 isi Title, Latitude dan Longitude, lanjutkan sampai marker4

Map

bisa mengambil dari website

https://www.latlong.net/

1. Center from String

Alun Alun kebumen

-7.668737,109.651933

2. Marker1

SMK Wongso

Lat

-7.609461

Long

109.530179

3. Marker2

Munjuluhur

Lat

-7.353326

Long

109.331490

4. Marker3

Logending

Lat

-7.726595

Long

109.394463

5. Marker 4

Jakarta

Lat

-6.127225

Long

106.833712

22. Simpan dan Build

Tekan My Project lalu save, Tekan Build lalu Pilih Android (.apk)

23. Klik download .apk now

untuk mendownload apk ke hardisk, bisa di transfer ke gdrive lalu share link

bisa di transfer ke smartphone, memori internal mau pun eksternal, lalu di smartphone di instal, aplikasi berhaya, tetap instal, ijinkan untuk menginstal, ijinkan, tetap instal.

lalu coba dibuka, volume suara smartphone di tambah besar misal separuh volume

24. Scan Barcode menggunkan MITA2 Companion

Selamat Mencoba

Download Link File Bahan