2015-09-01

Tutorial: Android Studio Mobile Web, Webview HTML5, CSS, Content Web Service (Json & Ajax), jQuery Mobile

Berikut adalah tutorial untuk mengembangkan aplikasi Android dengan pendekatan web. Pada kesempatan kali ini, akan dibahas bagaimana membuat sebuah halaman web yang responsive (dimana tampilan halaman web akan disesuaikan dengan ukuran layar device), dan mengoperasikan perintah-perintah tertentu dengan menggunakan Jquery Mobile. Berikut tutorialnya:
  1. Buka Android Studio, Click File, New Project
  2. New Project
  3. Beri nama Project Anda, misalkan Demo, kemudian tekan Next
  4. Application Name, Company Domain
  5. Pilih versi API 17 yaitu Jelly Bean klik Next
  6. Minimum SDK Version
  7. Pilih Blank Activity, klik Next
  8. Blank Activity
  9. Ketikkan Activity Name, Layout Name, dan juga Title, klik Finish
  10. Activity Name, Layout Name, Title
  11. Buatlah satu tombol untuk menambahkan notifikasi pada Layout MainActivity, berikut source code activity_main.xml:
  12. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        tools:ignore="MergeRootFrame">
    
    <WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    </FrameLayout>
    


  13. Tambahkan sebuah webview, beserta perintah untuk membuat javascript enabled pada MainActivity. Berikut source code MainActivity.java:
  14. import android.support.v7.app.ActionBarActivity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    
    public class MainActivity extends ActionBarActivity {
        private WebView mWebView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mWebView = (WebView) findViewById(R.id.activity_main_webview);
            // Enable Javascript
            WebSettings webSettings = mWebView.getSettings();
            webSettings.setJavaScriptEnabled(true);
            mWebView.loadUrl("file:///android_asset/www/index.html");
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
        
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
            int id = item.getItemId();
            if (id == R.id.action_settings) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }
    


  15. Tekan alt+enter jika terdapat pesan kesalahan karena ada library yang belum di import
  16. Import Library
  17. Buatlah sebuah directory assets/www pada folder main
  18. New Directory pada main
    beri nama directory assets/www


  19. Buat file index.html pada folder tersebut, Aplikasi ini akan menggunakan json yang diperoleh dari http://www.openweathermaps.org/. Berikut source codenya:
    • javascript.js
    • Date.prototype.ConverterLocaleString = function() {
        var customDate = this.toLocaleString();
        if (typeof Date.prototype.toLocaleFormat == 'function') {
          customDate = this.toLocaleFormat();
        } else {
          customDate = this.toTimeString();
        }
        
        var localeStringEnd = customDate.search(/GMT/i);
        if (localeStringEnd > 0) {
          customDate = customDate.substring(0, localeStringEnd);
        }
        return customDate;
      }
      
      function convertTime(inputtext) {
        var outputtext = "";
        if (inputtext >= 100000000000000) {
          inputtext = Math.round(inputtext / 1000);
        } else {
          if (inputtext > 10000000000)
            extraInfo = 1;
          inputtext = (inputtext * 1000);
        }
        var datum = new Date(inputtext);
        if (isValidDate(datum)) {
          outputtext += datum.ConverterLocaleString();
        } else {
          outputtext += "Sorry, can't parse this date.
          Check your timestamp, strip letters and punctuation marks.";
        }
        return outputtext;
      }
      
      function isValidDate(d) {
        if (Object.prototype.toString.call(d) !== "[object Date]")
          return false;
        return!isNaN(d.getTime());
      }
      
      function find(result) {
        var temp = (result.main.temp - 273.15).toFixed(2);
        $("#city").text(result.name + ', ' + result.sys.country).css("font-weight", "Bold");
        $("#temp").html('<img src="http://openweathermap.org/img/w/' + result.weather[0].icon + '.png" />' + temp + '°C');
        $("#extra").text(result.weather[0].main);
        $("#wind").html(result.wind.speed + ' m/s
          (' + result.wind.deg + '°)');
        $("#cloud").text(result.weather[0].description);
        $("#pressure").text(result.main.pressure + ' hpa');
        $("#humidity").text(result.main.humidity + ' %');
        $("#sunrise").text(convertTime(result.sys.sunrise));
        $("#sunset").text(convertTime(result.sys.sunset));
        $("#latlon").html('<a href="http://openweathermap.org/Maps?zoom=12&lat%27%20+%20result.coord.lat%20+%20%27&lon=%27%20+%20result.coord.lon%20+%20%27.63&layers=B0FTTFF">[' + result.coord.lat + ',' + result.coord.lon + ']</a>');
        $("#result").show();
      }
      
      $(document).on("pagecreate", "#weather", function() {
        $("#search-1").keydown(function(event) {
          if (event.which == 13) {
            var query = $("#search-1").val();
            $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + query,function(result){
              find(result);
            });
          }
      });
      
      $("#find").click(function() {
        var query = $("#search-1").val();
          $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + query,function(result){
            find(result);
          });
        });
      });
      
      $(document).on("pagecreate", "#gesture", function() {
        // Navigate to the next page on swipeleft
        $("#gesture").on("swipeleft", function() {
          $(":mobile-pagecontainer").pagecontainer("change", "#about", {
            transition: "slide"
          });
        });
      });
      
      $(document).on("pagecreate", "#about", function() {
        // Navigate to the next page on swiperight
        $("#about").on("swiperight", function() {
          $(":mobile-pagecontainer").pagecontainer("change", "#gesture", {
            transition: "slide",
            reverse: true
          });
        });
      }
      );

    • index.html
    • <!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Weather Check</title>
      <link rel="stylesheet" href="themes/PAPB-C-04.min.css" />
      <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      <script src="javascript.js"></script>
      
      </head>
      <body>
      <div id="home" data-role="page">
      <div class="ui-header ui-bar-a" data-swatch="a" data-theme="a" data-form="ui-bar-a" data-role="header" role="banner">
      <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Home</h1>
      </div>
      
      <div data-role="main" class="ui-content" data-theme="a">
      <a href="#weather" data-theme="a" class="ui-btn ui-corner-all" data-transition="pop">Weather Info</a>
      <a href="#gesture" data-theme="a" class="ui-btn ui-corner-all" data-transition="pop">Gesture Test</a>
      </div>
      
      <div data-role="footer" data-theme="a" data-position="fixed" role="contentinfo" data-tap-toggle="false">
      <h4 aria-level="1" role="heading">Kelompok 10</h4>
      </div>
      </div>
      
      <div id="weather" data-role="page">
      <div data-role="header" data-theme="b" data-position="fixed" >
      <h1>Weather</h1>
      <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="slide" data-direction="reverse">Home</a>
      </div>
      <div data-role="main" data-theme="b" class="ui-content">
      <input type="search" name="search-1" id="search-1" placeholder="City Name">
      <button data-icon="search" id="find">Search</button>
      </div>
      
      <div data-role="content" data-theme="b" id="result" style="display:none;">
      <center><h4 id="city"></h4>
      <h4 id="temp"></h4>
      <p id="extra"></p></center>
      <table class="table table-striped table-bordered table-condensed" id="tableinfo"
      border="1">
      <tbody>
      <tr><td>Wind</td><td id="wind"></td></tr>
      <tr><td>Cloudiness</td><td id="cloud"></td></tr>
      <tr><td>Pressure</td><td id="pressure"></td></tr>
      <tr><td>Humidity</td><td id="humidity"></td></tr>
      <tr><td>Sunrise</td><td id="sunrise"></td></tr>
      <tr><td>Sunset</td><td id="sunset"></td></tr>
      <tr><td>Geo coords</td><td id="latlon"></td></tr>
      </tbody>
      </table>
      </div>
      
      <div data-role="footer" data-theme="b" data-position="fixed" role="contentinfo" data-tap-toggle="false">
      <h4 aria-level="1" role="heading">&copy; Kelompok 10</h4>
      </div>
      </div>
      <div id="gesture" data-role="page">
      <div data-role="header" data-theme="b" data-position="fixed" >
      <h1>Gesture Test</h1>
      <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="slide" data-direction="reverse">Home</a>
      </div>
      <div data-role="main" class="ui-content" id="swipe" data-theme="b">
      <h4>Swipe to Left to open ABOUT Page</h4>
      </div>
      <div data-role="footer" data-theme="b" data-position="fixed" role="contentinfo" data-tap-toggle="false">
      <h4 aria-level="1" role="heading">&copy; Kelompok 10</h4>
      </div>
      </div>
      <div id="about" data-role="page">
      <div data-role="header" data-theme="b" data-position="fixed" >
      <h1>About</h1>
      <a href="#home" class="ui-btn ui-icon-home ui-btn-icon-notext ui-corner-all" data-transition="slide" data-direction="reverse">Home</a>
      </div>
      <div data-role="main" data-theme="b">
      <center><h4 role="heading" style="font-weight:bold;">Aplikasi ini dibuat oleh Kelompok 10</h4>
      <h4>Anggota:</h4>
      <h4>Fadel Trivandi D 115090607111027</h4>
      <h4>Mikko Saifudin A S 115060801111092</h4>
      <h4>Romi Alfian 125150201111065</h4>
      <h4>Fajar Aries I 125150207111029 </h4>
      <h4>&copy; 2014</h4><br />
      <h4>Swipe Right to Back</h4></center>
      </div>
      <div data-role="footer" data-theme="b" data-position="fixed" role="contentinfo" data-tap-toggle="false">
      <h4 aria-level="1" role="heading">&copy; Kelompok 10</h4>
      </div>
      </div>
      </body>
      </html>

  20. Untuk tampilan, css yang digunakan adalah bootstrap, dan juga css yang di peroleh dari http://themeroller.jquerymobile.com/. Folder Theme:
  21. themeroller jquerymobile
  22. Tambahkan Permission untuk mengakses internet pada android manifest
  23. <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.fadeltd.papb_c_04" >
    
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name" >
    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    
    <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    </activity>
    </application>
    
    <uses-permission android:name="android.permission.INTERNET" />
    
    </manifest>
    
    uses permission
  24. Aplikasi mobile siap dijalankan, baik langsung pada mobile, atau melalui emulator AVD (Android Virtual Device), berikut hasilnya
