<?php require 'header.php'; ?>
<main>
    <section class="row">
        <article class="col-md-10 col-md-offset-1">
            <h1 class="intro">App Furnace: Learning design process.</h1>
            <br>
        </article>
    </section>
    
        <section class="row">
        <article class="col-md-10 col-md-offset-1">
            <div class="col-md-10 col-md-offset-1">
                <h3>Introduction</h3>
                
                <p>App Furnace is an online app creation tool that allows to create fairly complex mobile applications, compatible with a range of Android and iOS devices. It includes many features such as buttons, maps, text tools and more, but these can also be extended by using small scripts in JavaScript.</p>
                
                <p>App Furnace was used to build a mobile app in two weeks, this had to be done following a design process introduced in lectures. This article will explain the process of creation of my application.</p>
            </div>
        </article>
    </section>
    <br>
     <section class="row">
        <article class="col-md-10 col-md-offset-1">
            <div class="col-md-10 col-md-offset-1">
                <h3>My Design Process</h3>
                
                <h4>Strategy</h4>
                <p>Create mobile application in which users can input how much they get paid per hour, and outputs how much time (in hours) they would need in order to buy day to day products or pay for services. These products can be anything from an iPhone to service subscriptions.</p>
                
                <p>Since the app it's not going to be deployed there's no need for updates in the future. The goal is to make the user think about how much they value their time.</p>
                <br>
                <h4>Scope</h4>
                <ul>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Only available in the UK. That way it narrows values down to one single currency.</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Language chosen will be english, there will be no other options for now.</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Suitable for employed or curious people.</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> The items would be priced based an average value, retrieved from a reliable source such as an official website of a chosen item.</p></li>
                </ul>
                
               <br>
                <h4>Structure</h4>
                <ul>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> User can input a value, this has to be a number (either integer or floating). This value would be equal to how much they get paid per hour.</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> The application requires an array of products or services.</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> The program does small calculations in order to output how much time the user would need to work in order to be able to afford a product. The product is picked randomly from an array (group of previously listed items).</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Each product has to store a name and a cost to be used in case it get's picked, in order to be displayed correctly to the user.</p></li>
                </ul>
                <br>
                <figure class="img-thumbnail center-block">
                    <img src="images/appfurnace_wireframe.jpg" class="img-responsive center-block" title="Creation of an app, shows the structure of the aplication, a to do list and also the wireframe of it.">
                    <figcaption><i><b>This is a first attempt to structure (top left corner in black) and wireframe (right side of the board) the app. Also the scripts needed where devided in parts for easier understanding, using a <i>to do</i> list (bottom left corner).</b></i></figcaption>
                </figure>
                
                <br>
                <h4>Steps taken when building the script</h4>
                <ul>
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Layout elements and pages on app furnace, assembling a temporary user interface for testing.</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Write a script that stores value input from the user.</p>
                    <ul>
                        <li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Make sure that value is a number.</p></li>
                        <li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> If it's a string, ask again.</p></li>    
                    </ul>
                    </li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Create an array to store objects named appropriately, storing the name and price.</p></li>
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Write a script that generates a random number.</p>
                    <ul>
                        <li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Make sure the value is an integer.</p></li>
                        
                    </ul>
                    </li>
                    
                     <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Use the price to calculate how many hours the user would have to work in order to pay for that item.</p></li>
                    
                     <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Change the display text when a fact is selected, displaying the right content.</p></li> 
                    
                     <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Calculate how many hours it would take based on pay and price.</p></li> 
                    
                    <li><p><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Design the all the pages.</p>
                    <ul>
                        <li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Final wire framing.</p></li>
                        <li><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> Apply color scheme.</p></li>    
                    </ul>
                    </li>
                </ul>
                
                <br>
                <figure class="img-thumbnail center-block">
                    <img src="images/timeexchangewireframe.png" class="img-responsive center-block" title="Final wireframe of the app with logo and color scheme applied.">
                    <figcaption><i><b>Final wire frame with logo and color scheme applied in with Adobe Illustrator.</b></i></figcaption>
                </figure>
            </div>
        </article>
    </section>
    <br>
    <section class="row">
        <article class="col-md-10 col-md-offset-1">
            <div class="col-md-10 col-md-offset-1">
                
                <h3>And now it's ready</h3>
                <p>The created application can be downloaded to a mobile device using the App Furnace Player app by pasting the following url - <a href="http://the.appfurnace.com/test/EhF8a/" title="Time Exchange app download for App Furnace.">http://the.appfurnace.com/test/EhF8a/</a> or follow the QR code displayed below.</p>
                <br>
                
                <figure class="img-thumbnail center-block">
                    <img src="images/timeexchangeQR.png" class="img-responsive center-block" title="QR code for downloading the Time exchange app for the App Furnace Player.">
                    <figcaption><i><b>QR code for downloading the Time exchange app for the App Furnace Player.</b></i></figcaption>
                </figure>
                <br>
                
                <p>Additionally, a short video shows how a user would navigate through the app itself.</p>
                <div class="vimeo">
                    <iframe src="https://player.vimeo.com/video/143812123" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/143812123">App Furnace: Time Exchange Mobile App Presentation</a> from <a href="https://vimeo.com/csalmeida">Cristiano A.</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
                </div>
                
                <br>
                <h3>Conclusion</h3>
                <p>App Furnace turned out to be fairly simple to use while creating this application, however in order to deploy anything to either App Store or Google Play the developer has to pay a minimum of <em>£ 500 or $ 756<sup>*</sup></em><a href="http://appfurnace.com/pricing" title="App Furnace pricing.">(see pricing)</a>. Furthermore the pricing does not take into account if the app is a small or big project.</p>
                <p>Apart from that, following a planned design definitely saves time and unnecessary frustrations, since everything is planned and executed based on solid decisions. Although this design process was not strictly followed (and it was expected) it proves that planning goes a long way either on simple or large scale projects.</p>
            </div>
        </article>
    </section>
</main>
<?php require 'footer.php' ?>