Let's build
Demo
http://hfz.io/cute-rescue/
Resource
http://hfz.io/cute-rescue/cute-rescue.zip
Konsep
Mengambil gambar dari Instagram berdasarkan tag
Menampilkan di HTML kita
Memberi user beberapa pilihan tipe gambar
...
Mulai dengan index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Boring things first
Di dalam tag head
<title>Cuteness to the Rescue!</title>
<link rel="stylesheet" href="style.css">
<scr...
Konten
Di dalam tag body
<div id="konten">
<header>
<img src="img/cute-rescue-logo.png" alt="Logo Cute Resc
ue">
</header>...
Menu
<div id="menu">
<label for="pilih">Apa yang menurutmu imut?</label>
<select id="pilih" name="pilih">
<option value="k...
Lokasi foto
Mengapa div id="foto" kosong? Karena nanti diisi
menggunakan JavaScript
<div id="foto">
</div>
<div id="button...
JavaScript! (with jQuery)
cute-rescue.js
Kode jQuery untuk menandakan bahwa kode kita akan
dijalankan setelah dokumen HTML...
Fungsi utama
cute-rescue.js
Fungsi utama app kita
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api...
Meminta data ke Instagram
cute-rescue.js
Kita memakai API Instagram
Memanggil API tersebut menggunakan fungsi AJAX
Tiap pe...
Sedikit tentang API
Instagram memberi jawaban berupa file JSON
JSON = teks biasa yang diformat sederhana
Lalu jawaban dari Instagram
diapakan?
cute-rescue.js
Sukses? Segera diproses
for: looping, dari 1 sampai 10
fungsi append,...
Append
cute-rescue.js
$("#foto").append("<a target='_blank'
href='" + data.data[i].link + "'><img
src='" + data.data[i].im...
Load more!
cute-rescue.js
Memasukkan next_url ke dalam property "value" pada
button #lagi
next_url adalah alamat JSON untu...
Load more ketika di-klik!
cute-rescue.js
$('#lagi').click(function() {
$("#loading").show();
$.ajax({
type: "GET",
dataTyp...
Bedanya hanya di: url: $(this).val()
Remember? Itu value yang dikasih Instagram di slide
sebelumnya
Dropdown ketika pilihan diganti
cute-rescue.js
var tag = $(this).val();
var url = "https://api.instagram.com/v1/tags/" + t...
Loading message
cute-rescue.js
Memakai fungsi .show() dan .hide() untuk
menampilkan/menghilangkan
Tampilkan ketika
Pertama...
Styling
style.css
Mengakses id tertentu dengan #
Chrome extension!
Is very easy to make
Memakai HTML 5
Nama file wajib: popup.html, popup.js
Tambahan file pengenal: manife...
Pengenal ekstensi
manifest.json
{
"manifest_version": 2,
"name": "Cute Rescue",
"description": "This extension demonstrate...
Cara Instalasi
Buka menu > Tools > Extensions
Cek "Developer Mode" (kanan atas)
Klik "Load unpacked extension..."
Pilih di...
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Upcoming SlideShare
Loading in …5
×

Simple web app + chrome extension dengan html 5 : Workshop // Femaledev

930 views

Published on

HTML5 & Chrome Extension Workshop
// Femaledev.com

Sunday, July 21, 2013
2.00 - 7.00 PM

Universitas Brawijaya,
Jalan Veteran,
65145, Indonesia (TBC)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
930
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Simple web app + chrome extension dengan html 5 : Workshop // Femaledev

  1. 1. Let's build
  2. 2. Demo http://hfz.io/cute-rescue/ Resource http://hfz.io/cute-rescue/cute-rescue.zip
  3. 3. Konsep Mengambil gambar dari Instagram berdasarkan tag Menampilkan di HTML kita Memberi user beberapa pilihan tipe gambar Menambah fungsi "load more"
  4. 4. Mulai dengan index.html <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
  5. 5. Boring things first Di dalam tag head <title>Cuteness to the Rescue!</title> <link rel="stylesheet" href="style.css"> <script src="jquery.min.js"></script> <script src="cute-rescue.js"></script>
  6. 6. Konten Di dalam tag body <div id="konten"> <header> <img src="img/cute-rescue-logo.png" alt="Logo Cute Resc ue"> </header> </div>
  7. 7. Menu <div id="menu"> <label for="pilih">Apa yang menurutmu imut?</label> <select id="pilih" name="pilih"> <option value="kittenstagram">Kucing</option> <option value="squirrelstagram">Tupai</option> <option value="cupcakes">Cupcakes</option> <option value="foodart">Food Art</option> </select> </div>
  8. 8. Lokasi foto Mengapa div id="foto" kosong? Karena nanti diisi menggunakan JavaScript <div id="foto"> </div> <div id="button-box"> <p id="loading">Loading...</p> <button id="lagi" value="">Tambah lagi!</button> </div>
  9. 9. JavaScript! (with jQuery) cute-rescue.js Kode jQuery untuk menandakan bahwa kode kita akan dijalankan setelah dokumen HTML-nya ready. $(document).ready(function() { });
  10. 10. Fungsi utama cute-rescue.js Fungsi utama app kita $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.instagram.com/v1/tags/kittenstagram/media/recen t?client_id=48cd0c2b9e2740d7acae40f8e5a4060f", success: function(data) { for (var i = 0; i < 10; i++) { if(data.data[i] == undefined) { break; } $("#foto").append("<a target="_blank" href="" + data.data [i].link + ""><img src="" + data.data[i].images.low_resolution.url + ""></a>"); } $("#lagi").val(data.pagination.next_url); $("#loading").hide(); } });
  11. 11. Meminta data ke Instagram cute-rescue.js Kita memakai API Instagram Memanggil API tersebut menggunakan fungsi AJAX Tiap penyedia API memakai aturan dan formatnya sendiri $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.instagram.com/v1/tags/kittenstagram/media/recent? client_id=48cd0c2b9e2740d7acae40f8e5a4060f",
  12. 12. Sedikit tentang API Instagram memberi jawaban berupa file JSON JSON = teks biasa yang diformat sederhana
  13. 13. Lalu jawaban dari Instagram diapakan? cute-rescue.js Sukses? Segera diproses for: looping, dari 1 sampai 10 fungsi append, menambahkan data foto dari JSON ke dalam div#foto success: function(data) { for (var i = 0; i < 10; i++) { if(data.data[i] == undefined) { break; } $("#foto").append("<a target="_blank" href="" + data.data[i].li nk + ""><img src="" + data.data[i].images.low_resolution.url + ""></a>" ); } $("#lagi").val(data.pagination.next_url); $("#loading").hide(); }
  14. 14. Append cute-rescue.js $("#foto").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images. low_resolution.url + "'></img></a>"); Data dalam JSON sangat banyak (waktu posting, likes, komen, nama filter yang dipakai, dsb) Kita ambil yang diperlukan: link, images.low_resolution.url, pagination.next_url data.data[i] adalah cara mengakses data tiap foto (total ada 10)
  15. 15. Load more! cute-rescue.js Memasukkan next_url ke dalam property "value" pada button #lagi next_url adalah alamat JSON untuk foto-foto berikutnya Otomatis dikasih oleh Instagram! Thank you Instagram! $("#lagi").val(data.pagination.next_url);
  16. 16. Load more ketika di-klik! cute-rescue.js $('#lagi').click(function() { $("#loading").show(); $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: $(this).val(), success: function(data) { for (var i = 0; i < 10; i++) { if(data.data[i] == undefined) { break; } $("#foto").append("<a target="_blank" href="" + data. data[i].link + ""><img src="" + data.data[i].images.low_resolution.ur l + ""></a>"); } $("#lagi").val(data.pagination.next_url); $("#loading").hide(); } }); });
  17. 17. Bedanya hanya di: url: $(this).val() Remember? Itu value yang dikasih Instagram di slide sebelumnya
  18. 18. Dropdown ketika pilihan diganti cute-rescue.js var tag = $(this).val(); var url = "https://api.instagram.com/v1/tags/" + tag + "/media/recent? client_id=48cd0c2b9e2740d7acae40f8e5a4060f"; $("#foto").empty(); $('#pilih').change(function() { $("#loading").show(); var tag = $(this).val(); var url = "https://api.instagram.com/v1/tags/" + tag + "/media/rece nt?client_id=48cd0c2b9e2740d7acae40f8e5a4060f"; $("#foto").empty();
  19. 19. Loading message cute-rescue.js Memakai fungsi .show() dan .hide() untuk menampilkan/menghilangkan Tampilkan ketika Pertama kali halaman dibuka Tombol load more di-klik Select dipilih yang baru Sembunyikan setelah AJAX sukses $("#loading").show(); ... $("#loading").hide();
  20. 20. Styling style.css Mengakses id tertentu dengan #
  21. 21. Chrome extension! Is very easy to make Memakai HTML 5 Nama file wajib: popup.html, popup.js Tambahan file pengenal: manifest.json Icon ekstensi: icon.png (ukuran 19x19 pixels)
  22. 22. Pengenal ekstensi manifest.json { "manifest_version": 2, "name": "Cute Rescue", "description": "This extension demonstrates a browser action with kit tens.", "version": "1.1", "content_security_policy": "script-src 'self' https://api.instagram.c om/v1/; object-src 'self'", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } }
  23. 23. Cara Instalasi Buka menu > Tools > Extensions Cek "Developer Mode" (kanan atas) Klik "Load unpacked extension..." Pilih direktori Selesai!

×