本次活動內容表 即時網頁應用開發 - 手把手


一、緣由與目標

傳統的網頁應用程式,如果瀏覽器要持續接收來自於伺服器端的新資料時,通常都是透過 Polling、Long-Polling 或 Streaming 等方式來達成,而WebSocket的出現徹底解決了這個問題。 WebSocket提供了雙向(bi-directional)且全雙工(full-duplex)的優異傳輸能力,這樣的架構非常適合用於線上遊戲、聊天程式或是各種需要即時雙向傳輸的應用。 本次規畫的「即時網頁應用開發-手把手」活動分享內容注重於即時前端網頁的實務開發與應用,內容從前端的AngularJs結合了MQTT Broker透過Websocket來實作一些即時的應用程式。在活動內容分享中,將會手把手的帶領參與者一起邁進即時的應用程式架構與概念, 並且會現場coding開發來加強學習效果,讓所學能真正導入實際工作。

圖片來源:Introduction-to-the-MQTT-Protocol-on-NodeMCU

二、活動簡介

「即時網頁應用開發 - 手把手」適合對於想了解如何應用Websocket來建構即時性的網頁應用程式或是即時視覺化展現大數據處理分析結果的工程師或工程主管來參加。參加本次活動,參與者都將會有機會了解如何把Websocket應用來現有的系統之中。

整個活動設計區分為三個階段:

  1. 階段一 AngularJS雙向資料繫結(Two Way Data-Binding)與Websocket/MQTT基礎 : 2 ~ 3小時
  2. 階段二 MQTT進階功能與Websocket的結合 : 2 ~ 3小時
  3. 階段三 整合前後端的技術來實作即時網站應用 : 2 ~ 3小時

三、參與者技術準備

  1. 不怕接觸 Linux (Ubuntu/ Centos)
  2. 不擔心使用Docker
  3. 有程式設計開發經驗(C#, Java, Python, SQL, R)
  4. 基本Java,Javascript或Html的概念

四、活動前須知

本活動著重於操作,為了達到最佳的學習效果,請參與者參加前做好以下的準備,並自備筆電下載以下工具:

五、活動表

活動單元 活動內容 週別
e2-rtw-s01
  • AngularJS雙向資料繫結(Two Way Data-Binding)與Websocket/MQTT基礎
    • Angular Js基礎
    • WebSocket基礎
    • MQTT基礎
    • 實作: Online Chat
1
e2-rtw-s02
  • MQTT進階功能與Websocket的結合
    • MQTT進階
    • 實作: Who-is-Online
    • 實作: Realtime Charting (Highchart)
2
e2-rtw-s03
  • 整合前後端的技術來實作即時網站應用
    • MQTT進階
    • Redis基礎
    • Node.js基礎
    • 實作: User-Inbox (Badge)
3

六、活動主辦團隊

七、活動協辦單位

八、活動內容分享人

分享人:郭二文 (二哥)
聯絡: erhwenkuo@gmail.com

緯創資通(Wistron)員工。在緯創創立「緯創IT先進技術實驗室(witlab)」、並於2015年「witlab-1期」協助導入Elasticsearch(分散式全文檢索引擎),「witlab-2期」MQTT的IoT信息核心及2016年「witlab-3期」Apache Spark的大數據平台。熱愛軟體開發與物聯網創新,喜歡整合性資料分析與探索性研究。