Hosting PHP Gratisan Dengan Heroku

Apa itu heroku?

Heroku adalah web hosting berbasis Cloud yang biasanya digunakan untuk mengembangkan web app menggunakan beragam bahasa pemrograman termasuk PHP. Aku tahu heroku saat akan membuat aplikasi facebook, disitu terdapat penawaran untuk menggunakan jasa heroku bagi app yang akan kita buat. Awalnya aku bingung, ini gimana cara kerjanya ya?. Ehm, pada dasarnya menggunakan layanan heroku tidaklah sulit bahkan dapat dikatakan gampang, namun bagi orang yang baru kenal menggunakan layanan heroku akan terasa membingungkan. Pada post ini akan membahas dari awal bagaimana mendeploy app PHP di heroku dan melakukan manajemen file yang ada didalamnya.

Mulai Menggunakan Heroku (Windows)

Aku asumsikan kamu sudah terdaftar di heroku, jika belum silakan daftar disini: https://api.heroku.com/signup. Setelah itu kamu perlu mendownload heroku-toolbelt di https://toolbelt.heroku.com/. Setelah heroku-toolbelt diinstal seharusnya akan ada menu baru di Context Menu (menu yang muncul saat kamu klik kanan Explorer atau Desktop) yaitu "Git Init Here", "Git Gui" dan "Git Bash". Anggap saja kamu punya sebuah aplikasi PHP di folder manapun (biasanya di htdocs). Klik kanan di jendela Explorer lalu pilih menu "Git Bash".

Akan muncul kotak console. Lalu ketikkan perintah berikut:

$ heroku login

tanda $ akan muncul sendirinya jadi kamu cukup mengetik "heroku login" saja. Setelah itu masukkan email dan password untuk login di heroku (sama saat kamu login di halaman webnya heroku). Tampilan yang muncul kira-kira seperti ini (jika kamu login pertama kali mungkin beda sedikit tapi yang penting sukses autentifikasi).

Deploy App dan Menggunakan Git

Selanjutnya kita akan membuat subdomain di heroku, sekaligus tempat bagi aplikasi yang akan kita buat. Caranya adalah dengan mengetikkan perintah:

$ heroku create nama_app --stack cedar

"nama_app" bisa kamu ganti apapun, jika kamu tidak menentukannya maka heroku akan mengenerate otomatis untukmu. saat berhasil dibuat maka akan muncul keterangan alamat URL dari sub domain kita dan alamat dari git repository. Konsep dasarnya adalah: ada dua git yang kita gunakan, satu git yang ada di komputer lokal kita dan git remote yang ada di server heroku. Git ini akan mencatat perubahan susunan file, apa yang diedit, dihapus atau ditambah, sehingga file yang ada dikomputer kita akan selalu sama dengan yang diserver. Pencatatan seperti ini sangat berguna jika kita bekerja membuat project bekerja sama dengan orang lain.

Misalkan aku membuat project bersama programmer A, aku bisa mencopy (download) semua file yang ada diserver dengan perintah git clone. Lalu saat aku mengedit di komputer lokal dan mengupload ke server aku selalu memberi semacam "tanda" perubahan apa saja yang aku lakukan dengan perintah git commit. Programmer A pasti tidak akan kebingungan saat melihat ada perubahan karena dia bisa melihat apa saja yang aku lakukan pada project tersebut berdasarkan commit yang aku buat.

Sekarang aku sudah punya git di server heroku yaitu "git@heroku.com:nama_app.git" dan git ini masih kosong (iya lah, kan masih baru dibuat). Terus ada beberapa file PHP yang akan aku upload ke server dan sudah aku letakkan di folder htdocs, maka untuk itu aku harus membuat juga git di komputerku dengan perintah:

$ git init

kamu akan melihat ada folder .git tersembunyi di dalam folder htdocs. Setelah itu kita update git lokal kita dengan perintah:

