Membuat Aplikasi Tizen Konversi Suhu (Video Tutorial)
Irman Firmansyah 25 Agustus 2017
Sebelum masuk ke tutorial, berikut ini merupakan beberapa pertanyaan yang mungkin ditanyakan terkait dengan tutorialnya:
FAQ
Q: Tools apa saja yang digunakan?
A: Tizen Studio
Q: Dimana saya bisa download icon (asset) nya?
A: Download disini https://drive.google.com/file/d/0B_efWKyfdfcSdnRJWjlIZWdZTUk/view?usp=sharing
Q: Kenapa pada saat membuat project tidak ada pilihan "TAU Single Page"?
A: Lakukan instalasi library TAU terlebih dahulu, lihat bagian "Instalasi TAU di IDE" pada link ini https://www.codepolitan.com/membuat-aplikasi-tizen-berbasis-html5
Q: Dimana saya bisa lihat script asli nya?
A: Lihat di bawah artikel ini
Q: Saya tidak bisa lihat videonya karena buram/resolusi kecil?
A: Lihat video nya secara fullscreen, atau lihat di YouTube dengan resolusi lebih tinggi (video ini support sampai 720p)
Q: Saya boleh download videonya?
A: Silahkan, asal jangan diperjualbelikan :)
Q: Bagaimana cara downloadnya?
A: Search di google dengan kata kunci "cara download video youtube", banyak tutorialnya
Q: Saya sudah siap mengikuti tutorialnya nih
A: Mantap, silahkan lanjutkan videonya ada dibawah
Tutorial
Script
Script file style.css
.ui-header > .ui-title-text-main {
margin-top: 14px;
margin-left: 15px;
font-size: 22px;
}
.ui-mobile .ui-page {
background-color: white;
background-image: none;
}
h4 {
margin: 10px;
}
.content {
margin: 5px;
}
.button-padding {
margin: 10px;
}
.btn-icon-info::after {
-webkit-mask-image: url(images/info.png);
}
.btn-icon-back::after {
-webkit-mask-image: url(images/back.png);
}
.content-detail {
margin-left: 20px;
}
Script file index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<div class="ui-page" id="main">
<div class="ui-header">
<div class="ui-title-text-main">Konversi Suhu</div>
<a id="btnAbout" class="ui-header-btn ui-header-btn-right ui-header-btn-icon btn-icon-info"></a>
</div><!-- /header -->
<div class="ui-content">
<div class="content">
<h4>Celsius</h4>
<input onkeyup="suhu('C')" id="c" type="number" placeholder="Input celsius">
<h4>Fahrenheit</h4>
<input onkeyup="suhu('F')" id="f" type="number" placeholder="Input fahrenheit">
<h4>Kelvin</h4>
<input onkeyup="suhu('K')" id="k" type="number" placeholder="Input kelvin">
<div id="btnReset" class="ui-btn button-padding">Reset</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div class="ui-page" id="about">
<div class="ui-header">
<h1>Tentang</h1>
<a id="btnBack" class="ui-header-btn ui-header-btn-left ui-header-btn-icon btn-icon-back"></a>
</div><!-- /header -->
<div class="ui-content">
<div class="content">
<h4>Konversi Suhu</h4>
<div class="content-detail">Versi 1.0.0</div>
<h4>Dibuat Oleh</h4>
<div class="content-detail">Irman Firmansyah</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
Script file main.js
( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName === "back" ) {
var activePopup = document.querySelector( '.ui-popup-active' ),
page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" && !activePopup ) {
try {
tizen.application.getCurrentApplication().exit();
} catch (ignore) {
}
} else {
window.history.back();
}
}
} );
} () );
var c = document.getElementById("c");
var f = document.getElementById("f");
var k = document.getElementById("k");
var btnReset = document.getElementById("btnReset");
var btnAbout = document.getElementById("btnAbout");
var btnBack = document.getElementById("btnBack");
btnReset.addEventListener("click", function() {
clear();
});
btnAbout.addEventListener("click", function() {
tau.changePage('about');
});
btnBack.addEventListener("click", function() {
window.history.back();
});
function suhu(degree) {
var x;
var y;
if (degree == "C") {
if (c.value !== "") {
x = c.value * 9 / 5 + 32; //rumus celsius ke fahrenheit
f.value = x.toFixed(1); //hasil konversi tampilkan ke input fahrenheit dan bulatkan satu angka di belakang koma
y = (c.value * 1) + 273.15; //rumus C ke K
k.value = y.toFixed(1);
}else{
clear();
}
} else if (degree == "F") {
if (f.value !== "") {
x = (f.value - 32) * 5 / 9; // rumus F ke C
c.value = x.toFixed(1);
y = (f.value * 1 + 459.67) * (5 / 9); //rumus F ke K
k.value = y.toFixed(1);
}else{
clear();
}
} else {
if (k.value !== "") {
x = (k.value * 1) - 273.15; //rumus K ke C
c.value = x.toFixed(1);
y = k.value * (9 / 5) - 459.67; //rumus K ke F
f.value = y.toFixed(1);
}else{
clear();
}
}
}
function clear() {
c.value = "";
f.value = "";
k.value = "";
}