หัดสร้าง Application บน Facebook ด้วย Heroku (Free Cloud Hosting) by

30
Sep
6

บทความนี้จริงๆ ก็เหมือนของเก่าเล่าใหม่ เพราะเคยเขียนไปนานมากแล้ว แต่ครั้งนี้ Facebook ได้ประกาศจับมือกับ Heroku ทำให้เรามี Cloud Hosting ได้ใช้กันฟรีๆ ไม่ต้องไปหา host เองให้วุ่นวาย (แต่เฉพาะการทำ app ง่ายๆ เล็กๆ น้อยๆ นะครับ ถ้าจะทำจริงจัง ควรไปเช่า host แบบจ่ายเงินจริงจังอยู่ดี) ซึ่งตัว Heroku นั้นมีข้อดีอย่างมากอย่างแรกคือมี https ในตัว ทำให้ผู้ที่ต้องการจะสร้าง application บน facebook แบบง่ายๆ ไม่ต้องไปวุ่นวายหา Host ใช้งาน และหาทางจดค่าโดเมนและค่า https certificate แบบรายปีให้วุ่นวาย ผมจึงขอเขียนเป็นบทความใหม่ดังนี้ครับ

องค์ประกอบจำเป็นสำหรับนำ application ขึ้น Facebook

รูปแสดง Architecture ของเกม facebook ทั่วๆ ไป

  • —เตรียม Hosting สำหรับเก็บไฟล์ รองรับ load การใช้งานทั่วไป (ในที่นี้ของเราคือ Heroku ครับ)
  • —สร้าง Application ใน Developer ของ Facebook
  • —SDK สำหรับติดต่อกับ Facebook ภาษาต่างๆ (หลักๆ ที่ใช้คือ PHP SDK และ Javascript SDK)
  • —ตัวเกม ตัว app ที่เราสร้างขึ้น

ขั้นตอนการสร้าง application บน facebook ด้วย Heroku

1. เข้าไปที่ www.facebook.com/developers (หากยังไม่ยืนยันตัวตนผ่าน SMS facebook จะไม่อนุญาตให้เราสร้าง app ใหม่)
2. คลิก Create New App ทางมุมขวาบน

New App

New App

3. จะปรากฏดังรูป คลิกที่ปุ่ม Get Started ในกรอบ Cloud Services

4. เลือก Heroku และคลิก Next (ในอนาคต Facebook อาจมี Cloud เจ้าอื่นให้เลือกนอกจาก Heroku เช่นกัน)

5. เลือกประเภท application ที่เราจะสร้าง (PHP, Pyhton, Ruby,Node.js) ซึ่งในบทความนี้ให้เลือกเป็น PHP และอีเมล์ที่เราจะใช้ในการสมัคร account Heroku (แยกต่างหากออกจาก Facebook Account) และคลิก Create

6. ตอนนี้ทาง Heroku จะสร้างหน้า Example Application ขึ้นมาให้โดยอัตโนมัติ ให้คลิก Allow App เพิ่อดำเนินการต่อไป

7. ปรากฏหน้า Example Application ที่เสร็จแล้วพร้อมใช้งานของ Heroku ขึ้นมา

8. คลิก link confirm การสมัครสมาชิกของ Heroku ที่ส่งเข้าอีเมล์ของคุณ

9. ตั้งรหัสผ่านเพื่อใช้งาน Heroku

10. Download Heroku Toolbelt ที่ http://devcenter.heroku.com/articles/facebook (แต่ละ OS จะมีขั้นตอนการ install ไม่เหมือนกัน)

11. ขั้นต่อไปคือเปิด Command Prompt ขึ้นมาสำหรับ Windows ซึ่งถ้าเป็น Linux หรือ Mac ก็เปิด Terminal/Shell ขึ้นมาได้เลยครับ แล้วพิมพ์ heroku login และกรอกข้อมูลอีเมล์และรหัสผ่านไป เสร็จแล้วตัว heroku toolbelt จะสร้างและ upload public key ไปให้บน heroku server โดยอัตโนมัติ

12. Copy private key และ public key ที่ถูกสร้างขึ้นอัตโนมัติชื่อ id_rsa และ id_rsa.pub ในข้อ 11 จาก C:\Users\User ของคุณ\.ssh ไปยัง C:\Program Files\Git\.ssh (ต้องสั่ง Show hidden file เสียก่อน)

