Karma Phone was built as part of the OpenIDEO http://openideo.com Make-athon #ideomake on Feb 17-18 2012
The original brief was that of Postcode Gangs - how could we build something to develop and improve community facilities within a postcode area within London?
The idea of the prototype is to foster local community by providing a hyperlocal skills swap and information service.
This is a web app designed to be used on an iPad or other tablet device (the web UI is sized appropriately for an iPad but it would be trivial to modify for another device).
The backend needs a web server which can serve PHP.
The application relies on the use of Twilio http://twilio.com APIs and TwiML, and also uses a Twimlet http://twimlets.com as a quick route to voicemail functionality. A Twilio account is required to setup the numbers and routing of calls.
Due to limitations on the ability of an iPad to run the Twilio web client (which uses Flash), the workaround here is to use the Skype URI scheme skype://number?call
to launch the Skype client on the device. This therefore obviously also requires Skype to be installed and an account with credit to login (since you will end up dialling real numbers not VoIP IDs).
Another limitation is that this cannot be installed and launched from the iPad Launcher as a web app because this prevents the ability to launch the Skype app (it works when loaded normally using Safari, or from a bookmark).
The visitor to the Karma Phone "booth" selects from a menu of available people to talk to, or chooses to record a message.
The web page asks Skype to place a call to a number which is in fact provided by Twilio.
Twilio maps the number to a URL - in this case karma-phone-service.php?name=xxx
The PHP script generates TwiML (Twilio's markup language) which tells Twilio what to playback to the user, and then either forwards the call to a real person, or pushes the call to a voicemail box implemented in a simple Twimlet.
Edit karma-phone-service.php
to add valid passthrough numbers for the users to be called, and to amend the email address used by the voicemail Twimlet for messages. Edit index.html
and change the skype://
links to point to the Twilio numbers.
Install the Karma Phone web app to a publically-visible web server with PHP support.
On the Twilio user dashboard, edit the list of phone numbers and for each one, set the Voice target URL to be the real online location of karma-phone-service.php?name=user-to-be-called
Point the iPad at the web server.
Optionally, add the Karma Phone bookmark to the iPad launcher by selecting Bookmark button -> add to Home Screen.
For best results in the real world, use a handset such as a Moshi Moshi Retro handset http://amzn.to/A1yeeL
The user can now select from the menu of users or services, and Skype will be launched to call the backend.
- a "real user" will be called via a redirection from the Twilio number to their registered number (this way, we can add additional voice prompts, and also disintermediate the real number such that an individual's personal contact information is never shared directly)
- one of the recording options (leave a story/report a problem) will redirect to a simple voicemail box which will email the audio and transcript to a user identified in the code
Huge thanks to:
- Tim Burrell-Saward @tburrellsaward
- Victoria Brooks @vbrooksy
- Lydia Howland @lydiahowland
- Steve O'Connor
- Andy Piper @andypiper
- Hayley Stopford @HayleyS
- Dan Watson @DNW1710
- James from Sugru
- perform real-world user testing - how will real people respond to the idea of an "open" phone in the middle of a postcode area?
- fix to enable web-to-phone calls (may require Twilio to release an HTML 5 web client instead of Flash)
- put userid/phone numbers into a proper database and build UI to enable new users to register the knowledge they have to share
- instead of using voicemail Twimlet, build a proper voicemail box with the Twilio API
- add additional information to the front-end including e.g. realtime data from local sources (traffic, weather, pollution, crime etc)
- improve UI with better fonts, cached images in CSS, etc