$ git add .

ini akan menambahkan semua file disitu. kalau ingin menambah satu file maka perintahnya: $ git add namafile.ext. Saat kamu selesai mengedit suatu file maka kamu harus memanggil perintah git add agar git di lokal tahu bahwa file kita berubah. Setelah di add selanjutnya kita memerintahkan agar git mencatat semua perubahan yang kita buat dengan perintah:

$ git commit -am "keterangan perubahan"

oh iya, untuk menghapus kita gunakan git rm. Setelah perintah "git commit" digunakan berarti git lokal kita sudah terupdate, sekarang waktunya meng-uptodate git di server heroku. Kita beritahu dulu git remotenya ada dimana dengan perintah:

$ git remote add heroku git@heroku.com:nama_app.git

setelah itu saatnya mengupload dengan perintah:

$ git push heroku master

Catatan: setelah ini kamu bisa membuang kata-kata "master" dan ada satu hal lagi yaitu pastikan bahwa ada satu file "index.php" di folder kerjamu.

$ git push heroku

Seperti itulah, mudah kan?. Jadi kalau mengedit atau menambah file tinggal di git add, menghapus file tinggal di git rm, atau kalau males tinggal git add . lalu terakhir di git commit agar git kita terupdate. Setelah semua oke baru digunakan git push untuk menyimpan file kita ke server sekaligus menyamakan git lokal dengan git server. Demikianlah posting kali ini, semoga bermanfaat, dan Happy Coding.

Jika tertarik melihat hasil ujicobaku di heroku berdasarkan kode di http://nazoftware.blogspot.com/2012/08/belajar-yql.html (dengan sedikit modifikasi), bisa dilihat disini: http://nazoftware.heroku.com

Belajar Cepat Bahasa Pemrograman Ruby

Awalnya karena tidak sengaja. Aku menginstall heroku-toolbelt untuk membuat apps di facebook. Waktu aku lihat ternyata setelah instalasi ada tiga folder baru di "C:\Program Files" yaitu Git, Heroku dan ruby-1.9.2. Karena penasaran, kucoba buka folder ruby tersebut. Setelah itu, folder bin didalamnya yaitu: "C:\Program Files\ruby-1.9.2\bin" dimasukkan ke Environtment Variables seperti di gambar ini:

Setelah itu aku bingung, mulai darimana dulu belajarnya?. Beruntungnya, saat mencari sesuatu yang bisa dibaca di folder "C:\Program Files\ruby-1.9.2\doc" ada sebuah file dengan nama "bookofruby.pdf". Aha, ini dia... Oke, kita mulai belajar Ruby dengan cepat :D

Program Sederhana (Tingkat Pemula)

Semua bahasa pemrograman di tutorialnya pasti diawali dengan membuat program "Hello World", nah karena di ruby bikin program "Hello World" cuma butuh satu baris :D, maka aku buat program yang "agak" rumit. Programmnya akan meminta inputan nama lalu langsung ditampilkan. Ini programmnya:

print "Masukkan namamu: "
nama = gets
puts "Selamat datang #{nama}"

Simpan di folder manapun sesukamu lalu diberi nama "coba.rb" (kata coba bisa diganti apapun, yang penting extensionnya .rb). Disini aku menggunakan Console (cmd) untuk mengeksekusi file ruby. Kalau gak salah sebenarnya bisa pake irb tapi bagusan kayak gini kayaknya. Nah, outputnya seperti ini:

Lihatlah betapa simpel dan mudahnya membuat output yang kalau di C++ atau Java butuh beberapa baris tambahan (include lah, int main lah, public class lah,..). Di ruby tipe data tidak perlu ditentukan dulu karena secara dinamis ruby akan menentukan sendiri type data dari variabel tersebut. Kita tidak perlu menulis string nama = "" untuk membuat variabel nama dengan tipe data string. Untuk output kita bisa menggunakan print (tidak ada pindah baris setelah teks) atau puts (pindah baris). Seperti di PHP, variabel dalam double qoute akan diterjemahkan, bedanya kalau di PHP variabelnya dengan tanda $ sedangkan di ruby dengan #{namavar} (*agak ribet juga nulisnya..)