13. ข้อเสีย(หรือข้อดี?) อย่างหนึ่งของ heroku คือการใช้ upload file ใดๆ ขึ้น server ของ heroku จะไม่มี FTP หรือ ssh ให้ใช้งานเลยแม้แต่น้อย ต้อง push code ผ่าน Git ของ heroku เท่านั้น (Git คือ software version control ประเภทหนึ่ง เทียบได้กับ Subversion หรือ SVN) โดยก่อนอื่นต้อง git clone ไฟล์ที่ตัว heroku สร้างให้อัตโนมัติมาลงเครื่องของเราก่อน ซึ่งให้แก้ furious-robot-218 เป็นชื่อ project ของเราที่ Heroku ตั้งชื่อให้ตอนสร้างแทน

14. แก้ไขไฟล์ index.php โดยทดลองเพิ่มข้อความอะไรก็ได้เพื่อทดสอบการแก้ไขไฟล์ให้แสดงผลต่างไปจากเดิมที่เห็นก่อนหน้านี้ เช่นพิมพ์ข้อความ Welcome to my new app เพิ่มเข้าไป

15. สั่ง git commit -am “comment ที่ใช้เตือนความจำคุณเอง”

16. สั่ง git push heroku หากสำเร็จจะปรากฏข้อความในลักษณะดังภาพ หากล้มเหลวและขึ้นว่า Permission denied ให้ตรวจสอบขั้นตอนที่ 11-12 ดีๆ อีกครั้ง

17. เมื่อสำเร็จและกลับไปดูที่ www.facebook.com/developers อีกครั้งแล้วคลิกที่ app ที่เราพึ่งสร้างจะพบว่าที่ตัว facebook นั้นกรอก URL ไปยัง Heroku ให้เองแล้วอัตโนมัติ

18. Heroku นั้นจะสร้าง application บน facebook ในรูปแบบ Website ให้อัตโนมัติ (ตัวเว็บอยู่นอกกรอบ facebook แค่ขอดึงใช้งานข้อมูล friend ต่างๆ เฉยๆ) หากเราต้องการให้เป็น application ที่อยู่ในกรอบ facebook (เรียกว่า Canvas app) ให้ copy ข้อความใน Site URL มาใส่ยังช่อง App on Facebook ในส่วน Secure Canvas URL เอาเองนะครับ (ส่วนช่อง Canvas URL ก็ให้กรอกเหมือนกัน แค่เปลี่ยนจาก https เป็น http เท่านั้น) หรือหากต้องการสร้าง application ให้ tab บน page ของคุณก็ไปกรอกที่ช่อง Page Tab แทนครับ

ขอให้ทุกคนสนุกกับการสร้าง App บน facebook นะครับ :)

Enjoy this article?

Consider subscribing to our RSS feed!

6 ความเห็น

  1. katopz
    23:19 on September 30th, 2011

    “การใช้ upload file ใดๆ ขึ้น server ของ heroku จะไม่มี FTP หรือ ssh ให้ใช้งานเลยแม้แต่น้อย ต้อง commit code ผ่าน Git…” หมายถึงต้อง “push” ผ่าน git มังคับเพราะ commit มันยังไม่ไป? ปล. รู้สึกว่าจะฟรี 750 hrs + DB 5MB นะครับ (กะจะเอามาทำ proxy ซะหน่อย แหะๆ)

  2. heha
    10:53 on October 2nd, 2011

    โอ ขอบคุณครับ :D

  3. ลิง
    21:06 on October 5th, 2011

    https://www.facebook.com/SocialServer

    อันนี้เขาทำ APP สำหรับหลอก FB ครับ ว่าเป็น SSL กล่าวคือมันจะสร้าง iframe (ที่เป็น SSL) ไปเรียกเวบ เราอีกที ที่ไม่ใช่ SSL ฉะนั้น FB จะเห็นว่าใช้ได้ครับ :) ลองใช้ดู

  4. ชัย
    23:33 on March 24th, 2013

    ผมไม่ได้ไฟล์ index.php มาอะครับ ขั้นตอนการ

    clone git@heroku.com:??????.git -o heroku

  5. vps
    16:35 on September 18th, 2013

    โอ ขอบคุณฝุดๆ ครับ

ใส่ความเห็น

RSS feed for comments on this post

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน