bakedproject.com Blog Not just another WordPress weblog

16Jun/120

Update Facebook test user password – making batch request with python

A few weeks ago I wrote a post about how to make a batch API call to Facebook to generate MySQL statements. I am going to do a simple Python script to make a batch call to Facebook and update test user's password to "123123"(I just find it easier to type).

Following script really does not check if the batch call being made is over the 50 calls limit, something I will be updating shortly.

12Jun/120

BlackBerry WebWorks application – build and deploy KitchenSink

BlackBerry WebWorks provides the flexibility for developers to build native applications using JavaScript, HTML 5 and CSS. The JavaScript library included in the project provides a bridge to all pretty much all native JavaME based API set.

Including any custom JAR is also very straightforward. The applications built using the SDK are stand alone, meaning the assets required by the HTML are not fetched from a remote server. The application lives on the device and packaged with the WebKit engine container to be viewed by the "headless browser".

Building applications on Mac has always been a challenge and WebWorks is no difference. Here is a step by step guide to deploy the KitchenSink application for BlackBerry smartphones on Mac OS X.

I am copying full path to all projects in this post. Path and naming conventions are not absolute for a successful deployment however.

Get the smartphone SDK:
https://developer.blackberry.com/html5/downloads/sdk/ - this link lists a few SDKs including BlackBerry 10 and Tablet OS. I am using the smartphone SDK 2.3.1. Path to the SDK in my machine is

/Developer/SDKs/Research\ In\ Motion/BlackBerry\ WebWorks\ SDK\ 2.3.1.5/

Get KitchenSink source:
https://github.com/blackberry/WebWorks-Samples/tree/master/kitchenSink - I use XAMPP for web development and save all WebWorks projects in the htdocs folder. It is not necessary to have your source accessible via web server at all. I put all necessary source code in a "www" folder. All compiled and signed code goes in the "output" folder.

Get certificates to sign your code:
WebWorks uses a lot of secure APIs which enables the platform to communicate with hardware and other cryptic API set. To run the application on a device you would require to sign your code.

You would receive a few emails which will include .csi files. The files are usually named client-RBB-XXXXXXXXXX.csi, client-RCR-XXXXXXXXXX.csi and client-RRT-XXXXXXXXXX.csi. XXXXXXXXXX will be a number set by the BlackBerry code signature service. Use this help form if you are lost signing your code at any time.
Save the files in the "bin" folder of your SDK and go there from terminal. Now run

java -jar SignatureTool.jar client-RBB-XXXXXXXXXX.csi

You would need to run the signature tool on each of the RBB, RCR and RRT file.

java -jar SignatureTool.jar client-RCR-XXXXXXXXXX.csi
java -jar SignatureTool.jar client-RTT-XXXXXXXXXX.csi

Start building:

1. Package: First step to build a WebWorks application is packaging the source. You need to package the source into a ZIP file. Archiving the source from the GUI does not work! Apparently the GUI archiver puts different headers that the SDK does not understand. Also it will package the .DS_Store and any hidden .git and .svn folders, if the application is under version controlling.

Go to the www folder and run the following to zip the source code.

zip -r ../output/KitchenSink.zip * -x "*.DS_Store"

If you need to ignore other files and folders add the name after another -x option. e.g. to ignore build.sh file you would run

zip -r ../output/KitchenSink.zip * -x "*.DS_Store" -x "build.sh"

2. Build: To build the application you would need to run the bbwp from the SDK folder. You can also run jar located in the bin folder. You can specify bbwp properties from the bbwp.properties file. I am specifying the bbwp to use version 6.0 of the RIM api by updating the jar location from "jar" attribute to "lib\6.0\net_rim_api.jar". You can copy the net_rim_api.jar from any BlackBerry JDE and place it under the lib folder. The name of the file is generic, so placing under folders by the version number, e.g. 6.0, 7.0, is probably a good idea.

Go to your project root e.g. "/Applications/XAMPP/htdocs/webworks/KitchenSink/" and create a folder called "output" Run the following command in terminal to build your WebWorks application

java -jar /Developer/SDKs/Research\ In\ Motion/BlackBerry\ WebWorks\ SDK\ 2.3.1.5/bin/bbwp.jar /Applications/XAMPP/htdocs/webworks/KitchenSink/output/KitchenSink.zip -g macros05 -o /Applications/XAMPP/htdocs/webworks/KitchenSink/output/

This will create 2 folders named "OTAInstall" and "StandardInstall". If you want to download the application via the device's web browser, you would need to point the browser to the .jad folder. You can use the BlackBerry desktop software to install the application as well. You would need to point the installer to the .alx file in the "StandardInstall" folder in this case. I find the desktop software being very slow and buggy.

3. Deploy: The WebWorks includes a tool called javaloader to deploy signed applications to device and emulators. Deploying to device is pretty straight forward. Connect the device to your machine via USB and run following command in the terminal

/Developer/SDKs/Research\ In\ Motion/BlackBerry\ WebWorks\ SDK\ 2.3.1.5/bin/javaloader load /Applications/XAMPP/htdocs/webworks/KitchenSink/output/StandardInstall/KitchenSink.cod

