ติดเกมมาริโอ้แมว ตอนที่ 3 ทำให้แมวจาก github ดิ้นด้วย MinGW บน Msys (แบบไม่ build SDL เอง)

Github นี่ดีนะครับ ยิ่งค้น ยิ่งเจออะไรอีกเยอะ
Github นี่ดีนะครับ ยิ่งค้น ยิ่งเจออะไรอีกเยอะ

ที่มาของเรื่อง
พบรหัสต้นฉบับเกมมาริโอ้แมว ที่ใช้ mouse ควบคุมตัวละครแมวกระโดดดึ๋ง ๆ ตอนนี้ต้องการเพียงนำ Source code มา compile, link แล้วก็ run ไม่คิดจะแก้ หรือปรับ code หากไม่จำเป็นจริง (ที่ต้องแก้ code เพราะ compile ไม่ผ่าน) และใน code ใช้ SDL (Simple DirectMedia Layer) เป็นพระเอกเรื่อง Media ซึ่งเป็น package ที่เก่ามาก (ราว 5 ปีแล้ว) ไม่ได้ใช้ SDL2 ซึ่งใหม่กว่า และ SDL ส่วนใหญ่ก็มี release ประมาณปี 2013 หรือก่อนนั้น .. สรุปว่าพบปัญหาก็ค่อย ๆ แก้ไขไปทีละเรื่อง

lesson การใช้ SDL เขียนเกม ละเอียดเลย
lesson การใช้ SDL เขียนเกม ละเอียดเลย

ในตอนหน้าคิดจะเล่าเรื่อง MinGW-W64 ตอนที่แล้วใช้ Cygwin
แต่ตอนนี้เล่าเรื่องใช้ MinGW ที่ติดตั้ง package msys มีเรื่องเล่าดังนี้

1. เลือกเครื่องมือแปลเกม
พบ Code เกม Cat mario ภาษา C++ เขียนโดยคนญี่ปุ่น
แชร์ใน Github.com นำมาลอง compile ด้วย GCC
เลือกใช้ MinGw (Minimalist GNU for Windows) เพราะเป็น GCC บน Windows
รุ่นที่ให้ Download เลือก mingw-get-setup.exe
Modified 2013-10-04 – version 0.6.2-beta-20131004-1
https://sourceforge.net/projects/mingw/files/Installer/
โปรแกรมแนวเดียวกันมีอีกหลายโปรแกรม อาทิ MinGW-W64 หรือ MSys2

download mingw_get 2013
download mingw_get 2013

2. เลือก package ระหว่าง install มีให้เลือกมากมาย
แต่ถ้าจะ compile เกมด้วย gcc ก็เลือกที่จำเป็นเพียงไม่กี่ตัว
เริ่มจากเลือกห้องลงโปรแแกรมใน c:\MinGW
และมี package 3 ตัวหลักดังนี้

- mingw-developer-toolkit
- mingw32-gcc-g++
- msys-base
mingw package
mingw package

3. หลังติดตั้งเสร็จ ก็ไป download รหัสต้นฉบับมาเตรียม compile
ก็ download เกมจาก https://github.com/angelXwind/OpenSyobonAction
แล้วผมก็นำ .cpp จำนวน 3 แฟ้มมาแก้ไข
เพราะรุ่นของ g++ ที่ใช้ในปัจจุบันเป็นรุ่นใหม่กว่าที่ผู้พัฒนาคนก่อนใช้เมื่อหลายปีก่อน
ทำให้ต้องแก้ทั้ง main.cpp loadg.cpp และ dxlib.gcc
และต้องเตรียมแฟ้มเข้าห้อง include, lib, bin(sdl-config) และ dll(.exe)
หลังเตรียม และทดสอบ ก็ upload ทั้งหมดเข้า repository
ที่ fork มาที่ https://github.com/thaiall/OpenSyobonAction
สรุปว่าท่านที่สนใจก็จะได้เห็นทั้งรุ่นก่อนปรับปรุง และรุ่นปรับปรุง

4. ใน MinGw มี msys ที่กำหนดให้เห็น G++ มาแล้ว
เริ่มต้นเข้า shell prompt หรือ bash
ด้วยการ run C:\MinGW\msys\1.0\msys.bat
ซึ่ง msys จะกำหนด config ให้รู้จักกับ G++ ที่ติดมากับ MinGWแล้ว
ไม่ได้อาศัย Path ของ Windows
ดังนั้นการกำหนด path ไปมองที่เก็บ G++ ในห้องอื่นผ่าน Windows+Pause Break
เพื่อแก้ path ใน Environment variables ไม่ได้ทำให้การเห็นรุ่นของ G++ เปลี่ยนไป
แต่การเปลี่ยน path มีผลต่อการเห็นรุ่น G++ ใน MinGW-w64 เพราะลง Msys แยกได้

มี msys 2 ตัว ก็มี g++ คนละ version
มี msys 2 ตัว ก็มี g++ คนละ version

5. ไปหา SDL source code มา build (ปี 2013 หรือประมาณนั้น)
ทั้ง SDL, SDL_mixer, SDL_gfx, SDL_image, SDL_mixer, SDL_ttf, freetype
https://www.libsdl.org/release/SDL-devel-1.2.15-mingw32.tar.gz
http://www.ferzkopp.net/Software/SDL_gfx-2.0/SDL_gfx-2.0.24.tar.gz
https://www.libsdl.org/projects/SDL_image/release/SDL_image-1.2.12.tar.gz
https://www.libsdl.org/projects/SDL_mixer/release/SDL_mixer-1.2.11.tar.gz
https://www.libsdl.org/projects/SDL_ttf/release/SDL_ttf-2.0.11.tar.gz
https://downloads.sourceforge.net/freetype/freetype-2.8.tar.bz2 (required by SDL_ttf)

$ .\configure
$ make
$ make install
gcc ไม่มี -V แต่ configure ไม่ผ่าน พบใน config.log
gcc ไม่มี -V แต่ configure ไม่ผ่าน พบใน config.log

ก็ผ่านไปหลายตัวครับ ติดตรง SDL_mixer ที่คนอื่นก็ติดกัน
อ่านได้ที่
– https://forums.libsdl.org/viewtopic.php?t=1431&sid=1856a055ebc60448105ee35a3779c7b2
https://forums.libsdl.org/viewtopic.php?p=10686
ไปแก้แฟ้ม configure แล้ว แต่ก็ติดจุดอื่นอีก

Line 2459 จาก "$ac_compiler -V >&5"
Line 2453 จาก "$ac_compiler -V >&5"
Line 11044 จาก "$ac_compiler -V >&5"
Line 11050 จาก "$ac_compiler -V >&5"

หลังเปลี่ยนจาก -V เป็น -v ก็มีปัญหาอื่นตามมาอีก
สรุปก็ต้องยอมแพ้ ไม่ใช้ include, lib และ dll ที่ได้จากการ build เอง
แต่ไปหาคัดลอกจาก github.com ที่เค้า share ไว้มาใช้เลย แล้วก็ใช้ได้
เหมือนที่ผม share ใน github.com นั่นหละครับ แต่ผมเลือกที่ต้องใช้กับ cat mario
ไม่ต้อง install แต่ copy เข้าไปวางใน folder ที่กำหนดเท่านั้น
ปล. ก็ไปหามาลองใช้หลายแหล่งเหมือนกัน กว่าจะลงตัว

ปัญหา -V ของ configure นี้มีหลายคนพูดถึงกันในหลายโปรแกรม ลองไปอ่านกันได้
syrinx พบปัญหา -V กับ compiling with gcc 4.7.2 and autoconf 2.69
https://superuser.com/questions/846768/
monodromy พบปัญหา -V กับ gcc-4.8.2
https://bbs.archlinux.org/viewtopic.php?id=177400
Pradeep Gupta พบปัญหา -V กับ ruby บน ubuntu
https://serverfault.com/questions/580489/

6. ปัญหาการ Build ไม่ได้เกิดกับ SDL ทุกโปรแกรม
ที่ build ไม่ผ่านก็พบกับ SDL_mixer ตั้งแต่ใช้ configure และก่อนที่จะพบปัญหาใน SDL_mixer พบว่า SDL_ttf ต้องใช้ Freetype2 ก็ต้องไป download และ build ก่อนที่ SDL_mixer จะผ่านไป ไม่อัตโนมัติเหมือนที่ทำให้ cygwin และการเป็น source code รุ่นเก่า ของหลายโปรแกรม ที่ยึดโยงกับ source code ที่ได้มา (ตั้งใจไม่แก้ source code ไปตาม package รุ่นใหม่) ทำให้สงสัยว่าอีกหลายโปรแแกรมที่ make install ผ่านแล้วนั้น จะเข้ากันได้ในตอน compile หรือไม่
ปัจจุบันใช้ compiler G++ รุ่นใหม่อย่าง 6.3.0 (Dec 2016) หรือ 7.1.0 (May 2017)
https://gcc.gnu.org/releases.html
สรุปว่า ข้อ 5 กับข้อ 6 ผมเล่าปัญหาให้ฟังว่า build แล้วติด เมื่อทำใน environment นี้

build sdl_ttf แต่ถามหา freetype2 ก็ต้องไป build มาก่อน
build sdl_ttf แต่ถามหา freetype2 ก็ต้องไป build มาก่อน

