第4天 2021/10/06

心得

今天排定的進度是，要開始製作應用程式，這一堂課我進行了一些部份，像是訂定名字，最後決定網站名稱為sk5sen，主題色為藍綠色。後半節課更新alsoweather的功能，像是增加語音閱讀，漸進式應用程式，還有修正問題。因為下禮拜要段考，所以周間進度停一個禮拜。

決定應用名稱

sk5sen

sk5s 為以前取的名字，代表samko5sam，因為samko5sam有一點太長了，所以縮短成sk5s，sk5s目前還沒有看到很多人取這個名字，所以申請帳號比較不會出現已經有人註的有問題，所租借的網域名稱也就是用sk5s。 因為一開始這個網路應用是設計用來查詢英文單字的，所以取english前兩字en代表英文。

將sk5s及en合起來就是sk5sen(音同 S Ko Sen )

製作logo

這次因為時間較趕，所以logo使用產生器完成，網址：https://emblemmatic.org/markmaker/#/

這個網站只要輸入英文名字，上面就會列出很多自動生成的圖標，將較喜歡的圖標記愛心，電腦會朝你喜歡的logo來產生新的圖，最後就下載圖片及完成。

最終成品：

主題顏色

為了要決定主題顏色，所以這次是使用網路工具：uigradients

到https://uigradients.com/ 後會有一些色板，找到喜歡的色板可以下載圖片。

最終色板：

色板css：

background: #1FA2FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #A6FFCB, #12D8FA, #1FA2FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

alsoweather更新

因為網路問題，所以後來改成進行alsoweather功能更新，下課前完成了Text to Speech功能，這個功能的功用是，點擊Read按鈕，會播放一段語音，

不過這個功能的瀏覽器支援度還不夠高，所以之後可以再加強使用者的體驗。除了語音功能，這次也增加了PWA及錯誤顯示功能，如果發生錯誤會以訊息提醒，PWA則讓網頁可以被瀏覽器安裝，service worker是使用pwabuilder來產生的。還有修正一些小問題。