I see a lot of confusion still about the difference and relationship between Cordova and PhoneGap.
TL;DR: If you don’t need to use the cloud build service at PhoneGap Build, just use the Cordova CLI tools, not the PhoneGap ones.
Lemme see if I can start with the penny tour.
In the beginning, there was PhoneGap. It was an amazing project by a little company called Nitobi in Canada. It was open source, and it was good.
Then the little company and the name PhoneGap was bought by Adobe. Adobe did not buy the actual PhoneGap codebase, just the people that worked on it, and the name. The actual open source project was donated to the Apache Software Foundation.
So now the open source project needed a new name. After a couple of false starts, eventually they came up with “Cordova” – the name of the street the Nitobi offices had originally been on in Vancouver.
For a bit over a year, “PhoneGap” was just the Adobe binary distribution of the Apache open source project “Cordova” – you could think of PhoneGap as Safari to Cordova’s WebKit.
In version 3.x of Cordova – and therefore PhoneGap – a shift was made towards heavy use of a Node-based command line interface (CLI). It handles everything from creation of the project, installing plugins, and finally building and even running the app. It’s awesome, by the way, and if you haven’t made the switch away from the shackles of IDEs like Xcode and Eclipse, I heartily encourage you to give it a try.
Anyway… at the PhoneGap Day US conference, back in July of 2013 in Portland, we released the 3.0.0 version of Cordova. At the same conference, a variation of the Cordova CLI was launched called the PhoneGap CLI. The first split in actual functionality between the two had finally arrived.
The PhoneGap CLI is a similar-but-different variation on the Cordova CLI. It does much of the same things and even uses the Cordova CLI under the hood. The biggest difference lies in its connection to Adobe’s cloud build service called PhoneGap Build. The PhoneGap CLI allows you to – from the command line – create and build apps using that service. You don’t need the SDKs for the various platforms installed on your machine.
However, aside from some small syntax differences – and a couple missing features, if I am to be honest – the use of PhoneGap Build is the only difference at the time of this article. So as I said in the TL;DR above, my advice is that if you don’t need to use the cloud build service at PhoneGap Build, just use the Cordova CLI tools, not the PhoneGap ones.
More importantly, whatever you do, do not “mix and match” in a single project. This will only make a big mess.
I hope that clears it up a bit… if not, please feel free to send me an email, or come and hit me up me in the #phonegap channel on Freenode IRC.
I was working on a new actual post (as opposed to just posting slides like I have been lately) and realised that my grunt-init-cordova slides never made it onto the blog. I have just totally updated grunt-init-cordova (as part of writing the upcoming post) and there will be more about it there.
The 4ZzZfm app was my first ever mobile app. It was then my first PhoneGap / Cordova app when I ported it.
It’s in desperate need of an update if for no other reason than that the iOS version does not support the iPhone 5 screen size.
I am thinking of trying to consolidate the codebases (currently it is a codebase for each of its two platforms) and maybe even expand it to cover other platforms beyond iOS and Android.
Questions I am going to have to look at over the next couple of weeks:
Does anyone listening to 4ZzZfm want to do so on WP8, BlackBerry or any of the other platforms supported by PhoneGap / Cordova?
Do I just use KendoUI and keep it closed source, or do I do a completely custom UI and open source the app? (note: I will only open source it if I can get a real program feed instead of scraping the website like I do now… the current code is embarrassment personified)
If I am supporting Android 2.3 (and I am sure I will), how will I handle the fact that it does not support html5 audio… and conversely, the media APIs I use for it are no good for streaming radio on iOS?
Are there other features that would be of use to 4ZzZfm?
I’ll try to keep updating the blog as I go with it (since I haven’t been using the blog for anything else lately with Pixfor’s own update on hold).
Cordova-CLI is doing some great things to make working with multiple platforms in one Cordova project easier. But installing with it can initially seem a little daunting if you’ve never played with it before, and so I thought it would help to write this guide up to help anyone else getting their…
Raised center TabBar button in Cordova / PhoneGap for iOS
A popular pattern in iOS lately (especially in apps with a focus on photo taking) is the raised / highlighted middle TabBar button. It’s easy enough to get a native TabBar in an iOS PhoneGap app using one of the two popular plugins (NativeControls and TabBar). There is even a great article on getting a raised middle TabBar button on iOS.
But not everyone using PhoneGap can comfortably turn that article into a modified TabBar plugin. There was even a recent thread on this topic in the PhoneGap Google Group recently.
Since I have done this in one of my apps, I thought I might post a quick outline on how to use the code in the iDevRecipes article above to get one of these buttons into one of the plugins above.
The Button Image
This is the button I created for my app Pixfor. It’s basically just a green tinted screenshot of the middle third of a standard TabBar with an Aperture icon and a subtle shadow. You certainly don’t need to have a tinted gradient as well as your larger icon or whatever. That’s just a design decision. The great thing about how this works is that the touch goes straight through the added UIButton, so the highlight of the TabBar still happens so if your button image has transparency, it will show through nicely.
The button image is named aperture-tab.png and also has a corresponding firstname.lastname@example.org image for retina devices.
Note: these images (unlike the icons normally used in the TabBar plugins as icons) are added to the project through XCode as a resource, not just copied into the www folder with the other PhoneGap assets.
So I know I haven’t been posting here much, what can I say?
But I did feel like posting that I have had my first ever rejection experience with the Apple App Store.
An app I have been building for a client got rejected for collecting donations for charity — even though the app did not collect actual money, it merely allowed you to convert points earned in the app to a charitable donation.
The reviewer was very nice about it and offered some suggestions on how to comply with the rules in this area.
Here is where this post turns into a love letter to PhoneGap/Cordova and KendoUI.
Like magic, I now have the charitable donations happening on a web site instead of the app, but with very little effort and it even looks the same aesthetically as the app!
The app has been resubmitted and our fingers are once again crossed.
As for the other problem (a lack of decent posts on this blog) I have been storing some up that I did not want to post until this app was finished. They should be coming very soon. I hope. Heh.
I’ve been developing a workshop focussing on HTML5 app features like UI, localStorage, devicemotion, geolocation, as well a bit of phoneGap, so students can add additional featurs like camera support, and package it all up as an app.
It’s been almost two months since my last post, but that’s because I have been working hard on a new app. In fact, an entire new product.
I’ll be able to post more soon including some of the custom plugins I wrote for the app.
It’s a camera-based app at heart so I needed a custom camera overlay view as well as some changes to make the camera more responsive (there was a horrible delay after clicking the “use” button in the core PhoneGap Camera API).
I am hoping to find a way to make the camera functionality open source and abstract enough that it would be useful to someone else.
Announcing the Read it Later plugin for PhoneGap (soon also for Cordova)
One of the developers working on the new PhoneGap-based Wikipedia Mobile was having some annoying issues with the PhoneGap ShareKit plugin and decided he’d rather just put the Facebook and Twitter sharing in with their individual plugins.
He was happy with the decision where Facebook and Twitter were concerned, but lamented that the decision would mean there would no longer be support for Read it Later (http://readitlaterlist.com).
I had a look at Read it Later’s API and iOS SDK and it looked fairly straight forward, so when he asked if I would like to write a plugin for it I took on the challenge.
Just two hours later I had a shiny new PhoneGap plugin!
Before upgrading PhoneGap (running the installer) I back up the previous version of the framework. I copy ‘/Users/Shared/PhoneGap' to '/Users/Shared/PhoneGap-<version>' (such as '/Users/Shared/PhoneGap-1.2’).
Next I go into the projects that I want to keep running that version, and I delete the PhoneGap.framework from the project (remove reference only).
Then I add the framework from the copied versioned folder I made in step #1. Select the target in Xcode, choose the “Build Phases" tab, open the "Link Binary With Libraries" section and click the + and choose "Add Other…”, browse to where you backed up your old PhoneGap.framework and add it in.
Upgrade PhoneGap to latest version.
The work on the new unified js will be a great boon to many end users making it easier to develop for multiple platforms. Unfortunately, it looks like it is also going to be only a partial implementation on 1.5 and one that not only might break things for existing apps and/or plugins… but might not even be the final API we see shipped with 1.6…
…we’ve made no commitment on the plugin api (its never been official) so I don’t feel we’re breaking any promises
…and concerns about it are being dismissed.
I don’t know about you, but I think I might stick with 1.4.x for now unless a bug comes up that will make it worth it to me to work around these teething issues in the coming releases.
I do know the PhoneGap Google group, IRC and StackOverflow are gonna get an influx of confused devs very soon. I’m bracing for it.
PhoneGap plugins in iOS complaining about deprecations and what you might be able to do about it
In PhoneGap (in reality Cordova) 1.4.x some classes were deprecated in the effort to make it play nice as a component in an otherwise native app (as opposed to only being able to be the primary controlling view). This is causing some confusion when developers using this version try to use plugins written using those classes. Xcode is giving them warnings about the deprecation and making them worry.
The plugins affected are mostly those that pop up an entire native view controller over the top of the PhoneGap/Cordova app - EmailComposer, SMSComposer, Twitter and worst of all ChildBrowser.
The important thing to remember is that for now (1.4.x), although the methods are deprecated, they should still work just fine. They will warn you, but as a good friend of mine was fond of saying: “a warning is not an error”. The point of deprecation warnings are to warn you that what you are doing might go away some time in the future and to start thinking about a new way to do it.
AFAIK, the issue will be with the coming releases when the methods are actually removed (there is debate on if this should be soon… like 1.5 or 1.6… or wait for a major release like 2.0).
I am happy to update plugins and submit pull requests to the phonegap-plugins repo if the plugin is not being actively maintained or not overly complex. I have already submitted a pull request for an update to SMSComposer after someone asked for help in the PhoneGap IRC channel. As for any of the others affected, it might be that they will just use the deprecated calls until the upcoming plugin upgrade guide is ready I believe with 1.5.x.
In the case of most of the affected plugins, really all you should need to do is in the plugins PluginClassName.m file add in this initialization method just after ‘@implementation PluginClassName’ (note: this one might be optional, but most of the modern plugins seem to initialize self this way):
This will make most of the basic plugins compile quite happily without warnings. Unfortunately… ChildBrowser not so much, but that plugin is far from simple. However, it is very popular so I am sure it will get some love before the deprecations truly take effect.
If you have any questions about this feel free to shoot me a message:
The main reason it took so long to port the 4ZzZfm app from Objective-C to PhoneGap had nothing to do with PhoneGap, really. It had to do with adding new functionality at the same time that I had been wanting to add in for some time.
4ZzZfm has a program schedule that changes at the very least every quarter or so. There are also small things that change from time to time for various reasons. Up until this version of the app, changing that program information in the app has meant my updating the schedule manually, then updating the app and submitting a new version to the App Store.
Needless to say, this didn’t happen as frequently as it should have.
So for this version, it was important to me to have the guide be updated from within the app with no updates to the code required. Though getting there was a bit of a challenge, the current version of the app does indeed include that functionality. However, it had not actually been tested in a “live” environment… until today. :)
Today I pushed an updated version of the guide to the server and the app should automatically use that version the next time it starts up (though the background behaviour of iOS and Android mean that this might not happen unless you close it all the way or don’t use it for a given period of time… not entirely sure what all triggers the app having to start from scratch).
Anyway, it seems to have worked. If you or anyone you know has trouble with the app updating the guide, please let me know, but for now I am calling it a success.
If you haven’t already checked out 4ZzZfm and / or the app, it’s available for iPhone and Android now.
I have decided to move the blog to tumblr for a few of reasons.
I was sick of managing the comment spam on the previous WordPress blog
I was sick of managing the software/security updates on the previous WordPress blog
I wanted an easy way to post to the blog when I was out and about on an iOS device using Markdown
I wanted to see how well Tumblr works for a blog with it’s own domain, etc
I wanted to learn how to theme Tumblr
So far it seems to be going OK. Some things are certainly easier (less maintenance, easier posting) but some things are more tedious (static “landing pages” for the apps, etc).
I will be updating the theme a bit at a time. Cleaning up the posts so the images are no longer coming from the previous WordPress blog, extending the theme to include comments/discussion/likes/etc and adding more social media integration (apart from just Twitter).
Feel free to shoot me an email if you think this is a good/stupid/pointless idea. ;)
The 4ZzZfm iPhone app has been updated to version 3.0. This new version should always have an up to date Program Guide. It can now update the guide over the internet so it will no longer need an updated version to have a correct guide.
So here we are. Almost four months to the day since I last posted about porting the 4ZzZfm iPhone app to PhoneGap, it’s finally awaiting review in the App Store.
A lot has changed from starting out to getting to this point. I’ll be writing a much bigger post about the whole experience (including my new-found hate for timezones and date math), but till then… I am just happy to see the back end of it. :)
Now let’s see if we can get past the approval process OK.
Devgeeks takes over the WORLD! (or at least my life...)
So for all my bemoaning about not having enough time to work on devgeeks work and mobile stuff in particular, I have had a career change of sorts and I am now going to pursue devgeeks as my full-time job.
This means I will be able to take on work as a mobile developer (as well as my more traditional web applications work).
I have set up the new devgeeks.com to this end. I will also continue with the open source plugin development that I talked about in my previous post. I am pretty excited about this change. Feel free to throw work my way so I can keep doing it ;)
It’s that time again. Time to update the 4ZzZfm iPhone app. Actually, it’s way past due… but this is the way things go sometimes.
This has lead me to revisit the above-mentioned web technology options for iPhone app development. PhoneGap in particular seems to be both quite mature, used a great deal in apps in the App Store and quite extendable via plugins. This last part is the bit that has tipped it for me. Not only are there some great plugins available for PhoneGap, but it is quite easy to write your own plugins.
What this all comes down to is that I am going to try and re-write the 4ZzZfm iPhone app using PhoneGap and write whatever plugins I need along the way that aren’t catered for in PhoneGap’s core or plugins written by others.
I have already started on this process and I have the Audio Streaming classes written by the amazing Matt Gallagher (cocoawithlove.com) that I used in the original Objective-C version of the app (mostly) working as a PhoneGap plugin. The remote control events don’t work yet, and I am not sure that will be possible from a plugin anyway… that might require some hacking of the PhoneGap core. We’ll see. It needs some more workupdate: I havehad the remote control events working fine. No core hacking needed. Then between updating PhoneGap and iOS something went wrong.
Another piece of functionality I need for the 4ZzZfm iPhone app is a volume control slider. In the Objective-C iPhone SDK that is implemented using an MPVolumeView (from the MediaPlayer framework). This turned out to be a very easy to make into a PhoneGap plugin. Now one of the best things about PhoneGap is that it and its plugins are open source. PhoneGap and its plugins are developed by the PhoneGap community and available on GitHub. So I have decided to join GitHub myself and submit any plugins I create for this project that I think others might find useful. The first of these that have been added to the main PhoneGap plugins repository is the aforementioned VolumeSlider plugin. I am pleased as punch about this as it is my first real contribution to a modern open source project. Hopefully it is just the first of many more such contributions.
Wish me luck. Worst case I can always just stick with Objective-C.
Apple say they are getting through 83% of new app submissions in 7 days… I guess Brisbanesounds falls in the other 17%
I guess all I can do is wait. I have probably been abnormally lucky with my quick turnarounds on the 4ZzZfm app so far. It’s probably just a lucky numbers game. I suppose I shouldn’t be worried. It would be much more serious if it was taking a long time once the review process actually STARTS… then I would be worried.
I am very close to being ready to submit the next version of my 4ZzZfm iPhone app to Apple for approval.
I have been hard at work adding features and a better UI experience and I think it’s finally done.
The main addition to this version is the Program Guide. It is a complete 4ZzZ program guide navigable by day and time. It displays detailed info about each show on 4ZzZ (where available). The streaming player screen even shows what program you are currently listening to.
The best bit though, is that the Program Guide can be told to display itself in your current local timezone. I know, I know… it’s no longer Daylight Savings time here in Australia. So the east coast Australian users won’t benefit from this feature till next year. However, anyone in SA or WA will get the Program Guide in their local timezone, not in QLD time.
Best of all, all the users in other countries will benefit most of all as it’s not just a matter of a couple hours one way or another… some programs would be on different actual DAYS in their local area. This new Program Guide handles that. Doesn’t matter if you are in Japan or Canada.. it works off what you have as your local timezone in your iPhone.
Controlling this switch is a new settings screen from within the app, and a settings bundle in the iPhone’s settings app. The in-app settings screen however has another useful feature. It can rebuild the Program Guide if you for any reason find yourself in a new timezone! Just rebuild the Program Guide and you are good to go.
Below is a gallery of screenshots… as always, the gallery software cuts off the screenshots a bit in the thumbnails so be sure and click through to the larger version of each image.
I have been hard at work on the next update to my 4ZzZfm iPhone app and it is nearing the stage where I can release it to my beta testers.
Added so far in this new version:
Program Guide navigable by day (which shows are playing at what time, and a little info about them).
Settings allowing the program guide information to be displayed either in original Brisbane/Queensland time or translated to your current local timezone (a great deal of the downloaders of the first version were a long way from Brisbane).
Display of the currently playing show in the stream playing view.
Here are some screenshots to show what I mean (the gallery cuts the images off a bit… click them to see the full image):
I have been trying to think about how I would add all the features I want to get into the next version of the 4ZzZfm app.
The urge to revisit this app again so soon after the first release has been spurred on at least partially by Apple’s recent purge/blocking of apps that it has deemed of little additional benefit over say… web apps. The 4ZzZfm app is neat in that it is a good branding exercise for 4ZzZ, but none of it’s functionality is really specific to it. It is certainly possible to stream the radio station online without it.
So with that in mind, I want to make sure there is no question about the benefit of the app over just going to the 4ZzZfm website.
The other great thing about the features I want to add to the app is that most of them will require me to learn some new interesting aspect of iPhone development (Table Views, Navigation Controllers, Core Data or communication via JSON with a RESTful web app, etc).
So although I am hanging out to write something new… this should still be the best learning path for now. So… back to the 4ZzZfm iPhone app “drawing board”.
It seems that either my analytics are being blocked in some areas, or my app is being downloaded, but never started up… very weird.
China makes up 18% of the downloads of the 4ZzZfm app currently.
However, in my Flurry analytics, there has not been one session recorded as coming from China.
Curious to say the least.
If any other iPhone developers read this, have you had similar experiences? Is this normal? This is my first iPhone app so I just have no idea what to expect. Feel free to leave comments about any distribution weirdness you have encountered.
When I created the 4ZzZfm iPhone app, I nearly only put it in the Australian App Store.
As it turns out, this would have been an incredible shame. For reasons unknown to me, many people are downloading the app in other countries. Australia, in fact, makes up less than half of the total downloads (45% as of my latest report).
I don’t know if it’s the chance at some alternative news (many downloads are in China), a curiosity about Australia in general, or what… but it’s interesting.
I am not at all sure what this means for me or for 4ZzZfm, but it’s a fascinating trend that I will keep my eyes on.
I can’t work on the 4ZzZfm app anymore until either some bugs are found or the new website goes live and I can start adding features for the next version/update.
So now I am wondering what my next devgeeks iPhone project will be?
Since releasing the 4ZzZ app, I have been contacted by a few people who seem interested in getting an iPhone app made. I have replied to them all asking what they are looking for so I can determine if I want to do it – or if I can do it, for that matter… I am still very new to this.
No one has gotten back to me yet so I feel a tad in limbo.
I know what I should probably be doing is going back to the books and iTunesU videos, etc and learning more about iPhone development so that when the next project DOES come along I will be ready… but it was just so much more fun making something real rather than just doing tutorials, etc.
Click here to see a little bit about it and download it now!
I would just like to take this as another opportunity to say that I could not have made this app without the help and generosity of Matt Gallagher of CocoaWithLove, Michelle Brown of 4ZzZfm and my awesome “team” of beta testers..
The interface to the 4ZzZfm iPhone app got a facelift. It is now using a new image (as opposed to ones lifted from the website). Michelle gave me three images to choose from and this is the one I liked best… though I still prefer the logo that is currently on their site.