Bagaimana Menggunakan Behance API untuk Membangun Portofolio Halaman Web

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Behance adalah media untuk para kreatif membagikan dan menampilkan hasil kerja mereka dan proyek yang tengah dikerjakan. Tidak seperti Dribble atau Forrst yang — menurut pandangan saya — didominasi oleh illustrator dan desainer UI, Behance mencakup rentang yang lebih luas dari bidang kreatif termasuk Arsitektur, Grafik Motions, Desain Otomotif, dan Fashion. Sebagai tambahan, Behance juga menyediakan seperangkat API untuk memberikan akses pada kontennya.

Selama seri pendek ini, kita akan menggunakan Behance API untuk membangun website portofolio pribadi. Kita akan dengan efektif menarik konten dari Behanca dan menampilkannya pada halaman website eksternal milik kita. Tetapi sebelum melanjutkan lebih jauh dengan membangun website, kita terlebih dahulu harus mengetahui bagaimana Behance mengatur kontennya dan melihat bagaimana API bekerja.

Mengksplor Behance dan API

Behance membagai kontennya menjadi modul-modul; bernama gambar, embed, video, audio, dan teks. Data yang diterima API tidak hanya berurusan dengan URL gambar tetapi dapat juga berupa video, URL audio, juga teks polos. Menampilkan seluruh tipe konten ini pada website kita, bagaimanapun, adalah hal yang sulit. Untuk itu, pada tutorial ini, kita akan fokus pada gambar dan menyeleksi yang lainnya untuk menjaga kode kita tetap sederhana.

Catatan: Tutorial ini mengasumsikan bahwa Anda telah memiliki akun Adobe dan portofolio Behance untuk digunakan. Untuk kepentingan demonstrasi, kita akan menggunakan portofolio yang luar biasa dari Mike "Creativemints", yang dengan baik hati mengizinkan kita menggunakan hasil kerjanya pada kasus ini.

Ketika bekerja pada proyek Anda sendiri, setelah mengunggah konten, Behance akan menunjukkan Anda sebuah dialog untuk mengunggah gambar sampul. Ini seperti mengatur gambar fitur pada WordPress. Gambar yang kita unggah di sini akan ditampilkan sebagai pratinjau dari keseluruhan proyek. Pada website kita, kita akan menggunakan gambar sampul seperti ini.

Jendela dialog untuk mengunggah gambar sampul pada Behance.

Ketika kita telah mengatur gambar sampul, kita akan diperlihatkan opsi untuk memberikan beberapa atribut pseperti bidang kreatif, tag, dan deskripsi konten. Kita tidak akan membuat website kita terlalu penuh dengan terlalu banyak atribut ini. Pada tutorial kali ini, mengesampingkan gambar sampul dan judul, kita hanya akan menunjukkan atribut bidang kreatif.

Kunci Behance API

Kita membutuhkan kunci/ID Klien API yang unik untuk mendapatkan akses pada Behance API. Untuk memilikinya, pergi ke Behance Dev, daftarkan aplikasi Anda, isi Nama Aplikasi, Website, dan Deskipsi. Kolom Redirect URI (untuk OAuth) pilihan, kecuali Anda akan membuat aplikasi yang mengharuskan adanya autentikasi pengguna.

Ketika kita sudah memiliki kunci API, pergi ke Behance API Endpoints di mana Anda akan menemukan semua daftar untuk mengakses API. API Endpoint adalah halaman untuk layanan web, biasanya hanya berupa baris URL HTTP sederhana.

Pada tutorial kali ini, kita akan membutuhkan akses pada Informasi Pengguna dan Proyek Pengguna. Berikut adalah informasi yang diminta oleh API endpoint:

Mendapatkan informasi pengguna

1	https://www.behance.net/v2/users/{user_id}?api_key={the_api_key}

Informasi pengguna termasuk nomor ID, nama, lokasi, avatar, URL pengguna, dan setumpuk data lainnya.

Mendapatkan proyek pengguna

