1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    djd is on a distinguished road

      0  

    Default Sencha Touch + Facebook Graph API

    Sencha Touch + Facebook Graph API


    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:

    Code:
    {
       "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:
    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',
    							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:
    Code:
    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.
    Last edited by djd; 20 Jan 2011 at 9:26 AM. Reason: reformat

  2. #2
    Ext User
    Join Date
    Dec 2010
    Posts
    2
    Vote Rating
    0
    desidon282 is on a distinguished road

      0  

    Default


    Try below code
    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();
        }
    });

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    djd is on a distinguished road

      0  

    Default


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

    Code:
    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..
    Last edited by djd; 24 Jan 2011 at 3:36 PM. Reason: new info

  4. #4
    Ext User
    Join Date
    Dec 2010
    Posts
    2
    Vote Rating
    0
    desidon282 is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    djd is on a distinguished road

      0  

    Default


    Quote Originally Posted by desidon282 View Post
    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.

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Posts
    17
    Vote Rating
    0
    eladgel is on a distinguished road

      0  

    Default


    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?

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    djd is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User
    Join Date
    Oct 2010
    Posts
    17
    Vote Rating
    0
    eladgel is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha User
    Join Date
    Jan 2011
    Posts
    8
    Vote Rating
    0
    djd is on a distinguished road

      0  

    Default


    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/

  10. #10
    Sencha User
    Join Date
    Oct 2010
    Posts
    17
    Vote Rating
    0
    eladgel is on a distinguished road

      0  

    Default


    10X!

Similar Threads

  1. Is it possible to integrate Facebook authentication into Sencha Touch
    By directx0000 in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 23 Nov 2011, 6:49 AM
  2. Sencha Touch API Documentationについて
    By kuro in forum Japanese Sencha Forum
    Replies: 2
    Last Post: 12 Sep 2010, 8:49 PM
  3. Replies: 2
    Last Post: 9 Sep 2010, 10:24 AM

Thread Participants: 3

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi