TuneTime: This Game App Takes Music Trivia to the Next Level

Now that I’ve learned how to natively develop for iOS, I’m starting to have some fun with it! In this case I’ve built a piano based music trivia game.

appstore-button

How it Works:
Each team attempts to play a secret song on the provided keyboard (via a simple play-by-numbers music score). The player gets no indication towards the timing or rhythm of the song, just the notes. The team must figure out what the name of the song is before the 30 second timer runs out.

TuneTime-homescreen

game-screen-TuneTime

 

Updates/Feedback

  1. First time use of app user is very confused as to what to do next. Usually they click solo first, and skip over instructions.
    1. Potential Solutions: A intro screen and walk through of the game would be helpful. Though that could be skipped too. So offering an “easy” version of the game that grows in complexity over time may be more helpful. e.g. less keys, keys to play light up etc
    2. Note: Users wanted to keep the keyboard as the point of interaction.
  2. Even when the instruction are read there is a lot of confusion on how the workflow of the game works. This was expected as Jackie and I even got confused playing it ourselves. Just didn’t have ideas yet.
    1. Potential Solutions: One user used the game in a way that gave me an idea. Before I thought the lack of providing a rhythm would make the game fun, ergot I set it up so the player didn’t know the song name before playing (this add to a very complex workflow).
      This user wanted to know the song name they played ahead of time and seemed to have a lot more fun trying to communicate the song name through the keyboard, to the other players. This workflow would be MUCH easier to present and understand. I’m just not sure if it would be too easy. Maybe there are other ways to add complexity over time (per #1)
  3. People who have never played the piano have no idea what “#” means. Though I suspected it wouldn’t matter since all the keys are labeled, it was to much information to digest on a first time use.
    1. Potential Solutions: per #1. A “how to use the kayboard and music sheet” before presenting the keyboard would help. As well as lighting up the keyboard for first time game use.
  4. Keyboard was a bit too small
    1. Potential Solutions: Not sure how I can have many song with few keys. The original keyboard had bigger keys but couldnt get much out of it. This could again play into harder level, more songs and smaller keyboard.
  5. When the game got going people had some laughs and fun, so the potential is there, just needs a much smoother and well informed experience.

Key links to finally learning iOS development

If you haven’t picked up any iOS development skills yet, now is the time. It’s never been easier. Below are my reasons to finally take the plunge (successfully), followed by some helpful links to help you learn to create your first app too.

Contrary to popular belief, I’ve never coded up an iOS app myself. My excuse? For one, hiring great iOS developers gave me more time to focus on building great teams and products for my startups.  In addition, Objective-C has a unique syntax and requires a deeper understanding of handling memory, which demanded even more learning time. Finally, there was an immense level of complexity involved in testing, certifying and delivering native iOS apps to market. As a matter of fact, those higher than normal learning curves inspired many startups (including a few that I launched) to focus on making developing apps easier.

Since I already had a strong web development background, I always found it easier to build prototypes for my ideas using the latest web-based, app-building, technologies. Year-after-year a new product claimed to have “the right stuff” needed to create an iOS app that felt fully native, without needing to learn to code directly in Objective-C. Year-after-year I found those claims to be more wishful thinking than reality. Although quicker to develop, those technologies always left the final product feeling hacky, unresponsive or limited, and, in order to go full steam ahead with a project, a fully native version would be necessary.

Earlier this year I took another shot at using a new piece of web tech to build out a mobile app idea I had. This time I learned Polymer 1.0. I loved it as a web framework, but my hopes that Google had managed to finally develop an SPA framework that translated into a smooth functioning mobile app was, yet again, overly optimistic.

It isn’t really the technology’s fault though. The rendering mechanisms for HTML/Web (et al.) just weren’t made to process smooth app-like features. It renders top to bottom, grabs all its assets remotely, makes a lot of inferences, is based on standards that try and work across an array of products made by a variety of companies, and manages general security measures that must be spread across every site. In the web world, the browser is the ad-hoc gatekeeper, and its fighting to keep up. The mission of a browser is critically different to that of apps: to allow a user to serendipitously browse a large breadth of sites in a single view, all the while protecting the user from exposure to malicious pages that are inherently sprinkled into a user’s browsing session. Native apps are different. Both the user and the developer have a strong working agreement between what the developer would like you to see and how the user would like to see it. With that level of trust the developer is able to confidently create an experience specifically tailored to the goal of the app and the interest of the user; the OS can focus on greasing the wheels.

Sorry, I digress. Point is, yet again I was disappointed in what the web (and web wrappers) could offer, and, almost as a yearly tradition, I took a stab at learning how to develop directly in iOS again. This time, I’m glad I did!

Maybe it was due to all the free time I had while on our year long trip, but I doubt it; it came rather easily this time around. No, I think the main contributor to my smooth transition is that Apple has done a stellar job incrementally improving the life of an iOS developer over the years. I think the real turn was the release of Swift in 2014. The language is a natural leap from other common languages, as compared to its Objective-C counterpart. Also, there is no longer a heavy requirement to understand how to manage an app’s memory and delegations. The other power ally in creating ease for iOS developers is XCode’s more powerful yet simplified environment, along with interactive interfaces like Storyboards, segues,  IB Designables and more. In addition, now that TestFlight is fully integrated with iTunes Connect and Xcode, testing an app on a device, releasing it to external testers, and pushing it to the App Store is only a few clicks worth of effort; fairly brainless really.

All this added up to a surprisingly easily made V1 of my very first fully native iOS app! Yay! This will be fun 😀

Links to Learning iOS

Here are some key links I bookmarked while learning Swift in Xcode 9.0, including: vides, Q&As on StackOverflow, and tutorials. I strongly recommend learning the language by working toward implementing an idea you want to bring to life. Not only does it give you an inherent direction in what needs to be learned, but it also helps you push through the tough parts of learning that would otherwise spell defeat. The app I built used APIs, JSON, CoreData, Table Views (for listing data), Audio, and more. Hope this list helps!

 

UI Table View Controller

Prototyping a Custom Cell

http://www.ioscreator.com/tutorials/prototype-cells-tableview-tutorial-ios8-swift

View at Medium.com

http://stackoverflow.com/questions/25541786/custom-uitableviewcell-from-nib-in-swift

Adding Animated Effects to iOS App Using UIKit Dynamics

How to Create A Dribbble Client in Swift

https://grokswift.com/uitableview-updates/

Async Calls

Search Bar

http://shrikar.com/swift-ios-tutorial-uisearchbar-and-uisearchbardelegate/

Storyboards Navigation and Segues

http://stackoverflow.com/questions/26207846/pass-data-through-segue

http://www.raywenderlich.com/113394/storyboards-tutorial-in-ios-9-part-2

http://makeapppie.com/2014/09/15/swift-swift-programmatic-navigation-view-controllers-in-swift/

http://stackoverflow.com/questions/12561735/what-are-unwind-segues-for-and-how-do-you-use-them

http://sree.cc/uncategorized/creating-add-target-for-a-uibutton-object-programmatically-in-xcode-6-using-swift-language

http://stackoverflow.com/questions/25167458/changing-navigation-title-programmatically

http://stackoverflow.com/questions/29218345/multiple-segues-to-the-same-view-controllerhttp://stackoverflow.com/questions/24584364/how-to-create-an-alert-in-a-subview-class-in-swift

Reusable Xibs

Core Data

https://www.andrewcbancroft.com/2015/02/18/core-data-cheat-sheet-for-swift-ios-developers/#querying

http://stackoverflow.com/questions/28754959/swift-how-to-filter-in-core-data

http://jamesonquave.com/blog/developing-ios-apps-using-swift-part-3-best-practices/

http://stackoverflow.com/questions/1108076/where-does-the-iphone-simulator-store-its-data/3495426#3495426

Network and Observers

http://stackoverflow.com/questions/24049020/nsnotificationcenter-addobserver-in-swift

http://stackoverflow.com/questions/25398664/check-for-internet-connection-availability-in-swift

https://www.andrewcbancroft.com/2015/03/17/basics-of-pull-to-refresh-for-swift-developers/

http://www.jackrabbitmobile.com/design/ios-custom-pull-to-refresh-control/

http://stackoverflow.com/questions/24466907/passing-optional-callback-into-swift-function

Gestures

http://www.raywenderlich.com/77974/making-a-gesture-driven-to-do-list-app-like-clear-in-swift-part-1

http://useyourloaf.com/blog/creating-gesture-recognizers-with-interface-builder.html

Designables

http://iphonedev.tv/blog/2014/12/15/create-an-ibdesignable-uiview-subclass-with-code-from-an-xib-file-in-xcode-6

Page View Controller (Pages on swipe control)

 

Facebook JS login on Chrome iOS workaround

I was putting together a Facebook JS SDK based login on a site I’m working on – only to find that Chrome on iOS does not support the action.

What was even more surprising was the lack of documentation or support online (with Chrome or Facebook) to help work around the issue.

I saw a few suggestion that had solutions based on using Parse or where others suggested using a backend based login API. I didn’t want to install another framework just to solve this problem, and my objective for the interface was to offer a seamless login process that doesn’t interrupt the user’s current modal based workflow.

To make matters worst, and I am really disappointed in Google for this (which is rare,) popping out windows on Google Chrome iOS makes a null reference to the  “opener” in certain situations. This makes it hard to complete a seamless login between two windows once the FB auth page is verified.

Below is a solution that checks if FB is authed, if not, manually opens an FB auth window that forwards the user to an Opener Handler page. That page forces a refresh of the openers auth tokens and closes the window. Once completed the user is sent back to the original page (with no page refresh) and can now proceed with a validated FB auth.

var ABSOLUTE_URI = "http://yourpage.com/openerhandler.html";
var FB_ID = "123456778";
function openFBLoginDialogManually(){
// Open your auth window containing FB auth page
// with forward URL to your Opened Window handler page (below)
var redirect_uri = "&redirect_uri=" + ABSOLUTE_URI + "fbjscomplete";
var scope = "&scope=public_profile,email,user_friends";
var url = "https://www.facebook.com/dialog/oauth?client_id=" + FB_ID + redirect_uri + scope;
// notice the lack of other param in window.open
// for some reason the opener is set to null
// and the opened window can NOT reference it
// if params are passed. #Chrome iOS Bug
window.open(url);
}
function fbCompleteLogin(){
FB.getLoginStatus(function(response) {
// Calling this with the extra setting "true" forces
// a non-cached request and updates the FB cache.
// Since the auth login elsewhere validated the user
// this update will now asyncronously mark the user as authed
}, true);
}
function requireLogin(callback){
FB.getLoginStatus(function(response) {
if (response.status != "connected"){
showLogin();
}else{
checkAuth(response.authResponse.accessToken, response.authResponse.userID, function(success){
// Check FB tokens against your API to make sure user is valid
});
}
});
}
view raw FB JS Auth hosted with ❤ by GitHub
<html>
<head>
<script type="text/javascript">
function handleAuth(){
// once the window is open
window.opener.fbCompleteLogin();
window.close();
}
</script>
<body onload="handleAuth();">
<p>. . . </p>
</body>
</head>
</html>
view raw Opened Window hosted with ❤ by GitHub

Apple stores put their money where their mouth is

Ahhh the checkout line.

I know what I want, I found what I want in your store, AND I want to pay for it. So what do you do? You make me wait in line to give you my money! Man, that system is so archaic. Talk of “self checkout” has been around for a while, but I have seen very few instances of it in practice. Aside from the self checkout in the grocery store, that is still just a line in the end, checking out while picking up items in the store is not a part of our daily lives – yet.

So with all the rumors of our devices one day helping us checkout in our favorite stores, Apple finally made the decision to take the first step and offer self checkout on your iOS device at all Apple stores. Just download the newest version of the Apple Store App and buy til’ your hearts content, or your bank account runs dry, whichever comes first.

I have yet to use it myself, but am anxious to see how the company that is known for defining best practices around new concepts will implement their self checkout. I am also curious to see how they handle a jam packed store, with hundreds of very valuable items, mostly ranging in the $+1K range.