Assumption for this video tutorial is that viewer don’t know Sencha Touch and MoSync at all, that’s why it is a bit longer than 60 seconds :;)
Introducing MoSync – SDK for Cross Platform Mobile App Development
MoSync is a cross platform mobile application development SDK which allows you to write cross platform apps for as many as 6 different platforms including iOS, Android and Windows Phone 7. Developers can develop their native UI web apps using HTML5 or native UI apps using C++. You can find more information about MoSync on http://www.mosync.com
Let’s get to work!
First step is to download MoSync IDE from www.mosync.com. You can download MoSync Mobile SDK or MoSync Reload which is specially written for HTML5 apps. I have used MoSync 3.0 Mac OSX version for this video tutorial.
The second step would be to have latest release of Sencha Touch with you, at the moment Version 1.1.1 is latest while version 2 is in developer preview only. You will need to give your email address to download free commercial version which I have already downloaded and unzipped on to my machine.
Let’s create our twitter client app. Open MoSync -> go to New Project -> Choose MoSync Project -> Choose HTML5 Project -> Choose HTML5 WebUI Project and then click Finish.
As you can see we have a HTML5 project ready for us now, it’s based on a template, so even if we don’t do anything and run it straight away on the iOS simulator, it will work for us!
A tip for you here will be that beside that you don’t need to configure anything on MoSync to run HTML5 apps, it come bundled with iOS simulator but you still need to have XCode installed on your machine to get it working, XCode is already installed on my MacBook at it’s default location and we can start using it straight away.
Now, back to our twitter client app, when you download Sencha Touch 1.1.1 and unzip the folder, you get examples folder in it, just open the examples folder, find twitter folder in it, copy it’s contents, go back to MoSync, delete all files from Local Folder and then paste the twitter folder contents in it. Then copy sencha-touch-debug.js from sencha touch folder and copy it also in Local files folder in MoSync. Then open index.html and change the path for sencha-touch.js file accordingly.
Now start you simulator again targeting iPad (because twitter example is not supporting iPhone resolution) and hey! you have your twitter client ready to go!
That is that easy! (I know this is cheeky)
Next time I will come back with a tutorial to target the same app to work on Windows Phone 7 and Android platforms.
Till then see ya!