Smart Shopping App

Project Report

Supervisor: Paul Barry

Student: Darren Fitzpatrick
Student ID: C00146226
28/04/2014
Table of Contents
1. Introduction ........................................................................................................................................ 2
2. Description of submitted project ........................................................................................................ 2
2.1 Login .............................................................................................................................................. 2
2.2 Registration ................................................................................................................................... 3
2.3 Admin ............................................................................................................................................ 3
2.4 Layout............................................................................................................................................ 4
2.5 Home ............................................................................................................................................. 4
2.6 List ................................................................................................................................................. 5
2.7 Account ......................................................................................................................................... 5
2.8 Delete account .............................................................................................................................. 6
2.9 Start shopping ............................................................................................................................... 6
3. Description of conformance to specification and design ................................................................... 7
4. Description of learning ........................................................................................................................ 7
4.1 Technical achievements ................................................................................................................ 7
4.2 Personal achievements ................................................................................................................. 7
5. Review of project ................................................................................................................................ 8
6. Acknowledgments............................................................................................................................... 9

1
1. Introduction
The purpose of the project report is to take an overview of the final project and discuss the
finished product, including what it does or does not do. Screen shots will also be provided to
give an insight into what the app looks like. We will see if the project conforms to the original
specification and design that was created. As well as the above, we will see what was learned
throughout the app development process.

2. Description of submitted project

The project I chose required an app to be designed which would allow users of the app to create
their shopping lists. When that user then goes about doing their shopping they could login to
the web app and choose whatever lists they plan on using for their shopping. Once they did
these things the app would organise the list(s) based on the floor layout of whatever
supermarket the user chose from the list.

2.1 Login

This is the first screen that the user is presented with. It will allow them to login to the web app
provided that they have created an account. If it is their first time using the app and therefore
have no account, they can go to the registration page via the link on the bottom. Various types
of error checking is carried out to ensure that the user enters information that can be accepted
i.e. no blank fields/incorrect password/username doesn’t exist etc.

2
2.2 Registration

This is the screen that will allow new users to create their account in order to use to web app.
The user must enter a username, password and their e-mail address which is to be used for e-
mail verification (not implemented). Error checking includes checking for blank fields as well as
ensuring that the username has not already been used. The e-mail field is of an e-mail type
which automatically checks that the format of the e-mail the user entered is correct. The
account is created on the database once the user clicks register.

2.3 Admin

This screen is only available to the admin user. This feature was not completed in the final
project. It appears blank above, however a list of the supermarkets that the admin has added to
the app show appear as a listview, similar to that of the home screen seen by other users. The
admin should then have been able to click a supermarket from that listview and be brought to
the layout screen which would allow them to edit the layout of the supermarket.

3
2.4 Layout

This is the screen which allows the admin to edit the layout of the supermarket picked from the
listview on the previous screen. The name of the supermarket is displayed in the textbox at the
top and below that is a dropdown list which contains the aisles available for the admin to select.
The admin selects an aisle and then clicks the add aisle button to add it to the listview that
would be shown in the dark area. Once they are finished creating the layout they click the save
button on the bottom to add the layout to the database.

2.5 Home

This is the screen that users are presented with once they login to the web app. The lists that
they have created are displayed right away and they are free to create other lists by entering a
name for the list at the top of the screen and clicking create list. The user can click any list from
the listview, where they will be brought to the list items screen in order to view the items that
are on that list. Other options they have are to logout, manage their account and start shopping.

4
2.6 List

This is the screen that allows the user to add items to their list. In the top text box the name of
the list is displayed. To add a new item the user can enter the name of the item in the second
text field and then click add item which will append the new item to the listview that would be
shown in the dark area. One the user has finished adding items they can click the save button to
save the list to the database.

2.7 Account

This screen allows the user to manage their account. They have the option to update their
account password or they can choose to delete their account by clicking the delete button in the
top corner. Error checking is carried out if the user wishes to change their password i.e blank
fields/ensuring that the current password entered is correct/ensuring that the new password
matches the confirm password text field. The user clicks update to complete the process.

5
2.8 Delete account

