Month: October 2019

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

kanakorn.h

October 31, 2019
สมมุติว่า เรามีไฟล์วิดีโอเป็น .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">

  
  <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">

  
  <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: จุดประสงค์ของบทความนี้ เพื่อแนะนำวิธีการทำเท่านั้น โปรดนำความรู้นี้ไปใช้งานอย่างสร้างสรรค์นะครับ ผู้เขียนบทความไม่เกี่ยวข้องใด ๆ กับผู้นำไปใช้ทั้งสิ้น
October 31, 2019
แนวทางการพัฒนา Web Application ด้วย django จาก local docker สู่ Google Cloud Run

kanakorn.h

October 26, 2019
ในการพัฒนาแอพพลิเคชั่น เราก็จะเจอปัญหานึงเสมอ ๆ คือ เวอร์ชั่น (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 ในบทความต่อไป จะนำเสนอตัวอย่างการใช้งานจริงครับ
October 26, 2019
วิธีการระบบการจองตั๋ว (Ticket Reservation System ) alf.io

kanakorn.h

October 7, 2019
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 ของผู้มาลงทะเบียนเข้างานได้เลย

หวังว่าจะเป็นประโยชน์ครับ
October 7, 2019
TOTP Second-factor Auth and OAuth2 in ownCloud 10.2.1

wiboon.w

October 1, 2019
คิดว่าเรื่อง security หรือ ความปลอดภัย ในการใช้ username และ password ก็เป็นความรู้ที่น่าจะได้มาเล่าสู่กันฟัง ในครั้งนี้ผมได้ลองตั้งค่าการใช้ TOTP Second-factor Auth ร่วมกับ password ของ ownCloud ในหน้า login ที่ web page

การใช้ TOTP Second-factor Auth ร่วมกับ password ก็คือ การที่แอดมินที่ดูแล ownCloud Server ได้เพิ่ม App ชื่อ 2-Factor Authentication ไว้เพื่อให้ user ได้เลือกเองว่าจะใช้งานหรือไม่ โดยแสดงเป็น option อยู่ในหน้า settings ของ user

ข้างล่างนี้เป็น captured รูปภาพที่แอดมินเพิ่ม App TOTP Second-factor Auth โดยติดตั้งจาก Market

ส่วนข้างล่างนี้เป็น captured รูปภาพเมื่อ user เลือกใช้ TOTP และ เข้าใช้งานผ่านเบราว์เซอร์ โดยใส่ TOTP ที่ได้จาก App บนมือถือ เช่น Google Authentication หรือ Microsoft Authentication เป็นต้น

นอกจากนี้เราสามารถตั้งค่า App passwords สำหรับ ownCloud Desktop Client ดังรูป

ส่วนข้างล่างนี้เป็น captured รูปภาพ ownCloud Desktop Client หากมีการตั้ง App passwords

แต่ถ้าแอดมินเลือกติดตั้ง OAuth2 ก็จะทำให้การใช้งานทั้ง desktop client และ app บน smart phone นั้นมีความปลอดภัยมากขึ้น สะดวกมากขึ้น เพราะว่าจะเป็นการส่ง token ไปเก็บไว้แทนการเก็บ username และ password ไว้ใน app

ข้างล่างนี้เป็น captured รูปภาพที่แอดมินเพิ่ม App OAuth2

ในครั้งแรกที่เข้าใช้ Desktop Client หรือ App จะมีหน้าเว็บเพจเด้งขึ้นมาให้ใส่ username กับ password เพียงครั้งเดียว และขอให้ผู้ใช้คลิก Authorize จากนั้นก็ใช้งานได้ตลอดแล้ว

รูปแสดงว่า เรามีการเข้าใช้อุปกรณ์อะไรบ้าง

ดังนั้น หากใช้ OAuth2 ก็ไม่จำเป็นต้องใช้ TOTP Second-factor Auth แล้วครับ

สภาพแวดล้อมการทำงาน
- ownCloud Server (ownCloud community) version 10.2.1 (stable) ติดตั้งบน Ubuntu 16.04 server และ
- ownCloud Desktop client version 2.5.4 (build 11415) รันบน Windows 10 version 1903
October 1, 2019