Project Details

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Project source code: https://github.com/lili53012/ExpenseTracker

---

Introduction

This project is built with the ionic 3 frameworks. It is a hybrid mobile development platform that allows users to run the application on multiple platforms such as Android, IOS and web-based platform. The language that I used is typescript. The database used is firebase. 

Purpose for making the application

The reason that I want to do create this app is that I feel that financial planning is very important. This is because young adults nowadays, often get into impulsive spending. Therefore, I am thinking to make this application to help the user to monitor of their own spending. A hybrid mobile platform will allows the application to be accessible across different platforms with the same set of codes. Therefore, this application is design with the aim of helping the user to monitor their spendings and the processes should be easy to follow and use.

Making Process:  Please refers to the instructions section of the project or you can directly access through this link: https://hackaday.io/project/162180/instructions

---

Reflections

How does the application works ?

1. Users have to register a new account with their email  and password.
2.  User login with the account.
3.  The Home page is the Dashboard page which displays all the spending details using visual graph
4.  Users are allow to set/edit their budget for the month and different status will display different colours with different icons.
   • red colour - exceeded their budget and shows a "money flying" icon
   • green colour - on track of their budget and shows a smiley face icon
   • grey colour - if they have not set any budget amount  and shows a unhappy face icon
5.  Users are allowed to insert a new record by clicking on the "Add Expense" button.
   • users have to key in all the necessary details and this record will be stored into the firebase
6. Users view their spending record
   •  able to perform search function on the record.
7. Allow updating the records by clicking on the specific record.
8. Scanning of barcode which enables capturing of the product details in the REST API
9. With the detail captured, users then insert the record into the firebase.

Possible future enhancement 

There are much possible enhancement for this application. However, due to time constraint I did not manage to implement all my ideas. It can be expanded into tracking of the user’s dietary habits by taking into account the food that they have purchased. In fact the online REST API (the product database) allows user to key in the calories details of the item that they have purchased. It can also make a peer to peer comparison on the spending habits of the different users, therefore users are provided with further insights into their financial status as compared to other users. For the current version, the pulling of barcode product data is only able to capture the product’s brand and description because such a product database is hard to find in Singapore. Therefore, future version can implement a database that stored all the information required for spending.

Alternatively, function like allowing the user to add a new record in the application itself to the online database is also possible, therefore it will reduce the hassle for user to enter the website and enter the the product into the database . Features like voice recognition/chatbot are also possible, for example, asking the application to calculate the spending over a specific period of time. The voice recognition is something that I actually have tried to work on, I manage to get it captured the speech of the users but I faced issue with having it to work on  the IOS device. Therefore, in the end, I did not implement this function. If I have more time, this is definitely something possible to achieve. The application can also collaborate with payment gateways to get product data from those online shops. Collaboration with a finance company is also possible as it captures the financial portfolio of the users. Therefore, the scale of the application can increase from an expense tracker into a financial planner.

Critically Analyse of the Project

How does it connect to ideas you have learned? 

It has connected to the idea of the digital medium. The definition of medium is any combination of materials and cultural practices that are used to support intentional, meaningful communication by affording inscription, transmission, and representation. The definition of a computer is an object that takes in a stimulus and changes itself according to specific rules. Therefore, in this case, the application is a programme that is running on the phone( which is the computer), it takes in stimulus from the users and changes itself according to the rules that I have set in the application.

It creates a form of communication between the user and the application. For example, the user key in their spending details; the application is able to process the user inputs, which are the date, amount, category, description and remark; from the user inputs, the date, the category and the amount is being processed and analysed to create a visual graph for the users (data is represented on the graph). The graph then transmits the insight of their spending habits for the user to understand. Therefore, users view the graph and are able to understand the useful analysis of the data. Hence, forms a communication between the user and the application. Moreover, the users are also allowed  to create a spending record by scanning of the barcode on the product that they have purchased. This is also a form of communication and encourages interaction with users as the information in the barcode is captured by the scanner and it is retrieved onto the application. 

One of the possible future enhancement that I have mention above for this application is that the users are able to perform a peer-to-peer comparison with all the other registered users. This is provided that they input their personal data into the application. For example, if the application captured their ages, the users are able to make a comparison across different age group and this provides a better insight of their financial status. Therefore, the expense tracker is able to expand into a financial planner. This illustrated the idea of the Internet of Things which is a network of physical devices, vehicles, home appliances, and other items embedded with electronics, software, sensors, actuators, and connectivity which enables these things to connect, collect and exchange data. The application gathers data from all the users and the data is managed in the single database, with all the gathered data, rules and procedures are carried out to analyse the information provided by the users. Hence, it formed a network of the Internet of Things, which gathering data from each and every user, processed the data and provides useful insights to the users. 

