simple web app + chrome extension dengan html 5 : workshop // femaledev
DESCRIPTION
HTML5 & Chrome Extension Workshop // Femaledev.com Sunday, July 21, 2013 2.00 - 7.00 PM Universitas Brawijaya, Jalan Veteran, 65145, Indonesia (TBC)TRANSCRIPT
![Page 1: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/1.jpg)
Let's build
![Page 2: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/2.jpg)
Demohttp://hfz.io/cute-rescue/
Resourcehttp://hfz.io/cute-rescue/cute-rescue.zip
![Page 3: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/3.jpg)
KonsepMengambil gambar dari Instagram berdasarkan tagMenampilkan di HTML kitaMemberi user beberapa pilihan tipe gambarMenambah fungsi "load more"
![Page 4: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/4.jpg)
Mulai dengan index.html<!DOCTYPE html>
<html> <head> </head> <body> </body> </html>
![Page 5: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/5.jpg)
Boring things firstDi 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>
![Page 6: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/6.jpg)
KontenDi dalam tag body
<div id="konten"> <header> <img src="img/cute-rescue-logo.png" alt="Logo Cute Rescue"> </header></div>
![Page 7: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/7.jpg)
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>
![Page 8: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/8.jpg)
Lokasi foto
Mengapa div id="foto" kosong? Karena nanti diisimenggunakan JavaScript
<div id="foto"></div>
<div id="button-box"> <p id="loading">Loading...</p> <button id="lagi" value="">Tambah lagi!</button></div>
![Page 9: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/9.jpg)
JavaScript! (with jQuery)cute-rescue.js
Kode jQuery untuk menandakan bahwa kode kita akandijalankan setelah dokumen HTML-nya ready.
$(document).ready(function() {
});
![Page 10: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/10.jpg)
Fungsi utamacute-rescue.js
Fungsi utama app kita
$.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.instagram.com/v1/tags/kittenstagram/media/recent?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(); }});
![Page 11: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/11.jpg)
Meminta data ke Instagramcute-rescue.js
Kita memakai API InstagramMemanggil API tersebut menggunakan fungsi AJAXTiap 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",
![Page 12: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/12.jpg)
Sedikit tentang APIInstagram memberi jawaban berupa file JSON
JSON = teks biasa yang diformat sederhana
![Page 13: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/13.jpg)
Lalu jawaban dari Instagramdiapakan?
cute-rescue.js
Sukses? Segera diprosesfor: looping, dari 1 sampai 10fungsi append, menambahkan data foto dari JSON kedalam 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].link + ""><img src="" + data.data[i].images.low_resolution.url + ""></a>"); } $("#lagi").val(data.pagination.next_url); $("#loading").hide();}
![Page 14: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/14.jpg)
![Page 15: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/15.jpg)
Appendcute-rescue.js
$("#foto").append("<a target='_blank'href='" + data.data[i].link + "'><imgsrc='" + 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_urldata.data[i] adalah cara mengakses data tiap foto (total ada10)
![Page 16: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/16.jpg)
Load more!cute-rescue.js
Memasukkan next_url ke dalam property "value" padabutton #laginext_url adalah alamat JSON untuk foto-foto berikutnyaOtomatis dikasih oleh Instagram! Thank you Instagram!
$("#lagi").val(data.pagination.next_url);
![Page 17: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/17.jpg)
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.url + ""></a>"); } $("#lagi").val(data.pagination.next_url); $("#loading").hide(); } });});
![Page 18: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/18.jpg)
Bedanya hanya di: url: $(this).val()Remember? Itu value yang dikasih Instagram di slidesebelumnya
![Page 19: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/19.jpg)
Dropdown ketika pilihan diganticute-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/recent?client_id=48cd0c2b9e2740d7acae40f8e5a4060f"; $("#foto").empty();
![Page 20: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/20.jpg)
Loading messagecute-rescue.js
Memakai fungsi .show() dan .hide() untukmenampilkan/menghilangkan
Tampilkan ketika
Pertama kali halaman dibukaTombol load more di-klikSelect dipilih yang baru
Sembunyikan setelah
AJAX sukses
$("#loading").show(); ...$("#loading").hide();
![Page 21: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/21.jpg)
Stylingstyle.css
Mengakses id tertentu dengan #
![Page 22: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/22.jpg)
Chrome extension!Is very easy to make
Memakai HTML 5Nama file wajib: popup.html, popup.jsTambahan file pengenal: manifest.jsonIcon ekstensi: icon.png (ukuran 19x19 pixels)
![Page 23: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/23.jpg)
Pengenal ekstensimanifest.json
{ "manifest_version": 2,
"name": "Cute Rescue", "description": "This extension demonstrates a browser action with kittens.", "version": "1.1",
"content_security_policy": "script-src 'self' https://api.instagram.com/v1/; object-src 'self'",
"browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }}
![Page 24: Simple web app + chrome extension dengan html 5 : Workshop // Femaledev](https://reader030.vdocuments.site/reader030/viewer/2022020217/54b604e94a7959701c8b456e/html5/thumbnails/24.jpg)
Cara InstalasiBuka menu > Tools > ExtensionsCek "Developer Mode" (kanan atas)Klik "Load unpacked extension..."Pilih direktoriSelesai!