Copy-Paste Token dengan Postman Jadi Lebih Mudah

Restful pasti beberapa menggunakan sistem auth token dimana token menjadi key untuk bisa masuk mengakses data resource tertentu yang sifatnya tidak public. Misalnya, jika ingin mengakses data order dari satu customer tertentu, maka untuk mengaksesnya kita membutuhkan identitas order milik siapa ini? Nah biasanya kan kita pakai session, di Restful tidak mengenal session jadi perlu token untuk mengetahui id atau kepemilikan order tersebut.

Token ini bersifat sementara, jika temen-temen menggunakan tokopedia/bukalapak apps android. Kadang mereka meminta untuk login ulang. Kenapa login ulang? karena token sudah expired jadi kita perlu mendapatkan token lagi dengan cara login kembali ke sistem mereka.

Pada real kenyataannya adalah orang testing atau programmer pasti melakukan test untuk akses data order dengan token. Nah karena token ini berubah-ubah, jika di Postman saya biasanya akses kembali auth/login. Lalu setelah dapet token, token itu saya copy lalu saya paste pada resources order di headernya. Jadi repot mesti copy-paste bolak-balik jika token berubah.


[crp]


Untungnya, Postman lagi-lagi memudahkan kita dalam melakukan development/testing dengan linkungan postman. Di Postman ada istilah “Test”, dalam artian linkungan untuk melakukan testing. Ada banyak langkah-langkahnya sebenernya, temen-temen bisa lihat di link ini untuk dokumentasi lebih lengkap. https://www.getpostman.com/docs/postman/scripts/test_scripts

Balik ke kasus kita tadi, kita ingin ketika kita mendapatkan token baru, resource seperti order atau resource lain seperti data profile, data history wallet atau data lainnya yang terikat dengan token itu otomatis ter-set/tersimpan dengan token yang baru. Bagaimana caranya set di Postman?

Pada endpoint login/auth temen-temen, tinggal ditambahkan kode untuk test di Postman seperti endpoint saya ini.

Postman Test 1
Postman Test 1

Pada gambar saya arahkan ke tab “Tests”, lalu saya isi seperti diatas:
var jsonData = JSON.parse(responseBody);. Kita buat variable dengan nama jsonData dimana isinya itu adalah result dari endpoint /auth ini. Terlihat JSON.parse(responseBody) melakukan parse dari responseBody si Postman.
tests[“Access Token is not empty”] = jsonData.access_token !== undefined;. Kode ini adalah memberikan flag/tanda suatu test atau memberikan nama suatu flag/tanda test. Pada kode itu saya kasih nama test “Access token is not empty”, nanti valuenya itu berupa boolean (false or true) sesuai dengan kondisi dari pembanding setelahnya yaitu kode “jsonData.access_token !== undefined”. Kode tersebut untuk mengecek bahwa responseBody itu yang kita simpan di variable jsonData itu pasti memiliki data access_token.
postman.setEnvironmentVariable(“jwt_token”, jsonData.access_token);. Pada kode ini saya set variable/label Postman yaitu ‘jwt_token’ dengan isi dari jsonData.access_token. Nah variable/label Postman ini yang kita set pada resource yang membutuhkan token. Contoh kasus adalah misalnya berikut ini.

Postman Test 2
Postman Test 2

Format ini adalah format Flask-JWT. Jadi Authorization di isi value cukup dengan JWT {{ jwt_token }}. Nah jwt_token ini didapat dari tab “Tests” di endpoint /auth barusan.

Jadi dengan cara ini kita tidak perlu copy-paste token berulang kali pada Postman.

Keren ya si Postman 🙂

Mengatur Environment Pada Postman

Yang baru menggunakan Postman pasti bingung ketika mencoba testing Restful di localhost dengan testing Restful di live server. Dulu saya copy paste url untuk mencoba url localhost dengan url live server. Ini agak merepotkan kita lho, untungnya Postman baik hati. Pada Postman kita diberikan akses kemudahan untuk mengatur lingkungan/environment dalam melakukan testing terhadap Restfull API yang telah kita buat.

Ketika pertama mungkin kita menuliskan URL Resfull seperti ini ya.

Restfull Postman 1
Restfull Postman 1

Kita Post URL tersebut untuk mengetahui jalan gak nih restful yang kita buat. Nah jika live server mungkin diganti dengan url “https://api.xxxx.id” ya..hehe

Ini merepotkan, baiknya buat environment dalam Postman, caranya adalah

Langkah pertama, Pojok kanan atas Postman ada icon pengaturan, tekan lalu pilih yang “Manage Environments

