Mobile App Development with MoSync
By Mikael Kindborg, firstname.lastname@example.org
This is a first draft, feedback is welcome!
This guide takes you through the steps involved in developing a mobile application, from getting started to publishing your finished app.
What you need:
- Laptop/desktop computer with Windows or Mac OS X
- A mobile device or emulator: Android, iPhone/iPad/iPod touch, or Windows Phone
- 5-20 hours to get started
- Bowl with favourite snacks (optional)
Step One: Download MoSync
Start out by downloading the MoSync Software Development Kit (SDK). This is an Eclipse-based programming environment that you install on your computer.
Potential confusion: There are two downloads, the MoSync SDK and MoSync Reload. In this guide we will use the MoSync SDK. (Reload is also way cool, but you will need the SDK to be able to build and publish your app.)
Step Two: Install MoSync
You need to have Java installed to run the MoSync SDK.
For Mac, the built-it Java version should work. If not, upgrade it.
Potential hassle on Windows: If the installer complains about Java, make sure you have Java installed. For Windows, the 32-bit version is the safest bet.
Step Three: Build your first app
Next, launch MoSync Eclipse and create an app from one of the templates that are provided and run it on your device.
Potential hassle: As of writing this guide, not all of the MoSync APIs are supported on Windows Phone. Consult the MoSync documentation to make sure that the APIs you wish use are expected to work on your target platforms.
Step Four: Explore how a MoSync project is structured
Take some time in Eclipse and explore how a MoSync project is structured. It is useful to understand the file and directory layout, as you at times may need to add/edit files manually.
To know where on the disk your project is located, right-click the project name in the Project Explorer, and select Properties. Under the Resource section in the Properties dialog box you can see the path to the directory where the project is saved.
Potential confusion: If you update/add/remove files outside of Eclipse, refresh your project view in Eclipse by pressing F5, otherwise Eclipse will be out of sync with the file system and build errors may occur.
Rebuilding the project in Eclipse and deploy to a device takes some time, which is why the trick of using a web browser to preview your project can be useful, cutting time for each edit/test run from minutes to seconds. The drawback is that you do not get the same look and feel as on a device, and you won't get any MoSync functionality, such as access to device services. This is when you will want to use MoSync Reload, which allows you to quickly develop your project using a device. But you still need the MoSync SDK (Eclipse) to build the actual app to be able to deploy it to an app store.
Mobile Web UI design and programming
HTML5Rocks is a community driven site where you can learn about HTML5 and mobile development. Making a Web UI that scales to different screen sizes is very useful when doing cross-platform mobile app development for phones and tablets.
The articles A tale of two viewports - part one and A tale of two viewports - part two, explain how the coordinate system used by mobile web browsers works. This is useful to know when doing mobile Web UI design.
Mobile Web UI frameworks
One framework missing from the above comparison is Zepto.js, which is a trimmed-down version of jQuery with enhanced functionality for mobile devices.
Canvas and touch events
The HTML5 canvas element gives mobile Web UIs a flexible way of rendering graphics. Mozilla has a Canvas tutorial, and a tutorial covering [https://developer.mozilla.org/en/DOM/Touch_events](touch events).
HTML5Rocks has another touch event tutorial.
Accessing device functionality
MoSync comes with several Wormhole tutorials and example programs, here is a selection:
WormholeDemo is an example app that shows several parts of the API.
Step Six: Become creative
There are lots of ways to come up with great ideas and designs. My personal view is that there are two ways to approach the design process:
First approach is to design all of the app as the initial step, do detailed graphical design and work out exactly how the app should work, then implement it (this is bound to fail).
Second approach is to take some existing example app, then start experimenting and playing around with it, working out and refining your idea and design as you go along and code it (much more likely to succeed).
In the second approach you work with the medium, in the first you risk ending up working against it, spending endless hours trying to implement the exact design you have made up, constantly bumping into stumbling blocks on the way. When working with the material, you explore its possibilities, and discover new design ideas as you go along. Interaction designers talk about "exploring the design space", which means trying out different variations and combinations of an idea or design.
My advice is that you for your first mobile app project choose the first approach. Pick an idea or some twist of an existing idea, and move along in small steps, experimenting on the way. You should be able to move along much quicker by experimenting with an existing template or example app, compared to making a completely new design from scratch.
The approach of designing by coding can be especially productive if you are new to app development and not yet up to speed with the programming technologies available. For bigger projects, however, doing an overall design before coding is advised, but I would still recommend experimenting as you go along also in this case.
Step Seven: Create an icon for your app
Step Eight: Publish your app
To publish your app can be easy or hard, depending on the platform. Android is flexible and has several options available. iPhone/iPad and Windows Phone have official app stores and reviewing procedures that need to be confirmed to.
On Android, you have several choices for publishing apps.
Google Play is the main app store for Android (previously called "Android Market"). When you publish your app on Google Play you can charge for it (up to 200 USD), or make it available for free.
There are alternative app stores for Android, where you can publish your app, for example AndroidGuys (which is a MobiHand store). You can also find articles on the Internet that list alternative app stores.
Another category of app stores is local stores. In Sweden, for instance, there is an Android app store called AppLand (the name is a play with the word "Lappland", which is the name of the biggest province in Sweden).
If you wish to publish your app on your own website, this is really easy to do. If you have a free app, or an in-house corporate app, this can be a good option. However, if you want to sell your app, an app store is a much better option.
To publish an Android app on your website, just build your project in Eclipse, and upload the resulting .apk file to the site (you can find the path of the .apk file in the Eclipse console output window, at the end of the build output). User can then install your app by entering the URL of the .apk file in the web browser of the device.
For users that have a Barcode Scanner app, a QR-code that points to the URL of the .apk file is a handy way to install your app. You can create a QR-code at for example kaywa.com. Just copy and publish the generated image on your site (or anywhere on the Internet, or on paper or a T-shirt).
For users that have no QR-code reader, they can open the web browser on the device and type in the URL to the .apk file, or visit a web page and click a link or button pointing to the file.
If you use GitHub, it is easy to publish the .apk as a downloadable file, and a QR-code will be created automatically for you.
iOS (iPhone, iPad, iPod touch)
Apple has documentation that describes how to publish apps for the iOS family of devices on the Apple App Store.
Microsoft has information about how to publish apps on Windows Phone Marketplace, the official app store for Windows Phone.
Step Nine: Market and improve your app
Once your app is published, people start using it and users may share their experience with it, with you and with each other. If your app will become a success or failure is not written in stone, determined by destiny. You are the prime force for making your app successful, by listening to users and constantly improving your app. You also have the responsibility to market your app, to make it known in relevant user communities.
The mobile app market shares several characteristics with the shareware market. Author Steve Pavlina has written about what it takes to make successful shareware, and much of this is applicable also to mobile apps.