Tag: PhoneGap

PhoneGap Build Watcher

I love PhoneGap Build.  I love not having to have anywhere from 3 to 7 different IDE/SDK rigs to get apps that run on multiple platforms. That being said, IDEs do give something that PhoneGap Build (henceforth referred to as PGB) lacks – workflow.

My current workflow with PGB goes something like this:

  • Push changes to PGB
  • Leave PGB open in browser tab
  • Get bored
  • Wander away to other browser tabs
  • Remember that I am working on a mobile app
  • Go back and check PGB
  • See that it has updated
  • Pick up device
  • Click download link
  • Reinstall

It’s not the best workflow.  Yeah, I could fix it by being more disciplined. But evidence suggests that’s not going to happen. I could solve my problem with technology. PGB has an API for answering questions like “Is the Android version of my app currently built?” So I put together a little mobile app to take advantage of that API. I call it PhoneGap Build Watcher. It does what you would expect:

  • You enter your PGB credentials
  • You get a list of all of your projects
  • You choose one
  • Any time that project gets updated you get sound, vibration and notification alerts.
  • From that alert you can click on the download link and install the new version of your application.

This has really helped my workflow with PGB, and I hope some of you out there can use it to do the same.

See it in action:

It’s of course Open Source and hosted on GitHub.

I’ve put it up on Google Play, but was unable to get it into the App Store.  I should have realized it before trying but Apple doesn’t like applications that prompt you to download applications. No worries. Great thing about PhoneGap apps, they’re just web apps, so I have a web app version running at http://pgbwatcher.com if any iOS users want to give it a try.

Let me know what you think.

PhoneGap Starter Project – Productivity

A few weeks back Ryan Stewart posted on his idea for PhoneGap Starter projects. They were designed to take some of the grief out of getting started with various aspects of PhoneGap and PhoneGap Build projects.  I’ve contributed a project based on one of pet peeves with PhoneGap Build: the lack of productivity.

Don’t get me wrong. I love PhoneGap Build.  I love not having to open multiple IDEs to work on mobile apps. I love working on HTML apps in HTML tools – but you lose a few things in the trade. You lose being able to click one button and have your work available on your device.  You miss being able to click and get a pop up that says your work is ready to view on the device.

These things seem small, but having tried to build actual projects in PhoneGap Build, I found them critical.  I would go kick off a build, and then have to wait for the build to be complete.  I’d open a browser windows while I waited. 20 minutes later, I would cycle through my Chrome windows and remember that I was waiting for a build to complete.  

A few months back I tried my hand and solving this and came up with a shell script that handled this for Android.  Over the past few weeks, I’ve added to, improved, and modified it. I now have a solution in ANT that does the following:

  • Uploads files to PhoneGap Build triggering a rebuild
  • Polls for IOS and Android to be finished
  • Downloads ipa and apk files when ready
  • Installs them onto connected iOS and Android devices
  • Uses the “say” command to let you know when things are done.

It takes the form of an ANT build file, some properties, and 2 shell scripts. I’ve posted the whole thing as PhoneGap Starter Productivity on github. As far as I know this will only work on OS X, which I hope isn’t a huge problem for anyone, and I’m willing to collaborate with someone to make them more cross platform friendly.

Also I feel it’s important to note, that while these scripts mean you don’t have to use the IDE to accomplish these tasks, you still have to have Xcode and the Android SDK on your machine to use them. 

MoDevUX 2012

It looks like I’m going to be speaking at MoDevUX outside Washington, DC later this month.

I’ll be talking about how to make great user experiences in mobile applications with PhoneGap.

It’s a new event and group for me, and it looks great. It’s a UX and UI focused conference with a focus on mobile.  Better yet, here it is in their words:

MoDevUX will bring together leading mobile developers, UX/UI designers, architects and managers to break the mold on user experience and design.  Attendees will discover the latest in mobile UX/design methods and meet likeminded people at the edge of the mobile frontier. Be sure to check out the workshops available on the 19th and the hackathon on the 21st!

 

If you’re in the DC area, check it out.

MoDevUX
April 20
McLean, VA

Android Toast-like Alerts in HTML using CSS

One of the little things I like about Android is the “toast.” If you are not familiar with the toast, it is the little transparent notice you get that operations are done. The best example is the toast that tells you how long you will have to sleep before your alarm goes off. (Pictured here.)

I really like the concept. It usually short-circuits the whole item editing process.

Without toasts:

  1. Click save button.
  2. Get feedback that item has been saved.
  3. Manually go back to previous screen.

 

With toasts:

  1. Click save button & go back & get feedback.

 

I wanted to implement toasts in an HTML PhoneGap application. Now I know I could do this with just JavaScript, or with jQuery, but I really wanted to give CSS transitions a try. CSS transitions allow you to alter a CSS property over a set period of time. They work really well for this sort of case.

So the first thing I have to do is apply the transition.

You’ll notice a couple of things here. One the syntax for the transform is pretty simple:

http://snipplr.com/js/embed.js
http://snipplr.com/json/62077

[browser css keyword]: [property to animate] [duration] [easing method]

Once you do that, the rest is really simple. Basically, all you have to do is change the value for the property you have added a transform to, and the browser takes care of the rest. So to fade out my toast, I set the opacity to 0. That’s it.

http://snipplr.com/js/embed.js
http://snipplr.com/json/62078

See the demo.

Why do I like this:

  • I always prefer doing visual things in CSS.
  • This seems to me to be simpler than using JavaScript animations
  • CSS transitions will be hardware accelerated on environments that support doing so.

 

Now, I have to tell you there are caveats:

  • It doesn’t work in IE
  • I’m sure someone who knows more than I will put more in the comments

But it does work within the mobile browsers I tested on iOS and Android, which means I’m free to use this in my PhoneGap application.

 

One Click PhoneGap Build to Android Device Script

I’ve been fooling around with PhoneGap Build, and I really love it. I love that I don’t need to fire up Eclipse or XCode to start fooling around with an app. All I need is a text editor and a browser. What I especially love is the ability to integrate a github repository to the whole process. It makes following proper development practice, while living in the cloud, very easy.

But I’ve been spoiled for the last year or so. Being able to immediately preview on a connected device has ruined me for the command line, multi-step, manual crap. So at least on Android I’ve fixed it for myself by building a nice shell script that takes advantage of PhoneGap Build’s Web APIs to create a one-step build.

What’s involved:

  • Commit all uncommitted files to git repository
  • Push git repository to github
  • Tell PhoneGap Build to poll github for changes
  • Poll PhoneGap Build until Android apps have been rebuilt
  • Download App
  • Use ADB to install onto attached device.

So I wrote a little shell script to do it all for me. I hope it helps someone else who is struggling with the same workflow issue. The script is below.

http://snipplr.com/js/embed.js
http://snipplr.com/json/61101