ทำความรู้จัก Express.js หายไปนานกับบทความ เพราะไม่ค่อยมีเวลาเขียนบทความสักเท่าไร ช่วงนี้ผมกำลังศึกษา MEAN Stack หรือการจัดชุดใหม่ทางด้านเทคโนโลยีการทำเว็บ จากแบบเดิมคือ LAMP stack โดย L = Linux, A = Apache, M = MySQL, P = Perl, PHP, Python ส่วนของใหม่คือ MEAN อันที่จริงก็ไม่ได้ถือว่าใหม่ซะเท่าไรเพราะมานานแล้วพอสมควร แต่ยังใหม่สำหรับผม เพราะยังไม่ว่างได้ลองหัดสักที โดย M = MongoDB เป็นฐานข้อมูลแบบ Document NoSQL การดึงค่าหรือส่งค่าจะอยู่ในรูปแบบคล้ายหรือเหมือนกับ JSON เลย จึงทำให้เป็นที่นิยมในการเก็บข้อมูลเพื่อนำไปใช้ในการพัฒนา Restful API ต่อไป E = Express.js ซึ่งก็จะเป็นตัวที่จะเขียนวิธีการ install และการใช้งานเบื้องต้น มันจะเป็น minimalist web framework for Node.js หลายคนบอกเป็น web framework แต่ความจริงต้องที่คำว่า Minimal ด้วยเพราะตัวมันเล็กมากจริงๆ มีโครงแบบ basic concept ไว้เท่านั้นRead More →

สอน ANGULARJS – การใช้งาน DIRECTIVE และ EXPRESSIONS เบื้องต้น

สอน AngularJS – การใช้งาน Directive และ Expressions เบื้องต้น ใน AngularJS นั้นจุดเด่นๆของมันก็คือ Directive นั้นเองเป็นวิธีการให้ในการใช้งาน HTML ที่ใช้รูปแบบการทำงานตามหลักการของ Data-Oriented ซึ่งจะแตกต่าง javascript ทั่วไปที่จะทำงานในรูปแบบ control flow ซึ่งต้องเขียนโค้ดหลาย step กว่าจะจบการทำงาน Directive ใน AngularJS นั้นจะอาศัย HTML compiler ($compile) ในการประมวลผลซึ่งรูปแบบการใช้งาน Directive สามารถแบ่งวิธีการเขียนโค้ดได้ 3 แบบหลักๆคือ <input ng-model=”foo”> จะเป็นการแทรก tag ng ของ AngularJS ใน tag html ทั่วไปซึ่งเป็นวิธีที่ได้รับความนิยมและง่ายต่อการใช้งาน <input data-ng-model=”foo”> รูปแบบนี้จะคล้ายกับรูปแบบที่ 1 เพียงแต่มีคำว่า data- อยู่ด้านหน้าเท่านั้นเอง <ng-view></ng-view> จะเป็นรูปแบบของ tag AngularJS เลยซึ่งวิธีนี้ดูเหมือนจะสั้นและง่ายแต่ข้อเสียของมันคือถ้า web app ของเรานั้นไม่สามารถโหลด AngularJS ได้มันก็จะกลาย tag ที่ html ไม่รู้จักแล้วจะกลายเป็นข้อมูล text ธรรมดาแล้ว user ที่ใช้งานก็จะเห็นนั้นเอง Directive ใน AngularJS นั้นแบ่งออกเป็นหลาย tag ตามรูปแบบการทำงานและใช้งานซึ่งก็จะมีตัวอย่างเบื่องต้นดังนี้ DOM Manipulation ng-show ng-hide ng-repeat ng-view Data Binding ng-model ng-init ng-bind Modules/Controller ng-controller ng-app Event ng-click ng-keypress ซึ่งด้านบนนี้เป็นแค่ตัวอย่างบางส่วนเท่านั้นยังมีคำสั่งอีกมากมายให้ใช้กันใน AngularJS ตอนไปก็จะเป็น Expressions  โดยเจ้า Expressions ใน AngularJS นั้นจะใช้ {{ เพื่อเปิด Expressions และ }}Read More →

