HackMD
技術-後台類-azure function #7-嘗試與網頁互動
接續上一篇的成果，azure function 已經回傳整齊有序的資料集，距離它產生效用之旅程目的已經不遠。圖表呈現是基本的形式，也許還要進一步與它類資料比較，彙總，計算，端看使用目的，但到最終呈現型態還是不外乎圖或表，因此我想先搞定透過網頁來呈現圖表基本元素。
網頁前端的技術博大精深，冒然鑽進去鐵定迷航在森林中，所以我很謹慎的限縮需求範圍，學了基本的 angular 框架，搞定網址列 routing 機制，建立視覺化 component，建立 service，向後台發出非同步 http request，再加上畫圖元件 highcharts，這些開發技術拚湊起來，大概就勉強夠用來組成一個完整的資料驅動應用循環。
以下列出 component and service 程式關鍵部分，經過測試資料已經成功抓回網頁瀏覽器了。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
確認瀏覽器收到資料之後，必須學習一些基本的 html 語法去顯示它，最簡單的就是
元素了，先讓它中規中矩的顯示看看，對某些應用情境，使用者這樣閱讀就已經可以做決策了，系統目的已達。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
再把關心的兩列數據用線圖畫出來，讓趨勢變化一目瞭然，採用 highcharts 這精美的視覺化元件函示庫，參考資訊附在後面。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
經過七回合的奮戰，完成一個小型的資料驅動應用。 azure function 幫了大忙是系統的核心，搭配小部分資料庫，python 和前端技術，非常實用且有趣。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
下一步要從哪一塊繼續發展？這需要思考一下，待續。
By Newman Chen 2022/3/10
參考資料
