Month: March 2022

  • Oracle: แปลงข้อมูล JSON เป็น Table หรือ View

    ในการส่งข้อมูลระหว่างแอพพลิเคชัน ในปัจจุบันปฏิเสธไม่ได้ว่ารูปแบบ JSON ได้รับความนิยมสูงมาก วันนี้มีโจทย์ในการพัฒนาระบบอย่างนึงที่ผมเจอคือ ได้ข้อมูลจาก log มาจัดเก็บในฐานข้อมูลซึ่งอยู่ในรูปแบบ JSON แต่ต้องการแยกเก็บเป็นฟิลด์เพื่อนำไปประมวลผล และวิเคราะห์ต่อ

    วิธีการแปลงข้อมูลที่ผมเลือกใช้ คือใช้ฟังก์ชัน JSON_TABLE โดยตัวอย่างข้อมูล JSON มีรูปแบบดังนี้

    {
      "latencies": {
        "request": 232,
        "kong": 12,
        "proxy": 220
      },
      "service": {
        "host": "alist-demo.psu.ac.th",
        "created_at": 1641960693,
        "connect_timeout": 60000,
        "id": "c00d9805-c281-4283-ab68-54e99719634a",
        "protocol": "http",
        "name": "test",
        "read_timeout": 60000,
        "port": 80,
        "path": "/services/commonservice.asmx/GetSite",
        "updated_at": 1646117362,
        "ws_id": "4920834d-f36d-41f6-8e98-959b4ec18b1b",
        "tags": {},
        "retries": 5,
        "write_timeout": 60000
      },
      "request": {
        "querystring": {},
        "size": 226,
        "uri": "/alist/getsite",
        "url": "http://api-gateway.psu.ac.th:8000/alist/getsite",
        "headers": {
          "host": "api-gateway.psu.ac.th:8000",
          "postman-token": "c7ee397e-1570-4e5d-9930-eac24fd2ecbc",
          "user-agent": "PostmanRuntime/7.29.0",
          "accept": "*/*",
          "connection": "keep-alive",
          "accept-encoding": "gzip, deflate, br"
        },
        "method": "GET"
      },
      "client_ip": "192.168.3.174",
      "tries": [
        {
          "balancer_latency": 0,
          "port": 80,
          "balancer_start": 1648009515575,
          "ip": "192.168.100.177"
        }
      ],
      "upstream_uri": "/services/commonservice.asmx/GetSite",
      "response": {
        "headers": {
          "content-type": "text/xml; charset=utf-8",
          "x-powered-by": "ASP.NET",
          "x-kong-proxy-latency": "12",
          "cache-control": "private, max-age=0",
          "x-ratelimit-remaining-minute": "9",
          "date": "Wed, 23 Mar 2022 04:25:15 GMT",
          "via": "kong/2.2.2",
          "x-aspnet-version": "4.0.30319",
          "x-frame-options": "SAMEORIGIN",
          "ratelimit-reset": "45",
          "content-length": "2622",
          "x-ratelimit-limit-minute": "10",
          "server": "Microsoft-IIS/10.0",
          "ratelimit-remaining": "9",
          "ratelimit-limit": "10",
          "x-kong-upstream-latency": "220",
          "connection": "close"
        },
        "status": 200,
        "size": 3109
      },
      "route": {
        "id": "db8cc7a7-77bb-4a3a-a059-06b8de3aa549",
        "paths": [
          "/alist/getsite"
        ],
        "protocols": [
          "http",
          "https"
        ],
        "strip_path": true,
        "created_at": 1641960726,
        "ws_id": "4920834d-f36d-41f6-8e98-959b4ec18b1b",
        "request_buffering": true,
        "name": "test-getsite",
        "updated_at": 1647326716,
        "preserve_host": false,
        "regex_priority": 0,
        "response_buffering": true,
        "https_redirect_status_code": 426,
        "path_handling": "v1",
        "service": {
          "id": "c00d9805-c281-4283-ab68-54e99719634a"
        }
      },
      "started_at": 1648009515563
    }

    จะเห็นได้ว่ามีจำนวน Key และ Value จำนวนมากและอยู่ในรูปแบบ Parent Chid ด้วยแต่สามารถสร้าง View หรือ Table จากข้อมูลดังกล่าวด้วยคำสั่งเดียวดังนี้

      create or replace view v_log_traffic as 
      select t.*
      from log_traffic l,
        json_table(l.detail, '$'
        columns
          service_name path '$.service.name',
          service_path path '$.service.path',
          request_url path '$.request.url',
          client_ip path '$.client_ip',
          response_status path '$.response.status',
          response_size path '$.response.size',
          latencies_request path '$.latencies.request',
          latencies_kong path '$.latencies.kong',
          latencies_proxy path '$.latencies.proxy') t;

    สังเกตุว่า จุดสำคัญคือคำสั่ง json_table ที่เราจะต้องระบุฟิลด์ที่เก็บข้อมูล JSON ของเราดังในตัวอย่างคือ l.detail ที่เดิมเก็บอยู่ในตาราง log_traffic โดยใช้ path ย่อเป็น ‘$’ จากนั้นระบุ Keyword columns และตั้งชื่อ columns สำหรับ view ที่เราจะสร้างเช่น service_name ซึ่งใช้เก็บข้อมูลที่อยู่ใน path ดังนี้ ‘$.service.name’ เป็นต้น ซึ่งเมื่อรันคำสั่งดังกล่าวจะได้ view ดังรูป

    ในเรื่องของประสิทธิภาพพบว่าประมวลผลจำนวน 4000+ รายการใช้เวลาประมาณ 0.0008 วินาที ซึ่งถือว่ารวดเร็ว แต่ถ้าจำนวนข้อมูลมากขึ้น และประมวลผลช้าลงอาจปรับเป็น Materialize View หรือวิธีการอื่นๆ ที่ใช้ในการประมวลผลเฉพาะรายการที่เพิ่มใหม่ หรือประมวลผลตามรอบเวลา (ไม่เรียลไทม์) โดยใช้คำสั่งดังกล่าวช่วยก็ได้เช่นกัน หวังว่าจะเป็นประโยชน์สำหรับท่านที่มีโจทย์ประมาณนี้นะครับ

  • คูล ๆ รู้ค่าสีด้วย ColorPick Eyedropper

    วันนี้เราจะมารู้จักและใช้งานส่วนขยายของบราวเซอร์เพิ่มกันอีกซักตัวนะคะ โดยส่วนขยายที่จะมานำเสนอในวันนี้นั้น เป็นส่วนขยายที่จะช่วยให้สายออกแบบ/กราฟฟิก สวย ๆ คูล ๆ อย่างพวกคุณ รู้ได้อย่างง่ายดายเลยว่าสีที่สนใจบนเว็บนั้น มีค่าสีอะไร

    เพียงแค่ชี้ไปบริเวณที่ต้องการ ค่าสีก็จะโผล่ขึ้นมาให้ทราบเลยค่า โดยระบบสีได้ที่มาจะเป็นแบบ RGB นะคะ ซึ่งเป็นระบบสีที่เค้าศึกษากันมาแล้วว่าเหมาะสมกับการใช้แสดงผลบนหน้าจอคอมพิวเตอร์และสื่อดิจิตอลต่าง ๆ ค่ะ

    RGB คืออะไร RGB ย่อมาจากสีพื้นฐาน ได้แก่ สีแดง (Red) เขียว (Green) และน้ำเงิน (Blue)  พอผสมสีทั้งสามในสัดส่วนต่างๆ จะได้เฉดสีอีกมากมายที่มีความสวยสดใสบนหน้าจอถึงประมาณ 16.8 ล้านเฉดกันเลยทีเดียว

    อ่ะ ไปติดตั้ง ColorPick Eyedropper ให้กับ Google Chrome ของเรากันดีกว่าค่ะ ซึ่ง Blog นี้ขอรวบรัดวิธีการติดตั้งกันเลยนะคะ

    ไปที่ https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg แล้วกดปุ่ม “เพิ่มใน Chrome” ค่ะ เท่านี้ ต้าวก้อนสี โผล่ขึ้นมาแบบนี้ก็เป็นอันติดตั้งเรียบร้อยแล้วละค่า

    วิธีการใช้งาน ก็คลิกบน ต้าวก้อนนนสี แล้วก็ นำเมาส์ไปจิ้มตรงบริเวณที่ต้องการ เท่านี้ ค่าสีก็จะโผล่มาให้เราทราบค่ะ

    ขอบคุณความรู้ดีดีจาก :
    https://www.octopus.co.th/blogs/how-to/rgb-vs-cmyk
    https://www.nupress.grad.nu.ac.th/cmyk-and-rgb/

  • Tango เครื่องมือช่วยสร้างคู่มือ

    เป็นเครื่องที่ช่วยสร้างเอกสาร how to ได้อย่างสะดวกและรวดเร็ว การทำงานจะมีขั้นตอนยังไง มาดูกัน

    1. ให้เรา login Gmail ก่อนแล้วเข้าสู่ web : tango.us ตัว tango นั้นเป็น Extension ของ Google chrome ที่ช่วยให้เราสร้างเอกสาร แบบ step by step และ screen shot สร้างเอกสารให้เราเลย
    2. คลิก Add to Chrome – It’s Free

    Add to Chrome

    1. กดปุ่ม เพิ่มส่วนขยาย
    2. Sign up with google จากนั้นเลือก Account ที่ต้องการ
    3. คลิกที่ส่วนขยายด้านขวาบน ปักหมุดตัว tango ไว้ที่ด้านบนของหน้าจอ
    4. ทดลองใช้งาน

    ตัวอย่างทดลองกับการค้นหา google

    • กดที่ icon tango > คลิก Capture workflow
    • จากนั้นใช้งานค้นหา google ปกติ แล้วไปดูผลลัพธ์กัน

    มันจะ gen คู่มือมาให้ดังรูปข้างต้น สามารถแก้ไขได้ทุกจุด ทั้งข้อความแต่ละ step ลบหรือ duplicate ก็ได้ จะ zoom รูปก็ได้ และสามารถ Share & Export เพื่อนำไปทำต่อด้วย word หรือนำไปใช้เลยด้วย pdf

    เป็นไงหล่ะ ง่ายใช่มั๊ย ลองไปเล่นกันดูนะ ^_^