In this tutorial, we will take you through the usual first step in learning a new system - making a Hello World app. We will assume that this is the first time you have used AppFurnace. If not, then skip through to the new parts. By the end, you will be able to create a mobile app and run it inside the AppFurnace player on your iPhone.
Assuming you have registered and logged on to AppFurnace, the first screen you will see will look like this:
Click on the Create App button and type Hello World in the input box - spaces are ok in app names. Click the Create button and you will be taken to the Layout tool:
If you appear to be in one of the other editing tools that AppFurnace provides, simply click on Layout in the menu at the top of the screen and you will be taken to the right place. The popup in the centre of the screen welcomes you to AppFurnace and suggests some tutorials that you might want to look at (including this one!). For now just click the X in the top right hand corner of the popup to dismiss it from the screen.
You should be able to see three panels in the layout tool. On the left are a collection of user interface widgets that you can use to build your app. On the right are controls to change the properties of the currently selected page or widget. More on widgets and pages in a moment. If you have not changed anything, this should be displaying the properties of the first page in the app. Finally, in the middle column you will see a representation of the iPhone screen. This is the canvas upon which we will build Hello World.
Pages and Widgets
Understanding pages and widgets is crucial to making mobile apps with AppFurnace. Fortunately, they are very straightforward. A page is a full screen 'canvas' upon which you can place widgets - user interface components such as text labels and images. A typical AppFurnace app may contain several pages but only one will be visible at a time. You can add buttons to enable the user to navigate between pages, or arrange to change pages programatically, or when a user arrives a certain physical location, but those are all topics for a later tutorial. For now, we will stick with the single page which is created for you when you start to make the app. Feel free to change the page's name if you wish, though, or its background colour, using the property controls in the rightmost column then come back to this tutorial.
Widgets are user interface components that you can add to pages to display a piece of text, or an image, a video, a twitter feed and so on. The widgets you can use in this app can be found in the left most panel. Try clicking on a few of the categories to see what is available.
Adding a label widget
When you are ready click on 'Label" to see something like this:
The white area on the right of this panel shows the various label styles that are already in the system. A later tutorial will show you how to add your own styles. For now we will stick with the two always available. The top style is deliberately plain to allow easy customization and the lower, button-like style illustrates what can be achieved. We will use the simpler style in this tutorial. To add a label to the page, click on the top widget (for example where it says "Text") to select it, and then drag and drop it onto the page canvas in the middle of the screen. The page should now look like:
Set the label properties
The word 'Text' in the middle of the page belongs to the Label widget you just dropped there. But we want it to say 'Hello World' instead. Click on the word 'Text' and a yellow box should appear around it:
The yellow box indicates that you have selected the Label widget. You could drag it around the page now or resize it using the grabber in the bottom right corner. When you have it just where you want it, look at the right column of the screen. You will see that the property grid has changed to reflect the selection - it now shows the Label widget's properties. We will play with some of these later. For now, click on the settings ("cog") icon and type "Hello World" in the text input box:
You will see that the text on the page in the middle of the page has changed also to say Hello World. Now, it would be tempting at this point to play around with the presentation, size and colour of the text and page - and there is a lot you can do to design its appearance - but let's push on for the moment. Look at the top of the screen, where you should see a white button with the word Save on it. That indicates that you have unsaved changes to your app. Click on that button now and it should become grayed out.
Preview your app
Ok, you have now finished building your first version of the app! To see how it will look on the user's phone, click on the Preview button at the top of the screen. You will see the screen change to display:
Ignore the map on the right for now - we will show you how to use that to simulate the user's physical location in another tutorial. Focus instead on the emulation of an iPhone on the left hand side of the screen. If you see a white screen with the words Hello World, well done! Your app works. When you are happy, return to the layout tool by clicking on the X in the top-right hand corner of the preview.
Tweaking the widget's appearance
That's fine though a little bit plain in appearance. Go back to the Screens tab, click on the Hello World label again and play around with its properties to get a look that you like. I changed fields in the text and shape tabs:
After saving my changes and clicking on the Preview button, I saw:
That has a bit more impact, though you will probably be able to use AppFurnace's fine grained control to design interfaces that far exceed my efforts.
Running the app on your iPhone
Later, you will find that you can interact with the preview just like a real phone, enabling you to make changes and quickly test their effect without leaving your browser. Eventually, though, you will want to see what the app looks like on a real mobile phone.
That's easy too. Just click on the "Preview on Phone" button in the centre of the toolbar (or the "Test on Phone" button if you've got the Preview window open):
Just follow the instructions on screen, either using the QR Code or typing in the URL manually. The result should be something like this...
And that's it for this tutorial. The next step might be to refine the app until you felt it was worthy of submission to the App Store. AppFurnace helps you with publishing the app yourself or we can do it for you. Either way, you will have to pay at that point in the process, so maybe a Hello World app may never warrant the investment. Before leaving this tutorial, why not explore the widget and page properties further, or add a second Label widget (just drag'n'drop). When you are ready, look at the other tutorials to discover more ways to make hot apps with AppFurnace.
If you are following the series, the next tutorial is Tutorial2: Changing Pages.