1	http://www.behance.net/v2/users/{user_id}/projects?api_key={the_api_key}

Kita akan mendapatkan daftar proyek dari user_id. Daftar dapat dibatasi dengan parameter per_page.

Mendapatkan konten proyek

1	http://www.behance.net/v2/projects/{project_id}?api_key={the_api_key}

API mengembalikan informasi proyek termasuk module dari project_id.

Karena Behanca API dapat diakses melalui HTTP, kita dapat melihat data seketika pada browser. Jika Anda menggunakan Chrome atau Firefox, saya saranakan Anda memasang sebuah plugin browser yang disebut JSONview untuk melihat data JSON pada format yang lebih dapat dibaca.

Batasan API

Jangan lupa bahwa Behance membatasi API hingga 150 permintaan per jam. Jika ada terlalu banyak permintaan, kita akan berakhir dengan tidak ditanggapi dan tidak mendapatkan apa-apa. Berikut adalah bagaimana pembatasan dideskripsikan pada dokumentasi:

Permintaan dibatasi menjadi 150 per jam dan dihitung terhadap IP publik dari server atau perangkat yang membuat permintaan. Jika Anda membuat terlalu banyak permitaan, Anda akan menerima respon kosong dengan kode status 429 (Terlalu Banyak Permintaan).

Jadi, pada tutorial ini, kita akan memanfaatkan Penyimpanan Offline HTML5 untuk menyimpan data secara offline untuk mengurangi permintaan. Agar tidak memanggil API setiap kita memuat halaman, kita bisa mendapatkannya dari penyimpanan. Silakan pelajari artikel berikut untuk mengetahui lebih jauh tentang penyimpanan HTML Offline:

Blueprint Website

Sebelum kita membangun struktur website kita, mari lihat blueprint website terlebih dahulu.

Seperti yang Anda lihat di atas, website kita memiliki tiga bagian: Header, Konten/Isi, dan Footer. Header berisi gambar avatar pengguna, nama, bidang kreatif mereka, dan lokasi. Bagian Konten menunjukkan portofolio pengguna dengan nama dan bidang kreatif. Pada bagian Footer, kitaakan menunjukkan logo Behance, mengilustrasikan bahwa website ini didukung oleh Behance API.

Membangun Konten Website dan Struktur

Mari mulai proyek kita dengan membuat direktori bernama personal-portofolio dan sebuah index.html dengan markup dasar HTML5. Pada index.html, kita akan menautkan perpustakaan berikut ini:

jQuery

Pada tutorial kali ini kita akan menggunakan jQuery terutama untuk dua hal: manipulasi DOM dan memanggil Behance API melalui API $.getJSON().

Sekarang, jQuery terbagi menjadi dua versi, 1.x dan 2.x. Versi 1.x ditujukan untuk mendukung browser lama di antaranya Internet Explorer 8 dan di bawahnya, sedangkan versi 2.x hanya menangani browser yang lebih modern. Kita berasumsi bahwa kita tengah berada di dunia ketika semua orang menggunakan modern browser (saya merasa terlalu berisiko). Jadi, untuk tutorial ini, kita dapat dengan aman menggunakan jQuery 2.x.

Handlebars.js

Handlebars adalah mesin template berbasis JavaScript. Pada tutorial ini, kita akan menggunakan Handlebars untuk membuat template yang akan menampilkan data yang dihasilkan dari Behance API. Tuts+ memiliki dua screencast yang dapat membantu Anda memulai menggunakan Handlebars:

Jika Anda belum pernah bekerja menggunakan Handlebars sebelumnya, kami sarankan Anda untuk menyediakan waktu untuk menyelesaikan screencast ini atau membaca beberapa dasar-dasar tutorial sebelum melangkah lebih jauh.

Pada tutorial ini, kita tidak akan memasukkan JavaScript dan library CSS pada proyek direktori kita demi mendapatkan ukuran file yang lebih kecil untuk proyek ini. Sebaliknya, kita akan menautkan sebuah link dari sumber CDN oleh CDNJS.com. Mari buka index.html kita melalui server lokal dan tambahkan library berikut ini di dalam tag head.

