Facebook Query Language (FQL) by

31
May
0

Facebook Query Language หรือ FQL เป็นภาษา query ที่ใช้ในการคัดกรองข้อมูลหรือดึงข้อมูลที่เราต้องการจาก Facebook โดยตรง ซึ่งการเขียนจะมีลักษณะคล้ายกับภาษา SQL นั่นคือมีรูปแบบเป็น

SELECT (field) FROM (table) WHERE (condition)

และเราสามารถใช้ operator AND, OR, NOT ได้อีกด้วย แต่สิ่งที่ FQL แตกต่างจาก SQL ก็คือ FQL จะไม่อนุญาตให้เราทำการ join table กันได้ ซึ่งถ้าเราต้องการจะใช้ข้อมูลที่มากกว่า 1 ตาราง เราจะใช้ IN เพื่อทำการเชื่อมข้อมูลระหว่างตาราง และ ระหว่าง 2 ตารางที่จะเชื่อมข้อมูลกัน จะต้องมี field ที่เก็บข้อมูลเหมือนกันอยู่ ซึ่งจะเรียก field นี้ว่าเป็น indexable

หลายคนที่อาจจะใช้ Graph API อาจจะสงสัยว่าในเมื่อเรามี Graph API อยู่แล้ว ซึ่งก็สามารถใช้ในการดึงข้อมูลมาใช้ได้เหมือนกัน แล้วทำไมต้องใช้ FQL อีก นั้นก็เป็นเพราะว่า Graph API ไม่สามารถที่จะดึงข้อมูลเป็นชุดๆได้ เช่นหากเราต้องข้อมูลเป็น username, user_id, gender และ birthday ของเพื่อน ถ้าเราใช้ Graph API เราจำเป็นต้องได้รายชื่อเพื่อนทั้งหมดของเรามาก่อน หลังจากนั้นก็จะได้ user_id กับ username มา แล้วจึงใช้ข้อมูลที่ได้มาไปหาข้อมูล gender และ birthday ของเพื่อนอีกที ซึ่งจะเห็นว่าต้องทำหลายขั้นตอนมาก แต่ถ้าเราใช้ FQL สามารถทำได้โดยเขียนภาษา query ตามนี้

SELECT username, uid, sex, birthday FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

มาถึงตรงจุดนี้ อาจมีหลายคนสงสัยว่า แล้วเราจะรู้ได้อย่างไรว่าฐานข้อมูลมีตารางอะไรบ้าง และแต่ละตารางมี field อะไรให้ใช้บ้าง เราสามารถเข้าไปดูได้อ่าน Document และ Reference ได้ที่ https://developers.facebook.com/docs/reference/fql/ ซึ่งลิ้งค์นี้จะบอกข้อมูลเกี่ยวกับตารางและ field เอาไว้ชัดเจน ว่าทาง facebook อนุญาตให้เราสามารถใช้ข้อมูลส่วนไหนได้บ้าง และทาง Facebook ยังมี tool ที่เอาไว้ให้เราใช้ทดสอบ query ที่เราเขียนขึ้นมาได้อีกด้วย ผ่านทาง Graph API Explorer https://developers.facebook.com/tools/explorer?method=GET&path=100001055377057 ซึ่งเมื่อกดลิ้งค์เข้ามาแล้วจะเจอเพจหน้าตาแบบนี้ครับ

fql_tutorial2

หลังจากนั้นตรงที่เป็นลิ้งค์ https://graph.facebook.com/ ให้พิมพ์เพิ่มหลังเครื่องหมาย “/” ไปว่า “fql?q=” แล้วตามด้วย query ที่เราเขียนขึ้นมา
แล้วกด submit เราก็จะได้ผลลัพธ์จากการ query แสดงผลที่ด้านล่างนั้นเอง ทั้งนี้ทั้งนั้น การที่เราจะดึงข้อมูลต่างๆจากตารางมาได้ เราจำเป็นต้องทำการขอ Permissions ต่างๆด้วย ซึ่งข้อมูลในแต่ละ Field จะมีการระบุเอาไว้อยู่แล้วว่าต้องมีการใช้ Permissions ใดบ้าง ดังนั้น ถ้าคิดว่าเขียน query ได้ถูกต้องแน่นอนแล้ว แต่ว่าผลลัพธ์ไม่ขึ้น ให้ลองตรวจสอบดูดีๆนะครับ ว่าได้ทำการขอ permissions ไปหรือเปล่า

