Cordova: phonegap-facebook-plugin alternative with Facebook SDK 4

There are choices of cordova Facebook login plugins available, but I found two useful at the time I'm developing my Cordova mobile app.

Those are:
- phonegap-facebook-plugin
- cordova-plugin-facebook4

phonegap-facebook-plugin is mostly recommended by the internet community at the time I am writing this, as example ngCordova - Facebook,
but it caused some UX and development issues to me as a developer.

phonegap-facebook-plugin
It uses FacebookSDK version 3.21.1, with this SDK, for iOS 9, it leads to problems like:

• must not have bitcode enabled (activated by default in xcode 7)
• requires manually add whitelist Facebook access every time you have your iOS platform created
• add LSApplicationQueriesSchemes manually 
• add NSSApplicationTransportSecurity manually
• Every login will leave a blank safari browser opened for Facebook browser login (unless user has native Facebook app installed)
• Symlink of FacebookSDK is broken with direct cordova plugin add phonegap-facebook-plugin

cordova-plugin-facebook4

The purpose this plugin is to make use of FacebookSDK 4.

• It helps saving the drudgery on adding LSApplicationQueriesSchemes and NSSApplicationTransportSecurity items.
• support bitcode encoded, so you don't need to deactivate it every rebuild of the cordova platform.
• Time saving on git cloning to workaround broken FacebookSDK symlink.

Added 2015-11-13 10:55 PM
the only bad thing about cordova-plugin-facebook4
there is different between plugin cloned by cordova added through new platform build (cordova platform add ios/android) with the one manually added with cordova cli (cordova plugin add).

Differences:

#	Cloned with platform add	Plugin added with cordova cli
1	Need manual add of LSApplicationQueriesSchemes	Auto added
2	Bitcode_enabled to be disabled	support bitcode_enabled
3	Facebook login with safari browser	Do not need external browser for Facebook login

Even though both cordova cloned with platform and cli are the same cordova-plugin-facebook4,
but at the time I developing,
it does has differences as your installation method is different.

Furthermore,
if you already have cordova-plugin-facebook4 saved into config.xml,
running cordova plugin add cordova-plugin-facebook4 (with variables) again will update itself into a different version plugin.

my case:
    <plugin name="cordova-plugin-facebook4" spec="~1.3.0-0">
        <variable name="APP_ID" value="FB_APP_ID" />
        <variable name="APP_NAME" value="FB_APP_NAME" />
    </plugin>

run cordova plugin add cordova-plugin-facebook4 --save (with variables) again, will become:
    <plugin name="cordova-plugin-facebook4" spec="~1.1.0">
        <variable name="APP_ID" value="FB_APP_ID" />
        <variable name="APP_NAME" value="FB_APP_NAME" />
    </plugin>

Use ngCordova inAppBrowser executeScript interacting with remote WebView content

Even the idea/solution very straight forward, but still, I learned ngCordova's inAppBrowser the hard way.

I am using cordovaInAppBrowser to handle my remote content in mobile's WebView.
Tutorials accessible out there mostly give you the idea of how it works in direct content display, like:

// insert Javascript via code / file
$cordovaInAppBrowser.executeScript({
  code: 'alert("some text in the webview");'
});

Yes, it does tell the code is working in the webview,
but my problem is how can the value be manipulated and pass back to our cordova app?
So what we need is more than pop up alert box in webview.

As I learned,

1. executeScript code WOULD JUST work when we have target as "_blank"
   
   

   // executeScript must has "_blank" as target
   $cordovaInAppBrowser.open(YOUR_URL, '_blank');
   

   
   
2. the executeScript code would just run once as inAppBrowser page load/refresh depend on the events triggered:

• $cordovaInAppBrowser:exit
• $cordovaInAppBrowser:loaderror
• $cordovaInAppBrowser:loadstop
• $cordovaInAppBrowser:loadstart

So what you can do with this executeScript feature is to 'grab' your expected variable.

$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
  $cordovaInAppBrowser.executeScript({
    code: "var executable = function(data) { return data; }; executable(yourJsVariable || null);"
  }).then(function(data) {
    // Do something here with your obtained value
    if (angular.isObject(data)) {
      console.log(data);
    }
  });
});

In my case above, my detection of yourJsVariable starts as the page load of the inAppBrowser stops.

Reference: Issue injecting external script with executeScript method in Cordova
(The reference above is the best working example code I found so far.)

Short Note: HTML5 localStorage - think "resume"

Just realise something that I have been using it so long,
while still not knowing one of the best part of its "resumable" feature.

It keeps what you last stored in the localStorage, and won't lost the stored data until you do it manually.

In this case,
we can check any progress updated before any kind of interruption,
and resume the progress from there.

One of my concern was that I didn't know I can really trust the stored data while having an interruption happens in the middle of the process.

Thanks to Dive Into HTML5: HTML5 Storage in Action,
I should start utilise it with progress status data and think localStorage from know on.
(Even though it isn't a very new thing anymore)

Cordova Development - iOS iTunesArtwork in ad hoc distribution

As how everyone explained around the internet, you need files named "iTunesArtwork" (512px X 512px) & "iTunesArtwork@2x" (1024px X 1024px).

iTunesArtwork - 512 x 512
iTunesArtwork@2x - 1024 x 1024

And they must be filename without extension.
If your image file is iTunesArtwork.png then name it to iTunesArtwork (without the ".png").

---

Once you have your artwork ready, rebuild your iOS Cordova build.

cordova run ios 

After then, the generated app (applicaiton) file:

generated-app.app (in /mobile_app_root/platforms/ios/build/device/generated-app.app directory)

---

right click on the generated-app.app and select "Show Package Contents"

---

After you click [Show Package Contents], it will direct you into a new directory.
This is the directory where you should place your iTunesArtwork & iTunesArtwork@2x files.

In root folder, is where you place your  iTunesArtwork & iTunesArtwork@2x files.

using the manual way, compress method to get your ipa build.

Try it in iTunes app, you'll see the result.


References:
Customizing the App
iTunesArtwork And Xcode

Cordova Development - How to release an iOS build from app bundle generated from "Cordova run ios"

By running, cordova command, cordova run ios will generated an iOS application bundle in

cordova-project-directory/platforms/ios/build/device/app-name.app

 Using manual way to distribute testing build, you'll need to:

1. Create a folder named "Payload" (only 'Payload' name would work)
2. Paste your app-name.app into the Payload folder created in 1st step
3. zip/compress the Payload folder
4. once compressed, the Payload folder become Payload.zip, rename the 'Payload.zip' to app-name.ipa
5. Place it into iTunes, and start install with it.