esWizardry

TDD for Embedded C using Ceedling with MSP430

Mon, 14 Sep 2015 00:00:00 +0000

หลังจากที่ก่อนหน้านี้ได้ลอง TDD บน MSP430 โดยใช้ ASSERT มาโครแบบง่ายๆ กันไปแล้ววันนี้จะมาแนะนำ framework ตัวหนึ่งที่หน้าสนใจสำหรับใช้ในการพัฒนาแบบ TDD และถึงแม้ว่าจะไม่ได้พัฒนาโดยใช้ TDD ก็ยังสามารถใช้ framework ตัวนี้ในการสร้าง Unit test ได้สำหรับทดสอบโค้ดหรือแม้แต่ใช้เป็น build tool ก็ได้เช่นกัน

##CEEDLING คืออะไร? Ceedling เป็นเครื่งมือที่ช่วยในการ build โปรเจ็คของภาษา C ซึ่งใช้ rake (make ไฟล์ของภาษา Ruby) เป็นตัว build โดย Ceedling จะรวบรวมเครื่องมือที่จำเป็นสำหรับการพัฒนาซอฟแวร์ตามแบบ TDD มารวมกันเพื่อความสะดวกและง่ายในการใช้งาน โดยประกอบไปด้วย Unity (unit test framework), CMock (mock up generator สำหรับภาษา C) และ CException (Exeption handler สำหรับภาษา C)

##เตรียมความพร้อม ก่อนจะไปต่อขอให้ติดตั้ง Ceedling ตามลิงค์ข้างล่างนี้ก่อนครับ http://www.throwtheswitch.org/ceedling/

##มาลองใช้งานกันเลย หลังจากติดตั้ง CEEDLING เสร็จแล้วก็ให้เปิด terminal ขึ้นมาแล้ว cd ไปที่ฟลเดอร์ที่เราจะใช้ทำงานแล้วก็ป้อนคำสั่ง ceedling example temp_sensor เพื่อลองเล่นกับตัวอย่างกันก่อนโดย CEEDLING จะทำการสร้างตัวอย่างขึ้นมาแล้วได้เอาต์พุตตามนี้

eswizardry@eswizardry-PC/d/Documents/temp_sensor
$ ceedling example temp_sensor
      create  temp_sensor/vendor/ceedling/docs/CeedlingPacket.pdf
      create  temp_sensor/vendor/ceedling/docs/CExceptionSummary.pdf
      create  temp_sensor/vendor/ceedling/docs/CMock Summary.pdf
      create  temp_sensor/vendor/ceedling/docs/Unity Summary.pdf
      create  temp_sensor/vendor/ceedling/plugins
      create  temp_sensor/vendor/ceedling/plugins/bullseye/assets/template.erb
      create  temp_sensor/vendor/ceedling/plugins/bullseye/bullseye.rake
      create  temp_sensor/vendor/ceedling/plugins/bullseye/config/defaults.yml
      create  temp_sensor/vendor/ceedling/plugins/bullseye/lib/bullseye.rb
................................
Example project 'temp_sensor' created!
 - Tool documentation is located in vendor/ceedling/docs
 - Execute 'rake -T' to view available test & build tasks

จากนั้นให้ cd เข้าไปที่โฟลเดอร์ที่ ceedling สร้างขึ้น cd temp_sensor แล้วก็สั่งรันคำสั่ง rake -T เพื่อที่จะดูว่าเราสามารถทำอะไรกับโปรเจ็คนี้ได้บ้าง

eswizardry@eswizardry-PC/d/Documents/temp_sensor
$ cd temp_sensor/

eswizardry@eswizardry-PC/d/Documents/temp_sensor
$ rake -T
rake clean                # Delete all build artifacts and temporary products
rake clobber              # Delete all generated files (and build artifacts)
rake environment          # List all configured environment variables
rake files:header         # List all collected header files
rake files:source         # List all collected source files
rake files:test           # List all collected test files
rake logging              # Enable logging
rake paths:source         # List all collected source paths
rake paths:support        # List all collected support paths
rake paths:test           # List all collected test paths
rake summary              # Execute plugin result summaries (no build trigg...
rake test:*               # Run single test ([*] real test or source file n...
rake test:all             # Run all unit tests
rake test:delta           # Run tests for changed files
rake test:path[dir]       # Run tests whose test path contains [dir] or [di...
rake test:pattern[regex]  # Run tests by matching regular expression pattern
rake verbosity[level]     # Set verbose output (silent:[0] - obnoxious:[4])
rake version              # Display build environment version info

จากนั้นลองคำสั่ง rake test:all เพื่อทดสอบการทดสอบทั้งหมด

eswizardry@eswizardry-PC/d/Documents/temp_sensor
$ rake test:all


Test 'TestAdcConductor.c'
-------------------------
Creating mock for AdcModel...
...

Test 'TestAdcHardware.c'
------------------------
Creating mock for AdcHardwareConfigurator...
...

Test 'TestAdcModel.c'
---------------------
Creating mock for TaskScheduler...
...

Test 'TestExecutor.c'
---------------------
Creating mock for Model...
...


Test 'TestMain.c'
-----------------
Creating mock for Executor...
Generating runner for TestMain.c...
Compiling TestMain_runner.c...
Compiling TestMain.c...
Compiling MockExecutor.c...
Compiling Main.c...
Linking TestMain.out...
build/test/out/Main.o: In function `main':
d:\Documents\temp_sensor/src/Main.c:43: multiple definition of `main'
build/test/out/TestMain_runner.o:d:\Documents\temp_sensor/build/test/runners/Tes
tMain_runner.c:72: first defined here
collect2.exe: error: ld returned 1 exit status
ERROR: Shell command failed.
> Shell executed command:
'gcc.exe "build/test/out/TestMain_runner.o" "build/test/out/TestMain.o" "build/t
est/out/MockExecutor.o" "build/test/out/unity.o" "build/test/out/Main.o" "build/
test/out/cmock.o" -o "build/test/out/TestMain.out" -lm'
> And exited with status: [1].
...

-----------
TEST OUTPUT
-----------
[TestAdcConductor.c]
  - ""

[TestAdcHardware.c]
  - ""

[TestAdcModel.c]
  - ""

[TestExecutor.c]
  - ""

--------------------
OVERALL TEST SUMMARY
--------------------
TESTED:  17
PASSED:  17
FAILED:   0
IGNORED:  0

ceedling จะทำการ build และสั่งรันการทดสอบทั้งหมดและแจ้งผลการทดสอบตามเอาต์พุตด้านบน

##มาสร้างโปรเจ็คใหม่ด้วย Ceedling กัน หลังจากลองทดสอบกับตัวอย่างกันไปแล้วทีนี้เรามาสร้างโปรเจ็คใหม่ตั้งแต่เริ่มต้นกันเลย ขั้นแรกให้ cd ออกจากโปรเจ็คตัวอย่างก่อน cd .. จากนั้นให้ป้อนคำสั่ง cd temp_sensor ceedling ก็จะทำการสร้างไฟล์ที่จำเป็นสำหรับโปรเจ็คใหม่ของเรา

eswizardry@eswizardry-PC/d/Documents/
$ ceedling new try-embedded-tdd
      create  try-embedded-tdd/vendor/ceedling/docs/CeedlingPacket.pdf
      create  try-embedded-tdd/vendor/ceedling/docs/CExceptionSummary.pdf
      create  try-embedded-tdd/vendor/ceedling/docs/CMock Summary.pdf
      create  try-embedded-tdd/vendor/ceedling/docs/Unity Summary.pdf
      create  try-embedded-tdd/vendor/ceedling/plugins
