ขั้นตอนการติดตั้ง Django ด้วย Python3 บน Windows

ขั้นตอนการติดตั้ง Django ด้วย Python3 บน Windows ติดตั้ง Python จาก https://www.python.org/downloads/ เปิด cmd โดย Run As Administrator ใช้คำสั่ง python -m pip install django ทดสอบโดยใช้คำสั่ง python -m django –version สร้าง Project ด้วยคำสั่ง django-admin startproject mysite เข้าไปใน project “mysite” directory ด้วยคำสั่ง cd mysite ทดสอบ runserver python manage.py runserver เปิด website: http://127.0.0.1:8000/ เดี๋ยวมาต่อเรื่อง การสร้าง App, การใช้ Database, การ Authentication และการสร้าง REST API เพื่อใช้งานกับ OAuth2

Read More »

WordPress Custom Error page

เนื่องจากมีปัญหาเกี่ยวกับการแสดงผล error page ที่แสดงผลใน licensing.psu.ac.th จึงต้องหาทางแก้ไขการแสดง Error page 403 ใหม่ Plug in ชื่อ Custom Error Pages ติดตั้งแล้วเปิดใช้งานให้เรียบร้อย เพิ่มข้อความต่อไปนี้ในแฟ้ม .htaccess ErrorDocument 403 /index.php?status=403 ErrorDocument 401 /index.php?status=401 แต่เนื่องจากไซต์ที่แสดง error 403 ไม่ใช่ licensing.psu.ac.th แต่เป็น bahamut.psu.ac.th ซึ่งอาจจะมีหลายท่านเคยเจอข้อความประมาณ Forbidden You don’t have permission to access /licensing/SW_DVD5_Office_Professional_Plus _2013w_SP1_32-BIT_X64_English_X19-35900.ISO on this server. ฉะนั้นต้องไปสร้าง .htaccess ในพื้นที่ของไซต์ bahamut.psu.ac.th แทน ซึ่งอยู่ที่ /licensing มีข้อความว่า ErrorDocument 403 https://licensing.psu.ac.th/index.php?status=403 ErrorDocument 401 https://licensing.psu.ac.th/index.php?status=401 จบขอให้สนุก ก่อนจาก licensing.psu.ac.th เป็นที่จัดเก็บ link ของไฟล์ที่อยู่บน bahamut.psu.ac.th เมื่อดาวน์โหลดไฟล์ต่างๆ นอกมหาวิทยาลัย จะแจ้ง error ในหน้าของ bahamut.psu.ac.th ทำให้ดูไม่เป็นหนึ่งเดียว ปรับแก้ด้วยวิธีข้างต้น ตัวอย่างหน้า error page เข้ารับชมได้ที่ https://licensing.psu.ac.th/index.php?status=403 สรุปได้ว่า ErrorDocument จะชี้ที่ไหนก็ได้

Read More »

Stencil : Decorators

Component Decorator แต่ละ Stencil component จะต้องขึ้นต้นด้วย @Component() decorator เสมอ โดย import มาจาก @stencil.core package ซึ่งภายใต้ @Component() decorator สามารถกำหนด tag name และ styleUrl ของ component import { Component } from ‘@stencil/core’; @Component({ tag: ‘todo-list’, styleUrl: ‘todo-list.scss’ }) export class TodoList { … } @Component() decorator ให้ความสามารถในการกำหนด CSS classes และ attributes บน componnet ที่สร้างโดยใช้ host option ดังนี้ import { Component } from ‘@stencil/core’; @Component({ tag: ‘todo-list’, styleUrl: ‘todo-list.scss’, host: { theme: ‘todo’, role: ‘list’ } }) เมื่อใช้งาน component ตัวนี้ ก็จะมีการกำหนดค่า class เป็น todo และกำหนด role attribute ให้อัตโนมัติ <todo-list class=’todo’ role=’list’></todo-list>   Prop Decorator @Prop() decorator ใช้ระบุ attribute หรือ properties สำหรับ element ที่ผู้พัฒนาสามารถกำหนดค่าให้กับ component นั้นได้  เนื่องจาก Children component จะไม่สามารถเข้าถึง properties หรือ reference ของ parent component ได้จึงใช้ Props ในการผ่านข้อมูลจาก parent มาสู่ child และเมื่อใดก็ตามที่ค่าของ Props เปลี่ยนแปลงจะทำให้ component ทำการ re-render type ของ Props ที่รองรับมีหลากหลาย ไม่ว่าจะเป็น number, string, boolean หรือแม้กระทั่ง Object หรือ Array import { Prop } from ‘@stencil/core’; … export class TodoList { @Prop() color: string; @Prop() favoriteNumber: number; @Prop() isSelected: boolean; @Prop() myHttpService: MyHttpService; } ภายใน function ใน TodoList class สามารถเรียกใช้งาน Props ผ่าน this operator logColor() { console.log(this.color) } สำหรับการใช้ภายนอก ใน HTML การกำหนดค่าทำได้โดย set ค่าให้ attributes ของ component tag โดยใช้ dash-case  เช่น Prop favoriteNumber ใช้ attribute favorite-number <todo-list color=”blue” favorite-number=”24″ is-selected=”true”></todo-list> สำหรับการใช้ใน JSX การกำหนดค่าทำได้โดย set ค่าให้ attributes ของ component tag โดยใช้