Postman Environment 1
Postman Environment 1

Baik, setelah itu akan muncul gambar seperti dibawah ini jika Manage Environments dipilih.

Postman Environment 2
Postman Environment 2

Pada gambar diatas, saya ada 1 environment yaitu section 6. Nah mari kita coba buat 1 lagi environment. Caranya adalah pilih “Add” sehingga muncul gambar seperti ini.

Postman Environment 3
Postman Environment 3

Pada kolom “Environment Name”, ketik sembarang sesuai keinginanmu. Misalnya saya ketik “LiveServer”.

Lalu pada kolom key, saya isi misalnya label “URL” dengan value misalnya “https://api.liveserver.id”


[crp]


Jika sudah, jangan lupa tekan tombol “Add” kembali untuk menyimpan perubahan yang telah kita lakukan bro.

Postman Environment 4
Postman Environment 4

Terlihat pada gambar, terdapat environment “LiveServer”, jika dipilih akan muncul label “URL” yang telah kita set sebelumnya. Setelah itu close aja.

Bisa di update dan ditambah gak ya? Bisa doong 🙂 Sesuai kebutuhan aja..

Baik, setelah kita sudah set environment postman lalu mengisi label/variable pada postman tersebut. Mari kita pakai tuh variable “URL” di restful kita. Caranya adalah, pilih URL endpoint tertentu, misalnya saya disini endpoint get token /auth. Lalu ganti “http://localhost/” menjadi “{{URL}}” sehingga seperti gambar dibawah ini nih bro.

Postman Environment 5
Postman Environment 5

Bisa dilihat ya:

  1.  URL nya kita set seperti itu yaa..jangan lupa terdapat “slash” karena diawal kita set URL variable postman itu tanpa slash.
  2. Di pojok kanan atas ada bacaan “No Environment”. Nah itu kita ganti dengan cara memilih environment yang barusan kita buat yaitu “LiveServer”.

Mantap, sekarang mau gonta ganti URL localhost atau liveserver itu jadi mudah. Tinggal ganti aja environment tersebut tanpa harus ganti-ganti lagi URL Restful kita. Mudah ya..

Nice Postman!

 

Gunakan Sentry untuk Monitoring Error di live Aplikasi

Aplikasi anda sudah live? Waw keren..Sebelum live pasti ada proses sebelumnya itu adalah pengujian/testing. Proses pengujian bisa dilakukan secara manual atau otomatis. Manual disini maksudnya adalah orang yang melakukan pengujian. Di dunia kerja pemrograman mungkin ada yang pernah denger QA/Tester. Orang itulah yang melakukan pengujian/testing secara manual ataupun otomatis.

Namanya orang, seperti sifatnya itu “tidak sempurna” maka aplikasi yang diuji mungkin bisa saja error itu lolos dan tidak sempat teruji oleh orang tersebut. Namun apakah kita akan begitu saja meloloskan error tersebut? Tidak ya..

Ada tool untuk memonitoring error di aplikasi kita. Ada banyak sekarang-sekarang ini sebenernya cuma yang sudah saya pakai dan gunakan adalah Sentry. Apa keunggulan Sentry?

Cara install yang mudah

Dari cara installnya ke aplikasi kita cukup mudah. Saya pakai laravel dan ada component yang di install lalu setting sedikit dan tadaa..error pun ter-track dan masuk notifikasi ke email kita. Kadang mencoba selain sentry itu rada susah. Apa saya yg kudet ya..btw benern ini installnya gampang kok

Notifikasi ke email jika ada error/bug

Nah ini yang penting, jika ada error/bug Sentry langsung mengirimkan notifikasi ke email kita. Dengan fitur ini, kita tidak perlu pantengin melotot terus liat log aplikasi kita. Cukup hidupkan email notifikasi di hape kita dan tiap notifikasi dari Sentry kita dapatkan.

Informasi error yang detail

Ketika mendapatkan error notifikasi via email, saya mendapatkan informasi yang sangat jelas sekali seperti error ini terjadi jam berapa, terjadi di controller apa, lalu di method/fungsi apa, error note nya apa sehingga kita mudah untuk melakukan perbaikan secepat mungkin.

Berikut contoh screen yang saya dapatkan di salah satu project saya.

sentry email 1

sentry email 2

sentry email 3

Dari gambar itu juga terlihat jelas error tersebut terjadi di browser apa, mesin yang akses itu apa dan lain sebagainya.

Jika kita masuk ke Dashboard Sentry akan seperti ini.

detail error sentry

Enak banget ya..
Dikasih tau kode yang error dimana, hehe..