แนะนำ Angularjs เบื้องต้น Angularjs เป็น Javascript MVC Framework อีกชนิดหนึ่ง โดยหลักๆแล้วเป็น Framework เหมาะสำหรับ SPAs (Single Page Applications) ซึ่งถูกพัฒนาขึ้นจาก Google นั้นเอง โดยเจ้า Angularjs นี้จะถูกพัฒนาจาก วิศวกรของ Google เอง และค่อย support ตอบปัญหาที่เหล่า Developer ที่นำไปใช้งานและเกิดปัญหาหรือมีข้อสงสัยนั้นเอง ข้อดี ของ Angularjs นั้นจะทำให้การทำงาน front end ของ web application นั้นพัฒนาง่ายขึ้นเพราะด้วย MVC หรือ MVVM ทำให้เราแยกส่วนในการพัฒนาได้ง่าย อีกทั้งเจ้า Angularjs นี้ยังเป็น MVC แบบ model orientation ซึ่งเมื่อข้อมูลใน model มีการเปลี่ยนแปลง จะทำให้ข้อมูลในส่วนของ View เปลี่ยนแปลงไปด้วยทำให้ง่ายลดขั้นตอนในการพัฒนา และอีกอย่างที่ทำให้หลายคนคุ้นเคยก็คือ template ในส่วน View นั้นจะใช้รูปแบบ {{}} ซึ่ง template engine หลายๆตัวก็ใช้รูปแบบนี้นั้นเอง เรามาดูกันดีกว่าว่าจะเริ่มใช้งานเจ้า Angularjs ยังไงขั้นแรกให้ทำการ Download Library ตัวนี้จะ website angularjs กันก่อน เมื่อโหลดเสร็จจะได้ไฟล์ javascript ซึ่งจะคล้ายๆกับ jquery นั้นเอง เมื่อได้ไฟล์เรียบร้อยแล้วก็เอาไฟล์ไปไว้ในที่ตัวต้องการ ส่วนของผมจะเก็บใน folder js จากนั้นผมทำการสร้างไฟล์ ang01.html แล้วทำการเขียนโค้ดเริ่มต้นนั้นนี้ [sourcecode language=”html”] Thaicoding – Angular [/sourcecode] สังเกตว่าตรง tag html จะมี attibute ng-app อยู่ ซึ่งจะเป็นการบอก Angularjs ว่า tagRead More →

Library Google Map ทีใช้กับ CodeIgniter

Library Google Map ทีใช้กับ CodeIgniter หากผู้ถึง library javascript ที่นิยมเกี่ยวกับการแสดงแผนที่แล้วนั้นคงนึกถึง google map แต่ทว่ามันต้องใช้ javascript เพื่อเรียกใช้งานแสดงผล แต่ตำแหน่งสถานที่ต่างนั้นกับเก็บอยู่ใน Datatabase ซึ่งจะใช้ภาษาพวก server side ในการดึงข้อมูล ทำให้ต้องมีการแปลงข้อมูลไปมาระหว่าง 2 ภาษาที่เราใช้งานอยู่ ซึ่งวันนี้ผมจะมาบอกวิธีใช้งาน CodeIgniter กับ Libarary ตัวนึกที่มีคนพัฒนาไว้ให้แล้วในการเชื่อมกับ Libary Google Map เพื่อแสดงตำแหน่งสถานที่ต่างๆได้ง่ายขึ้นนั้นเองครับ ซึ่งเจ้า API ตัวนี้นั้นถูกพัฒนาโดย BIOSTALL ขั้นตอนแรกเราก็เข้าไปดาวโหลดได้ที่ biostall.com หลังจากที่ดาวโหลดเสร็จแล้วให้ทำการแตกไฟล์ จะได้ดังรูปRead More →

Instantiating Built-type ใน JavaScript ในการเขียน javascript บางครั้งผมก็สงสัยเหมือนกัน โดยเฉพาะพวก library ยอดนิยมอย่าง Jquery ที่ทำไม () เยอะจัง แถมยังจะมี function ซ้อนอยู่ด้านในอีก แล้ววันนี้ผมก็ได้อ่านหนังสือเกี่ยวกับการเขียน javascript แบบ oop หรือ Object oriented programming ก็เลยรู้ว่ามันมีประเภทการเก็บข้อมูลหรือประเภทตัวแปรที่ชื่อว่า Instantiating Built-type ซึ่งมีอยู่ 6 ชนิดคือRead More →

