Last week, I had the chance to attend to a mobile app workshop put on by Apigee. It was a really useful workshop, intended for web developers who want to make mobile apps but don’t necessarily want to use a native language like Objective-C or Java. Although I’d love to learn another language, for right now, it’s better I learn one really well, than be a dabbler in many.
This is the basic setup for creating a mobile app using PhoneGap. You should have Node.js, PhoneGap and XCode installed.
- Use the Emulation feature in Chrome Developer tools! This was my favorite part. I use the developer tools everyday and had no idea this existed. Open up your developer tools (I usually just right click a page and press ‘inspect element’). Then, press Esc. You should have a small window underneath pop up. Press Emulation. Find your device and press emulate. And.. wallah! There you go: that’s how your app would look on a mobile device, Kindle, etc.
phonegap create /pathtoyourproject. You should get a response saying [phonegap] created project at /pathtoyourproject
- You should now have a new folder of your phonegap project with a few files inside: merges, platforms, plugins, www. Inside, the www file (in the root, not in platforms/ios/www). Inside the (root!) www folder, delete the files (js/img/css, etc.). Leave the config.xml file though. Place your own project files inside (your own js/img/css etc).
- Next, open up XCode. In XCode, open up your .xcodeproj file. To do this, go to your phonegap project folder. Go to platforms/ios and find your .xcodepro jfile. For example, HelloWorld.xcodepoj.
- You can now press Run at the top and do a simulation of your app.
And there ya go ladies and gents!
Here’s a picture of the app we worked on — a simple bucketlist app that lets you keep track of all the things you ever wanted to do.