7. หลังแก้ไข code ให้รับ G++ รุ่นใหม่
แล้วเตรียมสภาพแวดล้อมที่เอื้อต่อการ compile เหมือนที่ทำในข้อ 3 ได้แก่ เตรียมแฟ้มเข้าไปในห้อง include, lib, bin (แฟ้ม sdl-config) และ dll(ห้อง .exe)
– ในการใช้ compiler G++ สามารถใช้กับ cmd ได้กับโปรแกรมทั่วไป
แต่การแปลเกมนี้ ต้องใช้ sdl-config ที่ต้องใช้ ascii ตัวที่ 96 เพื่อทำงานส่วนนี้
หากใช้กับ cmd ไม่ว่าจะใช้ ‘ หรือ ” หรือ $( ก็ไม่ผ่าน
ต้องไป compile บน bash (/usr/bin/sh)
– การ compile บน bash ที่ใช้ msys มีขั้นตอนดังนี้
$ g++ -c main.cpp
$ g++ -c loadg.cpp
$ g++ -c DxLib.cpp
$ g++ main.o loadg.o DxLib.o -o SyobonAction `sdl-config –libs` -lSDL_gfx -lSDL_image -lSDL_mixer -lSDL_ttf
$ SyobonAction.exe
สรุปคือโปรแกรม SyobonAction สามารถ run ได้ทั้งใน msys, cmd และ explorer
แต่ต้องมีแฟ้ม .dll ให้พร้อมเรียกใช้ระหว่าง runtime หลายแฟ้ม
พบปัญหาว่า จะ run .exe ต้องมี .dll หลายแฟ้ม
แก้ไขด้วย การใช้โปรแกรม 7z ทำ .exe ช่วย extract ก่อน run
มีวิธีทำ installer.exe = 7z(.exe(start after extract) + *.dll + folders)
http://ntsblog.homedev.com.au/index.php/2015/05/14/self-extracting-archive-runs-setup-exe-7zip-sfx-switch/

8. สรุปอีกครั้งเรื่อง run
ในการเรียก SyobonAction.exe
จะต้องมี .dll หลายแฟ้มรองรับขณะ runtime
อีกนัยหนึ่ง .dll นี่ใช้ตอน run
อาจอยู่ห้องเดียวกันกับ .exe หรือไปอยู่ใน /system32 หรือ /syswow64 ก็ได้
ประกอบด้วย

SDL.dll
SDL_gfx.dll
SDL_image.dll
SDL_mixer.dll
SDL_ttf.dll
libpng12-0.dll
zlib1.dll

 

ปล. แนะนำบทเรียนเขียนเกม ด้วย SDL (บทเรียนของเค้าน่าสนใจ)
เรื่อง Beginning Game Programming v2.0
ที่ http://lazyfoo.net/tutorials/SDL/

ติดเกมมาริโอ้แมว ตอนที่ 2 มาดูกันทำให้แมวดิ้นบน Cygwin ว่าง่ายเพียงใด

รุ่นน้อง ส่งเกม SyobonAction หรือ Cat Mario มาให้ 
เริ่มจาก unzip แล้วลองเล่น จากนั้นก็เปิดดูเห็น source code .cpp 3 แฟ้ม ก็อยากจะลองแปลดู เข้าดู MakeFile เห็นว่าใช้ GCC ก็จำได้ว่าเคยใช้แบบงูงูปลาปลา ราวปี 2550 ก็ 10 ปีมาแล้ว จึงได้เวลารื้อฟื้นซะที

He is the jumper.
He is the jumper.

ท้าวความก่อน
โปรแกรม CYGWIN (Unix Simulator) คือ ชุดโปรแกรมจำลองสภาพแวดล้อมลินุกซ์ (Linux) บนวินโดวส์ (Windows) เพื่อจำลองสภาพแวดล้อม (Simulate) ให้เหมือนทำงานบนลีนุกซ์ และเตรียมเครื่องมือที่จำเป็นให้เหมือนกับบนลีนุกซ์ โปรแกรมนี้จำเป็นต่อการ Compile Source code มากมาย ที่ถูกพัฒนาให้ใช้ตัวแปลภาษาสำหรับ Linux
อาทิ GCC หรือ XWin หรือ Xterm ซึ่งช่วยให้นักพัฒนาเขียน Source code
แล้วนำไป Compile ได้ทั้งบน Linux และ Windows โดยไม่ต้องปรับแก้รหัสต้นฉบับ

มี shell ให้ใช้ แต่ถ้าไม่ติดตั้ง package ที่ต้องการ ก็จะเรียกไม่พบ อยากใช้อะไรก็ต้องคลิ๊ก
มี shell ให้ใช้ แต่ถ้าไม่ติดตั้ง package ที่ต้องการ ก็จะเรียกไม่พบ อยากใช้อะไรก็ต้องคลิ๊ก

ข้อจำกัดสำคัญของ Cygwin
ที่คะเนไว้ คือ มีทางเลือกอื่นที่มีประสิทธิภาพกว่าในการใช้ Linux พัฒนา Software อาทิ ถ้าเขียนโปรแกรมที่จำเป็นต้องใช้สภาพแวดล้อมของ Linux เพื่อให้ได้ execute code ไป run บน Windows การเขียนบน Linux โดยตรง จะมีประสิทธิภาพกว่าเขียนบน Windows ทำให้ความนิยมลดลง หากเลือกใช้งาน Cygwin ในการทำงานจริง หรือหวังประสิทธิภาพ

กรอบแนวคิด (Conceptual Framework)
อันที่จริง การพัฒนาเกม CatMario มีได้หลายแนวคิด แต่ model นี้น่าจะเป็นแนว ๆ นี้

CatMario = Win(Cygwin(Source && (G++ && SDL) && (XServer && Xterm)))

ความราบรื่น
หลังจากไปทบทวนความหลังกับ Cygwin เพื่อ compile, link และ run กับ Source code ของ SyobonAction พบว่า ราบรื่นมาก ไม่ติดปัญหาเกี่ยวกับเครื่องมือ แต่แก้ source code นิดหน่อย เพราะ code เมื่อ 7 ปีก่อน มาเจอ compiler ในปัจจุบัน ก็มีสะดุดบ้าง โปรแกรมละ จุด สองจุด สามจุด และได้อัพโหลด .cpp ตัวแก้ไขเข้า github.com ที่ผมไป FORK มาแล้ว หากไปใช้ตัวแก้ไขก็จะไม่ต้องแก้ไข code เมื่อส่งให้ g++ รุ่น 6.3.0 หรือ 7.1.0 ทำการ Compile

สรุปขั้นตอนการใช้งาน  Cygwin 64 เมื่อต้นกันยายน 2560

1. Download โปรแกรม
เข้า
http://www.cygwin.com
เลือก download setup-x86_64.exe
ได้มาเป็น version 2.881 (64 bit) เพราะผมใช้ Win10 64bit แบบ OEM
โปรแกรมนี้ไม่ไปแก้ไขค่าในระบบ Windows เพียงแต่ Unzip เป็นสำคัญ
ดังนั้นเข้า Apps and Features หรือ Program and Features ก็จะไม่พบ
ถ้าจะ uninstall Cygwin ก็เพียงแต่ remove folder เท่านั้นเอง

download cygwin ได้ที่นี่
download cygwin ได้ที่นี่

2. Next ไปตลอด
– Download source = Install from Internet
– Root Directory = C:\cygwin64 เค้ากำหนดมาก็ไม่ได้แก้ไข
– Local Package Directory = D:\pub ไว้เก็บแฟ้มที่ Download มาก่อน install
– Connection = Direct Connection
– Download Site = http://mirrors.sonic.net
– Select Package = default
– Next

3. หลังติดตั้งเสร็จ ใช้เวลา Download ประมาณ 5 นาที
สำรวจดู พบว่า ในห้อง c:\cygwin64 มีแฟ้ม cygwin.bat
จะได้พบหน้าต่างใหม่ และมี $ prompt เหมือนที่พบใน Linux Bash
หลังติดตั้งได้แฟ้มมา 4,809 แฟ้ม ขนาดรวม 108 MB

4. ติดตั้ง Package เพิ่มเติม มีเป้าหมาย 3 อย่าง
4.1 ต้องการ Compiler ของ G++ หรือ C++ นั่นเอง
4.2 ต้องการ Library ของ SDL (ใน Cygwin ง่าย แต่ใน MinGW ยากเลย)
4.3 X terminal สำหรับเล่นเกม เพราะแฟ้มที่ได้มาถูกทดสอบ run ในนั้น

ขั้นตอนให้ได้ 3 อย่าง มีดังนี้
เริ่มจาก run setup-x86_64.exe อีกรอบ แล้วเลือก Package จะ View แบบ Full แล้ว Search หาแฟ้มที่ต้องการ หรือสำรวจผ่าน View แบบ Category ก็ได้

[devel]
6.3.0-2 gcc-g++ : GNU Compiler Collection (C++)
6.3.0-2 gcc-core: GNU Compiler Collection (C, OpenMP)
1.2.15-3 libSDL-devel: Simple DirecMedia Layer core library
1.2.12-6 libSDL_image-devel: SDL image loading library
2.0.24-1 libSDL_gfx-devel: SDL primitive graphics library
1.2.12-4 libSDL_mixer-devel: Multi-channel audio mixer for SDL
2.0.11-1 libSDL_ttf-devel: SDL text rendering library
[x11]
1.19.2-1 xorg-server-devel: X.Org SDK for developing drivers and extensions for the Xorg X server
330-1 xterm: X11 terminal emulator

install package in cygwin
install package in cygwin

หลังติดตั้งทั้ง 9 Package และผองเพื่อน
แฟ้มเพิ่มขึ้นมาเป็น 16056 แฟ้ม ขนาดรวม 624 MB

 

หน้าตา folder ของ cygwin และ catmario
หน้าตา folder ของ cygwin และ catmario

5. มีเกมอยู่ใน c:\catmario
Download : https://github.com/thaiall/OpenSyobonAction
แล้วก็ unzip source code ลงห้อง c:\catmario
$ cd /cygdrive/c/catmario/
$ g++ -c main.cpp
$ g++ -c loadg.cpp
$ g++ -c DxLib.cpp
$ g++ main.o loadg.o DxLib.o -o SyobonAction `sdl-config –libs` -lSDL_gfx -lSDL_image -lSDL_mixer -lSDL_ttf

ตัวอักษร  ` เป็น Ascii ตัวที่ 96 ใช้  ALT+96 ได้ แต่ใช้  ‘ หรือ  ” หรือ $(  ไม่ได้

compile and link .. เห็นแปลก ๆ คือ warning นะครับ
compile and link .. เห็นแปลก ๆ คือ warning นะครับ

6. การสั่งให้เกมทำงาน
$ XWin :0 คือ X Server เป็นพื้นที่ทำงาน
$ DISPLAY=:0.0 xterm คือ X Terminal และ Display ต้องพิมพ์ใหญ่
$ /cygdrive/c/catmario/SyobonAction.exe
แฟ้ม SyobonAction.exe มีขนาด 294 KB
จะ Run ปกติใน CYGWIN64 Terminal ไม่ได้
พบ error message ที่โปรแกรมดักไว้
ว่า Unable to init SDL: No available video device

สั่ง run catmario ใน cygwin
สั่ง run catmario ใน cygwin

ต่อไปจะหาเวลา
ไปขยายความใน http://www.thaiall.com/cygwin เป็นลำดับต่อไป
แต่ต้องหา Case ก่อนครับ นาน ๆ ได้เข้าโปรแกรมเก่า เล่าเรื่องเก่าสักครั้ง

xterm
xterm

การนำเอกสารที่แชร์ใน google drive เข้าไปเป็นของตนเอง

อ.ธาม เชื้อสถาปนศิริ
อ.ธาม เชื้อสถาปนศิริ

พบการแชร์ในสื่อสังคม
เป็นเอกสารน่าสนใจ จากบัญชีเฟสบุ๊ค ของ อ.ธาม เชื้อสถาปนศิริ
https://www.facebook.com/time.chuastapanasiri
แชร์เอกสารใน google drive ผ่าน facebook แบบ public
เรื่อง จริยธรรมวารสารศาสตร์ (Journalist ethics)
ที่ https://drive.google.com/../view
มีจำนวน 189 หน้า ขนาด 27 MB ถือว่าไม่ใหญ่มากนัก เพราะรูปภาพทั้งนั้น

time.chuastapanasiri
time.chuastapanasiri

เปิดเข้าไปดู
เห็นบน menu bar มีคำว่า เพิ่มใน “ไดร์ฟของฉัน
เพราะขณะนั้นเปิด gmail.com ทิ้งไว้แล้ว
กดแล้วก็เข้าเลย แล้วเข้า “จัดระเบียบ
พบแฟ้มใน ไดร์ฟของฉัน คลิ๊กแฟ้ม
แล้วเลือก “เปิดการแชร์ลิงก์ ให้ทุกคนที่มีลิงก์สามารถดูได้
ที่ https://drive.google.com/open?id=0B..WM
เอกสารนี้ท่านก็แชร์เก็บไว้ได้ เพียงแต่มีบัญชีของ google.com เท่านั้น

ชอบภาพหลายมุมมองครับ

 

 

ติดเกมมาริโอ้แมว ตอนที่ 1 เห็นแค่แมวดิ้นเป็นพอ

มีอยู่วันหนึ่งเพื่อนรุ่นน้อง เห็นว่าผมสีหน้าเครียด
เค้าก็บอกว่าผมต้องเล่นเกมนี้ “อย่างฮาเลย
นั่นเป็นปฐมบทของความฮาซีรี่นี้

แล้วสักพักต่อมา เค้าก็มานั่งที่เครื่องผม
เพราะรู้อีกทีก็มีเกมที่หน้าจอแล้ว
เค้าส่งผ่าน FB message เข้ามา ระหว่างเรานั่งคุยกัน
พอได้ลองเล่นแล้วก็ฮาจริง ๆ
จำได้ว่าเคยเล่นเกมแนวนี้ ราวปีพ.ศ.2525
น่าจะเป็นเกมตู้ ที่ใต้โรงหนังดาว สมัยนั้นต้องหยอดเหรียญเล่น
https://github.com/thaiall/OpenSyobonAction

น้องเค้าดาวน์โหลดจาก Mediafire
http://www.mediafire.com/../Neko+Mario+Eng.rar
ขนาด File size: 4.63 MB
พอแตก RAR ก็เห็น source code ภาษา C

อุทานในใจ “เฮ้ยมี source code มาด้วย
เปิดดู code ก็ไม่เยอะ จำนวนแฟ้มก็แค่ 3 แฟ้มสำคัญ
ตั้งแต่นั้นก็เริ่มนั่งหาข้อมูล อยากให้แมวเริ่มดิ้นเป็นพอ
เพราะเสียง ภาพ และรหัสต้นฉบับมีหมดแล้ว
เหลือก็แค่ compile, link แล้วก็ run

1. เท่าที่ดูก็ใช้ภาษา C นะ แต่ C อะไรล่ะนั่น
ไม่ใช่โปรแกรม Hello world นะครับ จะได้ใช้ C อะไรก็ออกหมด
ในใจแอบคิด งัด Turbo C มาซะดีไหม
นั่งอ่านไปสักพัก พบว่า angelXwind ที่ github.com
แชร์มาเป็นแฟ้ม .cpp มี makefile ด้วย
เค้าใช้ GCC (GNU Compiler Collection) คำย่อเดิมคือ GNU C Compiler
แล้วใน Github.com มี readme ทั้งอังกฤษและญี่ปุ่น
https://github.com/angelXwind/OpenSyobonAction/blob/master/Makefile

2. มองเห็นจำนวนแฟ้ม นั่งหัวเราะหึหึ
เพราะมีแฟ้มสำคัญแต่ 3 แฟ้ม เป็น .c ทั้งนั้น หรือไม่ก็ .cpp
ดูใน makefile ก็บอกว่า 3 แฟ้มเป็นพอ พอจริง ๆ
ที่ cjxgm แชร์ไว้มี object file ที่ compile แล้วติดมาด้วยอีก เห็นเป็น .o
https://github.com/cjxgm/clabs/../syobon.tar.gz

3. ใคร ๆ เค้าก็เอา source code ไปลองกัน ท่าจะนิยม
เห็น David Gerber – CEO of Zapek Software Engineering
https://zapek.com/blog/syobon-action/
และลิงค์ไปยัง
https://sourceforge.net/../opensyobon/
ที่มี source code หลายรุ่น คือ v0.9, rc1 และ rc2 ทั้งหมดในปี 2010
แล้วก็ใช้ได้ทั้งบน Linux และ Windows
ไม่ต้องรักพี่เสียดายน้อย ได้หมดทั้ง 2 Operating System

4. เห็นแฟ้มต้นฉบับแค่ 3 แฟ้ม แต่มี Lib นะครับ
เห็น David Gerber หรือผู้พัฒนาคนอื่น ต่างพูดถึง Lib
ที่ชื่อ SDL (Simple DirectMedia Layer)
ที่ Need คือ sdl, sdl_image, sdl_gfx, sdl_mixer and sdl_ttf
เป็นห้องสมุดที่บริการภาพ และเสียง ช่วยให้แมวดิ้นได้
สรุปให้ว่าจะ compile link หรือ run ต้องมี Lib ครับ
https://www.libsdl.org/

5. ถ้าจะเขียนให้แมวดิ้น ก็ต้องหาที่ลง
อ้อ ไม่ต้องเขียนอะไรเลย เค้าเขียนมาให้หมดแล้ว
แค่ compile, link แล้วก็ run
ถ้าทำบน linux ก็เล่นบน linux
ถ้าทำบน windows ก็เล่นบน Windows
ติดว่า GCC นี่เค้าพัฒนาให้ทำงานบน Linux
ถ้าจะใช้ GCC for Windows
https://gcc.gnu.org/install/binaries.html
ก็เลือกได้ว่าจะใช้โปรแกรมอะไรมาช่วย เค้าแนะนำไว้ 2 ตัว
1. Cygwin
2. MinGW
อ่านมาเค้าว่ามี CodeBlocks.org ที่สนับสนุน GCC/G++
หัวข้อนี้รายละเอียดเพียบเลย
http://www.codeblocks.org/downloads/26

6. เล่าอีกนิดนะครับ สมัย 7 ปีก่อนใช้ GCC
สมัยที่เกมนี้เขียนเสร็จอยู่ราวปี 2010
source code ของ catmario มีทั้ง c และ cpp
ถ้าเป็น .c ก็ใช้ gcc
ถ้าเป็น .cpp ก็ใช้ g++
gcc and g ++ are both GNU compiler.
They both compile c and c++.
The difference is for *.c files gcc treats it as a c program,
and g++ sees it as a c++ program.
*.cpp files are considered to be c++ programs
เพราะสมัยนี้ gcc หมายถึง c ไม่ใช่ cpp
ดังนั้นการเลือกรุ่นของ compiler ก็น่าสนใจอยู่มาก
https://ftp.gnu.org/gnu/gcc/

 

 

 

บทเรียนที่ 3 ชวนลูกทีมมือสมัครเล่นมารายงานตัวเป็น collaborators ผ่านแฟ้ม html ใช้ git สั่ง pull + push เข้า github.com

ตามหัวข้อเลย ผมมีลูกทีมเป็นมือสมัครเล่นกันหลายคน
มีเป้าหมาย คือ ให้พวกเค้าไปสมัครใช้บริการ github.com
แล้วส่ง email ให้ผม เพื่อ invite พวกเค้ามาเป็น collaborators (สำหรับ push)
จากนั้นก็ให้ทุกคนไป download : Git for windows แบบ Portable
เพราะแต่ละคนอาจใช้ git กันในหลายรูปแบบ แนะนำแบบชั่วคราว แต่ใช้แบบใดก็ได้
แต่แบบ portable คือ ใช้ชั่วคราว หากไม่สะดวกเพราะไม่ได้ใช้กกับเครื่องของตนเอง
มี Interface ทั้งแบบ bash และ cmd จาก https://git-scm.com/download/win
คือ git-cmd.exe (cd d:/git/mygitfriends1)
และ git-bash.exe (cd /d/git/mygitfriends1)

แต่ถ้าใครอยากใช้ git กันนาน ๆ ก็เลือกแบบ install ได้
จากนั้นก็สร้างห้อง เช่น d:\git\mygitfriends1
แล้วให้ pull ดึง repository ของผมลงมา (เป็น public สามารถ pull ได้เลย)
แล้วแก้ไข tag LI ใส่ url ที่เป็น repository ของตนเอง เพื่อแชร์ให้ผมทราบ
ติ้งต่างว่า .. ผมเป็นหัวหน้าทีมของลูกทีมมือสมัครเล่น

มีขั้นตอน 9 ข้อ ดังนี้
1. DOS> git init
จะสร้างห้อง .git แบบ hidden สำหรับการเริ่มต้นงาน repository
ในห้องนี้มีแฟ้มสำคัญคือ config ที่เปิดมาการตั้งค่าได้

2. DOS> git config –global user.email “you@example.com”
อย่าลืมเปลี่ยนเป็น e-mail ของตนเองนะครับ

3. DOS> git config –global user.name “Your Name”
อย่าลืมเปลี่ยนเป็น ชื่อของตนเองนะครับ

4. DOS> git remote add origin https://github.com/thaiall/mygitfriends.git
ต้องกำหนด email กับ name ให้เรียบร้อยก่อน
แล้วสั่งกำหนดว่า remote คือที่ไหน ที่ origin เชื่อมโยงด้วย

5. DOS> git pull origin master
ดึงข้อมูลจาก repository ใน master บน github.com
ลงมาเป็น origin ใน localhost หลังแก้ไขจะได้ push ขึ้นไป

6. DOS> notepad collaborators.htm หรือจะใช้ vi ก็ได้ ถ้าถนัดนะครับ
เปิดแฟ้ม html มาแก้ไขเพิ่มเติมข้อมูลตาม TAG LI
ให้เพิ่ม link ของ repository ที่ตนเองเป็นเจ้าของ
หลังสมัคร github.com ด้วย email ของตน และสร้าง repository ไว้

<html><head>collaborators</head>
<body>
 <h1>collaborators</h1>
 <ol>
 <li>
 <a href=""></a><br/>
 </li>
 </ol>
</body>
</html>

7. DOS> git add collaborators.htm
หลังแก้ไขก็สั่ง add เพื่อบอกว่าแฟ้มนี้ คือ แฟ้มที่ปรับปรุง

8. DOS> git commit -m “i am gthaiall”
การสั่ง commit คือ การตรวจสอบว่ามีแฟ้มอะไรบ้างที่ต้องดำเนินการ และตีทะเบียนรุ่นให้ใหม่

9. DOS> git push -u origin master
ทำส่งรายละเอียด และการแก้ไขผ่าน push เปรียบเทียบระหว่าง master กับ origin
ขึ้นไปยังเครื่องบริการ github.com ที่เป็นสื่อกลางระหว่างนักพัฒนาทุกคน

สรุปว่า
ผมนั่งดูใน github.com พบว่า นักพัฒนา ทำอะไรกับแฟ้ม collaborators.htm เมื่อใด
ที่พบมี รหัส commit [7864d75] ใหม่ พบว่า เพิ่ม 3 บรรทัด และลบ 2 บรรทัด

หลังจบการ push
ผมเข้าไปลบทุกอย่างในห้อง d:\git\mygitfriends1
รวมทั้ง .git ด้วย แล้วใช้ git-bash.exe ทำตามขั้นตอน 9 ข้อใหม่
หลังแก้ไขได้ รหัส commit [50d1311] ใหม่ พบว่า เพิ่ม 1 บรรทัด

หากมีคำถาม
เรื่อง git อยากชวนไปดูคลิ๊ปสั้น ๆ ของ SIPA เรื่อง แนะนำ และติดตั้ง Git
ที่ Minato Namikazerak ร่วมแบ่งปัน
ตอนเข้าไปแชร์ในกลุ่ม ไทย PHP เรื่องที่ผม push เข้า github.com

บทเรียนที่ 2 : การใช้ Git ตามคำแนะนำของ Github.com บน Bash on Ubuntu on Windows


เริ่มต้นกันเลย กับการสมัครใช้บริการพื้นที่ฟรี สำหรับเก็บ code ของ Github.com แล้วพบว่าหน้าแรกของ code ตอนที่ยังไม่มีแฟ้มใดเลย เค้าแนะนำคำสั่งมา 6 บรรทัดว่าจะสร้าง README.md อย่างไร ก็ลองพิมพ์ตามนั้นดูสักหน่อย เพราะ Nimit Suwannagate แนะนำคำสั่ง git ไว้ใน กลุ่ม ไทย PHP ที่เป็นการทำ backup_master เข้ามาเกี่ยวข้อง  มีคำสั่งน่าสนใจหลายคำสั่ง แต่ถ้าเริ่มต้นต้องคำสั่งบน Github.com นี่หละ สำหรับผมใช้ระบบปฏิบัติการ Windows 10 และมี Bash on Ubuntu on Windows ก็ถือโอกาสใช้ git บน Linux ที่อยู่ใน Windows

ขั้นตอนการใช้ git ตามที่ github.com แนะนำ ดังนี้

1. สร้าง folder ชื่อ git ที่ drive d
และสร้าง folder ชื่อ mygitfriends ใน git
จะได้ folder d:/git/mygitfriends เตรียมพื้นที่ไว้ทำงาน และอ้างอิงง่าย ๆ หน่อย
ที่ตั้งชื่อว่า mygitfriends จะลองชวนเพื่อนที่สนใจ
มาเข้ากลุ่ม collaborators ของ repository จึงตั้ง folder เป็นชื่อนี้

2. เข้า bash on ubuntu on windows
แล้วติดตั้ง git เพื่อทำงานใน ubuntu on windows

$sudo apt-get install git

3. นั่งมองคำสั่งที่ github.com แนะนำแป๊ปนึง มีความหมายทุกบรรทัด

echo "# mygitfriends" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:thaiall/mygitfriends.git
git push -u origin master

4. ใน bash on ubuntu on windows
ทำตามขั้นตอนดังนี้
4.1 $cd /mnt/d/git/mygitfriends

4.2 $echo “# Hello world! v.1” >> README.md

4.3 $git init จะสร้าง folder .git แล้วแฟ้มอีกเพียบขึ้นมาให้

4.4 $git add README.md

4.5 $git commit -m “first commit” ได้รับแจ้งว่าต้อง config email กับ name ก่อนสั่งงาน ก็ต้องสั่ง 2 บรรทัดนี้ก่อน
– git config –global user.email “you@example.com”
– git config –global user.name “Your Name”
หลัง config ก็สั่งใหม่ ก็เรียบร้อยด้วยดี
[master (root-commit) 2ff254f] first commit
1 file changed, 1 insertion(+)
create mode 100644 README.md

4.6 $git remote add origin https://github.com/thaiall/mygitfriends.git
หลังจากสั่ง $git remote ทำให้แฟ้ม config เพิ่มมา 3 บรรทัด
[remote “origin”]
url = https://github.com/thaiall/mygitfriends.git
fetch = +refs/heads/*:refs/remotes/origin/*

4.7 $git push -u origin master
เค้าแนะนำว่าให้ git pull ก่อน แล้วค่อย pushing again
! [rejected] master -> master (fetch first)
error: failed to push some refs to ‘https://github.com/thaiall/mygitfriends.git’
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., ‘git pull …’) before pushing again.
hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

4.8 $git pull origin master
warning: no common commits
remote: Counting objects: 8, done.
remote: Compressing objects: 100% (7/7), done.
remote: Total 8 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (8/8), done.
From https://github.com/thaiall/mygitfriends
* branch master -> FETCH_HEAD
* [new branch] master -> origin/master
Merge made by the ‘recursive’ strategy.
_config.yml | 1 +
collaborators.htm | 14 ++++++++++++++
index.md | 37 +++++++++++++++++++++++++++++++++++++
3 files changed, 52 insertions(+)
create mode 100644 _config.yml
create mode 100644 collaborators.htm
create mode 100644 index.md
จากนั้นก็เปิดแฟ้ม .git/MERGE_MSG มาให้แก้ไข ก็ไม่ได้แก้ไขครับกด Ctrl+X ออกไป

4.9 $git push -u origin master

Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (5/5), 503 bytes | 0 bytes/s, done.
Total 5 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/thaiall/mygitfriends.git
5f749af..353f84d master -> master

5. ตรวจสอบผลงานตามขั้นตอนข้างต้น
หลังจากสั่ง $git push .. พบแฟ้ม README.md เข้าไปอยู่ใน github.com
มีเพียงแฟ้มเดียวที่วันที่เปลี่ยนอย่างถูกต้อง แฟ้มที่เหลือยังอยู่กันตามปกติ

5.1 ถ้า pull ใหม่ เค้าบอกว่า up-to-date แล้ว
From https://github.com/thaiall/mygitfriends
* branch master -> FETCH_HEAD
Already up-to-date.

5.2 ถ้า push ใหม่ เค้าบอกว่า up-to-date แล้วเช่นกัน
Username for ‘https://github.com’: [yourusername]
Password for ‘https://[yourusername]@github.com’:
Everything up-to-date

5.3 สรุปว่า ถ้า push หรือ pull โดยไม่เปลี่ยนแปลงแฟ้มใน origin
ก็จะไม่ส่งผลถืง master ที่อยู่ใน github.com เช่นกัน เพราะ git จะตรวจสอบก่อน

ลอง Push project จาก ATOM เข้า Repository ใน Github.com ทับของเดิมเกลี้ยงเลย

วันนี้วันดี .. ได้ลองใช้ ATOM editor มาครับ อยากลองว่า push ใน editor กับ script file หนึ่ง เข้าไปใน Github.com จะให้ผลเป็นอย่างไร ผล คือ เข้าแทนที่ Repository ทั้งหมด เพราะตั้งเป็น Master ไม่เป็น Branch ใหม่อย่างที่ควร การเข้าไปแทนที่แบบนี้ นึกถึงตอนทดสอบใช้ Firebase ส่งเข้าไปทั้งก้อนเลยเหมือนกัน
สรุปว่า
ได้ Clone แล้ว Download ออกมาเก็บไว้ก่อน
พอ unzip แล้ว push กลับเข้าไป ทุกอย่างก็ยังอยู่เหมือนเดิม
ยกเว้น วันที่ของแฟ้ม เปลี่ยนเป็นปัจจุบันหมดครับ

 

เล่าเรื่องการใช้โปรแกรม editor ที่ชื่อ ATOM
วันนี้ 3 กันยายน 2560 ได้รุ่น 1.19.5 มา
มีขั้นตอนที่จะเล่าสู่กันฟัง ดังนี้

 

1. ก่อน หรือหลังติดตั้ง ATOM editor
ก็ควรไปสมัครใช้บริการของ Github.com หากคิดจะใช้งานร่วมกัน
เพื่อจะได้เชื่อมระหว่าง ATOM editor กับ Github
เพราะใน ATOM ไม่ได้เชื่อมเข้า Github ในทันที
มีขั้นตอนอีกเยอะกว่าจะสั่งอะไรใน Github ได้

2. Install package ใน ATOM
เข้า Menu bar, Help, Welcome Guide, Install a Package, Open Installer
หรือ Menu bar, File, Settings, Install
หรือ Ctrl+Shift+P เพื่อ Search Package สำหรับ Install
พิมพ์ git ณ วันที่ 3 กันยายน 2560
package : git-plus 7.9.3 download 1737185 ของ akonwi
package : git-time-machine 1.5.9 download 265062 ของ Littlebee
package : git-control 0.9.0 download 157686 ของ Jacogr

3. เลือก install git-plus (ผมลงตัวเดียว)
หลังติดตั้งเสร็จก็เลือก Setting, Uninstall หรือ Disable ได้
เข้าไปดูใน Setting พบ Commands จำนวน 22 รายการ
คำสั่งไหนใช้บ่อยมี Hot-key ให้ใช้ด้วย
จะสั่งงานกด Ctrl+Shift+H

4. หลังติดตั้ง git-plus แล้วเรียก Git-Plus Palette
เลือกสั่ง add ก็ฟ้องขึ้นมาว่า
‘git’ is not recognized as an internal or external command,
operable program or batch file.
ก็มีเหตุที่ทำให้ใช้คำสั่งนี้ไม่ได้ ต้องทำข้อต่อ ๆ ไปก่อน
ปล.1 ไปสำรวจพบว่าใน Palette พบคำสั่งมากกว่า 22 รายการ ให้เลือกใช้
ปล.2 คำสั่ง add นี้คือการย้าย แฟ้มที่มีการแก้ไขเข้าไปอยู่ใน Staged changes
หากมีการ commit แล้ว push ก็จะรู้ว่าแฟ้มไหนเปลี่ยนแปลงบ้าง

5. Menu bar, View, Toggle GitHub Tab หรือ Ctrl+Shift+8
พบ This repository does not have any remotes hosted at GitHub.com
แสดงว่า ยังไม่ได้เชื่อม Repository หรือ Project เข้ากับ Github.com
เมื่อเข้าไปอ่านที่ https://atom.io/packages/git-plus
ในส่วนของ IMPORTANT พบคำแนะนำสำหรับผู้ใช้ SSH ว่าต้อง login อย่างไร
ส่วนผู้ใช้ Windows ก็เข้าไปอ่านใน [thread] ได้
พบว่า damianpirchio เค้าใช้งานได้หลังมีการ Update version ใหม่
บางปัญหา พอมี version ใหม่มา ปัญหาเหล่านั้นก็หายไป
https://github.com/akonwi/git-plus/issues/335
ปล. ปัญหานี้น่าจะเกิดจากการเชื่อมกับ repository ไม่เรียบร้อย
หากเชื่อมเรียบร้อย จะแสดงปุ่ม login เท่านั้น ตอนนี้ผมก็ยังไม่ได้ login ครับ
เวลา push ก็กรอก signin เป็นครั้งไป

6. Generating a new SSH key
บน Win10 มี Bash on Ubuntu on Windows

$ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Generating public/private rsa key pair = [github] ตามชอบ
Enter passpharase = [blank] ไม่ได้ใส่อะไร
file (/home/burin/.ssh/id_rsa) = [github] ตามชอบ
ดังนั้นใน C:\Users\ACER\AppData\Local\lxss\home\burin
จึงพบแฟ้ม github กับ github.pub

7. Adding your SSH key to the ssh-agent
ทดสอบว่า ssh-agent ทำงานอยู่ด้วย

$eval $(ssh-agent -s)

พบตัวเลข PID และคำสั่งนี้ทำบน Bash on Ubuntu on Windows

แล้วสั่ง $ssh-add ~/.ssh/id_rsa
แต่ผมสั่งว่า $ssh-add ~/github

พบ Identity added: /home/burin/github (/home/burin/github)
เพราะกำหนด file ว่า github บน Windows ตอนที่ Generate

8. ไปแก้ config ใน git ของ Project
ตามคำแนะนำของ damianpirchio
https://github.com/akonwi/git-plus/issues/335
มีตัวอย่างที่ https://github.com/damianpirchio/inmobiliaria

เดิม
 [core]
 repositoryformatversion = 0
 filemode = false
 bare = false
 logallrefupdates = true
 symlinks = false
 ignorecase = true
เป็น
 [core]
 repositoryformatversion = 0
 filemode = false
 bare = false
 logallrefupdates = true
 symlinks = false
 ignorecase = true
 [remote "origin"]
 url = https://github.com/thaiall/programming-page.git
 fetch = +refs/heads/*:refs/remotes/origin/*
 [branch "master"]
 remote = origin
 merge = refs/heads/master

ที่ github ผมมี https://github.com/thaiall/programming-page ครับ

9. ตอนสั่ง add พบการใช้ git
อ่านจาก https://stackoverflow.com/.. /internal-or-external-command
ก็พบปัญหาเหมือนกัน คือ
‘git’ is not recognized as an internal or external command,
operable program or batch file.
มีขั้นตอนแก้ไขบน Windows 10 ดังนี้
9.1 หา Git ให้พบว่าอยู่ตรงไหน
ของผมอยู่ใน C:\Users\[ACER ชื่อเครื่อง]\AppData\Local\atom\app-1.19.5\resources\app\node_modules\dugite\git\cmd\
เพราะมากับ ATOM รุ่น 1.19.5 อัพเดทไปเมื่อวาน ตอนลงเป็น 1.18 ครับ
9.2 กดปุ่ม Window+Pause เพื่อเข้า System
แล้ว Advance system setting
แล้ว Environment Variables ใต้ Advanced Tab
9.3 ในหัวข้อ System variables มองหา Path แล้ว Edit
แล้ว New
แล้วกรอกไปว่า C:\Users\[ตามที่พบข้างบนยาว ๆ]\git\cmd\
9.4 ทดสอบด้วยการเข้า DOS แล้วพิมพ์ git
แล้วสั่งอะไรไม่ค่อยจะได้นะครับ ต้องไปทำงานใน ATOM

10. พบปัญหา หลังกด push รอบแรก จาก task bar
เพราะ push คือ การ upload project ส่วน pull คือ download project
ส่วน commit คือ การให้รายละเอียดก่อน push

พบ
 Note: No remote detected for branch master.
 Cannot push because there is no remote named "origin"
 for which to create a remote tracking branch
 หรือ
 fatal: Invalid refspec '+refs/heads/:refs/remotes/origin/'

พอเปลี่ยนใน config ของ git เป็นตาม code ด้านล่างนี้ ปัญหาก็หายไป

[remote "origin"]
 url = https://github.com/thaiall/programming-page.git
 fetch = +refs/heads/*:refs/remotes/origin/*

 

11. พบปัญหา หลังกด push รอบ 2

พบ
 error: src refspec master does not match any.
 error: failed to push some refs to 'https://github.com/thaiall/programming-page.git'

วิธีแก้ไข
กดปุ่ม commit ก่อนกดปุ่ม push

12. กดปุ่ม commit พบปัญหาอีกแล้ว

พบ
 Run
 git config --global user.email "you@example.com"
 git config --global user.name "Your Name"
 to set your account's default identity.
 Omit --global to set the identity only in this repository.
 fatal: unable to auto-detect email address (got 'ACER@LAPTOP-xxxxx.(none)')

วิธีแก้ไข
ต้องเข้าไปเพิ่มใน config ของ git
[user]
name = [you@example.com]
email = [Your Name]

13. ไม่มีอะไรใน Staged Changes แต่น่าจะเคย add เข้าไปแล้ว
กด Push 2 รอบ
พบ Please enter your credentials for https://github.com
และ remote: Invalid username or password.
fatal: Authentication failed for ‘https://github.com/thaiall/programming-page.git/’
สงสัยจะใช่ username กับ password ผิดจริง ๆ ไม่มีอะไรมากครับ
ตกใจไว้ก่อน

14. ใส่รหัสถูกต้อง พบปัญหาอีกแล้ว
พบ
The tip of your current branch is behind its remote counterpart.
Try pulling before pushing again. Or, to force push, hold cmd or ctrl while clicking.
วิธีแก้ไข
เค้าว่า ถ้าผมไม่มีแฟ้มที่ github.com ให้กดปุ่ม ctrl ค้างไว้ขณะคลิ๊ปปุ่ม push
มีหน้าต่างถาม Force Push ขึ้นมาครับ กดเลย
แล้วก็ถาม signin อีกครั้ง ดีครับ ไม่ต้องจำรหัสค้างไว้
เค้าก็เตือนให้ pull ก่อนแล้วนะ แต่ผมไม่ได้ทำ

15. หลัง push สำเร็จ พบว่าใน repository บน github.com หายเกลี้ยง
เหลือแต่ s6update.php แฟ้มเดียว (โปรแกรมหนึ่งที่ทดสอบจะ push เข้าไป)
นึกขึ้นได้ว่า Download repository เป็น .zip ออกมาก่อนหน้านี้
unzip แล้วส่งกลับเข้าไปก็พบว่าทุกอย่างอยู่ครบ
รวมทั้ง https://thaiall.github.io/programming-page/
ทุกอย่างกลับมาเหมือนเดิม

16. ขั้นตอนการ push
1. ตรวจสอบใน Staged changes ว่ามีอะไรเปลี่ยนแปลงไหม ค่อย Push
2. กรอกข้อมูลใน Commit แล้วกดปุ่ม Commit
3. กด Push 2 ครั้ง เค้าถามมาทีละครั้ง
4. ใส่ user and password แล้ว signin
5. ไปดูผลการ push ที่ repository ใน github.com

แนะนำเว็บไซต์
https://technologyand.me/2016/08/29/git-with-atom/
https://vwannabe.com/2016/05/26/how-to-use-github-and-atom/
http://www.thaiall.com/atom/

หลัง Update Windows 10 ต้นกันยายน 60 พบสิ่งที่รอคอย 3 เรื่อง

ปกติแล้วการ Update Windows ก็ไม่ได้รอคอยอะไรมากนัก
แต่พักนี้เจอปัญหาหลายอย่าง ใช้ไปสักพัก
ก็รู้สึกว่าอยากให้ Windows แก้ปัญหาที่ค้างใจอยู่
วันนี้ 1 กันยายน 2560 ได้ update Windows 10
ใช้เวลานานนิดหน่อย แล้วก็พบสิ่งที่รอคอย ดังนี้

1. แก้ Bug ใน MS Edge ให้มีการส่งค่ากลับ (return)
จากการใช้ XMLHttpRequest() ใน Javascript
เพื่อเชื่อม XML กับ XSL แล้วต้องการให้มีการคืนค่า
มากับ transformToFragment ที่ผ่าน XSLTProcessor
ปรากฎว่าคืนมาเป็น null ไม่เหมือน Browser อื่นที่คืนค่าปกติ
เขียนปัญหาไว้ที่ http://www.thaiall.com/blog/burin/8841/
แต่ปัญหานี้หายไปแล้วหลัง Update
ทดสอบที่ http://www.thaiall.com/xml/list01.htm
โปรแกรม Edge เป็นส่วนหนึ่งของ Win10 ไม่สามารถ Download มาติดตั้งได้
จะปรับรุ่นต่อเมื่อมีการ Update Windows

2. Chrome ของผม ติด Malware ชื่อ Search in Tabs
ก็ไม่ได้ติดตั้ง แต่เข้ามาทางไหนก็ไม่แน่ใจนัก
หลัง Update Windows เข้าไปก็ไม่พบอีก
แต่ยังเห็น Search in Tabs เป็นรายการ Extensions
ของ Google ที่ให้ Download กันอยู่ อ่าน Review ดูได้ครับ
แล้วอย่างไป Download นะครับ
ตอนนี้ในเครื่องมี Windows Defender ช่วยจัดการไวรัส และ malware
ที่กิน Resource เยอะมากอยู่แล้ว ไม่จำเป็นก้ไม่ต้องไปลงของค่ายอื่นนะครับ

3. ใน Paint มีปุ่ม Open Paint 3D
เป็นเครื่องมือที่น่าสนใจ ลองสร้างวัตถุ 3 มิติได้เลย
สามารถ Export แบบ 3D เป็น .3mf
ถ้าเป็น 2D ก็ได้หลายนามสกุล เช่น PNG เป็นต้น

วิธีอัพเดทวินโดว์ (Update Windows)
1. คลิ๊กปุ่ม Windows, Setting
2. ลงมาข้างล่างสุด คลิ๊ก Update & security
3. พบ Windows Update เป็นรายการแรก ก็คลิ๊กเลย
4. เข้าไปพบปุ่ม Check for updates
หากไม่มีอะไรต้อง update ก็ใช้เวลาไม่นาน
ขณะนี้ผมได้ Windows 10 Version 1703

ข้อมูลเกี่ยวกับ Windows 10 version 1703
https://support.microsoft.com/en-us/help/4018124/windows-10-update-history
พบว่ามีการ Update Microsoft Edge หลายรายการ อาทิ KB4020102 (OS Build 15063.332)
หลัง Update ได้
– Microsoft Edge 40.15063.0.0
– Microsoft EdgeHTML 15.15063
โดยมีรายการ Update เพื่อ Improvements and fixes ผ่านโปรแกรมแก้ไข ดังนี้

KB4034674 (OS Build 15063.540)
KB4032188 (OS Build 15063.502)
KB4025342 (OS Build 15063.483)
KB4022716 (OS Build 15063.447)
KB4022725 (OS Build 15063.413 and 15063.414)
KB4020102 (OS Build 15063.332)
KB4016871 (OS Build 15063.296 and 15063.297)
KB4016240 (OS Build 15063.250)
KB4015583 (OS Build 15063.138)
KB4016251 (OS Build 15063.13)

 

พบว่า MS Edge มี Bug เกี่ยวกับการ xml + xslt + javascript แล้ว return null

internet explorer 11
internet explorer 11

พบการรายงาน Bug เรื่อง ใช้ javascript และ XSLTProcessor
ที่ MS Edge ไม่ Return value กลับมาอย่างถูกต้อง
ที่พบ คือ “Created fragment is null” จากการ run test
โพสต์ปํญหาโดย Martin Honnen เมื่อ 18 พฤศจิกายน 2558
ที่ https://connect.microsoft.com/IE/feedback/details/2030537
แล้ว MS ก็ย้าย Bug Report ไปยังกลุ่มที่ถูกต้อง
ที่ https://developer.microsoft.com/../issues/5552211/
มีตัวอย่างแฟ้มที่ https://developer.microsoft.com/../issues/9484576/
ทดสอบที่ http://encinematheque.fr/js7/_testHtml.htm
ดูผลการทดสอบใน _testHtml.htm
พบว่า

Test failed. Created fragment is: null.

แล้ว Microsoft Edge ที่ผมใช้อยู่รุ่น 38.14393.1066.0
แต่รุ่นล่าสุดคือ 40.15063 Desktop April 11,2017
ไปอ่าน ถาม-ตอบ ในเว็บของ Microsoft.com
เค้าว่าถ้า update MS Windows ก็จะ update MS Edge ให้โดยอัตโนมัติ
ก็รอลุ้นว่ารุ่นใหม่จะแก้ bug ตัวนี้หรือไม่ เพราะ browser ตัวอื่นผ่านหมด
https://en.wikipedia.org/wiki/Microsoft_Edge

firefox local
firefox local

สรุปว่าตอนนี้ เขียน Script ไว้ที่ http://www.thaiall.com/xml/list01.htm
เพื่ออ่านแฟ้ม XML ส่งเข้าปรับรูปแบบด้วย XSLT แล้วแสดงผลเป็น HTML
ได้ทดสอบกับ Firefox, IE, Opera, Chrome ก็ใช้งานได้แล้ว
ก็ใช้หลายวิธี ให้เหมาะสมกับแต่ละ Browser
เหลือแต่ MS Edge นี่หละครับ ค้างใจอยู่

 

#AndroidStudio ตอนที่ 11 แอพสำหรับ Tablet(Wide)/Smartphone(Narrow) มีตัวเลือกรายการด้านซ้าย รายละเอียดด้านขวา ถ้าจอกว้างพอ

#AndroidStudio ตอนที่ 11 แอพสำหรับ Tablet(Wide)/Smartphone(Narrow) มีตัวเลือกรายการด้านซ้าย รายละเอียดด้านขวา ถ้าจอกว้างพอ

<introduction>
อารัมภบท
การเขียน App สักตัว ที่ต้องการให้มี ซีกซ้าย (Left Pane) เป็นรายการตัวเลือก และซีกขวา (Right Pane) เป็นรายละเอียดหลังคลิ๊กไปที่รายการ ทาง Android เข้าใจเรา ได้เตรียม Template (อ่านได้จาก Add Code from a Template ) มาให้เราเลือก 12 แบบ พบว่า Main/Detail Flow เป็นแบบที่แบ่งจอภาพเป็น Two section สำหรับจอแบบ Wide screen แต่จะหดให้ทำงานกับ One section หากเป็น Narrow screen ซึ่งเค้ากำหนดว่า Wide screen คือ 900dp และผมใช้ Smartphone ก็จะไม่มีโอกาสได้เห็นแบบ 2 section แต่ใน code หากปรับชื่อ folder เป็น 600 dp ก็ทำให้ app รองรับการแสดงผลแบบ Main/Detail Flow บน Smartphone ได้

การเรียนรู้การทำงานของ Template นี้ ก็ต้องหา Activity เข้าไปใส่ แล้วค่อยแกะค่อยไซร้ไป ไม่งั้นจะให้พิมพ์ Hello world! กันทุก Project ก็คงจะจืดแยเลย จึงใส่ตัวเลือกเข้าไป 6 รายการ คือ API Level, Security_patch, width & height, IP Address, Date and Time และ Webview เมื่อต้องทำให้แต่ละกิจกรรมทำงานได้ พบปัญหาว่า บางกิจกรรมใช้ method ใน Dummycontent.java ไม่ได้ แก้ไขโดยไปใส่ใน Activity หลัก ซึ่งปัญหาที่พบบ่อยมี 2 สาเหตุ คือ 1) ฟังก์ชันนั้นต้องเรียกใช้ Context ของ Activity แต่ไม่มีให้ใช้ในคลาสนั้น 2) การเรียกใช้ฟังก์ชัน ไม่สามารถใช้ได้หากอยู่ใน method แบบ static จึงต้องย้ายงานไปทำใน Activity หลัก อาทิ MainActivity.java แล้วเก็บเป็นตัวแปรให้อ้างอิงได้ เมื่อ Dummy ต้องการใช้ ก็อ้างอิงเป็นวัตถุใน Dummy แล้วนึกไปใช้ได้ แต่ Project นี้มี Activity หลักอยู่ใน ItemListActivity.java

ระหว่างพัฒนา และทดสอบ ได้พบกับคำว่า Unfortunately บ่อยเลย เพราะการใช้ method ในที่ห้ามใช้ ระบบปฏิบัติการไม่อาจดำเนินการตามที่คาดไว้ แต่ Build APK ผ่าน ไม่มีปัญหานะครับ ปัญหาไปเกิดตอนประมวลผล ก็ต้องแก้ไขกันไป เพราะเงื่อนไขเยอะมาก หากันจนเจอ หรือหากันให้เจอ เมื่อต้องเจอปัญหาในแต่ละครั้ง

สรุปกระบวนการได้ 13 ขั้นตอน ประกอบด้วย 1) สร้าง Project เลือก Template แบบ Master/Detail Flow 2) ทำให้ item ใน list มีกิจกรรม 3) เพิ่มเกิจกรรมให้ตัวเลือกแต่ละตัว ใน DummyContent.java 4) การได้ ipaddress ต้องปรับ AndroidManifest.xml 5) สร้าง WebView ชื่อ aboutus.xml รับ HTML Tag 6) การเพิ่ม layout แบบ WebView แทน TextView จำนวน 1 ตัวเลือก 7) การหาขนาด Width และ Height ของจอภาพ 8) การหาค่า IP Address 9) การหาวันเวลาของเครื่อง 10) การหาเลขรุ่น API ของ Android ที่มีในโทรศัพท์แต่ละเครื่อง 11) การส่งค่าเข้าตัวแปรแบบตัวเลข และตัวอักษรใน string 12) การอ้างอิงชื่อ id, string, layout, drawable แบบอ้างอิงด้วยตัวแปร 13) การติดตั้ง Android 7.1 บน VirtualBox


ปล. แฟ้ม Project ผมบีบไว้ และแชร์ให้ Download ทั้ง .rar และ .apk ไปทดสอบกัน
ที่ http://www.thaiall.com/android (ผ่าน 4shared.com)

</introduction>
<definition>
นิยามศัพท์

  1. Template คือ แบบฟอร์มที่ยังไม่ได้ใส่เนื้อหา แต่มีเค้าโครง (Layout) หรือกิจกรรม (Activity) ที่จำเป็นมาให้แล้ว ซึ่ง Android มีให้เลือก 12 แบบ สามารถนำมาปรับแต่งเสมือนกับโครงงานที่สร้างขึ้นใหม่ แต่เทมเพลตจะช่วยล่นระยะเวลาในการพัฒนาระบบในระยะแรกให้สั้นลง แทนการเริ่มต้นจาก 0 หรือการนับ 1 ใหม่
  2. Unfortunately คือ ปัญหาที่ไม่คาดหวัง แต่มาปรากฎบนหน้าจออุปกรณ์ของเราได้ ในกรณีที่เกิดขึ้นจากการติดตั้งและใช้แอพที่ยังอยู่ในระหว่างพัฒนา ก็ลบแอพ (Uninstall) แล้วกลับไปไล่ดูเงือนไขของ command หรือ method หรือ class ที่เรียกใช้ อาจใช้บาง method ที่ใหม่เกินกว่า API ในเครื่องจะรองรับ หรือเก่าเกินไป หรือความไม่เข้ากับของการใช้คำสั่ง แต่ถ้าเป็น App ที่พัฒนา และใช้งานมาแล้วระยะหนึ่ง มีคำแนะนำให้ Clear cache and data หรือ ลบ App แล้วลงใหม่ หรือ Factory reset เป็นต้น

</definition>

กำลังเล่าเรื่อง การใช้โปรแกรม Android Studio สู่เพื่อนนักพัฒนา ผ่าน Blog

<process>
กระบวนการในการพัฒนา APP
เพื่อให้ได้แอพที่แสดงผล Main กับ Detail แยกกัน และแสดงผลต่างกันกับอุปกรณ์แบบ Wide screen และ Narrow screen
มีขั้นตอน ดังนี้

1. สร้าง Project เลือก Template แบบ Master/Detail Flow
ตั้งชื่อให้ project ว่า mainanddetail
เป็นตัวอย่างโครงงานที่น่าสนใจ สามารถนำมาปรับเป็นแอพที่ใช้งานจริงได้
หากใช้กับ Narrow screen จะมีเพียง one screen
หากใช้กับ Wide screen จะแบ่งการทำงานเป็น 2 Section
คือ ซีกซ้ายสำหรับรายการเมนู (Option List) และซีกขวาสำหรับรายละเอียดข้อมูล (Detail)
มีแฟ้มน่าสนใจ 9 แฟ้มที่จะเล่าสู่กันฟัง ดังนี้
https://inducesmile.com/android/android-fragment-masterdetail-flow-tutorial-in-android-studio/

1.1 สำรวจแฟ้ม AndroidManifest.xml
พบว่าใน <application> ได้กำหนด activity ไว้ 2 section
เพื่อเรียก .ItemListActivity และเรียก .ItemDetailActivity
โดย .ItemDetailActivity ที่มี parent คือ .ItemListActivity”
แสดงว่า 1) ItemListActivity.java คือ Activity หลัก
และทำงานคู่กับ 2) ItemDetailActivity.java อย่างที่เรียกว่าแยกกันไม่ออกทีเดียว
จะเห็นว่างานเริ่มจากการเรียก 2 Activity แต่จะแสดง Layout จากทั้ง 2 หรือไม่
ขึ้นกับว่าจอภาพที่ใช้เป็นแบบ Wide หรือ Narrow

1.2 สำรวจ Activity ที่ 1 แฟ้ม ItemListActivity.java
พบว่าใน oncreate ได้สั่ง setContentView(R.layout.activity_item_list);
ซึ่งจะไปเรียกให้ Layout แบบ CoordinatorLayout ที่มีอะไรหลายอย่างทำงานร่วมกัน
Activity นี้ควบคุมงานทางด้านซ้าย (Left Pane) คือ รายการตัวเลือก

1.3 สำรวจ Layout ที่ 1 แฟ้ม activity_item_list.xml
โครงร่างหลักสำหรับการวางวัตถุในด้านซ้าย (Left Pane)
มี Root Layout เป็น CoordinatorLayout
ที่ใช้ AppBarLayout กับ FloatingActionButton
ซึ่งพบได้ใน Template แบบ Basic Activity ที่อธิบายในตอนที่ 9 ข้อ 1
แล้วเรียก Layout อื่นให้ทำหน้าที่แสดงตัวเลือกผ่าน FrameLayout และ include
พบว่ามี Layout structure ดังนี้

<CoordinatorLayout>
 <AppBarLayout>
 <Toolbar />
 </AppBarLayout>
 <FrameLayout>
 <include layout="@layout/item_list" />
 </FrameLayout>
 <FloatingActionButton />
 </CoordinatorLayout>

1.4 สำรวจ Layout ที่ 2 แฟ้ม activity_item_detail.xml
โครงร่างหลักสำหรับการวางรายละเอียดในด้านขวา (Right Pane)
หรือเป็น Full Parent หากทำงานบน Narrow Screen
มี Root Layout เป็น CoordinatorLayout เช่นกัน
จะทำหน้าที่แสดงข้อมูลด้านขวาสำหรับจอภาพที่กว้างไม่น้อยกว่า 900 dp
แต่จะเป็น full screen แทน activity_item_list.xml หากน้อยกว่า 900 dp
– การแสดงเนื้อหามีทำงานกับ fragment แล้วนำไปรวมกันใน Layout
ซึ่งมีความสัมพันธ์ระหว่างแฟ้ม java จำนวน 3 แฟ้ม
– การแสดงข้อมูลมีกิจกรรมใน 1) ItemDetailActivity.java ทำหน้าที่รับอะไรจากใครเข้าไป
แล้วพบการเชื่อมกับ 2) ItemDetailFragment.java
ด้วยคำสั่ง arguments.putString(ItemDetailFragment.ARG_ITEM_ID, ..
และ .add(R.id.item_detail_container, fragment) ..
ซึ่ง item_detail_container อยู่ใน Layout activity_item_detail.xml
– หากเข้าไปดูใน ItemDetailFragment.java
พบว่า มีการเชื่อมกับ ARG_ITEM_ID กับ 3) DummyContent.java อีกทีหนึ่ง
มีรายละเอียดที่น่าสนใจอีกมากมายใน DummyContent.java

พบว่ามี Layout structure ดังนี้

<CoordinatorLayout>
 <AppBarLayout>
 <CollapsingToolbarLayout>
 <Toolbar />
 </CollapsingToolbarLayout>
 </AppBarLayout>
 <NestedScrollView android:id="@+id/item_detail_container" />
 <FloatingActionButton />
 </CoordinatorLayout>

1.5 สำรวจ Layout ที่ 3 แฟ้ม item_detail.xml
โครงร่างย่อยสำหรับแสดงเนื้อหาโดยตรง และรับข้อมูลแบบ TextView
ทำงานสำหรับด้านขวา (Right Pane) เท่านั้น
พบว่า TextView ถูกเชื่อมข้อมูลกับ DummyContent.java ผ่านคำสั่งใน ItemDetailFragment.java
คือ ((TextView) rootView.findViewById(R.id.item_detail)).setText(mItem.details)
เมื่อเห็นการทำงานของ Layout นี้ จึงนำไปปรับใช้เป็น WebView ในตอนท้ายของบทความนี้

พบว่ามี Layout structure ดังนี้

<TextView id="@+id/item_detail" /> (แฟ้มนี้มี Tag เดียว)

1.6 สำรวจ Layout ที่ 4 แฟ้ม item_list.xml
โครงร่างย่อยสำหรับรายการตัวเลือก ทำงานด้านซ้าย (Left Pane) เท่านั้น
พบว่า findViewById(R.id.item_list) ถูกเชื่อมเข้า View ใน ItemListActivity.java
แล้วเชื่อมโยงระหว่าง RecycleView กับ DummyContent ผ่าน .setAdapter()
หน้าที่ของ item_list คือ แสดงหน่วยข้อมูล (item) ให้เลือกแบบรายการ (List)
พบว่ามี Layout structure ดังนี้

<RecyclerView id="@+id/item_list" /> (แฟ้มนี้มี Tag เดียว)

1.7 สำรวจ Layout ที่ 5 แฟ้ม item_list.xml (w900dp)
คล้ายกับ 1.6 แต่หากจอภาพเป็นแบบ Wide Screen
รองรับการแสดง FrameLayout ที่กว้าง 900 dp ได้ ก็จะมี 2 Pane
มีการตรวจสอบ และกำหนดค่าให้กับ mTwopane = true
ซึ่งพบใน ItemListActivity.java
หากปรับขนาดจาก 900 dp เหลือ 600 dp ก็จะแสดงผลบน Smartphone ของผมได้
จึงลดขนาดด้วยการ rename folder เป็น layout-w600dp
ผ่านการ Right Click เลือก [Show in Explorer] แล้วก็ rename folder ได้เลย
http://www.appstoremarketresearch.com/articles/android-tutorial-master-detail-flow/

พบว่ามี Layout structure ดังนี้

<LinearLayout>
 <RecyclerView id="@+id/item_list" />
 <FrameLayout id="@+id/item_detail_container" />
</LinearLayout>

1.8 สำรวจ Layout ที่ 6 แฟ้ม item_list_content.xml
โครงร่างย่อยสำหรับแสดงรายการตัวเลือกแต่ละรายการ
ปกติจะมีลำดับตัวเลือก และชื่อตัวเลือก ก็จะเป็นตาม Layout นั้น
ส่วนแฟ้มที่กำหนดขนาด (Dimension) คือ dimens.xml
หากเปลี่ยน <dimen name=”text_margin”> ก็จะมีผลต่อ Layout
ที่อ้างอิงผ่าน layout_margin=”@dimen/text_margin”

พบว่ามี Layout structure ดังนี้

<LinearLayout android:orientation="horizontal">
 <TextView />
 <TextView />
</LinearLayout>

2. ทำให้ item ใน list มีกิจกรรม
พบว่าแฟ้ม DummyContent.java ควบคุมการแสดงรายการตัวเลือก
และกิจกรรมหลังเลือกตัวเลือก
หากจะปรับเปลี่ยนจำนวนตัวเลือก หรือเปลี่ยนชื่อตัวเลือก
จาก 25 รายการเป็น 10 รายการ ก็สามารถทำได้
สามารถเปลี่ยน for ใน static เป็นดังนี้

มองหา
 private static final int COUNT = 25;
 static {
 for (int i = 1; i <= COUNT; i++) {
 addItem(createDummyItem(i));
เปลี่ยนเป็น
 private static final int COUNT = 5;
 static {
 addItem(new DummyItem("1","API Level",makeDetails(1)));
 addItem(new DummyItem("2","SECURITY_PATCH",makeDetails(2)));

3. เพิ่มเกิจกรรมให้ตัวเลือกแต่ละตัว ใน DummyContent.java

มองหา
 builder.append("Details about Item: ").append(position);
 for (int i = 0; i < position; i++) { .. }
 return builder.toString();
เปลี่ยนเป็น
 builder.append("Data ID : ").append(position);
 switch(position){
 case 1:
 builder.append("\nAPI Level = ")
 builder.append(String.valueOf(Build.VERSION.SDK_INT)); // 21
 return builder.toString();

4. การได้ ipaddress ต้องปรับ AndroidManifest.xml
โดยเพิ่ม 2 tag นี้ ก่อนเปิด tag <application>

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

มีตัวอย่างคำสั่งในข้อ 8

 

5. สร้าง WebView ชื่อ aboutus.xml รับ HTML Tag
สร้าง Layout ใหม่ให้มีเพียง WebView คล้ายกับ item_detail.xml
แล้วปรับให้การคลิ๊ปปุ่มบน FloatingActionButton ไปเรียก aboutus.xml
เลือกการเปลี่ยน include ใน activity_item_list.xml
ใช้วิธีการกำหนด ViewFlipper เคยเล่าในตอนที่ 10 ข้อ 1

5.1 ปรับแฟ้ม activity_item_list.xml
เพื่อสลับกันไปมาระหว่างการกดปุ่ม FloatingActionButton
คือเลือกระหว่างแสดง item_list กับ aboutus
หาก include item_list ใน wide screen จะมา 2 section
หาก include aboutus ใน wide screen จะมาเฉพาะ WebView

มองหา
 <include layout="@layout/item_list" />
เปลี่ยนเป็น
 <ViewFlipper
 android:id="@+id/view_flipper"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <include layout="@layout/item_list" />
 <include layout="@layout/aboutus" />
 </ViewFlipper>

https://developer.android.com/reference/android/webkit/WebView.html
https://www.mkyong.com/android/android-webview-example/

5.2 ปรับแฟ้ม ItemListActivity.java
ใน fab.setOnClickListener(new View.OnClickListener() { }
ซึ่งใช้ switch สนับกันสั่ง setDisplayedChild

เพิ่มคำสั่งต่อไปนี้

ViewFlipper vf = (ViewFlipper) findViewById(R.id.view_flipper);
 switch (vf.getDisplayedChild()) {
 case 0:
 vf.setDisplayedChild(1);
 WebView webView = (WebView) findViewById(R.id.webview);
 webView.getSettings().setJavaScriptEnabled(true);
 String mData = getString(R.string.mdata);
 //webView.loadData(mData, "text/html", null);
 webView.loadDataWithBaseURL("file:///android_res/drawable/",
 "<img src='test.jpg' />", "text/html", "utf-8", null);
 break;
 case 1: vf.setDisplayedChild(0); break; }

5.3 เปลี่ยนภาพปุ่ม
เลือก ic_menu_help ที่แสดงเครื่องหมาย ? บน FloatingActionButton
ด้วย app:srcCompat=”@android:drawable/ic_menu_help”

5.4 เขียน HTML แบบใช้ entity reference
คือการใช้ &lt; แทนเครื่องหมาย <

<string name="mdata">
 &lt;html>&lt;body>
 &lt;b>Hello world!&lt;/b>&lt;br/>
 &lt;center>&lt;img src="bridge.jpg" height=200 />&lt;/center>
 &lt;table width=100% bgcolor=yellow>&lt;tr>&lt;td>&lt;center>
 A bridge is in Lampang province, Thailand.
 &lt;/td>&lt;/tr>&lt;/table>
 &lt;/body>&lt;/html>
 </string>

6. การเพิ่ม layout แบบ WebView แทน TextView จำนวน 1 ตัวเลือก
พบว่า มีการส่ง R.layout.item_detail
เข้าไปใน rootView ใน ItemDetailFragment.java
ผ่านคำสั่ง rootView = inflater.inflate(R.layout.item_detail,..
ก็เพียงแต่เปลี่ยนจาก item_detail เป็น aboutus เท่านั้น
เปลี่ยนเป็น rootView = inflater.inflate(R.layout.aboutus,..
แล้วปรับแฟ้ม aboutus.xml ให้คล้าย item_detail.xml ที่มีเพียง Tag เดียว
เพื่อเข้าไปอยู่ใน rootView แล้วแสดงผลร่วมกับ appBarLayout ดังนี้

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/webview"
 style="?android:attr/textAppearanceLarge"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="16dp"
 android:textIsSelectable="true"
 tools:context="com.thaiall.www.mainanddetail.ItemDetailFragment" />

โดย rootView ใน ItemDetailFragment.java
จะถูกนำเข้า fragment แล้วรวมกับ container ใน ItemDetailActivity.java
ผ่านคำสั่ง getSupportFragmentManager().beginTransaction()
.add(R.id.item_detail_container, fragment)

7. การหาขนาด Width และ Height ของจอภาพ
ทำใน Activity หลักที่มี Context
แล้วเรียกค่าไปใช้ใน Dummy project ได้

การเรียกใช้ใน Dummy project

import com.thaiall.www.mainanddetail.ItemListActivity;
private static ItemListActivity item = new ItemListActivity();
builder.append(item.screenWidth);

ประกาศตัวแปรไว้ใต้ Class แบบ static

public static int screenHeight = 0;
 public static int screenWidth = 0;

คำสั่งสำหรับหาค่า Width กับ Height ใช้ใน Activity หลัก

// Width=720pixel Height=1280pixel
// DisplayMetrics displayMetrics = getResources().getDisplayMetrics(); 
DisplayMetrics displayMetrics = new DisplayMetrics();
WindowManager wm = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE); 
wm.getDefaultDisplay().getMetrics(displayMetrics);
screenHeight = displayMetrics.heightPixels;
screenWidth = displayMetrics.widthPixels;

8. การหาค่า IP Address

WifiManager wifiMan = (WifiManager) getApplicationContext().getSystemService(Context.WIFI_SERVICE);
 WifiInfo wifiInf = wifiMan.getConnectionInfo();
 int ipAddress = wifiInf.getIpAddress();
 ip = String.format("%d.%d.%d.%d", 
(ipAddress & 0xff),(ipAddress >> 8 & 0xff),
(ipAddress >> 16 & 0xff),(ipAddress >> 24 & 0xff));

9. การหาวันเวลาของเครื่อง

getDateTime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(Calendar.getInstance().getTime());

10. การหาเลขรุ่น API ของ Android ที่มีในโทรศัพท์แต่ละเครื่อง

builder.append(String.valueOf(Build.VERSION.SDK_INT)); 
// I-Mobile IQ II 21
builder.append(String.valueOf(Build.VERSION.RELEASE)); 
// 5.0 (Lollipop) or 4.4.2 (Kitkat)

11. การส่งค่าเข้าตัวแปรแบบตัวเลข และตัวอักษรใน string
ตัวอย่างนี้ไม่ได้อยู่ใน project ที่ทดสอบนี้ แต่ค้นมาแล้วอยากเล่าเก็บไว้
จะรับข้อมูลจาก 3 ตัวแปร ที่ผสมระหว่างตัวเลข และตัวอักษร
จึงจะทำให้ข้อมูลสมบูรณ์ ตัวอย่างนี้ตัวแปรจะมีลำดับที่เริ่มจาก 1
ส่งเข้าไปผ่าน method getResources และ getString

<string name="x1">a= %1$d and b= %2$s and c= %3$d</string>
int a = 1024;
String b = "ASCII";
int c = 65536;
String y = getResources().getString(R.string.x1, a, b, c);

12. การอ้างอิงชื่อ id, string, layout, drawable แบบอ้างอิงด้วยตัวแปร
ตัวอย่างนี้ไม่ได้อยู่ใน project ที่ทดสอบนี้ แต่ค้นมาแล้วอยากเล่าเก็บไว้
บางครั้ง มีข้อมูลจำนวนมากใน string หรือ drawable
แล้วต้องการอ้างอิงแบบเขียน code ให้สั้น
ไม่ใช่มี 100 ภาพ ก็เขียน 100 บรรทัด ก็มีเทคนิค หรือ algorithm อยู่ครับ

int n = 1;
String tv ="R.id.x" + n;
int id = getResources().getIdentifier(tv, "id", getPackageName());
TextView v1 = (TextView) findViewById(id);
v1.setText("new value");
// R.layout.v1
// getResources().getIdentifier("v" + 1, "layout", getPackageName());
// R.string.v2
// getResources().getIdentifier("v" + 2, "string", getPackageName());
// R.drawable.v3
// getResources().getIdentifier("v" + 3, "drawable", getPackageName());

13. การติดตั้ง Android 7.1 บน VirtualBox
เริ่มต้นจากการ Download แฟ้ม .iso สำหรับติดตั้ง Android
http://www.android-x86.org/download

มีขั้นตอน ดังนี้

– Installation
– Create/Modify Partitions
แบบนี้เป็นปัญหา Other และ Other/Unknown
แบบนี้ผ่านด้วยดี Windows และ Windows 32 Bits
แบบนี้ผ่านด้วยดี Ubuntu และ Ubuntu 32 Bits
– use GPT = no
– in partition 1
– write in bootable and primary and Quit
– select SDA1 and format in ext4
– install GRUB and /system
– select [run Android-x86]
– Let’s go
– Setup as new
– Checking for update
– Get connected
– Don’t use any network for setup
– continue and Next
– name=android
– Google services > Next
– Anything else? > ALL SET
– Home screen
– chrome + accept policy
– no signin
– click O > Home screen
– click up arrow
– click Terminal emulator
– $ifconfig = ip address 192.168.1.2

</process>

<website_guide>
+ http://benzneststudios.com/../context-android-overview/
+ https://developer.android.com/../string-resource.html
+ https://stackoverflow.com/..using-getresources-in-non-activity-class
+ https://stackoverflow.com/..get-context-on-android
+ https://stackoverflow.com/..use-getsystemservice-in-a-non-activity
+ https://stackoverflow.com/..get-screen-dimensions-in-pixels
+ https://stackoverflow.com/..get-screen-width-and-height
+ https://stackoverflow.com/..getwindowmanager-by-another-java
+ https://www.youtube.com/watch?v=hjY06ZmYl8U
</website_guide>

หมายเหตุ 
ถ้าสนใจติดตามเนื้อหาในบล็อกนี้ สามารถ subscribe ด้วย email ที่อยู่ข้างขวา หรือ click here