...................................

Project 'try-embedded-tdd' created!
 - Tool documentation is located in vendor/ceedling/docs
 - Execute 'rake -T' to view available test & build tasks

หลังจากนั้นก็ cd เข้าไปที่โปรเจ็คที่เราพึ่งสร้างขึ้นมา cd try-embedded-tdd/ ถัดมาก็ป้อนคำสั่ง rake module:create[led_driver]เพื่อสร้างไฟล์หรือโมดูลที่จะใช้ในการพัฒนา งานของเราโดยในที่นี้ผมจะขอยกตัวอย่างการพัฒนา led driver แบบง่ายละกันโดยให้ module นี้ชื่อว่า led_driver หลังจากป้อนคำสั่ง ceedling ก็จะทำการสร้างไฟล์ led_driver.c, led_driver.h และ ไฟล์ test_led_driver.c เพื่อเอาไว้พัฒนาและเขียนการทดสอบสำหรับโมดูลที่สร้างขึ้น

eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$ rake module:create[led_driver]
Generating 'led_driver'...
mkdir -p ./test/.
mkdir -p ./src/.
File ./test/./test_led_driver.c created
File ./src/./led_driver.c created
File ./src/./led_driver.h created

ทีนี้เราก็มาลองสั่งรันการทดสอบโมดูลที่เราพึ่งสร้างขึ้นมาโดยใช้คำสั่ง rake test:all

eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$ rake test:all


Test 'test_led_driver.c'
------------------------
Generating runner for test_led_driver.c...
Compiling test_led_driver_runner.c...
Compiling test_led_driver.c...
Compiling unity.c...
Compiling led_driver.c...
Compiling cmock.c...
Linking test_led_driver.out...
Running test_led_driver.out...

-----------
TEST OUTPUT
-----------
[test_led_driver.c]
  - ""

--------------------
IGNORED TEST SUMMARY
--------------------
[test_led_driver.c]
  Test: test_module_generator_needs_to_be_implemented
  At line (14): "Implement me!"

--------------------
OVERALL TEST SUMMARY
--------------------
TESTED:  1
PASSED:  0
FAILED:  0
IGNORED: 1

โดยผลทดสอบที่ได้จะเห็นว่าไม่มีการทดสอบเกิดขึ้นเพราะเรายังไม่ได้สร้างการทดสอบใดๆ เลยยกเว้นการทดสอบที่ ceedling สร้างขึ้นโดยอัตโนมัติ และใส่สถานะว่าให้ทำการข้ามการทดสอบนี้ไว้และมีการเจ้งเตือนรายละเอียดไว้ที่ดังนี้

--------------------
IGNORED TEST SUMMARY
--------------------
[test_led_driver.c]
  Test: test_module_generator_needs_to_be_implemented
  At line (14): "Implement me!"

--------------------
OVERALL TEST SUMMARY
--------------------
TESTED:  1
PASSED:  0
FAILED:  0
IGNORED: 1

โดยถ้าเราไปเปิดไฟล์ test_led_drive.c ดูก็จะพบกับโค้ดที่ ceedling สร้างขึ้นดังนี้

###test_led_driver.c

#include "unity.h"
#include "led_driver.h"

void setUp(void)
{
}

void tearDown(void)
{
}

void test_module_generator_needs_to_be_implemented(void)
{
    TEST_IGNORE_MESSAGE("Implement me!");
}

ต่อไปก็แก้ไขไฟล์ test_led_driver.c ตามตัวอย่างข้างล่างเพื่อเพิ่มการทดสอบเข้าไปโดยผมได้ทำการเขียนโค้ดสำหรับการทดสอบก่อนตามหลักการของ TDD โดยจากการทดสอบที่สร้างขึ้นผมได้เขียนเพื่อทดว่าหลังจากที่เรียกฟังก์ชัน ledDriver_Initial() แล้วสถานะ LED ต้องเป็น 0 เท่านั้นนอกเหนือจากนี้คือไม่ผ่าน (fail)

###test_led_driver.c

#include "unity.h"
#include "led_driver.h"

void setUp(void)
{
}

void tearDown(void)
{
}

void test_LedOffAfterInitial(void)
{
    unsigned char ledPort;

    ledPort = 0xFF;
    ledDeriver_Initial(&ledPort);
    TEST_ASSERT_EQUAL(0, ledPort);
}

จากนั้นก็แก้ไข header ไฟล์ led_driver.c และ led_driver.h เพื่อให้ไฟล์ test_led_driver.c สามารถเรียกใช้งานฟังก์ชัน ledDeriver_Initial() ได้

###led_driver.c

#include "led_driver.h"


void ledDeriver_Initial(unsigned char  *ledAddress) {

}

###led_driver.h

#ifndef led_driver_H
#define led_driver_H

void ledDeriver_Initial(unsigned char  *ledAddress);

#endif // led_driver_H

และหลังจากเขียนการทดสอบเสร็จเราจะทำการทดสอบกันโดยคาดหวังว่าผลการทดสอบต้องไม่ผ่าน (fail) เพราะเรายังไม่ได้เขียนโค้ดให้กับ ledDeriver_Initial() เลยมีแค่ prototype ให้เรียกใช้งานเท่านั้น แต่ก็อาจมีกรณีที่มันผ่านโดยเราไม่ได้ตั้งใจอยู่เหมือนกันถ้าเราเขียนการทดสอบผิด อย่างเช่นลืมให้ค่าตั้งต้น (initial) กับตัวแปรที่ทำการทดสอบเราก็อาจจะได้ค่าที่สุ่มมาหรือไม่เป็นไปตามความคาดหมาย

“การเขียนการทดสอบให้ไม่ผ่าน (fail) นี้ถือเป็นหัวใจของ TDD เลยทีเดียวหากไม่ได้เขียนการทดสอบและทดสอบให้ไม่ผ่าน (fail) ก่อนไปเขียนโค้ดที่ใช้งาน (production code) แล้ว ก็คงไม่สามารถเรียกการพัฒนาของเราว่าทำตามหลักการ TDD ได้เลย”

eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$ rake test:all


Test 'test_led_driver.c'
------------------------
Generating runner for test_led_driver.c...
Compiling test_led_driver_runner.c...
Compiling test_led_driver.c...
Compiling led_driver.c...
Linking test_led_driver.out...
Running test_led_driver.out...

-----------
TEST OUTPUT
-----------
[test_led_driver.c]
  - ""

-------------------
FAILED TEST SUMMARY
-------------------
[test_led_driver.c]
  Test: test_LedOffAfterInitial
  At line (18): "Expected 0 Was 255"

--------------------
OVERALL TEST SUMMARY
--------------------
TESTED:  1
PASSED:  0
FAILED:  1
IGNORED: 0

---------------------
BUILD FAILURE SUMMARY
---------------------
Unit test failures.

ทีนี้เราก็มาถึงขั้นตอนการเขียนโค้ด (production code) เพื่อให้ผ่านการทดสอบกันแล้ว โดยตามหลัการของ TDD เริ่มแรกให้เราเขียนโค้ดที่น้อยที่สุดที่สามารถผ่านการทดสอบได้เข้าไปหากเราทดสอบได้ผ่านแล้วค่อยมาทำการ refactor กันทีหลัง โดยผมเพิ่มโค้ดเข้าไปใน led_driver.cดังนี้

