Tutorial: iOS Twitter app in 60 seconds using MoSync and Sencha Touch

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

Introducing Sencha Touch – JavaScript Framework for Mobile Devices

Sencha Touch is a JavaScript framework to write HTML5 based web applications targeted for touch based devices. It is specially designed to support touch based devices. Sencha Touch is from the same people who are behind ExtJs and Sencha Touch 2.0 is largely based on ExtJs codebase. You can find more information about Sencha Touch on www.sencha.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!

  1. Does the twitter app you made have options to sign in,see the timeline,see followers and compose tweets?

  2. It’s a basic example and do not have authentication and tweet posting features. However, if you understand the example and Twitter API, you can develop other features on top of it.

  3. Thank you so much for this tutorial!! Much appreciated!

  4. does this solution works on Android ? I tried it with several different Sencha examples, and didn’t work here.
    While opening the index.html files of these examples it only shows the call to development.js e nothing about sencha-toush.js or sencha-touch-debug.js files.
    Also the Sencha examples only works well with Firefox, so neither Maxthon or Chrome or Opera are running the demos here.
    Something wrong am I doing ??

Leave a Comment

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Get Adobe Flash player