หมดเพียงเท่านี้แล้วครับ เรื่องของ Facebook Query Language สำหรับคนที่เคยเขียน SQL มาแล้ว น่าจะฝึกฝนได้ไม่ยากนะครับ ส่วนคนที่ไม่เคยเขียน SQL มาก่อนก็ไม่ต้องน้อยใจไปครับ ของแบบนี้ต้องค่อยๆศึกษาไปเรื่อยๆ เดี๋ยวเราก็เขียนได้ครับ ^^

remove all child in MovieClip by

31
May
1

โดยทั่วไป การ addChild และการ removeChild จะต้องระบุตัวที่ใส่ไปในตอนเอาออกด้วย

var objectMC:MovieClip = new MovieClip();
objectMC.addChild(obj);


objectMC.removeChild(obj);

ซึ่งวิธีนี้อาจจะมีบางจุดที่เราลืมเอาออกได้


วิธีที่ในวันนี้จะเอามาให้ดู คือการ removeChild ออกหมดเลยทีเดียว
เหมาะสำหรับการรีเซ็ตใหม่

while(objectMC.numChildren){
objectMC.removeChildAt(0);
}

พอโค้ดนี้ถูกเรียก เจ้าตัว objectMC ก็จะเป็น MovieClip เปล่าๆ ไม่มีลูกอยู่ข้างในเลย

ทำ animation ง่ายๆด้วย flixel by

30
May
0

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

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

ซึ่งเกมของเราเนี่ยถ้ามีแต่ภาพนิ่งมันจะน่าเบื่อเพราะฉะนั้นแล้วจะขอพูดถึงการทำ animation อย่างง่ายของflixel ดีกว่า

ในส่วนนี้ สิ่งที่เราต้องการคือ ภาพที่เป็น sprite แล้ว sprite คืออะไรหละ มันคือ ภาพที่เป็น frame ท่าทางที่ต่อๆกัน

rockman
ดังตัวอย่างแบบนี้นี่เอง จะเห็นว่า rockman ในท่าทางต่างๆเช่นเดินก็จะมีหลายๆเฟรมต่อกัน

ในเมื่อเรามีทุกอย่างที่ต้องการแล้วเรามาเริ่มทำกันเลยดีกว่า

ให้เปิดโปรแกรม flashdevelop ขึ้นมาแล้วทำการ  new project ให้เลือก as3 Project นะครับ

ตั้งชื่อโปรเจคตามใจชอบเลย หลังจากนั้น ให้เลือก properties ในแถบของ project แล้วเลือก tab classpaths ให้ทำการaddเพิ่มเข้าไปโดยเลือก directory ของflixel ที่เราทำการ download เข้ามาน

untitled

เมื่อทำการแอดเสร็จแล้ว ให้เราเปิด ไฟล์ main แล้วแก้ตาม example

โดยในไฟล์ตัวอย่าง จะมีการ class ทั้งหมด3 classดังนี้

1คือ main ไว้ใช้เรียกตัวเกม กำหนดขนาดของตัวเกม

2คือ PlayState เป็นสิ่งที่ main เรียกว่าให้ไปเล่นที่ state ไหนของเกมซึ่งเราสามารถกำหนดเองได้ซึ่งในนี้จะมีการadd player เข้ามาในเกมนั่นเอง

3คือ Player เป็นส่วนของ ตัวละครที่เราจะนำมาทำ animation นั่นเอง

ในส่วนของตัวอย่างนั้นเราจะสามารถควบคุมเดินซ้ายขวาได้เท่านั้น โดยจะมีโค๊ดส่วนในการดักคีบอดและเล่นภาพ sprite นั่นเอง

โดยขั้นแรกจะต้องทำการ loadGraphic(PlayerBitmap, true, true, 50, 97.25); มาก่อนโดยให้ใส่class ของรูปspriteนั่นเองและกำหนดความกว้างความยาวของรูปเล็กๆเข้าไปด้วย

ขั้นที่2 ทำการ

addAnimation(“running”, [14, 13, 12, 13,10], 10);

addAnimation(“stand”, [0]);

addAnimation(“shoot”, [5]);

addAnimation(“lose”, [6, 7], 1);

ต่างๆโดยที่มีชื่อของ animation นั่นเป็น string และarray ของรูป ที่เราจะใช้ใน animation นั้นๆ โดยที่บนสุดซ้ายสุดจะเริ่มที่0 ไล่มาทางขวาเรื่อยๆขึ้นบรรทัดใหม่ก็นับต่อจากเดิม ส่วนต่อมาคือ framerate ต้องการให้เล่นไวขนาดไหนก็ลอง set ค่ากันดู

