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

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

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.