This concept is future emphasise with the function of the barcode scanning. This is because the API that I have used to implement the barcode scanning allows the users to capture product information from the database, which creates a form of a network across worldwide. As the product database is collected with the idea of crowdsourcing which means it involves obtaining of work, information or opinions from a large group of people who submit their data via the Internet, social media and smartphone apps. In this case, the product data is contributed by the people worldwide, anyone who has internet accessed is able to contribute to the database by adding product details into the database. Thus with this, it illustrates the idea of Internet of Things.

The different colours of the progress bar and the status of the budgeting creates a visual impact which implies the concepts of procedural rhetoric and visual rhetoric. For example, the application will first carry out process of calculating the spending of the current month and check if it has exceeded the budget. If the users have overspent their budget limit, the application will display the "money flying" icons, with the progress bar coloured in red. This conveys a message that the user has overspent their budget and they are losing money. Whereas, if they spent lower than the budget, it shows a smiley face, which means the users are on track of their budget setting. The smiley face implies the message that they are doing fine and they are within their targeted budget.

Analyse the affordances of digital media it uses.

• Spatial 
  • I would say that it is medium as the information is organised on the graph and user are allowed to filter out the data. Instead of looking at the plain spending records, the information is processed and display on the graph which creates a visual impact. Therefore, this improved the data navigation experience. Even if the data is on the list view(in the expense history page), a search function is implemented so as the ease the user's experience. The record is also arranged with the latest record being at the top of the spending history, hence, this makes it easier for the user to refer to the records.

•  Encyclopedic
  • I would say it has improved from low to medium. The data that is entered by the user initially consist of a very low level of encyclopedic as it is just purely spending records, which does not provide any insights without the processes of analysing the data. After the record is stored in the firebase, the data is being processed by the backend logic of the application. After the data is being processed, users are able to know the different categories that they spent their money mostly on for the month. Furthermore, they are able to view their spending habit across the time of the week(from monday to sunday) and the past six months. This provides useful information for the user to plan for their financial planning. The feature of budget tracking further assists the users on their financial planning as they are informed with their current budget status. The function of barcode scanning on the product purchased allows the users to get data from the database that is accessible worldwide. Moreover, The idea of peer-to-peer comparison can also help to improve the level of encyclopedic. Therefore, this improved the encyclopedic of the expense tracker. 

• Procedural 
  • Procedural is low, as the app is very easy to use and the users just need to create expense record or create it with scanning the barcode. The more complicated part is the processing of the data which follows the rules in the code implementation. However, it is still not very high.
• Participatory
  • It has low participatory. However, the function of barcode scanning improved a small portion of participatory as it enables the user to make interaction with the physical item that they have purchased. 

How does it make use of the new abilities of computers?

It makes use with the ability of barcode scanner on mobile phones. The scanning barcode on the product enables the application to get data from the crowdsourcing product database. People can add in their own products and contribute to the database. This increases the potential of the application as anyone who is using this application will contribute to the database. On the other hand, anyone who is using the database is actually contributing to the application . Therefore, this bring the abilities of the application to a higher level.

It also makes use the ability of high mobility of computers. This is because it is created with ionic framework, it enables the application to run on Android device, IOS device and web-based device with the same set of codes. Therefore, this application is able to run across most of the computers and most importantly is that developers do not have to re-write their programme for different platforms. Therefore, with a high mobility, it is convenience for both the users to use and the developer to maintain the codes. The barcode scanner can be future enhance into QR code scanner which is able to capture more information.

How does it build off other projects you have seen?

I have searched for similar kinds of projects online. Most of them provide a more comprehensive analysis of the user’s expenses. Since the aim for this project is to help the youngsters to manage their expenses. Therefore, I have made it in a way that is very simple and easy to navigate. With just the simple information of spending record, they are able to visualised and monitor their spending habits on the graph. This visualisation of graph helps the user to understand the data more effectively while many of the other projects actually provide list view on the records instead of the graph. Furthermore, The significant difference of this application is the feature of barcode scanner which brings benefits that I mentioned above. As a year one student who has little programming background with javascript and html, I have faced many challenges during the process of making the project. Firstly, it is to learn the new programming language of typescript and how ionic 3 framework and firebase works. I have decided to used ionic framework because of it's mobility as it allows the same piece of code to be able to run across all the platforms. Secondly, for UI design, I want to make something that is easy to use and user are able to visualised and understand the data quickly. This is the reason why I decided to represent the data on the graph instead of just showing it on the list. I have make reference with the UI components provided by ionic. Thirdly, for procedural of the application, the steps of typing down spending records maybe tedious sometime. This is the reason why I want to implement a barcode scanning function which reduce the hassle of typing down the details. During the process of code implementation, I have encountered many bugs and issues. However, I always search online for help. Nevertheless,  it is really a worth while experience of able to bring my ideas into a real application.