###led_driver.c

#include "led_driver.h"


void ledDeriver_Initial(unsigned char  *ledAddress) {
    *ledAddress = 0;
}

ต่อไปเรามาลองทำการทดสอบโค้ดที่เราเพิ่มเข้าไปดูว่าสามารถผ่านการทดสอบได้หรือไม่ โดยป้อนคำสั่ง rake test:all

eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$ rake test:all


Test 'test_led_driver.c'
------------------------
Compiling led_driver.c...
Linking test_led_driver.out...
Running test_led_driver.out...

-----------
TEST OUTPUT
-----------
[test_led_driver.c]
  - ""

--------------------
OVERALL TEST SUMMARY
--------------------
TESTED:  1
PASSED:  1
FAILED:  0
IGNORED: 0

หลังจากนั้นก็ให้เราทำการเพิ่มโค้ดการทดสอบและโค้ดการทำงานในส่วนที่เหลือไปเรื่อยๆ จนกว่าจะได้ฟังก์ชันการทำงานทั้งหมดที่เราต้องการโดยสำหรับโค้ดตัวอย่างทั้งหมดสามรถดูเพิ่มเติมได้ที่ GitHub

##แก้ไขให้โปรเจ็คคอมไพล์และทดสอบบน IAR-MSP430 คอมไพเลอร์และ C-spy simulator ให้เปิดไฟล์ project.ymlขึ้นมาแก้ไขโดยผมจะนำเสนอแค่ในส่วนหลักๆ ที่น่าสนใจเท่านั้นส่วนที่เหลือให้ดูได้จากไฟล์ที่ GitHub

โดยหลักๆ ที่ต้องทำการแก้ไขก็จะเป็นการเพิ่ม complier option ของ IAR เข้าไปแค่นั้นเองโดยเราสามารถใช้ compiler option ที่มาจาก output เวลาที่เราทำการ build โดย IAR ได้เลย ซึ่งก่อนที่จะกด build ให้เราเปิด option ของ IAR IDE ที่ IAR Embedded Workbench IDE > Tools > Options... > IDE Options > Messages > Show build messages > select 'All'

รายละเอียดเพิ่มเติมดูได้จาก IAR Technical Note 47884

###test compiler

  :test_compiler:
    :executable: icc430.exe
    :arguments:
    - "${1}"
    - -o "${2}"
    - --no_cse
    - --no_unroll
    - --no_inline
    - --no_code_motion
    - --no_tbaa
    - --debug
    - -D__MSP430GENERIC__
    - -e
    - --double=32
    - --dlib_config "C:\Program Files (x86)\IAR Systems\Embedded Workbench 6.5\430\LIB\DLIB\dl430fn.h"
    - -I"$": COLLECTION_PATHS_TEST_SUPPORT_SOURCE_INCLUDE_VENDOR
    - -Ol
    - --multiplier=16
    - --segment __data16=DATA16
    - --segment __data20=DATA20
    - --diag_suppress Pa050
    - --diag_suppress Pe111
    - -DTEST

###test linker

:test_linker:
    :executable: xlink.exe
    :arguments:
    - "${1}"
    - -o "${2}"
    - -s __program_start
    - -f "C:\Program Files (x86)\IAR Systems\Embedded Workbench 6.5\430\config\lnk430f5438.xcl"
    - -f "C:\Program Files (x86)\IAR Systems\Embedded Workbench 6.5\430\config\multiplier.xcl"
    - -D_STACK_SIZE=50
    - -rt "C:\Program Files (x86)\IAR Systems\Embedded Workbench 6.5\430\lib\dlib\dl430fn.r43"
    - -D_DATA16_HEAP_SIZE=50
    - -s __program_start
    - -D_DATA20_HEAP_SIZE=50

ส่วนสุดท้ายสำหรับการทดสอบคือการแก้ไขค่าให้ การทดสอบของเรารันบน IAR simulator (IAR c-spy)

###test fixture

  :test_fixture:
    :executable: D:\Documents\try-embedded-tdd\TestProj.cspy.bat
    :name: "msp430 simulator test fixture"
    :stderr_redirect: :win #inform Ceedling what model of $stderr capture to use
    :arguments:
    - "${1}"

และอีกส่วนหนึ่งที่ต้องแก้ไขคือ executable ไฟล์ นี้เราต้องแก้ไขค่าให้เป็น .d43 ไม่อย่างนั้นจะไม่สามารถรันบน IAR c-spy ได้

:extension:
  :executable: .d43

ต่อไปเรามาลองทำการทดสอบอีกครั้งกับ compiler และ simulator ของ IAR ก่อนอื่นให้ทำการ clean build ก่อนหน้านี้ที่ใช้ GCC ก่อน

eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$ rake clean

Cleaning build artifacts...
(For large projects, this task may take a long time to complete)


eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$ rake clobber

Clobbering all generated files...
(For large projects, this task may take a long time to complete)

eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$

จากนั้นป้อนคำสั่ง rake test:all ก็จะพบกับ test output ที่เปลี่ยนไปโดยบอกรายละเอียดการทดสอบ โดยใช้ IAR c-spy แทน

eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$ rake test:all


Test 'test_led_driver.c'
------------------------
Generating runner for test_led_driver.c...
Compiling test_led_driver_runner.c...
Compiling test_led_driver.c...
Compiling unity.c...
Compiling led_driver.c...
Compiling cmock.c...
Linking test_led_driver.d43...
Running test_led_driver.d43...

-----------
TEST OUTPUT
-----------
[test_led_driver.c]
  - ""
  - "d:\Documents\try-embedded-tdd>"C:\Program Files (x86)\IAR Systems\Embedde
Workbench 6.5\common\bin\cspybat" "C:\Program Files (x86)\IAR Systems\Embedded
orkbench 6.5\430\bin\430proc.dll" "C:\Program Files (x86)\IAR Systems\Embedded
orkbench 6.5\430\bin\430sim.dll"  build/test/out/test_led_driver.d43 --plugin
:\Program Files (x86)\IAR Systems\Embedded Workbench 6.5\430\bin\430bat.dll" -
ackend -B "--hardware_multiplier" "32" "--hwmult_type" "8" "-p" "C:\Program Fi
s (x86)\IAR Systems\Embedded Workbench 6.5\430\config\msp430fr5739.ddf" "--cor
430Xv2" "--data_model=small" "--iv_base" "0xFF90" "--odd_word_check" "-d" "sim
"--derivativeSim" "MSP430FR5739" "
  - ""
  - "     IAR C-SPY Command Line Utility V6.6.3.2839"
  - "     Copyright 2000-2013 IAR Systems AB."
  - ""
  - ""

--------------------
OVERALL TEST SUMMARY
--------------------
TESTED:  3
PASSED:  3
FAILED:  0
IGNORED: 0


eswizardry@eswizardry-PC/d/Documents/try-embedded-tdd
$

สำหรับไฟล์ทั้งหมดที่ใช้ในบทความนี้สามารถดาวน์โหลดไปลองเล่นกันได้ที่ GitHub

…<3

แกะกล่อง Arduino UNO

Mon, 03 Aug 2015 00:00:00 +0000

