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
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.
Standards
13 – 15
10 – 12
7-9
Demonstrates some good React programming style and best practices.
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)
Some breaches of React programming best practice or complex code, with use of nonpure functional style.
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
Understand technology platforms and the suitability of available technologies and frameworks for mobile computing (4 marks)
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 Expo and React Native specifically for this task is well balanced and based on solid accurate facts.
No reasonable argument related to usability, accessibility or internationalization
Report (15 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.
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.