Cara Membuat Aplikasi WebView | Tutorial Sketchware Part 02

Ok teman-teman di artikel kedua ini saya masih ingin berbagi tutorial seputar aplikasi Sketchware yang mana pada part pertama, saya sudah membuat artikel tentang cara membuat SplashScreen dan pada kesempatan kali ini saya saya ingin membagikan cara membuat WebView pada aplikasi Sketchware ini.

Apa itu WebView

WebView untuk aplikasi banyak sekali kegunaannya apalagi jiga projek aplikasi yang kamu bangun berbasis online jadi kamu bisa manfaatkan WebView ini untuk projek aplikasi yang kamu bangun. Terlepas dari aplikasi-aplikasi keren yang sudah banyak dikembangkan, kita sebagai pemula juga dapat memanfaatkan WebView untuk membuat aplikasi sederhana yang tidak kalah keren.

Sebagai contoh aplikasi sederhana yang bisa kamu buat menggunakan WebView ini ialah aplikasi pencarian menggunakan situs google atau membuat aplikasi game online sederhana dan lainnya yang berbasis web. Selain itu Kamu juga bisa membuat aplikasi toko dengan memanfaatkan tampilan pada WebView ini, dengan syarat kamu sudah memiliki toko dalam bentuk situs web, atau kamu bisa membuatnya melalui platform gratis dari google yaitu blogger.

Dengan blogger kamu bisa membuat toko online kamu sendiri dengan geratis, nah WebView inilah yang bisa menampilkan toko kamu dalam bentuk aplikasi. ok jika kamu tertarik langsung saja kita mulai tutorialnya.

Layout & Block

Pertama-tama siapkan projek baru, silahkan atur icon, nama aplikasi dan tema warna yang ingin kamu gunakan. Selanjutnya pada tab view di halaman main.xml kamu bisa langsung saja tambahkan widget WebView kedalam kanvas.

Jika sudah sekarang kita tinggalkan saja tab view dan beralih pada tab event. Pada tab event silahkan klik onCreat kemudian pada halaman onCreat tambahkan blok view dengan cara klik icon puzzle selanjutnya masuk ke blok view dan gulir kebawah cari blok bertuliskan WebView LoadUrl lalu tarik dan letakan blok tersebut pada tempatnya, Isi WebView dengan webview1 dan kolom terakhir adalah kolom url, kamu bisa menambah url apapun untuk ditampilkan pada aplikasi kamu ini, sebagai contoh kamu bisa isi urlnya seperti yang tertera pada gambar dibawah.

Dengan hanya seperti itu kamu sudah dapat menjalankan aplikasinya silahkan coba dan lihat hasilnya. Tapi projek ini tidak hanya sampai sini saja karena setelah kamu mengunjungi halaman berikutnya dan ketika kamu klik tombol kembali maka aplikasi akan langsung keluar bukannya kembali ke halaman sebelumnya. Maka dari itu kita perlu menambah tindakan lainnya khususnya untuk tombol kembali.

Menambahkan onBackPressed

Untuk menambahkan tindakan ini kamu perlu menambahkan halaman terpisah yang tentunya sudah disediakan juga dalam aplikasi, untuk itu sekarang kita kembali ke tab event selanjutnya klik tombol plus (+) yang ada di pojok kanan bawah maka akan muncul beberapa pilihan yang bisa kamu tambahkan dan pada tahap ini kita harus mencentang pilihan kita yaitu onBackPressed lalu klik add.

jika sudah ditambahkan silahkan buka halaman tersebut lalu tambahkan blok Control dengan cara tekan tombol puzzle kemudian pilih Control maka kamu akan menemukan beberapa blok yang umumnya berwarna kuning lalu silahkan geser dan tempatkan blok "if then else" atau lihat gambar berikut.

Jika sudah sekarang tambahkan lagi blok dan buka blok view pilih blok boolean yang bertuliskan WebView canGoBack lalu tempelkan pada block if then else, masih di blok view sekarang pilih blok yang bertuliskan webview goBack lalu tempel di dalam blok if dibagian rongga atas selanjutnya masukan lagi blok view yang bertuliskan webview clearChahce dirongga yang sama tepat dibawah blok sebelumnya.

Setelah itu buka block Component dan pilih blok bertuliskan Finish Activity kemudian tempelkan pada blok if dirongga bagian bawah yang masih kosong. untuk contohnya silahkan lihat gambar berikut.

Dengan begitu ketika kamu berada di halaman lain yang terbuka pada WebView, saat kamu klik tombol kembali maka akan kembali ke halaman sebelumnya dan jika berada di halaman pertama maka aplikasi akan dihentikan atau di akhiri. Sampai sini aplikasi kamu dapat di operasikan dengan sepenuhnya...

Game Online Sederhana

Untuk membuat game oline seperti game-game populer seperti PUBG atau MOBILE LEGEND tentunya kita harus memiliki keahlian yang luar biasa dan tentunya tidak bisa kita bangun sendiri melainkan harus memiliki team yang bekerjasama membangun sebuah game keren sekelas game-game tersebut.

Tapi jika kamu mau coba membuat game online sederhana dan tentunya tanpa coding maupun skrip yang rumit, kamu hanya perlu kopi paste saja link game browser yang bisa kamu cari di google, banyak game-game seru disana yang bisa kamu coba. Sebagai contoh... kamu bisa gunakan url berikut untuk kamu gunakan di aplikasi kamu.

https://play.famobi.com/wrapper/bubble-tower-3d/A1000-10

Untuk menerapkannya pun juga mudah, caranya sama persis seperti cara diatas, kita hanya perlu mengubah link sebelumnya dengan url game browser diatas. jika sudah silahkan jalankan aplikasinya dan lihat hasilnya.

Membuat Toko Online

Untuk membuat toko online kamu sendiri, kamu perlu membuat sebuah website untuk toko kamu, tapi karena biaya membuat website itu tidak murah, maka solusinya ialah menggunakan blog gratisan dari google yaitu BLOGGER silahkan bangun blogger kamu menjadi tampilan toko online, untuk tutorialnya sendiri sudah banyak yang membahas jadi kamu tinggal cari di google dan silahkan pilih artikel yang kemungkinan cocok dengan yang kamu inginkan.

Jika sudah memiliki website atau blog silahkan gunakan url blog atau website yang kamu miliki, dan sekarang kamu sudah mempunyai aplikasi toko online sendiri.

Untuk aplikasi toko online yang lebih kompleks atau lebih profesional kita harus membuat aplikasi tersebut menjadi aplikasi native dan tutorialnya akan sangat panjang dan detail. maka dari itu saya akan membuat tutorialnya secacra terpisah di kesempatan mendatang.

Demikian tutorial kali ini sampai jumpa lagi di tutorial menarik berikutnya. jika ada yyang kurang dimengerti pada pembahasan diatas silahkan tanyakan dikolom komentar. Terimakasih.