IFN666 Web and Mobile Application Development
Assignment 2
Release Date: 20/4/2020
Submission Date: 31/5/2020
Weighting: 45% of Unit Assessment
Task: Individual Project
Introduction:
In this assignment, your task is to use Expo React Native to develop a Mobile Application (that can run
on both iOS and Android) that makes stock market statistics available to the user. The user interface
and functionality will be based on the Apple’s Stocks Mobile App (available from the Apple App store):
A model solution has been created using Expo React Native that includes the subset of the interface
and functionality that you need to reproduce:
The model solutions is available at https://expo.io/@kellyw/IFN666Stocks. You can run it yourself in
an Expo client app on Android (phone, tablet or emulator on Windows, Linux or Mac). Your goal is to
replicate the appearance and functionality as closely as possible. Any bugs found in the model solution
should be reported to teaching staff rather than being replicated in your solution.
The application consists of two main screens, a Search screen and a Stocks screen. The application
maintains a “Watch List” which is a list of Stocks (symbols) that the user is interested in following. This
watch list must be stored in persistent local storage on the mobile device, so that if the user shuts
down the application and comes back the next day, their watch list will still be available. The Search
screen is designed to allow the user to add stocks to the Watchlist. It does this by providing a search
text box. As the user types in the search text box, a list of stock which contain that string either in their
stock symbol or stock name is presented to the user. The user can then click on a stock to add it to
their watch list. Only the stock symbol is stored in the Watch List (not any other data such as current
price). Once a user adds a stock to their watch list, they are automatically taken to the Stocks Screen
which lists all the stocks currently in their Watch list. Due to limited space on mobile screens, this list
contains only the stock symbol, most recent closing price and percentage gain or loss since the open.
The user can then select any of those stocks in order to view more detailed information about the
most recent day for the stock at the bottom of the Stocks window. Users can navigate between the
Stocks screen and the Search screen at any time via the bottom tab navigation bar.
This model solution does not provide any mechanism to remove items from the watch list. The original
Apple Stocks App has a separate Screen for that purpose. You can implement that screen if you wish,
but you are not required to. Similarly, the Apple Stocks App can toggle between showing a graph at
the bottom of the Stock screen instead of the detailed data and can toggle between showing
percentage versus absolute gains and losses. You can add that additional functionality if you like, but
it is not expected. If you do decide to add those features, the appearance and behaviour should be
the same as the Apple Stocks App. So, your solution should look and behave either like the model
solution or like the original Apple Stocks App. If you decide to implement graphing then you may make
use of whichever third-party react native modules that you desire to do so, but you should not
otherwise make use of third-party modules.
We have provided you with a Skeleton project that you must use. The only parts that you need to
implement are:
1. screens/StocksScreen.js
2. screens/SearchScreen.js
3. contexts/StocksContext.js
The sections that you need to complete are marked with a /* FixMe comment */. You can import
whatever components you like from the “react” and “react-native” modules. If you feel you need to
import a component from some other third-party module – please check with teaching staff first.
The Stocks Context has a Stocks Provider that wraps both the Stocks Screen and the Search Screen (in
App.js). It is designed to encapsulate the watch list and to share and maintain its state. The Stocks
Context uses Asynchronous storage to save and retrieve the watch list on the local device. The Search
screen and Stocks screen will each maintain their own private state so that we don’t need to
repeatedly query the server for stock prices or lists of stock symbols. The Stocks screen and Search
screen should be implemented using a number of functional sub-components (implemented inside
StockScreen.js and SearchScreen.js respectively). Each component’s render method should be short
and simple, each component should do just one thing, and all but the top level StockScreen and
SearchScreen components should be pure (stateless) functional components. Style sheets should be
used to reproduce as accurately as possible the appearance of the model solution (or the Apple Stocks
app). The ScaleSize function implemented in constants/Layout.js is designed to assist you in creating
an interface that appears the same on smaller phones and larger tablets. All numeric properties in
your style sheets should be set using this function.
You should aim for your app to not produce any warning when running in debug mode.
We will use the same back-end server as used for assignment one. The only two endpoints that you
should need to use are:
1. http://131.181.190.87:3001/all (used by the search screen)
2. http://131.181.190.87:3001/history?symbol=??? (used by the stocks screen)
As in the previous assignment, this server is inside the QUT firewall, so you will need to install the
CISCO AnyConnect app on your mobile device (available from both the Apple App store and Google
Play) and connect to sas.qut.edu.au with your QUT username and password.
For submission:
1. Publish a Production Mode version of your project to the Expo cloud and include a link to the
project URL on the front page of your report.
2. Remove the node_modules folder and create a zip file (named code.zip) containing your source
code. The marker should be able to just unzip your code, run npm install, expo start and then run
on either an iOS or Android device or emulator.
3. Submit a 5 to 10-page written report (named report.pdf) that clearly addresses each the following
questions:
If we wanted to make this App available on the Apple App store and Google Play.
a. Discuss whether using Expo React Native was a good choice for this application. What are
the pros and cons?
b. Critique the current user interface design (specifically for use on a mobile device). What
is good and what could be improved from a usability perspective?
c. Is the current application accessible to people with various disabilities? If not, how could
it be improved?
d. How would we change the source code structure if we needed to support users who speak
other languages?
e. Are there any social, ethical or legal issues that we would need to consider in releasing
this application?
f. What bugs or limitations would need to be fixed?
g. What might we need to change on the server-side?