(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 Tiingo API and NewsAPI

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 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 its ready to go. App Engine applications automatically scale based on incoming traffic. Load balancing, micro services, authorization, SQL and noSQL databases, memcache, traffic splitting, logging, search, versioning, roll out and roll backs, 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 Amazons 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 Microsoftmanaged 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 componentbased 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 Chromes V8 JavaScript engine. Node.js uses an eventdriven, 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/

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 Tiingo API and display the results on the details page. The application evolves from previous homework.

A user will first open a page as shown below in Figure 1, where user can enter the 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:

1. Homepage/ Search Route [/] It is a default route of this application.
2. Watchlist Route [/watchlist] It displays the watchlist of the user.
3. Portfolio Route [/portfolio] It displays the portfolio of the user.
4. Details Route [/details/<ticker>] It shows the details of the <ticker>.

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 two components.

1. Stock Ticker: This is a text box, which enables the user to search for valid stocks by entering keywords and accept a suggestion of all possible tickers. The user needs to select one match before clicking on the search icon. 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.1.2 Search Execution

Once the user clicks on the Search button, 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 Tiingo API and NewsAPI services to get the detailed information and news.

3.1.3 Autocomplete

• A Search Bar allows a user to enter a keyword (Stock ticker symbol / company name) to retrieve information. Based on the user input, the text box should display a list of all the matching companys ticker symbols with companys name (see Figure 2). The autocomplete JSON data is retrieved from the Tiingo Search API (refer to Section 4.1.5). These are examples of calling this API:

https://api.tiingo.com/tiingo/utilities/search/<query>

# or

https://api.tiingo.com/tiingo/utilities/search?query=<query> For example:

https://api.tiingo.com/tiingo/utilities/search/apple

• The autocomplete function should be implemented using Angular Material. Refer to Section 5.3 for more details.

Figure 2: Autocomplete Suggestions

3.2 Details Page

3.2.1 Details of Searched Stock

After the user clicks the Search button, a page should route to /details/<ticker> path (example: /details/AMZN). The following components need to be displayed on successful search:

• Symbol, company name, trading Exchange (such as NASS+DAQ), and Buy button on top left;
• Last price, change, percent change, and date/time, on top right. The change items should be preceded by appropriately colored arrows);
• Indication of open / closed market;
• Summary, Top News and Charts tabs.

Please refer to Figure 3.1 and Figure 3.2 below.

Figure 3.1: Detail page overview (Market is Closed)

Figure 3.2: Detail page overview (Market is Open)

• 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, quantity of shares to buy and total price for the shares), as shown in Figure 3.3. Note that:
  • The Buy button should be disabled if the user inputs the quantity < 1 or the quantity field is empty. (see Figure 3.4);
  • The Buy button will be enabled once the user enters a number greater than 0 (see Figure3).

Figure 3.3: Buy Button enabled for valid input

Figure 3.4: Buy button disabled for invalid input

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.

Fields	Sample Values	API reference
Ticker	NVDA	From table 4.1, use ticker key
Companys Name	Nvidia	From table 4.1, use name key
Exchange Code	NASDAQ	From table 4.1, use exchangeCode key
Last Price	108.22	From table 4.2, use last key
Change	1.1	Calculation is last prevClose from table 4.2
Change Percentage	1.03%	Calculation is Change * 100 / prevClose from table 4.2
Current Timestamp	2020-09-24 16:26:27	Use the Date() function in JavaScript to display current time.
Market Status	Open/Close	Section 4.2
Last Timestamp	2020-09-24 13:00:00	From Table 4.2, use value available for key timestamp.

Table 3.1 Stock Details

2) Material Tabs This component helps users see different stock data on the same page, and the tabs content is detailed in the following sections.

3.2.2 Summary Tab

It contains summary of the stock, which includes:

• Details are as following:
  • If market is Open: Display all the fields mentioned in Table 3.2 and Table 3.3, as shown in Figure 3.2.
  • If market is Closed: Display all the fields mentioned in Table 3.2, as shown in Figure 3.1.
• Companys Description: values for startDate and description key from Table

4.1.

• Chart for the last Working Day:
  • If market is Open: Show stock chart available in Highcharts for that day.
  • If market is Closed: Show stock chart for the day when the market was closed. (i.e., last working day).

Fields	Sample Values	API reference
High Price	110.25	From table 4.2, use high key
Low Price	105	From table 4.2, use low key
Open Price	105.17	From table 4.2, use open key
Prev. Close	107.12	From table 4.2, use close key
Volume	165893169	From table 4.2, use volume key