Track Error dan sharing ke tim untuk perbaikan

Setelah error ketemu, lalu bagaimana? ya kita inform ke tim programmer untuk melakukan perbaikan. Enaknya Sentry ini ada semacam tag/penanda, oh ini error yang pegang si programmer A, oh ini error sudah solved, oh ini error muncul kembali di sini dan sana. Ini enak banget untuk mengetahui kondisi error tersebut sudah diperbaiki atau belumnya. Head programmer tinggal assign ke beberapa programmer untuk menyelesaikan error tersebut.

fitur sentry

Integrasi dengan Tool lain

Anda sering pakai Trello? atau mungkin pakai Jira? naaah Sentry ini bisa dikonekin ke tool lain. Jadi otomatis/manual nongol di Trello kita jika ada error. Ini ngebantu buat tim programmer kita untuk fokus di satu tool misalnya Trello atau lainnya.

sentry dengan tool lain

Ada banyak lagi fitur menari sentry, tapi mungkin gak semua free yaa 😀

Permasalahan Image Width dan Height pada CKEditor

Saya menggunakan CKEditor untuk editor WYSIWYG sekaligus image upload yang belum sama sekali saya gunakan dikerjaan. Awalnya bermasalah ketika image upload karena default-nya kita hanya dikasih fitur untuk copy paste URL image yang mau kita sisipkan pada editor. Permasalahan tersebut akan saya post nanti. Permasalahan lain muncul ketika bermain dengan properties image yaitu width dan height. Saya coba ganti image width dan height nya namun tidak ada perubahan kode pada editor. Misalnya ada image seperti berikut. Continue reading Permasalahan Image Width dan Height pada CKEditor

Error Uncaught exception ‘ImagickException’ with message ‘WriteBlob Failed’ saat convert SVG ke PNG dengan Imagick

Awalnya kepingin convert SVG ke PNG buat nolongin temen yang disuruh convert trus resize dari SVG ke PNG dengan 2 ukuran dan jumlah-nyaaaa 1000-an gambar SVG 😀 (kebayang pegel-nya). Pas cari-cari tutor, ketemu contoh sederhana di sini : http://stackoverflow.com/questions/4809194/convert-svg-image-to-png-with-php. Continue reading Error Uncaught exception ‘ImagickException’ with message ‘WriteBlob Failed’ saat convert SVG ke PNG dengan Imagick

Gunakan Google PageSpeed untuk mengecek kecepatan website anda

Kecepatan akses sebuah website menjadi salah satu faktor berhasilnya sebuah website. Kenapa ? karena dengan cepatnya sebuah website, otomatis google juga lebih prefer menayangkan website kita pada halaman pertama. Selain itu pula, kecepatan website pun jadi faktor user gak kesel (something about UX). Beberapa user langsung close browser mereka ketika membuka suatu website yang berat sekali dibuka. Apalagi buka di smartphone mereka. Continue reading Gunakan Google PageSpeed untuk mengecek kecepatan website anda

Setting Sublime menjadi default editor pada Ubuntu

Jika ingin menjadikan sublime sebagai default editor pada ubuntu Anda. Berikut adalah step untuk menyettingnya.

Pertama, pastikan terdapat sublime-text-2.desktop pada folder /usr/share/applications/. Jika ada, buka defaults.list pada folder strong>/usr/share/applications/

sudo subl /usr/share/applications/defaults.list

Jika sudah terbuka, control + H saja untuk mereplace gedit.desktop menjadi sublime-text-2.desktop. Simpan, dan tadaaa…sublime sudah menjadi default editor pada ubuntu.

Cara Mudah Install Sublime di Ubuntu

Berikut adalah cara mudah install sublime di Ubuntu. Anda cukup ketikan kode dibawah ini pada terminal anda.

sudo add-apt-repository ppa:webupd8team/sublime-text-2
sudo apt-get update
sudo apt-get install sublime-text

Jika sudah, anda dapat mengetikan subl [space] nama_file untuk dibuka dengan sublime melalui terminal.

Berkenalan dengan Kendo UI

Mungkin teman-teman pernah main di jQuery UI, atau mungkin ada plugin-plugin lainnya yang berkaitan dengan UI. Sebagian yang lain ada yang bermain di ExtJS milik Sencha ya ??. Kini ada lagi namanya Kendo UI. Saya mulai tertarik Kendo ketika bekerja di salah satu perusahaan dan implement laporan dan grafik dengan DataViz milik Kendo. Setelah berhasil implement, renderingnya itu cepet dan animasinya pun menarik. Continue reading Berkenalan dengan Kendo UI