Developer – Page 15 – CoP PSU IT Blog

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

November 19, 2019 15:08

สำหรับใครที่อยากจะลองพัฒนา Web Application ด้วย django web framework ผมได้รวบรวมเป็นชุดเริ่มต้น ซึ่งจะสามารถสร้าง Responsive Web และ มีแบบฟอร์มที่สวยงามด้วย crispy form มาเรียบร้อย ใช้งานได้ทั้ง แบบ Python บนเครื่อง และ แบบ Docker ลองทำตามดูได้ครับ Repository สามารถเปิด URL ต่อไปนี้ เพื่อไป Download หรือ จะใช้ git clone ก็ได้ https://github.com/nagarindkx/ddready.git https://gitlab.psu.ac.th/kanakorn.h/ddready.git จากนั้น ให้เปิด cmd ไปยังตำแหน่งที่ clone ลงมา สำหรับผู้ที่ติดตั้ง python อยู่แล้ว แล้วใช้คำสั่งต่อไปนี้ สำหรับผู้ที่จะใช้ Docker บน Windows ใช้คำสั่งต่อไปนี้ ทดสอบใช้งาน http://localhost:8080 ในตอนต่อไป จะแนะนำวิธีการสร้าง แบบสอบถาม ทดแทนการใช้ Google Forms ครับ

เค้าเอาไฟล์ 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: จุดประสงค์ของบทความนี้ เพื่อแนะนำวิธีการทำเท่านั้น โปรดนำความรู้นี้ไปใช้งานอย่างสร้างสรรค์นะครับ ผู้เขียนบทความไม่เกี่ยวข้องใด ๆ กับผู้นำไปใช้ทั้งสิ้น

แนวทางการพัฒนา 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 มาในไฟล์นี้ ในที่นี้ ใช้

Variables ใน Robot Framework

August 27, 2019 15:38

วันนี้เรามาดูตัวแปร ใน Robot Framework กันดีกว่า ดู ๆ ไปตัวแปรมันก็แปลกดีนะ มาดูกันว่าเป็นไงบ้าง Case Insensitive –> ตัวพิมพ์เล็ก – พิมพ์ใหญ่เป็นตัวเดียวกัน Ignore space –> ไม่สนใจช่องว่าง Ignore underscore –> ไม่แคร์ Underscore 555 มาดูประเภทของตัวแปรกัน ดังรูปจ้า ค่าคงที่ List Dictionary หรือ Json ตามตัวอย่าง มารันดูข้อมูลกันจะเห็นได้ว่ามันจะรันตามลำดับ ที่เราแสดง Log to console ลองดูว่าถ้าเราจะให้แสดง List เฉพาะคำว่า Chotkaew จะทำยังไง ให้มองว่า Thichaluk เป็น index ที่ 0 และ Chotkaew เป็น index ที่ 1 รันดูผลลัพธ์กัน มาลองดูของ dictionary กันบ้าง ให้แสดงค่าของ Thichaluk รันดูผลลัพธ์ ทุกคนคงจะมองเห็นการเข้าถึงข้อมูลแต่ละประเภทกันแล้วใช่มั๊ยค่ะ ต่อไปมาลองสร้าง List กับ Dictionary อย่างง่าย ๆ กัน รูปแบบคำสั่งก็ไปหาดูได้ที่ https://robotframework.org ที่ Libraries –> Builtin ที่ Builtin คลิก View หา Create List กับ Create Dictionary รันดูผลลัพธ์

Should Be Equal ใน Robot Framework

August 21, 2019 08:57

วันนี้จะมาทดลองใช้ Should Be Equal (การเปรียบเทียบ) ใน Robot framework กันค่ะ ก่อนจะถึงคำสั่งเปรียบเทียบ เราก็ต้องเขียน Test Case อื่น ๆ กันก่อน งั้นวันนี้จะเขียนแบ่ง Test Case ให้อ่านง่าย ๆ กันไปเลย เพื่อเพื่อน ๆ จะได้นำไปประยุกต์ใช้งานกันได้ค่ะ สิ่งที่ต้องใช้ในวันนี้ คือ Notpad++ หรือ Tool อื่น ๆ ที่เพื่อน ๆ ถนัด วันนี้เราจะใช้ Visual Studio Code กันค่ะ (เพราะเหนื่อยกับการรันผ่าน command line แล้ว) มาเริ่มกันเลยดีกว่า จะเห็นว่า เรามีการตั้งชื่อ Test Case ให้อ่านง่าย เพื่อจะให้รู้ว่าแต่ละขั้นเราทำอะไร ตอนเป็น Report จะได้ดูง่ายเข้าไปอีก ค่อนไปดู Report ตอนท้าย คำสั่งนี้จะตรวจสอบว่าค่าที่ได้ตรงกันมั๊ย จะเห็นว่าเราเขียน Test Case เป็นภาษาไทยได้นะเออ จากรูปเปรียบเทียบค่าจาก xpath ที่ locator h1 ตามคำสั่ง //h1[@class=”main-header”] เท่ากับ “ROBOT FRAME WORK/” หรือไม่ Locator ที่กล่าวคือตำแหน่งตามรูปข้างบน คราวนี้เราลองปรับให้ ${expect} ไม่ใช่ค่าเดียวกับ locator ที่เราอ้างถึง จะเห็นได้ว่าที่ log console มีการแสดงผลในการเปรียบเทียบว่าไม่เท่ากัน ไปดู Report กันซะหน่อยว่าเป็นยังไง Report ก็ดูง่ายมากเลยเห็นมั๊ยหล่ะ ^_^