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

November 6, 2019 13:17

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 »

ครบรอบ 7 ปี Web Blog sysadmin.psu.ac.th จัดกิจกรรม CoP PSU IT

November 1, 2019 09:48

กิจกรรมที่ 1ในวาระเข้าสู่เดือนพฤศจิกายน ครบรอบ 7 ปี Web Blog sysadmin.psu.ac.th ผมจัดกิจกรรมเล่าเรื่อง ผมเพิ่ม category ชื่อ “Share and Tell” ขึ้นมา โดยมีวัตถุประสงค์ให้พวกเรามาเล่าเรื่องเกี่ยวกับงานที่ทำ ทั้งในหน้าที่ ขอช่วย และ งานอดิเรก อย่างใดก็ได้ เป็นสิ่งที่ “คิดว่าจะทำ” “กำลังทำอยู่” หรือ “ทำเสร็จแล้วและใช้งานอยู่” ก็ได้ และมีความคิดอยากมานั่งคุยแลกเปลี่ยนความคิดกัน เขียน Blog จะได้รับค่าตอบแทนมูลค่า 300 บาท/คน/เรื่อง สำหรับผู้ที่ส่งเรื่องเข้ามา 20 คนแรกเท่านั้น ขยายเวลารับเรื่องไปจนสิ้นสุดวันที่ 31 ธันวาคม 2562 สำหรับงานที่เขียนในหัวข้อ “Share and Tell” เดือนพฤศจิกายนและธันวาคม จะได้นำไปจัดกิจกรรม “CoP PSU IT Share and Tell ครั้งที่ 1” ใน จัดงานในวันที่ 22 มกราคม 2563 ข้อกำหนดสิ่งที่เขียน (หรือจะเรียกว่า แนวทางเขียนให้เป็น pattern เดียวกัน 555) ตั้งชื่อ Blog ด้วยชื่องาน และ เขียนไว้ในเว็บไซต์นี้1.ชื่องาน (โครงงาน) เช่น โปรแกรม micro:bit ทำรถบังคับเช่น พัฒนาโปรแกรม … สำหรับ ….2.เป้าหมายของงานที่ทำเช่น จะได้เป็นอะไรออกมา ใช้ทำอะไร3.สภาพแวดล้อมที่เกี่ยวกับงาน (โครงงาน)เช่น ต้องมีอุปกรณ์ใดบ้าง ใช้ซอฟต์แวร์ใดบ้าง ทำงานบน linux หรือ Windows ทำงานในเครื่อง server เดียว หรือ บน Cloud 4.บรรยายสรุปสั้น ๆ ว่า ต้องใช้อะไรบ้างและทำอย่างไร (ไม่ต้องลงขั้นตอนละเอียด)5.อื่น ๆ อยากบอกอะไรเพิ่มเติม เขียนเพิ่มได้ กิจกรรมที่ 2 ในทุกเดือนจะมี Lucky Draw จับรางวัลมูลค่า 500 บาท 1 รางวัล สำหรับงานเขียนในหัวข้อ category ต่าง ๆ ตามปรกติ สำหรับวัตถุประสงค์ของการจัดกิจกรรมในปีนี้ เพื่อให้พวกเราฝึกฝนการแลกเปลี่ยนความคิด ฝึกฝนการเขียน และ สนุกไปกับการจัดกิจกรรม CoP PSU IT ตลอดทั้งปีและต่อ ๆ ไปครับ ขอบคุณครับ วิบูลย์

Read More »

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

October 31, 2019 15:46

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

October 26, 2019 17:35

ในการพัฒนาแอพพลิเคชั่น เราก็จะเจอปัญหานึงเสมอ ๆ คือ เวอร์ชั่น (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

October 7, 2019 16:59

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 »