Author: kanakorn.h

  • ddready – แพ็ครวม django + bootstrap4 + crispy form + docker พร้อมใช้งาน

    สำหรับใครที่อยากจะลองพัฒนา Web Application ด้วย django web framework ผมได้รวบรวมเป็นชุดเริ่มต้น ซึ่งจะสามารถสร้าง Responsive Web และ มีแบบฟอร์มที่สวยงามด้วย crispy form มาเรียบร้อย ใช้งานได้ทั้ง แบบ Python บนเครื่อง และ แบบ Docker ลองทำตามดูได้ครับ

    ต้นแบบ มี Bootstrap 4 พร้อมใช้งาน
    มี Login Form มาให้เลย
    เข้ามาในส่วนของ Profile และ Logout ได้

    Repository

    สามารถเปิด URL ต่อไปนี้ เพื่อไป Download หรือ จะใช้ git clone ก็ได้

    https://github.com/nagarindkx/ddready.git

    https://gitlab.psu.ac.th/kanakorn.h/ddready.git

    จากนั้น ให้เปิด cmd ไปยังตำแหน่งที่ clone ลงมา

    สำหรับผู้ที่ติดตั้ง python อยู่แล้ว

    แล้วใช้คำสั่งต่อไปนี้

    pip install -r requirements.txt
    cd code
    cd main
    waitress-serve --listen *:8080 main.wsgi:application

    สำหรับผู้ที่จะใช้ Docker

    บน Windows ใช้คำสั่งต่อไปนี้

    set PROJECTNAME="projectname"
    set GCP-PROJECT-ID="gcp-project-id"
    set SERVICE="service"
    docker build --rm -f "Dockerfile" -t %PROJECTNAME%:dev .
    docker run -d -v %CD%\code:/code -p 8080:8080 --name %PROJECTNAME% %PROJECTNAME%:dev
    docker exec -it %PROJECTNAME% /bin/sh -c "[ -e /bin/bash ] && /bin/bash || /bin/sh"

    ทดสอบใช้งาน

    http://localhost:8080

    ในตอนต่อไป จะแนะนำวิธีการสร้าง แบบสอบถาม ทดแทนการใช้ Google Forms ครับ

  • [Share and Tell] การพัฒนา Web Application ด้วย django ด้วย Docker และการนำไปใช้งานบน Google Cloud Run

    1.ชื่องานที่ทำ

    การพัฒนา Web Application ด้วย django ด้วย Docker และการนำไปใช้งานบน Google Cloud Run

    2.เป้าหมายของงานที่ทำ

    • เพื่อประยุกต์ใช้งาน Docker ในการพัฒนางาน ทำให้สามารถลดความไม่เข้ากันของรุ่นของซอฟต์แวร์ หรือ ไลบรารี่ในเครื่องพัฒนาได้
    • เพื่อผลักดันการทำงานแบบ Containerize ในองค์กร เป็นต้นแบบการลดความซ้ำซ้อนของการสร้างเซิร์ฟเวอร์แบบ Virtual Machine ทำให้เกิดการใช้งานทรัพยากรอยู่จำกัดให้มีประสิทธิภาพมากขึ้น
    • เพื่อเป็นต้นแบบการทำงานแบบ Serverless ด้วย Google Cloud Run
    • เพื่อเป็นต้นแบบการใช้งาน LINE Front-End Framework ในการทำ Chatbot

    3.สภาพแวดล้อมที่เกี่ยวกับงานที่ทำ

    • Operating System: Windows 10
    • Editor: Visual Studio Code
    • Environment: Docker Oriented
    • Programming Language: python
    • Web Framework: django + crispy form + bootstrap + jQuery
    • Mobile Development: LINE with LIFF (และถ้าเตรียมทัน จะแนะนำการพัฒนา Mobile Application ด้วย Google Flutter)
    • Database: postgresql, Google BigQuery
    • Machine Learning: Google Vision API

    4.บรรยายสรุปสั้น ๆ ว่า ต้องใช้อะไรบ้างและทำอย่างไร (ไม่ต้องลงขั้นตอนละเอียด)

    • ติดตั้ง Microsoft Visual Studio Code (VS Code) และ Docker Extension
    • ใช้ docker เพื่อ pull image ของ Environment ที่ต้องการมา สร้างเป็น Container แล้ว พัฒนาลงไปในนั้น โดยใช้วิธี Bind mount volume เข้าไป แล้วใช้ VS Code เขียน และทำงานผ่าน Attach Shell
    • ติดตั้ง Python Package ที่เกี่ยวข้อง ได้แก่ django + crispy form + bootstrap + jQuery
    • พัฒนา Web Application ด้วย django ตั้งแต่การสร้าง Data Model, สร้างแบบฟอร์ม รวมถึงการสร้าง RESTFul API และ การส่งข้อมูลไปให้ Google Vision API ทำงาน แล้วส่งผลกลับมา
    • พัฒนา LINE Front-End Framework เพื่อใช้เป็น User Interface แบบ Chatbot
    • (ถ้าเตรียมทัน) จะสาธิตการพัฒนา Mobile Application ด้วย Google Flutter

    5.อื่น ๆ อยากบอกอะไรเพิ่มเติม เขียนเพิ่มได้

    Man – a being in search of meaning.

    Plato, 429 BC
  • เค้าเอาไฟล์ MP4 บน Google Drive ไปแสดงใน Video Player บนเว็บได้อย่างไร

    สมมุติว่า เรามีไฟล์วิดีโอเป็น .mp4 อยู่ไฟล์หนึ่ง อยู่ใน Google Drive ต้องการเผยแพร่ เฉพาะบน Website ของเราเท่านั้น จะต้องทำอย่างไร?

    Javascript video player

    สิ่งแรกที่ต้องมีคือ ตัว Video Player บนเว็บ ลอง Google ด้วยคำว่า “javascript video player” ดู มีหลายตัวให้เลือกใช้ แต่ในที่นี้ ขอทดลองกับ video.js (เว็บไซต์ https://videojs.com )

    คลิกที่ USE NOW ( https://videojs.com/getting-started/ )

    จากนั้น ลองสร้างไฟล์ test.html โดยเอา Code จาก Video.js CDN ไปแปะเลย

    <head>
      <link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">
    
      <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
      <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    </head>
    
    <body>
      <video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
      poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
        <source src='MY_VIDEO.mp4' type='video/mp4'> <!-- แก้ตรงนี้ -->
        <source src='MY_VIDEO.webm' type='video/webm'>
        <p class='vjs-no-js'>
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
        </p>
      </video>
    
      <script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
    </body>

    จาก Code นี้ JavaScript จาะเรียกไฟล์ .MP4 จากไฟล์ชื่อ MY_VIDEO.mp4 ซึ่ง ถ้าเอา test.html นี้ไปวางบน Web Server ก็หมายความว่า เราต้องมีไฟล์ MY_VIDEO.mp4 ด้วย

    ไฟล์ MP4 บน Google Drive

    ตัวอย่างเช่น เราอาจอัดคลิปวิดีโอการสอน อยากจะเผยแพร่บนเว็บไซต์ของหน่วยงาน ผ่าน JavaScript Video Player อย่าง video.js ข้างต้น ก็สามารถทำได้ดังนี้

    1. แชร์ไฟล์ดังกล่าว ให้เป็น Anyone with the link can View
    2. แล้ว copy link นั้นมา หน้าตาประมาณนี้

      https://drive.google.com/open?id=FILE_ID
    3. จะเห็นคำว่า id= FILE_ID ตรงนี้ให้ Copy เก็บไว้

    แต่การที่เราจะเอา Link นี้ไปใช้ใน Video Player ตรง ๆ ไม่ได้ เพราะมันเป็นการเรียกใช้ Google Drive ไม่ใช่การเรียก File Content

    GoogleAPI

    วิธีการที่จะ Get Content ของไฟล์ที่ต้องการออกมากจาก Google Drive สามารถเรียกผ่าน Google API ซึ่ง หากจะทำเองก็สามารถทำได้ มีพวก node.js ให้ใช้งานอยู่ แต่พบว่า สามารถเรียกใช้ www.googleapis.com ได้ โดยอ้างอิงจาก https://googleapis.github.io/

    ในที่นี้ จะเรียกผ่าน Google Drive API ใน Version 3 รูปแบบ URL จะเป็นดังนี้

    https://www.googleapis.com/drive/v3/files/FILE_ID?alt=media&key=API_KEY

    ในการใช้งาน ต้องการ 2 ส่วน

    • FILE_ID ได้จากการแชร์ไฟล์ข้างต้น
    • API_KEY ได้มาจากการสร้าง Credential บน Google Cloud Platform วิธีการทำตามนี้ https://cloud.google.com/docs/authentication/api-keys

    การใช้งาน Google API นั้น มีส่วนทั้งที่ต้องจ่ายเงิน และส่วนที่ใช้ฟรี แต่ถูกจำกัด Quota ในกรณี Google Drive API สามารถใช้ได้ฟรี แต่จะมี Quota อยู่ โดยดูได้จาก https://developers.google.com/drive/api/v3/about-sdk

    ประกอบร่าง

    เมื่อได้ FILE_ID และ API_KEY มาแล้ว ก็เอาไปใส่ใน Code ข้างต้น

    <head>
      <link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">
    
      <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
      <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    </head>
    
    <body>
      <video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
      poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
        <source src='https://www.googleapis.com/drive/v3/files/FILE_ID?alt=media&key=API_KEY' type='video/mp4'> <!-- เปลี่ยนตรงนี้ -->
        <source src='MY_VIDEO.webm' type='video/webm'>
        <p class='vjs-no-js'>
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
        </p>
      </video>
    
      <script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
    </body>

    หวังว่าจะเป็นประโยชน์ครับ

    Disclaimer: จุดประสงค์ของบทความนี้ เพื่อแนะนำวิธีการทำเท่านั้น โปรดนำความรู้นี้ไปใช้งานอย่างสร้างสรรค์นะครับ ผู้เขียนบทความไม่เกี่ยวข้องใด ๆ กับผู้นำไปใช้ทั้งสิ้น

  • แนวทางการพัฒนา Web Application ด้วย django จาก local docker สู่ Google Cloud Run

    ในการพัฒนาแอพพลิเคชั่น เราก็จะเจอปัญหานึงเสมอ ๆ คือ เวอร์ชั่น (Version) ของเครื่องมือที่ใช้ในการพัฒนานั้น แต่ละโปรเจคมีความแตกต่างกัน เช่น ในกรณีของ การพัฒนา Web Application ด้วย django web framework เราอาจจะอยากใช้ python รุ่นล่าสุด คือ 3.8 แต่ในขณะเดียวกัน เมื่อหลังบ้านต้องการไปติดต่อ Tensorflow 2.0 ซึ่งยังต้องใช้งานกับ Python 3.6 เป็นต้น วิธีแก้ไขปัญหาทั่วไปคือ ติดตั้ง package ‘virtualenv’ เพื่อให้การพัฒนาแต่ละโปรเจค มี Environment แตกต่างกันได้

    แต่จากการใช้งานจริง พบว่า สุดท้าย ตอนเอาไป Production บนเครื่อง Server ก็ต้องตามไปติดตั้งเครื่องมือ และรุ่นที่ถูกต้อง แม้ใน Python จะมีคำสั่ง pip install -r requirements.txt ก็ตาม แต่ก็ยังไปติดปัญหาว่า OS ของเครื่องที่จะ Production นั้น รองรับรุ่นของเครื่องมืออีกหรือไม่ด้วย

    แนวทางการใช้ Container ด้วย Docker จึงเป็นที่นิยม เพราะ เมื่อเราพัฒนาเสร็จแล้ว สามารถ Pack เข้าไปใน Container แล้วเอาไป Deploy ได้ โดย (แทบจะ) ไม่ต้องกังวลกับ Environment ปลายทาง อีกทั้ง ยังสามารถทดสอบ Environment ใหม่ ๆ ก่อนจะ Deploy ได้ด้วย เช่นการเปลี่ยนรุ่นของ Python เป็นต้น

    ในบทความนี้ จะนำเสนอ แนวทางการสร้าง docker container เพื่อใช้เป็นฐานในการพัฒนา django และ สามารถต่อยอด ติดตั้ง package อื่น ๆ ตามต้องการ ตั้งแต่ Development ไปจนถึง Deployment สู่ Serverless Environment อย่าง Google Cloud Run

    สร้าง Development Container

    เริ่มจาก สร้างโฟลเดอร์ใหม่ขึ้นมา ในนั้นมี 2 ไฟล์ คือ Dockerfile และ requirements.txt กับ โฟลเดอร์ ชื่อ code

    Dockerfile

    • ใช้ image ของ python เป็นรุ่น 3.7-slim ซึ่งตัดส่วนที่ไม่จำเป็นออกแล้ว (ไม่ใช้ alpine เนื่องจาก พบรายงานว่า แม้จะมีขนาดเล็กกว่า แต่ถูกจำกัดทรัพยากรบางอย่าง ทำให้ทำงานได้ช้ากว่า)
    • สร้าง /code แล้วเข้าไปใช้พื้นที่นี้ (เหมือนคำสั่ง mkdir /code ; cd /code อะไรประมาณนั้น)
    • สั่งให้ copy ไฟล์ requirements.txt ไปใช้ที่ root ( / )
    • จากนั้น Upgrade คำสั่ง pip เป็นรุ่นล่าสุด แล้ว ติดตั้ง package ตามที่กำหนดใน requirements.txt
    • เปิด Port 8080 ไว้ เพื่อใช้ในการทดสอบ และเป็นไปในแนวทางเดียวกับการใช้บน Google Cloud Run ต่อไป
    FROM python:3.7-slim
    WORKDIR /code/
    COPY requirements.txt /
    RUN pip install -U pip \
        && pip install -r /requirements.txt
    EXPOSE 8080

    requirements.txt

    ในการพัฒนา django เมื่อทำการติดตั้ง package ใดเพิ่มเติมด้วยคำสั่ง pip install ก็จะบันทึกรายการ พร้อมรุ่นของ package มาในไฟล์นี้ ในที่นี้ ใช้ django, guincorn และ whitenoise เป็นหลัก (จะมีรายการ dependency ติดเข้ามาด้วย)

    Django==2.2.6
    gunicorn==19.9.0
    pytz==2019.3
    sqlparse==0.3.0
    whitenoise==4.1.4

    จากนั้นใช้คำสั่งต่อไปนี้ สร้าง (build) docker image จากไฟล์ Dockerfile ข้างต้น โดยมี option ที่เกี่ยวข้องดังนี้

    docker build --rm -f "Dockerfile" -t mydjango:dev .
    • –rm เมื่อ build แล้ว ก็ลบ container ชั่วคราวทิ้ง
    • -f กำหนดว่าจะเรียกจากไฟล์ใด วิธีนี้ มีประโยชน์ เวลาที่จะต้องมี Dockerfile ทั้ง Development และ Production ในโฟลเดอร์เดียวกัน ซึ่งจำเป็นต้องใช้ชื่อไฟล์ที่แตกต่างกัน
    • -t เป็นตั้งชื่อ docker image และ ชื่อ tag
    • . คือ ให้ build จากตำแหน่งปัจจุบัน

    ขั้นตอนนี้จะได้ docker image ชื่อ mydjango และมี tag เป็น dev แล้ว้

    (ในที่นี้ พัฒนาบนเครื่องคอมพิวเตอร์ที่เป็น Windows 10 ซึ่ง %CD% จะให้ค่า Current Directory แบบ Absolute path ออกมา เช่นเดียวกับบน Linux ที่ใช้ $(pwd) )

    ต่อไป สั่ง run ด้วยคำสั่ง และ options ดังต่อไปนี้

    docker run --rm -it -p 8080:8080  -v %CD%\code:/code  mydjango:dev bash
    • –rm เมื่อจบการทำงาน ก็ลบ container ชั่วคราวทิ้ง
    • -it คือ interactive และเปิด TTY
    • -p เพื่อเชื่อม port 8080 จากภายนอก เข้าไปยัง port 8080 ภายใน container
    • -v เพื่อเชื่อม Volume หรือโฟลเดอร์ของเครื่อง host กับ /code ภายใน container ขั้นตอนนี้สำคัญ
    • bash ข้างท้าย เพื่อส่งคำสั่ง เรียก bash shell ขึ้นมา ซึ่งจะสัมพันธ์กับ -it ข้างต้น ทำให้สามารถใช้งาน shell ภายใน container ได้เลย

    ผลที่ได้คือ bash shell และ อยู่ที่ /code ภายใน container

    root@757bcbb07c7f:/code#

    ตอนนี้ เราก็สามารถสร้าง django ได้ตามปรกติแล้ว (คลิกดูตัวอย่างเบื้องต้น) แต่ในตัวอย่างนี้ จะเริ่มจากการสร้าง project ชื่อ main เพื่อใช้ในขั้นตอนต่อไป ด้วยคำสั่งต่อไปนี้

    django-admin startproject main
    cd main

    ในระหว่างการพัฒนา สามารถใช้คำสั่ง runserver โดยเปิด Port 8080 ใน container เพื่อทดสอบได้ดังนี้ (สอดคล้องตามที่อธิบายข้างต้น)

    python manage.py runserver 0.0.0.0:8080

    สร้าง Production Docker Image

    คำสั่งข้างต้น สามารถใช้ได้เฉพาะขั้นตอนการพัฒนา แต่เมื่อพัฒนาเสร็จแล้ว ควรใช้ Application Server แทน ในที่นี้จำใช้ gunicorn แต่ก่อนอื่น จะต้องปรับ Configuration ของ django ให้พร้อมในการ Deployment ก่อน

    main/settings.py

    # แก้ไข
    DEBUG = False
    ALLOWED_HOSTS = ['localhost','SERVICE-ID.run.app']
    
    # เพิ่ม
    MIDDLEWARE = [
        ...
        # Whitenoise
        'whitenoise.middleware.WhiteNoiseMiddleware',
        ...
    ]
    # เพิ่ม
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

    มีเพิ่มเติมคือ whitenoise ซึ่งเป็น package สำหรับจัดการเกี่ยวกับการให้บริการ static file ในตัว มิเช่นนั้นจะต้องไปตั้งค่าใน Web Server ให้จัดการแทน

    เมื่อเราตั้งค่า DEBUG = False จะต้องกำหนด ALLOWED_HOSTS เสมอ ในที่นี้กำหนดให้เป็น localhost และ Production URL (SERVICE-ID.run.app) ที่จะเกิดขึ้นเมื่อสร้าง Service บน Google Cloud Run ครั้งแรกไปแล้ว (ค่อยกลับมาแก้ไขแล้ว Revision อีกครั้ง)

    ใช้คำสั่งต่อไปนี้เพื่อรวบรวม static files ต่าง ๆ มาไว้ในที่เดียวกัน ในที่นี้ คือที่ โฟลเดอร์ static

    python manage.py collectstatic

    ทดสอบ Production ด้วย gunicorn ด้วยคำสั่งต่อไปนี้

    gunicorn --bind 0.0.0.0:8080 main.wsgi

    ทดสอบเรียก Local Admin Console ( http://localhost:8080/admin ) ดู ถ้าเรียก static file เช่นกลุ่ม css ได้ ก็พร้อมสำหรับจะนำขึ้น Google Cloud Run ต่อไป

    สุดท้าย สร้าง Production Dockerfile และ สรุป requirements.txt ดังนี้

    Dockerfile.production

    FROM python:3.7-slim
    WORKDIR /code
    COPY ./code/* ./
    RUN pip install -U pip \
        && pip install -r requirements.txt
    EXPOSE 8080
    CMD [ "gunicorn","--bind","0.0.0.0:8080", "main.wsgi"]

    requirements.txt

    pip freeze > requirements.txt

    จากนั้น ใช้คำสั่งต่อไปนี้ เพื่อสร้าง Production Docker Image (ออกมาจาก Development Container shell ก่อน) โดยจะใช้ tag เป็น latest

    docker build -t mydjango:latest -f "Dockerfile.production" .

    ส่ง Production Docker Image ขึ้น Google Container Registry

    Google Cloud Run จะเรียกใช้ docker image ที่อยู่บน Google Container Registry เท่านั้น

    • เปิด Google Console
    • สร้าง Project ใหม่ และ ตั้งค่า Billing
    • เปิดใช้งาน Google Cloud Run และ Google Container Registry
    • ติดตั้อง Google Cloud SDK เพื่อให้สามารถ push ขึ้นได้ และ ยืนยันตัวตนด้วย Google Account

    แล้วใช้คำสั่งต่อไปนี้ เพื่อ tag

    docker tag mydjango:latest gcr.io/YOUR-GCP-PROJECT-ID/SERVICE-NAME
    • YOUR-GCP-PROJECT-ID เป็น Project ID ที่สร้างขึ้น
    • SERVICE-NAME ชื่อ service ที่จะสร้าง

    แล้วก็ push ขึ้น Google Container Registry

    docker push gcr.io/YOUR-GCP-PROJECT-ID/SERVICE-NAME

    สร้าง Google Cloud Run Service

    สร้าง Service โดยเลือก Image ที่ต้องการ

    เมื่อเสร็จแล้วจะได้ URL อย่าลืมเอาไปแก้ไขใน main/settings.py ในส่วนของ ALLOWED_HOSTS แทน SERVICE-ID.run.app

    จากนั้น build, tag และ push ขึ้น Google Cloud Registry อีกครั้ง แล้ว Deploy New Revision เป็นอันเรียบร้อย

    อันนี้เป็นการ Proof of Concept ในบทความต่อไป จะนำเสนอตัวอย่างการใช้งานจริงครับ

  • วิธีการระบบการจองตั๋ว (Ticket Reservation System ) alf.io

    ALF.io เป็น Open Source Ticket Reservation System แบบ Web Application

    • ผู้ดูแลระบบสามารถสร้าง Event อย่างเช่นงานประชุมสัมนา เมื่อเปิดรับลงทะเบียนเข้าร่วมงานได้ (แบบเก็บเงินหรือฟรีก็ได้) กำหนดจำนวนที่นั่งได้
    • ผู้เข้าร่วมงานกรอกข้อมูลส่วนตัว (และชำระเงินก็ได้)
    • ระบบจะส่ง Ticket ไปให้ทาง Email ในรูปแบบ QR Code
    • เมื่อถึงวันงาน เจ้าหน้าที่ที่หน้างานติดตั้ง Application บน Smartphone ของตนเอง (ซึ่งต้องลงทะเบียนกับระบบ)
    • ผู้เข้าร่วมงานแสดง QR ของตนเองให้เจ้าหน้าที่ Scan ได้เลย

    วิธีการติดตั้ง

    ต่อไปนี้ เป็นวิธีการติดตั้ง alf.io รุ่น 2.0-M1-1909 บน Windows 10 Education และ Windows Server 2016

    Prerequisite

    1. Java JDK
      เนื่องจาก alf.io พัฒนาด้วย Java รุ่น 12 จึงแนะนำให้ติดตั้ง Oracle JAVA SE รุ่นล่าสุด (ปัจจุบันคือ Java SE 13) โดยสามารถ download จาก Link นี้
      https://www.oracle.com/technetwork/java/javase/downloads/index.html
    2. Database Server
      สำหรับ Database แนะนำให้ใช้ Postgresql (ปัจจุบัน รุ่นล่าสุดคือ รุ่น 11) จากนั้น
      – สร้าง Database ชื่อ alfio
      – User ชื่อ alfio ให้สามารถสิทธิ์ CREATE ได้ โดยสามารถ Download จาก Link นี้
      https://www.postgresql.org/download/windows/

    ขั้นตอนการติดตั้ง

    1. สร้าง Folder
      เช่น C:\alfio เป็นต้น
    2. Download alf.io
      จาก https://github.com/alfio-event/alf.io/releases/tag/2.0-M1-1909
      เลือกไฟล์ชื่อ alfio-2.0-M1-1909-boot.war
      เก็บไว้ใน Folder ที่สร้างขึ้น (ในที่นี้ C:\alfio)
    3. สร้างไฟล์ Configuration
      สร้างไฟล์ชื่อ application.properties เพื่อกำหนดค่าเกี่ยวกับ Database ได้แก่ Host, Database, User, Password และอื่น ดังตัวอย่าง (อย่าลืมเปลี่ยน Password ให้ตรงกับที่ตั้งไว้)
    datasource.dialect=PGSQL
    datasource.driver=org.postgresql.Driver
    datasource.url=jdbc:postgresql://localhost:5432/alfio
    datasource.username=alfio
    datasource.password=ALFIO_PASSWORD_HERE
    datasource.validationQuery=SELECT 1
    spring.profiles.active=dev

    Run !

    ด้วยคำสั่ง

    java -jar alfio-2.0-M1-1909-boot.war

    หน้า Event

    http://localhost:8080/

    หน้า Admin

    http://localhost:8080/admin

    ตัวอย่างการใช้งาน

    https://ticket.psu.ac.th/event/KPC2019/

    เมื่อ Admin ของงาน (แต่ละ Server มีได้หลาย Event) สร้าง Ticket ให้ หรือ ผู้สนใจเข้าร่วมงาน เข้ามาสมัครร่วมงานเองก็ได้ จะได้ Email แจ้งดังนี้

    ซึ่งจะมี QR Code แนบมา (ที่เห็นเป็น # เพราะยังไม่ได้ใส่ Font ภาษาไทยในการ Generate PDF ให้ถูกต้อง — ไว้ค่อยเล่าให้ฟัง)

    เมื่อถึงวันงาน เจ้าหน้าที่รับลงทะเบียน จะติดตั้ง Application ลงใน Smartphone ของตนเอง แล้วมีการสร้าง Account เพื่อรับ Check-in (ค่อยมาลงรายละเอียด)

    ก็สามารถคลิกที่ Scan Attendees QR Code ของผู้มาลงทะเบียนเข้างานได้เลย

    หวังว่าจะเป็นประโยชน์ครับ

  • Google Drive กับ Google Share Drive — กินพื้นที่ใคร ?

    ปัญหา: การแชร์พื้นที่จาก Google Drive กับ Google Share Drive นั้น เมื่อผู้ใช้ที่เราแชร์ไปให้ ทำการ Upload ไฟล์ขึ้นมา จะกินพืันที่ของใคร ?

    มาทดลองกัน

    Google Drive

    User A สร้าง Folder ชื่อ “Test Upload” บน “Google Drive” แล้วแชร์ให้ User B สามารถแก้ไขได้ (edit)

    User B เปิด Google Drive ของตนเอง แล้วเข้าไปใน Shared With Me ก็จะเห็น “Test Upload”

    User B ทำการ Upload File จากนั้น ไปดูใน Detail จะพบว่า ไฟล์มีขนาด 945 KB และ ใช้พื้นที่ของตัวเองไป 945 KB ด้วย

    กลับมาดูใน Google Drive ของ User A ซึ่งเป็นเจ้าของ (Owner) โฟลเดอร์ “Test Upload” พบว่า ไม่ได้ใช้ Quota พื้นที่จัดเก็บของ User A เลย เพราะ เจ้าของไฟล์ (File) คือ User B

    และ แม้ User A จะเป็นเจ้าของ Folder ก็ทำได้เพียงแต่ เตะ User B ไม่ให้เห็น Folder แต่ ไม่สามารถ ถอนสิทธิ์ความเป็นเจ้าของ ของ User B ได้ (เศร้า)

    Google Share Drive

    ก่อนหน้านี้เรียกว่า Team Drive แต่เปลี่ยนชื่อเป็น Share Drive ซึ่ง เป็น Feature ของ G Suite for Education (และ G Suite ตามที่ Google กำหนด) มีสิทธิ์ สร้าง Share Drive

    ผู้ใช้ขององค์กร (ในที่นี้คือ มหาวิทยาลัยสงขลานครินทร์) สามารถสร้าง Google Share Drive แล้ว Add Member เป็นผู้ใช้ที่ใช้ Google Account อื่น (รวมถึง Gmail ด้วย) เข้ามาใช้งานร่วมกันได้ โดย ความเป็นเจ้าของ Share Drive คือ องค์กร กล่าวคือ แม้ User A จะเป็นคนสร้าง

    ต่อไป User A ทำการสร้าง Share Drive ตั้งชื่อว่า “Test Share Drive”

    แล้วเพิ่ม User B มาเป็น Member ให้สิทธิ์เป็น Contributor (สิทธิ์ใน Share Drive จะมีหลายระดับกว่า Google Drive)

    User B จะเห็น Share Drive จาก เมนู “Shared drives” (แต่ถ้า share จาก Google Drive จะเห็นใน “Shared with me”)

    เมื่อ User B ทำการ Upload ไฟล์เข้าไป จะพบว่า ไม่ใช้ Quota พื้นที่ User B เลย!!

    ต่อมา User A เตะ User B ออกไป

    ไฟล์ยังอยู่ในองค์กร ของ User A

    ส่วน User B ก็เข้าถึงไม่ได้อีกต่อไป

    สรุป

    • Google Drive สิทธิ์เป็นของ Owner และใช้พื้นที่ของผู้เป็น Owner ดังนั้น แม้ Google Drive ขององค์กร จะ Unlimited แต่ เวลาที่ผู้ใช้จาก Free Gmail Upload ไฟล์ขึ้นมา ก็จะใช้ Quota พื้นที่ของ Free Gmail คือ 15 GB นั้น !! ดังนั้น วิธีนี้ จะไม่สามารถให้ ผู้ใช้ Free Gmail Upload ไฟล์ที่มีขนาดเกิน Available Quota ของตนเองได้
    • Shared Drive สิทธิ์เป็นขององค์กร เวลา Free Gmail Upload ขึ้นมา จะไม่กิน Quota พื้นที่เค้า และ องค์กรสามารถเตะ Free Gmail ออกไปได้

    เข้าใจตรงกันนะ

  • bit.ly สั้น ๆ สวย ๆ ง่ายนิดเดียว

    ต่อจาก bitly สายย่อ ซึ่งสะดวกมากแล้ว มีอีกขั้นตอนนึง ที่หลายคนอาจจะไม่ทราบมาก่อน

    ถ้าใช้ bitly สร้าง Short URL นั้นเราจะได้ URL แบบสุ่ม อย่างนี้

    http://bit.ly/2N3Tut7

    ซึ่ง จะเป็น Case Sensitive ซึ่งต้องพิมพ์ตัวพิมพ์ใหญ่/เล็ก ให้ถูกต้อง และบางทีอาจจะสับสนระหว่าง l (L – lower case) กับ เลข 1 หรือ I (I capital letter) ได้

    ถ้าอยากกำหนด สิ่งที่ตามมาข้างหลัง bit.ly/ ได้ เช่น

    http://bit.ly/psu-gafe

    สามารถทำต่อจากขั้นตอน bitly สายย่อ ใน Step 7 อีกนิดเดียวคือ

    ตรง Customize ด้านล่าง

    ใส่คำได้ตามใจชอบ แต่ต้องประกอบด้วย

    • ตัวอักษรภาษาอังกฤษ
    • ตัวเลขอาราบิก
    • เครื่องหมาย – และ _

    เท่านั้น

    จากนั้น คลิก Save ด้านล่าง ถ้าไม่ซ้ำกับใครที่เคยสร้างไว้ ก็สามารถใช้งานได้ครับ

    หวังว่าจะเป็นประโยชน์ครับ

  • ELK #09 Anomaly Detection (Case Study)

    ระบบ PSU Email ให้บริการผู้ใช้ของมหาวิทยาลัยสงขลานครินทร์ ซึ่งมีการใช้งานจากทั่วโลก ทั้งระบบประกอบขึ้นจากคอมพิวเตอร์หลายเครื่อง การจะตรวจสอบ Log เมื่อเกิด Incident ขึ้น อาจจะต้องใช้ระยะเวลานาน และเป็นการยากพอสมควรที่จะเชื่อมโยงความสัมพันธ์ของเหตุการณ์ และสรุปออกมาเป็นรายงานได้ จึงเริ่มใช้ ELK สำหรับรวบรวม Log ของทั้งระบบไว้ที่ส่วนกลาง และพัฒนาต่อยอดเพื่อการตรวจจับความผิดปรกติต่าง ๆ ได้

    ในบทความนี้ จะนำเสนอวิธีการใช้ ELK เพื่อตรวจจับ การ Login ที่ผิดปรกติบน PSU Email โดยจะสนใจ ผู้ใช้ที่มีการ Login จากนอกประเทศเป็นหลัก

    การส่ง Log จาก Server เข้า ELK

    ที่เครื่อง Server แต่ละเครื่อง กำหนดให้ส่ง Log จาก /etc/rsyslog.d/50-default.conf เข้าไปที่ your.logstash.server:port ตามที่กำหนดไว้

    การสร้าง Logstash Filter

    ที่ Logstash Server

    • Input เพื่อรับข้อมูลจาก syslog ที่ port ที่ต้องการ เช่นในที่นี้เป็น 5516 เป็นต้น
    • Filter ใช้ Grok Plugin เพื่อจับข้อมูล จาก message แบ่งเป็นส่วน ๆ ตามลักษณะ แล้วตั้งชื่อตาม Field ตามต้องการ ในที่นี้คือ description, username, domainname, clientip, actiondate, actiontime เป็นต้น (ตัวที่สำคัญในตอนนี้คือ username และ clientip)
    • Output ตั้งว่าให้ส่งผลไปยัง Elasticsearch ที่ “your.elasticsearch.server” ที่ port 9200

    [ตรงนี้มีกระบวนการบางอย่าง ซึ่งค่อยมาลงรายละเอียด]

    เมื่อมี Log ไหลเข้าสู่ Logstash และ ถูกประมวลผลแล้ว ก็จะเข้าสู่ Elasticsearch แล้ว ก็นำไปใช้งานบน Kibana

    หลังจากนั้น สามารถ Search ข้อมูล และใส่ Fields ที่สนใจ เช่น Time, Username, geoip.country_name และ description ได้ แล้ว Save เอาไว้ใช้งานต่อ ในที่นี้ ตั้งชื่อว่า squirrelmail-geoip

    จากนั้น สามารถเอาไปสร้างเป็น Visualization แบบ Coordinate Map ได้ เช่น ดูว่า มีการ Login Success / Failed Login / Sent จากที่ไหนบ้างในโลก

    จะเห็นได้ว่า ส่วนใหญ่ ใช้งานจากในประเทศไทย (วงกลมสีแดงเข้ม ๆ) ส่วนนอกประเทศ จะเป็นวงสีเหลืองเล็ก ๆ

    การตรวจหาการใช้งานที่ผิดปรกติ

    สร้าง Search ใหม่ กรองเฉพาะ ที่มี (exist) Username และ ไม่เป็น N/A และ มี (exist) geoip.country_code และ ไม่ใช่ Thailand แล้ว Save ไว้ใช้งานต่อไป ในที่ตั้งชื่อว่า squirrelmail-geoip-outside-th

    จากนั้น เอาไปสร้าง Visualization แบบ Vertical Bar
    กำหนดให้
    Y Axis เป็นจำนวน
    X Axis เป็น Username
    โดยที่ Group by geoip.country_name และ description
    ก็จะทำให้รู้ว่า ใครบ้างที่ มีการใช้งานนอกประเทศ และ เป็นการใช้งานแบบไหน

    จะเห็นได้ว่า จะมีบางคนที่ แสดงสีแค่สีเดียว กับบางคนมีหลายสี เนื่องจาก มีหลายประเทศ และ หลายประเภทการใช้งาน เราสามารถ กรองเอาเฉพาะ ข้อมูลที่สนใจได้ โดยคลิกที่ Inspect แล้วกดเครื่องหมาย + กับข้อมูลที่ต้องการ เช่น description ที่เป็น “Failed webmail login” ก็ได้

    ก็จะกรองเฉพาะ Username ที่มีการ Login จากต่างประเทศ แต่ไม่สำเร็จ จากภาพด้านล่าง แสดงว่า 3 คนนี้ น่าจะโดนอะไรเข้าแล้ว

    หรือ ถ้าจะกรองข้อมูล เฉพาะคนที่ “Failed webmail login” และ “Message sent via webmail” ก็ได้ แต่ต้องเปลี่ยน ชนิดการ Filter เป็น “is one of”

    ผลที่ได้ดังภาพ แต่เนื่องจาก ก็ยังเป็น 3 คนนี้อยู่ จะเห็นได้ว่า คน ๆ เดียว (ซ้ายสุด) มีการ Login จากหลายประเทศ ภายใน 24 ชั่วโมง

    ต่อไป ถ้าเราสนใจเฉพาะ คนที่ “ส่งอีเมล” จากนอกประเทศ ในเวลาที่กำหนด จะได้ผลประมาณนี้

    พบว่า คนซ้ายสุด คนเดิมนั่นแหล่ะ แต่เราจะมาดูรายละเอียด ก็คลิกที่ปุ่ม Inspect แล้ว เลือก Include เฉพาะ Username นั้น

    ก็พบว่า คนนี้มีการส่ง email ออกจากประเทศ USA, Canada, Panama, Argentina, Mexico แล้วบินมา UK ภายในวันเดียว –> ทำได้ไง !!! (ดังภาพด้านล่าง)

    เมื่อลองตรวจสอบ ก็จะพบว่า Username นี้ มีพฤติกรรม ส่ง Spam จริง ๆ ก็จะจัดการ “จำกัดความเสียหาย” ต่อไป

    วิธีการที่กล่าวมาข้างต้น สามารถสร้างเป็น Process อัตโนมัติ (เว้นแต่ขั้นตอนการ จำกัดความเสียหาย จะ Automatic ก็ได้ แต่ตอนนี้ขอ Manual ก่อน) เอาไว้สำหรับ Monitoring ได้ โดยอาจจะสั่งให้ เฝ้าดู 1 ชั่วโมงล่าสุด และ Refresh ทุก 1 นาที ดังภาพ

    หวังว่าจะเป็นประโยชน์

    ส่วนรายละเอียด คอยติดตามตอนต่อไปครับ

  • อ่านข้อความจากภาพ ด้วย Tesseract-OCR

    OCR หรือ Optical Character Recognition จริง ๆ ก็มีใช้กันมานานมากแล้ว แต่การใช้งานก็จะผูกติดกับ Hardware พอสมควร แต่ในปัจจุบัน เราสามารถใช้ความรู้ด้าน Machine Learning / Deep Learning เพื่อให้คอมพิวเตอร์เข้าใจภาพได้ และสามารถนำมาประกอบกับเป็น Software สำหรับใช้งานของตนเองได้

    ในบทความนี้ ทดลองใช้ Tesseract-OCR พี่พัฒนาโดย Google อ่านภาพ เอกสารที่ Print จาก Computer เป็นกระดาษ -> มีการเซ็นต์ชื่อ -> นำกลับมา Scan อีกครั้ง

    *** มันเป็น Paperless ตรงไหน ? กฏหมาย Digital Signature ก็มีแล้วนะ ***

    เอาเป็นว่า ดูผลงาน

    ด้านซ้าย เป็นเอกสารที่ Scan จากกระดาษ ด้านขวาเป็นผลการอ่านด้วย Tesseract-OCR

    อ๊ะ บางคนบอกว่า เคยใช้แล้ว แต่ทำไมไม่ได้ผลอย่างนี้หล่ะ (โดยเฉพาะ ภาษาไทย) อิอิ มันมีรายละเอียดพอสมควร ไว้มีเวลาจะมาเล่าให้ฟัง

    แต่แบบนี้ ต้องทำอะไรเพิ่มก่อน จึงจะอ่านได้

    ต้นฉบับ มีตราประทับงี้ ตัวอักษรเล็ก เลขไทย ปน เลขอังกฤษ ปน ภาษาอังกฤษ อันนี้ ยากหน่อย

    ผลก็พอจะอ่านได้ แต่ต้องทำอะไรเพิ่มก่อนจะให้ OCR อ่าน –> อันนี้คือยังไม่ทำอะไรเพิ่ม

    ผล แบบยังไม่ได้ Preprocessing ใด ๆ สังเกตว่า ตัว ตราประทับ ทำให้เกิดปัญหา และ ตัวอักษรที่เล็กมาก ๆ ทำให้ OCR อ่านผิดได้ แต่มีทางแก้ไข

    มันไม่มีคำว่า “ก็ง่าย ๆ” หรอก หึ หึ หึ