Sencha Touch + Facebook Graph API

[djd]

Hey guys, first of all, since this is my first post, I'd just like to say nice work on Sencha Touch- I think it has a bright future.

Now I've been reading through all the documentation I could find, but I can't quite figure out the most reasonable way to parse data from Facebook through their GraphAPI, put it in Store, and update the UI. I'm not trying to authenticate just yet, I just want to get whatever data is publicly available for a certain page.

This page returns the following JSON formatted document:

{
   "id": "19292868552",
   "name": "Facebook Platform",
   "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs451.snc4/50414_19292868552_7650_s.jpg",
   "link": "http://www.facebook.com/platform",
   "category": "Product/service",
   "website": "http://developers.facebook.com",
   "username": "platform",
   "founded": "May 2007",
   "company_overview": "Facebook Platform enables anyone to build social applications on Facebook and the web.",
   "mission": "To make the web more open and social.",
   "likes": 1298659
}

And in my Sencha Touch project, I've got the following code executing as the handler of a button on a toolbar:

                        Ext.regModel('Graph', {
						    fields: [
								'id',
								'name',
								'picture',
								'link',
								'category',
								'website',
								'username',
								'founded',
								'company_overview',
								'mission',
								'likes'
							]
						});

						var store = new Ext.data.Store({
						    model: 'Graph',
							autoLoad: true,
						    proxy: {
						        type: 'scripttag',
						        url : 'https://graph.facebook.com/19292868552'
						    },
							reader: {
								type: 'json'
							}
						});
						
						console.log(store);
                    }

This code executes just fine inside Chrome, but not how I thought it might. 'console.log(store)' show's an 'Object' tree that looks like this:

Object
autoLoad: true
data: Object
events: Object
eventsSuspended: false
filters: Object
loading: false
model: function (){h.apply(this,arguments)}
modelDefaults: Object
proxy: Object
reader: Object
removed: Array[0]
snapshot: Object
sortToggle: Object
sorters: Object
__proto__: Object

Navigating through the tree I can see that 'store.data' has 'length: 0' and 'items: Array[0]' amongst several other properties. I can also see that 'store.proxy.reader.jsonData' contains all of the JSON data I'm after. If I try console.log(store.proxy.reader.jsonData), 'undefined' is printed to the console. I experimented using Ext.data.JsonStore for my store but couldn't figure that out either.

I've seen many posts on using ScriptTagProxy, Store, and DataView, but I just don't get it. What am I missing?

What is the proper use of DataView to bind to a Store and update the UI in this situation?

Thanks for any insight you can give.

[desidon282]

Try below code

Ext.regModel('Graph', {
    fields: ['id', 'name', 'picture', 'link', 'category', 'website', 'username', 'founded', 'company_overview', 'mission', 'likes']
});

var store = new Ext.data.Store({
    model: 'Graph'
});

Ext.util.JSONP.request({
    url: 'https://graph.facebook.com/19292868552',
    callbackKey: 'callback',

    // Callback
    callback: function (data) {
        store.loadData(  data.list  ); //what ever is returned from the request.
        Ext.repaint();
    }
});

[djd]

desidon282: Thanks for the reply. I tried your code and I got this error message:

Uncaught TypeError: Cannot read property 'length' of undefined
->Ext.data.Store.Ext.extend.loadDatasencha-touch.js:6
->Ext.util.JSONP.request.callbackjsonp.js:48
->Ext.util.JSONP.callbacksencha-touch.js:6
->(anonymous function)

But if I load "data" - instead of "data.list" - and I print using "console.log(store)" - it appears that the store is now loaded with the data I want. I haven't worked it out using a template yet.. working on that now..

[desidon282]

Instead of data.list just use data

There I mentioned you need to select the object in data tht has values. If array is in root object then use data

[djd]

Instead of data.list just use data

There I mentioned you need to select the object in data tht has values. If array is in root object then use data

Oh I see, I understand your comment in the code now. Thanks for you help.

[eladgel]

Hi
did you have any luck connecting with your FBapp?
my problem is that Facebook requires me to register my website in order to connect my app to it- I did that, tried to connect from there and it worked(just the connect part)
when running the App standalone from my computer for testing it says that I'm not logging through the site I registered- how can I overcome that? In the future I'm intending to use phonegap will that help? and how?

[djd]

I'm guessing Facebook is expecting your API requests to come from your website's domain and not your personal IP address.. but I really don't know.

I ended up writing a PHP script to handle Facebook Graph API requests. The script is really just a "middle-man" to overcome the cross-domain restrictions, but it also takes parameters and formats the response from Facebook to be consumed by my Sencha model/ajax proxy.

If it's just Graph data your after, you may want to try this. Otherwise, the best advice I can give is to adjust your Facebook App's settings in the developer panel.

[eladgel]

My goal:
post content from my sencha touch mobile app to my fb wall-
what would you recommended? I'm a noob with everything involving connecting fb to sencha..
10X

[djd]

Wall posts's require that you obtain an access_token first check
http://developers.facebook.com/docs/authentication/ for details on that whole process.

Once you have an access_token, then you make an HTTP POST requests to a GraphURL. The GraphURL you send the request to, in combination with the parameters you send along with the request, determine what action is performed or what data is returned.

So, to make a post to your wall: first obtain an access_token, then open an HTTP request to "https://graph.facebook.com/me/feed", finally execute the request attaching your access_token, and the message you want posted as parameters.

The 'graph.facebook.com' part of the url tells FB that this is indeed a Graph request. The '/me' portion, says to select the currently logged in users profile, and finally the '/feed' says to deal with the users NewFeed (Wall).

Sorry if that was vague, but I've never had to authenticate a user from Sencha before, I just use Sencha and FB to grab public information about events, venues, etc.


You could also check out the Facebook PHP SDK, it would probably simplify the whole process of getting an acces token from inside of Sencha:
https://github.com/facebook/php-sdk/

And this is also a valuable resource: http://developers.facebook.com/docs/reference/api/

[eladgel]

10X!