Program Menghitung Diskon (Tingkat Menengah :D)

Sekarang kita akan membuat program yang sedikit agak panjang yang fungsinya sebagai alat penghitung sekaligus menggunakan beberapa fungsi struktur kendali seperti if (iya, if saja :)

puts "Masukkan harga barang: "
harga = gets.to_f
puts "Masukkan diskonnya (dalam persen): "
diskon = gets.to_f
# jika harga yang dibawah 0
if (harga <= 0) then
puts "Apa yang mau dihitung kalau 0? >:("
else
puts "Total yang harus dibayar adalah #{harga - ((harga * diskon)/100)}"
end

Tampilannya seperti ini:

Ada hal baru disitu yaitu pas baris kedua kita harus melakukan type casting agar input menjadi float dengan perintah .to_f. Untuk menuliskan komentar satu baris di ruby menggunakan tanda # diawal baris. Kode diatas juga memiliki struktur kendali if else. Sesuai dengan judul posting ini yaitu "Belajar Cepat Bahasa Pemrograman Ruby" maka postingnya aku akhiri dulu (*cepat kan...). Jika kamu penasaran ingin lebih tau pemrograman dengan ruby coba baca file "bookofruby.pdf" yang ada di folder "C:\Program Files\ruby-1.9.2\doc". Happy Coding :D

Membangun Facebook Apps di Localhost

Pernahkan kamu menggunakan aplikasi di fb seperti bermain game (poker, cityville, dsb), zodiak harian, random ayat, dsb? pasti pernah kan. Apa kamu terpikir untuk membuat sebuah aplikasi di facebook sendiri, karyamu sendiri, entah game, tebak-tebakan atau sekedar iseng berisi fotomu saja :). Kalau sudah terpikirkan lalu pasti muncul pertanyaan, "bagaimana membuatnya?", "susah tidak?".

Sebenarnya untuk membuat aplikasi yang "sesungguhnya" yang bisa diakses orang banyak, kamu perlu web hosting yang mendukung https, sebagai canvas dari aplikasi yang akan kamu buat. Untuk mendapatkannya kamu harus beli atau bisa juga menggunakan layanan hosting gratisan. Tapi jangan khawatir, intinya ada niat dulu, urusan lain belakangan, bisa diakali :D. Di tulisan ini masih belum menggunakan layanan hosting (baik bayar atau gratis) karena kita akan belajar membangun aplikasi facebook hanya di komputer lokal saja.

Untuk membuat aplikasi yang harus online seperti facebook apps agak meribetkan, biasanya dan seringkali kamu harus mengupload file editan terbaru berkali-kali hanya untuk memperbaiki sedikit kesalahan. Disamping nantinya kesulitan dalam menelusur versi aplikasi, pekerjaan edit lalu upload ke server bisa menjadi hal yang menjengkelkan dan melelahkan. Nah, di tulisan ini kita akan membuat apps di facebook yang dibangun pertama di server lokal komputer kita dulu (*tapi dapat semua fitur dari facebook), dan tentu saja setelah aplikasi selesai kita harus menguploadnya ke server agar dapat diakses oleh orang lain secara online.

Disini bahasa pemrograman yang dipakai adalah PHP. Jika kamu belum tahu apa itu PHP maka kamu perlu googling sebentar dan mencari tahu apa itu PHP, lalu buat program sederhana dengan PHP, baru balik kesini lagi :D. Singkatnya PHP adalah script (program) yang berjalan di server yang bertugas melayani request dari client. Tidak perlu mahir PHP atau jadi programmer top untuk membuat aplikasi di fb, tapi dengan pengetahuan PHP yang cukup akan dapat meringankan tugasmu dalam membangun aplikasi di facebook.

