1. Aplikasi ini menampilkan gambar imut dari Instagram berdasarkan tag seperti kucing dan tupai yang diambil dari API Instagram.
2. Pengguna dapat memilih jenis gambar dan menekan tombol "Tambah lagi" untuk melihat lebih banyak gambar.
3. Aplikasi ini dibuat menggunakan HTML, CSS, dan JavaScript dengan jQuery untuk mengambil dan menampilkan gambar dari Instagram.
3. Konsep
Mengambil gambar dari Instagram berdasarkan tag
Menampilkan di HTML kita
Memberi user beberapa pilihan tipe gambar
Menambah fungsi "load more"
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>
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",
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.
15. 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)
16. 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);
18. Bedanya hanya di: url: $(this).val()
Remember? Itu value yang dikasih Instagram di slide
sebelumnya
19. 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();
20. 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();
22. 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)