CoP PSU IT Blog – Page 106 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

Stencil : Decorators

July 5, 2018 11:35

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 โดยใช้

Visual test automation

July 5, 2018 10:01

ในการพัฒนา 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 จะทำการบันทึกผลเป็นรูปภาพลงใน

Stencil : Web component compiler

July 2, 2018 21:01

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

Transpose rows into columns using the Oracle PIVOT operator

June 26, 2018 13:47

ก่อนหน้านี้เราเคยนำเสนอบทความวิธีการทรานสโพส (หมุน) ข้อมูลจากแถวเป็นคอลัมน์ ด้วยการใช้ฟังก์ชัน SUM และ DECODE กันมาแล้ววันนี้ลองมาใช้อีกวิธีในการแสดงผลดังกล่าวด้วย PIVOT ก่อนอื่นมาดูในส่วน syntax ของ PIVOT กันก่อน PIVOT Syntax SELECT * FROM ( SELECT column1, column2 FROM tables WHERE conditions ) PIVOT ( aggregate_function(column2) FOR column2 IN ( expr1, expr2, … expr_n) | subquery ) ORDER BY expression [ ASC | DESC ]; โดยที่ aggregate_function คือ aggregate function เช่น SUM, COUNT, MIN, MAX, หรือ AVG IN ( expr1, expr2, … expr_n ) คือ รายการค่าของ column2 ที่ต้องการจะแสดงในส่วนคอลัมภ์ คราวนี้ลองมาดูตัวอย่างกัน สมมติเรามีข้อมูลคะแนนภาษาอังกฤษของนักศึกษาใหม่ซึ่งประกอบด้วย 6 ฟิลด์ข้อมูลแสดงดังตัวอย่างด้านล่าง ข้อมูล: ตาราง TEST_NEW_STUDENT เป็นตัวอย่างข้อมูลคะแนนภาษาอังกฤษของนักศึกษาใหม่จำนวน 16 รายการ โจทย์ เราต้องการจะแสดงจำนวนของนักศึกษาแยกตามคณะที่สังกัด โดยให้แสดงข้อมูลอยู่ในรูปแบบคอลัมภ์ ดังนั้นจึงเราสามารถเขียนคิวรีโดยใช้ PIVOT เพื่อแก้ปัญหาข้างต้นได้ดังนี้ SELECT * FROM (SELECT ‘TotalStudent’ fac_summary, fac_id FROM test_new_student) PIVOT (COUNT (fac_id) FOR fac_id IN (’06’ Engineering, ’08’ Science, ’12’ Natural_Resources)) ผลลัพธ์ที่ได้ : แสดงข้อมูลจำนวนนักศึกษาซึ่งประกอบด้วย จำนวนนักศึกษาคณะวิศวกรรมศาสตร์ คณะวิทยาศาสตร์ และคณะทรัพยากรธรรมชาติ ตามลำดับ โดยแสดงข้อมูลในรูปแบบคอลัมภ์

Oracle : Transpose rows into columns using SUM and DECODE

June 26, 2018 13:17