This will install the application and restart your device.

I have put together a simple script which does all of the packaging, building and deployment. You can also use Ripple emulator to package and build your application. The reference guide is here.

9May/120

Use batch request to grab and save Facebook test user information

Facebook opened up their platform for application developers in 2007 and became one of the most accessed platforms via an API set. Over last few years functional modules were added both to the core API and developers tools offered by the social network giant. One of these amazing developer tool is the test users suite. Other than a few platform limitations and a few reported bugs, it works as expected. The interface for managing test users is not the greatest but it works.

Probably even 2 years ago application developers needed to create a plethora of fake accounts just check usual social sharing and other activities. Facebook deals with fake accounts very strictly now and building and/or testing applications using fake accounts is violation of platform terms.

A Facebook test user can only interact with other test users and application the user is added by the application administrator. A test user can not like a fan page - a lot of the time applications require users to like the fan page it is hosted on. Application developers can bypass the "like gate" for test users by simply matching the incoming user ID with the ones saved in the database as test user.. Also, while building the application, it is better to have data to manipulate. It is a capital mistake to theorize before you have data.

Here is an example using my own jQuery based AJAX call to communicate to Facebook graph API end point, but you can also use Facebook JavaScript SDK is FB.api method. I am using batch API call(or the batch request) to

  1. gather all test users for the application
  2. gather their public information and access token

Initially my script was calling for all test users and after calls the graph API to gather information. The second call was a batch request for all the users. This approach was inefficient for 2 reasosns

  1. making 2 graph API calls
  2. the batch request has a 50 call limit, this approach is useless for an application with more than 50 users. I could however, batch the batch request(will post shortly).

The latest fix for the script did all of it within 1 batch request. I simply specified a dependency  between my requests, my second request is dependent on my first one.

1
2
3
4
5
6
7
8
9
10
11
        args.batch.push({
            method                      : "GET",
            name                        : "get-users",
            relative_url                : "/"+app.id+"/accounts/test-users",
            omit_response_on_success    : false
        });
 
        args.batch.push({
            method        : "GET",
            relative_url  : "?ids={result=get-users:$.data.*.id}"
        });

Specifying omit_response_on_success : false is very important as otherwise the API returns a NULL value for the call. I need the first response as it has the access_token for the users.

Here is the link for the entire script.

I am using Mustache engine to generate and display MySQL statements to the browser window.

10Oct/110

WordPress URL update script

I always had trouble with the WordPress options table after moving WordPress sites between domains. I used to run the MySQL update commands directly from the query browser and very recently realized that it is not updating the serialized fields saved on the wp_options table.

Here (gist)is my approach to this problem. Implementation is pretty straight forward. The script can be accessed via CLI or browser.

18Apr/110

jQuery iFrameAutoHeight plugin

I needed to write a quick function for an iFrame to inherit the browser window height. So I wrote a jQuery plugin for it. It is under MIT and GPL license and a beerware.

Here (http://plugins.jquery.com/project/iFrameAutoHeight) is the link to jQuery plugin repository. Here is the link to Softpedia featured.

Filed under: Plugin, jQuery No Comments
22Mar/110

JavaScrpit Object dump like PHP var_dump

A very handy code snippet

1
2
3
4
5
6
7
function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }
	alert(out);
}

Filed under: JavaScript No Comments
10Mar/111

Adding ColorPicker jQuery plugin to a WordPress plugin admin panel

I was working on a WordPress plugin and needed to add a color picking ability for the admin panel. After doing some research I ended up with a few choices but decided to go with ColorPicker jQuery plugin. Installation required nothing extraordinary, just made changes to the CSS file. I like to keep my resources in separate folders so instead of having everything under images folder, I have them under "images/colorpicker" folder.

The WP plugin I am built has the ability to set default color for the color picker from the plugin settings page. The preset color would load during the colorpicker initial load. I selected "#faaf40" as the default color but started to have a really weird error! My form would not submit with the set color. On Safari I wasn't getting any feedback, but on Chrome I could see a message saying

Please shorten the text to 3 characters or less (you are currently using 17 characters).

Initially I did not even notice this, I thought something from the jQuery side of things were failing on form submit. I looked into the colorpicker code and realized the RGB/HSB text fields are limited to 3 characters. I figured out the conversion of the hex "#faaf40" was causing the issue. So I slightly modified the "fillHSBFields" assignment(starting on line 35)

1
2
3
4
5
6
fillHSBFields = function  (hsb, cal) {
	$(cal).data('colorpicker').fields
		.eq(4).val(Math.round(hsb.h)).end()
		.eq(5).val(Math.round(hsb.s)).end()
		.eq(6).val(Math.round(hsb.b)).end();
}

I simply rounded the calculated HSB values!

8Mar/110

Building Facebook application with Kohana 3.0.9

After hearing a lot of good things about Kohana I started to look into it. I did a little history reading and realized it used to be an active fork of CodeIgniter but has changed entirely since version 3, or KO3. At the time of writing this blog, I have spent about 12 hours studying the HMVC framework, so I might be wrong but like always am not in doubt.

