Bulding an iphone app using brush and glue
Ok guys, this is for no reason a serious post, just the first in a row dedicated to my summer-code project dedicated to learning and experimenting with new techologies.
First I needed to chose something simple that can grow as the project evolve and and that have at least some marginal use. During our work at the beyounic HQ we seen so many people crossing the street out of our window that we always thought “wouldn’t be fun to have some voting paddle, like a sport jury, so that we can raise votes as people* walk by?”. - *by people the best use case we could think of was rating&voting girls;-) so as I stated before this is not to be taken as a serious post at all…
Something like this:
The problem with this system is that each member of the jury need to have 10 different paddles and you cannot form a jury on the go so easily as you always have to bring those voting paddles with you.
So why not using our iphones for that? Yeah the #ijury project just started to take life.
Building the first prototype:
To really make the metaphore work i wanted to build an iphone holder that could mimic the jury voting palette, the hardware part that will work together with the dedicated iphone app, so thai i could raise the iphone in a jury fashion way.
What is needed:
- Cheap plastic brush - will use this for creating the holder stick.
- Cheap plastic iphone rigid case
- Spry paint
- Some epoxy glue
- Some paper to sketch the app interface and workflow (i use the iphone stencil kit from http://www.uistencils.com/)
- An apple computer running Xcode as this will be the coding environment
- A quick fw to develop native iOS apps without the need to learn objective-c (I have chose http://www.phonegap.com/) - the nice thing is that using such tool like phonegap, or titanium you can build native apps for different system(iphone, ipad, droid, bb,..) out of a single code base.
The hardware part is pretty simple: cut and use the brush holder and glue it to the iphone shell using epoxy, remember to sand both parts before gluing them together. Then Paint. Here some shots of the final result:
Now the design part: without spending to much time on it I still wanted the app to look nice on my iphone, so i designed the icon, the splash loading screen, and the bg:
Now to the coding part:
While I played a little before with phonegap and xcode3 I decided to jump and update to xcode4 after signing up for an iOS developer account. This was all cool and fun apart that phonegap as a known issue in working with xcode4, related to creating a new project, doing some google research i’ll just found this usefull script to solve the problem:
https://github.com/phonegap/phonegap-iphone/blob/master/create_project.sh
to make it runnable just chmod it 755 using the terminal. Then just input ./create_project.sh ijury /project/ijury (in other words project name and project path) and you are set.
for the js library i found jqtouch (http://jqtouch.com/) a nice jquery plugin to help you have some nice and sleek looking interface and interaction.
As the app should allow to you to quickly chose a vote between 1 and 10 I thought that using something similar to phone dial UI was the best way to go, so i made a 12 cells phone dials UI and use the two remaining one to add a thumb up / thumb down voting feature. I wanted to have the screen to flip when pressing on the chosen vote, and jqtouch come handy in this as you can easily add .flip selector to the link class.
here few screens of the final results:
to deploy you app quickly on more device you can use https://testflightapp.com/ this will save your time. Finally after one night of work I have the first prototype of what i can say is the most technological and innovative jury voting paddle on the planet:
Fase 1 of this funsummer-code project is finished - stay tuned for more info on how I’ll bring this project further.
