Membuat Aplikasi Tizen Konversi Suhu (Video Tutorial)

Ditulis oleh Irman Firmansyah, dipublikasi pada 25 Aug 2017 dalam kategori Tutorial
Membuat Aplikasi Tizen Konversi Suhu (Video Tutorial) - CodePolitan.com

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


Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.