電腦版
.PNG)
在手機上用chrome瀏覽器開啟網頁後，可以選擇加到主畫面，這時候會跳出我們自己定義的圖標和名字的對話框，新增到主畫面後可以直接從主畫面點選進入網頁，但是顯示的畫面是如同APP的樣式，上面不會出現網址等類似網頁的元素，而手機離線後可以繼續瀏覽裡面的內容。在電腦上也能加到電腦桌面，並於離線之後進行讀取。
這次的作業在一開始的時候，因為對於PWA不是很了解，所以花了很長一段時間在查詢如何進行實作，而在查詢的過程中，也因此了解到更多關於PWA的相關知識及應用。
電腦版
在手機上用chrome瀏覽器開啟網頁後，可以選擇加到主畫面，這時候會跳出我們自己定義的圖標和名字的對話框，新增到主畫面後可以直接從主畫面點選進入網頁，但是顯示的畫面是如同APP的樣式，上面不會出現網址等類似網頁的元素，而手機離線後可以繼續瀏覽裡面的內容。在電腦上也能加到電腦桌面，並於離線之後進行讀取。
這次的作業在一開始的時候，因為對於PWA不是很了解，所以花了很長一段時間在查詢如何進行實作，而在查詢的過程中，也因此了解到更多關於PWA的相關知識及應用。
Nissan--ProPILOT Park RYOKAN
(1)功能與目標使用者
透過Nissan獨家的「ProPilot Park 全自動停車系統」，在天花板上設置偵測相機，能夠掌握坐墊、拖鞋等物品的位置，並與即時圖像處理技術、聲納資訊配合，能夠透過指令自動歸位。旅客離開房間後，房間內的物品都可以一鍵自動歸位，不需要再花多餘的時間去進行整理，減少人力資源的消耗。
(2)看法
Nissan將自動停車的技術，不僅僅只是運用於車輛上，還推廣至民眾的日常生活中，在旅館業中，這項技術降低了人力成本的支出。若這項技術加入至智慧房屋的功能中，人們回到家後，便不必再花費時間、花費力氣整理房屋，讓居家生活更舒適。
(3)參考連結
大家好!我是胡瀚文，現今有智慧手表，智慧手環，智慧眼鏡......各式各樣的穿戴式智慧裝置充斥於生活中，故希望能夠了解這些裝置的核心技術與創新應用趨勢，以能夠面對穿戴式科技的快速發展。
linkedin網址: www.linkedin.com/in/瀚文-胡-28b85812a
.png)
2. 心得
由於電子病歷的課堂上有使用SQL的語法，所以做起來還算輕鬆
1. Codecademy完成單元之截圖
.png)
2. 心得
在coding的過程中，發現有許多地方與java相似，最後的陣列和繼承是第一次見到，研究了好一陣子，才成功地打出來。
1.GithubPage連結
2.GithubPage截圖和實作功能敘述
新增按鈕，並將圖片都加上連結，右下角之頭像更改為隨網頁移動。
3.FreeCodeCamp完成單元之截圖
4.心得
運用jQuery可以輕鬆地做出各種特效，加上各種想要的按鈕，這次除了加上按鈕外，還另外找了廣告會隨網頁移動的方法。
jQuery是做網頁動畫時常用的語法，freecodecamp上學到的只是一小部分，在做github page的時候，又在W3C上發現了一些freecodecamp上沒學到的方法，嘗試了一下覺得蠻有趣的。
1. GithubPage連結
2.網頁截圖
3.心得
這次的作業除了讓我對上周的程式碼使用方法更熟悉外，還多學了很多的程式碼，
排版上也花費了很多時間去調整，雖然結果並不是盡如人意，但是我也從中收穫良多。
1.Github帳號
HuInworld
2.Codecademy和freeCodeCamp截圖
.png)
3.心得
在這兩個網站學習的過程中，時常會停下來思考這一步該怎麼做，不斷的去嘗試，實在想不出辦法時，只能查資料去解決，完成後非常的有成就感。兩個網站都是英文網站，在學習HTML&CSS以及Git的時候，也順便學習了英文，收穫真的很大。
第一部分:
(1)截圖
.png)
(2)文字說明
開啟Wireshark，點選wifi，打開學校ican遠距教學平台，登入之後回到Wireshark暫停擷取資料，搜尋HTTP，發現在info的POST裡擁有帳號和密碼
(3)網址
(4)心得
使用wireshark輕易的搜尋出自己的帳號密碼，讓人懷疑網路的安全性，特別是在他人有心竊取個資的情況下。
第二部分:
(1)截圖
修改前：
修改後：