110 學年度自主學習
JavaScript 手機 App 自學之路：學習記錄與心得
110 學年度自主學習 新竹高中 柯亮宇
專案網頁：🌐 https://portfolio.sk5s.cyou/self-study/
簡述
這篇報告是關於我自學Javascript並開發手機App，計畫目標是從0開始創造一款日期倒數應用程式，過程中除了學習到程式語言，也學到了設計軟體的操作，經過一年多的研究，最後成功的做出了5個應用程式。
⬆️ 自製 Android 手機 App：Countdate，已上架於 Play Store 。Github
⬆️ 自製 Android 手機 App：alsoweather，已上架於 Play Store 。Github
目次
計畫說明
⬆️ 計畫執行說明圖
報告內容
這篇報告是關於我如何自學使用 Javascript、Ionic framework 和 capacitorjs 開發手機 App 的過程。因為現在開發手機 App 的成本降低，且想要製作出一款真正適合自己的 App，所以開始了這個自主學習計畫，共長達 30 週，目標是創造一款實用的手機 App，並且透過實作來了解手機應用程式的開發流程，從基本的 Javascript 語法開始，再學習 React、capacitorjs，最後使用 Ionic framework 完成本次計畫的重點：製作日期倒數 App。
計畫執行
雖然過程中經常遇到問題和錯誤，需要耗費很多時間和精力來解決，而且有時候沒有辦法如預期一樣呈現作品，但我相信每一次學習和實踐都是有價值的。不管是尋找學習資源，還是計劃撰寫和實行，這個計畫讓我更深入了解並熟悉手機應用程式開發的基礎知識，我希望未來有機會可以再創造一些更加實用的手機應用程式。
子計畫及預期成果
因為自主學習課程一個學期只有 13 堂，整個計畫無法完成，所以將大計畫分為三大部分。
| 上學期 | 下學期 | 暑假 | |
|---|---|---|---|
| 名稱 | Vanilla JavaScript 練習 | 網頁技術及網頁應用程式實作 | 手機應用程式實作： Countdate |
| 預期成果 | Javascript 30 練習成果網頁 | 自製網頁應用程式 | Countdate |
執行過程
大綱
1. 學習內容決定
國中時我閱讀圖書館中關於網頁設計的書，學習並且實際練習了 HTML5 網頁的基礎使用，並且對網頁相關技術開始進行更深入的研究。後來因為自學 RWD 網頁設計，也知道了 Javascript 這個程式語言，慢慢的我發現 Javascript 的應用不只侷限於網頁前端，有 Node.js 的幫忙就可以使用 Javascript 來寫出後端程式，也發現了 Javascript 的多元應用以及其豐富的網路資源，所以決定要學習 Javascript。
把 Javascript 和後來學的 Python 做一下比較：
| 特性 | Javascript | Python |
|---|---|---|
| 類型 | 動態型別（可以用 Typescript 來添加型別系統） | 動態型別 |
| 設計目的 | 網頁開發 | 通用 |
| 語言風格 | 函數式 | 物件導向 |
| 常用領域 | 網頁開發、前端開發 | 資料科學、機器學習 |
| 開發難易度 | 容易 | 容易 |
| 運行環境 | 網頁瀏覽器、Node.js、Deno | 通用 |
| 跨平台支援 | 是 | 是 |
| 主要缺點 | 執行效率目前較低 | 小規模開發時比較繁瑣 |
| 受歡迎程度 | 高（Stackoverflow 最受歡迎科技調查排名第一） 2021 survey |
高 |
2. 學習計畫撰寫
計畫撰寫時進度的安排主要是依據以前的經驗，去衡量一次課程可以完成多少內容，再依照主題來分類，使用漸進的進度來學習這個技術。
3. 尋找學習資源
因為 Javascript 是現在很受歡迎的程式語言之一，所以除了看實體書之外，我也使用搜尋引擎來搜尋 Javascript 教學影片，以及教學文章，後來就有找到像是 Javascript 30 這樣的課程，所以就決定要跟著此課程學習。為了要完成一個 App ，LOGO 的部份也需要自行製作，所以我也學習了 Canva 這個軟體，來做出一些 Icon 設計。
學習成果
實作成果
Github
手機 App
| Countdate | alsoweather | |
|---|---|---|
 |
 |
