Ajax、JSON、響應式設計和Node.js
股票搜尋（AJAX/JON/HTML5/Bootstrap/Angular/Node.js/Cloud Exercise）
1.目標
● 熟悉AJAX和JSON技術
● 在客戶端使用HTML5、Bootstrap和Angular的組合
● 在伺服器端使用Node.js
● 熟悉Bootstrap，使用響應式設計增強使用者體驗
● 親身體驗雲服務託管NodeJS/Express
● 學習使用流行的API，如Finnhub API、Polygon.io API和Highcharts API
● 瞭解如何在雲中管理和訪問像MongoDB Atlas這樣的NoSQL DBMS
2.背景
2.1 AJAX和JSON
AJAX（非同步JavaScript+XML）融合了多種技術
● 使用CSS的基於標準的演示
● 使用文件物件模型（DOM）進行結果顯示和互動
● 使用XML和JSON進行資料交換和操作
● 使用XMLHttpRequest進行非同步資料檢索
● JavaScript將所有內容繫結在一起
請參閱D2L Brightspace上的課堂幻燈片。JSON，JavaScript Object Notation的縮寫，是一種輕量級的資料交換格式。它的主要應用程式是在AJAX web應用程式程式設計中，它可以作為使用的替代方案用於客戶端和伺服器之間的資料交換的XML格式。請參閱D2L上的課堂幻燈片Brightspace。
生態系統npm是世界上最大的開源圖書館生態系統。要了解更多關於Node.js的資訊，請訪問：https://Node.js.org/en/此外，強烈建議使用Express.js。Express.js是一個最小且靈活的Node.js網站為web和代 寫Ajax、JSON移動應用程式提供一組強大功能的應用程式框架。它是實際上是Node.js的標準伺服器框架。要了解有關Express.js的更多資訊，請訪問：http://expressjs.com/重要提示：所有API呼叫都應該透過Node.js伺服器完成
3.高階描述
在本練習中，您將建立一個網頁，允許使用者使用Finnhub API並在搜尋頁面上顯示結果。該應用程式從以前的家庭作業。使用者將首先開啟一個頁面，如圖1所示，使用者可以在其中輸入股票行情符號，並使用“自動完成”從匹配的股票符號列表中進行選擇可以執行匹配的股票符號。搜尋框的描述見第節
3.1. 關於如何使用API的說明參見第4節。所有實施細節和要求將在以下章節中進行解釋。
此應用程式有4條路由：
a） 主頁路線['/']重定向到['/search/Home']–這是此的預設路線應用
b） Search Details Route['/Search/
已搜尋
c） 監視列表路由['/Watchlist']–它顯示使用者的監視列表。
d） Portfolio Route['/Portfolio']–它顯示使用者的投資組合。當使用者最初開啟您的網頁時，初始搜尋頁面應該如圖1所示。圖1：初始搜尋頁面
3.1搜尋頁面/主頁
3.1.1設計
您必須使用Bootstrap表單複製圖1中顯示的Search Bar條形圖包含三個組成部分。
1.股票提示：這是一個文字框，使用者可以透過它搜尋有效的股票輸入關鍵字和/或接受所有可能的報價單的建議。請注意搜尋框中的“helper”文字。
2.搜尋按鈕：“搜尋”按鈕（使用廣泛使用的搜尋圖示），當單擊，將從文字框中讀取值並將請求傳送到後端伺服器。成功響應後，將顯示該庫存的詳細資訊。
3.清除按鈕：“清除”（交叉標記）按鈕將清除當前搜尋的結果頁面，並顯示初始搜尋頁面。
3.1.2搜尋執行搜尋可以透過以下方式執行：
1.一旦使用者輸入股票程式碼並直接按下Enter鍵或點選“搜尋”按鈕，在不使用自動完成建議的情況下，您的應用程式應該對GA/AWS/AAzure後端（雲）上託管的Node.js指令碼進行HTTP呼叫服務）。雲服務上的Node.js指令碼將向Finnhub發出請求API服務獲取詳細資訊。如果輸入的股票程式碼無效且沒有資料如果找到，則應顯示相應的錯誤訊息。如果找到有效的庫存資料應該載入搜尋結果。
2.一旦使用者開始鍵入股票程式碼，自動完成建議（參見第3.1.3節下面）將填充在搜尋欄下面。可以選擇匹配的股票程式碼。在上面單擊下拉選擇，搜尋將自動啟動並執行與前一段所述相同。
3.1.3自動完成
搜尋欄允許使用者輸入關鍵字（股票程式碼）來檢索資訊。根據使用者輸入，文字框應顯示所有匹配公司股票程式碼的列表帶有公司名稱的符號（見圖2）。從中檢索自動完成的JSON資料Finnhub搜尋API（參見第4.1.4節）。自動完成響應使用以下條件進行篩選：type='Common Stock'，Symbol不包含點以下是呼叫此API的示例