Application Craft - Using Foursquare & MVC (Advanced)

I've been working a lot lately with Application Craft http://applicationcraft.com and learning the tool.  I have to say the more I use AC the more I am impressed.  Sure, I have a lot to learn about web development and mobile in particular.  AC helps so much in the development process and helps me to focus on the functionality rather then the tedious details of HTML, CSS and widget libraries.   For me, and this is a good thing in my opinion,  AC is the new Visual Basic for the web and mobile application development.

Now when I first started to learn object oriented design and development I could only find simple toy like examples.  I remember being so frustrated trying to understand how it all was supposed to work together.  I was living in Tulsa at the time and we had a large family room.  I remember finding an application that was a text editor written in C++, the entire source code!  I was enthralled and printed out the entire code.  I laid the paper on the floor and with pen and paper proceeded to document and flow chart how everything worked.  It was a pivotal point in my OO experience.

In that spirit I'm making available a project I've been working on, Mobile Venues http://acft.ws/cmmj  for others to dissect and hopefully learn something from.  It's a work in progress but I think it's to a milestone that it might be of some use to someone.  Maybe, maybe not.  Now I readily admit I'm not expert and there's probably some strange or obvious bugs, but hey, it's a work in progress.

Here's a image of the app running on my Android as a AC / PhoneGap application:

Here's some of the things you'll learn:

• Oauth.  This works as a web app but not as a PhoneGap mobile app.  AC will hopefully address this soon as all the major folks (Facebook, Twitter, Foursquare, etc.) require it.
• MVC - I use a pattern of Model View Controller that works for me.  
• Mobile Repeat Container Performance - what do you do when the performance of the Repeat Container suffers on the mobile?
• Usage of the Foursquare API
• Usage of JQuery JSON/Post

Some of the functionality of the Mobile Venues:

• Get the logged in users info
• Get the geo location
• Show the users friends
• Show the users To Do,  Tips and Done lists
• Mark To Do's as Done
• Mark Done as To Do's
• Explore the venues near your area
• See the Special offerings
• Change the radius of the search
• Drill down into various categories and sub-categories
• View all the tips for a venue

If you would like to import the AC project into your account and fiddle around with it, you'll have to do a few things:

• Get an account from AC!  http://applicationcraft.com
• Download the AC export from https://github.com/bartonhammond/Mobile-Venues
• Note: you can use GIT or just select the ZIP option
• If you use the ZIP, note that it contains the export app_MobileVenue_Step_One.zip
• In the AC console, Apps -> Import and import  app_MobileVenue_Step_One.zip 
• Note what the Short URL is - you'll need it
• Go to  https://developer.foursquare.com/ and Get Started.
• Select the My Apps 
• Select Register a New Consumer
• For the Callback URL, use the AC Short URL 
• Edit the AC project you imported
• Go to line 983
• Replace the Client ID
• Replace the encodeURI 
• Go to line 996
• Replace the switchApp (http://www.applicationcraft.com/revisions/current/docs/user-guide/index.html?switchapp.htm)

That should get you to be able to run the app as a web app.

Now I have been working with PhoneGap and testing this with an Android device, my Galaxy II S.   There's one major drawback though.  You can't do OAuth.  At least not yet.  AC will hopefully address this soon.

But if you want to play around with your own device using the PhoneGap generated app, then here are the steps you need to consider:

• Set up AC PhoneGap configuration (http://www.youtube.com/v/WpVMlSerJ-Q?autoplay=1&hd=1&fs=1&showsearch=0&rel=0&)
• Run your app as a web app and login into Foursquare
• Use the debugger and look at the attribute BWH.oauth
• Copy that value
• Edit the project source code and set BWH.oauth to that value
• NOTE: IMPORTANT - if you do this, do not give this PhoneGap:Build app to anyone!!!!  The reason is it will authorize all activity as YOU!  So only do this if you want to play around on the mobile by YOURSELF!!!!
• Now use AC ->  Console -> PhoneGap and build
• Deploy to your device

You should strongly consider setting up the Weinre debugger (see http://www.applicationcraft.com/revisions/current/docs/user-guide/index.html?native_apps.htm and the section about Weinre debugger) from within PhoneGap:Build and look at all the log statements that are provided.  It will give you a good indication of all the activity taking place.

Here are some images from my Android:

Enjoy!