Table 3.2: Fields used inside Summary Tab (Part 1)

Fields	Sample Values	API reference
Mid Price	110.1	From Table 4.2, use mid key
Ask Price	110.29	From Table 4.2, use askPrice key
Ask Size	200	From Table 4.2, use askSize key
Bid Price	110.35	From Table 4.2, use bidPrice key
Bid Size	200	From Table 4.2, use bidSize key

Table 3.3: Fields used inside Summary Tab (Part 2)

3.2.3 Top News Tab

This tab shows top news for the given stock ticker symbol from News API (see Figure 3.5 and Figure 3.6). o Show cards which contains Image and Title.

• For Image use urlToImage key from Table 4.6.
• For Title use title key from Table 4.6.

• When clicked on card, open a Modal window as shown in Figure 3.6. For details regarding Modal check section 5.3. Modal contains all the fields mentioned in Table 3.4.
• User can share the news articles on Twitter and Facebook. For details on how to use it, check Section 4.1.3. 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 Article.
• 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.

Fields	API reference
Publisher	From Table 4.6, use source key.
Published Date	From Table 4.6, use publishedAt key.
Title	From Table 4.6, use title key.
Description	From Table 4.6, use description key.
URL	From Table 4.6, use url key.

Table 3.4: Fields used inside modal of Top News Tab

Figure 3.5: Top News Tab overview

Figure 3.6: Top News Detailed Modal overview.

3.2.4 Charts Tab

This tab uses HighCharts to display historical stock market data on the related stock. o See Figure 3.7 for reference. For more details regarding Highcharts see section 5.5. o Display SMA and Volume by Price chart for data of the last 2 years.

Figure 3.7: Charts tab overview.

Note: As user mentioned before, that user need to select one from the suggestions before clicking the search button. If user manually edits the /details/<ticker> route and if the <ticker> entered by user is invalid, then you need to display an alert on that page instead of details.

Important note: Data mentioned in Stock Details section and Summary Tab, should autoupdate every 15 seconds.

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. (see Figure 3.9)

• If the change is positive, the color of the last, change and changePercentage keys should be green
• If the change is negative, the color of the last, change and changePercentage keys should be red
• If there is no change, the color of the last, change and changePercentage 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.10.

last key should be used from Table 4.2. change and changePercentage should be calculated in a similar fashion as to the one shown in Table 3.1.

Figure 3.9: Watchlist menu page

Figure 3.10: Watchlist Empty Alert

3.4 Portfolio Menu

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 local storage of the application. For more details on local storage, see section 5.4 and Figure 3.11. 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.13. 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 must be non-empty;
• When clicking on Sell button, modal should open as shown in Figure 3.15 and 3.16. Sell button inside modal should be disabled if the quantity entered by user is not valid. Input is Valid if, 0<input<=Quantity and must be non-empty. Quantity is described in Table 3.5;
• When clicked on cards header part, it should open the details route of that ticker (stock);
• If portfolio is empty, it should display the alert as shown in Figure 3.12.

last key should be used from Table 4.2 for Current Price. Current Change and Current Total should be calculated as shown in Table 3.5.

Quantity	Total Number of stocks bought by user. It should be more than 0, else remove it from the portfolio local storage.
Total Cost	Total cost is sum of the total cost paid for all the purchases of the stock. For Example, if user has bought 10 stocks of AAPL in past, at the rate of 200, and today if user buys another 10 stocks of AAPL at the current price, i.e. 300, then the Total Cost for the user will be (10*200) + (10*300) = 5000.So Quantity is 20 and Total Amount is 5000.
Average Cost per Share	(Total Cost / Quantity)
Current Price	last key from the table 4.2
Change	(Average Cost per Share Current Price) of the stock. Here, Current Price is last key from the table 4.2
Market Value	(Current Price * Qty), here Current Price is last key from Table 4.2 and Qty is the number of stocks present in users portfolio.

Table 3.5: Fields used in Portfolio Cards.

Figure 3.11: Portfolio

Figure 3.12: Portfolio Empty Alert

Figure 3.13: Modal for Buying Stock

Figure 3.14: Input is invalid in Modal for Buying Stock

Figure 3.15: Modal for Selling Stock

Figure 3.16: Input is invalid in Modal for Selling Stock

Note: Portfolio and Watchlist must be sorted in ascending order based on Ticker.

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:

