Mudah Membuat API Tanpa Koding dengan Strapi

Strapi adalah Content Management Framework (CMS) open source yang dikembangkan untuk membantu developer membangun API dengan jauh lebih mudah. Strapi dikembangkan di atas lingkungan Node.js yang sudah terbukti kehandalannya. Berikut beberapa fitur Strapi:

• Admin panel bawaan yang bisa di kostumisasi sesuai kebutuhan. Artinya kita bisa mengubah gaya maupun logika admin panel tersebut.
• Sistem plugin yang memungkinkan developer menambah fitur server API dengan sesuai keinginan.
• Front-end agnostic yang artinya bagiian frontend Strapi bisa dipasangkan dengan framework apapun (React, Vue, Angular, dsb.).
• Sistem keamanan standar (CSRF, CORS, P3P, Xframe, XSS, dsb.) yang sudah dibungkus langsung ke dalam Strapi.
• Berbasis komunitas sehingga memungkinkan Strapi untuk terus berkembang sebagai free and open source software.

Membuat API Blog Sederhana

Di tutorial ini kita akan belajar bagaimana membuat API blog sederhana yang mendemonstrasikan kemampuan Strapi.

Pemasangan Strapi

Untuk menggunakan Strapi pastikan untuk memasang aplikasi-aplikasi berikut terlebih dahulu.

• Node.js >= 10.x
• NPM >= 6.x
• Salah satu database berikut: MongoDB >= 3.x, MySQL >= 5.6, MariaDB >= 10.1, PostgreSQL >= 10

Strapi bisa pasang menggunakan NPM. Jalankan perintah berikut di terminal:

$ npm install strapi@alpha -g

Jika muncul pesan yang mengatakan masalah permission, tambahan perintah sudo sebelum npm.

Berikutnya periksa versi Strapi yang terpasanga:

$ strapi -v

Saat tulisan ini dibuat versi Strapi yang penulis miliki adalah 3.0.0-alpha.17.

Membuat project baru

Sekarang mari kita buat project baru dengan aplikasi strapi yang telah terpasang. Buka aplikasi terminal lalu jalankan perintah berikut:

$ strapi new blog

Kita akan diminta memilih produk database yang ingin dipakai. Di sini penulis akan menggunakan MySQL saja.

Lets configurate the connection to your database:
? Choose your main database: MySQL
? Database name: blog
? Host: 127.0.0.1
? Port: 3306
? Username: root
? Password: 

Pastikan bahwa database bernama blog sudah dibuat sebelum melakukan konfigurasi database.

Run the Server

Sekarang mari kita jalankan server ini.

$ cd blog
$ strapi start

Server Strapi bisa diakses melalui alamat http://localhost:1337 dan saat pertama kali di jalankan akann membawa kita ke http://localhost:1337/admin/plugins/users-permissions/auth/register untuk melakukan registrasi admin.

Jika sudah mengisi seluruh data yang diminta klik Ready to start. Checckbox di atas tombol Ready to start bersifat opsional. Hanya centang jika kamu ingin menerima informasi terbru lewat email dari pengembang Strapi.

Berikut tampilan dashboard Strapi saat pertama kali dimuat.

Membuat Content Type

Content Type adalah istilah yang digunakan oleh Strapi untuk mendefinisikan objek data yang ia miliki. Kita bisa mengatur setiap Content Type untuk memiliki nama, jenis data dan jenis media yang bisa disimpan ke dalam Content Type tersebut.

Strapi memiliki sebuah fitur bernama Content Type Builder, sebuah antarmuka yang membantu mendefinisikan struktur Content Type dengan beberapa klik saja. Karena kita akan membuat API untuk sebuah blog, maka mari kita buat sebuah Content Type untuk artikel.

Pertama, buka halaman Content Type Builder melalui menu yang ada di bagian sebelah kiri. Berikutnya klik tombol Add Content Type di tombol yang ada di sebelah kanan (perhatikan panah merah pada gambar di bawah):

Sebuah form dalam bentuk modal akan muncul.isikan kolom name dengan nama Content Type yang akan dibuat. Untuk pilihan connection biarkan saja default. Kolom description boleh di isi boleh juga tidak. Klik tombol save setelah selesai.

Setelah membuat Content Type, kita akan diminta menentukan jenis field/kolom yang kita ingin ada di dalam Content Type tersebut. Agar tetap sederhana, mari kita tambahkan tiga kolom bernama judul, isi, dan sampul yang masing-masing berjenis string, text, dan media. Gunakan tombol Add new field untuk menambahkannya.

Jenis data untuk field Content Type

Ada sebelas jenis data yang bisa kita pilih untuk setiap field/kolom Content Type diantaranya:

1. String - Untuk data teks.
2. Text - Untuk data teks seperti String, tapi umumnya untuk teks yang lebih panjang seperti deskripsi, paragraf, artikel, dokumen, komentar, dsb.
3. Number - Untuk data berupa angka baik itu bilangan bulat maupun riil.
4. Boolean - Untuk data benar-salah.
5. Date - Untuk jenis data yang menyatakan tanggal/waktu.
6. JSON - Untuk data jenis teks seperti String, tapi harus memiliki struktur JSON yang valid.
7. Email - Untuk data email.
8. Password - Dipakai untuk menyimpan password.
9. Media - Untuk menyimpan data berupa file gambar, video, PDF, dsb.
10. Enumeration - Untuk data berupa pilihan jawaban.
11. Relation - Untuk menentukan hubungan antar Content Type

Berikut gambar Content Type artikel setelah diberikan field-field.

Klik tombol save untuk menyimpan.

Operasi CRUD di Strapi

Sebagian besar waktu kita dalam melakukan manajemen konten tentu saja melakuakn operasi create, read, update, dan delete atau yang sering dikenal dengan akronim CRUD. Operasi-operasi ini sudah disediakan secara langsung oleh Strapi.

