My Workflow for Developing PhoneGap Applications

I am asked all the time “How do I get started developing PhoneGap applications?”. My normal answer is to advise people to check out the PhoneGap Getting Started Guides, which provide a great starting point for every platform. However after further thought, I’m not sure this is always what people are asking. Rather than “how do I get started?”, I think people are often looking for insight into the workflow for developing PhoneGap applications. Everything from tools to developer flow, to getting the app on devices. The Getting Started Guides are essential for setting up the initial project structure, but once you get that setup, you might be wondering “what do I do next?”. In this post, I’ll try to shed some light on the workflow and tools that I use when developing PhoneGap applications.

Know What You’re Going To Build Before You Build It

First and foremost – it is essential to have at least some kind of idea what you are going to build before you build it. If you just start hacking things together without a plan, the final result is seldomly great. Complete (pixel perfect) UI/UX mockups are fantastic, but you don’t have to have a fully polished design and screen flow. Just having wireframes/sketches are a great start. Heck, even a sketch on a napkin is better than starting with nothing.

The UX design/wireframes help you understand what you application should be doing from the user’s perspective, which in turn helps you make decisions on how you tackle a project. This can be purely from a HTML level, helping you figure out how you should position DOM elements and/or content. Or, it can help you gauge your project’s technical complexity – How many “moving parts” do you have, how much of the app is dynamic or asynchronus, or how do different visual elements need to work together? You can leverage this design/mockup to analyze the needs of your application and determine if a particular framework/development methodology is a best fit (Bootstrap, Backbone.js, Knockout.js, Sencha, jQuery Mobile, Angular.js, etc…).

When working with a designer, I use Adobe’s Creative Suite Tools for pretty much everything – wireframes, UI/UX designs, chopping up assets, etc… I’m currently working on a project that was designed by the talented Joni from Adobe XD. Joni designed everything in Creative Suite, and I’m using Photoshop to view screen flows and extract UI assets for the actual implementation.

UI Mockups in PhotoShop
UI Mockups in Photoshop
PS-ScreenFlow
Screen Flow in Photoshop

Note: This app will also be free and open source as a sample/learning resource for PhoneGap, including all of the design assets – I’ll follow up with another post on this later, once the app is available in the app stores.

If you aren’t a “graphics person”, or don’t have creative suite, there are a bunch of other tools that you can use for wireframing and/or sketching (but c’mon, Creative Cloud is only $50 a month). Here are several I’ve used with great success, but this is not a comprehensive list at all:

  • OmniGraffle – A drag & drop wireframing tool for OS X. This is fantastic for wireframing or documenting screen flows. In fact, the screen flow image shown in Photoshop above was originally composed in Omnigraffle, using the mockups created in Photoshop.
  • Visio – A powerful drag & drop wireframing/design tool for Windows – much like OmniGraffle, but for windows.
  • PowerPoint or Keynote – These aren’t just for presentations. They can be really useful for putting together screen flow diagrams, or annotating images/content.

Often people like to sketch out ideas & wireframes on their tablets, here are a few tools that I use for that:

  • Adobe Touch Apps – Adobe Ideas can be great for digitally sketching ideas.
  • iBrainstorm – A great app for collaboratively taking notes and sketching. I’m partial to this one b/c used to be on the dev team, and I wrote a good chunk of the graphics sketching logic.

There are a bunch of other tablet sketching apps out there, but I haven’t used most of them.

Coding Environment

Coding environments are a tricky subject. There is no single solution that meets the exact wants and needs for everyone. Some people chose lightweight text editors, some people chose large-scale IDEs, some people use designer-centric tools, and many of these choices are dependant upon which operating system you use or your background as a designer or developer. Since PhoneGap applications are really just editing HTML, CSS & JavaScript, you can use whatever editor you want. In fact, I know a several people that use vim as their primary editor.

Large-Scale IDEs

I’m a bigger fan of of using a complete IDE (integrated development environment) than I am of a lightweight editor, simply b/c IDEs tend to have hooks into more features/languages, etc… I know people complain about startup time, but there is no startup time if you leave it open all the time. :)

