My experience developing a Windows 8 Store App using PhoneGap jQuery and Facebook

Standard

I have not posted in a while but had to post my less than satisfactory experience signing up for the Windows Store Dev Center and porting my HTML5/JavaScript app over to a Windows 8 Store app. In comparison I had a great experience signing up and getting my app in the Google Play store, that was a streamlined process with no hoops to jump through. On the other hand Microsoft really messed up and dropped the ball  this time with their dev center experience. To start off they had to verify a payment from my bank, which triggered my bank to call me on suspected fraud activity. I told them it was a legit payment.  A million other services use this type of verification process by depositing a small amount (pennies) in the users account, then the user verifies it. Leave it to Microsoft to charge over 2 dollars for the verification and cause a fraud alert to go off at my bank.

Then to make matters worse I am trying to verify my account to submit an app to the store but get this error: We can’t connect to the service. Please try again later. So it forced me to submit a support case to M$FT. Hopefully they fix it, but it has not been a pleasure working on the Microsoft platform at all.

Another issue I had with my Windows 8 App was making PhoneGap + jQuery + Facebook Javascript SDK  work. I had to change a number of things in my code for my PhoneGap build app to work in a Windows Store environment. Unfortunately it does not just work out of the box…. come on msft 😦 .

Below are some of the issues I ran into:

1. jQuery – special version (jquery-1.8.0-windows8-ready.js)
2. iFrames
3. Facebook Authentication with the FB Javascript SDK

To make Facebook Authentication work in a PhoneGap Windows 8 Store app
———————————————————————————————–

* Create Azure Mobile Service http://code.msdn.microsoft.com/windowsapps/Authenticate-Account-827dd37b
* Change the logic code in Auth.js to first authenicate with mobile services then pass the token back to the client:

// set up mobile services
App.mobileService = new WindowsAzure.MobileServiceClient(
https://wskauth.azure-mobile.net”,
“XEsEVgcJInlpsRqIkHHRgtBwVubnLc42”
);

App.mobileService.login(“facebook”).then(function () {
App.authView.fbConnected();
});

Other things I had to modify
———————————–

* When in doubt and you get a javascript exception while debugging try wrapping your code in this call:

MSApp.execUnsafeLocalFunction(function () {
// your code
});

* When using jquery append, sometimes you need to sanitize your html with this code: `.append(toStaticHTML(“<br/>stuff”));`

* Changed getting data from facebook by passing in the access token and avoided using the fb js sdk. Changed FB.api(/me) code to:

$.get(‘https://graph.facebook.com/&#8217; + fid + “?access_token=” + YOUR_TOKEN, function (r) {
name = “<br/>” + r.name;
$(“#activityFeed”).append(toStaticHTML(name));
});

* I had to wrap line 3061 of `jquery-1.8.0-windows8-ready.js` in a try-catch to avoid an error.

// nick added try-catch… for some reason an error was being thrown 0x800a01b6
// – JavaScript runtime error: Object doesn’t support property or method ‘apply’
try{
ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler)
.apply(matched.elem, args);
}
catch (e) {
ret = undefined;
}

* I had to remove all the iframes in the application. I read there is a workaround online, but did not bother to implement, I simply removed the youtube iframes.

* Removed the export to csv functionality since it has to do a full page post back to a web page on a different domain, there is a possible workaround I did not
investigate yet.

Advertisements