Featured App Spotlight – PopSpotter

Our featured app spotlight comes from Stephan Wozniak, the man behind the pop culture app, PopSpotter. PopSpotter helps you discover all the iconic spots filmed and referenced in your favorite movies, tv shows, and music. 

Tell us a little bit about your app
PopSpotter is a pop culture map for your iPhone. It helps you discover the iconic spots filmed and referenced in your favorite movies, television shows, and music.
Why did you decide to use Appcelerator as opposed to a native solution?
Popspotter I’m a web developer by day. I had come up with the idea for PopSpotter a while ago and had finally found the right balance of free time and energy to knock out a proof of concept. However, I did not have all the free time required to properly learn Objective-C. I knew I’d be facing many unfamiliar situations moving to native app design, and I didn’t want to throw a new language into the mix while I was looking to move fast. Since I use JavaScript regularly, Titanium seemed like it might be a perfect fit.
Did you use any Appcelerator modules in your development?
I used the Appcelerator Cloud module for ACS, Flurry for analytics, and NaviBridge for integration with DENSO NaviBridge. I finished development on PopSpotter before Alloy was released, so porting the app to Alloy is the next big step down the pipeline.
Can you walk us through our development process?
I started with the basics – browsing the docs and the Kitchen Sink app until I was able to obtain a user’s location, store a sample spot in the Cloud services, and create user accounts to allow for login and check-ins. From there, it was important to start designing – I find it’s rare to get the right balance of good looks and UI/UX all upfront, so I wanted design improvements to be an iterative process. I sketched my wireframes by hand and then built templates with Photoshop.
Once I finished all the core functionality, I scoped out what it would take to build a complete application. I added social network support with Facebook and Twitter, I included the default iOS Maps within certain views, and I added support for the iPhone camera to add photos to check-ins.
To better handle CRUD operations, I built myself an administration interface (which interacts with ACS). It’s built on PHP (like JavaScript, a language I was already familiar with). With the recent release of Node.ACS, I would probably move to Node for management.
As I finished development, Apple released the iPhone 5 with a new screen resolution. Fortunately, I just had to change a few values and create a slightly taller splash screen. I had accounted for the new resolution in less than an hour.
After the first launch and seeing the Appcelerator Cloud Services being used successfully in action, I planned and executed the first UI overhaul. I added support for the NaviBridge module to integrate with certain in-dash navigation systems. Lastly, because of a high volume of user requests, I added a form to PopSpotterApp.com to allow users to submit places of their own. I still fact check them all before adding them to the app’s database.
Most recently, I chose to make the app free, which has seen user growth increase dramatically.
How does Titanium factor into your future development plans?
After creating PopSpotter, I’m happy to say I enjoy mobile app development. I have many more ideas I want to build out, so for now I see myself Titanium for all future apps. I am currently working on a guide app for an upcoming music festival. I do hope to eventually learn Objective-C enough to start writing modules of my own.
Can you walk us through some of the native functionality that your app is utilizing?
PopSpotter is based around geolocation and maps – not only can you find where certain scenes were filmed, but it can also guide you there. In the realm of social networks, users can connect to Twitter and Facebook for posting check-ins (text w/optional photos).
Sample Technical Implementation: There are several unique cases to handle when the user taps on a spot listing. Whether they’re browsing spots around them, browsing movie/show/band listings, or searching by specific location, they will reach the detailed listing view, as seen here:

The UI is simple – the back button will return them to the listings they were browsing previously, and the share button at the bottom will bring them to a new window. The name of the show, the title, and the description are each displayed using Ti.UI.createLabel(). Let’s focus on displaying the map with the spot annotation, and address a few key decisions the app should handle gracefully for the user.
All the data for this spot is stored in ACS as a “Place”, and for the purpose of this example, it is retrieved from ACS and stored in a variable called search data. Simplified, it looks something like this:

No real surprises. Let’s also assume the phone’s current location has already been discovered and is stored in Ti.App.lat and Ti.App.lon (we’ll need this information to calculate how far away a spot is). Speaking of, let’s calculate the distance now:

Passing this function the latitude/longitude values of two locations will return the bird’s eye distance in miles. Let’s store that in searchData.

Okay, so in that screenshot, you can see we’re 13 miles away… let’s say I want to change the language to better suit the distance (whether it’s under a mile away, one mile, or many miles). Let’s try this:

Now we can add the distance message to the map annotation, but let’s take it one more step.
I want to allow the user to tap on the annotation and launch the iPhone’s Maps app… but if you read above, I also am supporting the NaviBridge module. If we see that’s installed, we’ll want to launch that instead. Either way, we’ll be using subtitle to hint to the user they can launch the directions with a simple tap. Let’s add the NaviBridge module and check to see if it’s installed:

Now that that message is complete, let’s create the map and the annotation:

Last step! Time to add the click listener. As stated previously, we have two cases here: if NaviBridge is installed, we’ll add a POI, and if it’s not installed, we’ll launch directions with the iPhone Maps app.

The only trick to note here is in launching the native Maps app… before iOS 6, using Ti.Platform.openURL() with a URL that started with “http://maps.google.com”, and passing specific parameters, it would launch Maps (the documentation is here). Once Apple launched its own Maps with iOS 6, that URL no longer worked. It now expects to see “http://maps.apple.com”. If it sees the Google Maps link, it will just launch the browser. It still accepts the same query string parameters, so we just need to test the iOS version and handle it accordingly.
Hopefully, this helps if you’re looking to enhance your maps or integrate NaviBridge. It really is simple.

Big thanks to Stephan for walking us through the use cases when a user clicks on a tap point and for taking the time to give us some insight into his experience and success with Titanium app development. Interested in having your Titanium app showcased? Send us an email at community@appcelerator.com and share your story with us!

Previous articleACS Admin Console Login Errors
Next articleSpeed up your Android Emulator!



Please enter your comment!
Please enter your name here