There are a few catches when talking about IDEs with PhoneGap. The first is that if you want to deploy anything locally to devices (without using PhoneGap Build), you have to delpoy using the IDE for the particular platform that you are targeting. That means Xcode for iOS, Eclipse for Android, or Visual Studio for Windows Phone, etc… However if you wish, you can use your editor of choice, and just use the IDE to deploy to devices locally. You can even share source code across several IDE installations using symlinks (which I describe here). I very often use this type of a configuration to share code between Xcode, Eclipse, and WebStorm.

My preference for coding PhoneGap applications is to use WebStorm by JetBrains. WebStorm has great code-hinting (even for your own custom JS and 3rd party libraries), great refactoring, hooks into Git, CVS, or SVN repositories, and is a very mature IDE.

WebStorm IDE
WebStorm IDE

I tend to use this as my primary coding tool, then switch to Eclipse or Xcode when I want to locally deploy to a device for testing. When using PhoneGap Build to simplify cross-platform compilation, I just push the code to git, then recompile via PhoneGap Build.

I’m not a fan of Xcode’s HTML/JS editing, and haven’t found an HTML/JS plugin for Eclipse that I really like. To target Windows devices, I use Visual Studio.

Lightweight Editors

I’m a bigger fan of larger IDEs than lightweight editors, but Adobe Edge Code (also known as Brackets) is a great lightweight editor for quick edits. Edge Code/Brackets is an open source HTML/JS editor that supports live editing in the browser and inline editors for CSS styles, without leaving your HTML files. If you tried Edge Code Preview 1, but weren’t sold on it, you should try Edge Code Preview 2. The team has come a long way very quickly. It’s fast, easy to use, and there is a plugin to tie it into PhoneGap Build. I sometimes use this for quick edits.

Adobe Edge Code
Adobe Edge Code

Edge Code/Brackets also has a thriving open source project, and encourages you to get involved and help contribute.

There are tons of other lightweight editors out there, and everyone has their favorite. As long as you’re happy with the tool, and it can edit text (HTML, CSS, JS) files, you can use it to build PhoneGap applications.

Designer-Friendly Editors

I’m not necessarily the primary target for Dreamweaver, but it has some nice features. Dreamweaver gives you a great programming environment plus a WYSIWYG editor for HTML experiences. It also features PhoneGap Build integration directly inside the coding environment. If you’re used to Dreamweaver for creating web experiences, you can continue to use it and target mobile apps as well.

Adobe Dreamweaver
Adobe Dreamweaver

Debugging Environments

Yes, that is plural… Debugging Environments. Due to the cross-platform nature and PhoneGap’s leveraging of native web views for each platform, debugging PhoneGap applications can sometimes be tricky. Here are some tips that will make this significantly easier.

The PhoneGap Emulator

The PhoneGap Emulator is my primary development/debugging tool for all PhoneGap apps. It is a browser-based emulator leveraging the Google Chrome browser and the Ripple Emulation Environment. The PhoneGap Emulator runs inside of Google Chrome, and provides emulation of PhoneGap’s core APIs. Since it is built on top of Chrome, it enables you to leverage Chrome’s Developer Tools, which in my opinion are second to none for web/application development. This is a highly-productive developer environment.

PhoneGap Emulator in Google Chrome
PhoneGap Emulator in Google Chrome

Here’s why I like the PhoneGap/Ripple/Google Chrome development environment:

First, this combination enables you to emulate most core PhoneGap APIs without leaving the desktop environment. It enables you to test various APIs including geolocation (with simulated locations), device events (deviceready, back, etc…), sensor events (accelerometer, compass), and even let’s you test with different device aspect ratios – all without having to push anything to an actual device. This saves a lot of time in development iterations. You can read about the supported Ripple emulator features here.