ต่อมาคือการเขียน function update ในส่วนนี้เหมือนกับ enterframe ใน flash เลยคือจะเข้ามารันในนี้ตลอดโดยในส่วนโค๊ดตัวอย่างจะมีการดัก event ของ keyboard ว่ามีการกดลูกศรหรือไม่

แล้วถ้ากดลูกศร ก็จะมีส่วนของการ play animation นั่นเอง

เท่านี้เราก็จะสามารถ สร้าง animation ง่ายๆได้แล้ว

และเมื่อเรามาถึงขั้นนี้ เราก็จะสามารถเขียนเกม 2d อย่างง่ายได้แล้ว ^^

ขยับท่าทางตัวการ์ตูน ด้วย After Effect by

30
May
1

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

e0b8a3e0b8b9e0b89b13

ไปที่ Import แล้วก็ Import File นะครับ

e0b8a3e0b8b9e0b89b26

จากนั้นเราก็เลือกไฟล์ที่เราจะใช้

e0b8a3e0b8b9e0b89b31

ทีนี้งานเราก็จะเข้าไปในพื้นที่ทำงานได้แล้วนะครับ

e0b8a3e0b8b9e0b89b41

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

e0b8a3e0b8b9e0b89b52

เสร็จแล้วครับ ง่ายมากเลยใช้มั้ยหละครับลองเอาไปทำกันดูได้ที่บ้านเลยนะ ^_^

Socket!!! by

29
May
0

วันนี้เรามาว่ากันด้วยเรื่องของ Socket กันดีกว่าคับ
เราจะใช้ nodejs กันนะครับ!!

วิธี install เปิด cmd มา พิม npm install nodejs แล้วรอ รอ …
เสร็จแล้วคับ ลดเรียบร้อยเราก็ไปดูวิธีการใช้กันนะครับ

เราก็เขียนไฟล์ .js ไว้ที่ไหนก็ได้นะครับ ตัวอย่าง ไฟล์อยู่ใน C:\\server.js
เราก็ เปิด cmd ขึ้นมา แล้วก้อ พิม cd.. จนมันเหลือแค่ C:\> นะคับ
(ถ้าไฟล์อยู่ที่อื่นก็เข้าไปจนมันชี้ที่ที่ไฟล์อยู่นะแหละครับ)

เวลาจะเรียก run code ก้อพิม node server.js
เท่านี้ก็จบวิธีการ run code นะครับ

ต่อไปเราจะมาเริ่มเขียน code กันนะครับ
โดยเราจะใช้ socket.io ซึ่งเป็น interface ของ nodejs ที่มีคนเขียนไว้ก่อนอยู่แล้วครับ
ถามว่าทำไมถึงใช้ตัวนี้ ก็ต้องตอบว่า ก่อนหน้านี้ผมได้เขียนเองสดๆ โดยที่ไม่ใช้ socket.io
ตอนเขียนบนเครื่องตัวเองก็ไม่มีปัญหาอะไรครับ แต่พออัพขึ้น server เจอปัญหา crossdomain ครับ แก้ยังไงก็แก้ไม่หาย(ไม่รุว่าผมแก้ไม่เป็นหรือยังไง) ไปหาวิธีแก้ในอากู๋ก็ยังไม่เจอวิธีแก้ที่ได้ผมแต่อย่างใด แล้วที่ socket.io มันไม่เจอปัญหา crossdomain เหมือนกันก็เพราะว่า มันส่งข้อมูลกันโดยใช้ javascript ไงครับ อ่ะเรามาต่อกันดีกว่า

วิธีลง socket.io
1. เปิด cmd
2. พิม npm install socket.io
เรียบร้อยครับ ลง socket.io เสร็จแล้วครับ (ง่ายดีแท้)

เรามาเริ่มจากการเขียนห้องแชทง่ายกันดีกว่าครับ

script ใน client.js
var socket = io.connect(‘localhost’);

socket.emit(‘chat’, {
message: //อะไรซักอย่าง (ข้อความ)
});

socket.on(‘messageRecieve’, function(data){
// เอา data ไปพิมพ์ออก output เองนะ
});

script ใน server.js
var io = require(‘socket.io’).listen(port); //ใส่เป็นตัวเลข port

io.sockets.on( ‘connection’, function( socket ){
socket.on(‘chat’, function(data){
io.sockets.boardcast(‘messageRecieve’, {
message: data.message
});
});
});

จบข่าว!!!