|
| 主要功用說明 | 需要段考學測倒數？用 Countdate 就可以簡單的計算剩下幾天。 | 有時候想要馬上知道當下某地的天氣狀況，這時就可以用 Alsoweather ，取用氣象局的氣象預報資料，以簡易的方式呈現，可以快速取得有用的資料。 |
| 下載連結 | Play Store。Github | Play Store。Github |
| 詳細使用教學 | https://s.sk5s.cyou/usj | https://s.sk5s.cyou/gmm |
| 主要使用技術 | Ionic React | Vanilla Javascript + HTML + Bulma + Capacitorjs |
網頁應用程式練習作品
| Duodan Web | Parking Go Web | Chineseoo Web | |
|---|---|---|---|
 |
 |
 |
|
| 主要功用說明 | 使用者可以快速的搜尋到不同的英文字典網站，因為不同網站的字詞解釋有時不同，有時這個比較易懂，有時那個比較清楚等等，因此透過 Duodan 就不用為了要看到不同資訊而在不同網站間跳來跳去。 | 有時候出去大賣場或者是出去玩，如果開車或騎車去就必須要停車，但有時候會忘記車停在哪裡，透過儲存一張車子的照片，如果真的忘記了可以有比較多的線索可以回想。 | 日常生活中，常常會遇到不會的中文英文字詞，如果把這些字詞隨手記下，不久就可以累積很多單字，這時複習字的寫法，成語的意思，就會更有效果。 |
| 網頁連結 | https://duodan.surge.sh/ | https://parking-go.surge.sh/ | https://chineseoo.surge.sh/ |
| 詳細使用教學 | https://s.sk5s.cyou/bqg | https://s.sk5s.cyou/mlt | https://s.sk5s.cyou/bbo |
| 主要使用技術 | Vanilla Javascript + HTML + Bootstrap + Lottie | React + Bootstrap | Svelte + Bootstrap |
Vanilla Javascript 練習
https://sk5s.cyou/JavaScript30/
| 主題 | 線上展示 |
|---|---|
| 01 - JavaScript Drum Kit | https://sk5s.cyou/JavaScript30/01-JavaScript-Drum-Kit/ |
| 02 - JS and CSS Clock | https://sk5s.cyou/JavaScript30/02-JS-and-CSS-Clock/ |
| 03 - CSS Variables | https://sk5s.cyou/JavaScript30/03-CSS-Variables/ |
| 04 - Array Cardio Day 1 | https://sk5s.cyou/JavaScript30/04-Array-Cardio-Day-1/ |
| 05 - Flex Panel Gallery | https://sk5s.cyou/JavaScript30/05-Flex-Panel-Gallery/ |
| 06 - Type Ahead | https://sk5s.cyou/JavaScript30/06-Type-Ahead/ |
| 07 - Array Cardio Day 2 | https://sk5s.cyou/JavaScript30/07-Array-Cardio-Day-2/ |
| 08 - Fun with HTML5 Canvas | https://sk5s.cyou/JavaScript30/08-Fun-with-HTML5-Canvas/ |
成果展示影片
🔗 https://portfolio.sk5s.cyou/self-study/
心得
Vanilla JavaScript 練習
剛開始想要做這個主題，是因為 Javascript 可以使用的範圍非常的廣，凡是網頁，伺服器，前後端的應用，全部都有 Javascript 的蹤影，可以見得 Javascript 應用之廣泛。以前實際操作練習的過程中，會發現有時候發生問題並花最多的時間的部分並不是程式邏輯，而是使用的套件有一些問題，或者是前端美化上的問題，所以這一學期就決定只專注於 Vanilla Javascript 的練習，所以不需要去擔心 CSS 或 framework，單除的學習 Javascript，而且學習 Vanilla Javascript 能讓我更了解一些原始的 API 並實際操作。 本學期根據網路課程「Javascript 30」共完成了八個 Javascript 主題練習。 經過了這一次的 Javascript 基礎課程，我學到了一些原始的 Javascript 操作方法，以後如果是要建立一些基本的網站，就沒有一定要使用 jQuery、React 或 Svelte 等工具，可以使網頁得到更快的執行速度。之後也可以運用 Javascript 來製作一些小工具，或者是進行人工智慧領域的開發。
網頁技術及網頁應用程式實作
剛開始想要做這個主題，是因為在圖書館有看到相關書籍，而且在日常生活中，幾乎每天都會用到網頁應用程式，像是 Google 的服務或是 Office ，因為網站方便免安裝的特性，受很多使用者歡迎，現在有很多正在發展中的相關項目，甚至已經有很多網頁瀏覽器還加進了 PWA 的功能，使網頁應用可以像一般的電腦、手機應用程式一樣，可以安裝或離線使用。我覺得自己如果可以製作出自製的網頁應用，對網頁的了解一定會增加不少，所以就決定要用「網頁應用程式」作為主題。 這次的自主學習成功做出了一個簡易的天氣應用程式，還有 Javascript 短連結(三個版本)，停車快找網頁應用，及簡易英文單字快速搜尋網頁應用。在製作的過程中，會發現完成一個網頁有很多我不知道的細節，這時候就要更深入的研究其他主題，才有辦法完成整個專案，雖然這次的作品和原先計劃的不太一樣，不過在過程中有成功做出一些練習的網頁應用，也算是不錯的嘗試，像是天氣網頁、單字本網頁、壓縮照片的練習，就不在原本的計畫內。
附錄一：每週計畫、學習紀錄與心得
子計畫一：Vanilla JavaScript 練習
| 計畫名稱 | Vanilla JavaScript 練習 |
|---|---|
| 相關學科/領域 | 科技領域 |
| 對應大學學群 | 資訊學群 |
| 內容說明 | 學習主題是 Vanilla JavaScript 的練習，跟著網路上的 30 Day Vanilla JS Challenge (https://s.sk5s.cyou/js30) 做練習，它是由加拿大的全端工程師Wes Bos建立的一系列課程，主旨在不使用任何外部框架與函式庫來完成30個純JavaScript的練習，本次預計做前8個。 |
| 預期成果 | 8個 30 Day Vanilla JS Challenge 中的專案網站，及製作紀錄。 |
| 週次 | 自學內容 | 學習心得 |
|---|---|---|
| 2 | - 班上學習計劃填寫 | 計畫修正，於第一週計畫將開始時，先進行計畫可行性評估，修改計畫至可以執行。 |
| 3 | 01 - JavaScript Drum Kit | 這周完成了第一堂課、第二堂課和第三堂課。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-01/ |
| 4 | 02 - JS and CSS Clock | 今日完成了第四堂課，因為第四堂課的內容多出了一些新的東西，所以用了較多的時間。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-02/ |
| 5 | 03 - CSS Variables | 今日完成第五堂課。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-03/ |
| 6 | 01~03改進及緩衝、心得撰寫 | 前三個練習作業是鼓組、指針時鐘、Javascript 操縱 css 變數，雖然比較簡單，但都是很重要的 Javascript 功能運用。這些看似簡單的內容其實也出現不少問題，不過主要是 CSS 問題。 |
| 8 | 04 - Array Cardio Day 1、07 - Array Cardio Day 2 | 今日完成第七堂課和第八堂課。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-04/ |
| 10 | 05 - Flex Panel Gallery | 今日完成第六堂課。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-05/ |
| 11 | 06 - Type Ahead | Svelte練習，雖然和這次的主題好像沒什麼關係，不過也能練習Javascript。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-06/ |
| 13 | 彈性調整、心得撰寫 | 雖然按照原來的課程，第四課和第七課的練習在觀看成果時是使用者需要手動打開瀏覽器 console 的設計，但是為了能更簡易的關看輸出內容，後來花了一些時間找到了可以直接把輸出內容顯示在畫面的方法。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-07/ |
| 14 | 08 - Fun with HTML5 Canvas | 製作所有練習的主頁選單，插入介紹影片。 【作品連結網址】 https://self-study.sk5s.cyou/vanilla-js/day-08/ |
| 15 | 04~08改進及緩衝、心得撰寫 | 為了能讓使用者可以快速的在不同的課次練習間切換，所以本週製作一個統一的導覽列。 |
| 17 | 圖文處理、心得撰寫 | 製作介紹用圖文。 |
| 20 | - 期末考週 | 簡述填寫，因為下星期為學校期末考，所以暫停一週，就只執行心得填寫。 |
子計畫二：網頁技術及網頁應用程式實作
| 計畫名稱 | 網頁技術及網頁應用程式實作 |
|---|---|
| 相關學科/領域 | 科技領域 |
| 對應大學學群 | 資訊學群 |
| 內容說明 | 用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學習。 |