1. Search
2. Watchlist
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 Tiingo. Developed by <students name> Here <students name> must be replace with your name.

4. APIs description

4.1 Tiingo API calls, similar to Homework 6

In this homework, we will use the Tiingo API. A comprehensive reference about this API is available at:

• https://api.tiingo.com/documentation/end-of-day
• https://api.tiingo.com/documentation/iex
• https://api.tiingo.com/documentation/utilities/search

4.1.1 Companys Description

For Companys Description, use the following API. For more details refer Figure 4.1:

https://api.tiingo.com/tiingo/daily/<ticker>?token=<APIKeyTiingo>

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 similar to this:

https://api.tiingo.com/tiingo/daily/AAPL?token=12PrIvA32tEmYtEmpToKeN23

Response:

Response Keys	Details
ticker	Ticker symbol.
name	Companys Name
description	Companys Description
startDate	Companys Start Date
exchangeCode	Companys Exchange Code

Table 4.1: Response received for Companys Meta Data API call.

Figure 4.1: Details regarding Companys Meta Data

4.1.2 Companys Latest Price of the stock

For Companys Latest Price, use the following API. For more details refer Figure 4.2:

https://api.tiingo.com/iex/?tickers=<ticker>&token=<APIKeyTiingo>

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 anyone.

An example URL constructed from the parameters will look similar to:

https://api.tiingo.com/iex?tickers=AAPL&token=12PrIvA32tEmYtEmpToKeN23

Response:

Response Keys	Details
ticker	Ticker symbol.
timestamp	Timestamp of the data.
last	Companys latest price based on timestamp
prevClose	Companys previous closing based on timestamp
open	Companys open price based on timestamp
high	Companys high price based on timestamp
low	Companys low price based on timestamp
mid	Companys mid price based on timestamp
volume	Companys volume based on timestamp
bidSize	Companys bid size based on timestamp
bidPrice	Companys bid price based on timestamp
askSize	Companys ask size based on timestamp
askPrice	Companys ask price based on timestamp

Table 4.2: Response received for Companys Latest Price of the Stock.

Value of mid, bidPrice, bidSize, askPrice, askSize will be null when market is closed.

Value of mid can be null even when the market is open, if this happens then you should display

– instead of null. 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.2: Details regarding Companys Meta Data

4.1.3 Companys Historical Data:

For Companys Historical data, use the following API. For more details refer to Figure 4.3:

https://api.tiingo.com/tiingo/daily/<ticker>/prices?startDate=<startDate>&resampleFreq= <resampleFreq>&token=<APIKeyTiingo>

URL parameter in API Call:

• Ticker: Ticker symbol of the stock. E.g.: AAPL
• startDate: the date from which we need data.
• resampleFreq: the interval between 2 data lists/ arrays.
• Token: The API access Token. It is private, please do not share with anyone.

An example URL constructed from the parameters will look similar to this:

https://api.tiingo.com/tiingo/daily/AAPL/prices?startDate=2019-09-

10&resampleFreq=4min&token=12PrIvA32tEmYtEmpToKeN23

Response: We receive an array of objects, where each object contains following keys. We only need the following keys from the response.

Response Keys	Details
date	Date and time of the data.
open	Open Price at the specific date and time.
high	High Price at the specific date and time.
low	Low Price at the specific date and time.
close	Close Price at the specific date and time.
volume	Volume at the specific date and time.

Table 4.3: Details regarding Companys Historical Data.

Figure 4.3: Details regarding Companys Historical Data

4.1.4 Companys Daily Chart Data:

For Companys Last days chart data, use the following API. For more details refer to Figure 4.4:

https://api.tiingo.com/iex/<ticker>/prices?startDate=<startDate>&resampleFreq=<resamp leFreq>&token=<APIKeyTiingo>

URL parameter in API Call:

• Ticker: Ticker symbol of the stock. E.g.: AAPL
• startDate: the date from which we need data.
• resampleFreq: the interval at which you need data.
• Token: The API access Token. It is private, please do not share with anyone.

An example URL constructed from the parameters will look similar to this: https://api.tiingo.com/iex/AAPL/prices?startDate=2019-09-

10&resampleFreq=4min&token=12PrIvA32tEmYtEmpToKeN23

Response: We receive array of objects, where each object contains following keys

Response Keys	Details
date	Date and time of the data.
open	Open Price at the specific date and time.
high	High Price at the specific date and time.
low	Low Price at the specific date and time.
close	Close Price at the specific date and time.
volume	Volume at the specific date and time.