1	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

Perlu diingat, jika Anda menyediakan index.html melalui server lokal, Anda harus menambahkan http:// pada masing-masing link yang menunjuk pada CDNJS.com.

Membagi Section Website dalam HTML

Markup HTML yang mendefinisikan bagian-bagian dari website kita—Header, Konten, dan Footer— cukup sederhana. Kita menggunakan elemen header HTML5 untuk Header, sebuah div untuk mengapit Konten, dan HTML5 elemen footer untuk Footer. Masing-masing elemen diberikan ID unik dan sebuah kelas untuk tujuan membuat style dan skrip. Berikut ini adalah markup HTML dalam tag body pada tahap ini.

<header id="header" class="portfolio-header clearfix">
</header>
<div id="content" class="content-area clearfix">
</div>
<footer id="footer" class="portfolio-footer clearfix">
</footer>

Membuat Template Handlebars

Pada bagian ini, kita akan membangun template Handlebars untuk menampilkan konten dari bagian-bagian website kita. Kita akan memulai dengan template untuk Header, yang akan diisi dengan data pengguna dari API endpoint ini www.behance.net/v2/users/{user_id}.

Template Handlebars akan diapit dengan tag script dengan tipe khusus text/x-handlebars-template dan terutama dengan ID yang unik untuk memilih template seperti ini.

1	<script id="profile-template" type="text/x-handlebars-template">
2	</script>

Di dalam tag script kita akan meletakkan markup untuk konten Header bersamaan dengan kelas untuk tujuan membuat style. Kita juga memasukkan kelas dari Foundation Icon Fonts 3, yang diinisialkan dengan fi-, untuk menunjukkan ikon. Terakhir, placeholder konten pada formulir dari tampilan Handlebars.

