Archives

PhoneGap From Scratch: Twitter Maps

2012-02-02 09:22
This entry is part 4 of 4 in the series PhoneGap From ScratchWant to learn how to use PhoneGap, but don 8217;t know where to get started Join us as we put together Sculder , not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you! Where We Left Off In the last part of this series, we got our web app up and running with some basic structure and transitions between pages. In this part, we are going to continue working on filling out the parts of the app that can run without PhoneGap and set up our PhoneGap project, ready for the integration. Before we get started, I wanted to cover a question that I always get asked. This is a question that I once asked, and no doubt you might have asked too. Namely: How do I debug a web app on a mobile device Debugging on a Device There are a number of ways of debugging in a device. You could go old-school and use alert(something);, but having alerts all over the place is both inefficient and could end up in the production code (so annoying!). You could use the debug console in Safari on an iOS device, located in Settings - Safari - Developer, but not all devices use Safari or have a debug console. Also, this console outputs minimal information. If I just need to use a JavaScript console to catch a console.log(), or maybe execute some JS on the device to check something, I like to use jsconsole.com. It 8217;s one of the easiest methods of using a console on your device and there is even an iOS app available. To start a session on jsconsole.com, just type :listen and you will then get a script tag output to include in your page. Start up you app and you will see the connection happen in the console. You can now execute JS in the console and see it reflected on the device or log to the console in your code and see it here. See the video below for a demonstration of this: For more help on jsconsole, see here. Another alternative is WeInRe (Web Inspector Remote). First started off as an independent project, WeInRe is now part of the PhoneGap family and can be found at debug.phonegap.com. The set-up is very similar to jsconsole, but what you actually get is a a WebKit inspector, much like Chrome or Safari. See the video below for an example: Another alternative is Socketbug, which is great, but requires Node and socket.io to be installed and set up, which is unfortunately outside of the scope for this tutorial. If, however, you are feeling adventurous and want to give Socketbug a try - it 8217;s worth it. Those are the debugging tools that I use. Now we can start adding some features! Twitter Feed One of the features that we are able to implement without a PhoneGap API is the Twitter feed. This feature will simply list a feed of tweets that match a particular search term. Thankfully, Twitter can return data in JSON format when we run a query on search.twitter.com. If you use the following URL http://search.twitter.com/search.json q=ufo+spott...
Read More...