0

0

0

share

#tutorial#tutorial#video#video
0 Reaksi

0 Komentar

Membuat Aplikasi Tizen Konversi Suhu (Video Tutorial)

Profile
Irman Firmansyah•

25 Agustus 2017

Membuat Aplikasi Tizen Konversi Suhu (Video Tutorial)

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 = "";
}

0

0

0

share