CocoonJS app to post tweet and image

Question

For a number of days I have been looking into the possibility of integrating Twitter functionality for posting a high-score with a screenshot into a game that I am developing with CocoonJS. CocoonJS doesn't provide this functionality out of the box (although, it does for Facebook). I have been looking at OAuth and have experimented with trust trying to get the application to be able to present the user with a login. This was successful via the browser. The code used for this is:

test1 = function() {
    var tempLogo = "<base64EncodedImg>";
    OAuth.initialize("<public key>", {cache:true});
    OAuth.popup("twitter").then(function(result) {
        var data = new FormData();
        data.append('status', 'This is a test');
        data.append('media[]', Utils.b64toBlob(tempLogo), 'logo.png');

        return result.post('/1.1/statuses/update_with_media.json', {
            data: data,
            cache:false,
            processData: false,
            contentType: false
        });
    }).done(function(data){
        var str = JSON.stringify(data, null, 2);
        console.log("Success: " + str);
    }).fail(function(e){
        var errorTxt = JSON.stringify(e, null, 2);
        console.log("Success: " + errorTxt);
    });
}

But when testing via CocoonJS launcher, I got the following error:

IDTK_LOG_ERROR: [JS] Invoked in void ludei::js::utils::JSUtilities::PrintException line 95: JavaScript Exception (Line: 1337 Tag: 'touchend'): TypeError: undefined is not an object (evaluating 'this.document.cookie.split')

On the device, the pop-up didn't appear.

I then tried to have a look at using hello.js. Again I was able to get their demo up and running very quickly in my game when I ran it in the browser. I used the following code:

test2 = function() {
    hello.init({
        'twitter' : '<twitter client id>'
    },
    {   
        redirect_uri:'redirect.html',
    });

    // Twitter instance
    var twitter = hello('twitter');
    // Login
    twitter.login().then( function(r){
        // Get Profile
        return twitter.api('me');
    }, "LOG" )
        .then( function(p){
            // Put in page
            document.getElementById('login').innerHTML = "<img src='"+ p.thumbnail + "' width=24/>Connected to "+ 'twitter'+" as " + p.name;
    }, "LOG" );
}

This then gave me a repeating error:

IDTK_LOG_ERROR: [JS] Invoked in void ludei::js::utils::JSUtilities::PrintException line 95: JavaScript Exception (Line: 13 Tag: 'timer'): TypeError: undefined is not an object (evaluating 'e.value.length')

On the device, the screen went black apart from a small logo, which I remember seeing being part of the pop-up asking for authentication that did work when I test this functionality on the desktop browser.

These error messages don't really mean much to me, and unfortunately I am not able to debug CocoonJS when I run the app on iOS (via CocoonJS Launcher) as this functionality i only present on Android.

Would just like to know whether what I am trying to achieve has been done by anybody in CocoonJS and whether or not what I am requesting is actually possible, and obviously how to get it working! =)

Any help would be much appreciated.

Thanks Rich

Answer 1

The Canvas+ environment in CocoonJS does not have Cookies support nor big DOM support. It is (as the name states) a Canvas-only environment. You have some options though (warning: haven't tested them):

1.- Send the user to the system browser. You can open a system browser passing a URL. Don't really know if this could be an option. 2.- Open a session for this in the WebView. CocoonJS allows to use an extension API to load and even show content on a WebView. You will have two environments running: Canvas+ and WebView loading completely different web content in each of them. The good news is that you can pass messages (eval-s) between them.

For more info on Canvas+ and the WebView (theory): http://support.ludei.com/hc/en-us/articles/200807797-Canvas-Webview

For the latest extension API: http://doc.ludei.com/3.0.5/Cocoon.WebView.html

3.- Just directly choose WebView+ for your app. It might not be as performant as Canvas+ but it is a full fetched browser so all this code should work.

My recommendation? Test 3 first. If it is a good option for you, go with it (understanding it's limitations). If you really want to use Canvas+, test 1 first quickly and if it's not a good fit, then 2.

Hope this helps.