Table 4.4: Details regarding Companys Historical Data.

Figure 4.4: Details regarding Companys Historical Data for the latest working day.

4.1.5 Autocomplete:

For Autocomplete, use the following API. For more details refer Figure 4.5:

https://api.tiingo.com/tiingo/utilities/search?query=<query>&token=<APIKeyTiingo>

URL parameter in API Call:

• Query: query means the combination of letters for which you want results for autocomplete. E.g.: AA
• Token: The API access Token. It is private, please do not share with anyone.

An example URL constructed from the parameters will look similar like:

https://api.tiingo.com/tiingo/utilities/search?query=AA&token=12PrIvA32tEmYtEmpTo KeN23

Response: We receive a response in the form of array of objects. From those objects we only need the following keys:

Response Keys	Details
Ticker	Ticker symbol.
Name	Companys Name

Table 4.5: Response received for autocomplete API call.

Figure 4.5: Details regarding Autocomplete Response.

4.2 News API:

For reference, check the following link: https://newsapi.org/docs/endpoints/everything

For News related to Company, use the following API. For more details refer Figure 4.6: https://newsapi.org/v2/everything?apiKey=<APIkey>&q=<Query>

URL parameter in API Call:

• Query: Ticker symbol of the stock. E.g.: AAPL
• APIkey: The API access Key. It is private, please do not share with anyone.

An example URL constructed from the parameters will look similar to:

https://newsapi.org/v2/everything?apiKey=12PrIvA32tEmYtEmpToKeN23&q=app

Response: We receive the response in the form of array of objects. From those objects we only need the following keys:

Response Keys	Details
url	url for the article.
title	Articles Title
description	Articles brief description
source	Source of the Article. E.g. Business Insider
urlToImage	Image URL for the article.
publishedAt	Date when the article was published

Table 4.6: Response received from News API call.

Figure 4.6: Details regarding Company News

4.3 Socials

4.3.1 Twitter

Refer the following link for details: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview

4.3.2 Facebook

Refer the following link for details:

https://developers.facebook.com/docs/plugins/share-button/

5. Implementation Hints

5.1 Bootstrap Library

To get started with the Bootstrap toolkit, please see:

https://getbootstrap.com/docs/4.0/getting-started/introduction/.

Bootstrap can be imported to Angular in couple of ways. See:

https://www.techiediaries.com/angular-bootstrap/

5.2 Bootstrap UI Components

Bootstrap provides a complete mechanism to make Web pages responsive for different mobile devices. In this exercise, you will get hands-on experience with responsive design using the Bootstrap Grid System.

https://getbootstrap.com/docs/4.0/layout/grid/

At a minimum, you will need to use Bootstrap Forms, Alerts, Cards and Buttons to implement the required functionality.

Bootstrap Forms https://getbootstrap.com/docs/4.0/components/forms/

Bootstrap Alerts https://getbootstrap.com/docs/4.0/components/alerts/ Bootstrap Cards https://getbootstrap.com/docs/4.0/components/card/

Bootstrap Buttons https://getbootstrap.com/docs/4.0/components/buttons/

5.3 Angular

• Angular Set up https://angular.io/

• Angular Material Installation https://material.angular.io/guide/getting-started

• Angular Material Tabs https://material.angular.io/components/tabs/overview

• Angular Material Spinner https://material.angular.io/components/progress-spinner/overview

• Angular Bootstrap Modal https://ng-bootstrap.github.io/#/components/modal/examples

• Angular Material Autocomplete:

https://material.angular.io/components/autocomplete/overview

5.4 Local Storage

Refer the following documentation for detailed understanding on Local Storage and how to use it.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

5.5 Highcharts

Refer the following documentation on Highcharts and how to use it.

https://api.highcharts.com/highstock/

For using Highchart in Angular you can use highcharts-angular package. Refer following link for more details:

https://www.npmjs.com/package/highcharts-angular

5.6 Icons

• https://icons.getbootstrap.com/icons/caret-up-fill/
• https://icons.getbootstrap.com/icons/caret-down-fill/
• https://icons.getbootstrap.com/icons/star/
• https://icons.getbootstrap.com/icons/star-fill/

5.6 Deploy Node.js application on Cloud Services

Since Homework #8 is implemented with Node.js on Cloud Services, you should select Nginx as your proxy server (if available), which should be the default option.