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

Let's build

Demohttp://hfz.io/cute-rescue/

Resourcehttp://hfz.io/cute-rescue/cute-rescue.zip

KonsepMengambil gambar dari Instagram berdasarkan tagMenampilkan di HTML kitaMemberi user beberapa pilihan tipe gambarMenambah fungsi "load more"

Mulai dengan index.html<!DOCTYPE html>

<html> <head> </head> <body> </body> </html>

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>

KontenDi dalam tag body

<div id="konten"> <header> <img src="img/cute-rescue-logo.png" alt="Logo Cute Rescue"> </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 diisimenggunakan 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 akandijalankan setelah dokumen HTML-nya ready.

$(document).ready(function() {

});

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(); }});

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",

Sedikit tentang APIInstagram memberi jawaban berupa file JSON

JSON = teks biasa yang diformat sederhana

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();}

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)

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);

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(); } });});

Bedanya hanya di: url: $(this).val()Remember? Itu value yang dikasih Instagram di slidesebelumnya

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();

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();

Stylingstyle.css

Mengakses id tertentu dengan #

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)

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" }}

Cara InstalasiBuka menu > Tools > ExtensionsCek "Developer Mode" (kanan atas)Klik "Load unpacked extension..."Pilih direktoriSelesai!

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

Technology

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