Month: July 2018

สร้าง Hadoop และ Spark Cluster เพื่องานด้าน Data Science ด้วย Google Cloud Dataproc + Datalab

kanakorn.h

July 10, 2018
จาก Ambari #01: ติดตั้ง Ambari Server , Ambari #02 ติดตั้ง Ambari Agent , Ambari #04 การสร้าง Hadoop ด้วย Ambari บน AWS และ GCP #01 วิธีการสร้าง Virtual Machine บน Google Cloud Platform จะเห็นได้ว่า ก็ยังมีความยุ่งยากอยู่ อีกทั้ง หากต้องการใช้ PySpark ก็ต้องตามติดตั้ง Python Packages ต้องปรับค่ามากมาย และหากต้องการขยายระบบ ก็มีงานต้องทำอีกเยอะ

ในบทความนี้ จะแนะนำอีกวิธีหนึ่ง คือ การใช้งาน Google Cloud Dataproc ซึ่งจะทำให้เราได้ใช้ Hadoop + Spark Cluster ซึ่งได้รับการทดสอบเป็นอย่างดี อีกทั้งยังสามารถเลือกใช้ Spark รุ่นต่างๆได้อย่างง่ายได้ ทำให้สามารถโฟกัสไปยัง Data และ กระบวนทำ Machine Learning ได้เต็มที่
1. ไปที่ Google Cloud Console เพื่อเลือก Project ที่จะทำงานด้วย และเปิดช้งาน Cloud Dataproc และ Compute Engine APIs และ ในที่นี้ จะมี project-id คือ kx-dataproc-01 (สามารถสร้างในชื่อที่ต้องการเองได้)
  https://console.cloud.google.com/
2. เปิดใช้งาน Google Cloud Dataproc
  https://console.cloud.google.com/dataproc/
3. เปิด GCLOUD COMMAND
4. ในที่นี้ จะสร้าง Cluster ชื่อ mycluster ใน project-id ชื่อ kx-dataproc-01 แล้วให้ copy คำสั่งต่อไปนี้ลงไปใน gcloud command แล้วกดปุ่ม Enter
```
gcloud dataproc clusters create mycluster --project kx-dataproc-01 --initialization-actions gs://dataproc-initialization-actions/datalab/datalab.sh
```
5. ใช้เวลาประมาณ 5 นาที ก็จะได้ Hadoop + Spark Cluster ที่มี 1 Master และ 2 Workers
  ซึ่ง Master จะชื่อว่า mycluster-m
  และ Workers จะชื่อ mycluster-w-0 และ mycluster-w-1
6. ต่อไป ทำ SSH Tunnel จาก Master คือ mycluster-m Port 8080 ออกมา โดยพิมพ์คำสั่งต่อไปนี้
```
gcloud compute ssh mycluster-m --project kx-dataproc-01 --zone=asia-southeast1-a -- -4 -N -L 8080:mycluster-m:8080
```
  โดย
  –project ไว้สำหรับระบุชื่อ project-id
  –zone ไว้ระบุ Zone ที่ Cluster อยู่
  — ไว้เป็นตัวคั่น (separator) ว่าหลังจากนี้เป็นคำสั่งของ ssh
  -4 บอกว่า ติดต่อด้วย IPv4
  -N บอกว่า ไม่ต้องเปิด Shell ของเครื่อง Master
  -L บอกว่า จะ Forward Port 8080 ไปยังเครื่อง mycluster-m ที่ port 8080
7. จากนั้น เปิด Web Preview on port 8080
8. ก็จะได้ Google Cloud Datalab ซึ่งติดต่อกับ Hadoop+Spark ที่อยู่บน Google Cloud Dataproc ได้แล้ว
Reference:

https://cloud.google.com/dataproc/docs/tutorials/dataproc-datalab
July 10, 2018
Puppeteer ควบคุมและบันทึกการใช้งาน chrome สำหรับ UI testing

wilaiwan.h

July 8, 2018
Puppeteer เป็น Node library ที่มีชุดของ API สำหรับการควบคุม Google Chrome หรือ Chromium ผ่าน DevTool protocol ทำงานในรูปแบบ headless โดย default แต่สามารถกำหนดให้ทำงานแบบ full (non-headless) Chrome ได้ ที่สำคัญไม่ต้องทำงานผ่าน Web Driver อีกต่อไป