<figure class="profile-avatar"><img src="{{user.images.[138]}}" alt=""></figure>
  	<h1 class="profile-name">{{user.display_name}}</h1>
		<div class="profile-fields">
			<ul class="field-list">
				{{#each user.fields}}
					<li class="field-item">{{this}}</li>
				{{/each}}
			</ul>
		</div>
<div class="profile-location fi-marker">{{user.city}}, {{user.country}}</div>

Masing-masing placeholder merujuk pada kunci JSON yang dihasilkan dari API. {{user.display_name}}, misalnya, akan menunjukkan tampilan nama pengguna. display_name adalah kunci sebenarnya yang mempertahankan nilai nama. Tetapi sejak dijaring di bawah objek user kita lebih memilih untuk menjadikannya user.display_name. Hal serupa untuk placeholder lain pada template ini juga template yang lainnya.

Selanjutnya, kita akan membangun template untuk menampilkan portofolio, dan ini merupakan template Handlebars terakhir yang kita buat untuk website ini. Untuk memulai, kita buat div baru dengan ID portofolio di dalan bagian Konten. Kita membuat div untuk mengapit portofolio, untuk berjaga-jaga jika kita perlu untuk menambahkan konten lebih nantinya. Kemudian kita tambahkan tag skrip yang mengandung template. Pada titik ini, struktur HTML dari portofolio kita akan terlihat seperti ini:

1	<div id="portfolio" class="portfolio-area clearfix">
2	<script id="portfolio-template" type="text/x-handlebars-template">
3	</script>
4	</div>

Di sini Anda dapat melihat bahwa data diambil dari www.behance.net/v2/users/{user_id}/projects mengembalikan susunan yang mengandung portofolio pengguna. Untuk menampilkan struktur, kita akan harus melompat pada masing-masing item pada struktur menggunakan {{each}} Handlebars untuk menampilkannya pada template.

Struktur proyek yang diambil dari Behance API

Kita akan meletakkan portofolio dalam daftar yang tidak berurutan. Jadi, mari tambahkan sebuah elemen ul dan apit masing-masing elemen li dengan {{#each}}...{{/each}}, seperti berikut ini:

<div id="portfolio" class="portfolio-area clearfix">		
	<script id="portfolio-template" type="text/x-handlebars-template">
	<ul class="portfolio-list clearfix">
		{{#each projects}}
		<li class="portfolio-item"></li>
		{{/each}}
	</ul>
	</script>
</div>

Kemudian, kita akan meletakkan konten untuk masing-masing item. Seperti yang telah disebutkan sebelumnya, kita akan menunjukkan gambar sampul, nama, dan bidang kreatif. Kita akan meletakkannya di dalam li dengan div baru dan kelas, portfolio-content.

...
<div class="portfolio-content">
	<figure class="portfolio-cover" title="{{this.name}}">
		{{#if this.covers.[404]}}
		<img class="portfolio-image" src="{{this.covers.[404]}}" alt="">
		{{else}}
			{{#if this.covers.[230]}}
			<img class="portfolio-image" src="{{this.covers.[230]}}" alt="">
			{{else}}
			<img class="portfolio-image" src="{{this.covers.[202]}}" alt="">
			{{/if}}
		{{/if}}
	</figure>
	<h2 class="portfolio-title">{{this.name}}</h2>
	<div class="portfolio-fields">
		<ul class="field-list">
		{{#each this.fields}}
			<li class="field-item">{{this}}</li>
		{{/each}}
		</ul>
	</div>
</div> 
...

Perhatikan bahwa ada beberapa pembantu bersyarat Handlebars, seperti {{#if this.covers.[404]}}, pada template ini. Kita menggunakan pembantu bersyarat untuk membantu kita merujuk pada ukuran gambar sampul yang tepat. Gambar mungkin tidak selalu berada pada 404px (merupakan pengaturan ukuran tertinggi untuk gambar sampul), mungkin tersedia dalam ukuran yang lebih rendah. Di sini Anda dapat melihat Behance memotong gambar menjadi ukuran-ukuran berikut ini: 404px, 230px, 202px, dan 115px.

Markup HTML pada Footer sangatlah sederhana. Kita akan menambahkan dua paragraf tag: satu yang mengandung “Powered by” dan satu lagi mengandung link yang merujuk pada Behance. Kita akan menambahkan kelas fi-social-behance di tag a untuk menunjukkan logo Behance daro Foundation Icon Fonts.

... 
<div id="power" class="power-by">
	<p>Powered by</p>
	<p><a class="power-logo fi-social-behance" href="http://www.behance.net/" title="Behance" target="_blank">Behance</a></p>
</div>

Pada tahap ini, kita telah selesai membangun struktur HTML yang mengatur tata letak konten website kita. Bagaimanapun, ketika kita membuka browser kita akan melihat tidak ada yang muncul! Ini dikarenakan kita perlu membuat permintaan pada API dan mengumpulkan data bersamaan dengan template Handlebars.

Memanggil Behance API dan Mengumpulkan Template

Mari buat sebuah tag script untuk memuat JavaScript kita. Kita juga akan membuat dua variabel untuk memuat kunci Behance API dan ID Pengguna. Seperti yang telah disebutkan sebelumnya, kita akan menggunakan portofolio milik “Creativemints”.

1	var apiKey = 'ZLBxK9rEfHwJf9K0rmseNr2fS2gS2HJW';
2	var userID = 'creativemints';

Di bawah dua variabel ini, kita menambahkan fungsi berikut. Fungsi ini akan memanggil Behance User API dan menyatukan template Handlebars untuk Header.

(function() {
	var behanceUserAPI = 'http://www.behance.net/v2/users/'+ userID +'?callback=?&api_key='+ apiKey;
	function setUserTemplate() {
		var userData    = JSON.parse(sessionStorage.getItem('behanceUser')),
		getTemplate = $('#profile-template').html(),
		template    = Handlebars.compile(getTemplate),
		result      = template(userData);
    	$('#header').html(result);
	};
	if(sessionStorage.getItem('behanceUser')) {
		setUserTemplate();
	} else {
		$.getJSON(behanceUserAPI, function(user) {
			var data = JSON.stringify(user);
			sessionStorage.setItem('behanceUser', data);
			setUserTemplate();
		});
	};
})();

Mari mengamati kode ini lebih detail. Pertama, kita simpan Behance User API pada variabel behanceUserAPI. Perhatikan bahwa kita telah memasukkan callback= parameter di dalamnya. Penambahan ini akan menghindari error Not Allowed Access (Akses Ditolak) disebabkan oleh Kebijakan Asal-Sama Same-Origin Policy.

Sebuah Kata pada sessionStorage

Lebih awal pada tutorial ini telah disebutkan bahwa Behance API terbatas pada 150 permintaan per jam, dan karenanya kita memutuskan untuk menggunakan Penyimpanan Offline HTML5 untuk menyimpan data. Pada fungsi ini, kita menggunakan sessionStorage. Alasan di balik penggunaan sessionStorage untuk menyimpan profil data adalah pengguna mungkin mengubah profilenya sewaktu-waktu, tetapi kita tidak dapat memprediksi kapan. Jadi, daripada menggunakan localStorage yang akan menyimpan data secara terus-menerus, kita menggunakan sessionStorage yang akan menghapus data saat kita keluar dari tab atau browser. Dengan cara tersebut, ketika kita membuka browser dan mengakses website kembali, ia akan menarik data baru dari Behance API.

sessionStorage, bagaimanapun, hanya dapat mengambil baris atau teks polos. Jadi, seperti yang Anda lihat pada fungsi di atas, kita menggunakan JSON.stringify(); untuk mengubah JSON menjadi garis sebelum kita menyimpannya pada sessionStorage. Kemudian kita akan menarik data dengan JSON.parse() untuk memformatnya kembali menjadi JSON.

Kita juga telah membuat fungsi yang disebut setUserTemplate() untuk menyatukan template Handlebars dan melampirkan konten menggunakan jQuery .html(). Kita menjalankan fungsi ini di bawah syarat berikut: jika data pada sessionStorage tersedia, kita harus segera mengeksekusi fungsi, kalau tidak kita harus memanggil API menggunakan $.getJSON() terlebih dahulu dan secara berurutan mengeksekusinya.

Sebagai tambahan, seperti yang Anda lihat sessionStorage berada di bawah tab Resource pada Chrome DevTools dan browser berbasis-Webkit

Menyatukan Konten

Kita kemudian menambahkan fungsi di bawah untuk menyatukan template portofolio pada Konten. Fungsi ini sangat mirip dengan fungsi di atas untuk Header, kecuali untuk variabel perPage dan per_page= parameter yang akan kita gunakan untuk membatasi jumlah item konten yang diambil dari API.

(function() {
	var perPage = 12;
	var behanceProjectAPI = 'http://www.behance.net/v2/users/'+ userID +'/projects?callback=?&api_key=' + apiKey + '&per_page=' + perPage;

	function setPortfolioTemplate() {
		var projectData = JSON.parse(sessionStorage.getItem('behanceProject')),
			getTemplate = $('#portfolio-template').html(),
			template    = Handlebars.compile(getTemplate),
			result      = template(projectData);
		$('#portfolio').html(result);
	};

	if(sessionStorage.getItem('behanceProject')) {
		setPortfolioTemplate();
	} else {
		$.getJSON(behanceProjectAPI, function(project) {
			var data = JSON.stringify(project);
			sessionStorage.setItem('behanceProject', data);
			setPortfolioTemplate();
		});
	};
})();

Sekarang ketika kita melihat browser, kita harusnya telah melihat profil pengguna beserta portofolio. Tetapi semua belum diberi style.

Nantinya..

Pada bagian selanjutnya dari seri ini, kita akan mengatur style untuk konten portofolio kita, memberikan halaman portofolio yang dinamis dan responsif. Sampai jumpa!