Read More »

Visual test automation

ในการพัฒนา software นั้น เรื่อง Look and Feel เป็นสิ่งที่สำคัญมาก ๆ software ที่ทำงานได้ดียังไม่พอ ต้องดูดีสวยงามและใช้งานง่ายอีกด้วย คำถามที่น่าสนใจคือ จะทำการทดสอบในส่วนของการแสดงผลอย่างไรบ้าง โดยปกติในการทำการทดสอบการแสดงผล จะใช้คนเป็นผู้ทดสอบ มานั่งดู มาใช้งาน แล้วพิจารณาและตัดสินว่า ถูกหรือไม่ ทำให้ต้องใช้เวลาและกำลังคนในการทดสอบค่อยข้างมาก เพราะว่าในส่วนของการแสดงผลนั้นมันยากมาก ๆ สำหรับการทดสอบ มีหลายสิ่งอย่างให้พิจารณา ยกตัวอย่างเช่น ในแต่ละ element แต่ละส่วนงานทำงานและแสดงผลได้อย่างถูกต้องแต่เมื่อนำมารวมกัน กลับทำงานไม่ถูกต้อง หรือ แสดงผลผิดพลาด การลดเวลาและต้นทุนในการทดสอบลงโดยใช้การทดสอบแบบอัตโนมัติ เป็นสิ่งจำเป็น และต้องมีเครื่องมือช่วย ในบทความนี้ขอแนะนำ Appraise ซึ่ง Appraise นั้นได้นำแนวทางของ Specification by Example มาใช้ นั่นหมายความว่า ในแต่ละ test case ต้องมี concrete example ที่ชัดเจน นำ test case เหล่านี้ไปทดสอบแบบอัตโนมัติ ทำการทดสอบด้วย Google Chrome Headless ซึ่งจะทำการ snapshot ส่วนที่ต้องการเป็นรูปภาพและเปรียบเทียบกับผลที่คาดหวังหรือไม่ ถ้าผลออกมาไม่ตรงกับที่คาดหวัง Appraise จะแสดงผลที่แตกต่างออกมาให้เห็น จากนั้นจะให้คนมา approve ว่าผลที่แตกต่างถูกหรือไม่ต่อไป ถ้าทำการยอมรับความแตกต่างก็จะบันทึกผลใหม่ให้ทันที ซึ่งง่ายต่อการดูแลรักษา test case อย่างมาก เริ่มต้นการใช้งาน Appraise ทำการติดตั้ง Appraise ด้วย NPM npm install appraise -g จะทำการติดตั้ง Appraise เป็น global command line uitlity อย่างไรก็ตาม สามารถติตั้งเป็นแบบ NPM package dependency โดยใช้ NPM script เรียกใช้ commamd line ก็ได้เช่นกัน สร้าง test page เริ่มต้นสร้าง folder “examples” เป็นที่เก็บ test page  (default folder สำหรับเก็บ test page ของ Appraise คือ “examples”)  Appraise ใช้  Github-flavoured Markdown syntax  ในการประมวลผล test page สร้าง file : hello-world.md ใน folder “examples” และเพิ่มข้อความดังนี้ This paragraph is just an intro, it will be ignored for testing ~~~yaml example=”first” fixture=”hello.js” color: blue ~~~ สร้าง test fixture test fixture ใช้สำหรับ Appraise สำหรับประมวลผล example ไปเป็น test result โดยสร้าง file : hello.js ใน folder “examples”และเพิ่ม code ดังนี้ ทำการ run ทดสอบ ทดสอบโดยใช้คำสั่ง appraise run ซึ่งจะได้ผลดังนี้ Appraise บันทึกผลการทดสอบไว้ใน folder “results” ซึ่งได้ผลการทดสอบ file : result/hello-world.htm ดังนี้ จะเห็นได้ว่าผลการทดสอบ failed เนื่องจาก test case นี้ยังไม่ได้กำหนด expected result หรือผลที่คาดหวัง อย่างไรก็ตาม ถ้าพิจารณาผลการทำงานว่าใช้ได้ Appraise มีทางเลือกให้สามารถ capture ผลเพื่อใช้ในการทดสอบครั้งต่อไป โดยทำการ approve ผลการทำงานนี้ก่อนเพื่อทำการยอมรับผลนี้ ด้วยคำสั่ง appraise approve –page “hello-world” Appraise จะทำการบันทึกผลเป็นรูปภาพลงใน 

