110 下學期 計畫
Jump to Section
| 計畫名稱 | 網頁技術及網頁應用程式實作 |
|---|---|
| 相關學科/領域 | 科技領域 |
| 對應大學學群 | 資訊學群 |
| 內容說明 | 用bulma、bootstrap css，JavaScript 等來製作 RWD 網頁應用程式，使用 capacitor 來製作手機 App，完成一個完整的開源專案。 |
| 預期成果 | 製作出天氣網頁應用程式，Android 的程式安裝檔，應用程式介紹、使用教學網站，並且讓大家可以下載安裝此軟體。 |
| 週次 | 自學內容 | 學習心得 |
|---|---|---|
| 3 | 建立開發環境（vscode、nodejs、android studio、linux、hugo、git），網路服務帳號註冊，熟悉編輯器及CLI操作，測試電腦開發環境，建立Hugo Site | 今天因為是第一天，所以不確定自主學習上課要做什麼，所以我就沒有帶電腦到學校，第一天的進度改成閱讀有關於UI/UX的書，還有看Hugo的教學影片，希望下一次可以照著預定好的進度繼續執行，不要拖延。 【作品連結網址】 https://self-study.sk5s.cyou/web/day-001/ |
| 4 | html、css、javascript練習，紀錄於Hugo，opensource研究，capacitor、electron、網頁瀏覽器附加元件（chrome）、Bookmarklets製作練習 | 今天要用freecodecamp練習，它是一個免費的平台，上面有很多教學和範例，如果完成一整個課程，應該可以獲得證書之類的證明文件，所以我選擇用它來練習。 【作品連結網址】 https://self-study.sk5s.cyou/web/day-002/ |
| 5 | javascript、nodejs、npm使用練習，試寫簡單網站，紀錄於Hugo，github pages、gitlab pages、heroku、vercel 架設靜態網站並綁定已購買之網域 | 本次學習建立docsify的網站，雖然已比其他方法好上手，但是也還是要花上不少時間，以後安排計畫要再多預留時間。 【作品連結網址】 https://self-study.sk5s.cyou/web/day-003/ |
| 6 | 做出英文單字搜尋網頁應用程式（操作介面：中、英），決定主題色（簡易），Logo繪製（完整），測試程式並上傳至 github pages repository | 製作一個簡單的天氣app，雖然功能不多，但是光是如此也已經花了不少時間，不過最後還是把成品做出來了，並且將網站上傳github。 【作品連結網址】 https://git.io/alsoweather |
| 8 | 單字搜尋程式製作，增加應用程式功能及問題修正，UI/UX、PWA加強 | 因為之前製作天氣app時，有一些非同步程式上的問題，所以這一節課改進行promise、async、await和非同步的文章閱讀，雖然還是沒有完全了解，但是至少有比較清楚。 【作品連結網址】 https://self-study.sk5s.cyou/web/day-005/ |
| 10 | 單字搜尋程式製作，增加應用程式功能及問題修正，將製作好的網頁應用程式改做成capacitor app、electron app、網頁瀏覽器附加元件（chrome），製作Bookmarklets，上傳github release | 有一些功能看似很容易可以完成，在實際操作後會發現比想像中困難。不過一步步，慢慢找到方向，也是會越來越好的。 【作品連結網址】 https://sk5s.cyou/alsoweather/ |
| 11 | 單字搜尋程式問題修正，將製作好的網頁應用程式改做成capacitor app、electron app、網頁瀏覽器附加元件（chrome），製作Bookmarklets，上傳github release | 今天進行英文搜尋應用製作，最後做出了一個簡易的測試，證明此方法可行，之後有時間，可以考慮重新再用比較好維護的javascript框架來重寫。 【作品連結網址】 https://s.sk5s.cyou/duodan |
| 12 | 建立英文單字搜尋應用程式各平台的使用教學網頁（簡易，語言：繁中）或使用教學影片，更新Hugo Site，上傳github pages repository | 用javascript製作短連結，運用找不到網站頁面時會導向404頁面的特性，用簡單的方法來縮短連結，之後還要再測試相容性。 【作品連結網址】 https://git.io/404shortjs |
| 13 | 應用程式使用教學文件更新，改作現有開源android選字搜尋軟體 | 因為今天是第二次期中考(上午考試後的自主學習)，因為明天要考試，所以這一次改成段考複習，這周原本的進度是使用文件撰寫，因不影響後面的計畫，所以就先跳過這個部分。 |
| 15 | 建立fdroid repository，上傳gitlab pages repository | 因為alsoweather持續發現問題，因此再次進行檢視，而且這次還有製作404shortjs，雖然不在計畫內，但是因為在其他專案可以用到，所以先製作。 【作品連結網址】 https://git.io/404shortjs |
| 16 | fdroid、app、hugo、capacitor、electron、github、gitlab之問題解決，更新使用文件網站，建立應用程式介紹主要功能（簡易動畫） | 練習翻譯網路上的開源應用程式或專案。 |
| 18 | fdroid、app、hugo、capacitor、electron、github、gitlab之問題解決，更新使用文件網站 | 製作快找車app，因為功能較簡單，所以可以較快完成，並且這次試著使用react框架，使專案更容易維護。 【作品連結網址】 https://s.sk5s.cyou/parking-go |
| 19 | 測試所有製作的軟體、網頁、軟體庫，opensource研究 | 因為假日要考APCS，而APCS不能用javascript考試，所以這次的自主學習改成python學習。 |