Setiap kali kita membuat Content Type dan menyimpannya, akan muncul sebuah menu baru di sebelah kiri atas (lihat gambar).

Tambahkan beberapa data baru. Salin saja beberapa artikel yang ada di Codepolitan untuk mengisinya.

Seperti yang bisa kalian lihat juga, halaman ini sudah memiliki fitur untuk melakukan pencarian atau penyaringan berdasarkan masing-masing field yang ada di Content Type. Kita bisa mengatur untuk menampilkan berapa data untuk setiap halaman. Pagination pun sudah langsung aktif dari sananya. Field yang ditampilkan dalam tabel juga bisa ditentukan apa saja.

Mengaktifkan WWYSIWYG Untuk Field Isi

Saat menambahkan artikel baru, kamu pasti menyadari bahwa kolom isi merupakan sebuah textarea. Pada umumnya kita ingin menggunakan editor WYSIWYG untuk sebuah konten yang banyak isinya. Strapi pun sudah memiliki fitur ini.

Kembali ke Content Type Builder, pilih Artikel, kemudian klik gambar ikon edit pada kolom isi. Pindah ke tab advanced setting, lalu centang Display as a WYSIWYG.

Klik Continue lalu klik tombol Save. Perhatikan perbedaan form sebelum dan sesudah mengaktifkan opsi display as a wysiwyg.

Konsumsi API Blog

Sekarang kita sudah memiliki data yang siap untuk dikonsumsi. Data ini mungkin ingin dikonsumsi oleh aplikasi mobile, mungkin juga untuk dikonsumsi oleh bagian frontend aplikasi web. Agar sebuah Content Type bisa dikonsumsi oleh dunia luar, kita perlu mengatur agar Content Type tersebut memiliki permission Public.

Klik menu Roles & Permission di menu yang ada di sebelah kiri.

Ada tiga role yang tersedia langsung yaitu Administrator, Authenticated, dan Public. Kita akan mengatur agar Artikel memliiki akses Public. Klik pada menu Public di halaman Roles & Permission yang telah di buka.

Atur permission yang ingin diberikan pada public terhadap artikel. Seluruh opsi di centang hanya untuk contoh, pada umumnya public tidak memiliki akses untuk membuat (create), menghapus (destroy), atau mengubah (update) tanpa melakukan autentikasi terlebih dahulu.

Jika terdapat field upload, dan ingin bisa mengunggah file melalui POST atau UPDATE, kita juga perlu mengaktifkan permission upload.

Jangan lupa untuk menakan tombol Save setelah selesai.

Mengambil Seluruh Data (GET)

Kita bisa mengakses seluruh data menggunakan endpoint http://localhost:1337/artikels dimana artikels merupakan nama Content Type yang tadi kita buat.

Kita juga bisa melakukan filter atau pengurutan. Misalnya, untuk melakukan pencarian artikel dengan judul yang mengandung CSS adalah http://localhost:1337/artikels?judul_contains=CSS Untuk semua opsi filter silahkan kunjungi dokumentasi resminya di sini.

Mengambil salah satu data (GET)

Untuk mengambil salah satu data caranya sangat mudah, cukup tambahkan nomor id data yang ingin diambil di ujung endpoint sebelumnyahttp://localhost:1337/artikels/{id}.

Menambah Data Baru (POST)

Untuk mengirimkan pesan POST kita bisa memanfaatkan aplikasi Postman atau Curl. Di sini penulis menggunakan Postman supaya lebih mudah. Endpoint untuk membuat data baru sama dengan endpoint untuk mengambil seluruh data, hanya saja operasi yang dipilih mesti berjenis POST seperti gambar di bawah.

Hmm, bukankah tadi ada field sampul untuk menyimpan gambar thumbnail artikel? Strapi tidak menyimpan informasi gambar di satu tabel yang menyebabkan kita tidak bisa mengunggah gambar sampul atau file jenis apapun di satu request. Untuk mengunggah sebuah file kita harus melakukan operasi terpisah dengan melakukan request ke http://localhost:1337/upload seperti pada gambar berikut.

Key untuk sebuah file adalah files. Key ref dipakai untuk menentukan file yang kita upload ini dimiliki oleh model (Content Type) apa. Karena sebuah artikel memiliki sebuah gambar, maka kita nyatakan isi ref sebagai artikel. Artikel ada banyak, maka kita tentukan artikel dengan id apa yang memiliki gambar ini melalui key refId. Di model artikel tadi kita sudah menentukan bahwa atribut yang menyimpan gambar merupakan sampul, maka kita isikan nama atribut ini sebagai isi key field.

Kirimkan request POST ini dan perhatikan di panel admin Strapi bahwa data yang tadi kita buat sudah memiliki gambar sampul meskipun kita upload dengan dua request yang berbeda.

Mengubah Data (PUT)

Mengubah data salah satu artikel bisa kita lakukan dengan melakukan request PUT ke http://localhost:1337/artikels/{id}. Contoh berikut ini kita ingin mengubah judul artikel ber-id 4.

Menghapus Data (DELETE)

Menghapus salah satu data caranya sangat mudah. Cukup buat sebuah request DELETE ke endpoint http://localhost:1337/artikels dengan id data yang ingin dihapus.

Penutup

Tutorial ini hanya memberikan gambaran singkat akan fitur standar yang dimiliki oleh Strapi. Masih ada banyak lagi fitur yang dimilikinya. Selain itu kita juga bisa menambah fungsi yang tidak tersedia langsung oleh Strapi dengan memodifikasi source code-nya secara manual jika memang diperlukan.

Akhir kata, semoga bermanfaat dan jangan lupa bahagia.