Update on What's @ UCSC Mobile App

While I was taking some vacation days to work with the contractor on the septic line replacement, I finished some work on the mobile app I've been prototyping. Here are some screen shots and notes from this stage.

Here's the first post on this project.

Campus Events

The functional design was to pull in RSS feeds from a variety of locations, store the data in localstorage and then display the RSS item in a child browser. This functionality created dependencies on a number of items including some RSS code I got from a new book on JQM, the ChildBrowser plugin for Cordova and some changes in the RSS output of Events Manager. The EM is one of my Drupal systems, but I wanted to get the RSS to behave very similarily to the campus WCMS feeds. More on that below.

list of rss feeds In this screen, you can se the list of feeds we have selected. You'll note the split view display allows us to delete a feed by clicking on the x icon. The Add Feed button takes us to our next screen. By default, we display some text if there are no feeds stored in local storage. This design pattern comes from the book, jQuery Mobile Web Development Essentials by Raymond Camden and Andy Matthews. 

I'll continue to make some modifications to the theming so that the child pages adopt whatever we're going to make this app look like.
















select a feed screen In this screeen, you'll see the list of feeds that I've pre-seeded. I've just grabed the links from the campus WCMS system as well as campus calendar and my Events Manager systems. 

The design pattern should allow for a user to add any feed, so I'll need to cycle back and introduce some text fields that would allow the user to enter a URL and feedname. (That was the original RSS pattern from the book noted above.)

















feed detail screenIn this screen, we are getting the description of the feed item. The button will take us to the actual page. as you can see, thee's some theming cleanup to do.



















In our page view, what we've done is introduced the Child Browser plugin for Phonegap/Cordova. The Visit Entry button above listens for the click (next will be tap), and then calls the child browser with the appropriate URL. This keeps the user within our app as they get deatil, then they can click Done to fall back into our app (which they never left).



















I was getting a lot of duplicate feed entries when I was using a custom JQM select menu. Once I fell back to a standard JQM select menu, the duplicate event firings stopped and all was good. I modified the Entry Page code with a bind handler on the click for Visit Entry. This allowed me to use entry.link as the URL handed to child browser.

Next Steps

There's lots left to do. One item will be device orientation. I've got the outline of functions added and now need to add appropriate CSS to take 100% of the screens for iOS devices. I'll also add some detection code to handle the case where we have no network. We should fail gracefully when possible. Also need to add spinners in a few locations so the user knows that we're working when pulling data over the network. Maybe we'll store the feeds in the SQL DB via Phonegap/Cordova. Lot's to think about.