Mobile Development • Web Design Studio

To build mobile apps, we are using AppFurnace. In the first session, I experimented with all the features AppFurnace had to offer.

For my first trial app, I experimented with using the location and map tools. I made it so if you entered a certain area with the app open, the corresponding page would come up but when you left, it would return to the original page. Below is a demo of my app.

first trial app demo

creating "castle
park" zone

To try out some of the more advanced features like adding code, I started a new trial app. This one had a very simple concept but it allowed me to try out using code in appfurnace.

I began by saving around 25 photos of different art pieces I like and by using a Javascript code I was able to create an app that every time you tap the screen, a image is randomly selected and displayed.

Below is the code I used.

function imageSwap() {

		    //set up a variable with our total amount of images we want to chose from

		    var totalNumbers = 25;   

		    

		    //generate random number

		    var randomnumber=Math.floor(Math.random()*totalNumbers);   

		    randomnumber=randomnumber+1;

		    

		    //Change the image to our chosen random number

		    ui.image1.backgroundImage("images/" + randomnumber + ".jpg");

		    

		    navigate.to ( "Home" );

		}

second trial app demo

2. Developing my own app

There are many features that make AppFurnace really simple and easy to use, such as:
- ability to copy and paste objects
- insert hex codes for colours
- the ability to align objects using the sides or horizontal/vertical centres
- duplicate pages
- drag and drop elements from the side panel

All of the above make it extremely easy to develop a well designed app that is consistent throughout.

I don’t think AppFurnace would be the right tool to use if you had a massive mobile app project with databases and endless amounts of code. However, for building and quickly deploying an app with a simple concept, it is possible to do pretty much everything you want. The minimal interface made it quick and easy to use, along with the wide range of features, it is possible to make a wide variety of functional apps using AppFurnace.

For my own app, I wanted to create something that encourages Bristolians to visit places that sell or use locally sourced food. I used the skills I learnt in the previous session to build this app.

I first started drawing some structure diagrams to figure out what pages I would have in my app (Figure 1). I definitely wanted a “random” feature as this would encourage people to be spontaneous and visit somewhere they probably hadn’t been before. I also wanted a feature that tracks the location of the user and shows places in close proximity to where they are. I also thought it would be useful to have a page with just a simple map so that the user can see where they are.

I then started sketching the layout of the pages (Figure 2). I didn’t want anything too messy, so I tried to keep the pages as consistent as possible.

I needed the app to be simple - if it is confusing, it might discourage people to use it. I chose a simple background of some wood which has a natural/organic feel to it. Then by using just black and white text, it keeps the colour scheme neutral and simple. I felt the font “LobsterTwo” kept the feel of the app fun and relaxed. The last thing I wanted was to have an app that felt un-friendly and disengaged the user as soon as they opened it.

I find a lot of people see eating responsibly in terms of sustainability something difficult or laborious to do, but I wanted this app to be fun, friendly and show that eating with a conscience doesn’t have to be a chore. It can be easy and fun!

I adjusted the code used for my second app trial to pick a page at random, so when “random” is tapped, it brings up a random page.

function goToRandom(){

		 

		  var totalPages = 5;

		  var randomNumber = Math.floor((Math.random() * totalPages) + 1);

		  navigate.to("place"+ randomNumber );

		}

I also added 5 examples of places with locally sourced food and categorised them into zones on the map (Figure 3). I then changed the properties when the user enter that area, the corresponding page comes up (Figure 4).

Below are two demos of me using the app on AppFurnace preview (Figure 5 & 6). In Figure 5, I am using the random feature and previewing the "map" and "about this app" page. In Figure 6, I am simulating entering one of the zones, having the corresponding page coming up with a place to visit, and then clicking in more information about the place.

I also deployed it to my iPhone and tested it on there

Figure 1 - structure diagram

Figure 2 - wireframe sketches

Figure 3 - adding zones

Figure 4 - changing zone properties

As this app is only a prototype, there a plenty of things I would like to change and improve if I were to continue developing it.

Firstly, I would create a logo for the app as this would make it more professional. I would also need to find a way to add information more efficiently, as there are probably hundreds of locations I could put in my app, but it would take a long time to add them all in manually. Also on the individual restaurant and cafe pages, I would like to add the ability to click on the link so it brings up the webpage, and when clicking on the address it opens it up in maps.