by Flo Preynat

Another ‘wandering through the unknown’ post, with today a few baby steps into the world of mobile application design. Building mobile applications (or at least attempting to build mobile apps) is something I am gonna have to do very soon. First of all because it’s GOT TO BE an exciting thing to learn (I guess it’s a very different world from building websites altogether), and also because it will become more than handy to know about the subject business wise.

For people who like me come from a web design/development world with HTML/CSS/JS as sole base partners, but still want to discover this very scary topic, I suggest you start with Apache Cordova, a platform for building native mobile applications using those very same languages.

Apache Cordova is open source, and the engine powering PhoneGap, the mobile development framework produced by Nitobi and since, purchased by Adobe.

Concept

In a nutshell, you do your usual web development tasks (obviously you’re gonna have to think about the position of your elements as far as your device is concerned), then you compile your app with Apache Cordova, which is gonna take your html (and the rest) and build it into a native ios/android/… app.

Disclaimer

I dived into the documentation today, and knew absolutely f*** all about it a few hours ago, and as I’m only scratching the surface here, I’m just going to concentrate on getting setup on a mac, and getting started with an IOS app.

So you’re gonna have to make your own research if you’re on a windows machine, and/or if you wanna work with the Android SDK.

Installation

Obviously you need node and npm installed. If you follow my blog posts, and have read and tried the few stuff I talk about, you should have it in there.

npm install -g cordova

is what you need to run to get setup with Apache Cordova.
Test that the install went as planned with:

cordova --version

Today’s current version is 3.1.0-0.2.0, and it is what the terminal should return.

Go to the folder of your choice and run:

cordova create project com.yourdomain.project

Use the project name of your choice and the adequate reverse dns.
eg: you work at Codepen, and want to call your project banjo, you go with:

cordova create banjo io.codepen.banjo

If you take a look at your project folder, you will see that some folders got created, including a www one where you’ll find the typical web dev structure such as an index.html file and your various folders for css/img/js and more. You’ll also get a config.xml file where you’ll be able to fine tune your project.

If you open your index.html, you’ll see that it’s just a basic html page waiting for something to happen, in this case, for the mobile device to be detected.

Apache Cordova tutorial

Adding an SDK

As mentioned above, I’m only taking a look at the IOS devkit. If you haven’t got Xcode installed, you will be needing it. Grab a copy of it from the App store, and once it’s been installed and run at least once, go to the terminal, go to your project folder, and run:

cordova platform add ios

This installs the IOS sdk in the platforms folder, and if you browse the ios folder, you’ll see a similar www folder and a .xcodeproj file which you’ll then be able to open in Xcode.

Apache Cordova tutorial

apache cordova tutorial

Go ahead and play

That’s you setup. It’s now up to you to start from scratch, delete what’s already on your index file, and in your css/img folders and treat this project like a normal web dev project. I went ahead and plugged in Codekit, installed compass, created a scss folder and started designing a basic web page with a few things on it.

Once you’re happy with what you have, go ahead: compile and run it in the IOS Simulator through Xcode.

apache cordova tutorial

I’m going to leave you with this. Have a play around. I bet the learning curve for building nice web apps is pretty steep, and you will certainly need to dive into heavy js programming, but at least you’ll know where to start with Apache Cordova.

So long.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Make Google Charts responsive

Make Google Charts responsive

March 19th, 2014

A quick blog post on how to make Google Charts play nicely in responsive mode. Nothing close to rock[...]

Codekit 2 : even more steroids for us web developers

Codekit 2 : even more steroids for us web developers

March 17th, 2014

I was on holiday when Bryan released the new version of Codekit and never had the chance to to check[...]

Open terminal from folder in finder

Open terminal from folder in finder

January 27th, 2014

A quick one nudged my way by Adrien Joly this morning. You can now open a terminal window from a [...]

A look back at Wordcamp Paris 2014

A look back at Wordcamp Paris 2014

January 22nd, 2014

I went to Wordcamp Paris last week. The event was held On Friday 17th January at MAS Paris and Satur[...]

Gruntjs Boilerplate: my dummy-proof step-by-step guide

Gruntjs Boilerplate: my dummy-proof step-by-step guide

January 14th, 2014

Right so I've made the leap. After quite a ride, and some cool adventures with Codekit, I've deci[...]

Comments

  1. Nitin Surana says:

    If ultimately, one has to use XCode, then what’s the benefit of Cordova ?

    I’m unable to understand the purpose of cordova. I thought – build for one & deploy on all & hence, the mobile-app should be written in cordova API right ?

    Can you please expand the post by writing a complete cordova project sample (a generic one) ?

    • Hi Nitin,
      You need to have Xcode in your system to be able to build an iOS app, that’s all. The purpose of Cordova is to take an html/css/js project and make an app out of it. You don’t need to worry about API, you just let Cordova do the work for you.