Tag Archives: multidevice

Porting A PhoneGap App To Firefox OS

About a year ago I released the Fresh Food Finder, a multi-platform mobile application built with PhoneGap. The Fresh Food Finder provides an easy way to search for farmer’s markets near your current location, based on the farmer’s markets listings from the USDA. This app has seen a lot of popularity lately, so I’m working on a new version for all platforms with a better data feed, better UI, and overall better UX – unfortunately, that version isn’t ready yet. However, I have been able to bring it to an additional platform this week: Firefox OS!

Fresh Food Finder on iOS, Firefox OS, & Android
Fresh Food Finder on iOS, Firefox OS, & Android

PhoneGap support is coming for Firefox OS, and in preparation I wanted to become familiar with the Firefox OS development environment and platform ecosystem. So… I ported the Fresh Food Finder, minus the specific PhoneGap API calls. The best part (and this really shows the power of web-standards based development…) is that I was able to take the existing PhoneGap codebase, and turn it into a Firefox OS app AND submit it to the Firefox Marketplace in under 24 hours! If you’re interested, you can check out progress on Firefox OS support in the Cordova project, and it will be available on PhoneGap.com once it’s actually released.

So, on to the app (you can download the Fresh Food Finder in the Firefox Maketplace here)…

Basically, I commented out the PhoneGap-specific API calls, added a few minor bug fixes, and added a few Firefox-OS specific layout/styling changes (just a few minor things so that my app looked right on the device). Then you put in a mainfest.webapp configuration file, package it up, then submit it to the app store. Check it out in the video below to see it in action, running on a Firefox OS device…

The phone I am using is a Geeksphone Firefox OS developer device. It’s not a production/consumer model, so there were a few hiccups using it, but overall it was a good experience. Also, many thanks to Jason Weathersby from Mozilla for helping me get the latest device image running on my phone.

You can learn more about getting started with Firefox OS development here:

Also, be sure to check out the Fresh Food Finder:

Enjoy!

Video: Adobe Edge Inspect

Here’s a quick video introduction I put together for Adobe Edge Inspect, a *free* tool that enables synchronized browsing and debugging of HTML content between desktop and mobile devices. It’s definitely worth checking out, if you aren’t using it already.

Adobe Edge Inspect enables synchronized browsing across desktop and mobile devices. By pairing your devices with Edge Inspect running on your desktop, any content you view in the desktop browser will be synched to all paired mobile devices.

edge_inspect_feature1
Synchronized Browsing

Adobe Edge Inspect also enables remote inspection of content running on those mobile devices. This includes on-device debugging capabilities for both DOM & CSS inspection & modification, console logging, and more.

edge_inspect_feature2
Remote Inpsection

Adobe Edge Inspect also makes it easy for you to track and document visual issues on the remote devices. With just one button click, you can capture screenshots from all connected devices, complete with information about each device (OS, device name, screen resolution, etc…).

edge_inspect_feature3
Screen Captures

Did I mention Adobe Edge Inspect is also free? It’s part of the free tier of Adobe Creative Cloud.

Video: Introduction to PhoneGap

Yesterday I gave an Introduction To Mobile Development With PhoneGap presentation at the DevNexus developer conference in Atlanta. Thanks to everyone who attended, DevNexus is a great event. Unfortunately, not everyone around the world was able to attend… maybe next year.  Luckily for you, I recorded the presentation! You can check it out in it’s entirety below.


My slides are available below. Just press the space bar to advance to the next “slide”.

intro_phonegap

If you missed this yesterday, come check out my “Enterprise Apps With PhoneGap” presentation later today.

Feel free to leave a comment with any questions.
Enjoy!

Transcript from Open Session On PhoneGap

Ray and I have just concluded another Adobe TechLive Open Session on PhoneGap.  These sessions are an opportunity for anyone to stop in and ask us questions.  Thanks to everyone who attended and submitted their questions.  We will be hosting more of these sessions in the future.

You can also download a transcript of this as a standard text file.

Answered Questions (39)

————————–

1. Steven Erat: I see that the Cordova project creation script lands some Jasmine Unit Testing code under {project}/www/spec/lib/jasmine1.2.0.  This implies Jasmine UT is baked in, yet I can’t find a definitive doc about getting started with UT for PhoneGap apps, with the exception of Adobe’s Fil Maj whose blog links some presentations he’s given about it. What would you recommend for unit testing PG apps? I’ve also found a blog on Ripple UT for PhoneGap.

