Alculator is fun Mobile and Web Application that helps its users find the the cheapest drinks with the most amount of alcohol by working out the Millilitres of alcohol in a drink per pound.
The purpose of this project was to gain experience using the Ionic Cordova Framework to wrap one page web apps into native mobile applications.
My main goal was to create a simple IOS application using web based languages. As I was running out of time with Project Box for testing I decided to also run a testing phase for this application to gain experience implementing new features and bug fixes based on user feedback.
Task 1 - Plan Application Functionality
This task involved planning how the application would function and figuring out the formula that would be used to figure out the ml of alcohol per pound.
Task 2 - Design
For this task I worked with designer Cain Mackenzie-Yapa to create a clean and simple user interface for the application.
Task 3 - Develop Application
Task 4 - Feedback and Testing (Web App)
After developing the application I hosted it online in order to share with peers who could test and provide feedback on the application.
Task 5 - Implementing Feedback
One I had gathered the feedback from the testing phase I began used this time to implement bug fixes and additional features before wrapping to a native app as this would be harder to test among peers.
Task 6 - Wrapping for IOS
The final core development task involved using a combination of Ionic, Cordova and xCode to wrap the html file into a native application.
Task 7 - Testing and Fixing
After wrapping the application I did my own testing to see if there were any bugs that needed fixing within the native application.
As discussed previously I worked with Cain Mackenzie-Yapa to create the designs for this application. We took inspiration for the style from a web app with similar functionality built by a previous DMD student. Below are images showing the original design mockups along with the app that inspired our design choices.
The planning for this application mainly comprised of figuring out the mathematical function behind the core functionality. Despite getting a B in GCSE maths at secondary school my skills in this area have taken a dramatic nosedive in the 5 years since then so this proved a bit more of a challenge than expected. However after sitting down with a calculator for around thirty minutes I arrived on the formula displayed below.
As this application was developed in one page I also needed to decide how I would manipulate the page to show the results after calculation. I decided to make use of simple hide and show functions in order to hide the content that would be shown after running the (c)alculation. Below is low fidelity wireframe showing how the result is displayed.
The fist part of this app's functionality is a small bit of jQuery that waits until the page is loaded then finds and hided the results container, as shown below.
*Note: Some areas of the function have been blocked out see feedback testing to learn about these addition bits of code*
Continuing with a break down of the main function we next have a set of variables that are used to store error messages. A conscious functionality choice I made was to not add validation to what people could put in the inputs. Instead I have included these funny error messages to keep the app light hearted and fun to use, while also providing direction to the user when the result doesn't make sense.
The next section of code is used to display the result it does this by first finding the h2 tag with the id of result and editing the inner html to contain the result variable, then using jquery it displays the result container that was hidden during the page load function. This completes the first version of the code before testing.
To wrap my webpage into an application I first needed to install a few tools, the first two were global installs of Cordova and Ionic through the command line. The second was the Apple Xcode Development Environment, this can be used for building applications to IOS devices.
To start the development process I created a new blank Ionic 3 template. Using the command shown below. I then replaced the index.html files in the src and www folders with my alculator application code.
The next step was to add the IOS platform to my project this was also done in the terminal using the command below. This command adds a new platforms folder to the project which includes an Xcode project file along with any other dependencies.
The final process within converting the application into a native ios app is to open the previously created ios project file with Xcode and prepare its settings ready for build. I first needed to name my application and set it’s bundle identifier(a unique string used to identify the app, usually in a reverse domain syntax).
While doing this I start experiencing some errors with the signing certificate and was unable to build the app to my phone. This turned out to be because I hadn’t set up a developer account on the apple developers website. By setting up a developer account you are granted a developer signing certificate.
After some research I found that the certificates are in place to ensure that application sent to devices are developed by a trusted source. The certificates can be of different types for example the one assigned to my developer account is a basic developer certificate that allows me to publish apps to my own devices, by purchasing an official certificate you can publish code to the apple app store.
After this I also needed to verify the changes to my Apple Id on my phone in order to gain access to the mobile developer tools, this would allow me to publish and test my application on my phone.
Finally while building the application I ran into one final error, for some reason the app would not build to my device. Each time it would throw up an ambiguous “Build Failed” error with no indication as to what exactly wrong. Luckily developer Ben Goodwin who had worked on multiple app this semester told me that I needed to change the build setting to legacy shown below. After this the application built to my phone with no issues.
Me and Ben never came to an absolute conclusion on what was going wrong when building app not in Legacy mode, but we had a theory around the possibility of it being the latest Xcode build settings not working with the Ionic 3 framework as this is not latest version of Ionic available to developers.
To gain some testing and feedback on the web application I sent the website link to my peers bellow I have listed some of the bugs found and how they were fixed.
Footer Covering Alculate Button on smaller devices:
One of the first bugs encountered was the footer covering the alculator button on smaller phones such as the iPhone SE. To fix this I moved the footer from within the body container into its own position. This allowed it to appear below the body rather than fixing itself at the bottom of the screen. I also added some padding to the bottom of the content container to ensure that it wouldn't cover the content at any point as it would need to be scrolled to in order to be viewed.
Errors not clearing when running function a second time:
The second bug picked up on was the errors not being cleared when re running the function. This meant that if an error occurred and then the user preformed another function the error would still be displayed even if there were no errors created. To fix this issue I added the line of code shown below. At the very start of the function this piece of code resets the error p tags inner html to nothing.
No error for when ml of alcohol per pound is larger than milliliters of the drink:
The final issue users found was that the milliliters of alcohol could in the result could be larger than the actual drink, sticking with the fun theme rather than preventing this from happening I added an addition error message shown below.
After the first build of the application I discovered that there was some form of scroll lock preventing the user from viewing all the content on small devices. I believe this is because phone wraps are supposed to fit within the bounds of the screen.
Cain Mackenzie-Yapa - App Design
Ben Goodwin - Help Wrapping Web Application into IOS App