URL Scheme for Android in Cordova

My project's spec:
- Onsen UI
- Cordova

Simply following the step in Custom URL scheme PhoneGap Plugin would get your android or ios app ready with custom URL scheme.

But testing it the wrong way cause my hours to figure what is wrong with my configuration.

So, in the end, I found out testing URL scheme in android is different with how we test in ios.

In ios device,  ipod as example,
we just simply use browser with "myapp://" would do all job.

Which it is different in android,
so you'll have to utilise easyhyperlinks.com to initiate the scheme correctly,
because in android, it automatically prefix url with "http://" in browsers.

You can refer to this Using Custom URL Schemes In Your Ionic Framework App and see how he tested the scheme in the easy way.

Reference:
github repo: Custom URL scheme PhoneGap Plugin
video tutorial: Using Custom URL Schemes In Your Ionic Framework App
testing tool for android: easyhyperlinks.com

Cordova, store image from data URL or base64

In order to get image resized and store the image right away, we need some workaround to achieve this result.

First, resize the image into thumbnail-like size
2nd, store the image into targeted directory

This is achievable with Phonegap-image-resizer

$window.imageResizer.resizeImage(function(resizedImage) {

  // Store image into local
  $window.imageResizer.storeImage(function(response) { // cache
    var filePath = response.filename,
        pathOnly = filePath.substring(0, sourceFile.lastIndexOf('/')) + '/',
        filename = filePath.split('/').pop().replace(/\#(.*?)$/, '').replace(/\?(.*?)$/, '');


    // store file into targeted location here with 
    // cordova official File plugin
    $cordovaFile.moveFile(pathOnly, filename, cordova.file.dataDirectory).then(function(success) {
      console.log(success);
    }, function(error) {
      console.log(errir);
    });


  }, function(error) {
    return error;

  }, resizedImage.imageData, {
    imageDataType: ImageResizer.IMAGE_DATA_TYPE_BASE64,
    format: 'jpg',
    filename: // new name,
    directory: // location to store,
    quality: 80
  });

}, function(error) {
  return error;

}, photo.url, 0.2, 0.2, {
  imageDataType: ImageResizer.IMAGE_DATA_TYPE_URL,
  resizeType: ImageResizer.RESIZE_TYPE_FACTOR,
  format: 'jpg'
});

Two parts here:


TL;DR

1st step, $window.imageResizer.resizeImage will resize the image
2nd step, $window.imageResizer.storeImage store image

Cursory go through resizeImage.js to better understand how to utilise the code.

Reference: Converting Large Images to Base64Strings in Ionic Framework

Delete branch from with github shell

git branch -d your_local_branch

Convert base64 to Blob

I'm developing android app with AngularJs & ngCordova,
and in my case, I just can choose to get image file from it's URI.

We don't have "[Select file...]" button to click to set our file directly into $scope object.
For example:

$scope.insertFile = function (file) {

    $scope.fileObject = file;

};

I then use Cordova's plugin, $cordovaFile - readAsDataURL, to get the base64 formatted file.
It's so I can upload my picture through $http and data parameter in form of FormData().

Simply convert into Blob as below does not work:

$cordovaFile.readAsDataURL(file.directory, file.name).then(function(response) {
 // take jpeg image as example
 var imageFile = new Blob(response, {type: 'image/jpeg'}); 
 formData.append('photo', imageFile, file.name);
};

It (the conversion) breaks my image file, because `new Blob()` doesn't automatically encode base64.

I have been struggling to get a non-broken image uploaded for some time until I found a solution that solved my problem below.

Solution
I found a useful HTML5 Filesystem API library code has method that helps correctly converting base64 into Blob.

With this I corrected my code into:

$cordovaFile.readAsDataURL(file.directory, file.name).then(function(response) {
 // take jpeg image as example
 var imageFile = dataURLToBlob(response);
 formData.append('photo', imageFile, file.name);
};

It does convert my image file correctly, and my app is no longer uploading broken image again.

Reference:
http://stackoverflow.com/questions/12168909/blob-from-dataurl

Default Hash key of Android apk

I found the solution from this,
every IDE will have the default keystore password.

Like the case when I build my apk (android app package),
it will generated with the default hash key.

Generating an APK in the Debug Mode

• Keystore name: debug.keystore
• Keystore password: android
• Key alias: androiddebugkey
• Key password: android
• CN (common name): CN=Android Debug,O=Android,C=US

In order to get the hash key with the keytool command, 

you need the "Key alias" and "Key password" values.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

(command for mac)

Enable PHP extension

Since I use homebrew to install PHP (Command: brew install php56)

And so, we'll have my php.ini file located in other directory.
which is,

/usr/local/etc/php/5.6/php.ini

so you'll have to edit this file in order to activate extension.
In the file, in the Dynamic Extensions part, you will see a list of commented out extensions.

;extension=php_bz2.dll
;extension=php_curl.dll
;extension=php_fileinfo.dll
;extension=php_gd2.dll
;extension=php_gettext.dll
;extension=php_gmp.dll
;extension=php_intl.dll
;extension=php_imap.dll
;extension=php_interbase.dll
;extension=php_ldap.dll
;extension=php_mbstring.dll

Install desired extension eg.

brew install php56-mcrypt

remove the semicolon ";" at the desired extension to enable it.
and then restart apache server with

sudo apachectl restart 

your extension would be ready for action.

OnsenUI: Change tab without pressing ons-tabber's ons-tab (with AngularJs)

I have been searching around for changing tab with AngularJs $scope function, without pressing on the ons-tabber's tab.
This function will do the trick setActiveTab()
First, you have to specify name for the tabbar,

(eg. ons-tabbar[var="myTabbar"])

use setActiveTab() with index (just like array, start from 0) for myTabbar:
myTabbar.setActiveTab(1) for my case below.

AngularJs

var app = angular.module('app', ['onsen']);

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.goHome = function() {
    // setActiveTab(index, options)
    myTabbar.setActiveTab(1, {animation: 'fade'});
  };
}]);

Html

<ons-page ng-controller="myCtrl">
  <ons-toolbar>
    <div class="right">
      Toolbar - myCtrl
    </div>
  </ons-toolbar>
  
  <ons-button ng-click="goHome()">Go Home</ons-button>

  <ons-tabbar var="myTabbar">
    <ons-tab active="true" icon="ion-images" label="App" no-reload="" page="app.html" persistent=""></ons-tab>
    <ons-tab icon="fa-user" label="Home" no-reload="" page="home.html" persistent=""></ons-tab>
  </ons-tabbar>
</ons-page>

Summary
The main part:

• use variable name for ons-tabbar
• use setActiveTab(index) with the tabbar variable name to redirect

The meaning of OAuth redirect URIs

Because of my limited understanding about the technical term used in Facebook Developer,

I have been struggling hard to implement even the login provided by Facebook. 

SO I'm writing this for future reference:

Valid OAuth redirect URIs = the URL (or link) of where your Facebook login placed.

Meaning of OAuth redirect URIs

Eg. 

if your Facebook placed under the URL http://localhost/facebook/login/
then you can insert either http://localhost/ or http://localhost/facebook/login/ (exact URL) in the Valid OAuth redirect URIs input box.