As this is my very first encounter with this framework, I decided to follow a series of very helpful tutorials. Currently version 3.1.1.1 is the stable release, but I used the older 3.0.9. I do not see much difference other than how to handle view from the controller. Certainly I have to do more research on this!

Coming from using CodeIgniter for a long time my obvious interest was in the configuration side of things and I am very impressed with Kohana! The configuration was simple and less "variables" to configure.

As I was working with Facebook, my first concern was nice URLs! I had some serious trouble with this and wrote about my experience here. Kohana needed no configuration. Not only that, seems like the SEO friendly URL structure works very nicely with the GET!

Database configuration was ok, nothing special. Maybe it was a little confusing when I had to copy the config files from another location, “database.php” from “modules/database/config/” to “application/config/”.

For PHP syntax errors Kohana is giving me a 324 error and it is a little hard to debug. There might be some ways to enable proper error console.

The naming convention for controllers and models is very interesting, I can't tell if it is any better, but I had no issue so far. Using _ for finding proper location for classes is an old trick but it is done nicely here. Separating the class folder  from the views is a good point.

The before and after methods of the controller is amazing! My approach was using the constructor, but before method provides a good way of initializing my variables. I briefly looked into the template controller which seems to be very efficient. I am not using that controller however.

The most amazing thing about Kohana I think is the ease of  including 3rd party libraries! I created the "vendor/Facebook" folder under the application folder and just dropped the facebook.php file from the Facebook PHP SDK.  Here is the call to include the class

1
2
3
4
5
6
7
include Kohana::find_file('vendor/Facebook', 'facebook');
 
$this->facebook = new Facebook(array(
	'appId'  => $this->app_id,
	'secret' => $this->secret,
	'cookie' => true,
));

This sample application is good as fullwidth (720px) application and a smaller(520px) tab application. The difference is actually not on the CSS, but the way I am handling the permission dialog. From the application, I am redirecting the user to the Graph API authorization page. I could use the JavaScript API but the latter actually fires a browser pop-up window! I am using the JavaScript SDK for permission on the application installed in the tab however. Using this on application installed on a page tab gives a much smoother user experience.

Some interesting Facebook (new)issues I have discovered:

  1. If I am the admin to the page or developer for the application the permission mechanism doesnt work at all sometimes. Even after "liking" the page it is still showing that I have yet to "like" it.
  2. Almost the same thing happens with the permission. When I am the developer I have to keep providing the permission every time I am visiting the app.
  3. If I do not allow the application authorization, it keeps it to that state for a bit and do not let me fire the authorization window again. It does after a few minutes however!

Here is the zip file. The database file(fbkohana.sql) is also included here. I am using jQuery 1.4.4, which is also included in the "assets" folder. Please comment! Find my mistakes and do let me know.

Happy coding!

26Dec/102

iFrame on Facebook application tab

Using iFrame with Facebook is tricky. The FBML fb:iframe works only on application pages but not on the application tabs. Sometimes it is necessary to build an application that is only installable on a profile tab so it is running from within the fan page instead of a stand alone.

There are 2 main advantages of using an iFrame

  1. The CSS is not cached, so debugging and deployment is much easier
  2. Use of jQuery is POSSIBLE!

Facebook parser will generate an error in case of direct implementation of the iframe FBML on a tab. However there is a way to add the iFrame element via FBJS event. Facebook requires user interaction before any automated method execution on a profile tab. The iFrame that loads the content needs a clickable element, preferably an image of the actual frame output. When the user clicks on it, the frame loads with all it's glory!

1
2
3
4
5
6
<script type="text/javascript"><!--mce:0--></script>
<h2>TEST iFRAME</h2>
<div id="iframe_container">
	<a style="cursor: pointer;" onclick="iframe_container.setInnerFBML(iframe_link);">
		click to load iFrame<!-- the clickable element! -->
	</a></div>

A few important points about this snippet

  1. It is FBML, so this code does not have a body tag.
  2. The JavaScript code on top is not necessary for the profile tab, but if user is viewing the actual application, this will automatically load the iframe component, else they have to click on the clickable element.
  3. It is simply loading the fb:js-string which holds the fb:iframe implementation, inside the ifrmae_container.

29Oct/100

Baked json_encode… write your own for PHP 5.1.x

PHP's json_encode is a very handy function for encoding any associative array to JSON. This function comes bundled with PHP 5.2.x. I been working with a client who has PHP 5.1.6. I would install all the necessary tools, but client was not very willing to make changes and I been wanting to write my own JSON encoder for the longest time!

So here is my baked approach...

1
2
3
4
5
6
7
8
9
function my_json_encode($json_array) {
 $json = "[";
 for($i=0; $i1) $json .= ',';
   $json .= '"'.addslashes($key).'":"'.addslashes($row[$key]).'"';
  $i++;
 }
 $json .= "}";
 return $json;
}// end of my_json_encode

and the call

1
2
3
4
5
while($row = mysql_fetch_assoc($result)) {
 $json_row[] = $row;
} 
 
echo my_json_encode($json_row);