Yang kamu butuhkan untuk mengikuti cara pembuatan fb apps di tulisan ini adalah kamu harus memiliki:
1. web server yang terinstall di komputermu (aku menggunakan Apache dalam paket XAMPP), dengan PHP yang memiliki modul curl enabled.
2. akses internet pastinya,
3. dan sedikit pengetahuan PHP seperti yang aku bilang sebelumnya.

Daftarkan Aplikasi ke Facebook

Pertama kali kamu harus mendaftarkan aplikasi yang akan kamu buat ke facebook developer yaitu di https://developers.facebook.com/apps. Klik tombok Create New App. Selanjutnya di gambar berikut aku membuat aplikasi bernama "Unira Card Dev", dengan namespace "uniracarddev". Ikuti saja isiannya sesuai gambar terutama bagian Site URL, Canvas dsb.

Setelah terisi seperti itu lalu tekan Simpan Perubahan. Catatan: Harap simpan atau catat bagian App ID dan App Secret karena nilainya akan digunakan dalam aplikasi kita.

Download Facebook PHP SDK

Kamu bisa download di https://github.com/facebook/facebook-php-sdk yang berisi beberapa file PHP yang akan menyediakan bermacam fungsi untuk mengakses Facebook server API. Sebenarnya yang kamu perlukan cuma yang ada dalam folder "src" namun kamu bisa menggunakan beberapa contoh cara penggunaannya di folder "examples". Letakkan file-file SDK ini ke server (htdocs) mu.

Buat Aplikasinya

Sekarang buat file index.php dan letakkan di folder root (htdocs). Isi dari file index.php tersebut adalah:

<?php
define('APP_ID', 'isi dengan app id mu');
define('APP_SECRET', 'isi dengan app secret mu');

// pathnya sesuaikan dengah letak file yang kamu punya
require 'fb-php-sdk/facebook.php';

$facebook = new Facebook(array(
    'appId'  => APP_ID,
    'secret' => APP_SECRET,
));

// ada user?
$user = $facebook->getUser();

// jika iya
if ($user) {
  try {
    // dapatkan profil user yang sudah masuk
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}

if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}
?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>php-sdk</title>
    <style>
      body {
        font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
      }
      h1 a {
        text-decoration: none;
        color: #3b5998;
      }
      h1 a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>php-sdk</h1>

    <?php if ($user): ?>
      <a href="<?php echo $logoutUrl; ?>">Logout</a>
    <?php else: ?>
      <div>
        Login using OAuth 2.0 handled by the PHP SDK:
        <a href="<?php echo $loginUrl; ?>">Login with Facebook</a>
      </div>
    <?php endif ?>

    <?php if ($user): ?>
      <h3><?php echo $user_profile['name'] ?></h3>
      <img src="https://graph.facebook.com/<?php echo $user; ?>/picture">

      <h3>Your User Object (/me)</h3>
      <pre><?php print_r($user_profile); ?></pre>
    <?php else: ?>
      <strong><em>You are not Connected.</em></strong>
    <?php endif ?>
  </body>
</html>

Source codenya aku ambil dari contoh yang sudah ada dengan sedikit modifikasi. Sekarang buka browsermu dan ketik: "https://localhost" (tanpa quote/tanda petik dan perhatikan https-nya) di address bar. Jika beruntung :D kamu akan mendapatkan tampilan seperti ini:

*-- Catatan:
1. Jika yang muncul tombol login ke Facebook, klik saja.
2. Jika kamu ingin melihat aplikasimu muncul di fb buka saja halaman: https://apps.facebook.com/nama_namespace
contoh: https://apps.facebook.com/uniracarddev

Virtual Host

