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

on

  • 752 views

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)

Statistics

Views

Total Views
752
Views on SlideShare
751
Embed Views
1

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 Menambah fungsi "load more"
    • 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"> <script src="jquery.min.js"></script> <script src="cute-rescue.js"></script>
    • Konten Di dalam tag body <div id="konten"> <header> <img src="img/cute-rescue-logo.png" alt="Logo Cute Resc ue"> </header> </div>
    • 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>
    • 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>
    • JavaScript! (with jQuery) cute-rescue.js Kode jQuery untuk menandakan bahwa kode kita akan dijalankan setelah dokumen HTML-nya ready. $(document).ready(function() { });
    • 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(); } });
    • 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",
    • 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, 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(); }
    • 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)
    • 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);
    • 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(); } }); });
    • 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/" + 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();
    • 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();
    • 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: manifest.json Icon ekstensi: icon.png (ukuran 19x19 pixels)
    • 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" } }
    • Cara Instalasi Buka menu > Tools > Extensions Cek "Developer Mode" (kanan atas) Klik "Load unpacked extension..." Pilih direktori Selesai!