* Raymo: As far as I know, the UTs that ship with Cordova are assuming you have your own test runner. I’m not necessarily sure we expect ‘regular’ folks (grin) to actually use them. To answer your second question about UTs and PG in genera, I think Jasmine would work great, and perhaps even Selenium. It isn’t something I’ve used yet myself (with PG), but I’d imagine it would work the same as a desktop web app. (Or near close enough.)

2. Shawn Flanagan: As a new PhoneGap user, I have found it rather difficult to get started. When I looked for tutorials, There are an abundance of them, but all for outdated versions that no longer have the same setup process (at least on OSX with Xcode). Are there any plans to release a standardized place to get the newest guides? The differences between installing 2.0 & 2.4 were quite large.

* Andrew Trice: There was definitely a change from 2.0 (and earlier) to the latest versions.  The getting started guides at http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html are all up to date.  However, we are still working on new guides for sites like Adobe Developer Connection.  We are also creating more sample projects to help developers get started building their first PhoneGap application (beyond the basic project setup).

3. liuliu: I think it’s a stupid question: I was able to change the content of the example file and install it on my mobile device. But I don’t know how to change the name of the app. Any ideas?

* Andrew Trice: If you are using PhoneGap Build, it is inside of config.xml.  If you are using Eclipse for Android, it is inside the AndroidMainfest.xml file.  If it is in Xcode, it is in your application’s .plist file (the name depends upon the name of your project).

4. Dustin: I’m new to Phonegap (and JS) — finding it difficult to determine the best fit for JS frameworks such as jQM, Angular, etc, for providing MVW, widgets, etc?  Suggestions on frameworks, things to think about?

* Raymo: Certainly if you have experience with a framework *outside* of PG, you may consider using it with PG as well. Not everything is going to be well suited for Mobile though. Personally, I recommend folks use the framework that works well for them. Like, I’m not a fan of Angular. Not because it isn’t a great framework, but because it doesn’t mesh well with my style. Let me know if that doesn’t make sense.

5. Andrés Garderes: I’ve been trying PhoneGap and it is great, but I see JS code a bit unscalable. how do you manage JS code scalability? Which would be a nice set of frameworks & tools to use alongside PhoneGap? (not asking about the best, something fairly nice)

* Andrew Trice: There are definitely ways to scale JS-based projects.  Frameworks like Angular.js, Backbone.js,  Knockout.js, and Sencha enable you to build complex MVC-style applications, which have lots of files, and lots of views.  Require.js also can be helpful for managing dependencies and memory scope of large scale applications.  We try not to tell everyone “you should use this”, because there are so many options.  However the libraries mentioned above would be a good starting point.

6. Shawn Flanagan: Are there any plans to remove the file size limit on uploading a ZIP to PhoneGap Build? 9.5mb seems a little small.

* Raymo: I am not aware of any plans, but I’d recommend asking on the Get Satisfaction board for it: http://community.phonegap.com/nitobi/products/nitobi_phonegap_build

7. Qian: Do you have some best practise for Calling the same method repeatly? For example, I’d like to show a progress bar on the web view to indicate the syncing progress

* Andrew Trice: I would use JavaScript’s setTimeout or setInterval methods to repeatedly invoke a status function until the synch process is complete.  If you are pushing data to a server in multiple requests, you can also update the progress bar whenever each request completes – this way you don’t need a loop.

8. Ken: I’m struggling to get the phoneGap soft keyboard plugin working in Android 4 – it works fine in Android 2.3.  I can find lots of example code, but like Shawn I find that it targets different versions of phonegap.  Can you recommend a good place (upto date) to get the soft keyboard plugin code from?

* Raymo: The best thing I can suggest Ken is to ping the plugin author directly via GitHub. Previously the PhoneGap github account hosted all plugins, but now we instead point to invidual authors’ accounts instead. Makes it easier (imo) to get support, etc.

9. Searchtool: I would like to use require.js (with cordova 2.4), have you some recommendations and/or links to advices? I don’t know really how to start

* Andrew Trice: There are getting started guides at http://requirejs.org/.  The basic requirejs configurations will work within PhoneGap applications, since all PhoneGap applications are running within a system web view.  In particular, check out http://requirejs.org/docs/start.html

* Andrew Trice: Also, check out: http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html

10. Steven Erat: Per Ray’s comment “I’m not necessarily sure we expect ‘regular’ folks to actually use [unit tests for PG]“…. Why not?  Do you mean that you don’t think developers would unit test their apps at all, or that they just wouldn’t be leveraging the jasmine templates that are in the projects?

