Devgeeks

blog.izs.me: Free as in Hugs Licence

Fri, 19 Apr 2013 08:54:04 +1000

Copyright (c) __AUTHOR_NAME__ (“Author”) and Contributors

All rights reserved.

The “Free as in Hugs” License

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must…

4ZzZfm app in need of an update

Wed, 03 Apr 2013 16:13:00 +1100

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).

photoKandy Studios: Getting Started with Cordova-CLI

Tue, 26 Mar 2013 11:14:24 +1100

photoKandy Studios: Getting Started with Cordova-CLI:

A Great intro to the Cordova Command Line Tooling

photokandy:

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…

My slides for the Sensis API Product Hack Camp

Sat, 08 Dec 2012 15:02:59 +1100

My slides for the Sensis API Product Hack Camp

Raised center TabBar button in Cordova / PhoneGap for iOS

Mon, 03 Dec 2012 00:40:03 +1100

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 aperture-tab@2x.png 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.

The JavaScript Code

For the JavaScript code, all you really need to do is create a TabBar item with an empty label and an empty icon.

For example, in NativeControls:

window.plugins.nativeControls.createTabBarItem("takepix", "", "", options);

and in TabBar:

window.plugins.tabBar.createItem("takepix", "", "", options);

The Objective-C Code

Pixfor happens to use the NativeControls plugin, but the code below should work in both.

They both have a method in their respective .m files that creates the TabBar (create in TabBar and createTabBar in NativeControls). *

Both these methods end with

[self.webView.superview addSubview:tabBar];

What we are going to do is add the following code directly after this line before the closing brace.

This code will add a custom UIButton using our image centered on our TabBar. Note the file name aperture-tab.png in the first line. The retina @2x version does not need to be explicitly referenced.

And there it is! Our special TabBar button.

* Line numbers only used for illustration. Please find the methods above in the plugin’s latest version.

First rejection

Sun, 02 Dec 2012 00:36:01 +1100

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.

The easiest way to comply was to have the actual charitable donation aspect happen on a web site and have the app kick the user out of the app to said web site to complete the donation. If the app had been native I would have had to re-write all my logic and create a web site appropriate for a mobile device, etc. However, since the app was a hybrid app using PhoneGap and KendoUI, all I had to do was copy some of the app into a standalone website using the same UI and the same JavaScript logic. Then I added a button from the website sending the user back to the app using URI schemes in iOS (the Android version of the app can stay how it was).

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.

the Web, unplugged: There must be something out there?

Mon, 25 Jun 2012 16:05:49 +1000

the Web, unplugged: There must be something out there?:

johnallsopp:

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.

I always wanted to be a 1%-er

Sat, 02 Jun 2012 10:35:00 +1000

So I submitted version 1.1 of Pixfor already.

I don’t think that’s the 1% I wanted to be in. *sigh*

Pixfor is live.

Mon, 28 May 2012 00:18:44 +1000

The side project I have been working on for the last two months is finally live.

http://pixfor.me

Pixfor is, in many ways, the 21st century update on the idea of leaving disposable cameras on the tables at weddings. It is also a great deal more than that.

It’s a combination of an app (currently iOS only) and a SaaS web site.

I have so much I haven’t had time to post about here and hope to finally get around to it now that Pixfor is launched (albeit very softly so far).

Been a while, but there is a reason

Sat, 19 May 2012 07:42:00 +1000

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.

Until then, stay tuned? ;)

Who Uses PhoneGap/Apache Cordova?

Wed, 28 Mar 2012 18:47:45 +1100

Who Uses PhoneGap/Apache Cordova?:

A nice list of some of the “bigger” names behind/using PhoneGap / Cordova.

Announcing the Read it Later plugin for PhoneGap (soon also for Cordova)

Wed, 28 Mar 2012 17:42:00 +1100

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!

https://github.com/devgeeks/ReadItLaterPlugin

If you wanna be as cool as Wikipedia, run over to GitHub and clone it into your app now!

Installation

This plugin allows you to save a URL to Read It Later from your app.

Add the plugin much like any other:

Add the ReadItLaterPlugin.h and VolumeSlider.m classes to your Plugins folder in Xcode (use “Create groups for any added folders”)
Add the ReadItLaterPlugin.js file to your www folder
Add the ReadItLaterPlugin.js to your html file. eg:<script type="text/javascript" charset="utf-8" src="ReadItLaterPlugin.js"></script>
Add the plugin to the PhoneGap.plist under Plugins (key: “ReadItLaterPlugin” value: “ReadItLaterPlugin”)

Next, get the Read It Later API iPhone Library and add it to your project:

