Cara buat aplikasi android counter dengan javascript code webview

Aplikasi android App

Cara buat aplikasi android counter dengan javascript code webview - dalam memahami aplikasi perlu di pahami satu persatu untuk membuat aplikasi android tersebut diantaranya kita melatih coding - coding android dalam memechakan sebuah problem android tersebut sekarang kita coba latihan cara membuat aplikasi berbasis android yaitu counter dengan methode javascript, conternya di set dengan alarm yang dimasukan sistem mp3 player pada plugin aplikasi android tersebut.

Memahami apa itu aplikasi counter android.

Aplikasi counter android adalah aplikasi yang di buat untuk menghitung jumlah yang di set berdasarkan kriteria yang kita inginkan misal di set jumlhanya kemudian berbunyi saat mencapai batas nominal tersebut.

Cara membuat project aplikasi counter alarm

Mari kita bikin dulu project counter alarm dulu yaitu buka aplikasi app Builder kemudian langsung buat project counternya seperti berikut ini.

New project > App Counter > Next > web wrapper > Next > Main Activity > Finish.

Yups project counter alarm aplikasi android buatan kita telah selesai kita buat dan kita akan tambah script code javascript counter alarm pada android tersebut

Cara memasukan Javascript code counter alarm

Oh ya buat dulu folder assets pada pada project counter alarm tersebut, kalu belum memhami project webview bisa belajar dulu di sini.

Cara menampilkan webview local pada aplikasi alarm

Oke folder index.html telah di buat sekarang masuk ke assets > index.html buka file tersebut tambahkan code javascript alarm code berikut ini.

<meta charset="UTF-8">
<title>Index</title>
<div>
<center>
<br><br>
<b>App Creator Counter Alarm</b>
<br><br>

<audio id="myAudio">
<source src="music.mp3" type="audio/mpeg">
</audio>
<div style="font-size:20px;width:10%;height:40px;border:5px solid black;border-radius:50%;padding:10%" id="keluar"><center><b>Mulai</b></center></div>
<br>
<input id="amb" oninput="myFunction()" value="0">
<br>
Set finish :
<br>
<input id="amc" value="12">
<br>
<br><br>
<button style="display:none" id="modal" onclick="playAudio();">putar Alarm</button>
<button style="font-size:20px;padding:40px" id="masukkan" onclick="tmb();"><b>Tambah</b></button>
<br><br>
<button onclick="nol();">Reset</button>
<br>
<br>
<button style="display:none" id="modal2" onclick="pauseAudio();">Pause</button>
<script>
function tmb(){
var m = document.getElementById("amb");
m.value++;

var n = document.getElementById("amb").value; document.getElementById("keluar").innerText=n;
var i = document.getElementById("amc").value;



if(i==n){
document.getElementById("amb").value="0"; document.getElementById("masukkan").style="display:none"; document.getElementById("modal").style="font-size:20px;padding:40px;display:block"; document.getElementById("modal2").style="display:block";

}

}

function nol(){
document.getElementById("amb").value="0"; document.getElementById("keluar").value="0";
}

</script>


<script>
var put = document.getElementById("myAudio");
x.play();
function playAudio() {
put.play(); document.getElementById("masukkan").style="font-size:20px;padding:40px;display:block"; document.getElementById("modal").style="display:none";

}

function pauseAudio() {
put.pause();
document.getElementById("modal2").style="display:none";

}
</script>
</center></div>

Dari script di atas kita akan kupas tentang fungsi Javascript code tersebut sekilas saja selebihnya bisa di pahami sendiri atau bisa belajar di.

Belajar javascript code pemula dan master

Oke kita mulai dari fungsi ini. 

<audio id="myAudio">
<source src="music.mp3" type="audio/mpeg">
</audio>

Adalah sebuah fungsi Javascript code untuk menainkan mp3 player saat fungsion playAudio() di mainkan.

<button onclick="nol();">Reset</button>

Adalah fungsional untuk mereset dengan methode javascript dengan value nol.

<button style="display:none" id="modal2" onclick="pauseAudio();">Pause</button>

Untuk mempause audio saat aplikasi music di mainkan.

Intinya script di atas adalah conter berjalan saat di fungsikan kemudian berhenti dengan set finish kemudian menampilkan button play kemudian memainkan play audio tersebut.

Sebenarnya tehnik counter bisa jugs menggunakan fungsi xml project java sengaja saya membahas hanya menggunakan fungsi javascript sederhana untuk lebih memudahkan saat kita dalam memhami code karena memang javascript versi lama lebih familier dan sudah sering kita gunakan

Jangan lupa setting webview agar support Javascript code seperti ini.

webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/index.html");

Taruh kode tersebut di atas menu webview

Kalau ga paham boleh lihat pada tutorial sebelumnya.

jangan lupa untuk memasukkan file music.mp3 di dalam folder assets

Kemudian pak project aplikasi yaitu build > pack > install > buka, untuk hasilnya dari Javascript counter alarm android tersebut bisa dilihat pada gambar di bawah ini.

Contoh image counter aplikasi bikinan kitcreator javascript

App counter creator

Demikian tutorial android project counter semoga bermanfaat untuk anda  dan bisa menambah perbendaharaan code - code aplikasi tersebut salam creator android app.

Share this

Author : admin

Related Posts