PHP Lumen Service Docs

PHP Lumen Service Docs

Image result for lumen logo
Hai sobat bukan ngoding kembali lagi di blog ini, kali ini saya akan membahas service docs. Saat ini API yang kita buat belum memiliki dokumentasi. Kita akan membuat dokumentasi bagaimana cara mengakses API yang telah kita buat.
Mempersiapkan Docs Generator
Untuk membuat docs generator kita akan menggunakan swagger-ui (https://swagger.io/tools/swagger-ui/). Pertama kita install terlebih dahulu swagger-php plugins nya menggunakan composer seperti berikut.
composer require zircote/swagger-php
Screenshot_22.png
Selanjutnya membuat artisan command file. Buat file app/Console/Commands/SwaggerDocScanner.php
Screenshot_23.png
Buka file app/Console/Kernel.php, tambahkan code berikut pada variabel commands.
Screenshot_24.png
Untuk menjalankan artisan command SwaggerDocScanner dan menggenerate docs, pada terminal/CommandPrompt jalankan command php artisan swaggerdoc:scan, command teserbut akan membuat file public/swaggerdoc.json. Saat ini kalau dijalankan, command ini bakal error, karena kita belum mendefiniskan anotasi docs nya.
Untuk tampilan User Interface nya kita perlu mebuat file html di public folder. Buat file public/api-docs.html, code nya seperti berikut.
Screenshot_25.png
Jalankan servernya, kemudian akses endpoint http://localhost:8000/api-docs.html, maka tampilan akan seperti berikut.
Screenshot_26.png
Membuat Dokumentasi API (Get Request)
Kita akan membuat API dokumentasi untuk endpoint /register. Buka file app/Http/Controllers/Controller.php, tambahkan code dibawah ini.
Screenshot_27.png
Buka file app/Http/Controllers/Public/PostsController.php, tambahkan code dibawah ini.
Screenshot_29.png
Pada terminal/CommandPrompt jalankan command di bawah ini.
php artisan swaggerdoc:scan
Setiap kali anda mengubah anotasi docs, harus menjalankan command tersebut supaya bisa update docs nya.
Screenshot_28.png
Screenshot_30.png
Jika di click pada button GET, maka tampilanya akan seperti berikut.
Screenshot_31.png
Silahkan dicoba dengan mengklik button Try it out.
Membuat Dokumentasi API (Post Request)
Kali ini kita akan membuat t API dokumentasi untuk endpoint /register. Untuk membuat dokumentasi API mengenai Post Request, buka file App/Http/Controllers/AuthController.php dan tambahkan code berikut.
Screenshot_32.png
Pada terminal/CommandPrompt jalankan command di bawah ini. Setiap kali anda mengubah anotasi docs, harus menjalankan command di bawah ini supaya bisa update
docs nya.
php artisan swaggerdoc:scan
Akses kembali endpoint http://localhost:8000/api-docs.html
Screenshot_33.png
Jika di click pada button POST, maka tampilannya akan seperti berikut.
Screenshot_34.png
Silahkan dicoba dengan mengklik button Try it out.
Membuat dokumentasi untuk semua endpoint
Pertama kita akan membuat dokumentasi untuk endpoint user login, tambahkan script berikut pada AuthController.php.
Screenshot_35.png
Jalankan command berikut pada terminal.
php artisan swaggerdoc:scan
Akses kembali http://localhost:8000/api-docs.html, maka akan muncul endpoint untuk user login.
Screenshot_36.png
Silahkan dicoba dengan mengklik button Post lalu Try it out.
Screenshot_37.png
Jika berhasil maka akan muncul respon token yang akan kita gunakan untuk authentication.
Tambahkan script berikut pada Controller.php untuk menambahkan fitur authorization agar semua endpoint post yang akan kita akses perlu mengirimkan token terlebih dahulu.
Screenshot_38.png
Jalankan kembali command berikut.
php artisan swaggerdoc:scan
Maka ketika mengakses http://localhost:8000/api-docs.html, akan muncul button Authorize sebagai akses token yang kita gunakan untuk mengakses endpoint.
Screenshot_39.png
Selanjutnya kita akan membuat dokumentasi untuk function show tambahkan script berikut pada Public\PostsController.php.
Screenshot_40.png
Jalankan kembali command berikut.
php artisan swaggerdoc:scan
Kemudian akses kembali http://localhost:8000/api-docs.html, maka akan muncul endpoint baru.
Screenshot_41.png
Coba dengan klik button GET, lalu Try it out.
Dokumentasi untuk endpoint /posts
Sebelumnya kita baru membuat dokumentasi pada endpoint /public/posts, selanjutya kita akan akan membuat dokumentasi untuk endpoint /posts, tambahkan script2 berikut pada setiap function di controller App\Http\Controllers\PostsController.php.
Screenshot_42
Screenshot_66.png
Screenshot_44.png
Screenshot_65.png
Screenshot_64.png
Seperti biasa jalankan command berikut.
php artisan swaggerdoc:scan
Maka akan muncul endpoint-enpoint berikut.
Screenshot_50.png
Sekarang tinggal kita test satu per satu endpoint Posts, namun sebelum itu kita perlu login terlebih dahulu untuk mendapatkan access token. Klik endpoint User login, klik Try it out, masukkan value email dan password yang valid, lalu execute.
Screenshot_53.png
Jika berhasil maka akan muncul respon access token.
Screenshot_54.png
Klik Authorize, dan masukkan access token nya.
Screenshot_55.png
Pertama kita coba akses endpoint get posts, klik Try it out, bisa dengan mengirimkan parameter page ataupun tidak, lalu execute.
Screenshot_57.png
JIka berhasil respon akan seperti berikut.
Screenshot_56.png
Kedua kita coba create new posts, klik Try it out, lalu ketikkan value yang akan dikirimkan, kemudian execute.
Screenshot_51
Jika berhasil maka respon akan seperti berikut.
Screenshot_52.png
Ketiga ktia coba akses endpoint Get posts by id denga mengirimkan parameter berupa id posts.
Screenshot_67.png
JIka berhasil respon akan seperti berikut.
Screenshot_59.png
Keempat kita coba akses endpoint Update posts, dengan mengirimkan parameter id, dan value untuk update data posts.
Screenshot_60.png
Jika berhasil maka respon akan seperti berikut.
Screenshot_61.png
Terakhir kita coba akses endpoint Delete post by id dengan mengirimkan paramter id.
Screenshot_62.png
Jika berhasil maka respon akan seperti berikut.
Screenshot_63.png
Sekian tutorial membuat dokumentasi API menggunakan swagger ini, selamat mencoba.

Comments

Post a Comment

Popular posts from this blog

Microservice

Image
    Microservice menjadi salah satu arsitektur yang banyak didiskusikan oleh para developer pada saat ini, Alasannya karena microservice dapat membantu developer dalam membuat aplikasi yang high performance, scalable, reliable dan secure. Jadi apa itu Microservice ?     Microservices berarti membagi aplikasi menjadi layanan yang lebih kecil dan saling terhubung tidak seperti aplikasi monolitik. Monolitik sendiri merupakan sebuah arsitektur dimana dalam pembuatan aplikasi. semua komponen menjadi satu kesatuan, dalam hal ini satu kesatuan berarti menyatukan antara front-end dan backend dalam satu aplikasi yang sama.    Contoh penggunaan microservice ini misal dalam sebuah Aplikasi online shop yang terdiri dari beberapa fitur, ada fitur untuk menampikan produk, menambah ke keranjang, dan pembayaran. Fitur-fitur tersebut dibangun dalam service yang berbeda atau aplikasi yang berbeda dan database yang berbeda pula. Dalam penggunaannya service-service ...
Read more

Directive dan List Vue.js

Image
Directive dan List Vue.js Hallo teman-teman, kali ini kita akan membahas directive dan list pada  vue.js . Masih dalam project yang sama, buatlah sebuah file baru dengan nama  directive.html  dan tuliskan codenya seperti berikut. v-if Sekarang jalankan pada brosernya maka akan muncul tampilan berikut. Sekarang coba ganti data jumlahnya. Lalu jalankan kembali browsernya, maka akan muncul tampilan berikut. Directive ini juga tetap memiliki sifat reactive. Sebagai contoh, jika pada saat runtime, kemudian variable jumlahnya diubah menjadi ’75’ dengan cara menulis perintah  vm.nilai  = ’75’, maka view akan dirender ulang. v-on Kali ini kita akan mencoba event v-on, ada banyak seklai event-event di dalam  vue.js  ini, kali ini kita hanya mencoba event onclick. Masih dalam file yang sama, tambahkan script berikut. Ketika button di klik akan memunculkan alert konfirmasi, silahkan jalankan pada browser dan lihat hasilny...
Read more

Form dan Filtering Vue.js

Image
Form dan Filtering Vue.js Hallo teman-teman, kali ini saya akan membahas mengenai form input menggunakan  vue.js . Form ini nantinya akan menampilkan setiap inputan dan mengirimkan data ke server php. Form Input Pertama kita buat file baru dengan nama  form.html , seperti biasa import terlebih dahulu library vue js nya pada tag script di header. Dalam mendesign form ini kita buat tampilannya agar terlihat lebih menarik dengan menggunakan library bootstrap, agar tidak perlu mendownload terlebih dahulu kita import saja librarynya via link cdn yang bisa di dapat pada dokumentasi bootstrap. Tambahkan pada tag header project kita seperti berikut (dengan catatan harus terkoneksi internet). Pada form input kali ini kita akan mencoba semua tipe inputan seperti text, number, textarea, checkbox, selectbox, radio button, dan file. Design tampilan form nya seperti berikut. Ketika form input di inputkan, maka akan menampilkan setiap teks yang di bungkus di dapal tag ...
Read more