puppeteer สามารถทำงานได้ทุกอย่างที่สามารถทำได้โดย manual บน browser เช่น
- สร้าง screenshots และ PDFs ของ page
- Automate form submission
- UI testing
- keyboard input
การติดตั้ง Puppeteer

การติดตั้ง Puppeteer เพื่อใช้งานใน project สามารถทำได้ผ่านทาง NPM โดยใช้คำสั่ง
```
npm i puppeteer
```
เมื่อทำการติดตั้ง Puppeteer จะทำการ downloads Chromium version ล่าสุดซึ่งสามารถทำงานร่วมกับ api ได้อย่างสมบูรณ์ (ประมาณ 170 Mb สำหรับ Mac, 282 Mb สำหรับ Linux และ 280 Mb สำหรับ Windows) ถ้าไม่ต้องการ download Chromium ในระหว่างการติดตั้ง สามารถยกเลิกได้โดยการกำหนดค่า “PUPPETEER_SKIP_CHROMIUM_DOWNLOAD” environment variables

การใช้งาน Puppeteer

Puppeteer API ให้ความสามารถในการสร้าง instance ของ browser, เปิด webpage และบันทึก screenshot โดยสร้าง file ชื่อ example.js และเขียน code ดังนี้

เรียกใช้งาน script บน command line โดยใช้คำสั่ง
```
node example.js
```
Puppeteer กำหนด default ขนาดของ page ที่ 800 x 600px และสามารถเปลี่ยน page size โดยใช้ page.setViewport() ซึ่งสามารถศึกษาเพิ่มเติมการใช้งาน Puppeteer API ได้ที่ https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

ผลของการ run script จะทำการบันทึก screenshot ของ https://example.com ไปที่ file “example.png”

จะเห็นว่าในระหว่างการ run script ไม่ได้ปรากฎ browser ขึ้นมาให้เห็น เนื่องจากโดยค่า default จะทำงานเป็น headless mode แต่สามารถเปลี่ยนการทำงานได้โดยกำหนด headless = false หากต้องการดูการทำงาน
```
const browser = await puppeteer.launch({
	             headless: true
	         });  // default is true
```
อ้างอิง

https://github.com/GoogleChrome/puppeteer/
July 8, 2018
Visual test automation : Appraise test page

wilaiwan.h

July 8, 2018
จากบทความ Visual test automation ที่ได้กล่าวถึง Appraise ที่ใช้สำหรับทำการทดสอบการแสดงผลแบบอัตโนมัติในเบื้องต้น ตั้งแต่การติดตั้ง ตัวอย่าง test page, test fixture การเรียกใช้งานการทดสอบ และผลการทดสอบ บทความนี้จะมาลงรายละเอียดในการสร้าง test page

Creating test pages

Appraise สามารถกำหนดรูปแบบข้อกำหนดการทดสอบสำหรับการทดสอบส่วนแสดงผลได้ไม่ยุ่งยาก โดย Appraise จะทำการอ่านข้อมูลนำเข้า และ ผลลัพธ์ที่คาดหวัง จาก file ที่เขียนในรูปแบบ Markdown แล้วส่งต่อให้กับระบบทำการทดสอบ จากนั้นจะบันทึกภาพการแสดงผลที่เกิดขึ้น เปรียบเทียบภาพการแสดงผลที่ได้จริงกับผลลัพธ์ที่คาดหวัง โดยมีสิ่งที่จำเป็นที่จะต้องกำหนดสำหรับการทดสอบ 3 ส่วน คือ
1. input
2. expect output
3. fixture
Input (parameters ของ example)

input parameters อยู่ในรูปแบบ text JSON หรือ YAML ในการกำนด input parameters สำหรับแต่ละการทดสอบหรือ example จะต้องกำหนด block ของ example และกำหนดชื่อให้กับ example ในส่วนเริ่มต้น block ในรูปแบบ example=”ชื่อ”