วันนี้เราจะนำเสนอวิธีการทรานสโพส (หมุน) ข้อมูลจากแถวเป็นคอลัมน์ โดยการประยุกต์ใช้ฟังก์ชัน SUM และ ฟังก์ชัน DECODE ก่อนอื่นจะขออธิบายในส่วนของฟังก์ชัน SUM และ DECODE กันก่อน ฟังก์ชัน SUM SUMจัดเป็นฟังก์ชันประเภท Aggregate Function ทำหน้าที่ในการคำนวณผลรวมของค่าในคอลัมภ์ มีรูปแบบการใช้งานดังตัวอย่างข้างล่างนี้ SELECT SUM(aggregate_expression) FROM tables [WHERE conditions]; โดยที่ aggregate_expression คือ คอลัมภ์ที่ต้องการค่าผลรวม โดยที่ข้อมูลในคอลัมภ์จะต้องเป็นชนิดตัวเลขเท่านั้น มาดูตัวอย่างการใช้งานกัน SELECT fac_id, SUM (eng_score) sum_eng_score FROM test_new_student GROUP BY fac_id; ผลลัพธ์ที่ได้ : แสดงผลรวมของคะแนนภาษาอังกฤษของแต่ละคณะ ฟังก์ชัน DECODE DECODE เป็นการเขียนเงื่อนไขบนชุดคำสั่ง select โดยมีลักษณะการทำงานเหมือน IF-THEN-ELSE โดยถ้าเข้าเงื่อนไขที่กำหนด ต้องการให้ทำอะไรก็ให้ระบุลงไป Syntax: DECODE( expression , search , result [, search , result]… [, default] ) โดยที่ expression คือ ค่าที่จะเอามาใช้เปรียบเทียบเงื่อนไข compare_value คือ ค่าที่สามารถจะมาเปรียบเทียบได้กับ expression return_value คือค่าที่จะแสดงออกมาเมื่อ ค่าของ expression = compare_value default_return_value คือค่าที่จะแสดง เมื่อ expression <> compare_value ลองมาดูตัวอย่างการใช้งานกัน สมมติเรามีข้อมูลคะแนนภาษาอังกฤษของนักศึกษาใหม่ซึ่งประกอบด้วย 6 ฟิลด์ข้อมูลแสดงดังตัวอย่างด้านล่าง ข้อมูล: ตาราง TEST_NEW_STUDENT เป็นตัวอย่างข้อมูลคะแนนภาษาอังกฤษของนักศึกษาใหม่จำนวน 16 รายการ ตัวอย่างคิวรีในการใช้ฟังก์ชัน DECODE SELECT fac_id, DECODE ( fac_id, ’06’, ‘คณะวิศวกรรมศาสตร์’, ’08’, ‘คณะวิทยาศาสตร์’, ’12’, ‘คณะทรัพยากรธรรมชาติ’,’null’) fac_name,stud_name_thai,stud_sname_thai,sn_code,eng_score FROM test_new_student; ผลลัพธ์ที่ได้ โดยความหมายของด้านบนคือ ถ้าค่า fac_id ของตาราง test_new_student เป็น ’06’ ก็ให้แสดง คำว่า ‘คณะวิศวกรรมศาสตร์’ ถ้าค่า fac_id ของตาราง test_new_student เป็น ’08’ ก็ให้แสดง คำว่า ‘คณะคณะวิทยาศาสตร์’ ถ้าค่า fac_id ของตาราง test_new_student เป็น ’12’ ก็ให้แสดง คำว่า ‘คณะทรัพยากรธรรมชาติ’ โดยปกติถ้าเราเขียนคิวรีเพื่อนับจำนวนนักศึกษาโดยแยกตามคณะที่สังกัดของนักศึกษา เราสามารถเขียนคิวรีได้ดังนี้ SELECT fac_id, COUNT (*) fac_summary FROM test_new_student GROUP BY fac_id; ผลลัพธ์ที่ได้ : แสดงจำนวนนักศึกษาแยกตามคณะที่สังกัด การแสดงผลปกติจะแสดงในรูปแบบแถว คราวนี้ลองมาตั้งโจทย์ใหม่โดยยังมีความต้องการเหมือนเดิมคือ นับจำนวนนักศึกษาโดยแยกตามคณะที่สังกัดของนักศึกษา แต่เปลี่ยนจากการแสดงในรูปแบบแถวให้แสดงในรูปแบบคอลัมภ์แทน จากโจทย์เราสามารถประยุกต์ใช้งานฟังก์ชัน sum และ decode เพื่อจะแปลงข้อมูลในรูปแบบแถวให้อยู่ในรูปแบบ คอลัมภ์ได้ โดยเราสามารถเขียนคิวรีได้ดังนี้ SELECT ‘TotalStudent’ faculty, SUM (DECODE (fac_id, ’06’, 1)) Engineering, SUM (DECODE (fac_id, ’08’, 1)) Science, SUM (DECODE (fac_id, ’12’, 1)) Natural_Resources FROM test_new_student ผลลัพธ์ที่ได้ : แสดงข้อมูลจำนวนนักศึกษาซึ่งประกอบด้วย จำนวนนักศึกษาคณะวิศวกรรมศาสตร์ คณะวิทยาศาสตร์ และคณะทรัพยากรธรรมชาติ ตามลำดับ โดยแสดงข้อมูลในรูปแบบคอลัมภ์