Secara default saat kita menginstall XAMPP kita hanya memiliki satu "domain" yaitu "localhost" sehingga kalau kamu memiliki banyak halaman web harus diletakkan dibawah "localhost" pada folder yang berbeda-beda. Dengan virtual host kamu bisa memiliki lebih banyak "domain" di komputermu contohnya: "http://kerjaanA/", "http://kerjaanB/", dsb. Keuntungan lain kamu bisa meletakkan file php-mu dimanapun (tidak hanya di htdocs saja).

Jika kamu mengembangkan banyak facebook app maka sangat dianjurkan kamu membuat virtual host di komputermu. Ada beberapa tutorial cara membuat virtual host yang bisa kamu ikuti yaitu:
1. http://sawmac.com/xampp/virtualhosts/ (berbahasa Inggris)
2. https://ri32.wordpress.com/2012/01/20/membuat-virtual-host-di-xampp/

Setelah virtual host dibuat maka nama hosting tersebut akan digunakan sebagai Site URL, Canvas URL bagi aplikasi facebook yang kamu buat.


Sekarang kamu bisa mengedit dan membang aplikasi sesukamu di localhost dan langsung mengeceknya secara langsung, kalau sudah selesai baru deh berpikir cari hosting dan kemudian upload filemu ke server yang sebenarnya. Jika kamu tertarik dengan hosting PHP gratis coba lihat disini: http://nazoftware.blogspot.com/2012/08/hosting-php-gratisan-dengan-heroku.html. Happy coding :D

Belajar YQL

YQL adalah singkatan dari Yahoo Query Language merupakan tool yang dipastikan akan dapat mempercepat penyelesaian pekerjaan pada web development. Ada banyak sekali web apps dan web service yang ada saat ini dan masing-masing memiliki API yang mau tidak mau harus dipelajari untuk dapat menggunakannya pada project yang kita buat. Dengan YQL kita tidak perlu lagi mempelajari satu persatu API tersebut, cukup dengan satu bahasa YQL maka semua akan terselesaikan dengan mudah.

Bagaimana Menggunakannya?

Tampilan console untuk YQL adalah seperti ini, kamu dapat mengaksesnya di http://developer.yahoo.com/yql/console/:

disisi kanan kamu bisa memilih "table" dalam "database". Contoh query akan muncul di kotak statement. Dibawah kotak statement akan muncul data hasil dari query baik dalam format xml atau json. Sekarang kita coba query untuk mengambil data dari feed pada alamat web tertentu:

select title from rss where url="http://rss.news.yahoo.com/rss/topstories"

Penggunaan query tersebut akan menghasilkan item terbaru dalam feed Yahoo News Top Stories. Kemudian kamu mungkin berpikir bahwa YQL hanya untuk situs-situs Yahoo saja? Jawabnya adalah "tidak". Klik "Show Community Tables" di sisi kanan YQL Console dan kamu akan menemukan banyak "database" dari Netflix, Github, Twitter, dsb.

Membaca Tweet Terbaru dari Twitter

Pada umumnya YQL digunakan dengan cURL (baca: see URL), tapi dengan Javascript saja sebenarnya kita sudah dapat menggunakan YQL. Pada kasus kita ini yaitu membaca Tweet terbaru dari Twitter akan menggunakan cURL di PHP. URL yang digunakan berasal dari hasil query yang dilakukan di YQL Console di bagian THE REST QUERY.

// YQL

$screen_name = 'SECRETsongjieun'; // ubah disini!

$query = "SELECT * FROM twitter.user.timeline WHERE screen_name='$screen_name'";  

$url = 'https://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&q=' . urlencode($query);  

// cURL  

$c = curl_init();  

curl_setopt($c, CURLOPT_URL, $url);  

curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);  

curl_setopt($c, CURLOPT_SSL_VERIFYPEER, FALSE);  

curl_setopt($c, CURLOPT_SSL_VERIFYHOST, FALSE);  

$rawdata = curl_exec($c);  

curl_close($c);  

