Category: Mobile

Showcase on Socket IO for Web and Mobile

This is the showcase of Socket IO Library (written in Node JS) which brings the real time web sockets for the web and mobile.

I had created a video to showcase the features.

In the demo, the sample application is a stock application that have list of companies along with the data. The data will be changed every second and the changed data is reflected on web pages, iPhone Simulator, and my New ipad (Real device) in real time.

I had deployed the server side page at here: http://deep-moon-3881.herokuapp.com/, for you, you can open multiple browser window to see the changes of data. But the key here is the changing data can be broadcasted to native mobile apps instead of web HTML.

Walkaround for Titanium 1.8.x deploy apps on Xcode 4.3 and iOS 5.1

Xcode 4.3 and iOS 5.1 are released and believed that many developers had upgraded to that. However, Titanium 1.8.x still not officially support Xcode 4.3 and iOS 5.1.

By the way, this is the walk around for Titanium 1.8.x to deploy apps on Xcode 4.3 and iOS 5.1, learn more at http://developer.appcelerator.com/blog/2012/03/titanium-and-xcode-4-3-revisited.html

The detailed steps that I had gone through:

1) Make sure if you have Xcode 4.3.1 installed, and then, you may execute:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

For me, I switched to /Developer, where my Xcode installed there.

2) Kindly download ios-sim, and copy over to the Titanium SDK path as listed in the link.

(However it is not enough to work in my machine and need following steps)

3) Open Titanium Studio, do a full clean rebuild for your apps, do not care if your iOS SDK Version just showing 5.0, but not 5.1.

4) After that, open Xcode 4.3.1.
If your apps name is MyApps, you probably see MyApps, MyApps-iPad, MyApps-iPhone, MyApps-universal in your schemes. Kindly select MyApps and choose your proper device (ipad or iPhone).

5) Modify your Project Build Settings -> Architectures, make sure Debug / Release all use Standard (armv7), and select iOS 5.1.
For Targeted Device Family, if you want to deploy your apps on iPhone, then you choose just iPhone, or iPad, or both (iPhone/iPad).

The Step 3 – 5 worked on my machine. Now I successfully deploy my existing iOS Apps on my iPhone and new iPad that running iOS 5.1.

Note: Titanium Version 2 that will released in April was announced to support iOS 5.1.

Titanium Studio 1.0.8 Update greatly improve module packager process

With latest Titanium Studio 1.0.8 update and its latest SDK 1.8.1, it is now easier to create Titanium iOS module and packaged into Titanium mobile apps. I am able to code the iphone torch controller (flash light) in Objective-C and compiled into module and invoked from Titanium JavaScript API.

Just to remember to change the Apps Project release to use armv7 (standard).

Last three weeks I tried to do the same thing in older version of Titanium Studio but I failed to make it even I followed the completed steps for manually creating module skeleton templates using command utility tool.

The latest Titanium Studio 1.0.8 Update really improve module packager process.

Exploring on Word-like Editor on Titanium Mobile Apps

Past few days, I am authoring a Titanium mobile module, a word-like editor (WYSIWYG editor — What you see is what you get), that can be easily integrated into the mobile apps whenever you need it. In order to test the editor functionality, I tried to make a nearly complete document apps, that allows user to create, manage document, and then create the contents by using this word-like editor.

By hitting the ‘+‘ icon on the top right side, the options dialog is opened where you can create a file or folder that manage the document files.

Once you clicked ‘Create a File’, the following word-like editor will be shown. Woaw!

You can edit and formatting the text using ‘Bold‘ or ‘Italic’ icon, insert URL, images, and inserting a bullet list. More editor features will be added.

Aside from the editor feature, in order to make this document apps more useful, I’m also adding in value-added feature such as

  1. Previewing the documents in HTML web page.
  2. Export the document into PDF format, and then you can email to your friend.
  3. Download the web contents from external URL into word editor.
  4. Save the document to Dropbox shared folder.

In the future release, I would like to make more feature such as ‘Import from and Export to Office Word format’, in order to make more useful for my sister who is iPad user.

