บทที่ 1 - เริ่มต้นสร้าง App บน Facebook
หน้าแรก facebook app บทที่ 1 - เริ่มต้นสร้าง App บน Facebook
ไม่เกริ่นอะไรมากนะครับ ว่า Facebook คืออะไร ถ้ายังไม่เข้าใจว่ามันคืออะไร แนะนำให้ไปสมัคร http://www.facebook.com ครับ เป็น Social Network
สำหรับการสร้าง Application นั้น สิ่งที่เราต้องเข้าใจในบทเรียนก่อนที่จะสอนนี้คือ
1. คุณต้องเข้าใจในเรื่องของ การเขียน Web App ใช้ภาษาอะไรก็ได้ C#, VB , PHP อันนี้แล้วแต่คุณ แต่เราจะสอน Codeigniter ครับ ซึ่งเป็นชุด Framework ของ PHP ครับ ง่ายเร็ว คล่องตัว และเหมาะกับผู้ที่สนใจที่จะเรียนรู้อย่างรวดเร็ว และในเรื่องของ DB ด้วยครับ อ้อ ถ้ายังไม่รู้เรื่อง codeigniter หรือเป็น มือใหม่ php อยากหาอะไรทำง่าย ก็ ไปนี่เลยครับ http://www.jquerytips.com/category/codeigniter/ เวบตัวพ่อ ของผมเองด้วย ได้ ref มาเยอะ ช่วยโปรโมท ซักจึ๋ง
2. เข้าใจ พื้นฐานทั่วไปของ Facebook ไม่ว่าจะเป็น Function พื้นฐาน พวก Wall, Publish พวก ศัพท์เทคนิคทั่วๆไป ซึ่งถ้าคนใช้เป็นอยู่แล้วก็น่าจะเพียงพอแล้วครับ
เอาหละถ้าคุณผ่านจุดนี้ไปแล้วเรามาเริ่มกันเลยดีกว่าครับ
Facebook App คืออะไร?
ตอบง่ายๆ คือ โปรแกรม Third Party บน Facebook หรือ โปรแกรมเสริมบน Facebook ซึ่งทาง Facebook เองจะให้บริการด้าน API มาให้กับคุณเพื่อใช้ในการพัฒนา ต่อยอดใน Facebook ได้ครับ
เริ่มยังไง
1. คุณคิดก่อนเลยว่าคุณจะทำอะไร (เหมือนทำเวบข้างนอกแหละครับ)
2. วางโครงสร้างก่อนว่าอะไรเป็นไปได้หรือไม่ได้ เหมาะสมไหม ที่จะใช้ Facebook มาเป็น ตัวช่วย หรือขับเคลื่อนงานของคุณ ถ้าไม่แน่ใจเราแนะนำให้คุณอ่าน บทความใน http://www.facebookgoo.com ครับว่า เราจะเอา Facebook มาต่อยอดได้อย่างไร ในนั้นจะพูดถึงการใช้งาน Page ในเชิงธุรกิจครับ ซึ่งผมไม่ขออธิบาย
3. เตรียมตัวและใจให้พร้อม เพราะ ว่ามันค่อนข้างจุกจิกกับปัญหาเล็กๆน้อยๆหลายๆอย่างครับ
โอเคเรามาเริ่ม สร้าง APP กันเลย
1. ก่อนอื่นไปเริ่มการสร้าง APP ได้ที่ http://www.facebook.com/developers แล้วกด Set up new application
2. กรอกรายละเอียดให้เรียบร้อยทั้งชื่อ App ที่คุณจะตั้ง และ ยอมรับ Term ของเขา ดูรายละเอียดให้ดีนะครับ เพราะ ทาง Facebook ค่อนข้างเครียดกับ เรื่องของ Privacy เอามากเลยหละ
3. เมื่อคุณสร้างแล้วจะเข้ามาสู่หน้า Dash Board ของ App ของคุณครับ
4. ในจุดนี้ จะมีในเรื่องของ API Key, Secret ต่างๆ ครับ อย่าเปิดเผยให้คนอื่นรู้ครับโดยเฉพาะ Secret Key
5. ที่นี้เราจะเข้าไปเตรียมรายละเอียดข้างในกันนะครับผม โดยการกดที่ Edit Setting ครับ
5.1 Tab Basic จะมีในเรื่องของข้อมูลทั่วไป ของ Application ไม่ว่าจะเป็นชื่อ App ต่างๆ เราสามารถเปลี่ยนได้ครับ, Logo App, fav icon ของ app , ภาษาหลักของ App , Developer (นักพัฒนาใน App นั้น) สามารถเพิ่มได้ เอาไว้ใช้สำหรับเวลา อยู่ใน mode sandbox คน ที่เป็น developer จะเข้าได้ครับ, email ที่ใช้ติดต่อ แล้วก็ Bookmark page หรือ Policy ต่างๆ มีให้หมดแล้ว ใส่ url หลักของคุณ (server ของคุณลงไปครับ ถ้าไม่มีก็ยังไม่ต้องใส่)
5.2 หน้า Canvas - มันคืออะไร? ง่ายๆเลยครับ Canvas คือ พื้นที่ ที่จะให้ Page หน้าเวบของคุณที่พัฒนา มา Land ครับ หรือ เป็น ช่อง เจาะไว้สำหรับ เวบของคุณ ในหน้านี้ให้คุณ ใส่ url ของ canvas page หมายความว่า ถ้าคุณต้องการให้คน เข้าผ่านทาง facebook สมมติว่าืชื่อ mhapp คุณก็ใส่ไป ในช่อง canvas url ครับ ทีนี้ เวลาจะ test app คุณก็ test ที่ http://apps.facebook.com/mhapp ครับ
Canvas Setting ด้านล่างจะมี ให้ปรับโหมดของ Canvas หรือ slot ของ facebook app มาดูตัวแรก Render method มี 2 ตัว คือ Iframe , FBML อธิบายดังนี้ครับ ถ้าเป็น iframe mode ตัว Canvas จะสร้าง iframe และเรียก webpage ของคุณที่ต้องการมา Landing ส่วน FBML นั้น คุณจะต้องเขียน webpage ของคุณให้ใช้ภาษา FBML ครับ สำหรับผมแนะนำ iframe ครับ เพราะคุณสามารถใช้ jquery , css , เครื่องมือต่างๆที่คุณเคยชื่นชอบ ได้เลยครับ แต่ถ้าเป็น fbml จะค่อนข้าง strict กับ หน้า html ของคุณครับ อย่างน้อย ก็ใช้ jquery ไม่ได้ละกัน แต่ไม่ต้องห่วงครับ เดี๋ยวต่อไป ถ้าเราใช้ iframe mode เราก็ได้ใช้ fbml อยู่ดีแต่ เขาเรียกว่า xfbml นั่นเองเช่นพวก Share button , Bookmark button ครับ ได้ใช้แน่
5.3 หน้า Connect - อันนี้สำคัญมาก มันเป็น เป็นส่วนที่ใช้กำหนด ว่า ให้ map webpage ไหนที่จะมา Landing บน canvas ครับ ให้เราใส่ url ที่คุณพัฒนา ลงไปครับ ในช่อง connect url มี / ด้วยเน้อปิดท้าย เช่น http://www.xxx.com/facebook/ ที่นี้ ก็จะถือว่า ถ้าเราเรียก หน้าเวบ http://apps.facebook.com/mhapp มันก็จะไปเรียก
http://www.xxx.com/facebook/ มาโชว์ใน Canvas แล้วครับ ทีนี้ก็ลุย Code ได้เลย
5.4 หน้า Advance - อันนี้ผมพูดเฉพาะ Application type กับ Sandbox ครับ type นั้นให้เลือก web ครับ เพราะเราทำบนเวบ ส่วน sandbox mode คือ mode การพัฒนาครับ ผู้ที่เป็น developer เท่านั้นถึงจะเข้า app ได้ครับ เพื่อมา test ก่อน Production ครับผม
5.5 หน้า Migration - ผมแนะนำเลยให้ปรับ Canvas Session Parameter เป็น enable และ OAuth 2.0 for Canvas (beta) เป็น enable ไว้ครับ ( ไว้กันปัญหา ต้องสร้าง Profile tab ครับ)
เมื่อเสร็จเรียบร้อยแล้ว ทีนี้ก็จะเข้าสู่ กระบวนการเขียน Webpage แล้วครับ คุณลองสร้างหน้า index.html ดูครับบน server ของคุณที่ คุณกำหนด connect url ไว้ แล้วลองดูว่า มัน Hello world ได้หรือเปล่านะครับผม ( ใช้ index.html ธรรมดา นี่แหละก่อนเลยครับ) ถ้าได้แสดงว่า คุณเริ่มต้นถูกทางแล้วครับ!!!
ในบทต่อไปจะพูดถึงในเรื่องของ Authentication นะครับ หรือการเอาประโยชน์จาก การเชื่อมต่ิอ กับ facebook มาใช้ครับ
ขอบคุณครับ ผมปัญหาอะไร คุยกันได้ครับ หรือ http://www.facebook.com/moohooooo ครับ
อ้างอิง: http://www.thaiseoboard.com/index.php?topic=132269.0
ขึ้นไปด้านบน