Tampilan Output
Recent Search Terms:
  1. Android Studio
  2. Android Programming
  3. Android Mobile Web View
  4. Android Mobile Web View
  5. Mobile Service
Related Search Keywords:
  1. Ajax
  2. Android
  3. CSS
  4. HTML5
  5. JQuery
  6. JSON
  7. Tutorial
  8. Webview

2014-07-17

Kenyataan-kenyataan Menyebalkan Tentang Sistem Berpacaran Modern Yang Harus Dihadapi

Kali ini gue mau ngomongin soal pacaran masa kini alias pacaran modern, yang sebenernya menurut gue kadang lumayan lucu. Gue mengutip artikel yang ditulis oleh: Christopher Hudspeth dan dimuat disini terus apa yang sih lucunya pacaran jaman sekarang ini? Ya bisa di baca sendiri sih dibawah ini. Yang jelas ya beda banget lah sama pacaran jaman dulu, dimana ga ada socmed, ga ada hape buat textingan, sekali janji mau dateng ya dateng, telat di tungguin, hujan di tungguin, berharap pacar bakal nepatin janjinya, gak yang kalo janjian terus telat 5 menit aja udah di telfonin, di sms in, di whatsapp in, di line in, dan sejenisnya lah.  But, that's the truth you have to deal with :)



  1. Orang yang lebih ga peduli yang menang. Gak bakal ada yang mau jadi orang yang lebih tertarik atau lebih peduli. Coba aja liat pacaran jaman sekarang, pasti kalo ada yang ga peduli bakal lebih bisa minta pacarnya hal-hal yang aneh, karena pasti pacarnya khawatir bakal ga di peduliin.
  2. Karena pengen nunjukin betapa menjengkelkannya lo ketika lo lagi bosan sama dia, akan terjadi permainan psikologis seperti 'sengaja menunggu berjam-jam atau bahkan berhari-hari untuk membalas sms'. Dan itu kan ngeselin banget. 
  3. Orang yang keliatan riang karena ga tertarik sama sekali sama lo keliatan sama persis dengan orang yang keliatan riang karena mereka pikir lo itu keren banget dan tetap bersikap tenang. Semoga aja sih bisa bedain keduanya.
  4. Nelpon itu udah menjadi seperti hal yang tabu. Sebagian besar pacar lebih memilih untuk berkomunikasi memalui teks, kaya lewat sms atau chat. Intinya sekarang, lo harus bisa lebih memahami emoticon.
  5. Ga ada rencana yang pasti. Kebanyakan orang memiliki banyak pilihan yang bisa berubah setiap menitnya tergantung pada lokasi temannya (atau calon gebetannya) yang bisa diliat di social media. Kalau memang lo ga ada di posisi paling atas pada prioritas kepentingan mereka, ajakan lo buat ngajak mereka jalan mungkin cuma bakal ditanggepin "mungkin" atau "nanti ya gue kabarin lagi" dan juga hal-hal yang menurut mereka lebih menarik atau lebih menyenangkan daripada tawaran lo, kaya misalnya "sori ya gue dah ada janji".
  6. Seseorang yang nyakitin lo ga secara otomatis akan memiliki karma buruk. Setidaknya nggak dalam waktu dekat. Mungkin itu emang terasa adil kalau karma buruk terjadi, tapi seringkali kita bisa liat orang yang suka bohong dan selingkuh bisa move on dan hidup bahagia, sementera orang yang ditinggal hidup menyedihkan.
  7. Satu-satunya perbedaan antara romantis dan menyeramkan adalah bagaimana dan mengapa orang lain menganggap lo menarik. Itu saja, hanya itu saja.
  8. Pesan yang lo kirim. Kalo lo ga nerima respon, bisa jadi itu bukan kesalahan providernya, kecuali lo ga punya pulsa :)
  9. Terlalu banyak orang yang takut akan komitmen dan meresmikan hubungannya. Banyak orang yang lebih suka untuk tetap memiliki hubungan tanpa status. Padahal ini hanya akan menimbulkan garis kabur. Sebagian orang mungkin bilang - "kita cuma chatting kok" sama pacar, padahal hal itu bisa menjadi sebuah pintu yang lebar terbuka buat sebuah perselignkuhan, tapi ya gak selingkuh juga, karena, ya, mereka ga bener lagi bersama, "bersama".
  10. Social media cuma bikin godaan dan kesempatan buat selingkuh. Ada menu message di facebook, atau direct message di twitter yang bisa dipake. Orang bisa modus secara terselubung dan bikin orang lain geer melalui like status/foto di facebook, atau retweet di twitter, yang sebenernya ga bisa dijadiin bukti yang kuat sebagai sebuah perselingkuhan, tapi jelas-jelas hal itu dapat menambahkan kemungkinan perselingkuhan itu terjadi.
  11. Sosial media nggak lagi menjadi sebuat media yang hanya bisa menghubungkan diri lo dengan teman-teman dan keluarga lo, melainkan jadi kaya menu yang isinya daftar orang-orang menarik yang bisa lo pilih.
  12. Lo ga bisa bener-bener tau sifat orang yang sebenernya seperti apa sebelum lo bener-bener menjalin hubungan dengan dia. Sebagian besar orang takut, dengan menjadi dirinya sendiri diluar akan menunjukan bahwa dia terlalu available, terlalu cemas, terlalu nerd, terlalu baik, terlalu aman, terlalu membosankan, tidak cukup lucu, tidak begitu cantik, tidak seperti orang lain yang perlu dirangkul.
  13. Siapapun yang pernah terlibat hubungan asmara dengan lo bisa jadi orang bersama lo selamanya atau putus pada suatu titik. Sebenarnya ini adalah konsep yang sama menakutkannya.
  14. Saat berpacaran, dibandingkan dengan secara langsung mengungkapkan apa yang pacar lo rasakan, pacar akan lebih memilih untuk mengirimkannya melalui status facebook atau Instagram. Pacar akan lebih suka membuat sebuah post di Tumblrnya, sebuah foto sunset dengan quote atau suatu lrik lagu, walaupun nama lo ga tertulis disitu, jelas banget kalo tulisan itu emang buat lo.
  15. Ada banyak orang yang ga bisa menghormati hubungan lo, kebanyakan orang bakal cuek aja, dan ada orang yang mau ngerebut pacar lo, mereka ga bakal ragu dan bisa aja ngelampaui batas buat bisa ngerebut pacar lo dari lo.
  16. Ketika putus, bisa jadi kelanjutannya cukup mengerikan. Biasanya pacar bisa mereject setiap telepon yang masuk, block semua akun media social, menghindar buat ketemuan, melarikan diri walau secara ga sengaja cuma ketemu dijalan. Dan yang paling nyebelinnya lagi, jaman sekarang orang gampang aja buat mutusin pacarnya lewat a simple phone call, atau bahkan cuma dengan pesan panjang yang di kirim lewat chat atau hape, dan voila, putus gitu aja. Iya gitu aja, segampang itu, yang ribet malah pas harus menghapus semua foto, dan balikin semua status di media social jadi single lagi.


