Assignment 3: 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 the Finnhub API, Polygon.io API and Highcharts API

●   Learn how to manage and access a NoSQL DBMS like MongoDB Atlas, in the cloud

2. Background

2.1 AJAX and JSON

AJAX (Asynchronous JavaScript. + XML) incorporates several technologies

●   Standards-based presentation using 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 on D2L Brightspace.

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 on D2L Brightspace.   

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). We recommend using Bootstrap 4.6 through 5.3, Angular  12 through  17, and ng-bootstrap 11 through  16 in this assignment. See the RWD class  slides on D2L Brightspace for the list of dependencies between these various versions.

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 12+ (Angular 12, through 17) can be used, but Angular 12 is recommended. Please note Angular 12+ will need familiarity with Typescript. and component-based programming.

To learn more about Angular, 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  the  default  route  of this application.

b)  Search  Details  Route   [‘/search/<ticker>’]  –  It  shows  the  details  of the  <ticker> searched

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

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:

The autocomplete function should be implemented using Angular Material. Refer to Section

5.3 for more details.

Figure 2: Autocomplete Suggestion