Read More »

Stencil : Web component compiler

Stencil เป็น compiler ที่ทำหน้าที่สร้าง standards-based web component (custom element) ซึ่งรวบรวมแนวคิดที่ดีของ framework ต่างๆที่ได้รับความนิยมสูง มาไว้ใน component โดย build-time tool ที่ใช้งานง่าย เช่น Virtual DOM Async rendering (inspired by React Fiber) Reactive data-binding TypeScript JSX web component ที่ได้จาก Stencil เป็น standards-based web component ทำให้สามารถใช้งานร่วมกับ framework ต่างๆที่ได้รับความนิยม และสามารถใช้ได้โดยไม่มี framework ก็ได้ จากเดิมเมื่อพัฒนาด้วย framework หนึ่งแล้ว ไม่สามารถนำไปใช้ร่วมกับ framework อื่นได้ Stencil มี APIs เช่น Virtual DOM, JSX, และ async rendering  ที่ทำให้สามารถพัฒนา web component ที่ทำงานได้เร็ว มีประสิทธิภาพดีกว่า และสร้างได้ง่ายกว่าเมื่อเปรียบเทียบกับการเขียน custom element โดยตรงโดยไม่ใช้ Stencil  และใน Stencil ยังมี small dev server พร้อมความสามารถ live reload อยู่ด้วย เริ่มต้นสร้าง project กับ Stencil การสร้าง component ทำได้โดยเริ่มต้นจาก component starter ดังนี้ git clone https://github.com/ionic-team/stencil-component-starter my-component cd my-component git remote rm origin npm install จากนั้น ถ้าต้องการ start  live-reload server สำหรับการพัฒนา ให้ใช้คำสั่ง npm start Updating Stencil ถ้าต้องการ update Stencil เป็น version ล่าสุดให้ใช้คำสั่ง npm install @stencil/core@latest –save-exact Stencil components component ถูกสร้างโดยการสร้าง file .tsx ใน “src/components” directory เขียน component ด้วย JSX และ Typescript  ซึ่ง component ที่สร้างมาจาก component starter คือ my-component.tsx import { Component, Prop } from ‘@stencil/core’; @Component({ tag: ‘my-first-component’, styleUrl: ‘my-first-component.scss’ }) export class MyComponent { @Prop() name: string; render() { return (My name is {this.name}); } } เมื่อ compile แล้วเสร็จ สามารถนำ component ไปใช้ใน HTML page ได้เช่นเดียวกับ tag อื่นๆ Web Components จะต้องมี “-” ภายใน tag (“myFirstComponent” เป็นชื่อที่ไม่สามารถใช้งานได้) <my-first-component name=”Max”></my-first-component> เมื่อเปิดผ่าน browser จะแสดงผล My name is Max

Read More »