Document conversion in different formats is the most challenging part. I will try my best to make the feature natively worked on local mobile, however some of the conversion job still requiring a server side program.

I planned to publish the word editor module in the future in order to let the other developers to integrate this editor into their mobile apps.

Integrate this word editor into your apps is easy, here is a snippet of code to show how to do it.

// include the editor titanium library
Titanium.include('/source/lib/editor/editor_titanium.js');
// initialize the editor titanium library class
var ed = new editor_titanium();
// initialize the editor feature and getting an editor handler
var editor = ed.init_editor({
// setting width and height of the editor, set as auto it will try to fit the window
width : 'auto',
height : 'auto',

// this method will be called when editor.save() had been called
// content = the fetched document content string you can use
success : function(content) {
saveContentToDatabase(content);
}

,

load : function() {
var content = getContentFromDatabase();
editor.setContent(content);
}
);

// to include the editor into your Windows, or views
win.add(editor.editor);
// or
view.add(editor.editor);

// to save the document explicitly
editor.save(); // then success callback will be called

// to set document content explicitly
editor.setContent('hello this text will be set to document');

// to get document content explicitly
var content = editor.getContent();

It worked like a charm.

Conclusion

I explored a word like editor module that can be integrated into Titanium mobile apps. I planned to publish the module into Appcelerator Marketplace for other developers to integrate it into their apps. I had shown a snippet of code on how to use this editor.

Titanium Image Filter Module

Titanium Image Filter Module, tiimagefilters, is a skeleton Titanium Mobile project that is able to perform image filtering after you taken a photo from your iPhone device.

It contains the native Objective-C code that perform algorithms for image filtering, and then provided the Titanium JS bridge proxy made it able to be invoked from JavaScript.

Check out its source code from Github: https://github.com/tzmartin/tiimagefilters

brain.js on Titanium Mobile

brain.js is a Node JS module library serves neural network. It is normally used for pattern recognition, machine learning, forecasting and business intelligence.

Titanium mobile is a native mobile development platform using JavaScript.

Titanium mobile allows to include modules that conform to CommonJS Specification. Therefore, I just wonder if it is possible Titanium mobile run a neural network by including brain.js which is a Node JS module. And then, I managed to include it and have made some test training inputs and get the test outputs.

The exciting part is the training data sets can be shared among server (Node JS server side), and client (Titanium mobile, with iOS, Android), because they both use same CommonJS module brain.js.

Short Notes about including brain.js on Titanium mobile:

1) you use require to include the brain.js module by must provide full absolute path to the main entry js, for example: require('/path/to/module'), with corresponds to /path/to/module.js. you should change all the require portion among all the library codes to use absolute path instead of relative path.

2) try to separate out the callback function after exports.xxx.
For example, exports.xxx = function() {}; doesn’t work, you should write this as:

var callback = function() {};
exports.xxx = callback;

3) sample code to use brain.js:


var brain = require("/path/to/your/brain");

var trainInputs = [];

trainInputs.push({input: [1,0,1,1,1,1,1,0,1], output: [0.08]});
trainInputs.push({input: [1,1,1,0,1,0,1,1,1], output: [0.09]});
trainInputs.push({input: [1,1,1,0,1,0,1,1,0], output: [0.1 ]});
trainInputs.push({input: [1,0,1,1,1,0,1,0,1], output: [0.11]});
trainInputs.push({input: [1,0,0,1,0,0,1,1,1], output: [0.12]});
trainInputs.push({input: [1,0,1,1,1,1,1,0,1], output: [0.13]});
trainInputs.push({input: [1,0,1,1,1,1,1,0,1], output: [0.14]});
trainInputs.push({input: [1,1,1,1,0,1,1,1,1], output: [0.15]});
trainInputs.push({input: [1,1,1,1,1,1,1,0,0], output: [0.16]});

var net = new brain.NeuralNetwork();
net.train(trainInputs);
var input = [1,0,1,1,1,1,1,0,1];
var output = net.run(input);

