Tuesday, November 30, 2010

iOS & Mac OS Development - Calculator tutorial

So much has happened since this post, check out my new app on iTunes

Got my first Macbook Pro on November 16th. Since then I have been exploring the possibilities in iOS and Mac OS development. I was amazed on the amount of documentations on the subject compare to google app engine. Probably because of the fact that the amount of iDevices that people are using these days.

If anyone is looking into iOS development I would recommend looking into the Standford Developing Apps for iOS by Paul Hegarty on itune U. Don't worry it is completely free and you are basically getting a $13,000 per quarter Standford course for free. "It is a very exciting time for developers." as my buddy Money Mike would put it.

My first take on the framework and the Software Development Kit(SDK) environment is that it is a complete set of tools. Like any other framework it is extensive with lots of layers of technology and as my mentor Jason Wei would say "It takes about a month to learn the sytax of a language, however it'll take a lifetime to master a framework."

The current version of the development is Xcode 3.5.2 and iOS SDK 4.2. You can download it for free at http://developer.apple.com.

Objective-C is a superset of C and for those who grew up with C/C++ it should be intuitive to get around. On top of the Xcode development environment this is my first time owning a Mac and using the Mac OS. However, I feel pretty comfortable because of the vast amount of documentations and tutorials that are available.

"Learning - Welcome the unknowns and opportunities to make mistakes." ~ docchang

I completed a basic calculator with a few extra functions in iOS and Mac OS. You can find the source code for both builds below:

I created the iOS version and ported the project to Mac OS. The calculator model stays intact, however a similar view needs be recreated using Mac OS objects. e.g UIButton -> NSButtonUILabel -> NSTextField. Obviously the controller needs to use the Mac OS objects and the logic stays the same. One interesting thing is that under Mac OS project the NSTextField can be mapped to Label and TextField in the view unlike an iOS project Label and TextField map to their own correspondents.

Monday, November 22, 2010

Displaying timestamps in client's(viewer's) timezone with jQuery date format 1.0

While I was going through the Google App Engine tutorial to create a nice looking guestbook. I wanted each message to display its timestamp in the viewer's timezone. Each message was already timestamped in the datastore in Coordinate Universal Time (UTC). My tasks are to format them into desire format "MM/dd/yyyy hh:mm:ss a" and display the times in the viewer's timezone.

I searched javascript utilities and came across the jQuery dateFormat 1.0. However, I had to modify a few things. The original code is here and below:

  132 case "hh":
  133     retValue += (time.hour === 0 ? 12 : time.hour < 13 ? time.hour : time.hour - 12);
  134     pattern = "";
  135     break;
  136 case "mm":
  137     retValue += time.minute;
  138     pattern = "";
  139     break;
  140 case "ss":
  141     retValue += time.second;
  142     pattern = "";
  143     break;

There are two issues within these lines of code:
  1. Notice on line 133 the triple equals (===) is used to compared. Ideally sounds and looks great, however the value in "time.hour" sometimes are "00" as string. To fix it I use the double equals (==) comparison operator instead.
  2. time.second contains the second information as well as the timezone information. Therefore, if you specified "ss" as part of your format it will include the viewer's current timezone information and it will just clutter your screen because there is no point displaying the same information for each message. To fix it I further parsed the time.second and made a "tz" format for displaying timezones.
Below are the changes:

  132 case "hh":
  133     //time.hour is "00" as string == is used instead of ===
  134     retValue += (time.hour == 0 ? 12 : time.hour < 13 ? time.hour : time.hour - 12);
  135     pattern = "";
  136     break;
  137 case "mm":
  138     retValue += time.minute;
  139     pattern = "";
  140     break;
  141 case "ss":
  142     //ensure only seconds are added to the return string
  143     retValue += time.second.substring(0, 2);
  144     pattern = "";
  145     break;
  146 case "tz"://parse out the timezone information
  147     retValue += time.second.substring(3, time.second.length);
  148     pattern = "";
  149     break;

You can see my full version of the jQuery date format here. Once I fixed the format I then found a post on stackoverflow.com about converting UTC to local user timezone. Thanks to CodeGrue's help.
    3 (function ($) {
    4     $.fn.localTimeFromUTC = function (format) {
    5         return this.each(function () {
    7             // get time offset from browser
    8             var currentDate = new Date();
    9             var offset = -(currentDate.getTimezoneOffset() / 60);
   11             // get provided date
   12             var tagText = $(this).html();
   13             var givenDate = new Date($.format.date(tagText, format));
   15             // apply offset
   16             var hours = givenDate.getHours();
   17             hours += offset;
   18             givenDate.setHours(hours);
   20             // format the date
   21             var localDateString = $.format.date(givenDate, format);
   22             $(this).html(localDateString);
   23         });
   24     };
   25 })(jQuery);

http://emplementation.appspot.com is the final product. I'm currently working on OpenID integration and will blog about when it is finished.

Wednesday, November 10, 2010

My first Google Application: Guestbook Tutorial with enhancement

Besides the standard instructions from the tutorial I have enhanced my guestbook to display timezone information and timestamps conversion according to the client's timezone per message. I also added a stylesheet file for the look and feel.

I had to fix some jQuery date formatter bugs, but no big deal. I will blog about the jQuery bugs later. You can view all the code online except the Python code.

   17 import cgi
   18 import datetime
   19 import wsgiref.handlers
   21 from google.appengine.ext import db
   22 from google.appengine.api import users
   23 from google.appengine.ext import webapp
   24 from google.appengine.ext.webapp import template
   26 class Greeting(db.Model):
   27   author = db.UserProperty()
   28   content = db.StringProperty(multiline=True)
   29   date = db.DateTimeProperty(auto_now_add=True)
   31 class MainPage(webapp.RequestHandler):
   32   def get(self):
   33     greetings = db.GqlQuery('SELECT * from Greeting '
   34                 'Order By date DESC '
   35                 'LIMIT 20 ')
   36     values = {'greetings': greetings}
   37     self.response.out.write(template.render('main.html', values))
   39 class Guestbook(webapp.RequestHandler):
   40   def post(self):
   41     #if author is empty use anonymous
   42     if self.request.get('author'):
   43       userauthor = self.request.get('author')
   44     else:
   45       userauthor = 'Anonymous'
   46     #set greet object
   47     greet=Greeting(content=self.request.get('content'), author=users.User(userauthor))
   48     greet.put()
   49     self.redirect('/')
   51 application = webapp.WSGIApplication([
   52     ('/', MainPage),
   53     ('/sign', Guestbook),
   54 ], debug=True)
   56 def main():
   57   wsgiref.handlers.CGIHandler().run(application)
   59 if __name__ == '__main__':
   60   main()

Tuesday, November 2, 2010

Google App Engine(Eclipse PyDev Plugin) Tutorial Errors???

I followed the Google App Engine tutorial and was able to launch the web application using Google App Engine Launcher. However, I'm getting some errors in my Eclipse - PyDev environment when I run it.

I checked the Google App Engine Launcher Logs. It is also showing some errors.
Update 11-22-2010: datastore error is normal, because there is no data. However, python require PIL module. You can download most of the PIL binary installer here: http://effbot.org/downloads/#pil.

However, the web application runs fine.

Any ideas?