บล็อกก่อนหน้าผมได้เขียนแนะนำเกี่ยวกับ Arduino ไปแล้ววันนี้จะมาแนะนำบอร์ดอย่างเป็นทางการจาก Arduino ที่ได้รับความนิยมสูงสุดในตอนนี้คือเจ้า Arduino UNO

UNO ในภาษาสเปนกับอิตาเลียนนั้นแปลว่า One ในภาษาอังกฤษ หรือ หนึ่งในภาษาไทยนั่นเอง

บอร์ด Arduino UNO นั้นเป็นบอร์ดที่ออกมาตั้งแต่ปลายปี 2010 แต่ด้วยความที่ตัวผมเองทำงานด้านนี้อยู่แล้วและมองว่า Arduino เป็นแค่ของเล่นหรือสำหรับมือใหม่ก็เลยไม่ได้สนใจที่จะหามาลองเล่นจนแต่ช่วงนี้ว่างๆ และเห็นพัฒนาการของ Arduino ผ่านมามากกว่าห้าปีแล้วและคิดว่า มันมีอะไรดี จึงลองหามาเล่นซักหน่อย

ภายในกล่องมีอะไรบ้าง

ครั้งแรกที่ผมได้รับพัสดุเจ้า Arduino และเจอกับกล่องผมก็ประหลาดใจเล็กน้อยเพราะว่ามันมีขนาดเล็กกว่าที่ผมคิดไว้พอสมควร

ภายในกล่องก็จะประกอบไปด้วยตัวบอร์ด แผ่นพับที่มีข้อความขอบคุณ และสติ๊กเกอร์ Arduino

ฮาร์ดแวร์ของ UNO

UNO นั้นใช้ Atmega328 (มีหน่วยควมจำแบบ Flash 32kB ใช้เป็น bootloader ไป 0.5kB, SRAM 2kB และ EEPROM อีก 1kB) เป็นไมโครคอนโทรลเลอร์หลักซึ่งใช้แพ็คเกจแบบ DIP ทำให้ง่ายต่อการพัฒนาเช่นเวลาที่เราต้องการนำชิปที่ถูกโปรแกรมไปใช้ในบอร์ดอื่น หรือเวลาที่ชิปเสียเราก็สามารถที่จะหาซื้อชิปมาเปลี่ยนเองได้ง่ายๆ
มี I/O ให้ใช้งานทั้งหมด 20 ขา (แบ่งเป็นดิจิตอล I/O 16 ขา และ อินพุตแบบแอนาล็อกอีก 6 ขา) ใช้คริสตัลความถี่ 16 MHz มี USB คอนเน็คเตอร์แบบ B, หัวต่อ DC adaptor, พอร์ตสำหรับโปรแกรมแบบ ICSP, และสวิตช์สำหรับรีเซ็ท
ตัวบอร์ดสามารถเลือกแหล่งจ่ายไฟได้โดยอัตโนมัติระหว่างจากพอร์ต USB และแหล่งจ่ายภายนอก แต่สิ่งที่ผมคิดว่ามันยังขาดอยู่ก็คือสวิตช์เปิดปิดซึ่งไม่มีเราต้องทำการเปิดปิดโดยการดึงปลั๊กหรือถอดสาย USB เท่านั้น
อ้อเกือบลืมอีกอย่างว่าบนบอร์ดนั้นยังประกอบไปด้วยไมโครคอนโทรลเลอร์อีกตัวหนึ่งคือ Atmega16U2 ซึ่งทำหน้าที่เป็น USB-to-Serial convertor

ทดลองจ่ายไฟ

จากนี้ไปเราก็มาลองจ่ายไฟให้กับเจ้าบอร์ด UNO กันครับการจ่ายไฟให้กับบอร์ดที่ง่ายและถูกที่สุดก็ผ่านสาย USB นั่นแหละครับโดยใช้สาย USB ที่มีหัวต่อเป็นแบบ type A-to-B ครับ

หลังจากเราเสียบสาย USB เข้ากับคอมพิวเตอร์และบอร์ดเรียบร้อยแล้วให้สังเกตว่าจะมี LED สีส้มกระพริบถี่ๆ ประมาณ 2-3 วินาทีจากนั้นก็จะกระพริบทุกๆ ครึ่งวินาทีนั้นก็คือโปรแกรมที่ถูกติดตั้งมาจากโรงงานครับโดย LED สีส้มนั้นจะถูกต่อกับดิจิตอล I/O ขาที่ 13

สำหรับการแกะกล่อง Arduino UNO ก็จบเพียงแค่นี้ครับ เดี๋ยวไว้ว่างๆ จะมานำเสนอเกี่ยวกับการใช้งาน

รู้จักกับ Arduino

Sun, 02 Aug 2015 00:00:00 +0000

Arduino (ออกเสียงว่า อา-ดู-อี-โน่) หลายคนอาจคิดว่าผมมาแนะนำนักฟุตบอลดาวรุ่งจาก อิตาลี แต่จริงๆ แล้วเจ้าตัว Arduino นี้ก็คือบอร์ดไมโครคอนโทรลเลอร์ขนาดเล็กที่มีพอร์ตซึ่งสามารถเชื่อมต่อกับคอมพิวเตอร์และทำให้คอมพิวเตอร์มีความสามารถในการในการรับสัญญาณจากอุปกรณ์ภายนอกและควบคุมอุปกรณ์ภายนอกได้มากกว่าที่คอมพิวเตอร์ทั่วไปจะทำได้

กว่าจะมาเป็น Arduino ในทุกวันนี้

Arduino นั้นเดิมทีถูกพัฒนาขึ้นมาเพื่อเป็นเครื่องมือในการสอนนักศึกษา ในปี 2005 โดย Massimo Banzi และ David Cuartielles ซึ่งก็ประสบความสำเร็จเป็นอย่างมากในแง่ของการสอน จากนั้นก็แพร่หลายมาสู่นักประดิษฐ์ ศิลปิน และ นักพัฒนาทั่วโลก และสิ่งที่ทำให้ Arduino ประสบความสำเร็จเป็นอย่างมากคือบอร์ด Arduino นั้นถูกออกแบบภายใต้สัญญาแบบ Creative Commons License ทำให้เกิดการต่อยอดและสร้างบอร์ดทางเลือกออกมาได้อย่างอิสระ

โดยเจ้าบอร์ด Arduino นี้จะมี I/O ซึ่งสามารถเชื่อมต่อเข้ากับอุปกรณ์และเซนเซอร์ได้มากมายยกตัวอย่างเช่น มอเตอร์, รีเลย์, เซนเซอร์แสง, ลำโพง และอื่นๆ อีกมากมาย และ Arduino นี้เราสามารถที่จะโปรแกรมให้มันถูกควบคุมโดยคอมพิวเตอร์ หรือเราจะโปรแกรมให้ทำงานแบบ stand alone ก็ได้ ตัวบอร์ดนั้นถูกออกแบบภายใต้โครงการแบบโอเพนซอร์ส ซึ่งนั่นก็หมายความว่าใครก็สามารถที่จะนำแบบของ Arduino มาสร้างเองได้ จึงทำให้ปัจจุบันจะมีบอร์ดที่ไม่ใช่ official ออกมาขายในราคาถูกอย่างมากมายไม่ว่าจะเป็น

Freeduino

Roboduino

Seeduino

แม้ว่าตัวฮาร์ดแวร์ของ Arduino นั้นจะเป็นโอเพนซอร์สแต่ชื่อ Arduino นั้นสงวนลิขสิทธิ์นะครับ