แนะนำเครื่องมือการพัฒนาเกมส์ cross platform ด้วย Cocos Code IDE หลังจากการมาของอุปกรณ์พวก smart phone ที่ออกมากันหลายยี่ห้อหลากหลายระบบทำให้ วงการเกมส์เติบโตไปพร้อมกันอย่างรวดเร็ว แต่ปัญหาของการพัฒนาเกมส์นั้นก็ตามมาว่าจะทำยังไงที่จะทำให้เกมส์ที่พัฒนาขึ้นสามารถ รันได้ในทุกระบบที่ได้รับความนิยมโดยไม่เสียเวลาในการพัฒนาซ้ำ หากต้องการที่จะนำเกมส์ไปรันอีก ระบบหนึ่ง ซึ่งผมอยากที่จะพัฒนาเกมส์บนมือถือ android แต่ด้วยตัว sdk หรือ frame work ที่เป็นตัว java นั้นผมลองหัดเขียนดูก็ยังเกิดความรู้สึกว่ามันไม่ work เลยไปเจอ ตัว cocos2d-x ซึ่งเป็น open source game engine ความสามารถของมันคือการ cross platform โดยใช้ภาษาหลัก 3 ภาษาคือ c++, Lua, javascript ที่ทำการ  build เป็น native code แล้วทำให้สามารถรันได้ทั้ง ios และ android รวมไปถึง window phone ไม่น่าเชื่อว่าเจ้า cocos2d-x นี้เป็น open source game engine ที่เริ่มพัฒนามาจากชาวจีน ทำให้เราเห็นว่า วิทยาการของจีนก็ไปไกลแล้วเหมือนกัน แต่เจ้า cocos2d นี้ไม่ใช่แค่มันเขียนด้วย c++ แล้ว build เป็น native code คงทำให้เหมือน game engine ที่ open source ทั่วๆไป สิ่งที่ทำให้ผมรู้สึกชอบมันก็คือตัว product 2 อันที่ตอนนี้ยังใช้งานฟรีอยู่คือ Cocos Code IDE กับ Cocos Studio ซึ่งเจ้า Code Ide ตัวแรกนั้นเป็นเครื่องมือสำหรับ game programmer ในการพัฒนา หากใครที่เคยพัฒนา app หรือ game บน android แล้วละก็สิ่งหนึ่งที่น่าเบื่อคือตัว emulator android ที่ต้องRead More →

sencha

เริ่มต้น Sencha Touch 2 ในการพัฒนา Web Mobile app โดย HTML5 ในปัจจุบันนั้นปฎิเสธไม่ได้ว่า app บน smart phone หรือมือถือสมัยรวมไปถึงอุปกรณ์ mobile นั้นได้รับความนิยมมาก แต่ในการพัฒนาบนหลาย platform ของแต่ละอุปกรณ์นั้นยังลำบากอยู่ วิธีที่เป็นอีก 1 ทางเลือกคือการใช้ html5 ในการพัฒนาเพื่อเป็นในรูปแบบของ web หรือจะทำการแปลงจาก html 5 ในการเป็น application โดยใช้ phone gap โดย framework ในการพัฒนาโดยใช้ html 5 ที่ได้รับความนิยมนั้นก็มีชื่อของ sencha touch ติดโผขึ้นมา โดยในรุ่นปัจจุบันนั้นเป็นเวอร์ชั่น 2 แล้วซึ่งผมลองศึกษาในการพัฒนา application บน android ดูปัญหาส่วนใหญ่ ในการพัฒนา android application นั้นอยู่ที่การเขียน ui ขึ้นมานั้นเอง แต่หากใช้ html 5 นั้นปัญหาของ UI จะลดลงไปเพราะมันง่ายขึ้นมากแต่ด้านความเร็วในการประมวลผลนั้นจะช้าลง เพราะฉะนั้นการใช้ html5 นั้นจะสามารถตอบโจทย์ application ที่ไม่ต้องการใช้งานประมวลผลที่ซัฐซ้อนเท่าไรได้ และในบทความนี้ผมจะเขียนถึงการเริ่มต้นในการเรียนรู้ sencha touch 2 ครับ Sencha touch เราสามารถ Download จากทางเว็บไซต์ Sencha Sencha Touch Sencha Command โดยที่ Sencha Touch จะต้องกรอก email เพื่อให้ระบบตอบเมล์พร้อมลิงค์ Download ไปให้นะครับ หลังจากที่ดาวโหลด Sencha Touch แล้วก็ให้ทำการแตกไฟล์นำไปไว้บน web server โดยของผมเป็น apache จะเอาไปวางไว้ที่ folder www หรือถ้าเป็น iis serverRead More →