Sometimes gue bingung dengan hal-hal yang terjadi ini, dan gue bener-bener pernah ngerasain hampir semua hal ini terjadi. Ketika lo pedekate, yang lo liat itu orang lain, dan lo juga jadi orang lain, ga banyak orang yang berani buat jadi diri sendiri ketika pedekate, lo bakal bener-bener lebih berhati-hati dengan sikap lo sama doi karena khawatir doi bakal illfeel sama lo bahkan sebelum lo jadian, dan lo ngerasa semua hal yang dilakuin sama doi itu bener, padahal ketika pacaran ada hal yang lo gak suka dari doi. Lo bener-bener ga bisa ngeliat kelakuan dan sifat asli seseorang sebelom lo menjalin hubungan.

Ketika lo lebih ga peduli, lo menang, ketika lo bisa nunjukin lo bakal nyebelin ketika lo lagi bete, pacar lo pasti bakal ngalah sama lo. Padahal gue tau kalo emang lagi sama-sama butuh, tapi ga ada yang mau ngomong duluan. Dan biasanya malah lebih suka buat update status di facebook, ngetweet, dan beberapa sampe bikin posting di tumblr dengan quote yang rada-rada galau. Ini aneh banget tau gak sih. Apa coba susahnya ngomong? Kalo butuh sesuatu ngomong. Kalo minta sesuatu ngomong. Kalo ga suka sesuatu ngomong.