ทำไมต้องเป็น Arduino

หลายคนที่เล่่นหรือทำงานเกี่ยวกับไมโครคอนโทรลเลอร์อยู่แล้วก็อาจจะสงสัยว่าทำไมต้องใช้ Arduino ด้วยทั้งที่มีบอร์ดไมโครคอนโทรลเลอร์แบบนี้เยอะแยะ ความพิเศษของเจ้า Arduino อยู่ที่ตัวฮาร์ดแวร์และซอฟต์แวร์นั้นถูกออกแบบมาให้ง่ายต่อการนำไปพัฒนาและใช้งานได้โดยที่ไม่จำเป็นต้องเป็นมืออาชีพหรือศึกษามาทางด้านไฟฟ้าและอิเล็กทรอนิกส์มาก่อน

ส่วนข้างล่างนี้ก็เป็นการแจกแจงข้อดีของ Arduino ที่ผมแปลมาจาก arduino.cc

ราคาถูก: บอร์ด Arduino นั้นมีราคาที่ถูกมากเมื่อเทียบกับบอร์ดไมโครคอนโทรลเลอร์อื่นและบอร์ดที่ถูกที่สุดเราสามารถที่จะประกอบได้เองอีกด้วย หรือบอร์ดสำเร็จรูปเราก็สามารถหาซื้อได้ในราคาประมาณ $50 เท่านั้นเอง
สามารถทำงานได้หลายแพลตฟอร์ม: ซอฟต์แวร์ในการพัฒนานั้นสามารถทำงานได้ทั้งบน Windows, Macintosh OS X และ Linux สำหรับไมโครคอนโทรลเลอร์ส่วนมากจะทำงานได้บน Windows เท่านั้น
ง่าย: ซอฟแวร์ในการพัฒนานั้นถูกออกแบบมาให้ใช้งานง่ายสำหรับมือใหม่ แต่ก็ยังคงความยืดหยุ่นและมีความสามรถครบครันสำหรับมืออาชีพ สำหรับคุณครูหรือผู้สอนสามารถที่จะใช้ Arduino ซึ่งอยู่บนพื้นฐานของแพลตฟอร์ม Processing ในการสอนเขียนโปรแกรมเพื่อให้นักเรียนนักศึกษาสามารถเข้าใจการเขียนโปรแกรมได้ดียิ่งขึ้น
โอเพนซอร์ส: อย่างที่กล่าวไปแล้วว่า Arduino นั้นเป็นแพลตฟอร์มที่เปิดเผยวงจรและซอร์สโค้ดซึ่งใครๆ ก็สามารถสร้างหรือนำไปต่อยอดได้

ตัวอย่างของบอร์ดชีลด์ที่ได้รับความนิยมก็อย่างเช่น

นอกจากบอร์ด Arduino แล้วเรายังได้เห็นการต่อยอดของฮาร์ดแวร์ออกมาในรูปแบบของ Shield (ชีลด์) ซึ่งเป็นบอร์ดเสริมช่วยเพิ่มความสามารถให้กับ Arduino และลดการบัดกรีได้ทำให้การพัฒนาหรือประดิษฐ์อุปกรณ์ด้วยไมโครคอนโทรลเลอร์ง่ายขึ้นไปอีกขั้น

Ethernet Shield

Motor Shield

Proto Shield

GSM Shield

[How To] การลบข้อมูลบัตรเครดิตออกจาก Google Play)

Sun, 02 Aug 2015 00:00:00 +0000

หลายคนที่ใช้แอนดรอยน์และต้องการซื้อแอพจากก็ต้องทำการผูกบัตรเครดิตเข้ากับบัญชี Google Play store ซึ่งบางคนก็ไม่สบายใจที่ต้องเอาบัตรเครดิตไปผูกอยู่กับบัญชี Google เพราะกลัวจะถูกแฮ็ก ผมเองก็เป็นหนึ่งในนั้น ผมก็เลยใช้วิธีการว่าเวลาที่จะซื้อก็กรอกข้อมูลบัตรเครดิตหลังจากซื้อแอพที่เราต้องการเสร็จแล้วก็จะทำการลบข้อมูลบัตรเครดิตของเราออก ซึ่งครั้งแรกเลยผมก็ยังงงอยู่เหมือนกันว่าจะไปลบข้อมูลตรงไหน เพราะว่าข้อมูลบัตรเครดิตของเรานั้นมันอยู่ในอีกบริการหนึ่งของ Google ครับคือ Google wallet ซึ่งวิธีการทีละขั้นตอนก็ดังนี้ครับ

1. ให้ล็อกอินเข้าไปที่ Google wallet

2. ไปที่ Payments methods ก็จะพบข้อมูลบัตรเครดิตของเรา ให้เลือก Remove ครับ

3. จากนั้นก็จะมีหน้าต่าง pop up ขึ้นมาให้เรากดยืนยัน

4. แค่นี้ก็เรียบร้อยครับ

ลอง TDD บน MSP430 (Embedded C)

Thu, 23 Jul 2015 00:00:00 +0000

ช่วงนี้กำลังศึกษา TDD บนระบบสมองกลฝังตัว (Embedded system) อยู่โดย unit test framework หลักก็กำลังศึกษาอยู่ก็คือ unity และก็ค้นหาวิธีใช้งานใน google จนไปเจอ repo ใน github ของนาย jotux เข้าโดยเขาเขียน มาโครง่ายๆ ขึ้นมาสำหรับใช้เป็น test framework ของ msp430 และใช้ คอมไพเลอร์ของ IAR

ซึ่งถ้าสำหรับคนที่เริ่มต้นศึกษา TDD นี่ถือว่าเป็นตัวอย่างที่ดีมาก เพราะมันตรงไป ตรงมา ไม่มีอะไรซับซ้อน ทำเห็นเรามองภาพรวมทั้งหมดในตัวที่ใช้ทำ test ได้ เพราะหลายๆ คนอาจจะยังนึกภาพไม่ออกว่าเราจะทำ TDD และ test automation บนไมโครคอนโทรลเลอร์กันยังไง

##ครั้งแรกกับ TDD จริงๆ แล้วจะเรียก ครั้งแรกกับ TDD ก็ยังไม่ถูกนักเพราะในบล็อกนี้จะแค่ลองเล่นกับโค้ดที่เขาเขียนมาเรียบร้อยแล้วไม่ได้ลงรายละเอียดเกี่ยวกับการเขียน test เพื่อทดสอบ production code กันหรอก

##เตรียมความพร้อม ก่อนอื่นเลยให้ โคลน github repo มาไว้ที่เครื่องก่อน ในเครื่องต้องมี IAR-EW MSP430 รวมทั้งให้เพิ่มโฟลเดอร์ของ Iarbuild เข้าไปใน system path ให้เรียบร้อย

##มาลองเล่นกันเลย ! เปิด terminal ขึ้นมาแล้ว cd ไปที่ repo ที่เราโคลนมา เข้าไปที่ โฟลเดอร์ .\example\test

ป้อนคำสั่งเพื่อ clean project
IarBuild.exe .\..\test\canary.ewp -clean Debug

1
2
3
4
5
6
7
8
9
PS D:\Documents\IAR4Unity\example\test> IarBuild.exe .\..\test\canary.ewp -clean Debug

     IAR Command Line Build Utility V6.6.3.2839
     Copyright 2002-2013 IAR Systems AB.

