讲解Python编程、讲解program程序语言

日期：2024-02-25 08:05

Assignment ?: Server-side Scripting using Python
Flask, JSON and Finnhub Stock API
?. Objectives
● Get experience with Python programming language and Flask framework.
● Get experience creating web pages using HTML, CSS, JavaScript, DOM, JSON format and
XMLHttpRequest object.
● Get experience with Finnhub Stock API, Polygon.io API and HighCharts.
● Getting hands-on experience in GCP, AWS or Azure.
?.? Directions
● The backend of this homework must be implemented in the cloud on Google Cloud App
Engine, AWS or Azure, using Python.
● See the ungraded assignment Cloud Setup (Python) for deployment of your project on GCP,
AWS or Azure.
● See the hints in section ?; a lot of reference material is provided to you.
● For Python and Flask kick-start, please refer to the Lecture slides on the class website.
● YouTube Link: https://www.youtube.com/watch?vTéDzeètFvcUM
● You must refer to the grading guidelines, the video, these specs and Piazza. Styling will be
graded and the point’s breakup is mentioned in the grading guidelines.
?. Description
In this exercise, you are asked to create a webpage that allows you to search for stock information
using the Finnhub Sjock API, and the results will be displayed in both tabular format and charts
format using HighCharts. You will also provide news articles for the selected stock using the Finnhub
API. Chart historical data will be provided by the Polygon.io API and displayed using HighCharts.
?.?. Description of the Search Form
The user first opens a web page as shown below in Figure ?, the initial search page, where he/she
can enter a stock ticker symbol. Providing a value for the “Stock Ticker Symbol” field is mandatory.
?
Figure ?: Initial search page
The search form has two buttons:
?. Search button (Magnifying glass symbol):
Once the user has provided valid data ￥a stock ticker is required|, and clicked on the Search
button or when the enter/return key is hit, your front-end JavaScript script will make a
request to your web server providing it with the form data that was entered ￥the ticker
symbol|. You must use GET to transfer the form data to your web server ￥do not use POST, as
you would be unable to provide a sample link to your cloud services|. A Python script using
Flask will retrieve the data and send it to the Finnhub Stock API. You need to use the Flahk
Python framework to make all the API calls.
Using XMLHttpRequest or any other JavaScript calls for anything other than calling your
own “cloud” backend will lead to a ?-point penalty. Do not call the Finnhub Stock API
directly from JavaScript.
Define routing endpoints and make your API call from the Python backend. The
recommended tutorial for Flahk and more importantly, routing, can be found at the following
link: https://flask.palletsprojects.com/en/?.?.x/
If the user clicks on the Search button without providing a value in the field, an alert should
pop up “Please fill out this field” ￥an example is shown in Figure ?|.
?
Figure ?: An Example of Empty Input alert
?. Clear button (Cross symbol):
This button must clear the result area ￥below the search area| and the text field ￥stock ticker
symbol|.
?.? Displaying Results
In this section, we outline how to use the form data to construct the calls to the RESTful web services
of the Finnhkb APIh and display the results in the web page.
If the ticker symbol is invalid ￥if your API call returns no data| then your webpage should display an
error message which says “No record has been found”.
A sample result is shown in Figure ?.
Figure ?: A Sample Search Result for Invalid ticker symbol
?
There are four components to display in “tabs” on the web page: Company, Stock Summary, Charts
and Latest News.
A sample result is shown in Figure ?.
Figure ?: A Sample Search Result for Tesla Inc (TSLA)
?.?.? Displaying Company Tab
We use the Finnhub Compans Profile á Services to get general information about a company.
Please refer to
https://finnhub.io/docs/api/company-profile?
for more details on the API.
API Sample: https://finnhub.io/api/v?/stock/profile??symbolTTSLA2tokenTAPI_KEY
The process to create your API key is explained in section ?. When constructing the Python request
required to obtain the Company Details, you need to provide two values in the URL:
?. The first value, the symbol, is the stock ticker the user entered in the form.
?. The second value, the token is your API_KEY that you create as described in section ?.
The response of this Python request is a JSON-formatted object. Figure ? shows a sample response
from the request for the TSLA symbol. You need to parse this JSON object and extract some fields as
required. The mapping of the JSON response to the tabular data to be displayed on the screen is
shown in Table ?.
?
Figure ?: Sample JSON response from Finnhub API’s Company Profile ? endpoint
Tabular Data Data from Finnhub company profile ? service
Company Logo ￥At the top| The value of key logo
Company Name The value of key name
Stock Ticker Symbol The value of key jickeg
Stock Exchange Code The value of key erchange
Company Start Date The value of key ido
Category The value of key finnhkbIndkhjgs
Table ?: Mapping JSON data and company tab display
After extracting the data, the data should be displayed in a tabular format with the logo at the top of
the table. A sample output is shown in Figure ?.
Figure ?: Example of Company Tab
?
?.?.? Displaying Stock Summary Tab
We use the Finnhub Quote Services to fetch the stock information for the ticker. Please refer to
https://finnhub.io/docs/api/quote for more details on the Service.
API Sample: https://finnhub.io/api/v?/quote?symbolTTSLA2tokenTAPI_KEY
When constructing the Python request required to obtain the Company Details, you need to provide
two values in the URL:
?. The first value, the symbol, is the stock ticker the user entered in the form.
?. The second value, the token is your API_KEY that you create as described in section ?.
The response of this Python request is a JSON-formatted object. Figure è shows a sample response
from the request. You need to parse this JSON object and extract some fields as required. The
mapping of the JSON response to the tabular data to be displayed on the screen is shown in Table ?.
Figure è: Sample JSON response from Finnhub API’s Quote endpoint
Tabular Data Data from Finnhub Quote service JSON response
Stock Ticker Symbol The value of key jickeg from company profile ? service
Trading Day The value of key j? The time stamp is given in the Unix epoch time.
Convert it to a human readable date as given in the screenshot below.
Previous Closing Price The value of key dc
Opening Price The value of key o
High Price The value of key h
Low Price The value of key l
Change The value of key d? Also display the upward arrow or downward arrow
depending on whether the difference value is positive or negative.
è
Change Percent The value of key dd? Also display the upward arrow or downward arrow
depending on whether the difference value is positive or negative.
Table ?: Mapping JSON data and stock summary display
After extracting the data, the data should be displayed in a tabular format. A sample output is shown
in Figure é.
Figure é: Example of Stock Summary Tab
As per the figure é. The last buy/sell indicator is made using Recommendation Trends Services of
Finnhub API? Please refer to https://finnhub.io/docs/api/recommendation-trends for more details
on the Service.
API Sample: https://finnhub.io/api/v?/stock/recommendation?symbolTTSLA2tokenTAPI_KEY
When constructing the python request required obtaining the Recommendation Trends, you need to
provide two values in the URL:
?. The first value, the symbol, is the stock ticker the user entered in the form.
?. The second value, the token is your API_KEY that you create as described in section ?.
The response of this Python request is a JSON-formatted object. Figure ê shows a sample response
from the request. You need to parse this JSON object and extract some fields as required.
é
Figure ê: Sample JSON response from Finnhub API’s Recommendation Trends endpoint
Use the recommendation values for the latest date for building the indicator as given in figure ?á.
You will need ? values from the latest response and display them in this respective order: strongSell,
sell, hold, buy, strongBuy.
Figure ?á: Example of Recommendation Trends
ê
?.?.? Displaying Charts Tab
You should extract the content of Time Series Data from the returned JSON object to construct a
chart which is responsible for displaying ￥close| price and volume. The chart is provided by
HighCharts. Find more information about HighCharts at:
https://www.highcharts.com/demo
https://www.highcharts.com/demo/stock/area
https://www.highcharts.com/demo/stock/candlestick-and-volume
The historical data for the ticker can be obtained from Polsgon?io Aggregate ￥Bars| Service.
Please refer to the API documentation at:
https://polygon.io/docs/stocks/get_v?_aggs_ticker__stocksticker__range__multiplier___timespan__
_from___to
for more details on the Service.
API Sample:
GET? ?pá?aggh?jickeg??hjockhTickega?gange??mkljidliega??jimehdana??fgoma??joa
hjjdh???adi?dolsgon?io?pá?aggh?jickeg?AAPL?gange?à?das?á?á???à??è?á?á??????è?adjkhjedüjgke2ho
gjüahc2adiKesücjO?iVF￠GiàèafBopUàZSg?UIrfj?Fg?
When constructing the Python request required to obtain the Company Stock Chart, you need to
provide ? values:
?. The first value, the stockTicker the user entered in the form.
?. The second value, the multiplier, is the size of the timespan multiplier. Should be a ?.
?. The third value, the timespan, should be day.
?. The fourth value, the from date, is the start of the aggregate time window. Either a date with
the format YYYY-MM-DD or a millisecond timestamp. This should be ? months and ? day
prior to the current date. You can use Python DateUtils’s “relativedelta” to calculate the date.
Please refer to https://dateutil.readthedocs.io/en/stable/relativedelta.html for more details.
?. The fifth value, to, is the end of the aggregate time window. Either a date with the format
YYYY-MM-DD or a millisecond timestamp. It should be the current date ￥Today’s date|.
?. The sixth value, the query string, should contain
“adjkhjedüjgke2hogjüahc2adiKesüYOUR￠KEY? qhege jhe apiKes ih your Api Key that you
created as described in section ?.?. Do not use the limit parameter, as it will conflict with the
from/to dates. Limit will default to ?,ááá, which is enough for ? months of data.
Note: The Service only accepts dates in UNIX timestamps so you will need to convert dates to UNIX
epoch time.
?á
The response of this Python request is a JSON-formatted object. Figure ?? shows a sample response
from the request. You need to parse this JSON object and extract some fields as required.
Figure ??: Sample JSON response from Polygon.io API’s Aggregate (Bars) Endpoint
The data obtained from the API can then be mapped to the HighCharts dataset using the mapping
below.
Chart Data Data from polygon.io Aggregate (Bars) service JSON
response
Date The value of key j? The time stamp is given in the Unix epoch
time.
Stock Price The value of key c
Volume The value of key p
Table ?: Mapping JSON data and HighCharts data
Note: Map each returned array element for each attribute, by its index. For example, for date
￥timestamp| t§á¨, close price is c§á¨ and volume is v§á¨.
For mapping the Stock price data to data for HighCharts, create an array of data points ￥x?, y?| where
x? will be the date and y? will be the corresponding close stock price for that day. This array will then
act as an input dataset for your HighCharts. Please refer to links in Section ? for more details.
Similarly create another array of points ￥x?, y?| where x? will be the date and y? will be the volume
for that day. This array will be the second input for your HighCharts. Since you will be plotting Stock
Price vs Date and Volume vs Date you will have two different datasets and two y-axis and a single
x-axis.
Initially, the chart shows the historical stock price ￥in blue line with filling the area below, two digits
after decimal| and volume ￥in grey bar| for the past six months by an interval of one day. Figure ??
shows an example of the Stock Price/Volume chart.
??
Figure ??: An Example of Chart showing Stock Price/Volume for ? months
The title of the chart for showing price/volume is “Stock Price ?Tickerà (YYYY-MM-DD)”, where
“YYYY-MM-DD” is today’s date. The subtitle of the chart should be “Source: Polygon.io” and should
hyperlink to the Polygon.io website: https://polygon.io/. The title of the Y-axis is “Stock Price” when
showing the stock price and the other Y-axis is “Volume”.
The X-axis changes on the basis of the zoom level ? months, ? months, ? month, ?? days, and è days.
Please refer to Section ? for references on how to change the chart data on the basis of the zoom
level. Figure ?? shows an example of the Stock Price/Volume chart for ?? days zoom level. Ensure
that the volume bars are small enough to not overlap the quote line chart.
??
Figure ??: An Example of Chart showing Stock Price/Volume for ?? days
?.?.? Displaying Latest News Tab
We use the Finnhub Compans News Services to fetch the stock information for the ticker. Please
refer to https://finnhub.io/docs/api/company-news for more details on the Service.
API Sample: https://finnhub.io/api/v?/company-news?symbolTTSLA2fromTBEFORE_?á2toTTODAY
2tokenTAPI_KEY
When constructing the Python request required to obtain the Company News, you need to provide
four values in the URL:
?. The first value, the symbol, is the stock ticker the user entered in the form.
?. The second value is the from, a prior date which should be ?á days prior to the current date.
You can use Python DateUtils’s “relativedelta” to calculate the date. Please refer to
https://dateutil.readthedocs.io/en/stable/relativedelta.html for more details.
?. The third value, to, is the current date ￥Today’s date|.
?. The fourth value, the token is your API_KEY that you create as described in section ?.
Note: The Service only accepts dates in YYYY-MM-DD format so you will need to convert dates to this
format.
The response of this Python request is a JSON-formatted object. Figure ?? shows a sample response
from the request. You need to parse this JSON object and extract some fields as required. The
mapping of the JSON response to the tabular data to be displayed on the screen is shown in Table ?.
Only the articles that have image? kgl? headline and dajejime keys present with a non-empty value
should be displayed. If any attribute is missing, empty or blank, do not display it in the results.
Display the first five articles from the response which have all the keys and values present as
mentioned.
??
Figure ??: Sample JSON response from Finnhub API’s Company News Endpoint
The mapping between the information populated in the results and the JSON object is
shown in Table ?.
Card Data Data from Finnhub company-news service JSON response
Image The value of key image
Title The value of key headline
Date The value of key dajejime? The time stamp is given in the Unix epoch
time. Convert it to human readable date as given in the screenshot
below.
Link to Original Post The value of key kgl
Table ?: Mapping between result card and JSON object
After extracting the data, it should be displayed as shown in Figure ??. The “See Original Post”
hyperlink opens the original post in a new tab in the browser.
??
Figure ??: Example of Latest News
?.? Saving Previous Inputs
In addition to displaying the results, the page should maintain the entered value while displaying the
current result. For example, if a user searches for “AAPL”, the user should see what was provided in
the search form when displaying the results. Specifically, when clicking on the Search button, the
page should display the result retrieved from the Finnhkb API service and keep the value provided in
the search form.
??
?. Hints
?.? Finnhub API Documentation
To apply for an API key on Finnhub and read the API documentation, please go to:
https://finnhub.io/
Click on the “Get free API key” button. Enter your Name, your 3usc.edu E-mail address and
Password, and click on Sign-up and go to get your API_KEY.
https://finnhub.io/dashboard
?.? Polygon.io API Documentation
To apply for an API key on Polygon.io and read the API documentation, please go to:
https://polygon.io/
Click on the “Sign Up” button. Enter your 3usc.edu Email address and a password and click Sign
Up, or use a GitHub account. In the polygon,io Dashboard, scroll down, and you will see your free
API Key.
?.? Deploy Python file to the cloud (GCP/AWS/Azure)
You should use the domain name of the GCP/AWS/Azure service you created in HW ?? to make the
request. For example, if your GCP/AWS/Azure server domain is called example.appspot.com or
example.elasticbeanstalk.com or example.azurewebsites.net the following links will be generated:
GAE - http://example.appspot.com/index.html
AWS - http://example.elasticbeanstalk.com/index.html
Azure - http://example.azurewebsites.net/index.html
The eramdle subdomain in the above URLs will be replaced by your choice of subdomain from the
cloud service. You may also use a different page than index.html.
?.? References for HighCharts
?. https://api.highcharts.com/highstock/
?. https://www.highcharts.com/demo/stock/intraday-area
?. https://www.highcharts.com/demo/stock/compare
?. Files to Submit
In your course homework page, you should update the Assignment ? link to refer to your new initial
web search page for this exercise ￥for example, index.html|. Your files must be hosted on GCP, AWS
or Azure cloud services. Graders will verify that this link is indeed pointing to one of the cloud
services.
??
Also, submit your source code file to D?L Brightspace. Submit a ZIP file of both front-end and
back-end code, plus any additional files needed to build your app ￥e.g., yaml file|. The timestamp of
the ZIP file will be used to verify if you used any “grace days.”
**IMPORTANT**:
● All discussions and explanations in Piazza related to this homework are part of the
homework description and grading guidelines. So please review all Piazza threads, before
finishing the assignment. If there is a conflict between Piazza and this description and/or the
grading guidelines, Piazza always rules.
● You can use jQuery for Assignment ? but it is not required.
● You should not use Bootstrap for Assignment ?.
● You should not call any of the APIs directly from JavaScript, bypassing the Python proxy.
Implementing any one of them in JavaScript instead of Python will result in a ?-point
penalty. This includes calls to both Finnhub and Polygon.io APIs.
● APPEARANCE OF ALL VIEWS, TABLES AND CHARTS should be similar to the reference video
as much as possible.
?è