* Raymo: I was speaking *just* about the UTs shipping in the PG project, not about tests you may want for your own applications.

* Andrew Trice: Also check this out: http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html

* Andrew Trice: whoops, wrong question… and i can’t delete it

11. MeetingAssistantApp.com: In your opinion, which Phonegap app is best and should be used as an example for developers?

* Andrew Trice: There are lots of great PhoneGap apps out there.  We are working on some samples to show people how to get started, and demonstrate best practices.   There are many of examples at: http://phonegap.com/app/  There are also many, many more apps that we unfortunately aren’t able to talk about b/c of NDA agreementss (some of you may use them every day, and don’t know its PhoneGap).  The key is to focus on a great user experience, and a development methodology that works for you and your development team.

12. Luke 2: Could you you please name main differences between webview and Safari/Android browsers? What should we be aware of when coding and testing in browser mostly?

* Raymo: From what I know: On iOS, the webviewer has JS performance turned downed a bit. Not sure about Android. To your second question: I do a *heck* of a lot of my PG work in the browser just because it is much quicker. I also use the Ripple emulator. You *must* do testing on devices obviously, but I can do a lot on the desktop – especially initially.

13. Raghu: I am a newbie. I see that there are some phonegap plugins for Facebook and  Twitter but why there is no plugins supported for Google plus? I wanted to integrate Google plus in my app but had a hard time finding a plugin for Google Plus. Do you have one for G+?

* Raymo: Last time I checked the G+ API was a read only API, not a ‘real’ API yet.

14. Urigo: Where can i find performance best practices with CSS and html that are specific to phonegap? also, how can i test performance in a phonegap application on the device?

* Raymo: Google. :)  I’ve seen some good blog posts, I just can’t recall them right now. One of the easiest tips though is to remember to use touch events vs click. I’ll try to gather some good links later today.

15. Raghu: @Raymo… So do you think it will be a ‘real’ API in the near future? Do you guys have any idea?

* Raymo: You would have to ask Google. :) As much as I like them, they are very quiet about their plans.

16. vobu: I can’t get my head around why registering document.eventListener (eg for “offline”) is only possible outside onDeviceReady. Wouldn’t it be convenient to have the eventListeners inside onDeviceReady to make sure all phonegap libs are available?

* Raymo: I believe you are incorrect about that. I’m pretty sure I registered them in onDeviceReady. I’ve got a sample app that shows this. Ping me via email if you want a copy.

17. uttam: How to create app in phoneGap

* Raymo: Please see the Getting Started Guides: http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html#Getting%20Started%20Guides

18. Phillip Senn: Do you think I could scan a barcode using PhoneGap and the user’s camera?  I’d like it to populate an input field and click ‘submit’.

* Andrew Trice: Yes, you can do this.  There is an open source plugin for barcoding scanning available on github at: https://github.com/phonegap/phonegap-plugins   This is also supported by PhoneGap Build. You can read more detail about PhoneGap Build support here: https://build.phonegap.com/blog/barcodescanner-plugin

19. Searchtool: Is there a way to reduce the size of the (final) generate app ? (Xcode) – The default project has already a “significant” size (weight)

* Andrew Trice: Most of this size is actually in the splash screens for every resoltuion (including retina graphics).  You can reduce the quality of the splash screen images, and it will significnatly reduce the ipa file size.  Without the splash screens, the compiled ipa is only around 1 meg.

20. fredycc: Is it possible to obfuscate the code of my application, which method suggest?

* Raymo: I know you can find JS code obfuscators, but frankly, I would not rely on it for ‘protection’. IMO, your protection is your overall business logic, your IP, etc. If you can lose your business because someone can read your JS code, then you may have other problems. ;) Don’t forget too that you can easily use AJAX from your PG apps. If you have some logic too sensitive for the client-side, move it to the server side instead. Obviously people can, and do, make a lot of money on the web.

21. Raghu: I have been using Jquery Mobile along with PhoneGap but I feel JM is quite slow when it is compared to Native apps. Does PhoneGap suggest a mobile framework that works well with it? How about Sencha Touch or any other? Any thoughts on this?

* Raymo: So I don’t think, “officially”, the PG team recommends any particular UI framework. That being saifd, they aren’t a fan of jQM: http://sintaxi.com/you-half-assed-it. I’m a fan of JQM and it has worked well for me in the past. One issue that seems to bug people the most is page transitions, and I simply recommend turning them off if if you find them not performant. (That can be done in about 2 lines of code in a JQM init file.)