Download the library from Read It Later
Unzip the library and examples
Copy these four files into your Xcode project under the Plugins folder (again, use “Create groups for any added folders”)
- ReadItLaterLite.h
- ReadItLaterLite.m
- ReadItLaterFull.h
- ReadItLaterFull.m
Get an API Key from Read It Later for your app
Add your shiny new API key to the top of the ReadItLaterLite.m file you copied in above
- static NSString *apikey = @"<api key here>";
Add the name of your app (as you entered it to get your API key above) as well
- static NSString *nameOfYourApp = @"<name of your app here>";

Finally, call the saveToReadItLater() method using a success callback and an object containing a url and a title:

Example

function onDeviceReady()
{
    var readItLaterPlugin = window.plugins.readItLaterPlugin;
    readItLaterPlugin.saveToReadItLater(
        function(){
            console.log("Successfully saved to Read It Later");
        }, 
        { 
            url: "http://github.com/devgeeks", 
            title: "Devgeeks on GitHub"
        }
    );
}

How to keep your old version of PhoneGap for iOS when upgrading

Mon, 27 Feb 2012 01:09:28 +1100

The PhoneGap installer for iOS overwrites the old version when you run it. It puts itself in over the top of your previous version.

However, when you have shipped an app with PhoneGap and it’s happily in the App Store, the last thing you want to do is have to deal with changes in the PhoneGap API between versions if you need to make small maintenance tweaks down the track.

Here’s what I do in this instance.

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.

You now not only have a back up you can keep old projects maintained against, but you have a version you can use if the new PhoneGap changes something you want to use or breaks a plugin you need for your project. In fact, inside the ‘/Users/Shared/PhoneGap-1.2/Frameworks/PhoneGap.framework/www’ folder is the version-specific PhoneGap iOS JavaScript file if you need to downgrade a project.

PhoneGap / Cordova plugin devs and users are in for a bumpy ride

Sun, 26 Feb 2012 18:48:22 +1100

It looks like those of us who rely heavily on plugins are in for a bad time.

Cordova devs working on 1.4.x began the process of deprecating some classes a great many plugins used, now it looks like the work on 1,5 and beyond is going to make the plugin landscape even shakier.

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

Tue, 21 Feb 2012 16:29:00 +1100

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):

-(PGPlugin) initWithWebView:(UIWebView)theWebView 
{     
    self = (PluginClassName*)[super initWithWebView:theWebView];     
    return self; 
{

Then, where ever the deprecated ‘appViewController’ appears… change:

[[ super appViewController ] presentModalViewController:picker animated:YES];

to:

[self.viewController presentModalViewController:picker animated:YES];

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:

tommy AT devgeeks DOT org

4ZzZfm app program guide updated

Sat, 11 Feb 2012 17:35:00 +1100

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.

The move to Tumblr

Wed, 08 Feb 2012 14:13:55 +1100

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. ;)

Meet the new 4ZzZfm app – now for iPhone and Android!!

Mon, 05 Dec 2011 11:34:00 +1100

Dear 4ZzZfm and lovers of the best community radio station ever…

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.

http://devgeeks.org/iphone-apps/4zzzfm-iphone

or on iTunes:

http://itunes.apple.com/au/app/4zzzfm/id359090535?mt=8

oh… and for those that have brought it up whenever the 4ZzZfm iPhone app is mentioned…

Meet the 4ZzZfm Android app!:

http://devgeeks.org/android-apps/4zzzfm-android-app

or on the Android Market:

https://market.android.com/details?id=org.devgeeks.fourzzzfm

4ZzZfm iPhone app

Tue, 29 Nov 2011 10:58:00 +1100

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...)

Tue, 06 Sep 2011 01:31:00 +1000

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 ;)

Devgeeks

blog.izs.me: Free as in Hugs Licence

4ZzZfm app in need of an update

photoKandy Studios: Getting Started with Cordova-CLI

A Great intro to the Cordova Command Line Tooling

My slides for the Sensis API Product Hack Camp

Raised center TabBar button in Cordova / PhoneGap for iOS

The Button Image

The JavaScript Code

The Objective-C Code

First rejection

the Web, unplugged: There must be something out there?

I always wanted to be a 1%-er

Pixfor is live.

Been a while, but there is a reason

Who Uses PhoneGap/Apache Cordova?

Announcing the Read it Later plugin for PhoneGap (soon also for Cordova)

Installation

Example

How to keep your old version of PhoneGap for iOS when upgrading

PhoneGap / Cordova plugin devs and users are in for a bumpy ride

PhoneGap plugins in iOS complaining about deprecations and what you might be able to do about it

4ZzZfm app program guide updated

The move to Tumblr

Meet the new 4ZzZfm app – now for iPhone *and* Android!!

4ZzZfm iPhone app

Devgeeks takes over the WORLD! (or at least my life...)

Meet the new 4ZzZfm app – now for iPhone and Android!!