As you can see the training data sets trainInputs is a JavaScript Array and it can be easily shared to Node JS server side using JSON-serialized format and in Node JS server side you can do the same code which Titanium mobile used also to manipulate the training data sets.

Titanium Mobile supports Blackberry Platform Beta Preview

Titanium Mobile now supporting Blackberry Platform for Beta Preview Release. It is meant that, now, you can use Titanium Mobile Javascript to write “cross-platform” apps targeted on three most popular mobile platform, iOS, Android and Blackberry using same codebase. Notice that I quoted “cross-platform” is because we should note that even we write same JavaScript code but it render natively (differently) on the differ platform, and even some of the API only limited to specific platform, and you also can code the custom module to extend the original platform feature.

Current limitation is that Blackberry development can only be taken place in Windows because due to the fact that the Blackberry simulator is an EXE and only executable in Windows. But Mac has a Bootcamp to load Windows so should not be a problem. (While iOS development only supports Mac, and Android development supports both Mac and Windows, stand at the middle.)

Have a getting started to setup Blackberry platform here and view the list of APIs available that supports Blackberry platform.

Good to hear that Titanium mobile try experimenting integration with Blackberry platform because it greatly reduces the development effort to develop apps targeting these three mobile platforms, and you, as a developer you can just use the web language that you very familiar with need not to learn the native Objective C or Java. I hope this Blackberry supports can be mature soon and I would like to test it out in coming days and to see if it is feasible to use it for my own apps or my works.

Use of Titanium Facebook Graph API with helps of Facebook Graph Explorer

Facebook Graph Explorer provides useful tool helps developers to test it out the Graph API easily by issuing a REST-liked Request URL, HTTP Method (GET, POST, DELETE) to query or posting to the Facebook Objects.

Titanium mobile is a development platform to develop native mobile apps using JavaScript API.

Titanium mobile has delivered built-in Facebook APIs that greatly helps developers to integrate their mobile apps with Facebook. The Titanium Facebook API supports issuing an old REST API or a new Graph API to interact with Facebook Platform.

I tested out Facebook Graph Explorer and found that it is very helpful that guided me in a straight way to issue Titanium Facebook Graph API to query the Facebook Pages feeds, posting feeds and the posting feeds comments on behalf of user.

I had written a snippet of code in order to prove that it is worked.

Titanium Mobile JS Code:


var win = Ti.UI.currentWindow;
Titanium.Facebook.appid = "70518428114";
Titanium.Facebook.permissions = ['publish_stream', 'read_stream'];
Titanium.Facebook.requestWithGraphPath('70518428114/feed', {message : 'I love you my angels'}, 'POST', function(e) {
var result = e.result;
result = JSON.parse(result);
var newid = result.id;
Ti.Facebook.requestWithGraphPath(newid + '/comments', {message : 'I love you too darling'}, 'POST', function(ce) {
alert("Had made a Facebook comment");
});
});

The Titanium code above is trying to publish a feed on a page using Titanium Facebook Graph API, and then the result of new feed ID is returned which used for the next Graph API request to create a comment for that feed.

In the function Titanium.Facebook.requestWithGraphPath, we provide first parameter as the graph URL request, followed by the data to be passed by, and then to specify the HTTP method parameter (GET, POST, DELETE), and then followed by the callback parameter which JSON result will be returned. You can use these three HTTP method parameter to issue request to same graph URL request to perform different thing, such as to use GET to query out the list of data, to use POST to insert or update data, and to use DELETE to delete the data. It is REST-ful.

iPhone Simulator Print Screen showing the alert message:

iPhone Simulator showing alert box after Facebook Comment created

Facebook Print Screen showing the Facebook feeds and comments had been posted by Titanium Facebook Graph API.

(Click the thumbnails to see full image preview)

Conclusion

Facebook Graph Explorer greatly helps developers to test it out the Facebook Graph API and Titanium mobile had delivered its simple-to-use Facebook API module that made integration of our mobile apps to Facebook Platform become very easy.