This is a screen that pops up when the user has selected to delete their account from the
account screen. They will be asked to confirm that they wish to delete their account. If the user
clicks cancel then nothing will happen and their account remains in tact. If they user selects
delete once again then their account is removed from the database and they will be logged out
of the app.

2.9 Start shopping

This is another screen which has not been completed. It is the screen which appears when the
user wishes to being shopping. They can select the supermarket that they plan on shopping in
from the dropdown list shown above. The user then would be able to choose from their lists
that they have created which ones they will be using. Once this has been done the app would
organise the list(s) based on the layout of the chosen supermarket. The list would be presented
as a listview similar to that seen on other screens of the web app.

6
3. Description of conformance to specification and design
I believe the final design conforms to what I have previously thought out in previous documents.
The original GUI that was displayed in the functional specification was only a mock up however I
have gone about the final design very similarly. Listviews are used as a way of neatly displaying
data to the user such as the lists/list items/aisles for the layout etc. The screens remain
uncluttered which also makes for easier viewing on mobile devices. It was decided based on use
of other shopping list apps that a light colour scheme should be used in order to improve
readability; however the black scheme used in the web app didn’t pose any problems in this
regard. It also benefits mobile devices which use Amoled screens. Amoled screen devices must
light up each pixel individually where as other LED screens use a backlight to light the screen.
Since Amoled must light each individual pixel it draws more power when using white/lighter
colour schemes.

The data also remains the same for the most part. Tables were made for the user accounts, the
lists, the list items, the supermarket layouts and the aisles. The only change is that of the ids.
The names were used instead as the id fields and for the lists table a listkey was made which
were a combination of the user’s username and the name of the list. This ensured that each
record would be unique.

4. Description of learning

4.1 Technical achievements

Prior to the beginning of this project I did not have much knowledge about web apps and the various
frameworks that are available for developing web apps. During my research I discovered frameworks
such as Sencha Touch, one of the most popular, although this framework was not used due to its
limited browser compatibility. JQuery mobile offers a lot of documentation and support on the
website which can provide a lot of help for certain situations.

I also began looking at JavaScript which is a vital part of creating any web app. It can be a
difficult language to learn as it sometimes does a lot of things that you don’t expect it to do. This
language in combination with Json and Ajax can allow for web apps to behave much more
dynamically, passing data to the page and displaying it without needing to refresh the browser.

4.2 Personal achievements

Although the project was not very successful, I’ve had my first experience at trying to create a
fully functioning web app which aimed to offer something unique to users. With some more
time and perhaps a better knowledge of JavaScript I believe I could have developed a much
more refined web app that did what it was meant to do.

7
5. Review of project
Overall I’m quite disappointed with how the project turned out. While it started out fine at the
beginning I eventually ran into problems getting information to display on the screen. Working
in the back end proved to be no problem as python works seamlessly when it comes to data
management. All of the problems occurred on the client side and I believe this was due to a lack
of understanding of the languages involved. Although I had been reading up on JavaScript and
JSON I had some difficulty understanding how to use them.

Due to the problems that occurred on the client side with the dynamic loading of data a large
proportion of the web app has not been completed. This includes most of the list management
as well as the floor layout tool. As so much time was put into trying to fix the above problem I
ran out of time to refine the look of the app on mobile devices. The functionality that I got
working does work fine on mobile devices as well as the PC, however the visual side of things
could be improved.

If I were to start the project all over again the first thing I would I do differently is really study
JavaScript/JSON and Ajax. These together all help to make an app more dynamic and better
knowledge of how JavaScript works could have prevented the issues I came across during
development.

I believe I did choose the right technologies for developing my web app. JQuery mobile is one of
the most popular frameworks in use for mobile web development and when combined with
custom styles can make some very good looking apps. PythonAnywhere offers a very good
development environment as it allows you to edit you code/manage the database and work
with files easily. Getting a web app up and running requires minimal effort with this cloud
backend.

8
6. Acknowledgments
I would like to thank my supervisor Paul Barry for his help and guidance during the development of
the Smart Shopping App.

JQuery mobile’s website provided some help in creating the graphical user interface. The link is as
follows:

http://jquerymobile.com/