$data = json_decode($rawdata);

// Tampilkan data
echo '<pre>';  
print_r($data);  
echo '</pre>';

Dari hasil print_r diatas seharusnya kamu punya bayangan kira-kira seperti apa data akan ditampilkan.  Sekarang kita buat file HTML + CSS lengkapnya, kode sebelumnya letakkan sebelum perintah HTML dan hapus yang bagian tampilkan data (tag pre)

<!DOCTYPE html>
<html>
<head>
<title><?php echo $user_name ?>'s Tweet</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="default.css" />
<!-- kode sumber: http://net.tutsplus.com/tutorials/other/an-api-for-the-web-learning-yql/
-->
</head>
<body>
<h1><?php echo $user_name ?>: Latest Tweets</h1>
<ul>
...
</ul>
</body>
</html>

Isi default.css:

body {  
    font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;  
    background:#ececec;  
    padding:10px;  
}  
img {  
    border:0;  
}
ul {  
    margin:0;  
    padding:0;  
    border:1px solid #474747;  
    border-radius:5px;  
    -moz-border-radius:5px;  
    -webkit-border-radius:5px;  
    background:#ccc;  
    width:50%;  
}  
li {  
    min-height:50px;  
    padding:5px;  
    list-style-type:none;  
    border-bottom:1px solid #474747;  
    border-top:1px solid #ececec;  
}  
li div {  
    padding-left:58px;  
}  
li a.img {  
    float:left;  
    padding-right:5px;  
}  
li a {  
    text-decoration: none;
color: #1D74CC;
}  
li:first-child {  
    border-radius:5px 5px 0 0;  
    -moz-border-radius:5px 5px 0 0;  
    -webkit-border-radius:5px 5px 0 0;  
}  
li:last-child {  
    border-bottom:0;  
} 
li:hover {  
    box-shadow: 0px 0px 15px #000;  
    -moz-box-shadow: 0px 0px 15px #000;  
    -webkit-box-shadow: 0px 0px 15px #000;  
}


Nah, sekarang adalah kode perulangan untuk menampilkan Tweet, letakkan di dalam tag ul yang sudah ada:

<?php
// ambil bagian status
$status = $data->query->results->statuses->status;

// loop untuk menampilkan
for ($i = 0; $i < count($status); $i++):
$user = $status[$i]->user;
$text = $status[$i]->text;
$created = $status[$i]->created_at;
$source = $status[$i]->source;

// modify text
$text = preg_replace('/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/', '<a href="$1" target="_blank">$1</a>', $text);
$text = preg_replace('/@([a-zA-Z0-9_]+)/', '<a href="http://twitter.com/$1" target="_blank" class="username">@$1</a>', $text);

// user
$screen_name = $user->screen_name;
$name = $user->name;
$profile_image = $user->profile_image_url;
?>
<li>
<a class="img" href="http://twitter.com/<?php echo $screen_name ?>" target="_blank"><img src="<?php echo $profile_image ?>" alt="<?php echo $name ?>"></a>
<div>
<small><a href="http://twitter.com/<?php echo $screen_name ?>" target="_blank"><?php echo $screen_name ?></a> (<?php echo $name ?>) &mdash; <?php echo $created ?></small><br />
<?php echo $text ?><br />
<small><?php echo $source ?></small>
</div>
</li>
<?php
endfor
?>

Sekarang tampilan dari kode yang kita buat adalah seperti berikut:

Kesimpulan

Pada contoh diatas kita menggunakan cURL dan PHP untuk mendapatkan hasil dari Tweet di Twitter menggunakan YQL. Kamu mungkin dapat mencoba menggunakan Javascript saja untuk menghasilkan output yang sama namun yang terpenting adalah dengan YQL maka semua API yang harus kita pelajari jadi berkurang sehingga mempermudah developer dan mempercepat kerjanya.
Jika kamu ingin mendapatkan file yang digunakan pada contoh diatas dapat diunduh disini: bit.ly/NLulgU

