MENYEDIAKAN FOTO IMUT SECARA BERKELANJUTAN
•
0 recomendaciones•1,087 vistas
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.
Recomendados
Más contenido relacionado
Similar a MENYEDIAKAN FOTO IMUT SECARA BERKELANJUTAN
Similar a MENYEDIAKAN FOTO IMUT SECARA BERKELANJUTAN (20)
MENYEDIAKAN FOTO IMUT SECARA BERKELANJUTAN
- 1. Let's build
- 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>
- 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(); }
- 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);
- 17. 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(); } }); });
- 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();
- 21. Styling style.css Mengakses id tertentu dengan #
- 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)
- 23. 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" } }
- 24. Cara Instalasi Buka menu > Tools > Extensions Cek "Developer Mode" (kanan atas) Klik "Load unpacked extension..." Pilih direktori Selesai!