There’s a lot of different steps to go through and tools to use to go from code on your computer, to an app on your phone, to an app available to the world on iTunes and Google Play. The vast majority of my mobile application development is done with Sencha Touch and PhoneGap Build and over time I’ve refined the processes I use to develop applications more efficiently.
1. Sublime Text
The life of my applications begin in Sublime Text 2. Previously my editor of choice was Notepad++ but I’ve been really impressed with Sublime. It’s a simple, clean editor with a ton of useful keyboard shortcuts (global code searching, higlighting etc.). It can also be extended with a ton of different community generated extensions – so you can customise it just about any way you can imagine.
Sublime Text is free to trial for as long as you like, and then you can buy a lifetime license for $70.
2. Google Chrome and the Chrome DevTools
Sencha Touch allows for a pretty simple development workflow – most debugging can be done directly through the browser. I use the standard Chrome DevTools primarily for debugging, but I’ve also added the Sencha App Inspector plugin to my toolbox.
The ‘Elements’ tab allows me to inspect the DOM (Document Object Model) of my application, the ‘Console’ shows me any errors or warnings that are being generated and the ‘Network’ tab allows me to inspect requests being made to a server. Between these three tabs I don’t need much else. You can get really advanced with debugging in Chrome though, check out the first video in this post for some really cool tips.
3. Remote PhoneGap Build
This is where the development workflow gets a little trickier. Being on a Windows computer, I use PhoneGap Build so I can create apps for both iOS and Android (PhoneGap through the command line interface requires you to have a Mac for iOS apps). This means that when I want to start testing out functionality provided by PhoneGap I need to send my app off to the PhoneGap Build servers to be built, then re-download and install on a device for testing.
To help with this process I have my apps set up to be built and sent off to PhoneGap Build automatically from the command line. However this still requires that I then download the resulting file from the PhoneGap Build website and install it on my device – which can be time consuming (especially when my unreliable Internet service is having a bad day). This brings us to the next step in the process…
4. Hydration (sometimes)
Hydration bypasses the need to manually download the app from PhoneGap Build and install it on your device (after the initial install that is). When you activate the Hydration setting in PhoneGap Build your app will be built with a nifty little feature included. After installing it on your device the first time, the app will then check for updates from PhoneGap Build whenever it is loaded. If it detects a newer version has been uploaded then it will give you the option to update your app directly from the phone.
This can be great not only for your own development workflow, but also for improving the testing process. If you’ve got 10 testers on board it’s much easier to have them update from a Hydrated app instead of having to constantly send them updates that they need to manually install.
As good as it sounds I’ve also had some frustrating experiences with Hydration, and sometimes it seems to break things. Currently it won’t work if you are using the splash screen plugin (a plugin I am fond of) and things sometimes seem to not update properly.
It can be an extremely useful tool, but your mileage may vary.
5. GapDebug
If I’m not using Hydration then [GapDebug is what I use to install applications on my device][7]. GapDebug bypasses iTunes (which I hate with a passion), you can simply drag and drop the app onto your device listed in GapDebug and it will install it. This is a lot faster than dealing with iTunes.
That’s far from the most valuable thing GapDebug provides though. If you keep your device connected, you can use a web inspector to debug your application. This is essentially exactly the same as Chrome DevTool except you can debug whilst the app is installed natively on your device. This makes it possible to test the PhoneGap functionality that we could not through a desktop browser.
6. Photoshop
If we want our apps to look really professional then we’ve got to include some slick graphics at some point. Aside from resources needed for the general app design, we need to create icons and splash screens for submitting to the app stores.
I have a bit of experience in graphic design (it was actually my original passion before jumping into coding) so I do most of the graphical work myself. I primarily use Photoshop through the Adobe Creative Cloud. This costs me about $10 a month, and is hooked to the same account used for the PhoneGap Build service which is handy.
6. Mac in Cloud
One of the most frustrating things about developing iOS apps on Windows is this: you can build absolutely everything, create all the certificates and provisioning profiles you need, generate the final .ipa file for submission to the app store and prepare your app store listing – but you can’t actually submit the app without a Mac.
Apple requires that iOS apps are submitted to the app store through XCode or Application Loader which is not available on Windows. This means that you need a Mac for about 5 minutes just to upload your .ipa file.
To get around this I use a service called MacInCloud. Essentially it allows you to use a Mac remotely from your Windows (or other) computer. The experience is painfully slow (perhaps because I live in Australia) but the whole process only takes about 5 minutes so it gets the job done.
I bought $30 worth of prepaid credits (it will cost you $1 an hour this way) and am yet to run out. Just make sure you get the job done and log out as soon as you can to save some money!
What about you?
Give us a run down of your work flow in the comments below!
[7]: http://www.joshmorony.com/genuitec-release-epic-debugger-gapdebug-for-phonegap-apps/ ‘Genuitec Release EPIC Debugger ‘GapDebug’ for PhoneGap Apps’