Deleting outputs for configuration Debug
Updating build tree...

8  file(s) deleted.

ป้อนคำสั่งเพื่อ build project
IarBuild.exe .\..\test\canary.ewp -make Debug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
PS D:\Documents\IAR4Unity\example\test> IarBuild.exe .\..\test\canary.ewp -make Debug

     IAR Command Line Build Utility V6.6.3.2839
     Copyright 2002-2013 IAR Systems AB.

Building configuration: canary - Debug
Updating build tree...
main.c
test_uart.c
Linking


Total number of errors: 0
Total number of warnings: 0

จากนั้นสั่งรัน test
.\..\settings\canary.cspy.bat .\Debug\Exe\canary.d43

โดยอันนี้จะเป็นการเรียกรัน test เพื่อทดสอบกับ simulator ของ IAR เลยซึ่งก็มีข้อดีคือเราได้ทดสอบโค้ดกับสภาพแวดล้อมเสมือนจริงทำให้เราสามารถเชื่อมั่นในโค้ดของเราได้มากขึ้น ซึ่งหลายครั้งเวลาทำ TDD สำหรับระบบสมองกลฝังตัวมักจะทำการคอมไพล์และทดสอบบนเครื่องที่ใช้พัฒนาเนื่องจากมีความง่ายกว่านั่นเอง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
PS D:\Documents\IAR4Unity\example\test> .\..\settings\canary.cspy.bat .\Debug\Exe\canary.d43

D:\Documents\IAR4Unity\example\test>"C:\Program Files (x86)\IAR Systems\Embedded Workbench 6.5\common\bin\cspybat" "C:\P
rogram Files (x86)\IAR Systems\Embedded Workbench 6.5\430\bin\430proc.dll" "C:\Program Files (x86)\IAR Systems\Embedded
Workbench 6.5\430\bin\430sim.dll"  .\Debug\Exe\canary.d43 --plugin "C:\Program Files (x86)\IAR Systems\Embedded Workbenc
h 6.5\430\bin\430bat.dll" --macro "D:\Documents\IAR4Unity\example\test\cycle_counter.mac" --backend -B "--hardware_multi
plier" "32" "--hwmult_type" "8" "-p" "D:\Documents\IAR4Unity\example\test\test_msp430fr5739.ddf" "--core=430Xv2" "--data
_model=small" "--iv_base" "0xFF90" "--odd_word_check" "-d" "sim" "--derivativeSim" "MSP430FR5739"

     IAR C-SPY Command Line Utility V6.6.3.2839
     Copyright 2000-2013 IAR Systems AB.


~~~~UNIT TESTING~~~~

Uart Suite
PASS - test_RxBufferEnqueue(test_uart.c:21)|time:0.003|
PASS - test_RxBufferEnqueue(test_uart.c:31)|time:0.004|
PASS - test_RxBufferEnqueue(test_uart.c:46)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:58)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:69)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:77)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:79)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:81)|time:0.003|

Tests run: 8
Tests Failed: 0
ALL TESTS PASSED

ต่อไปลองเข้าไปแก้ให้การทดสอบมันไม่ผ่านบ้างหน้าตามันจะเป็นยังไง ให้เปิดไฟล์ /example/test/unit_test/test_uart.c ขึ้นมาแก้ไขบรรทัดที่ 21

จาก

1
TEST_ASSERT("Rx buf size incorrect after buffering 1 byte",rx_size != 1);

เป็น

1
TEST_ASSERT("Rx buf size incorrect after buffering 1 byte",rx_size != 0);

จากนั้นสั่ง clean, build และรัน test อีกรอบจะเจอว่ามีกรณีที่ทดสอบไม่ผ่านอยู่

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
PS D:\Documents\IAR4Unity\example\test> IarBuild.exe .\..\test\canary.ewp -clean Debug

     IAR Command Line Build Utility V6.6.3.2839
     Copyright 2002-2013 IAR Systems AB.

Deleting outputs for configuration Debug
Updating build tree...

8  file(s) deleted.
PS D:\Documents\IAR4Unity\example\test> IarBuild.exe .\..\test\canary.ewp -make Debug

     IAR Command Line Build Utility V6.6.3.2839
     Copyright 2002-2013 IAR Systems AB.

Building configuration: canary - Debug
Updating build tree...
main.c
test_uart.c
Linking


Total number of errors: 0
Total number of warnings: 0
PS D:\Documents\IAR4Unity\example\test> .\..\settings\canary.cspy.bat .\Debug\Exe\canary.d43

D:\Documents\IAR4Unity\example\test>"C:\Program Files (x86)\IAR Systems\Embedded Workbench 6.5\common\bin\cspybat" "C:\P
rogram Files (x86)\IAR Systems\Embedded Workbench 6.5\430\bin\430proc.dll" "C:\Program Files (x86)\IAR Systems\Embedded
Workbench 6.5\430\bin\430sim.dll"  .\Debug\Exe\canary.d43 --plugin "C:\Program Files (x86)\IAR Systems\Embedded Workbenc
h 6.5\430\bin\430bat.dll" --macro "D:\Documents\IAR4Unity\example\test\cycle_counter.mac" --backend -B "--hardware_multi
plier" "32" "--hwmult_type" "8" "-p" "D:\Documents\IAR4Unity\example\test\test_msp430fr5739.ddf" "--core=430Xv2" "--data
_model=small" "--iv_base" "0xFF90" "--odd_word_check" "-d" "sim" "--derivativeSim" "MSP430FR5739"

     IAR C-SPY Command Line Utility V6.6.3.2839
     Copyright 2000-2013 IAR Systems AB.


~~~~UNIT TESTING~~~~

Uart Suite
FAIL - test_RxBufferEnqueue(test_uart.c:21)-Rx buf size incorrect after buffering 1 byte|time:0.003|
PASS - test_RxBufferEnqueue(test_uart.c:31)|time:0.004|
PASS - test_RxBufferEnqueue(test_uart.c:46)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:58)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:69)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:77)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:79)|time:0.003|
PASS - test_RxBufferDequeue(test_uart.c:81)|time:0.003|

Tests run: 8
Tests Failed: 1
PS D:\Documents\IAR4Unity\example\test>

ซึ่งเวลาที่มีกรณีทดสอบไม่ผ่านก็จะมีข้อความบอกรายละเอียดเพิ่มเติมตามรูปแบบของมาโครที่ได้ออกแบบไว้

1
FAIL - test_RxBufferEnqueue(test_uart.c:21)-Rx buf size incorrect after buffering 1 byte|time:0.003|

ด้านล่างนี้คือโค้ดบางส่วนของ TEST_ASSERT มาโครที่ใช้สำหรับทดสอบจะเห็นได้ว่ามีโค้ดแค่นิดเดียวเองซึ่งถึงแม้ว่าจะเป็นมือใหม่ก็สามารถทำความเข้าใจและปรับปรุงให้เป็น test framework ในแบบที่เราต้องการได้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#define PRINT_PASS()     printf("PASS - %s(%s:%d)",__FUNCTION__,__FILE__,__LINE__)
#define PRINT_FAIL(m)    printf("FAIL - %s(%s:%d)-%s",__FUNCTION__,__FILE__,__LINE__,m)

