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.
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.
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.
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:
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.
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.
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.
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.
Most Recent Posts
Special Recent Posts
January 14th, 2014
Right so I've made the leap. After quite a ride, and some cool adventures with Codekit, I've deci[...]
January 13th, 2014
So... you're a fucking muppet when it comes down to node, doing shit in the terminal, gems and so on[...]
December 23rd, 2013
A quick and pointless operation (really) which doesn't bring much to my development workflow nor rev[...]