Pernah nggak sih kamu semangat banget bikin desain website buat portofolio. Layoutnya udah kece, warnanya udah estetik, tapi pas bagian isinya... kamu bingung mau nulis apa.
Ujung-ujungnya, kamu pakai teks dummy legendaris: "Lorem ipsum dolor sit amet...".
Atau skenario lain: Kamu mau bikin portofolio web toko online. Tapi karena nggak punya data produk beneran, kamu ngetik manual satu-satu di HTML:
<div class="produk">Baju Keren - Rp 50.000</div>
<div class="produk">Celana Gaul - Rp 70.000</div>
Duh, itu cara lama, Sob! Website zaman now itu harus dinamis. Recruiter atau calon klien bakal lebih terkesan kalau website buatanmu bisa "ngobrol" dan mengambil data dari sumber luar secara real-time.
Di sinilah kamu butuh yang namanya API (Application Programming Interface).
API Itu Makanan Apa, Sih?
Simpelnya gini: Bayangkan kamu lagi di restoran. Kamu (Frontend) adalah pelanggan, dan dapur (Database/Server) adalah tempat makanannya. Kamu nggak bisa nyelonong masuk ke dapur buat ngambil makanan, kan?
Kamu butuh Pelayan. Nah, API itu adalah pelayannya.
Kamu bilang ke pelayan: "Minta data menu hari ini dong". Pelayan ke dapur, ngambil datanya, terus balik lagi ke meja kamu bawa datanya.
Kabar baiknya, di internet banyak banget "pelayan gratis" (Public API) yang siap ngasih data keren buat bahan latihanmu. Nggak perlu jago backend, cukup modal JavaScript dasar (fetch) aja.
Ini dia 5 Public API gratis dan unik yang wajib kamu coba buat proyek portofolio selanjutnya:
1. PokéAPI (Buat yang Mau Nostalgia)
Ini API paling populer buat belajar karena datanya RAKSASA, gratis total, dan nggak perlu daftar pakai kunci (API Key) yang ribet.
-
Data yang Dikasih: Segala hal tentang Pokémon. Mulai dari nama, gambar sprite, jurus (moves), tipe (api/air), sampai statistiknya.
-
Ide Project Portofolio: Bikin aplikasi "Pokédex Sederhana". Bikin fitur pencarian di mana user bisa ngetik "Pikachu", terus muncul gambar dan datanya. Ini bagus banget buat latihan memfilter data.
2. OpenWeatherMap (Project Wajib Anak IT)
Hampir semua tutorial coding pasti pernah bikin aplikasi cuaca. Ini klasik tapi sangat fungsional.
-
Data yang Dikasih: Data cuaca real-time, ramalan cuaca 5 hari ke depan, suhu, kelembaban, dari kota manapun di dunia. (Catatan: Ini butuh daftar gratis buat dapet API Key).
-
Ide Project Portofolio: Bikin widget "Cuaca Kampus Hari Ini". Aplikasi mendeteksi lokasi user (pakai Geolocation browser), lalu menampilkan suhu di tempat mereka berada sekarang. Keren kan?
3. Jikan API (Surganya Wibu)
Buat kamu yang hobi nonton anime, ini API wajib. Jikan adalah API tidak resmi dari situs MyAnimeList.
-
Data yang Dikasih: Database anime dan manga super lengkap. Sinopsis, rating, karakter, jadwal tayang musim ini, dll.
-
Ide Project Portofolio: Bikin web "Rekomendasi Anime Musim Ini". Tampilkan daftar anime yang lagi ongoing beserta ratingnya, terus kasih fitur filter berdasarkan genre.
4. FakeStoreAPI (Simulasi E-Commerce)
Pengen bikin web toko online tapi malas bikin backend produknya? Pakai ini aja.
-
Data yang Dikasih: Data dummy produk jualan (baju, elektronik, perhiasan) lengkap dengan harga, deskripsi, dan URL gambarnya. Bahkan ada simulasi fitur "cart" (keranjang belanja) juga.
-
Ide Project Portofolio: Bikin tampilan Katalog Toko Online. Fokuskan pada desain card product yang rapi dan fitur "Add to Cart" yang interaktif pakai JavaScript.
5. Quotable (Paling Simpel Buat Pemula)
Kalau 4 API di atas masih terasa terlalu rumit dan datanya kebanyakan, mulai dari sini dulu.
-
Data yang Dikasih: Kumpulan quotes (kutipan bijak) acak dari tokoh terkenal. Datanya simpel, cuma teks kutipan dan nama penulisnya.
-
Ide Project Portofolio: Bikin "Random Quote Generator". Bikin satu tombol, kalau diklik, muncul kutipan baru secara acak. Project simpel ini membuktikan kamu udah paham dasar cara request data ke API.
Kesimpulan
Website portofolio yang isinya data statis (diketik manual) itu ibarat rumah kosong. Rapi, tapi nggak ada kehidupannya.
Dengan menggunakan API, kamu menunjukkan ke recruiter bahwa kamu paham konsep komunikasi data, paham JavaScript modern (seperti async/await dan fetch), dan bisa menangani data yang dinamis.
Yuk, pilih satu API di atas yang paling menarik buatmu, buka dokumentasinya, dan mulai ngoding weekend ini! Bye-bye Lorem Ipsum! 👋