จากรูปข้างต้น จะเห็นว่ามี example ชื่อ “first” ถูกกำหนดรูปแบบเป็น YAML ซึ่ง Appraise จะรู้ว่าจะนำข้อมูลไปได้อย่างไร ในแต่ละ test page สามารถมี eaxmple ได้มากกว่าหนึ่ง example โดยที่แต่ละ example จะต้องมีชื่อที่ไม่ซ้ำกัน ซึ่งจำเป็นในการใช้สำหรับเปรียบเทียบกับผลลัพธ์ที่คาดหวังด้วย

Expect output

ecpect output – ผลลัพธ์ที่คาดหวัง ซึ่งอยู่ในรูปแบบ file รูปภาพ .png การกำหนดผลลัพธ์ที่คาดหวังใน test page ทำได้โดยระบุ

![ชื่อ example](ชื่อ file รูปภาพ .png ที่เป็นผลลัพธ์ที่คาดหวัง)

ซึ่งจะอยู่ส่วนใดๆใน test page ก็ได้ ไม่ว่าจะอยู่ก่อน example input ก็ได้ โดยที่ความเชื่อมโยงระหว่าง input กับ expect output ก็คือชื่อของ example ที่กำหนดใน []

ในการสร้าง test page อาจจะไม่ต้องกำหนด expect output ก่อนก็ได้เช่นกัน เมื่อทำการ run test ครั้งแรก ผลที่ออกมาจะ failed เนื่องจากไม่ได้ระบุ expect output แต่สามารถที่จะบันทึกผลที่ได้จากการ run test ใช้เป็น expect output สำหรับการ run test ครั้งต่อไปได้

Fixture

fixture คือส่วนของ code ที่ Apprise ใช้ในการเชื่อมต่อกับระบบที่จะทดสอบ รวมทั้งกำหนดการใช้งานและการประมวลผล input ในการทดสอบ โดยทั่วไป examples ที่เชื่อมโยงกันจะใช้ fixture เดียวกัน

การกำหนด fixture ทำโดยการระบุ fixture =”ชื่อ fixture” ในส่วนของ header ของ example block

จากรูปข้างต้น จะเห็นว่ามี example ชื่อ “first” มีการกำหนด fixture คือ “hello.js”

จากตัวอย่าง fixture ด้านบน เป็น fixture ที่มีการสร้าง output page ออกมาโดยตรงโดยไม่ได้เชื่อมต่อกับระบบใดๆ ซึ่งในการใช้งานจริง จะต้องเชื่อมต่อกับระบบหรือส่วนที่จะทำการทดสอบจริงที่ทำการ render ผลลัพธ์ออกมา
- input parameters จาก test example ส่งผ่านมายัง fixture ผ่านทาง argument ตัวแรก
- fixture return object ซึ่งมี properties 2 ตัวคือ contentType และ content อย่างไรก็ตาม fixture ยังสามารถ return ข้อมูลแบบอื่นได้เช่นกัน เช่น remote URL หรือ file ใน temporary folder ก็ได้เช่นกัน
- contentType จาก fixture ด้านบนคือ text/html ซึ่งสามารถเป็น contenType อื่นใดก็ได้ที่ browser สามารถ render ได้ รวมทั้ง SVG, PDF หรือ image
อ้างอิง

https://github.com/AppraiseQA/appraise
https://github.com/AppraiseQA/appraise/blob/master/examples/creating-test-pages.md
July 8, 2018
ขั้นตอนการติดตั้ง Django ด้วย Python3 บน Windows

kanakorn.h

July 5, 2018
ขั้นตอนการติดตั้ง 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
July 5, 2018
WordPress Custom Error page

grianggrai.n

July 5, 2018
เนื่องจากมีปัญหาเกี่ยวกับการแสดงผล 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 จะชี้ที่ไหนก็ได้
July 5, 2018
Stencil : Decorators

pongspat.h

July 5, 2018
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
July 5, 2018
Visual test automation

wilaiwan.h

July 5, 2018

ในการพัฒนา 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 แบบอัตโนมัติ

July 5, 2018
Stencil : Web component compiler

pongspat.h

July 2, 2018
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

อ้างอิง : https://stenciljs.com
July 2, 2018