I had to display the weather – specifically a 5-day forecast – in an app I’m working on here at the college.  Instead of rolling my own, I went looking to see if anyone had already done this.  The only code I found for Titanium was  GWeather (by Bob Sims).  This uses Google weather, however, Google has recently pulled their weather API for developers, which essentially means, I’m going to have to roll my own.  I was on a quest for another weather service and looked at many different APIs that were available.  I settled on Yahoo Weather, they have a json feed, and its super simple, just swap in the zipcode in the url and you have your feed.  Granted its not as robust as Google’s once was, but all I really wanted was a 5 day forecast and this had it.

I figured from the outset that I would build a tutorial around this (eventually) and especially share the code, so I commented like crazy as I went. That also meant that I would have to build a self contained app that pulled and displayed the weather.  I also wanted to implement whatever I came up with into the app for the college easily  (remember the original purpose for this?), so that’s what I did.

TiWeather is a full working app (on iOS, haven’t debugged pull to refresh for Android yet – initial app works fine), and it had a hard coded zipcode (changeable in app.js, or pass it in from elsewhere in your own app).  Using that, it hits Yahoo’s API and pulls back the current conditions and 5-day forecast in nicely structured JSON.  While JSON is simple to parse in Titanium – JSON.parse(this.responseText) – I had a good ‘ol time splitting up the individual data elements the way I wanted (see details of this in FirstView.js around line 55) when I render them to the screen. Anyway, after the JSON is parsed, I save the data in a table on the device for caching purposes which also double for offline usage.  I also keep track of the last time weather was fetched, so if you close and open the app or navigate around to other fictional areas of the app, it won’t go pull it again right away.  This time limit is currently 900 seconds (15 minutes) and also configurable from within app.js.

Included Features / Cool Stuff?

Since I knew other developers would be looking and critiquing my code, I figured I could throw out some cool features to distract them from comparing my code to theirs.

1. Since the weather feed didn’t change all that often while I was testing code, it was near impossible to tell if the refresh function was actually working, other than a small timestamp in the feed itself.  So I have some code in the app that alternates between 2 zipcodes each time you refresh.  Obviously you wouldn’t have this in your app, but I needed a way to prove it was doing what I was expecting.  I alternate between 17019 -Dillsburg, PA where I live and 14424 – Canandaigua, NY – where I grew up.  I figured the weather in those two locations were different enough you can see the screens change. This block of code is located in FirstView.js around line 300.
2. I think the refresh circle arrow icons are a thing of the past, so I’ve implemented ‘Pull To Refresh’ which is what most apps do now anyway. I have some logging that happens, so if you have Titanium Studio visible when you run the app, you can see it working when you refresh. After a second or two the display updates, in this case, the weather for the alternate zipcode displays.

What do I hope you get out of it?

I hope this code can be of use, whether in whole – to actually pull a weather feed, or as an academic example on how to fetch some JSON from a server somewhere. The major bits of functionality you can hack out are -

• storing a variable in the device properties
• display a spinner and message while loading data
• pulling and parsing a JSON feed
• saving data to a local database
• pulling data from a database
• some interesting use of .split  to pull apart data elements
• table row construction with various pieces per row
• implementation of pull to refresh (which totally kicks-ass) including a hidden pull message and rotating arrow
• refresh a tableView with completely new data
• a good laugh at some probably really stupid things I did

Other tid bits of note

This was built with the Single Window Titianium Studio template, so the display code is located in /ui/common/FirstView.js  Also in that common directory is my first ‘fetch-every-time-the-page-loads-version’ (json_parse_FirstView.js), as well as the save-to-database version before I had the pull to refresh (json_pulled_from_database_FirstView.js).  Both are documented and I left them there so hopefully they’ll be use to someone, and so you can hack up the code easily.

The meat and potatoes (or salad of you’re a vegetarian) is contained in getWeather.js located in the root of Resources.   Here you’ll see the code that checks to see if an update is needed, pulls and parses the feed, saves it to the database, yada, yada, yada.

Feel free to send me comments, questions and any changes you think would make it rock.  Its not AppStore bound, however, it can still be a cool demo app… my personal kitchen sink.

Grab it from GitHub | Watch it on Vimeo

Code it right
theCodeDog

I just purchased this book by Trevor Ward, actually bought the bundle – eBook AND paper copy ($17.99 for both), because sometimes you just want to dog ear a page, read it on a plane during take off, or on my deck with no glare). Even though I havn’t opened the eBook yet – my mind is whirling with possibilities.  I can’t wait to see what I come up with.  For those of you that are interested – below is the description and a link to the publisher’s site where I bought it.  Keep watching for a book review, and new projects that implement what I learn.

Book details from the site :

Titanium Mobile has quickly become the platform of choice for many mobile developers and is growing and changing at a rapid rate. From the implementation of CommonJS, Cloud Services, MVC design patterns and more, the last year in Titanium development has been a roller coaster of change for the better. Augmented Reality is a hot area for mobile applications and this book along with the augmentedTi open source application will give a great start to all augmented applications.

This book will show you how to build an Augmented Reality application, which is clean, efficient and usable. It shows how to hide the processing from the user and build a display which updates and rotates smoothly.

Mobile devices have got more powerful, but they still have limitations. Augmented Reality applications test these devices to breaking point and without the correct coding techniques make the applications unresponsive and cumbersome.

