Mobidevthai

จากในบทความก่อนหน้านี้ผมได้นำเสนอการ Post ข้อความไปยัง Wall ของ User ผ่านทาง Graph API ของ Facebook ไปแล้ว ในบทความนี้ผมก็จะนำเสนอการ Post รูปภาพจากในเครื่องไปยัง Wall ของ Users ครับ เรามาเริ่มกันเลยดรกว่าครับ


ดังเช่นในบทความก่อนหน้านี้นะครับ เราจะทำการสร้าง หน้าจอเพื่อรองรับการ Post รูปภาพตามนี้นะครับ
//สร้าง Windows
var win = Titanium.UI.createWindow({
    backgroundColor : '#fff',
    layout : 'vertical'
});

//กำหนดค่าให้กับ Facebook API
Ti.Facebook.appid = '253673451435346';
Ti.Facebook.permissions = ['publish_stream','user_photos']; //เพิ่มส่วนของการ Access รูป
Ti.Facebook.addEventListener('login', function(e) {
     if (e.success) {
          alert('Logged in');
     }
});

//สร้างปุ่มสำหรับ Login Facebook
win.add(Ti.Facebook.createLoginButton({
     top : 20,
     style : Ti.Facebook.BUTTON_STYLE_WIDE
}));

จากนั้นก็ทำการสร้าง ปุ่ม "Select Image" เพื่อเปิด Gallery เพื่อเลือกรูปภาพ ซึ่งรายละเอียดการใช้งานจะอยู่ที่ เปิด Photo Gallery ด้วย Titanium Mobile
//สร้างปุ่มเปืิด Gallery
var img = Titanium.UI.createButton({
      title : ' Select Image ',
      top : 50
});

//แสดงภาพจากการเลือกใน Gallery
var imgView = Titanium.UI.createImageView({
      width : 300 ,
      backgroundColor : '#555',
      top : 20,
});

จากนั้นเพิ่มปุ่มสำหรับการ Post ลงไปใน หน้าจอ แล้วทำการ นำเอา Object ทั้งหมดไปใส่ใน Window
//ปุ่มสำหรับ Post
var post = Titanium.UI.createButton({
      title : ' Post To My Wall',
      top : 20
});

win.add(img);
win.add(imgView);
win.add(post);
เมื่อทำการรันขึ้นมาก็จะได้หน้าจอ แบบนี้ครับ

หน้าจอเริ่มต้น

สิ่งที่เราจะทำต่อไปก็คือเมื่อทำการกด ปุ่ม  Select Image ให้ทำการเปิด Gallery ขึ้นมาครับ (เปิด Photo Gallery ด้วย Titanium Mobile) และเมื่อทำการเลือกรูปภาพเสร็จแล้วให้ทำการแสดงในส่วนของ Image View
img.addEventListener('click',function(){
           Titanium.Media.openPhotoGallery({
                  mediaTypes : Titanium.Media.MEDIA_TYPE_PHOTO,
                  success : function(event){
                              imgView.image = event.media
                            }
           });
});
จากนั้นเราก็จะมาทำการเขียนในส่วนของการ Post รูปภาพดังกล่าวไปยัง Facebook ผ่านทาง Graph API กันครับ โดยสิ่งที่เราต้องทำก็คือเมื่อทำการกดที่ ปุ่ม Post To My Wall แล้วให้ทำการ Post รูปภาพที่เราเลือกไปยัง Wall ครับโดยเราจะทำการเขียนคำสั่งแบบนี้ครับ

post.addEventListener('click',function(){
     Titanium.Facebook.authorize();
     var file1 = imgView.image;
     //เปลี่ยน Graph Path เป็น me/photos เพื่อ Post เข้าไปยัง photos
     Titanium.Facebook.requestWithGraphPath('me/photos',
                {message : 'Image From Mobidevthai',
                 picture : file1},
                'POST',
                 function(data){
                                alert(data);
                  });
           });
ทดลองรันดูครับ เมื่อเรากดที่ปุ่ม Post To My Wall ถ้าหากว่าได้ Message แบบนี้ แสดงว่า เราสามารถทำการ Post ข้อมูลได้แล้วครับ


ลองไปเช็คที่ Wall ของเรากันครับ ก็จะพบกับ รูปภาพที่เราทำการเลือกเอาไว้นั่นเองครับ


เป็นอย่างไรกันบ้างครับกับการ Post รูปภาพไปยัง Wall ผ่านทาง Graph API ในบทความหน้าเรามาสร้างรูปเป็น Album กันดีกว่าครับ