Alculator

A mobile and web application to help find cheapest most alcoholic drinks.

Overview

supportImage

What is Alculator?

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.


Purpose of Project

The purpose of this project was to gain experience using the Ionic Cordova Framework to wrap one page web apps into native mobile applications.

Research and Planning


Research

At first I was going to develop the app using a Javascript framework such as Angular however I eventually decided that this would just make the application more complex than necessary and take a lot more time to develop. Because of this I decided to code the application as I one page web app comprised of HTML, CSS and JavaScript and then use Ionic Cordova to wrap it into a native web app.


Planning


Project Goals

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.


Project Tasks


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

Once the plan and designs for the application were in place I needed to develop the HTML, CSS and JavaScript functionality.


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.


Project Timeline

supportImage

Process


Design

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.

supportImage

Development


Planning

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.

supportImage

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.

supportImage

Core Functionality

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.

supportImage

Secondly is the form used to insert the drink information when the forms button is clicked it calls the main javascript function below. The first part of the code simply finds each form input within the document selects the value that the user has inserted and stores it in a variable.

supportImage supportImage

*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.


Next I converted the math formula written during the the panning into a javascript function. The first line figures out 1% of the drink in millilitres and stores it in a variable named oneper(one percent). The second line multiplies the 1 percent of the drink by the percentage of the drink that is alcohol to work out how many millilitres of the drink are alcohol. Finally the millilitres of alcohol are divided by the drink price(in pounds) to figure out how much alcohol you are getting per pound. The result is then stored in a variable so that it can be printed on the frontend.

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.

Ionic Wrapping

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.

supportImage

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.

supportImage

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).

supportImage

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.

supportImage

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.

supportImage

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.

Feedback and Testing


Web

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.

supportImage

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.

supportImage

Mobile

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.


To fix this I made some changes to the styling to better optimize the interface for mobile use and ensure all the content fit on the page without needing to scroll. I firstly removed the footer from the bottom of the page along with the padding that had been added to the website mobile version. This meant that there was nothing to scroll to within the app, I also removed the “Welcome to” part of the title to free up space on the screen. Finally I changed the result container to be a fixed full screen box with a return button, this prevent the longest of error messages from being forced off the screen. The image below detail the style changes and new javascript code.

supportImage supportImage

Final Outcome

The final outcome for this project is a fun html, css and javascript web app that has been wrapped and adapted for use as a native IOS application.


View Alculator Online!
View the Website Code Base on GitHub
View the Native App Code Base on GitHub

Conclusion

Throughout this project I have learn a range of things such as writing mathematical functions in raw javascript and how to use Ionic to wrap one page websites into native applications. I intend to use this knowledge throughout semester two to develop a range of native applications for the projects I have planned.

Additional Text


Special Thanks

Cain Mackenzie-Yapa - App Design

Ben Goodwin - Help Wrapping Web Application into IOS App


Research Resources

https://forum.ionicframework.com/

https://ionicframework.com/docs/cli/cordova/platform/

https://developer.apple.com/xcode/