Pacaran jadi kaya labirin, udah nyari jalan keluar susah, tiap simpangan lo harus bisa jawab tebak-tebakan juga lagi. "Kamu bete? Bete kenapa?" Dan lo berada pada sebuah game riddle, dimana lo harus nyari tau di social media, dan nebak-nebak sebenernya doi kenapa, sambil nyoba nyimpulin sendiri.
Hottest love has the coldest end. Ketika lo emang sayang sama seseorang harus nya lo lebih berani buat jagain doi, dibandingkan dengan macarin doi yang cuma dilandasin sama nafsu, karena semua orang jaman sekarang tau, when you start one relationship, you also end one. Ga banyak orang yang masih bisa bertemen setelah putus. Ketika lo jalin hubungan sama orang, lo juga harus mikirin, gimana jadi nya ketika lo udah putus nanti.

Social media udah jadi sebuah media yang memberi pengaruh buruk terhadap suatu hubungan, lo bisa tau dimana lokasi doi, doi ol lewat apa, dan lain sebagainya. Efek sampingnya bener-bener mengkhawatirkan, media yang seharusnya bisa jadi tempat buat lo berhubungan sama temen dan keluarga lo udah jadi tempat buat milih orang, kaya lagi milih menu makanan di restoran.

Pesen dari gue sendiri sih, when you're about to start a relationship, you have to think it over and over and over again. Lo juga harus mikir, gimana kelanjutannya nanti seandainya lo harus break. Don't start something you don't know how to finish. Pikirin ending yang lo pengenin, jalanin proses sesuai dengan tujuan awal lo, dan kalo emang lo rasa menyimpang dari tujuan lo yang sebenarnya, kalo emang ga bisa di lurusin lagi, ya jangan di terusin sebelum menyimpang lebih jauh lagi. It's just like, lo gak mungkin kan naik angkot tapi lo gak tau lo sebenernya mau kemana? :)

Pacaran itu kaya naik angkot, kalo lo nyasar, lo harus siap berhentiin supir angkotnya di tengah perjalanan, kalo nunggu nyampe dulu, kan udah nyasar terlalu jauh, butuh waktu lebih lama kan buat balik ke terminal tempat lo naik angkotnya.

2013-02-17

Last Time Equation

I just realized that break-up doesn't always mean that you have to stop loving each other..
It just means that you would stop hurting each other..