Whenever a new tool or framework comes up, I want to get my hands on it — but never really know what to build with it. Earlier this week, Facebook released their prototyping tool AppStarter.
It promises native iOS app prototypes — without the Xcode hassle. As a designer and occasional developer, that’s great news! However, I had no idea what to build with this thing. So my co-author Florian challenged me to build something he always wanted: an app that allows you to take selfies with me. Challenge accepted!
Creating an account is surprisingly simple, all you need is your name and email. I wonder why you can’t sign up via Facebook? Hmm …
All development and coding is happening inside the browser. No add-ons, gems or editors needed. To my surprise the editor feels really good, it does highlighting, keyboard shortcuts, copy-paste — everything you would expect from a code editor.
If you’re familiar with creating websites, you can create app prototypes with AppStarter. The code is divided into 3 parts: XML for the structure, CSS for the looks and JavaScript for interactions. My little selfie app needs 3 elements: an image placeholder for the camera picture, an overlay of, well, myself and a trigger button. The XML looks like this:
<UIImageView id=”img”></UIImageView>
<UIButton id=”btn”>Take a Photo!</UIButton>
<UIImageView id=”jo” src=”http://johannesippen.com/img/jowashere.png">
</UIImageView>
In the app preview, you will see nothing until you haven’t formatted and moved around the elements with CSS. A bit like having a website where every element ist position: absolute. Reminds me of the code output Fireworks would generate, only that this time, I had to write it:
#btn{ top:0; left:0; width: 320px; height: 480px; }
#img{ top:0; left:0; width: 426px; height: 568px; background: #eeeeee; }
#jo { top: 361px; left: 0; width: 320px; height: 207px; hidden: true; }
Now this would show me an empty grey placeholder with a blue clickable text — the picture of myself is of course still hidden. To take a picture and make it visible, a bit of JavaScript is needed:
The syntax is a bit wild, you can use jQuery-like $-selectors for the elements. But hey, it’s a prototype after all, right? Oh and you can also make the device vibrate when clicking the button. Don’t know exactly why, but it’s kinda cool. Now that’s 17 lines of code and roughly 30 minutes of playing around. Time for testing!
Summary: If you need more than a click dummy, but actual device features to test — App Starter is definitely worth looking into.
What I am still missing is the ability to take a bit more control over the app design — custom fonts, outlines and shadows are not really implemented. Sharing apps to more than just my account would be great, too. My example might be a bit silly, but being able to create a custom iPhone camera in 30 minutes in just my browser — unbeatable!
