ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得
在我之前研究了 ChatGPT 各種工作流程的輔助應用後，最近我就開始嘗試讓 ChatGPT 教我寫出一個「番茄鐘」加上「待辦清單」的網頁小工具，我沒有做成真正可以在網路上讓大家公開使用的服務，但是自己在本機電腦打開 HTML 檔案，在瀏覽器上使用倒是很順暢。
最後（或目前）寫出來的這個 HTML 小工具具備下面功能：
- 一個番茄鐘倒數計時器，可以自訂時間。
- 番茄鐘會彈出聲音、視窗通知。
- 每次打開會自動更換一張風景照片。
- 每次打開會自動替換一句鼓勵人的話。
- 可以輸入自己今天的待辦清單，可以打勾完成，具備本機儲存功能（下次打開還在）。
- 樣式則是使用我自己喜愛的待辦清單工具 Todoist 的經典風格。
這幾天，我都用這個自己開發（但其實是 ChatGPT 教我）的番茄鐘 HTML 小工具，來做每天的簡單時間管理。
（2023/10/15 更新，現在還可以上傳網站圖片，請 AI 直接寫出類似的程式碼：ChatGPT 圖文混合提問 9 種超能力：程式、教育、學習到行銷應用）
2024 更新，我實驗了一年的 AI 工作流程總整理：2024 我和 ChatGPT AI 工具如何一起工作，提示語、常用案例指南
到底花了我和 ChatGPT 多少時間？
而完成這些功能（當然，我是分段利用零碎時間，每次處理一點），總加起來大概是 4 個小時左右的時間，並且，這是在我只有「想要什麼番茄鐘的概念」，但其實「幾乎不懂網頁程式碼語法」也沒有做過真的網頁工具開發的情況下。
我有仔細追蹤自己每個階段花費的時間，大概情況如下：
- 第一階段完成：10分鐘內
- 完成基本番茄鐘＋待辦清單功能，這時候已經可以用，只是很醜。
- 第二階段完成：一個小時內
- 變成像是 todoist 風格，改成響應式網頁，加上刪除線、本地儲存等功能。
- 第三階段完成：一個小時內
- 加上自動替換的風景圖，修改字體，修改樣式（半透明框），處理 BUG。
- 第四階段改進：一個小時內
- 加上自訂時間功能，改成圓形核取框，調整待辦清單版面，加上網站圖示，處理 BUG。
- 第五階段改進：一個小時內
- 加上自動替換的鼓勵話語、加上音效通知、計時器變色等細節調整，以及微調版面和處理 BUG。
上面說的好像是我處理，但其實上述所有功能開發、問題解決，全部都是我透過跟 ChatGPT 對話，讓 ChatGPT 告訴我怎麼做、怎麼改。
我用口語的中文描述想法， ChatGPT 則給我程式碼去複製貼上。
可見網路上很多人說 ChatGPT 可以幫完全不懂程式碼的人，寫出一個他自己需要的軟體，這還真的是可行的。
下面，不是要教大家怎麼寫出一個番茄鐘＋待辦清單的 HTML 網頁小工具，而是用比較故事性的方式，分享在這個過程中， ChatGPT 發生了哪些事？我又從中獲得什麼學習？裡面也會有些值得參考的使用技巧。
第一階段完成：一個可用的番茄鐘待辦清單
一開始我的想法非常簡單，如果 ChatGPT 真的可以教不會的人也做出一個工具，那我就要來做一個自己常常介紹的「番茄鐘」工具，因為既然我自己會用到，那就算只是本機電腦可以打開的 HTML 網頁檔案，對我來說就足夠了。
於是我就問了 ChatGPT 這個問題：「你可以當一位網頁程式設計專家，但用不懂程式碼也能理解的方式，教我一步一步打造一個網頁上可以顯示的番茄鐘倒數計時小工具嗎？」
其實在 ChatGPT 的提示語上，不一定要太糾結（或是寫得很長），一開始先有具體目標可以開始問就好，後續都可以透過追問一步一步調整，不一定要一次到位。
接下來， ChatGPT 就叫我去下載一個 Notepad++ 之類的編輯軟體，然後建立一個 index.html 的檔案，並且把 ChatGPT 提供給我的 HTML、CSS 和 JavaScript 程式碼分別貼上去。
這邊其實我還沒有什麼概念，就是直接複製貼上，儲存後，一打開這個 HTML 網頁，就是一個可以倒數計時的番茄鐘了。
一開始 ChatGPT 很想作為一個老師好好教我（因為我問得好像希望他好好教我），所以他反問我好幾個問題，要我自己去思考看看怎麼解決，還鼓勵我去試錯看看，但是我真的完全不懂，所以反過來請他：「有辦法一步一步直接教我怎麼做嗎？」
結果 ChatGPT 可能想說這個人真的不會，所以後面的回答就不再這樣問題提點，而是直接給出程式碼，但會說明為什麼這樣做的原因，我倒是也會認真理解一下。但是第一時間，先把程式碼複製貼上，試試看再說。
於是，就在這樣複製貼上的過程，不到 10 分鐘，一個可以運作的番茄鐘，和一個可以添加待辦清單的功能就誕生了。
第二階段完成：一個比較好看的番茄鐘＋待辦清單
其實一開始我想說這樣就好了，雖然樣子不怎麼好看，但反正我自己用的工具，不用在意太多。但是後來給老婆看，老婆覺得真的太醜了。
於是我決定回去跟 ChatGPT 問問看怎麼修改，可是前一次的對話紀錄不見了，怎麼辦呢？其實也沒關係，我就開一個新對話，但是把上一次完成的程式碼都貼上來，請他根據這個程式碼，繼續教我怎麼改進。
其實這段時間的測試，一個最好用的方法，就是把我們的原始材料丟給 ChatGPT 請他分析，無論是程式碼還是文案，都會有很好的效果：「活用你的第二大腦筆記範本，協作 ChatGPT 生成好內容的 6 個案例」。
結果 ChatGPT 不看我之前的程式碼還好，一看就馬上提供我幾個建議，其中一個果然就是太醜了，另外就是發現我還不能儲存待辦清單紀錄等等。接下來我就根據 ChatGPT 給的建議，排出一個改進計畫，開始一步一步改進。
- 「你是一位程式碼專家，但我是一位完全不懂程式碼的人，請根據我前面提供的程式碼，教我如何修正成響應式設計？」（就是會根據視窗大小自動排版與縮放網頁）
- 「你真的做得很棒，不愧是網頁程式專家，接下來我希望美化一下我的網頁，你可以用漂亮的設計來美化一下這個工具嗎（我希望他看起來像是todoist)，可以參考你之前有提到的建議：使用 CSS 進一步美化網頁的樣式，例如為待辦清單項目和按鈕添加邊框、背景顏色、間距等。您還可以考慮使用網格或 Flexbox 布局使元素排列更整齊。」
我告訴 ChatGPT ，我想做得像是 Todoist 那樣的風格！而且當我不知道怎麼說時，我還複製了前面 ChatGPT 給我的版面美化建議給他自己看。
於是，我的這個番茄鐘網頁工具就被改成下面這樣，真的有 Todoist 風格。
不過這時候野心慢慢變大，前面 ChatGPT 有告訴我應該要加上「本地儲存」，這樣下次打開，才會記得上次沒有完成的待辦事項。於是我同樣問 ChatGPT ：「我想添加本地儲存功能。」
然後 ChatGPT 一樣給我程式碼，要我貼在某些地方，但是我第一次嘗試沒有成功，可能沒有正確理解 ChatGPT 所說的意思，結果出錯了，但我也不知道怎麼改？怎麼辦呢？
後來我這樣問 ChatGPT ：「結果沒有成功，請幫我看看下面這段 script 代碼哪裡出錯？」然後很不負責任地把整段 Javascript 代碼都貼上去。
而 ChatGPT 很快在一兩秒鐘之後就告訴我哪裡弄錯，並且直接告訴我怎麼改，於是我的番茄鐘待辦清單有了本地儲存功能了。
第三階段完成：替換字體與加上自動更換風景圖
本來想說這樣就夠了，也用了幾天，但有一天忽然想到，這種工具不是應該配一個沉澱心靈的風景圖，幫助自己更專注嗎？而且 ChatGPT 之前還建議我用 Google 字體會更好看？
於是就開始了我第三階段的問答。
這一次我有記得保留對話串，所以回到之前討論中繼續問就好，我追問他：「你提供的樣式我非常喜歡，效果很好，你有提到可以考慮使用 Google Fonts 為網頁添加自定義字體，這樣怎麼使用呢？如果是繁體中文建議用什麼字體？」
結果 ChatGPT 給了我一個非常具體的步驟，讓從來沒有這樣試過的我，也能第一次就成功替換網路字體。
於是 ChatGPT 給了我一段怎麼串接 Unsplash API 的語法，告訴我要貼在哪裡。並且，ChatGPT 還很貼心的在後面補上如何讓風景照可以滿版的語法，我都照著複製貼上無誤。
更棒的是， ChatGPT 自己注意到我有文字、計時器在風景圖上，所以他還自動提供給我加上半透明框框的語法，避免風景圖上的文字看不清楚。
當然，這個過程中，我確實也有比較吹毛求疵的去改一下字體大小、調整一下對齊位置，不過這些修改，也都是透過跟 ChatGPT 問答來完成的，例如問他：「效果不錯，不過版面有點跑掉，計時器、按鈕、h1 h2 標題變成會擠在同一行，如何讓他們分段顯示？ 以下是我的程式碼，幫我看看如何修改」（然後又把整段 CSS 程式碼貼上請 ChatGPT 分析）
第四階段完成：加上自訂時間，與圓形勾選功能
其實練習到這個階段，大概花費的時間兩小時多一點點，雖然我也大多時候是複製貼上，不過確實開始對一個網頁工具的 HTML、 CSS、 JavaScript 結構有了一些概念了，也開始了解某些標籤是怎麼對應，某些功能語法大概是什麼意思。
這一定還差專業的設計師很遠，可是這個理解，就幫助我接下來可以跟 ChatGPT 進行一些更深入的對話修改。
例如接下來我想要加入「自訂時間」的功能，我就問 ChatGPT：「目前的樣式非常好看，你真的是專業的網頁程式設計師，接下來，我想讓番茄鐘計時器加上自訂時間長度的功能，可以如何修改？」
ChatGPT 給了我一段程式碼，也告訴我要貼上哪裡，我貼上去也成功，但是覺得效果不太滿意，於是我就開始跟 ChatGPT 展開了大概 30 分鐘左右的來回對話，東改改、西改改，有時候改到不知道變成什麼，就把整段程式碼貼給 ChatGPT 請他看看哪裡出錯。
最後結合了一些前面練習過程，我新增的理解，我自己手動微調，把自訂時間改成放在中間的按鈕狀態。
原本我的待辦清單只是點一下會有一條灰底刪除線而已，但想說既然都改到這個階段了，不出現一個圓形打勾的核取方塊實在不滿意。
於是我就開始問 ChatGPT 怎麼改，下面是我自己筆記的問題清單，可以看到真的來回很多次，才讓 ChatGPT 提出了一個讓我滿意的修改建議。
第五階段改進：進一步美化番茄鐘與待辦清單
在第四階段完成後，其實我就開始正常使用這個自製的番茄鐘小工具，也沒什麼問題。只是有時候用一用，就會發現或想到有個小地方可以改進，於是就進入 ChatGPT 進續詢問，請他幫我改造。例如有一天我發現少了網站的 icon 圖示，在瀏覽器分頁上不明顯，於是就加上一個番茄的網站圖示 icon。
於是我就繼續追問 ChatGPT （在同一個對話串），要怎麼把原本的今日待辦清單欄位，換成自動輪播的名言佳句呢？
這時候就是愛玩文字遊戲的 ChatGPT 最擅長的了，我直接請他根據某個字數、風格標準，列出 50 個來自書籍、鼓勵人心的經典名言。
又用了一陣子，我忽然覺得少了「通知」，這樣每次番茄鐘倒數計時到了，我沒辦法即時知道，於是我就問 ChatGPT 怎麼加上通知？一開始我想直接授權系統通知，後來發現有難度，於是我就改問他：「或許我們可以換個方式，如果不要系統通知，我有什麼辦法可以讓自己知道番茄鐘的倒數計時結束了？」
是的，我沒有用什麼專業術語，就是用「我想要的效果」來問 ChatGPT 。結果，ChatGPT 反而提供給我很多個變通方案。
後來這些方案我全部都用上，於是倒數計時到了，分頁標題會改變、會發出音效、會有瀏覽器彈出視窗。
- 讓倒數計時變色
- 結束後，自動恢復25分鐘
- 讓名言佳句顯示更清楚
- 讓所有按鈕對齊
- 等等
於是完成了現在這個版本。
但如果只是自己使用，如果自己缺乏某種小工具，要解決某個技術問題，問問看 ChatGPT ，即使我一開始沒有程式碼技術基礎（不過確實了解一些基本概念），也能在幾分鐘到幾個小時內，完成自己的工具打造。
並且，這個過程我也確實又更進一步了解這些網頁程式碼的原理與更多技巧。
並且，這個過程我也確實又更進一步了解這些網頁程式碼的原理與更多技巧。
或許我們可以這樣思考，可能是程式碼的學習，可能是英文語言的學習， ChatGPT 其實提供了一個很簡單的「做中學」工具，他告訴我們怎麼做，也會解析原理，做的過程有問題還可以問他，於是我們就是一邊做，一邊加速學習。
下面是這次利用 ChatGPT 寫一個網頁小工具，我體驗到的一些心得總結：
- ChatGPT 會給我程式碼直接複製貼上，所以完全不懂，也有很大機會做出成果。
- 可以教我一步一步操作，會解釋操作的原因，幫助我理解。
- 可以直接告訴我目前程式碼有哪些改進方向。
- 可以解析並指出我的程式碼中哪裡有錯誤，哪裡要添加。
- 在對話串中，只要前面改過的程式碼，後面都會記得，並提出正確修改。
- 可以教我去哪邊獲取需要的資源或連結（有時候給的連結是錯的，但方向是對的，我可以自己搜尋就好）
- 例如設定 Google 字體
- 例如設定 unsplash 圖片
- 會自動加上一些他自己覺得更好用、更好看的修改。
- （自動在要用風景圖時，加上半透明效果）
- （自動在要使用圓形核取框框時，加上紅底效果）
之後如果我又發現生活中、工作上需要一個什麼小工具，有了這次經驗，我就可以利用 ChatGPT 在最短時間再次快速打造一個，然後一邊使用一邊打磨！
有興趣的朋友還可以進一步研究
- ChatGPT 關鍵提示語技巧
- 2024 更新，我實驗了一年的 AI 工作流程總整理：2024 我和 ChatGPT AI 工具如何一起工作，提示語、常用案例指南
- ChatGPT 提示語說明書：通用三層結構與 9 個技巧提高 AI 生產力
- ChatGPT 五種助理教練提示語分享：目標規劃、寫作、學習到教學
- 一般人最好上手且有效的 ChatGPT 提問法，以生成英文練習題為例
- 利用 ChatGPT 提示語突破字數限制教學，深入分析摘要2萬字資料
- 讓 ChatGPT 學會專業邏輯，成為自動完成報告文案草稿的真正助手
- ChatGPT 特殊功能
- ChatGPT 自動串聯多功能案例：上網＋圖像＋文件組合生成技巧
- ChatGPT GPTs 聊天機器人教學：實測防彈筆記助手到三國志 RPG
- ChatGPT Code Interpreter 八種應用：分析 Excel、製作圖表與動畫
- ChatGPT 影片摘要外掛與提示語：自動生成一小時影片重點時間戳
- ChatGPT Shared Links 指南，不只是分享對話的 7 個工作應用案例
- ChatGPT Custom instructions 實例教學，如何客製化我的 AI 助理
- 利用 ChatGPT App 寫語音筆記，提升輸出效率的秘密武器
- ChatGPT 圖文混合提問 9 種超能力：程式、教育、學習到行銷應用
- 用 ChatGPT 語音對話，設計擬真英文會話練習 App ，提示語分享
- ChatGPT 與 AI 工具的第二大腦與學習應用
- 用 ChatGPT 升級學習筆記整理技巧教學，如何有效輔助摘要文章？
- 活用你的第二大腦筆記範本，協作 ChatGPT 生成好內容的 6 個案例
- ChatDOC 中英文獻 PDF AI 摘要問答工具，可一次分析多份論文
- Elicit 與 Consensus： AI 論文搜尋引擎＋摘要讓專業知識觸手可及
- 父母如何用 ChatGPT 設計孩子的英文單字考卷、會話測驗學習單？
- Eduaide 免費 AI 課程助教幫老師設計教學、測驗到行政，支援中文
- 把 Claude AI 當作免費強大的PDF 文件、論文文獻摘要研究工具
- ChatGPT 與 AI 工具的工作效率應用
- 讓 ChatGPT 教你如何利用 ChatGPT ，快速問對問題解決工作痛點
- ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得
- 用 ChatGPT 快速將會議語音逐字稿轉成完美文章表格的 5 個技巧
- Gamma 用 AI 幫你設計簡報、網頁，瞬間完成戲劇化版面內容
- AI 繪圖工具應用
- ChatGPT DALL-E 3 的7個特殊 AI 繪圖應用教學，勝過 Midjourney
- 我如何訓練 ChatGPT 撰寫 Midjourney 提示語？AI 繪圖四個階段
- Recraft 免費 AI 繪圖工具快速生成獨特 ICON 圖示與向量插圖教學
- Bing AI 大升級，免費支援 GPT-4 與 DALL-E 3 AI 繪圖，實測比較
- Microsoft Designer 免費試用中， AI 設計社群圖片、海報卡片幫手
- AI 相關生產力工具
- Podcast 節目：「高效人生商學院｜EP.0151｜兩人對談｜EP.0042｜ChatGPT 帶來的工作流程改變？我們的應用方式」。
大家好，我是電腦玩物站長 Esor ，我在 2023 年推出的「個人數位生產力」線上課程中，從如何寫出有效的防彈筆記出發，觸及工作、生活與自我管理問題，解析如何打造一套執行起來更有效率，也更有成就感的生產力系統，歡迎參考（可使用電腦玩物老讀者折扣碼 ESOR500 ，獲得 500 元折價喔！）。
（歡迎社群分享。但全文轉載請來信詢問，禁止修改上述內文，禁止商業使用，並且必須註明來自電腦玩物原創作者 esor huang 異塵行者，及附上原文連結：ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得）
請問Esor站長: 我曾經也想做類似的功能，但chatgpt回答得太長而導致中斷
回覆刪除他回答的程式碼就只產生出一半來，這時候要怎麼進行銜接呢?
尤其是到後面程式碼和風格越來越多的時候，問題一定會越來越嚴重
我通常有兩種做法：
刪除一個就是直接說：「繼續」，就有一定機率可以接續下去
另一個就是分段問，把問題拆成不同小問題來解決
可以分享你製成品的html code嗎
刪除厲害！
回覆刪除請問是用ChatGPT3.5還是4 實作？
回覆刪除用 GPT-4
刪除這篇心得令我重拾信心。我曾想製作個人使用的小程式，也有買書來研究和上網查詢，但因為找不到以及不知道想到效果的程式碼不斷受挫而最終放棄。您的心得和步驟細節著實開了盞明燈，教會我該如何與使用chatgpt並溝通以達成想要的效果，現在我有信心親手打造出自己想要的軟體了。
回覆刪除很高興這樣的心得分享對您有幫助
刪除我可以完全複製您的蕃茄鐘從頭到尾的操作步驟實際操作一遍嗎?
回覆刪除「完全」的話，如我文章所說，我是分成好幾次對話來完成的，中間也有問錯或重問，所以直接分享我從頭到尾的問答步驟，可能不切實際，但是您可以在 ChatGPT 這樣開始提問：
刪除你可以當一位網頁程式設計專家，但用不懂程式碼也能理解的方式，教我一步一步打造一個網頁上可以顯示的番茄鐘倒數計時小工具嗎？
接下來可以直接給我具體的程式碼，帶我建立這個網頁番茄鐘工具嗎？
你幫我分析看看還可以往哪些方向改進？