Web代写 | IFN666 Web and Mobile Application

这个作业是开发一个Web应用查询股票相关的信息
IFN666 Web and Mobile Application
Development
Assignment 1
Release Date: 15/4/2020
Submission Date: 8/5/2020
Weighting: 25% of Unit Assessment
Task: Individual Project
Introduction:
In this assignment, your overall task will be to develop a web application that makes stock
market statistics available to the user. You will need to develop a client-side web application,
in which you will query the API and present the information in a form that is helpful to the
user.
The aims of this assignment are to:
• Introduce you to client web application development
• Provide experience in querying REST APIs and manipulating the results
• Provide experience with modern web technologies including JS and React
In this specification, we will not be too prescriptive, but we necessarily have to focus around
some technologies, as otherwise we cannot support you in learning the material and
debugging problems. You should see the development of the client for this application as a
series of steps, with each one of those steps corresponding to an increase in sophistication,
and in the possibility of a higher grade.
The Data:
The dataset is drawn from the stock market. For each day you’ll be able to access the following
information:
Field Description Example
Timestamp A time stamp (year, month, day) of the
interaction
2020-03-10
Symbol The stock’s symbol AAPL
Name The company name Apple Inc.
Industry The industry that describes the company Information Technology
Open The price at opening on that day 228.08
High The highest price that day 251.83
Low The lowest price that day 228.00
Close The price at close on that day 229.24
Volume The number of shares traded in that day 100,423,000
Table 1: The information in the dataset
The REST API:
The server is located at : http://131.181.190.87:3001
To access the server you will need to connect via a VPN first.
(https://qutvirtual4.qut.edu.au/group/student/it-and-printing/wi-fi-and-internetaccess/accessing-resources-off-campus)
We will offer the following endpoints:

1. /all (GET) – Returns an array of each of the stock’s symbol, name and industry.
2. /all?symbol=xxx (GET) – Returns an array of endpoint 1 matching a wildcard
given by xxx. For example, searching for AA will return stocks the information
endpoint 1 with the codes AAL, AAP, AAPL, MMA and UAA.
3. /industry?industry=xxx (GET) – Returns for information for endpoint 1
with the matching industry name. Query params need to be URL encoded.
4. /history?symbol=xxx (GET) – Returns all the information in Table 1 for a
given code for 100 day period. The code is given by xxx. Only full codes are allowed.
5. /history?symbol=xxx&from=yyyy-mm-dd (GET) – Returns the
information in Table 1 for a given code from a given day written in year-month-day
e.g. 2020-0-309. Note that query params need to be url encoded. Note that the from
parameter cannot be used by itself, and it must be coupled as shown with the code
parameter if the request is to be valid.
Examples of the REST APIs are as follows and some errors are:

/all
[
{“symbol”:”A”,”name”:”Agilent Technologies Inc”,”industry”:”Health Care”},
{“symbol”:”AAL”,”name”:”American Airlines Group”,”industry”:”Industrials”},
{“symbol”:”AAP”,”name”:”Advance Auto Parts”,”industry”:”Consumer
Discretionary”},
{“symbol”:”AAPL”,”name”:”Apple Inc.”,”industry”:”Information Technology”},
{“symbol”:”ABBV”,”name”:”AbbVie Inc.”,”industry”:”Health Care”},
{“symbol”:”ABC”, “name”:”Amerisource Bergen Corp”, “industry”:”Health
Care”},
…
]
/all?symbol=AA
[
{“symbol”:”AAL”,”name”:”American Airlines Group”,”industry”:”Industrials”},
{“symbol”:”AAP”,”name”:”Advance Auto Parts”,”industry”:”Consumer
Discretionary”},
{“symbol”:”AAPL”,”name”:”Apple Inc.”,”industry”:”Information Technology”},
{“symbol”:”MAA”,”name”:”Mid-America Apartments”,”industry”:”Real Estate”},
{“symbol”:”UAA”,”name Under Armour Class A”,”industry”:” Consumer
Discretionary “},
]
/industry?industry=Health%20Care
[
{“symbol”:”A”,”name”:”Agilent Technologies Inc”,”industry”:”Health Care”},
{“symbol”:”ABBV”,”name”:”AbbVie Inc.”,”industry”:”Health Care”},
{“symbol”:”ABC”,”name”:”AmerisourceBergen Corp”, “industry”:”Health Care”}
…
]
/industry
{“error”: “true”, “status”: “400”, “Query parameter industry is mandatory”}
: Industry parameter is not entered
/industry?industry=ZZZ
{“error”: “true”, “status”: “400”, “Industry does not exist”} : An
incorrect industry parameter has been passed
/history?symbol=AAPL
[
{“timestamp”:”2020-03-23T14:00:00.000Z”,”symbol”:”AAPL”,”name”:”Apple
Inc.”,”industry”:”Information Technology”,”open”:228.08,
“high”:228.5,”low”:212.61,”close”:224.37,”volumes”:83134900},
{“timestamp”:”2020-03-22T14:00:00.000Z”,”symbol”:”AAPL”,”name”:”Apple
Inc.”,”industry”:”Information Technology”,”open”:247.18,
“high”:251.83,”low”:228,”close”:229.24,”volumes”:100423000},
{“timestamp”:”2020-03-19T14:00:00.000Z”,”symbol”:”AAPL”,”name”:”Apple
Inc.”,”industry”:”Information Technology”,”open”:247.385,
“high”:252.84,”low”:242.61,”close”:244.78,”volumes”:67964300},
{“timestamp”:”2020-03-18T14:00:00.000Z”,”symbol”:”AAPL”,”name”:”Apple
Inc.”,”industry”:”Information Technology”,”open”:239.77,
“high”:250,”low”:237.12,”close”:246.67,”volumes”:75058400},
…
]
/history?symbol=ZZZ
{“error”: “true”, “status”: “400”, “message” “Invalid Stock Symbol”} :
Stock symbol not found
/history
{“error”: “true”, “status”: “400”, “message” “Request must include symbol
parameter”} : Symbol is not included in the path
/history?symbol=AAPL&from=2020-03-22
[
{“timestamp”:”2020-03-23T14:00:00.000Z”,”symbol”:”AAPL”,”name”:”Apple
Inc.”,”industry”:”Information Technology”,”open”:228.08,
“high”:228.5,”low”:212.61,”close”:224.37,”volumes”:83134900},
{“timestamp”:”2020-03-22T14:00:00.000Z”,”symbol”:”AAPL”,”name”:”Apple
Inc.”,”industry”:”Information Technology”,”open”:247.18,
“high”:251.83,”low”:228,”close”:229.24,”volumes”:100423000},
…
]
/history?symbol=AAPL&from=34
{“error”: “true”, “status”: “400”, “message” “Invalid date or format, try
year-month-day”} : Date format is incorrect
The Requirements:
The requirements for the client side of this assignment are ultimately pretty straightforward.
The complications come because for most of you it is the first time that you have done
something like this. At the most basic level, you must develop a client side web application
that allows the user to work with each of the endpoints. The overall design of the site is up to
you, but we will make some comments about clean and modern looking sites below.
Your main requirement is to build a website in React. The essential requirements here are
that the responses to the queries should use the techniques that you will through the first
half of the semester. We except that you should be able to successfully process all of the
endpoints. You should choose suitable interface elements to display and interact with the
information. We will give you some latitude in this, and you can also get some ideas from the
discussion below.
Requirements Sample:
Landing Page:
Below is the initial landing page. It should have a small piece of information describing the
stock exchange and well as links to a stocks and search page. You should also include a header
and an image. You should make wise choices for how to present all the information together.
Home | Stocks
Stock Prices
Welcome to the Stock Market Page. You may click on stocks to view all the stocks or search to
view the latest 100 days of activity.
/all
Here, your task is to display stock information. We expect you to show the stock code, name
and industry.
/all?symbol=xxx
Here, we can search according to a stock code. You can choose to have your own elements.
For example, searching for a code can either be in a text field or a dropdown list. More
advanced elements will give you the potential for a higher mark. For maximum marks you
should have a text field with a search capability that doesn’t require us to hit the server.
Suppose, we type ‘AA’ into the search box. This has the effect of selecting specific records in
the page. Ideally, should not require that you hit the server again – this should be local
processing of the collection of records that you have available. However, if you must then you
can hit the server using the second endpoint above.
Home | Stocks
Select stock

Stock Name Industry
AAL American Airlines Group Industrials
AAP Advance Auto Parts Consumer Discretionary
AAPL Apple Inc. Information Technology
MAA Mid-America Apartments Real Estate
UAA Under Armour Class A Consumer Discretionary
Home | Stocks
Select stock
Symbol Name Industry
A Agilent Technologies Inc Health Care
AAL American Airlines Group Industrials
AAP Advance Auto Parts Consumer Discretionary
AAPL Apple Inc. Information Technology
ABBV AbbVie Inc. Health Care
——- Search
AA Search
Home |
Industry
Industry
/industry?industry=xxx
This endpoint allows you to limit the number of stocks shown to a particular industry. For
example by selecting ‘Health Care’ all of the information technology stocks will be shown.
You must get this information from the database. The industries available to show are:
Health Care, Industrials, Consumer Discretionary, Information Technology, Consumer Staples,
Utilities, Health Care, Financials, Real Estate, Materials, Energy, Telecommunication Services
Home | Stocks
Select stock

Showing stocks for 10/3/2020
Stock Name Industry
A Agilent Technologies Inc Health Care
ABBV AbbVie Inc. Health Care
ABC AmerisourceBergen Corp Health Care
ABT Abbott Laboratories Health Care
AET Aetna Inc Health Care
Search Health Care
Industry
/history?symbol=xxx
Using the previous endpoints you should be able to click on the names or the codes to get
bring up the search screen for that code. For example, clicking on Apple you would get a page
with /history?code=aapl.
Once you click on individual stock you are greeted with the historical stock details. You need
to mention the name of the stock. Initially you will receive all of the stock details for the past
100 days. In order to access the higher grades you will also need to present a chart which will
show the closing price.
Home | Stocks
Search date from
Showing stocks for the Apple Inc
Date Open High Low Close Volumes
10/3/2020 228.08 224.37 228.5 212.61 83,134,900
9/3/2020 247.18 229.24 251.83 228 100,423,000
8/3/2020 247.38 244.78 252.84 242.61 67,964,300
5/2020 239.77 246.67 250 237.12 75,058,400
4/3/2020 247.51 252.86 257.61 238.4 81,014,000
——— Search
0
200
400
22/03/2020 22/04/2020 22/05/2020 22/06/2020
($)
Day
Closing Price
/history?symbol=xxx&from=yyyy-mm-dd
You can also change the time record that displays, by selecting the “select date from” widget.
Again, you can choose your own element from a drop down box to a calendar. And again,
ideally you shouldn’t be hitting the servers but locally processing of the collection of records
that you have available. The endpoint is /history?symbol=xxx&from=yyyy-mm-dd where
yyyy equal the year, mm equals the month and dd equals the day. Also, the chart should be
updated as well. Note that the example shows 2 days which is pretty small, but was chosen
for illustrative purposes.
Grading
The marking for this assignment will be governed by the CRA rubric, and this will take account
of a number of aspects of the assignment process. These will include:
1. The overall level of functionality successfully implemented
2. The usability of the application
3. The robustness of the application
4. Evidence of a professional approach to design
5. Evidence of a professional approach to development and code quality
6. The quality of the professional report and submission video
Home | Stocks
Search date from
Showing stocks for the Boeing Company
Date Open High Low Close Volumes
10/3/2020 4.79 4.79 4.28 4.69 713075
9/3/2020 4.95 5.11 4.27 4.58 802684
09/03/2010
220
225
230
22/03/2020 23/03/2020
($)
Closing Price
Search
Full details of this split will be found in the CRA document, which will also be made available
in the assessment section of BB. Here we are concerned only with the marks for functionality,
application usability and robustness. The precise marks awarded may be reduced as a result
of features which are only partially implemented or error prone or components which are
poorly chosen and so on. But as an approximate guide, these are our expectations
4. A simple web page with limited formatting that implements the endpoint queries discussed
above using React. Most of the material will be presented in the tutorials for the first half of the
unit will applicable here.
5. At this level we will expect you to use React and to implement the information into a some
type of table other than a HTML form. An example is the ag-grid (https://www.ag-grid.com/)
material. You should also ensure that you can do not need to hit the server unnecessarily either
through searching the stock by a wildcard or by limiting the date that the history of stocks are
shown from.
6 and 7. At the higher grade levels, we will expect that you are able to implement
pagination/sorting for the table components and to implement a graph using chartJS
(https://www.chartjs.org/) and d3 (https://d3js.org/). Note, that D3 is an advanced library and
you shouldn’t attempt it unless you have prior experience. You should also make sure that you
don’t hit the server unnecessarily through searching the stock by a wildcard or by limiting the
date that the history of stocks is shown from.
Submission:
Your submission needs to be in 3 parts
The Code:
You should create a directory called client. To a large extent the structure of your applications
within these directories is up to you, but we will expect an appropriate separation and
organisation of resources. This is to some extent prescribed for you by the express generator and
by the usual structure of a client app. If in doubt, show a tutor and get some feedback. We will
not be impressed if everything sits in the top directory of the client app.
Now, you might have noticed that Node apps involve installation of packages, and that this leads
to the installation of node_modules, and that eventually these take up a certain amount of
space. Please delete them. And then look around through the directory structures again, and
delete any others that you missed the first time. We don’t want to see them, we don’t want to
store them, and you don’t want to wait while they upload.
Report:
We will expect a short report and user guide, generally running to 10 pages or so, including
screenshots. Your report must include the following sections:
1. Introduction – telling us what was implemented and what wasn’t, showing a few
screenshots to illustrate the functionality. This will probably occupy a page or a bit
more.
2. Technical description of the application. This section is to allow you to talk about the
APIs used for graphing or mapping, to show us any tricky data flows, and to discuss
technical issues that caused you problems. This is especially important if something
doesn’t actually work.
3. Testing and limitations – test plan, results, compromises.
4. References
5. Appendix: brief user guide
The report should be entitled report.doc
Video Demonstration:
You will need to record a video demonstration of your app, showing all of the actions outlined
in this document. In particular you need to:
1. Go to the landing page
2. Show all the stocks with their associated detail
3. Show the ability to limit by industry.
4. Show the ability to perform a search
5. Show the ability to get information for a particular stock
6. Show the ability to limit stock from a particular date
The report should be entitled such as video.mpg
Final Submission:
Create a directory called assign which should include:
• The client directory
• The report
• The video demonstration
You should then zip up assign and uploaded to blackboard. We will mark the last attempt
received and we will ignore all the others.

The CRA rubric will be released as a separate file.