#define TEST_ASSERT(message, test)  \
    do                              \
    {                               \
        if (test)                   \
        {                           \
            tests_failed++;         \
            PRINT_FAIL(message);    \
        }                           \
        else                        \
        {                           \
            PRINT_PASS();           \
        }                           \
        tests_run++;                \
        printf("|time:%.3f|\n",(float)((_cycle_cnt - _cycle_start))/16000000); \
        _cycle_start = _cycle_cnt;  \
    } while (0)

…<3

มาเพิ่มแท็บให้กับ SourceInsight ด้วย TabSiPlus

Wed, 15 Jul 2015 00:00:00 +0000

SourceInsight เป็น Text editor ตัวหนึ่งที่ผมใช้ทำงานเป็นหลัก (ส่วนมากใช้อยู่ที่ทำงาน) ก่อนจะเปลี่ยนมาใช้ Sublime Text ในปัจจุบันซึ่งก็ใช้ในการพัฒนาและเขียนบล็อกในเว็บนี้ด้วย

SourceInsight

เป็น Text editor ที่พัฒนาโดยบริษัท SourceDynamic มี features ที่เด่นดังนี้

SourceInsight Features

Call Graphs and Class Tree Diagrams
Context Sensitive Dynamic Type Resolution
Symbol Windows For Each File
Automatic Display of Declarations in the Context Window
Syntax Formatting - Like Syntax Coloring but More
Context-Sensitive Smart Rename
Finds References Quickly
Mixed Language Editing
Keyword Searches Like an Internet Search on Your Code Base
Symbolic Auto-Completion
Quick Access to All Symbols and Files
Project Orientation
etc.

จากฟังก์ชันการทำงานนี่ถือว่าเป็น Text editor ที่ครบเครื่องมาก ถ้าจะมีตัวเปรียบเทียบที่ทำความสารถได้ขนาดนี้โดยไม่ต้องมีส่วนเสริม (plug-in) แล้วล่ะก็เห็นจะมีแต่ SlickEdit อีกตัวซึ่งตัวนี้อาจมีฟังก์ชันเยอะกว่า SourceInsight ด้วยซ้ำไปแต่สำหรับผมคิดว่ามันเยอะเกินพอดีทำให้กินทรัพยากรของเครื่องมากไปและหน้าตาของมันแม้จะดูทันสมัยแต่ก็เต็มไปด้วย scroll bar ซึ่งกินพื้นที่การทำงานบนหน้าจอไปเยอะเลย รู้สึกว่ามันรก

กลับมาที่ SourceInsight พระเอกของเรากันต่อ สำหรับผมแล้วนอกจากหน้าตาที่ดูออกจะโบราณแล้ว ( เนื่องจากว่า SourceInsight นั้นไม่มีการพัฒนาเพื่อเพิ่มฟังก์ชันต่างๆ ไปหลายปีแล้วหรือจะบอกว่าเลิกพัฒนาไปแล้วก็ได้, นอกจากแก้ bug หรือพอร์ตไป windows เวอร์ชันใหม่) ก็มีอีกอย่างที่ผมอยากได้จาก SourceInsight คือแท็บของไฟล์ที่เราเปิดทำงานอยู่ทั้งหมดเพื่อเพิ่มความสะดวกในการเปลี่ยนไปทำงานกับไฟล์อื่นๆ และยังทำให้รู้สถานะว่าเราเปิดไฟล์อะไรค้างไว้บ้าง

ด้านล่างคือ SourceInsight แบบดั้งเดิมที่ยังไม่มี tab

TabSiPlus

TabSiPlus เป็น plug-in ของ SourceInsight ที่พัฒนาโดยโปรแกรมเมอร์ชาวจีนซึ่งใช้ชื่อว่า Simon.W

สิ่งที่จำเป็นต้องมีในการใช้งาน TabSiPlus

Microsoft Visual C++ 2008 Redistributable Package อันนี้ต้องถูกติดตั้งในเครื่องเพื่อการทำงานที่ถูกต้องของ TabSiPlus

การใช้งาน TabSiPlus

หลังจากโหลด TabSiplus มาแล้วให้ copy โฟลเดอร์ไปไว้ที่เราต้องการได้เลยหลังจากนั้นเปิดเข้าไปในโฟลเดอร์ แล้วดับเบิ้ลคลิก TabSiHost ถ้าไม่มีข้อผิดพลาดอะไรแค่นี้ TabSiPlus ก็ทำงานเรียบร้อยแล้ว

เปิด SourceInsight ขึ้นมาก็จะเจอกับ Tab ที่เพิ่มขึ้นมา

TabSiPlus customization

ใหเปิดเข้าไปในโฟลเดอร์ของ TabSiPlus อีกทีจากนั้นเปิดไฟล์ Tabtest ขึ้นมาเพื่อปรับแต่ง theme ของ tab

เปิดขึ้นมาแล้วจะเจอกับหน้าปรับแต่งธีมที่มีเครื่องหมายคำถามเต็มไปหมด

หน้านี้ปรับแต่ง font

หน้านี้ปรับ option ว่าต้องการให้มีไอคอนสำหรับปิดแท็บไหม และกรุ๊ปแท็บที่มีชื่อเดียวกันไหม

อันข้างล่างคือตัวอย่างธีมที่ผมปรับแต่งไว้

และภายในหน้าต่างของ SourceInsight ที่มี TabSiPlus เกาะอยู่เรายังสามารถปรับแต่ง option ต่างได้อีกหลายอย่างเช่น

เลือก theme ที่เราสร้างขึ้น
ปรับให้แท็บอยู่ข้างล่างหรือข้างบน
อื่นๆ ลองปรับแต่งกันดูได้ครับ

บล็อกนี้หลักๆแล้วผมต้องการบันทึกไว้กันลืมสำหรับตัวเองเผื่ออนาคตได้กลับมาใช้ SourceInsight อีก…<3

การใช้งาน GitHub Page เพื่อโฮสเว็บไซต์ที่สร้างด้วย Jekyll

Wed, 15 Jul 2015 00:00:00 +0000

หลังจากบล็อกที่แล้วได้นำเสนอการสร้างเว็บไซต์ด้วย Jekyll กันไปแล้วต่อไปเราจะมาดูวิธีการใช้งานและโฮสต์เว็บด้วย GitHub Pages กัน

ทำไมต้องโฮสต์เว็บไซต์ที่ GitHub Page?

ฟรี! GitHub ให้เราสามารถโฮสต์เว็บส่วนตัวได้แบบฟรีๆ 1 เว็บ
ง่าย Jekyll นั้นถูกสร้างมาเพื่อใช้กับ GitHub เพราะว่าเว็บที่จะโฮสต์บน GitHub ได้ต้องเป็น static website (สร้างจาก HTML&CSS และ JavaScript เท่านั้น) ซึ่ง Jekyll เองก็เป็น static site genarator
Git practicing ได้เรียนรู้การใช้งานใช้งาน Git และ GitHup ไปในตัว

สิ่งที่จำเป็นต้องมีก่อนการใช้งาน GitHub Page

Git ถ้ายังไม่มีให้ไป Download และ install ก่อน
GitHub user ถ้ายังไม่มีก็สามารถสมัครใช้งานใหม่ได้ที่ GitHub

ถ้ามีครบแล้วก็ไปขั้นตอนต่อไปเลย

สร้าง Repository บน GitHub

ให้ล็อกอินเข้าไปที่ GitHup user ของเราเพื่อสร้าง repository ใหม่ +New repository