22. Steven Erat: Are there any standards/frameworks for performance testing/benchmarking for PG apps? (Sorry, I haven’t yet done my homework on that)

* Andrew Trice: I am not aware of any frameworks for testing PhoneGap apps that are specific to PhoneGap.  Basically, the same tools for performance testing web apps will apply, since they are running inside of a web view.   For iOS, you can perform on-device profiling using Safari Developer Tools.

23. uttam: what are the applications that are already created in phonegap?

* Andrew Trice: You can seen many PhoneGap applications at: http://phonegap.com/app/

24. liuliu: I’m trying to build a simple adventure “find hidden objects” game with phonegap, do you know any good framework or plugin for games?

* Andrew Trice: Any HTML game framework will work.  You can use something as simple/basic as jQuery or Zepto, or more complex like impact.js.  There is a great listing of HTML5 game engines at: https://github.com/bebraw/jswiki/wiki/Game-engine-feature-matrix

25. Searchtool: someone talked about Unit Testing Code, could you remind us what is the principle/aim?

* Raymo: My answer is not PG specific, but in general. Steven Erat is an expert on this and could answer better. IMO, the basic idea behind UTs is to allow you to ensure that future changes don’t break old code. So imagine you add feature X to your project. How are you sure you didn’t break some old feature Y? A suite of tests can check all your features to ensure that you haven’t accidentally broken something in a new change. Again, this is a “Big Idea” type question and I probably didn’t do the best job answering it, but hopefully you get the basic idea.

26. Phil: When is PhoneGap Build going to support BlackBerry 10?

* Raymo: This is what I see from the Get Satisfaction site: http://community.phonegap.com/nitobi/topics/support_for_blackberry_10

27. Marlon Harrison: I’ve just started using PhoneGap and I’ve been disappointed with the perfromance via the JQuery Mobile framework. Are there tips to improve the performance?

* Raymo: I’ve found the biggest issue for folks is page transitions under Android. When it is an issue, you can simply turn them off. See the JQ docs for initialization options. It really is easy to do.

28. kamal: phonegap ios developer license????

* Andrew Trice: All iOS apps must use the iOS developer program and licensing/provisioning.  This is a requirement from Apple, not Adobe or the Cordova project.  You can read more about the licensing and provisioning here: https://developer.apple.com/devcenter/ios/index.action  If you are using PhoneGap Build, you can read more about the licensing/provisioning in PhoneGap Build here: https://build.phonegap.com/docs/ios-builds

29. Marlon Harrison: Are there great iPad-based PG examples that you can call out? I’ve looked through the showcase site and haven’t found any that really have anything remotely close to a native feel  responsive-wise

* Andrew Trice: Check out these apps:

Kooky  https://itunes.apple.com/us/app/kooky/id547565880?mt=8

Zombie Jombie: https://itunes.apple.com/us/app/zombie-jombie/id477401349?mt=8

Nokia Here Maps: https://itunes.apple.com/gb/app/here-maps/id577430143?mt=8

Wikipedia: https://itunes.apple.com/us/app/wikipedia-mobile/id324715238?mt=8

