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?


Assessment Criteria

Criteria
Standards
13 - 15 10 - 12 7 - 9 3 - 8 0 - 7
Application
Appearance
and Behaviour
(15 marks)
Develop compelling
applications to solve real
world problems
Very difficult to identify any
differences in appearance or
behaviour between the application
and the model solution
Obvious differences but
appearance is similar,
and all basic operations
are supported
Application is able to
retrieve and display stock
data in a manner that
resembles the model
solution.
Application is able to
display some stock
data.
Fails to display
anything useful.
Source Code
(15 marks)
Demonstrate a high level of
familiarity with the JavaScript
programming language and a
near professional level of skill
in its application to problems
of significant size and
complexity
Implementation follows all best
practices for React programming.
Components are decomposed into
simpler components. Code is clear,
simple and written in a pure
functional style.
Some breaches of React
programming best
practice or complex code,
with use of nonpure
functional style.
Demonstrates some good
React programming style and
best practices.
Lots of complex code
that is not written in a
pure functional manner.
Horrendously
complex code,
poorly indented
with poor choice
of identifiers and
no comments
Report (15
marks)
Understand technology
platforms and the suitability
of available technologies and
frameworks for mobile
computing (4 marks)
Critique of Expo and React Native
specifically for this task is well
balanced and based on solid
accurate facts.
Provides a good critique
of Expo and React
Native relative to its
competitors, but not
contextualized to this
task.
Demonstrate some
understanding of the pros
and cons of Expo and/or
React Native relative to its
competitors.
Serious factual mistakes
when discussing pros
and cons.
No meaningful
critique of Expo or
React native
relative to its
competitors.
Critically analyse mobile app
design for usability,
accessibility and
internationalisation
(6 marks)
Critique of usability, accessibility
and internationalization
demonstrates a deep
understanding of those concepts
and is contextualized well to this
specific application.
Good critique, but not
related to usability and
accessibility principles.
Identifies some good and
bad usability issues and
some reasonable discussion
related to accessibility or
internationalization.
Makes some reasonable
points related to
usability, accessibility or
internationalization.
No reasonable
argument related
to usability,
accessibility or
internationalization
Understand and apply social
and ethical considerations
(2 marks)
Identifies a number of important
social, ethical and legal
considerations specifically related
to the potential release of this
application.
Good points, but misses
at least one very
important social, ethical
or legal consideration.
Identifies at least one
legitimate social, ethical or
legal consideration specially
related to this application.
No meaningful
considerations
identified that are
specifically related to
this application.
No reasonable
considerations
identified
Describe the nature and
limitations of mobile
applications in a professional
report (3 marks)
Clearly and accurately summarizes
the current limitations and
remaining issues for this
application.
Identifies all of the
current limitations, but
not in a particularly clear
and thorough manner.
Identifies most of the
obvious bugs and
deficiencies in the current
application.
Major limitations and
bugs are completely
overlooked.