Second, Chrome’s Developer Tools are awesome. Here are just a few things that you can do while developing/debugging your app, live within the emulation environment:

  1. Alter DOM and CSS at runtime via the elements panel.
  2. Analyze all resources consumed by your app, via the resources panel. This includes all scripts, images, html files, cookies, etc… it even includes insight into any local data stored via PhoneGap’s local storage database (WebSQL implementation).
  3. View/query all local databases within your app. You can write your own queries to view/alter data in the WebSQL database. Thanks to Ray for sharing this, it’s not immediately intuitive.

    Debugging Local Storage Databases in Chrome with SQL
    Debugging Local Storage Databases in Chrome with SQL
  4. Analyze network requests/utilization via the network panel.
  5. Debug JavaScript with the Scripts/Sources Panel. You can set breakpoints in JS execution, inspect & alter values in JS objects in-memory, and view details and line numbers for any exceptions that occur.
  6. Monitor function execution time, memory consumption, event listeners, and frame rendering time via the timeline panel.

    Chrome Timeline Panel
    Chrome Timeline Panel
  7. Profile CPU/Memory usage via the profiles panel.
  8. Use the console to monitor console.log() statements, inspect properties of objects in memory, or execute arbitrary JavaScript whenever you want.

The PhoneGap Emulator enables developers to be extremely productive with development, however I cannot emphasize enough that on-device testing is critical for having a successful app. On-device testing can expose performance problems or browser rendering variances that you may not notice in the emulator environment.

On-Device Remote Debugging

As I mentioned above, on-device testing is critical for successful applications. iOS and BlackBerry have an advantage over other platforms b/c the latest developer tools allow you to remotely debug content live on a device.

Since the release of iOS 6, you can debug content in the iOS simulator using Safari’s Developer Tools. Safari’s developer tools give you many of the same debugging capabilities that I mentioned above for Chrome.

To debug an app running in the iOS simulator, just go to Safari’s “Develop” menu, select “iPhone Simulator”, then select your app’s index.html file.

Connect Remote Debugging
Connect Remote Debugging

You’ll end up with a full remote debugging experience, just like if you were debugging inside the Safari browser, complete with JS breakpoints, DOM inspection, etc…

Remote Debug iOS Simulator with Safari
Remote Debug iOS Simulator with Safari

The process to remotely connect to a live app running on an external iOS device is very similar. Just follow the instructions here, under the “Remote Debugging” section, and you will be up and running very quickly.

The latest BlackBerry devices also have the same remote debugging capability (since it is all actually based on the webkit engine). You can view detailed instructions how to remotely debug PhoneGap apps on BlackBerry devices here.

Remote Debugging with Weinre

Not every platform supports live remote debugging, especially older versions. Weinre (pronounced winery) is a remote web inspector that allows you to inspect/edit DOM and CSS elements on remote devices. Basically, you include some JavaScript in your app, and it communicates back to a server that will tell you whats happening inside of the app running on the mobile device. It won’t give you full debugging capabilities like JS breakpoints and memory inspection, but it’s better than nothing. You can use Weinre by setting up your own instance, or by leveraging debug.phonegap.com.

Weinre for On-Device Debuggin
Weinre for On-Device Debugging

When All Else Fails

If you’re still debugging your apps, and the solutions mentioned above don’t work, you can always resort to plain-old “alert()” statements to pop up debug messages, or use “console.log()” statements to write to system logs.

On Android, all console.log('...'); messages will appear as printouts in the command-line tool logcat, which is bundled with the Android SDK and integrated into the Android Eclipse plugin.

On BlackBerry, all console.log('...'); are printed to the BlackBerry’s Event Log. The Event Log can be accessed by pressing ALT + LGLG.

On iOS, all console.log('...'); are output to the Xcode Debug Area console.

Read more about debugging PhoneGap apps here.

Building PhoneGap Apps

The PhoneGap getting started guides will point you to the right direction for getting started with a particular platform. If you are just targeting iOS, you can use Xcode for building. If you are just targeting Android, you can use Eclipse, etc… It is all very easy to get up and running.