There are some other really great ones, but unfortunately we can’t talk about all of them  :(

* Andrew Trice: Here are a few apps that I wrote specifically to show that you can create nice app-like experiences in phonegap apps-granted I don’t have massive downloads. or reviews

Lil’ Doodle (iOS):

https://itunes.apple.com/us/app/lil-doodle/id496228112?mt=8

I wrote this one just to show you can create very non-HTML-feeling experiences in PhoneGap apps.

Instant Halloween (iOS 5 stars, Android 5 stars)

https://itunes.apple.com/us/app/instant-halloween/id569882773?mt=8

https://play.google.com/store/apps/details?id=com.tricedesigns.InstantHalloween

Simple halloween themed sound effects app.

US Census Browser:

https://itunes.apple.com/us/app/census-browser/id483201717

https://play.google.com/store/apps/details?id=com.tricedesigns.CensusBrowser

Visualization of US Census data.

Fresh Food Finder:

https://itunes.apple.com/us/app/fresh-food-finder/id524261275?mt=8

https://play.google.com/store/apps/details?id=com.tricedesigns.FreshFood

Simple way to browse for farmers markets (data is US only, from the USDA).

30. Phil: Raymo, that blog post was actually by made, but there was no official response to my question from PhoneGap Build itself. That’s why I am asking again here, hoping to get an official response.

* Raymo: Yeah, I’m sorry I can’t give more info than that right now.

31. Raghu: Does PhoneGap allow us to access media files on a phone? For example, I want to access an mp3 file and would like to set it as an alarm.

* Raymo: Check the Media API docs. That would handle media. As for alarms, you don’t have access to change the phone’s default alarm. That may be possible via native code and a plugin, but there is no “simple” support. Obviously your app, if running, could fire off a MP3. Here is a plugin example for ios: https://github.com/DrewDahlman/Phonegap-LocalNotification

32. Searchtool: Sometimes I received (in Xcode) I received some “memory warning” –  Have you some recommendations or links – I tryed to use the Safari tools to understand what appends but it is not clear

* Andrew Trice: Memory is managed by the system web view, we don’t have control over how Safari manages memory.  However, you can use Safari’s Developer Tools for on-device memory profiling to see what is taking up memory inside of your PhoneGap app’s web view.  See details here: http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/OptimizingYourWebsite/OptimizingYourWebsite.html#//apple_ref/doc/uid/TP40007874-CH9-SW2  You can connect directly to the PhoneGap app running on a remote device for this profiling.  See details here: http://www.raymondcamden.com/index.cfm/2013/1/21/Did-you-know–Safari-Remote-Debugging-and-PhoneGap

33. Marlon Harrison: These seem great thanks very much for sharing Andrew. The showcase site is pretty difficult to traverse if you’re only looking for tablet apps

* Raymo: I’m going to ping our marketing person to see about possibly adding search/categories to that showcase. I think it makes sense.

34. Jeff: Do you have recommendations on using maps within phonegap?  I’ve used Openlayers on Android and the performance is very poor.

* Raymo: Depending on your needs, consider Google’s Static Map API. As it sounds, it is static only, but if you don’t need move/zoom/etc and just need a simple display, I think it works great. No JS involved, just a URL. The ‘full’ maps works pretty good too on mobile in my experience. Of course, both aren’t free if you hit your service limit.

* Andrew Trice: I’ve had great success using Leaflet.  It performs very well inside of PhoneGap apps.  http://leafletjs.com/   I’ve used this in numerous apps, on iOS, Android, BlackBerry, and Windows Phone (haven’t tested the others).

35. liu: JQueryMobile vs Zepto vs XUI? in terms of performance. Or do you have other recommendations?

* Raymo: I assume you mean jQuery vs Zepto vs XUI, since JQM is a UI library. For me, I like Zepto. I found XUI to be just… weird. Very personal thing. Overall jQuery isn’t horrible per se, it just has a lot of old weight on it that is useless on mobile. Give Zepto a shot though – very light weight and very jQuery-compatible.

36. Searchtool: Camera Rolls (Iphone) Do you know if there a way to reverse the flow of photos (newest at the beggining) or to to the bottom (auto) of the camera rolls when we call the camera API ?

* Andrew Trice: Unfortunately, we do not control this feature inside PhoneGap.  We leverage the native camera roll, and it is completely managed by the operating system.

37. Steven Romalewski: Great QnA, thanks for organizing this. My question is about Phonegap Build. If I’ve customized PG plugins for my particular needs, will my app work with Phonegap Build?

* Raymo: No, PG Build only supports a subset of plugins (http://build.phonegap.com/docs/plugins).

38. eric schrage: Do you have any recommendations for implementing responsive (hey, it actually moves!) spinners or progress bars for long running js? I think it is a common problem for js, not sure if there is a good option via PhoneGap API.

* Raymo: Not in particular. For spinners there are a thousand of those old animated GIFs which work fine. A bit of DOM to show/hide it is al you need. For progress bars you can use a bit of CSS. I can’t think of any off the top of my head though.

39. Candice: I am tasked with building ios and android apps and since I’m new to app development I’m looking at cross-platform options to maximize my time and only maintain 1 codebase. I came across this blog yesterday for setting up project templates and I’m just wondering if this is the way to go for a noob or is there a better way to start?: http://devgirl.org/2012/10/04/cross-platform-phonegap-aka-cordova-project-templates-in-a-jiffy/

* Raymo: Candice, what Holly was using in that blog post is now (as of 2.4.0 and last week) part of the official package. So yes, I’d use it. To me it makes things MUCH easier.

Enjoy!

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!