代写Python编程、代做program程序语言

日期：2024-02-24 04:46

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?vÞÉ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Ã?symbolÞTSLA²tokenÞAPI_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?symbolÞTSLA²tokenÞAPI_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?symbolÞTSLA²tokenÞAPI_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›©hjockhTickegª›gange›©mkljidliegª›©jimehdanª›©fgomª›©joª

hjjdh››adidolsgonio›pÁ›aggh›jickeg›AAPL›gange›À›das›Á¿ÁŸ¿ÀŸ¿È›Á¿ÁŸ¿ÆŸ¿È‹adjkhjedÜjgke²ho

gjÜahc²adiKesÜ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Üjgke²hogjÜahc²adiKesÜ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?symbolÞTSLA²fromÞBEFORE_ÄÁ²toÞTODAY

²tokenÞAPI_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 ³usc.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 ³usc.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.

ÂÈ