Day: July 5, 2018

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

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

    1. ติดตั้ง Python จาก https://www.python.org/downloads/
    2. เปิด cmd โดย Run As Administrator
    3. ใช้คำสั่ง
      python -m pip install django
    4. ทดสอบโดยใช้คำสั่ง
      python -m django --version
    5. สร้าง Project ด้วยคำสั่ง
       django-admin startproject mysite
    6. เข้าไปใน project “mysite” directory ด้วยคำสั่ง
      cd mysite
    7. ทดสอบ runserver
      python manage.py runserver
    8. เปิด website:
      http://127.0.0.1:8000/

    เดี๋ยวมาต่อเรื่อง การสร้าง App, การใช้ Database, การ Authentication และการสร้าง REST API เพื่อใช้งานกับ OAuth2

  • WordPress Custom Error page

    เนื่องจากมีปัญหาเกี่ยวกับการแสดงผล error page ที่แสดงผลใน licensing.psu.ac.th จึงต้องหาทางแก้ไขการแสดง Error page 403 ใหม่

    1. Plug in ชื่อ Custom Error Pages ติดตั้งแล้วเปิดใช้งานให้เรียบร้อย
    2. เพิ่มข้อความต่อไปนี้ในแฟ้ม .htaccess
      ErrorDocument 403 /index.php?status=403
      ErrorDocument 401 /index.php?status=401
    3. แต่เนื่องจากไซต์ที่แสดง 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.
    4. ฉะนั้นต้องไปสร้าง .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
    5. จบขอให้สนุก
    6. ก่อนจาก licensing.psu.ac.th เป็นที่จัดเก็บ link ของไฟล์ที่อยู่บน bahamut.psu.ac.th เมื่อดาวน์โหลดไฟล์ต่างๆ นอกมหาวิทยาลัย จะแจ้ง error ในหน้าของ bahamut.psu.ac.th ทำให้ดูไม่เป็นหนึ่งเดียว ปรับแก้ด้วยวิธีข้างต้น
    7. ตัวอย่างหน้า error page เข้ารับชมได้ที่ https://licensing.psu.ac.th/index.php?status=403
    8. สรุปได้ว่า ErrorDocument จะชี้ที่ไหนก็ได้
  • 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 โดยใช้ camelCase

    <todo-list color="blue" favoriteNumber="24" isSelected="true"></todo-list>

    Prop สามารถเรียกใช้งานผ่านทาง element ของ  javascript

    const todoListElement = document.querySelector('todo-list');
    console.log(todoListElement.myHttpService); // MyHttpService
    console.log(todoListElement.color); // blue
    

     

    Component State

    @State() decorator ใช้ในการจัดการ internal data ของ component ซึ่งผู้ใช้ไม่สามารถแก้ไขข้อมูลจากภายนอก component  เมื่อข้อมูลมีการเปลี่ยนแปลง จะทำให้ component ทำการ re-render เช่นเดียวกับ Prop

    import { State } from '@stencil/core';
    
    ...
    export class TodoList {
      @State() completedTodos: Todo[];
    
      completeTodo(todo: Todo) {
        // This will cause our render function to be called again
        this.completedTodos = [...this.completedTodos, todo];
      }
    
      render() {
        //
      }
    }
    

     

    Element Decorator

    @Element() decorator ใช้ในการเข้าถึง host element ภายใน class instance โดย return type คือ HTMLElement  ทำให้สามารถใช้ standard DOM methods/events ได้

    import { Element } from '@stencil/core';
    
    ...
    export class TodoList {
    
      @Element() todoListEl: HTMLElement;
    
      addClass(){
        this.todoListEl.classList.add('active');
      }
    }
    

     

    อ้างอิง : https://stenciljs.com/docs/decorators

  • 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 จะทำการบันทึกผลเป็นรูปภาพลงใน  folder “examples” และแก้ไข hello-world.md กำหนด expected result ดังนี้

    จากนั้นมาเริ่มทดสอบอีกครั้งโดยใช้คำสั่ง

    appraise run

    ซึ่งจะได้ผลดังนี้

    เข้าไปดูผลการทดสอบ file : result/hello-world.htm อีกครั้งดังนี้

    หากทำการแก้ไข test fixture โดยการเพิ่มขนาดตัวอักษร จากนั้นมาเริ่มทดสอบอีกครั้งโดยใช้คำสั่ง

    appraise run

    ก็จะได้ผลดังนี้

    ซึ่งแสดงให้เห็นว่า ผลการทดสอบ failed จากขนาดตัวอักษรที่เปลี่ยนไป ไม่เป็นไปตามที่ต้องการ

     

    อ้างอิง
    https://github.com/AppraiseQA/appraise

    แนะนำ Appraise สำหรับ Visual Testing แบบอัตโนมัติ