Homework 8: Ajax, JSON, Responsive Design and Node.js
Stock Search (AJAX/JSON/HTML5/Bootstrap/Angular /Node.js/Cloud Exercise)
1. Objectives
● Get familiar with the AJAX and JSON technologies
● Use a combination of HTML5, Bootstrap and Angular on client side
● Use Node.js on server side
● Get familiar with Bootstrap to enhance the user experience using responsive design
● Get hands-on experience of Cloud services hosting NodeJS/Express
● Learn to use popular APIs such as finnhub API and Highcharts API
2. Background
2.1 AJAX and JSON
AJAX (Asynchronous JavaScript + XML) incorporates several technologies
● Standards-based presentation using XHTML and CSS
● Result display and interaction using the Document Object Model (DOM)
● Data interchange and manipulation using XML and JSON
● Asynchronous data retrieval using XMLHttpRequest
● JavaScript binding everything together
See the class slides at http://csci571.com/slides/ajax.pdf
JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main application is in AJAX web application programming, where it serves as an alternative to the use of the XML format for data exchange between client and server. See the class slides at:
http://csci571.com/slides/JSON1.pdf
2.2 Bootstrap
Bootstrap is a free collection of tools for creating responsive websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. To learn more details about Bootstrap please refer to the lecture material on Responsive Web Design (RWD). You should use Bootstrap 4+ and ng-bootstrap in this homework. See the class slides at:
http://csci571.com/slides/Responsive.pdf
2.3 Cloud Services
2.3.1 Google App Engine (GAE)
Google App Engine applications are easy to create, easy to maintain, and easy to scale as your traffic and data storage needs change. With App Engine, there are no servers to maintain. You
simply upload your application and it’s ready to go. App Engine applications automatically scale based on incoming traffic. Load balancing, microservices, authorization, SQL and NoSQL databases, memcache, traffic splitting, logging, search, versioning, roll out and rollbacks, and security scanning are all supported natively and are highly customizable.
To learn more about GAE support for Node.js visit this page:
https://cloud.google.com/appengine/docs/standard/nodejs/
2.3.2 Amazon Web Services (AWS)
AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon Elastic Compute Cloud (EC2), which delivers scalable, pay-as-you-go compute capacity in the cloud, and AWS Elastic Beanstalk, an even easier way to quickly deploy and manage applications in the AWS cloud. You simply upload your application, and Elastic Beanstalk automatically handles the deployment details of capacity provisioning, load balancing, auto-scaling, and application health monitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTP Server, PHP, and Python, Passenger for Ruby, IIS for .NET, and Apache Tomcat for Java.
To learn more about AWS support for Node.js visit this page:
https://aws.amazon.com/getting-started/projects/deploy-nodejs-web-app/
2.3.3 Microsoft Azure
Microsoft Azure is a cloud computing service created by Microsoft for building, testing, deploying, and managing applications and services through a global network of Microsoft- managed data centers. It provides software as a service (SaaS), platform as a service (PaaS) and infrastructure as a service (IaaS) and supports many different programming languages, tools, and frameworks, including both Microsoft-specific and third-party software and systems.
To learn more about Azure support for Node.js visit this page:
https://docs.microsoft.com/en-us/javascript/azure/?view=azure-node-latest
2.4 Angular
Angular is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Angular combines declarative templates, dependency injection, end-to-end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
For this homework, Angular 7+ (Angular 7, 8, 9 or 10) can be used, but Angular 10 is recommended. Please note Angular 7+ will need familiarity with Typescript and component- based programming.
To learn more about Angular 7+, visit this page:
https://angular.io/
2.5 Node.js
Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event- driven, non-blocking I/O model that makes it lightweight and efficient. Node.js package ecosystem, npm, is the largest ecosystem of open-source libraries in the world.
To learn more about Node.js, visit:
https://Node.js.org/en/
Also, Express.js is strongly recommended. Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is in fact the standard server framework for Node.js.
To learn more about Express.js, visit:
http://expressjs.com/
Important Note: All APIs calls should be done through your Node.JS server
3. High-Level Description
In this exercise you will create a webpage that allows users to search for stocks using the Finnhub API and display the results on the search page. The application evolves from the previous homework.
A user will first open a page as shown below in Figure 1, where the user can enter a stock ticker symbol and select from a list of matching stock symbols using “autocomplete.” A quote on a matched stock symbol can be performed. The description of the Search Box is given in Section 3.1. Instructions on how to use the API are given in Section 4. All implementation details and requirements will be explained in the following sections.
There are 4 routes for this application:
a) Home Route [‘/’] redirected to [‘/search/home’]– It is a default route of this application.
b) Search Details Route [‘/search/
c) Watchlist Route [‘/watchlist’] – It displays the watchlist of the user.
d) Portfolio Route [‘/portfolio’] – It displays the portfolio of the user.
When a user initially opens your web page, the initial search page should look like in Figure 1.
Figure 1: Initial Search Page
3.1 Search Page/ Homepage 3.1.1 Design
You must replicate the Search Bar displayed in Figure 1 using a Bootstrap form. The Search Bar contains three components.
1. Stock Ticker: This is a text box, which enables the user to search for valid stocks by entering keywords and/or accepting a suggestion of all possible tickers. Notice the “helper” text inside the search box.
2. Search Button: The “Search” button (which uses the widely used search icon), when clicked, will read the value from the textbox and send the request to the backend server. On a successful response, details for that stock will be displayed.
3. Clear button: The ‘clear’ (cross marked) button, would clear out the currently searched results page and show the initial search page.
3.1.2 Search Execution
Search can be executed in the following ways:
1. Once the user enters a ticker symbol and directly presses the Return key or clicks on the
“Search” button, without using the auto-complete suggestion, your application should make an HTTP call to the Node.js script hosted on GA/AWS/Azure back end (the Cloud Services). The Node.js script on Cloud Services will then make a request to the Finnhub API services to get the detailed information. If the entered ticker is invalid and no data is found, an appropriate error message should be displayed. If valid stock data is found, the search results should be loaded.
2. Once the user starts typing a ticker symbol, autocomplete suggestions (See Section 3.1.3 below) will populate below the search bar. A matched ticker can be selected. Upon clicking the dropdown selection, the search should start automatically, and execute identically as described in the previous paragraph.
3.1.3 Autocomplete
A Search Bar allows a user to enter a keyword (Stock ticker symbol) to retrieve information. Based on the user input, the text box should display a list of all the matching company’s ticker symbols with the company’s name (see Figure 2). The autocomplete JSON data is retrieved from the Finnhub Search API (refer to Section 4.1.4).
The autocomplete response is filtered using the criteria: type= ‘Common Stock’, Symbol doesn’t contain ‘.’(dot)
These are examples of calling this API:
https://finnhub.io/api/v1/search?q=
https://finnhub.io/api/v1/search?q=
For example:
https://finnhub.io/api/v1/search?q=apple&token=
The autocomplete function should be implemented using Angular Material. Refer to Section 5.3 for more details.
Figure 2: Autocomplete Suggestion
3.2 Search Results Page 3.2.1 Details of Searched Stock
After the user executes a search for a ticker, a page should route to /search/
● Symbol, company name, trading Exchange (such as NASS+DAQ), and a Buy button on top left, The Sell button should appear alongside the Buy button only when the portfolio has purchased stocks of a company. See Figure 3.3;
● Last price, change, percent change, and date/time, on top right. The change items should be preceded by appropriately colored arrows;
● Company Logo and Indication of open / closed market in the top-center;
● Summary, Top News, Charts and Insights tabs.
IMPORTANT NOTE: If the user navigates to the watchlist route or the portfolio route, and navigates back to the search results page, the previously searched stock results should remain on the search/
Please refer to Figures 3.1, 3.2, 3.3 below.
Figure 3.1: Search Details page overview (Market is Closed)
Figure 3.2: Search Details page overview (Market is Open)
Figure 3.3: Search Details page overview (Dynamic sell button when the portfolio has purchased stock of the company)
● When the user clicks on the star icon, the white star turns yellow, and that ticker should be stored in local storage (see HTML5 localstorage). A self-closing alert should be displayed at the top and that stock should be visible on the Watchlist Page (see Section 3.3).
● When the user clicks on the Buy button, a modal window should open. which will display the details (stock symbol, current price, money in wallet, input for quantity of shares to buy and total price for the shares), as shown in Figure 3.5. Note that:
o The Buy button should be disabled if the user inputs a quantity < 1 or the quantity field is empty or the quantity leading to total more than money in wallet (see Figure 3.5);
o The Buy button will be enabled once the user enters a number greater than 0 and suitable quantity up to total equals (or less than) money in wallet (see Figure 3.4).
● The Sell option is available in the homepage only when there is at least 1 quantity of stock available in portfolio. Upon clicking the Sell button, similar behavior as the buy transaction should be implemented, along with the constraint being able to sell only the stocks owned.
● Error messages should be shown for an attempt to buy more than the possible quantity of stocks using the money in wallet/attempt to sell more than the number of stocks owned in
Portfolio. See Figure 3.5 for reference.
● A self-closing transaction alert message should be shown for both buy and sell transactions
as in Figure 3.4a.
Figure 3.4: Buy Button enabled for valid input
Figure 3.4a: Alert for buying stock successfully
Figure 3.5: Buy button disabled for invalid input
For details and screenshots of similar sell transaction, refer Section 3.4 (Portfolio). As described, the page contains two major panels:
1) Stock Details: This panel displays all the values mentioned in Table 3.1. Last Timestamp should be only displayed beside the Market status if “Market is Close”.
Ticker Company’s Name Exchange Code
Last Price
Change Percentage Current Timestamp Market Status
Sample V alues VMW VMware Inc. New Y ork Exchange, Inc 126.99
API reference
From table 4.1, use ‘ticker’ key From table 4.1, use ‘name’ key From table 4.1, use ‘exchange’ key
From table 4.3, use ‘c’ key From table 4.3, use ‘d’ key From table 4.3, use ‘dp’ key From table 4.3, use ‘t’ key Calculation from timestamp
2022-02-17 09:02:21 Open/Close
Table 3.1 – Stock Details
2) Material Tabs – This component helps users see different stock data on the same page,
and the content of the tabs is detailed in the following sections.
IMPORTANT NOTE: All numerical values should be rounded off to 2 decimal places.
Data mentioned in the Stock Details section and Summary Tab, should auto-update every 15 seconds.
3.2.2 Summary Tab
This tab contains a summary of the stock, which includes:
o Details, as follows:
▪ Calculate if the market is open, using the timestamp key in Table 3.2. The
value of ‘t’ is the last timestamp at which the stock details are available. Assume the market is closed if more than 5 minutes has elapsed from this ‘t’ value. Assume the market is open, if otherwise.
▪ If the market is open: display all the fields mentioned in Table 3.2 and Table 3.3, as shown in Figure 3.2.
▪ If the market is closed: Display all the fields mentioned in Table 3.2 and Table 3.3, as shown in Figure 3.1.
o About the Company: values from Table 3.3. o Chart for the last Working Day:
▪ See Section 4.1.2 to obtain hourly stock price data using resolution ‘5’ and show variation for the last 6 hours.
▪ If market is open: show stock price variation from current time.
▪ If market is closed: show stock price variation from when the market was
closed. (i.e., last working day).
程序代写 CS代考 加微信: cstutorcs
Fields High Price Low Price Open Price Prev. Close Timestamp
IPO Start Date Industry
W ebpage Company Peers
Sample V alues 128
125.90 1645218002
API reference
From table 4.3, use ‘h’ key From table 4.3, use ‘l’ key From table 4.3, use ‘o’ key From table 4.3, use ‘pc’ key From table 4.3, use ‘t’ key
Table 3.2: Fields used inside Summary Tab (Part 1)
Sample Values 2007-08-14 Technology
https://www.vmware.com/
MSFT, ORCL, NOW, VMW
API reference
From table 4.1, use ‘ipo’ key From table 4.1, use ‘finnhubIndustry’ key
From table 4.1, use ‘weburl’ key From table 4.8, use response list
Table 3.3: Fields used inside Summary Tab (Part 2)
Important Note: The list of company peers should be clickable links which should navigate to
the search results of that ticker
3.2.3 Top News Tab
This tab shows top news for the given stock ticker symbol (see Figure 3.6 and Figure 3.7). In particular:
o Show cards which contains Image and Title.
▪ For Image use ‘image’ key from Table 4.5.
▪ For Title use ‘title’ key from Table 4.5.
o When clicking on a on card, open a Modal window as shown in Figure 3.7. For details regarding Modal check Section 5.3. Modal contains all the fields mentioned in Table 3.4.
o Users can share the news articles on Twitter and Facebook. For details on how to use it, check Section 4.2. Twitter and Facebook should open in a new browser tab, if clicked.
▪ In Twitter, it should create a post having following content:
● Title of the news article
● URL of the news article.
▪ In Facebook, it should create a post, which contains URL of the news
o Inside modal when user clicks on ‘here’ in ‘For more details click here’, it should
open the URL for the article in a new browser tab.
Source Published Date Title Description URL
API reference
From Table 4.5, use ‘source’ key. From Table 4.5, use ‘datetime’ key. From Table 4.5, use ‘headline’ key. From Table 4.5, use ‘summary’ key. From Table 4.5, use ‘url’ key.
Table 3.4: Fields used inside modal of Top News Tab
Figure 3.6: Top News Tab overview
Figure 3.7: Top News Detailed Modal overview.
3.2.4 Charts Tab
This tab uses HighCharts to display historical stock market data on the related stock. In particular:
o See Figure 3.8 for reference using Section 4.1.3 implementation.
o For more details regarding Highcharts see Section 5.5.
o Display SMA and Volume by Price charts for data of the last 2 years.
Figure 3.8: Charts tab overview.
3.2.5 Insights Tab
This tab uses a table that contains fields as mentioned in Table 3.5 and HighCharts to display
recommendation trends and company earnings data on the related stock. In particular:
o See Figure 3.9 for reference using Section 4.1.7 and Section 4.1.9.
o Aggregate the response data from Section 4.1.7 for all reddit and twitter mentions
and display in table.
o For more details regarding Highcharts see Section 5.5.
Total Mentions – Reddit Positive Mentions – Reddit Negative Mentions – Reddit Total Mentions – Twitter Positive Mentions – Twitter Negative Mentions – Twitter
API reference
From Table 4.7, use ‘mention’ key.
From Table 4.7, use ‘positiveMention’ key. From Table 4.7, use ‘negativeMention’ key. From Table 4.7, use ‘mention’ key.
From Table 4.7, use ‘positiveMention’ key. From Table 4.7, use ‘negativeMention’ key.
Table 3.5: Fields used inside table of Insights Tab
IMPORTANT NOTE: ‘Total’ calculation to be made appropriately for all fields from the array
of response obtained (see Section 4.1.7).
Figure 3.9: Insights tab overview.
Figure 3.9a: Company Earning chart with non-null values
IMPORTANT NOTE: An error message to be shown as shown below, if the user did not enter input in the search box or no data is found for the entered input. Use the company profile response to determine no data.
Figure 3.10: Error Alert.
3.3 Watchlist Menu
This menu will display all the stocks that are added to the watchlist by the user. This watchlist will be maintained in local storage of the application. For more details on local storage, see section 5.4 and Figure 3.11.
If the change is positive, the color of the ‘c’, ‘d’ and ‘dp’ keys should be green
If the change is negative, the color of the ‘c’, ‘d’ and ‘dp’ keys should be red
If there is no change, the color of the ‘c’, ‘d’ and ‘dp’ keys should be black.
When clicked on close button at present on the right-top corner of the card, it should remove it from the watchlist and display an updated watchlist.
When clicked on card, it should open the details route of that ticker (stock). If watchlist is empty, it should display the alert as shown in Figure 3.12.
and ‘dp’ key should be used from Table 4.3.
NOTE: ‘percentage change’ should be rounded off to 2 decimal places.
Upon clicking any area of the watchlist card, user should be navigated to the search details page of that stock
Figure 3.11: Watchlist menu page
3.4 Portfolio Menu
Figure 3.12: Watchlist Empty Alert
This menu will display all the stocks that have been bought by the user (i.e., the current portfolio of the user). This portfolio will be maintained in the local storage of the application. For more details on local storage, see Section 5.4 and Figure 3.13.
To simulate real-world stock trading and allow the user to make profits/losses, a wallet feature should be implemented. Initialize the money in wallet to be $25000 using local storage. User can use this money to trade stocks.
Update the money spent and gained during buy and sell transactions, accordingly. Initial price of stock when buying it, and the current change in price should be used to update money in wallet for profit and loss.
In particular:
● If the current rate is greater than the rate at which user bought it, then color of the ‘Change’, ‘Current Price’ and ‘Current Total’ keys should be green;
● If the change is negative, the color of the ‘Change’, ‘Current Price’ and ‘Current Total’ keys should be red;
● If there is no change, the color of the ‘Change’, ‘Current Price’ and ‘Current Total’ keys should be black;
● When clicking on Buy button, modal should open as shown in Figure 3.15. The Buy button inside modal should be disabled if the quantity entered by user is not valid as shown in Figure 3.14. Valid input should be greater than 0 and quantity that produces total less than money in wallet and must be non-empty;
● When clicking on Sell button, modal should open as shown in Figure 3.17 and 3.18. Sell button inside modal should be disabled if the quantity entered by user is not valid. Input is Valid if, 0
Figure 3.13: Portfolio
Figure 3.14: Portfolio Empty Alert
Figure 3.15: Modal for Buying Stock
Figure 3.16: Input is invalid in Modal for Buying Stock
Figure 3.17: Modal for Selling Stock
Figure 3.18: Input is invalid in Modal for Selling Stock
Figure 3.19: Auto closing alert message for buying more stocks from portfolio section
Figure 3.20: Auto closing alert message for selling stocks from portfolio section
3.5 Responsive Design
The following are a few snapshots of the web app opened with Google Chrome on a OnePlus mobile device.
You must watch the video carefully to see how the page looks like on mobile devices. All functions must work on mobile devices.
One easy way to test for mobile devices is to use Google Chrome Responsive Design Mode and Safari Develop – User Agent menu.
3.5 Navbar
The Navigation bar must be present on top of the page, and visible at all times, as shown in all the figures above. You can use Bootstrap to create a navbar. It consists of following menu options:
2. W atchlist 3. Portfolio
3.6 Footer
The Footer must be present at the end of each page, as shown in above figures. It should contain following line:
“Powered by Finnhub.io” 4. API’s description
4.1 Finnhub API calls, similar to Homework 6
In this homework, we will use the Finnhub API. A comprehensive reference about this API is available at:
https://finnhub.io/docs/api/introduction
4.1.1 Company’s Description
Reference: https://finnhub.io/docs/api/company-profile2
For Company’s Description, use the following API. For more details refer Figure 4.1:
https://finnhub.io/api/v1/stock/profile2?symbol=
URL parameter in API Call:
● Ticker: Ticker symbol of the stock. E.g.: MSFT
● Token: The API access Token. It is private, please do not share with
anyone. See Homework 6.
An example URL constructed from the parameters will look like this:
https://finnhub.io/api/v1/stock/profile2?symbol=AAPL&token=
Response Keys
country currency exchange
Country Name Currency Symbol Company’s Exchange
ipo marketCapitalization shareOutstanding logo
weburl finnhubIndustry
Company’s Name Company’s Symbol Company’s Start Date Company’s MarketCap Company’s Shares Company’s Logo Company’s Contact No. Company’s Website Url Company’s Industry
Table 4.1: Details regarding Company’s Description API call
Figure 4.1: Response received for Company’s Description API call
4.1.2 Company’s Historical Data
Reference: https://finnhub.io/docs/api/stock-candles
For Company’s Historical Data, use the following API. For more details refer Figure 4.2:
https://finnhub.io/api/v1/stock/candle?symbol=
URL parameter in API Call:
● Ticker: Ticker symbol of the stock. E.g.: AAPL
● Token: The API access Token. It is private, please do not share with
● Resolution: Time interval for stock data. E.g.: 1,5,D,M etc.
● Timestamp: Time frame for stock data.
An example URL constructed from the parameters will look like this:
https://finnhub.io/api/v1/stock/candle?symbol=AAPL&resolution=1&from=1631022248 &to=1631627048&token=
Response Keys
C H L O S T V
List of close prices for returned candles.
List of high prices for returned candles.
List of low prices for returned candles.
List of open prices for returned candles.
Status of the response. This field can either be ok or no_data. List of timestamp for returned candles.
List of volume data for returned candles.
Table 4.2: Details regarding Company’s Historical Data API call
Figure 4.2: Response received for Company’s Historical Data API call
4.1.3 Company’s Latest Price of Stock:
Reference: https://finnhub.io/docs/api/quote
For Company’s Latest Price, use the following API. For more details refer to Figure 4.3:
https://finnhub.io/api/v1/quote?symbol=
URL parameter in API Call:
● Ticker: Ticker symbol of the stock. E.g.: MSFT
● Token: The API access Token. It is private, please do not share with
An example URL constructed from the parameters will look similar to this:
https://finnhub.io/api/v1/quote?symbol=MSFT&token=
Response: We receive an array of objects, where each object contains following keys. We only need the following keys from the response.
Response Keys
c d dp h l o pc t
current price
change in price
percentage change in price high price of the day.
low price of the day.
open price of the day. Previous close price Timestamp of last stock data
Table 4.3: Details regarding Company’s Latest Price API call.
Market Status must be open if the difference between current Timestamp (current Timestamp will be of the created using new Date() in javascript) and ‘timestamp’ key is less than 60 seconds.
Figure 4.3: Response received for Company’s Latest Price API call 4.1.4 Autocomplete:
Reference: https://finnhub.io/docs/api/symbol-search
For Autocomplete, use the following API. For more details refer Figure 4.4:
https://finnhub.io/api/v1/search?q=
URL parameter in API Call:
● Query: Search query of stock ticker . E.g.: TSL for TSLA
● Token: The API access Token. It is private, please do not share with
An example URL constructed from the parameters will look similar like:
https://finnhub.io/api/v1/search?q=AMZ&token=
Response: We receive a response in the form of array of objects. From those objects we only
need the following keys:
Response Keys
result description displaySymbol symbol
number of results
array of search result
symbol description
display symbol name
unique symbol used to identify this symbol used in /stock/candle endpoint.
security type
Table 4.4: Details regarding Autocomplete Response. API call
Figure 4.4: Response received for autocomplete API call
Code Help
4.1.5 Company’s News
Reference: https://finnhub.io/docs/api/company-news
For Company’s News, use the following API. For more details refer Figure 4.5:
https://finnhub.io/api/v1/company-
news?symbol=
URL parameter in API Call:
● Ticker: Ticker symbol of the stock. E.g.: MSFT
● to: Date in YYYY-MM-DD
● from: Date in YYYY-MM-DD
● Token: The API access Token. It is private, please do not share with
anyone. See Homework 6.
An example URL constructed from the parameters will look similar to this:
https://finnhub.io/api/v1/company-news?symbol=MSFT&from=2021-09-01&to=2021- 09-09&token=
Response Keys
category datetime headline id
image related source summary url
News category
Published timestamp in UNIX
News headline
Thumbnail image URL
Related stocks and companies mentioned News source
News summary
url of original article
Table 4.5: Details regarding Company’s News API call
Figure 4.5: Response received for Company’s News API call
4.1.6 Company’s Recommendation Trends
Reference: https://finnhub.io/docs/api/recommendation-trends
For Company’s Recommendation Trends, use the following API. For more details refer
Figure 4.6: https://finnhub.io/api/v1/stoc