Mobile Zone is brought to you in partnership with:

Ivan Ross is currently an independent consultant working with mobile projects. Previously worked as lead developer at DevExpress making .NET components for data mining. I'm lazy to do the same task repeatedly so I write scripts to do that task for me. I'm impatient to wait for my code to run so I rewrite the code to improve performance. I always answer Yes! when someone asks if I can do something. Then go find out how to do it;-) Ivan has posted 2 posts at DZone. You can read more from them at their website. View Full User Profile

How to Build an iOS & Android App in 24 hours with HTML5 and Cordova

02.12.2014
| 31597 views |
  • submit to reddit


What can one create during the New Year and Christmas holidays? As it turned down – quite enough. Even if you have two kids and a bunch of family members whom you want to visit. The only thing you cannot accomplish in time is to finish an article for Dzone. It takes a lot of time, nearly the entire January.

By the 5th of January I had a laptop and a couple of days to spend on some development. Having estimated what I can do here, I decided to create a mobile app that would work faster than the original. For this, I needed to find communicative creators of a popular app.

Hence, I found a “Spender ” app in the App Store. It is a simple app for tracking your budget. With it, you can estimate how effectively you spend your money in the end of each month. By the 5th of January, this app was in Top-10 in the Russian App Store. I also found their dev-story on iphones.ru. 

In their dev-story, the developers wrote that after completing their previous project, they had three-four free days. So, they decided to create a new app during this free time. Their Product Manager and programmers helped them with positioning the app and its key features.

This encouraged me and I began to think how to create nearly the same app in 2 days.

Note: the original app was updated in the middle of January, and now it looks a little different from my app. Anyway, you can find its screenshots in the dev-story.

I already had the experience of mobile app development using C# and Cocoa. Since this was my personal free time, I wanted to use it with maximum effectiveness. Even If I didn’t succeed, I was eager to learn a new framework or programming language.

I was working for DevExpress from 2006 till2011 and have been reading their announces since I left the company. So, I knew that they created a mobile js-framework based on Cordova/PhoneGap. They made it after I left the company, so I was curious to try it.

The Gartner research company reports that by August, 2013 most of the enterprise mobile software was created using PhoneGap or PhoneGap-based products (like Kony). From my consumer experience, it's far from true. Maybe I was wrong?

I'm not so good at HTML and JavaScript. I can create mark-up with stackoverflow.com and I can write simple selectors with jQuery. I can also find the required information in their documentation. In other words, HTML+JS was a gap in my knowledge and I was ready to fill it or gain some experience.

Thus, I planned to create a cross-platform application that could become an advantage over the original iOS-only Spender app. Moreover, I wanted to spend my time in the most effective way. On the one hand, I had a potentially effective JS framework, on the other – a lack of JS experience. I hoped that the JS framework advantages could balance my poor experience.

Since I like to use a VCS during development, I'll try to recover my progress.

You can download complete apps here:
iOS , Android 

I'm not sure I can provide public access to my repo, because it contains images I bought from Fotolia and third-party libraries, each with a difference license. I'm not a lawyer, so I’d prefer not to take the risk. The most curious of you can take a look into the app bundle itself. JS wasn't minified.

Place: Tula, Russia, Date: January, 5, 2014

+20 minutes Spent on installing Node.JS and Cordova CLI

+10 minutes Downloaded a template app from Cordova. Added a template from PhoneJS. Created a Git-repo, registered it in WebStorm. Added a new record to the httpd.conf in order to have an ability to debug my future app in the browser.

+38 minutes Changed the app namespace to "io.nikitin.ThriftBox". Added navigation. PhoneJS is an MVC-framework. Each app screen is represented as a collection of HTML markup (Views) and fabric function (ViewModel). Here is how it looks at its simplest

<div data-options="dxView : { name: 'home', title: 'Home' } ">
    <div data-options="dxContent : { targetPlaceholder: 'content' } ">
    // View Content
    </div>
</div>

and

