[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

Read More »

เค้าเอาไฟล์ 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 ไปแปะเลย จาก Code นี้ JavaScript จาะเรียกไฟล์ .MP4 จากไฟล์ชื่อ MY_VIDEO.mp4 ซึ่ง ถ้าเอา test.html นี้ไปวางบน Web Server ก็หมายความว่า เราต้องมีไฟล์ MY_VIDEO.mp4 ด้วย ไฟล์ MP4 บน Google Drive ตัวอย่างเช่น เราอาจอัดคลิปวิดีโอการสอน อยากจะเผยแพร่บนเว็บไซต์ของหน่วยงาน ผ่าน JavaScript Video Player อย่าง video.js ข้างต้น ก็สามารถทำได้ดังนี้ แชร์ไฟล์ดังกล่าว ให้เป็น Anyone with the link can View แล้ว copy link นั้นมา หน้าตาประมาณนี้ https://drive.google.com/open?id=FILE_ID จะเห็นคำว่า 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 จะเป็นดังนี้ ในการใช้งาน ต้องการ 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 ข้างต้น หวังว่าจะเป็นประโยชน์ครับ Disclaimer: จุดประสงค์ของบทความนี้ เพื่อแนะนำวิธีการทำเท่านั้น โปรดนำความรู้นี้ไปใช้งานอย่างสร้างสรรค์นะครับ ผู้เขียนบทความไม่เกี่ยวข้องใด ๆ กับผู้นำไปใช้ทั้งสิ้น

Read More »

แนวทางการพัฒนา 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 ต่อไป requirements.txt ในการพัฒนา django เมื่อทำการติดตั้ง package ใดเพิ่มเติมด้วยคำสั่ง pip install ก็จะบันทึกรายการ พร้อมรุ่นของ package มาในไฟล์นี้ ในที่นี้ ใช้

Read More »

วิธีการระบบการจองตั๋ว (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 Java JDK เนื่องจาก alf.io พัฒนาด้วย Java รุ่น 12 จึงแนะนำให้ติดตั้ง Oracle JAVA SE รุ่นล่าสุด (ปัจจุบันคือ Java SE 13) โดยสามารถ download จาก Link นี้ https://www.oracle.com/technetwork/java/javase/downloads/index.html Database Serverสำหรับ Database แนะนำให้ใช้ Postgresql (ปัจจุบัน รุ่นล่าสุดคือ รุ่น 11) จากนั้น– สร้าง Database ชื่อ alfio– User ชื่อ alfio ให้สามารถสิทธิ์ CREATE ได้ โดยสามารถ Download จาก Link นี้ https://www.postgresql.org/download/windows/ ขั้นตอนการติดตั้ง สร้าง Folderเช่น C:\alfio เป็นต้น 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) สร้างไฟล์ Configurationสร้างไฟล์ชื่อ application.properties เพื่อกำหนดค่าเกี่ยวกับ Database ได้แก่ Host, Database, User, Password และอื่น ดังตัวอย่าง (อย่าลืมเปลี่ยน Password ให้ตรงกับที่ตั้งไว้) Run ! ด้วยคำสั่ง หน้า 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 ของผู้มาลงทะเบียนเข้างานได้เลย หวังว่าจะเป็นประโยชน์ครับ

Read More »

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

Read More »