This book gives a solution, which will enable you to build an effective application, and is accompanied by a complete working application and source code. It’s essential for anybody who is creating a multiple points of interest augmented reality application. It shows how to build this type of application efficiently and takes into consideration the devices limitations and processing capabilities.

You can see more here and order the book from here - Augmented Reality using Appcelerator Titanium Starter

Code it right
theCodeDog

We all need it.  Sometimes we have it.  Sometimes we loose it.  Sometimes we find it in the oddest places.  I’m talking about that odd little feeling that can make the day fly by or drag on … inspiration.

I’m always looking for inspiration, whether its for an app design, a new method of working something out, or even just something to get me through a tough day. When you build applications like I do,  there are these things called design patterns.  Essentially they’re best practices for a design layout, the way its been proven to work efficiently.  There are good handful of design pattern sites that have pages and pages of screenshots or sketches to help guide and inspire you.

For a programmer, and if you’re looking at code, you can get some design patterns that help you code, or help you understand how things should work.  Sometimes these sites are helpful and other times no so much.  I’m always on a quest looking for great sites that I can go to to be inspired.  Smashing Magazine is one I like to read.  Even though I’m not a designer (which is what a lot of their content is geared toward) I still get inspired reading about the various font treatments, use of white space, or even  how to freelance and cut off that terrible client

I recently found what I think is the best mobile development design pattern site and that is – Inspired UI.  They have a list of categories down the left and pages of screenshots from various apps that deal with the type of layout pattern you’re interested in.  I had to design a mobile page for building details.  On a 3D map of campus, you select a building and the next screen lists all the important information about that building.  Feeling uninspired, I krufted up a terrible screen that did have all the information listed, but it was pretty dull.  After finding this site, I clicked to the Venue category, and saw a multitude of ways to present that data on the screen.

Now – be advised – I’m not saying – rip off the screen layouts from these design pattern sites.  Use them as a basis for your own design.  These screens all have common elements to help you understand what details are important.  Quite possibly, these might include items you don’t think are important.  But when you see they’re on a screen in the Four Square, or Pintrest apps, they just might be valuable to your audience as well.

So a big thanks goes out to @inspireUI because your site helped inspire me and design a screen I was having trouble with.

UPDATE: Just found their facebook page as well if you’re interested.

Code it right
theCodeDog

Over the last 6 months, I’ve gotten into Titanium Mobile heavily.  I recently completed work on a  conference app for a client using Titanium and really love working with it. This was the 3rd app I’ve written (iMessiah / PABUG ), but first using Titanium.  I started following a bunch of developers on twitter and reading more and more tutorials, code, projects, and interacting with the community more.  It seems that every day or so I bookmark a new page that I find is interesting and realized that there may be others out there like me looking for resources and googling to find them.  I’ve decided to post them here for anyone to access, with the hope that it will help someone else out.

You can see my list of Titanium Mobile resources here.

If you have one to add and/or have suggestions on the organization, please email me [ jonathan.wheat @ codedog.net ] and I’ll add it to the list.

Code it right
theCodeDog

I’ve been working hard the last few months learning Titanium from Appcelerator.  Its a pretty amazing mobile sdk allowing you to build and deploy mobile apps using JavaScript as the core language.  When you run the app, it compiles to native code (Objective C for iOS) and because of that it is super fast.  You can also build for Droid as well using the same codebase.  Depending on the one you build and test with most (for example I did iOS first) – you’ll have to make some layout tweaks.  Especially for droid with all the different screen sizes.

I’ll save my Titanium review for another time, so if you’re interested you can take a look at the screenies for the new conference app here (still awaiting review in the app store – yippee)

Code it right
theCodeDog

I subscribe to the TechZing podcast and the two hosts, Justin Vincent and Jason Roberts have used Appcelerator for a couple projects of theirs and talk about it in many of the older episodes.  I had tried Appcelerator on my old windows box and it was a disaster. Could have been them, could have been me – didn’t care.  Then I moved to Mac – and tried it.  I still had problems, think I even tweeted about that back in February.

Since I respect the guys from TechZing and with the on going praise, I figured I’d try it again.  I googled how to remove it completely from my mac, just to make sure the old broken / mis-configured stuff was gone, downloaded and installed it.

To my amazement, it installed easily, and I was able to quickly open Titanium Studio (essentially eclipse customized for Titanium) and run a new empty app.  Granted it wasn’t an exciting app, but it did open in the simulator.  After about 40 minutes of dinking around, I was able to get everything in order (thanks Apple) and deployed it to my iPhone.  Again, no awesomeness in that app, but still – a huge leap.  Titanium has an app called Kitchen Sink – where they add all of their features, and show off the framework.  I downloaded that, imported it, and was able to deploy that on my phone as well.  This rocked.  10 minutes later, I had it running in the Android simulator. It only took 10 minutes because I had to get the Android SDK stuff in order.

Within an hour of downloading, I had both created and imported apps, built them, tested them on the simulator and deployed them to my iPhone.  Amazing.

Appcelerator uses Javascript as a programming language, yea, not just a scripty thing you use on a webpage, as the language. Pretty cool.  The code gets compiled using the device SDKs so so the deployed app runs natively on the phone.  This gives you access to the device’s features like calendar, GPS, accelerometer, camera, video, photo libraries, file system etc.

I have yet to really start playing around with it, but I’m planning on building an app for a friend, so keep watching this blog for that.

All in all – when I can go from download to deployment on my device in about an hour, that rocks. Titanium Appcelerator gets an A+ from me. Thanks Justin and Jason for influencing me to try it again.

Code it right
theCodeDog