However, this process gets much more complicated when targeting multiple platforms at once. When I have to do this, PhoneGap Build becomes really, really handy.

Build-Bot-Preview

PhoneGap Build allows you to either upload your code, or point to a Git repository. PhoneGap Build will then pull your code and build for 7 different platforms, without you having to do anything special or setup multiple environments. All that you’ll have to do is install the cloud-compiled binaries on your device. You can do this by copying/pasting a URL to the binaries, or by capturing a QR code that will directly link to the compiled application binary.

One other advantage of PhoneGap build is that it lets designers/developers build mobile applications without having to install any developer tools. If you want to compile a PhoneGap app for iOS, but are on Windows – just use PhoneGap build and you won’t need Xcode or a Mac.

Check out the PhoneGap Build FAQ for more detail about how exactly it works.

PhoneGap UI/Development Frameworks

Probably the most common PhoneGap question that I get asked is “what MVC/development framework should I use?”. If you’ve been waiting for me to answer this, don’t hold your breath. It is impossible to be prescriptive and say that one solution fits all use cases for every developer.

When people ask me this, I like to paraphrase Brian Leroux from the PhoneGap team: “Use HTML, it works really well.”

I think people often overlook the fact that PhoneGap’s UI renderer is a system web view. Anything that is valid HTML/CSS content can be rendered as your application’s user interface. This could be something incredibly simple, like text on the screen, or it could be incredibly creative or complex. The important factor is that you need to focus on a quality user experience. If you’re worried about your UX, and are worried that Apple may reject your app, then read this article where I explain Apple rejections in detail.

HTML/JS developers come from many different backgrounds, with varying degrees of programming expertise. Some frameworks appeal to some people, other frameworks appeal to other people. There also seem to be new UI & architectural frameworks popping up every week. It would be a disservice to all people who use PhoneGap for us to proclaim that we should only use one singe framework.

If you are interested in UI frameworks, take a look at these:

If you are interested in architectural patterns, take a look at these.

There are lots, and lots, and lots more options out in the HTML/JS development world… I’m not even taking into account JavaScript generating tools and languages like CoffeeScript, TypeScript, or others…

Hopefully this helps get you on the right track.