ThriftBox.home = function (params) { // Request parameters taken from uri
  return {}; // ViewModel instance
};
Then View and View Model are bound via knockout-bindings. To be in time, I create only two screens: expense input and monthly expense report.


+4 hours 20 minutes Here I got stuck for the first time. I couldn't create a markup of digit buttons.
The original app had a huge keyboard that looked like a calculator or dialer.



I found out that it was not that easy to create such a keyboard, even using a table tag. In the iPhone Retina screen, 1px borders between buttons changed their colors after clicking on the buttons. On my iPhone, the difference in colors was very noticeable. I had to invent how to tackle this.


I tried to implement buttons using divs. But I couldn't achieve a border width of 1 px and make all buttons look equal in different screens. Three hours later I gave up the idea of using divs and moved forward.

Published at DZone with permission of its author, Ivan Ross.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Anthony Bennis replied on Wed, 2014/02/12 - 4:47am

Interesting insight into the development. Thank you. 

The fastest development for me is to use GWT and it's canvas element (so I can draw the UI with vector graphics), compile to JS, and package with PhoneGap. As a Java developer, that has a very low learning curve and I can start programming the features almost immediately. 

I'm avoiding writing JavaScript which seems to be against the current trends :)

Anyhow, well done on this project.

Ivan Ross replied on Wed, 2014/02/12 - 10:50am in response to: Anthony Bennis

Thanks for the feedback! How good is GWT in terms of performance? PhoneJS seems to require at least iPhone 4S to run smoothly.

Sergio Samayoa replied on Thu, 2014/02/20 - 10:09am

I just took a look at the DevExpress product/ (I was a big fan of their Delphi components BTW) and looks promising but I have been spoiled by the Sencha's frameworks.

Have you seen/used ExtJS and/or Sencha Touch?

Take a look: www.sencha.com

The learning curve is harder but are, IMHO, the best JS frameworks for JS LOB application development.

Rico D'amore replied on Thu, 2014/02/20 - 2:15pm in response to: Ivan Ross

HI,

I use Mgwt (mobile-gwt) with cordova, and it is quite nice, and works on ios6 and 7.  These are the only versions I have deployed to.  It is very quick and intuitive to any Java developer especially if you are familiar with gwt-mvp.  I only deploy to the latest Iphone and IPads.  That's all we have here.  

We use it to deploy enterprise apps within my organization and even wrap the product once more to fit within a security framework called Good.  It all works very well.  

This said there is some worry about how long the good vibes will roll on.  Gwt seems doomed.  The activity on mgwt has dropped very much and a lot of people are really embracing Node.js and Angular.js for various reasons.  While I love gwt and use it a lot I'm very worried for it's future, and this has driven me to start developing with Angular and Node.  GWT has been so good to me for so long, and now I just don't know.  Google dropped GWT to open source and is no longer driving its development.  Danielle Kurka (MGWT creator) seems a distant resource in the MGWT google groups.  All bad tidings I believe.  

  

Ivan Ross replied on Fri, 2014/02/21 - 11:39am in response to: Sergio Samayoa

How fast are they? Do you have anything in the App Store or another public place for download?

Snehal Masne replied on Tue, 2014/05/20 - 2:36pm

Here is how to create an Android project and run a debuggable version of the app. You'll also get some fundamentals of Android app design, including how to build a simple user interface and handle user input.


Before you start, be sure you have your development environment set up. You need to:
1. Download the Android SDK.
2. Install the ADT plugin for Eclipse (if you’ll use the Eclipse IDE).
3. Download the latest SDK tools and platforms using the SDK Manager.

Android applications are primarily written in the Java programming language.
During development the developer creates the Android specific configuration files and writes the application logic in the Java programming language.
The ADT or the Android Studio tools convert these application files, transparently to the user, into an Android application. When developers trigger the deployment in their IDE, the whole Android application is compiled, packaged, deployed and started.


Reference : http://www.techproceed.com/2013/12/learn-how-to-develop-android.html 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.