Sumber:

http://net.tutsplus.com/tutorials/other/an-api-for-the-web-learning-yql/

Membuat aplikasi sederhana di browser Google Chrome

Jika kamu mengamati beberapa aplikasi yang ada di "Web Store" Google pada dasarnya fungsinya hanya semacam "tombol" untuk membuka halaman web tertentu. Contohnya adalah aplikasi resmi yang dibuat oleh Google seperti Google Docs hanya akan membuka tab baru yang mengarah ke alamat docs.google.com

Mungkin ada perasaan janggal kenapa sebuah aplikasi hanya berfungsi semacam bookmark dan tidak melakukan hal yang lebih rumit? Ehm, mungkin alasannya seperti ini:

Tampilan dari halaman "Most Visited":

Tampilan dari halaman "Apps":

Tentu kamu sepakat kalau tampilan di halaman Apps nampak lebih "bersih", jelas dan lebih mudah diamati. Nah, sekarang kita akan membuat sebuah aplikasi semacam ini yang berisi link ke situs favorit atau alamat blog yang kamu punya.


Langkah 1:
Ada dua file yang akan kita buat yaitu:
1. sebuah file json yang akan diberi nama "manifest.json"
2. sebuah file gambar dengan ukuran 128 x 128 pixel dengan format .png sebagai icon

Selanjutnya ikuti langkah berikut:
1. Buat folder terserah dimanapun dengan nama apapun
2. Letakkan file gambar yang akan digunakan sebagai icon dalam folder tersebut
3. Buat file "manifest.json" dengan text editor sederhana seperti Notepad (tapi aku menganjurkan gunakan Notepad++) yang berisi teks berikut:

{
   "name": "NAMA APP",
   "version": "1.0",
   "manifest_version": 2,
   "description": "DESKRIPSI SINGKAT APP",
   "icons": { "128": "icon_128.png" },
   "apps": {
      "urls": [
    "http://ALAMAT WEBSITE ATAU BLOG"
 ],
 "launch": {
    "web_url": "http://ALAMAT WEBSITE ATAU BLOG"
 }
   }
}

4. Simpan file json tersebut dan letakkan dalam folder yang sudah dibuat tadi. Jadi di dalam folder yang kamu buat setidaknya ada dua file yang "manifest.json" dan file "icon_128.png"

Langkah 2: Instalasi

Klik icon kunci inggris yang ada di pojok kanan atas lalu arahkan ke menu "Tools" -> "Extensions". Setelahnya akan muncul halaman Ekstensions. Di bagian paling atas beri tanda check "Developer Mode" dan akan muncul beberapa tombol. Klik tombol "Load unpacked extension..." dan cari folder yang telah kamu buat tadi. Jika berhasil maka aplikasimu akan muncul di daftar extension dibawahnya. Sekarang buka tab baru dan lihat bagian Apps dan seharusnya kamu melihat icon aplikasimu disitu.

Langkah 3: Packing App

Jika dirasa sudah ok, maka aplikasimu perlu di pack agar bisa didistribusikan ke orang lain untuk diinstal. Caranya:
1. Masih di halaman Extension, klik tombol "Pack extension..." dan akan muncul dialog. Tekan tombol Browse di bagian "Extension root directory" dan arahkan di folder yang telah kamu buat
2. Bagian private key bisa kamu kosongkan, ini adalah kunci yang akan kamu gunakan jika kamu ingin mengupdate versi aplikasimu
3. Tekan "Pack Extension" dan akan dibuat dua buah file (nama_aplikasi.crx dan nama_aplikasi.pem) disebelah folder tadi. File crx ini yang kamu letakkan ke server untuk didownload dan dipasang di Chrome orang lain.

Jika kamu ingin mendownload theme "Universitas Madura" yang aku buat bisa klik disini: http://bit.ly/MOexMa