จากนั้นก็สร้าง repository โดยใช้ชื่อ reposotory เป็นไปตามรูปแบบนี้เท่านั้น Username.github.io ถ้าเป็นรูปแบอื่นไม่ได้ รวมทั้งต้องกำหนด public ด้วยเพราะว่าเราจะสร้างเว็บซึ่งต้องให้คนอื่นเข้าถึงด้วย

โคลน repository ที่เราพึ่งสร้างลงมาที่เครื่องเรา

เปิด terminal ขึ้นมา (จะใช้ command prompt, Git bash อื่นๆ) แล้วสร้าง folder ที่จะใช้ทำงาน

1
2
$ mkdir /path/to/source-code
$ cd /path/to/source-code

ไปที่ GitHub repositoy ของเราแล้ว copy URL ของ repository ที่เราสร้างขึ้นมา

โคลน repository โดยใช้คำสั่ง Git

1
2
$ git clone https://github.com/username/username.github.io.git
$ cd username.github.io

ทดสอบการอัพโหลดไฟล์ขึ้น GitHub ด้วยคำสั่ง Git

สร้างไฟล์ใหม่ไว้ใน folder ของที่เราทำงานอยู่ให้ชื่อ index.html
โดยในไฟล์ให้พิมพ์ช้อความ Hello Worldเข้าไป

1
2
3
4
5
6
7
8
$ git add index.html
...

$ git commit index.html -m “Initial commit with my Hello world”
...

$ git push origin master
...

เสร็จเรียบร้อย ให้เปิดบราวเซอร์ขึ้นมาแล้วเข้าไปที่ URL ของ repository เรา “https://username.github.io” ก็จะเจอกับข้อความ

Hello World

อัพโหลดเว็บไซต์ที่สร้างด้วย Jekyll จากบล็อกที่แล้วไปที่ GitHup Page

copy ไฟล์ที่อยู่ในโฟลเดอร์ “my-awesome-site” ทั้งหมดไปแทนที่ไฟล์ในโฟลเดอร์ที่เราโคลนมาเมื่อก่อนหน้าจากนั้นก็ใช้คำสั่ง Git เพื่ออัพไฟล์ไปที่ GitHub

1
2
3
4
5
6
7
8
$ git add -A
...

$ git commit -m “Add Jekyll”
...

$ git push origin master
...

สำเร็จแล้ว!

มาสร้างเว็บบล็อกด้วย Jekyll กันเถอะ

Sun, 12 Jul 2015 00:00:00 +0000

สวัสดีชาวโลก นี่เป็นโพสต์แรกของเว็บบล็อกแห่งนี้ขอประเดิมด้วยแนะนำการสร้างเว็บบล็อกด้วย Jekyll และโฮสต์เว็บด้วย GitHub Pages ซึ่งเว็บบล็อกแห่งนี้ก็สร้างและโฮสต์โดยทั้งสองอย่างที่กล่าวมา

รู้จักกับ Jekyll

Jekyll คือ ruby gem ซึ่งทำหน้าที่เป็น parsing engine เพื่อใช้ในการสร้างเว็บไซต์ static websites โดยการ parsing จากไฟล์ templates, HTML & CSS, markdown, รูปภาพ และ อื่นๆ โดย Jekyll นี้จัดว่าเป็นหนึ่งใน static site generator โดยมีสโลแกนว่า “Simple, blog-aware, static sites”

ติดตั้ง Jekyll

ก่อนที่จะเริ่มสร้างเว็บไซต์ด้วย Jekyll มาดูกันก่อนว่าเราต้องใช้อะไรบ้าง

สิ่งที่จำเป็นต้องมีก่อนการสร้างเว็บด้วย Jekyll (Dependencies)

Ruby.
- การติดตั้ง ruby นั้นตรงไปตรงมาให้ดับเบิ้ลคลิกไฟล์ติดตั้ง ruby ที่ดาวน์โหลดมาแล้วทำตาม installation guide ได้เลย แต่ตอนติดตั้งให้เลือกด้วยว่าให้ เพิ่ม ruby เข้าไปที่ system path ของ windows ด้วย
Ruby Devkit.
- การติดตั้ง ruby devkit นั้นยุ่งยากนิดหน่อยอันนี้จะบอกวิธีการทำทีละขั้นตอนตามนี้
- เปิด command prompt ขึ้นมาแล้วใช้คำสั่ง ruby -v เพื่อตรวจสอบเวอร์ชันของ ruby
- เมื่อรู้เวอร์ชันแล้วก้อเข้าไปดาวน์โหลดตัวติดตั้ง Devkit ที่สอดคล้องกับ ruby
- ติดตั้งโดยดับเบิ้ลคลิกไฟล์ดาวน์โหลดมาเพื่อติดตั้ง อันนี้แนะนำว่าให้ติดตั้งไว้ที่ C:\Devkit
- จากนั้นพิมพ์คำสั่ง cd c:\DevKit เพื่อเข้าไปยังโฟลเดอร์ที่ติดตั้งและใช้คำสั่ง ruby dk.rb init และ ruby dk.rb install ตามลำดับ
- เพื่อความแน่ใจว่าติดตั้งเรียบร้อย ลองใช้คำสั่ง gem install json --platform=ruby และลองรัน ๋JSON ดู ruby -rubygems -e "require 'json'; puts JSON.load('[42]').inspect"
- ถ้าไม่มีอะไรผิดพลาดก็จะได้ผลลัพธ์ตามด้านล่างนี้

1
2
3
4
    C:\Devkit>ruby -rubygems -e "require 'jso
    n'; puts JSON.load('[42]').inspect"
    [42]

Install Jekyll

ถ้ามีตามข้างบนครบแล้วก็มาติดตั้ง Jekyll กันเลย โดยเปิด command prompt ขึ้นมาแล้วก็พิมพ์คำสั่งสำหรับติดตั้ง gem install jekyll จากนั้นก็รอจนกว่าจะติดตั้งเสร็จ อันนี้ใช้เวลาพอสมควรขึ้นอยู่กับความเร็วของเครื่องและอินเตอร์เน็ต

สร้างเว็บไซต์ใน 1 นาทีด้วย Jekyll

หลังจากติดตั้งเสร็จเรียบร้อยเราสามารถทดลองรันเว็บไซต์ตัวอย่างของ Jekyll โดยเปิด command prompt ขึ้นมาแล้ว cd ไปยัง directory ที่เราจะใช้ทำงาน อย่างของผมใช้ D:\doucuments ก็สามารถใช้ cd D:\doucuments จากนั้นก็พิมพ์คำสั่งตามด้านล่าง

1
2
3
4
> gem install jekyll
> jekyll new my-awesome-site
> cd my-awesome-site
> jekyll serve

หลังจากรันคำสั่งด้านบนเสร็จจะได้ผลลัพธ์ตามนี้

จากนั้นให้เปิดเว็บเบราเซอร์แแล้วป้อน http://localhost:4000

แค่นี้เราก็ได้เว็บไซต์แรกที่สร้างด้วย Jekyll แล้วเห็นไหมว่าง่ายและใช้เวลาน้อยกว่าต้มมาม่าซะอีก

ทีแรกกะว่าจะรวมการโฮสต์เว็บที่สร้างขึ้นมาจาก Jekyll ด้วยแต่ขอยกไปไว้บล็อกถัดไปดีกว่า เดี๋ยวผมจะมานำเสนอเกี่ยวกับการโฮสต์เว็บไซต์ด้วย GitHub Pages ต่อ…<3