node.js

เริ่มเบื้องต้นกับ Node.js Node.js ชื่อนี้ในช่วงหลังๆมักจะได้ยินกันบ่อยๆ node.js นั้นเป็นสิ่งใหม่ที่ถ้า google นั้นคิดค้นซึ่งมันจะทำงานได้นี้ใน chrome นั้นเองซึ่งประโยชน์ของ node.js นั้นส่วนมากเว็บหรือระบบใหญ่จะนำมาประยุกต์ใช้กับ application พวก real time ที่จะมีการตอบสนองทันที ที่มีเหตุการณ์เกิดขึ้น หรือที่เรียกว่า event-driven ซึ่งเจ้า node.js นั้นจะรันโดยอาศัย V8 JavaScript Engine เป็นตัวหลักและการพัฒนา node.js นั้นจะใช้ javascript แบบ server-side มันคงแปลกดีที่ภาษาที่เคยเป็น client – side มานาน อยู่ๆสามารถมาเป็น server – side เอาละที่นี้เรามาลองกันเลย สำหรับผมแล้ว node.js ที่ผมลองนั้นจะเป็น version window เพราะผมไม่ได้ใช้ os ตระกูลอื่นซะเท่าไรซึ่งมันก็ support หลาย os นั้นแหละ เริ่มแรกก็ไป download ตัว install สำหรับ window ได้ที่ node.js เมื่อโหลดเสร็จก็ทำการติดตั้งได้เลยRead More →

สมัยนี้การเดินทางหรือข้อมูลบน internet เกี่ยวกับสถานทีหรือแผนการเดินทางส่วนใหญ่แล้วจะใช้โปรแกรมยอดนิยมอย่าง Google Map นั้นเองวันนี้จะมาแสดงตัวอย่างการสร้าง marker บน google map ซึ่งเป็นระดับพื้นฐานที่ไม่ได้มีการใช้ google map api อะไรเลย โดยเราจะดึงค่าพิกัดลัดติจูดกับลองติจูดจาก php โดยผ่าน javascript ในลักษณะการดึงและรับส่งข้อมูลแบบ ajax นั้นเอง โดยตัวอย่างนี้จะประกอบด้วยไฟล์ 2 ไฟล์คือไฟล์ html ที่ภายในประกอบด้วย html และ javascript ส่วนอีกไฟล์จะเป็นไฟล์ php ที่จะคืนค่าพิกัดมาให้อยู่ในรูปแบบของ xml จากนั้นเมื่อดึงค่าผ่าน ajax แล้วจะทำการส่งค่าพิกัดไปให้ google map เพื่อแสดงบนแผนที่นั้นเอง ขั้นแรกเรามาสร้างไฟล์ html ที่ใช้ ajax ในการดึงข้อมูลพิกัดและแสดงแผนที่อีกด้วย โดยให้สร้างไฟล์ที่ชื่อว่า map.html โดยมีโค้ดดังนี้Read More →

ณ ตอนนี้เทคโนโลยี web เดินมาไกลมาซึ่งตอนนี้ html สามารถทำได้หลายอย่างแต่สิ่งที่พัฒนามาพร้อมกันคือ javascript ซึ่งหากการพัฒนา javascript ที่มีการทำงานซับซ้อนมากนั้นสิ่งที่จำเป็นก็คือการทดสอบความถูกต้อง และในแต่ละภาษานั้นก็จะมีวิธีและ tool ในการทดสอบที่ต่างกัน และวันนี้ผมขอแนะนำเครื่องมือในการทดสอบ javascript ที่มีชื่อว่า QUnit ซึ่งผมว่าค่อยข้าง config เริ่มการใช้งานอย่างเลยที่เดียวขั้นแรกก็คือให้เริ่มทำการดาวโหลดไฟล์จากเว็บ http://qunitjs.com/ ซึ่งจะแบ่งออกเป็น 2 ไฟล์คือ  qunit-1.9.0.js และ qunit-1.9.0.css ซึ่ง 1.9.0 นี้เป็นเลข version ซึ่งในอนาคตมันจะเปลี่ยนแน่นอนนะครับRead More →