ลองเล่น Visualize API responses ของ Postman

จะเรียกว่าเป็น feature ใหม่ของ Postman หรือป่าวนะ เพราะเห็นทาง chanel ใน youtube ของ Postman อัปโหลด demo ไว้ เมื่อ Aug 12, 2019 มันคืออะไรนะ วันนี้เลยมาลองเล่นเจ้าตัวนี้ดู

Visualize API responses

เขาได้เพิ่มการ visually represent ของ HTTP response มาให้ (ซึ่งในตัวอย่างจะใช้ของทาง Postman เองและจะมีแค่แบบตารางและแบบกราฟแท่ง) ซึ่งทาง Postman เขา set การ request body มาให้เรียบร้อยแล้ว และเมื่อเรากด send ในส่วนของด้านล่างให้เราเลือก “Visualize” มันจะแสดงข้อมูลแบบเป็นตารางให้เราเลย

ซึ่งถ้าเป็นตัวเลือกอื่นๆ ก็จะแสดงตามปกติที่เราคุ้นเคยหรือใช้กันเป็นประจำ เช่น เลือก Pretty และให้แสดงเป็นรูปแบบ JSON ก็จะแสดงข้อมูลเหมือนที่อยู่ในตารางภาพด้านบนเลย

แล้วมันดียังไง?

ทาง Postman เขาบอกว่า Visualizers เขาต้องการให้เรา focus กับ data ที่สำคัญ ที่เราสนใจจริงๆ และเป็นเครื่องมือที่เอาไว้สร้าง representation ของ API responses ซึ่งเราสามารถเลือก use case ที่มันตรงกับ business use cases ในรูปแบบของ visualize แทนที่จะต้องมาดูข้อมูลที่เป็น JSON หรือตัวหนังสือเยอะๆ

หรือถ้าข้อมูลที่ต้องการจะแสดงมันมีความซับซ้อนไม่เหมาะกับตารางก็สามารถเปลี่ยนมาใช้กราฟแท่งก็ได้นะ (ดูแบบมาโฆษณาให้เขาเนาะ ฮ่าๆ)

Using Visualizers

1. แบบตาราง

เริ่มแรกเลยเราจะใส่ข้อมูลที่จะ request เข้าไปก่อน

{
    "contacts": [
        {
            "name": "PK",
            "age" : 24,
            "phone": "1234",
            "email": "pk@example.com"
        },
        {
            "name": "Lek",
            "age" : 23,
            "phone": "5555",
            "email": "lek@example.com"
        }
    ]
}

และจากนั้นมาสร้าง template ที่จะให้ render ข้อมูลออกมาในรูปแบบตาราง

var template = `
    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
        {{#each response.data.contacts}}
            <tr>
                <td>{{name}}</td>
                <td>{{email}}</td>
            </tr>
        {{/each}}
    </table>
`;

ในส่วนนี้ทาง Postman เขาบอกสามารถสร้างไว้ใน Pre-request Script or Tests ก็ได้ กาดเลือกใน Test ไป โดยสร้างตัวแปร template และใส่คำสั่งของ html ที่จะสร้าง table ออกมา โดยต้องการให้แสดงข้อมูลแค่ name, email ก็จะกำหนด {{name}}, {{email}} ซึ่งเรียกว่า Handlebars

“Handlebars templates look like regular HTML, with embedded handlebars expressions” — Handlebars เป็น Javascript ไว้แสดงผลค่าโดยใช้ expression หรือ {{content}}

และยังมีคำสั่ง #each เพื่อเอามาวน loop ข้อมูล array #each response.data.contracts เอาค่า response.data ของ contracts มาวน loop

ซึ่งในตัวแปร {{name}}, {{email}} จะถูกแทนที่ด้วยข้อมูลที่ส่งผ่าน pm.visualizer.set() ที่จะเขียนเพิ่มเข้าไปท้ายของ template

// Set visualizer
   pm.visualizer.set(template, {
// Pass the response body parsed as JSON as `data`
   response: pm.response.json()
});

เมื่อเขียนทุกอย่างเสร็จแล้ว กด “Send” กันดูฮับ

สามารถ download script demo ของ Postman ได้ ที่นี่

Reference :

Visualize API responses | Postman Learning Center

Handlebars.js: Minimal Templating on Steroids