Enjoy!

  • Lee Crossley

    Wow, great detailed post. It’s always useful to see the processes other mobile developers go through when setting up their dev environment (and testing/debugging). Personally, I am a fan of lightweight editors but there’s so really good stuff in here that I’m certainly going to trial.

    Let’s see how long it is before someone comments to suggest VIM :)

  • Lisa

    You’re not the first to give a thumbs up for Adobe’s Creative Suite Tools and you certainly won’t be the last. Thanks for sharing your workflow Andrew.

  • Anhsirk Dasarp

    Good One ! Kudos !!

  • http://www.cynergy.com michael wolf

    id add to the above that while the phone gap emulator is sweet, also remember that your plugins wont run in browser, as while the emulator will mock in interactions w/ cordova, you should come up w/ a process of mocking in your plugins.

    • http://www.tricedesigns.com Andrew

      Thanks Mike, that’s a good point. The emulator will not emulate the behavior of native plugins. You can specify a return/callback value for PhoneGap.exec methods which the emulator doesn’t know how to handle, but it is up to the developers to properly mock the behavior of those plugins.

      • http://www.asyncdev.net Romain

        I was about to blog about how I’ve successfully used event routing to decouple plugins from the rest of the codebase.

        It makes it quite easy to have two implementations, for example a real in-app purchase plugin (that talks to the App Store), and a fake one using a confirm dialog box (“was the purchase successful?”). Then the build simply includes the right JS file at build time (browser build? ios build?) and the event router does the rest.

  • Chandrakanth

    Very useful article, thank you for sharing.

  • http://snacksize.com Jim Webb

    Andrew,

    Thanks for this detailed round-up. Much obliged.

    Are you willing to share an example of one of your finished PhoneGap-based apps using this workflow, so folks can see a finished product?

    The example apps posted on PhoneGap’s site are a little janky, and I wonder whether that’s a result of how those apps were built, or an indication of the software’s limitations. Thanks!

  • Kiki

    Good post.

    However, a rant about PhoneGap is due: the Getting Started guide is pathetic.
    There should be an Eclipse plugin (for non-iOS development) that kickstarts a new project or a small app that does that.

  • http://n2d.co Richard Bennett

    Good article. Been developing in PhoneGap for the better part of a year myself. I’ve found too many incompatibilities with JS-based frameworks to recommend any – I’ve always ended up re-writing everything myself in the end.

    A question I have though is about touch event libraries. Any suggestions regarding those?

    I used to use QUOjs, but the site for it has since been taken down, and I’m now looking at Hammer.js.

    Thoughts?

    • http://www.tricedesigns.com Andrew

      Pretty much any JS framework will work with PhoneGap b/c it’s just a web view. For touch events, I generally write my own handlers, however hammer.js looks like it can make handling multiple touch events easier. If you are just trying to detect tap(vs click), Zepto.js has a “tap” handler that seems to work well.

  • pavunkumar

    Your post was really useful !!! i am just having one query.
    Hi I had already developed j2me app for mobile banking solution. Now I have selected phonegap for
    doing the same for cross platform devices like Anroid , BlackBerry , iOS, Windows and etc . Actually I have used following things in my j2me app.
    Storage ,
    Cache ,
    Https Communications.
    I want to know whether above all feature could be implemented in phonegap environment without any serious conflict and especially with regard to security related things. .

    • http://www.tricedesigns.com Andrew

      Yes, all of these can be implemented inside of a PhoneGap application without any implications. PhoneGap leverages the system web view for each platform supported, so it can leverage any HTML spec/api/feature that is supported by the operating system.

      You can read more about PhoneGap and security here: https://github.com/phonegap/phonegap/wiki/Platform-Security

  • George

    Hi – great post. We are soon to begin developing mobile apps using Phonegap, but are deciding on what actual physical devices we need to buy for testing. What do you currently use? You mention above that performance can vary, and can be especially a problem on older devices, so from that point of view would you suggest buying an iphone 4 and 5 to test on? Do you test separately on ipod touches, or I guess that maybe you can use this instead of an iphone 4 to keep costs down? For android I assume you would have a device for 2.3 and 4, and perhaps different screen sizes? And then there are the tablets! Do you test on these? No point testing on an ipad mini separately I guess (same as ipad 2 right), but for android I assume we would need to test on 7″ and 10″. Arghhhh, what does everyone else do in these circumstances?

    • http://www.tricedesigns.com Andrew

      I use older hardware, running the most prevalent operating systems. For iOS, I have an iPhone 4 (not 4s), and an iPad 2, both on iOS 6. For Android, I have a Motorola Atrix running 2.3, a Nexus 7 tablet running 4.2, a Samsung Galaxy Tab running 3.0, and a Kindle Fire running whatever version amazon uses. Only the Nexus 7 is the “latest and greatest” flavor of Android. My general philosophy is that if you can make it run fast on old hardware, it will be even faster on newer hardware. However, I always test on the latest hardare whenever I can get my hands on it, just to make sure it runs as expected. I’ve even gone into the retail stores and installed my app on brand new devices, just to see how it runs.

  • Robin

    I’m surprised you left out jqMobi from your list of UI frameworks. I have tried Sencha Touch, JQuery Mobile and Dojo Mobile. jqMobi’s performance is streaks ahead of these. A lot of the bad rap that PhoneGap gets is due to a bad or underperforming JS framework. JQuery Mobile is horrible when using transitions or even when it comes to general performance like scrolling etc.

    I almost went native after my frustration with JQuery Mobile drove me to the edge of sanity.

    So if anyone wants to start off on the right foot, jqMobi is the way to go. Their UI is ugly, but very easy to change to any style you want. They should, however, break their styles up into 2 different groups; Core UI functionality styles and visual styles that can dropped completely without breaking the framework.

    • Jeremy Colton

      Hi Robin,

      I am having trouble using jqmobi with Phonegap. Can you please describe your exact setup?

      Many thanks

  • Pingback: Performance & UX Considerations For Successful PhoneGap Apps | ANDREW TRICE

  • http://jonathanstark.com Jonathan Stark

    FYI – Chrome for Android support remote debugging over USB similar to Mobile Safari in iOS 6:

    https://developers.google.com/chrome-developer-tools/docs/remote-debugging

    Great post!
    j

    • Frederico Galvão

      Although that’s true, it does not help a bit in Phonegap workflow because the system browser used in WebView is not Chrome, to the date of this comment. Should Android change it to Chrome, 80% of all the issues I’ve come across in phonegap would solve itself magically.

  • Pingback: On-Device Debugging With PhoneGap & iOS 6 | ANDREW TRICE

  • Jose

    What do you do about design differences between the OS’s. For instance the common upper left back button for Apple and the left/right swiping of Android. I’m guessing you’d need to set styles for each OS if you wanted to comply with each design principle? Plus how do you handle things like when you hit the end of the page, with Apple bouncing and android showing a light. I haven’t tried phonegap but have really wanted to give it a go. Was curious what people did for these types of differences between OS’s or if people just build one style and just throw out the design principles that make each OS unique.

  • Mark

    That’s an awesome analysis Andrew.. I have a doubt on this phonegap,

    How about a support on mobile payment gateway with this phonegap? Does it supports all the credit card and paypal implementation or i need to use a third party sdk for it.

    • http://www.tricedesigns.com Andrew

      PhoneGap by itself does not support a mobile payment gateway since they are different per platform. However, you can leverage native plugins to hook into in app purchasing or other third party SDKs for payment processing.

  • http://www.onegeek.com.au Matt

    Hi Andrew,

    Thanks for the great write-up, this is one of the better round-ups out there. I’m new to all of this, so finding the emulator was a God-send.

    That being said, I’m still finding the development-test cycle quite a challenge at the moment though, as I’m writing an App that needs to capture Camera input, and it doesn’t appear as though the Ripple Emulator can emulate the Camera. (Using the Chrome console inspecting the ‘navigator’ object reveals the property does not exist).

    Any thoughts on how to tackle this would be greatly appreciated (currently trying to build Ripple from source as it appears to have mentions of camera APIs in it…)?

    • http://www.tricedesigns.com Andrew

      Hi Matt,
      You should be able to use navigator.camera.getPicture inside of the Ripple emulator (I am able to use it in my test projects). You can also use on-device debugging if you are using iOS, which can be really helpful.

  • meme

    hey Andrew
    how can i get the executable file of phonegap project using just command line
    waiting your reply

  • http://omnispear.com Jared Armstrong

    You want to look into Cordova cli which requires node.jd for command line interaction. You can then launch x code to load and run it in your actual phone.

    Thanks for this great post.

  • George

    Can we use Ripple Emulator for Phongap plugin based app development. I have tried the https://github.com/triceam/Instant-Halloween project. But in the Ripple Emulator its giving me missing exec:LowLatencyAudio.preloadAudio error.

    • http://www.tricedesigns.com Andrew

      Ripple will not allow you to debug native code. When you try to call an API that it does not support, it will give you an error message, and will allow you to specify a response value. However, it does not mimic the actual native implementation.

  • Antonio Bray

    Andrew, great post. Did you release the workflow above for the mockup including the finished phonegap source?

  • Elvis Almenar

    Only I want to say…WHAT A GREAT POST

  • Megalomaniacs4u

    What Getting Started guides in the phonegap docs? – there are NO getting starting guides worthy of the name on the phonegap site. Your excellent article is the closest so far to being one.

  • Visva lingam

    Superb Article… really helps… Thanks buddy.

  • Matías Stanislavsky

    What a great post, thank you for showing to the rest of us a little bit of enlightment,

    Regards from Argentina,

    Matías!

  • Ankur

    Thanks. The article was really fantastic.

    However, I am using AngularJS for application development and contains ng-view which loads pages dynamically based upon AngularJS routing. It works perfectly fine in Ripple but not on the actual Android device. Can you guide me on that? It is actually driving me crazy.

  • Marc Sch

    I think your architectural patterns should include YUI

  • Andrea Bonapersona

    Great post !
    I’d add just a few things for debugging :

    Adobe Edge Inspect (formerly Adobe Shadow) should let you inspect a phonegap application from desktop browser. (Couldn’t get it to work, doesn’t work on chrome 30+, doc is poor about phonegap and talks only about browser debugging)

    JSHybugger lets you inspect a phonegap app from your chrome browser. Only android and not free (10 days trial), but worked for me – easy to setup.

  • Andrea Bonapersona

    You can still take a look into scaffolding with yeoman? There should be basic phonegap scaffolding

  • ruan

    You should probably also check out http://www.applicationcraft.com – it has a designer and very functional code editor built-in, and has a mobile build process included as well so you don’t have to upload to PG Build. Most notably, they have a larger size limit on apps than the 10MB limit PG Build imposes.

  • OJayBee

    I found this really handy along with the getting started guides in phonegap:

    http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html

  • Anas Azeem

    Looking for something like this for a long time.
    My concern was the hassle of updating project to committing changes to Github, then upgrading the the code at build, then scanning the barcode and then installing and testing the app. Then Brackets and its integration to the Phonegap build came like a blessing. I followed the article [http://blogs.adobe.com/cantrell/archives/2012/10/integrating-brackets-and-phone-gap-build.html] on how to integrate the brackets editor to phonegap build.

    Everything goes fine and I can see my app, on the build, here in the Brackets. But none of the options in the Phonegap menu item works for me.

    I am posting the snapshots. Plz help.

  • Julian GOnzalez

    Thank you very much Andrew!

  • http://www.software-kinetics.co.uk Normski

    Excellent article, I’ve been toying with using PhoneGap for sometime but now finally taking the plunge after reading your article.
    Thanks.

  • Ezequiel

    Hi, Andrew!
    Thank you for pointing me to this post. It is fantastic.

    I decided to take a look at backbone.js from your link, but it seems to be broken.

    Is this article reachable?

    http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/backbonejs.org

    Thanks a lot for your time!

  • alina thomas

    hello,
    firstly i must say it is really a very well written and highly descriptive article .
    This post is useful for the cross platform developers .Any developer can refer this post to plan out their work strategy it will really give them benefit for sure.

    http://www.mobilepundits.com/PhoneGap_Development.html

  • Ley

    Hey you, yeah you, andrew nice work … keep it up … you saved me a lot … Thanks and cheers … Anymore updates on Phonegap/Cordova?

  • http://www.prideparrot.com/ Vijaya Anand

    If I’m developing the PhoneGap application using CLI with nodejs & sublimetext, do I still need Eclipse? in other words only the Android SDK is enough right?

    • http://linkedin.com/in/flakdinenno Flak DiNenno

      That’s correct. Eclipse is just an IDE you could use instead of Sublime. And if you were building a native app in Java, Eclipse comes with everything you need in a Java IDE configured by default (although you could also configure Eclipse to work without Java and just PHP for instance). Node.js provides the framework and utilities for converting your web app (html, js, css) to a phonegap-android stub. Then the ADK allows that stub to be compiled to an ADK.

  • jackbrucesimpson

    Did you end up releasing the educational app for PhoneGap by any chance?

  • http://www.benwagner.net Yankees9920

    How do you set up the emulator. Do you just point it to the base www folder where you develop, or do you have to run “cordova prepare” and point it to the platform/android/assets/www folder? Do you just run a webserver pointed to the www directory?

    When trying to point to the base www folder it seems to be unable to find cordova.js.

  • Michelle Diamond

    Good article. Thanks. I want to ask if it is possible to build a site in muse just for the basic framework and main visuals and then work into it using foundation? Developer will more than likely be using angular for the functionality.