Home / Developer  / Angularjs  / Ionic Framework กับการเชื่อมต่อ Facebook Connect

Ionic Framework กับการเชื่อมต่อ Facebook Connect

ตัวอย่างในบทเรียนนี้จะเป็นการใช้ Facebook SDK สำหรับสร้างปุ่ม Facebook Login ร่วมกับ ionic framework ด้วย AngularJS เบื้องต้นสำหรับผู้ที่ต้องการพัฒนา Hybrid Apps ร่วมกับ Facebook

เริ่มต้นพัฒนาแอพพลิเคชันของเราแบบไม่ต้องบรรยายอะไรมาก ให้เปิด command line หรือ terminal ขึ้นมาอัพเด็ต nodejs ให้เรียบร้อยแล้วรันคำสั่ง

แสดงผลแอพของเราด้วยคำสั่ง

แอพพลิเคชันของเรา

แอพพลิเคชันของเรา

ตัวอย่างในบทเรียนนี้จะใช้ Library หนึ่งของ Cordova นั่นคือ cordovaOauth มาเป็นตัวกลางในการเชื่อมต่อ Facebook Application เข้ากับ ionic แอพพลิเคชันของเรา ดังนั้นเมื่อเราสร้างแอพพลิเคชันเรียบร้อยแล้วให้รันคำสั่งต่อไปนี้

เพิ่ม Platform Android เข้ามายังแอพพลิเคชันของเราใช้เวาประมาณหนึ่ง แต่ cordovaOauth จำเป็นต้องทดสอบบนอุปกรณ์จริงเท่านั้น ต่อมาใช้คำสั่ง

เพิ่ม inappbrowser เพื่อและ whitelist เพื่อ cross domain สำหรับเรียกค่าและเปิด Browser ใหม่ภายในแอพพลิเคชันของเราจะได้มีความต่อเนื่อง

ภาพจาก http://www.sitepoint.com/

ภาพจาก http://www.sitepoint.com/

ผมจะไม่อธิบายขั้นตอนการสร้าง Facebook Application คุณสามารถไปหาอ่านได้ที่ http://developers.facebook.com เองครับ ผมต้องการแค่ app id ของ Facebook Application เท่านั้น

ออกแบบหน้า index.html ของเราก่อนด้วยการนำภาพไปวางในแอพของเราดังนี้

facebook-login

เซฟไปไว้ในโฟลเดอร์ ‘www/img/’ แล้วไปตกแต่งหน้า index.html ของเราด้วย code ต่อไปนี้

เราจะมีชื่อ ng-app ว่า “starter” และ ng-controller ว่า “sampleFacebookController” ที่ส่วนดังนี้

และ

แก้ไขไฟล์ js/app.js ดังนี้

ให้เราเรียก Lib ของ Cordova มาเพิ่มส่วนตัวผมใช้ bower เข้ามา

เมื่อติดตั้งเสร็จแล้วให้เพิ่ม js ของ ngCordova ไปแทรกใน index.html

ต่อมาเรียก lib ของ cordovaOauth ผ่าน bower อีกครั้ง

เราจะได้ ngCordovaOauth เพิ่มเข้ามาให้ไปเรียกใช้ร่วมกับ ng-cordova.js

เพิ่ม ngCordova และ ngCordovaOauth เข้าไปยัง module ของ starter

หลังจากนั้นให้ทำการเรียกใช้ใน controller ของเราครับโดยประกาศส่วน .controller ดังนี้

การเรียกใช้คือ

*หมายเหตุ APP_ID ข้างต้นเป็นตัวเทส

ทดสอบแอพพลิเคชันของเรา

Screen Shot 2559-04-07 at 1.33.42 PM

ทำการกดปุ่ม Login with Facebook

Screenshot_2016-04-07-13-41-29-98

ระบบจะเข้าไปยังหน้า Connect กับตัวแอพพลิเคชันที่เราใส่ APP_ID ไว้

Screenshot_2016-04-07-13-41-38-64

ใน Code ที่ผมใส่ไว้จะเป็นการ alert เพื่อแสดงชื่อ ที่ดึงมาจาก Facebook Graph API V2.2 ใน code ที่ระบุ จะเห็นว่าการพัฒนาแอพพลิเคชันร่วมกับ Facebook SDK นั้นไม่ยากถ้าเราใช้ Lib ของ cordovaOauth มาช่วยครับ ที่เหลือก็ใช้ $localStorage มาเก็บเป็น Session ของแอพพลิเคชันไว้ก็เป็นอันเรียบร้อยสบายๆ

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.