Your SlideShare is downloading. ×
0
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Simple web app + chrome extension dengan html 5 : Workshop // Femaledev
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

740

Published on

HTML5 & Chrome Extension Workshop …

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
740
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Let's build
  • 2. Demo http://hfz.io/cute-rescue/ Resource http://hfz.io/cute-rescue/cute-rescue.zip
  • 3. Konsep Mengambil gambar dari Instagram berdasarkan tag Menampilkan di HTML kita Memberi user beberapa pilihan tipe gambar Menambah fungsi "load more"
  • 4. Mulai dengan index.html <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
  • 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. Konten Di dalam tag body <div id="konten"> <header> <img src="img/cute-rescue-logo.png" alt="Logo Cute Resc ue"> </header> </div>
  • 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. 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. JavaScript! (with jQuery) cute-rescue.js Kode jQuery untuk menandakan bahwa kode kita akan dijalankan setelah dokumen HTML-nya ready. $(document).ready(function() { });
  • 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. 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. Sedikit tentang API Instagram memberi jawaban berupa file JSON JSON = teks biasa yang diformat sederhana
  • 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. 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. 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. 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. Bedanya hanya di: url: $(this).val() Remember? Itu value yang dikasih Instagram di slide sebelumnya
  • 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. 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. Styling style.css Mengakses id tertentu dengan #
  • 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. 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. Cara Instalasi Buka menu > Tools > Extensions Cek "Developer Mode" (kanan atas) Klik "Load unpacked extension..." Pilih direktori Selesai!

×