Making a Jingle Bells App – Part 1: Planning


Posted On by John Slater in Jingle Bells, Making Apps

Christmas isn’t far away now and i find myself in situations where i just want to jingle a bell. I especially find myself in these situations at family gatherings like weddings, christenings and funerals, so ideally i want to be able to ring some bells whenever i see fit, regardless of etiquette. So i’ve decided to create a series of tutorials walking you through design to final app step by step, and in this series we will create a jingle bells app.

The concept is simple, an app i can launch and when i shake the phone it plays a sound. By doing this we will learn how to play short sounds using the AudioToolbox framework and how to register gesture events when the device is shaken.

In this tutorial we will cover the interfacing and concept for the app we are going to create. This step is very important as it allows us to design how the app will look, figure out it’s key components and write simple pseudo code to help us figure out how the app will be put together later on.

The Concept

The actual app will have only one purpose which is to play a sound when you shake the device but we will need some sort of on screen feedback when the device is shuck. It would also be very useful if, when you shuck the device, you got a vibration along with the sound.

The best way to show some sort of onscreen feedback is to have an image of a bell move when you shake the device, however for this tutorial jumping into animation is a little much so we will do something we have already done in past tutorials and simply change the background colour of the screen.

The image on screen will be a simple festive looking static image saying ‘Merry Christmas’ along with festive images like a christmas tree and sleigh bells.

The Sound

There are plenty of royalty free sound websites on the internet that will allow you to use their sounds for free for non-commercial purposes, some will even let you use their sounds for commercial purposes.

I’ll save you the hassle of finding a suitable sound for the jingle bells app and simple supply you with one i found earlier, this can be downloaded here. The sound is relatively short and is very fitting for what we want to create. In an ideal situation we would source multiple sounds and have them fire off randomly, because lets face it no ringing bell sounds the same as the last, however i want to keep this application as simple as possible so i’ll leave this up to your own initiative if you want to source additional sounds.

In my past experience i’ve found that the filetype ‘wav’ is the most suitable for short sounds and this seems to be the format of choice for most developers. The file i’ve supplied above is in .wav format and any files you source should, ideally, be kept in this format or converted if necessary.

The Imagery

The interface i’ve designed is very simple, it has a few images scattered around and is designed with a transparent background, this way we can easily change the background colour without having two near-identical images.

I’ve supplied the image i’ve used below because i’m a real swell kinda guy and i just like to give back to the community. I actually used to give money to the homeless on a regular basis until i was made aware from a close stranger that they will most likely spend the money on heroin, so to cut out the middle man for the homeless people i now kindly give them heroin thus cutting out the need for travel and the risk of the dealer being a deep undercover police officer. I’m nice like that.

Coding Plan

I will create the app with three functions. The first will receive the gesture feedback (the shake) and decide what to do with it, the second will play the found and vibration and the third will change the colour of the background.

Shake Feedback

For this function we will use a function put together by ‘millenomi‘ on Stack overflow which he used in an app he created. This saves us time as this function detects the shake gesture and can also prevent the function from being triggered in quick succession which may cause you problems like the sound triggering over and over again instead of one at a time.

You can see the function he put together over at Stack Overflow

Playing The Sound

There are different ways to play sound in iOS, both have different uses, but we want to play short sounds and we don’t want to have to wait for the first sound to finish playing before the next can be triggered.

The first method uses the AudioToolbox framework and is specially for system sounds, these are sounds that are triggered by user events such as when a notification appears or a button is pressed. System sounds are allowed to overlap and cannot be stopped once started, they simply play once and end.

The second method is the AVFoundation framework which is used for playing longer sounds such as music. Each defined player can only be playing one sound at a time, so if the next sound is told to play the previous will abruptly stop and the new one will start. This is not the method we will use for this app as it doesn’t fit into how we want to use sound in our app, but it is a very useful framework and we will cover this in the future.

Changing The Background Colour

We have already done something very similar in our “Lights On/Off” tutorial however this function will alternate between two colours, so we will need to check which colour is currently showing and change to the opposite.

Coming Up

So this is everything we need to do for the planning. The app is very simple and the planning needed isn’t very much however it is always a good idea to plan your apps before you start coding, this helps create well structured apps and gives you a point of reference when trying build the app step by step.

In the next part of this series we will start coding the project in Xcode and will cover the three functions we mentioned and give more insight into why we have done specific things and what purpose they serve for the app.

Subscribe to our RSS feed or follow us on Twitter for updates on the next article in this series and get your coding hat on.

About John Slater

I'm a professional web designer professionally, in a professional way, but also love iOS Development and two years ago is when i threw myself into the deep end and learnt enough to create a few apps. While i develop my skills i want to help others learn iOS development, because i'm kind like that. @slaterjohn