ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具,實測心得



ChatGPT 的各種利用中,輔助寫程式碼一直是很多人分享的應用案例,也看到有朋友說可以在完全不懂程式碼的情況下,讓 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 給我的版面美化建議給他自己看。




結果 ChatGPT 似乎真的知道 Todoist 的風格是什麼,我沒有給他任何顏色或圖案的建議,甚至我都沒有告訴他「完成的事項要變成灰底」,並且我在這個階段也還沒有真正理解那些程式碼的意思,但就是依照 ChatGPT 的說明,不斷把他提供的程式碼複製貼上到他指定的地方。

於是,我的這個番茄鐘網頁工具就被改成下面這樣,真的有 Todoist 風格。




到了這個階段,在版面上無論是我告訴 ChatGPT 想要達到的效果,或是我沒有告訴他但是 ChatGPT 自己幫我加上的效果,我都很滿意(因為只是我自己要用)。

不過這時候野心慢慢變大,前面 ChatGPT 有告訴我應該要加上「本地儲存」,這樣下次打開,才會記得上次沒有完成的待辦事項。於是我同樣問 ChatGPT :「我想添加本地儲存功能。
然後 ChatGPT 一樣給我程式碼,要我貼在某些地方,但是我第一次嘗試沒有成功,可能沒有正確理解 ChatGPT 所說的意思,結果出錯了,但我也不知道怎麼改?怎麼辦呢?

後來我這樣問 ChatGPT :「結果沒有成功,請幫我看看下面這段 script 代碼哪裡出錯?」然後很不負責任地把整段 Javascript 代碼都貼上去。

而 ChatGPT 很快在一兩秒鐘之後就告訴我哪裡弄錯,並且直接告訴我怎麼改,於是我的番茄鐘待辦清單有了本地儲存功能了。




第三階段完成:替換字體與加上自動更換風景圖

本來想說這樣就夠了,也用了幾天,但有一天忽然想到,這種工具不是應該配一個沉澱心靈的風景圖,幫助自己更專注嗎?而且 ChatGPT 之前還建議我用 Google 字體會更好看?

於是就開始了我第三階段的問答。

這一次我有記得保留對話串,所以回到之前討論中繼續問就好,我追問他:「你提供的樣式我非常喜歡,效果很好,你有提到可以考慮使用 Google Fonts 為網頁添加自定義字體,這樣怎麼使用呢?如果是繁體中文建議用什麼字體?

結果 ChatGPT 給了我一個非常具體的步驟,讓從來沒有這樣試過的我,也能第一次就成功替換網路字體。




換完字體後,我決定要來加入自動替換的風景圖,我這樣問 ChatGPT ,而且問法是完全沒有技術性的:你做得實在太棒了,接下來我想試試看,每次打開,都會在網頁背景中載入一張 unsplash 的大自然風景照片。

於是 ChatGPT 給了我一段怎麼串接 Unsplash API 的語法,告訴我要貼在哪裡。並且,ChatGPT 還很貼心的在後面補上如何讓風景照可以滿版的語法,我都照著複製貼上無誤。

更棒的是, ChatGPT 自己注意到我有文字、計時器在風景圖上,所以他還自動提供給我加上半透明框的語法,避免風景圖上的文字看不清楚




於是到了第三階段,我的番茄鐘待辦清單工具變成一個全新的樣子。

當然,這個過程中,我確實也有比較吹毛求疵的去改一下字體大小、調整一下對齊位置,不過這些修改,也都是透過跟 ChatGPT 問答來完成的,例如問他:「效果不錯,不過版面有點跑掉,計時器、按鈕、h1 h2 標題變成會擠在同一行,如何讓他們分段顯示? 以下是我的程式碼,幫我看看如何修改」(然後又把整段 CSS 程式碼貼上請 ChatGPT 分析) 





第四階段完成:加上自訂時間,與圓形勾選功能

其實練習到這個階段,大概花費的時間兩小時多一點點,雖然我也大多時候是複製貼上,不過確實開始對一個網頁工具的 HTML、 CSS、 JavaScript 結構有了一些概念了,也開始了解某些標籤是怎麼對應,某些功能語法大概是什麼意思。

這一定還差專業的設計師很遠,可是這個理解,就幫助我接下來可以跟 ChatGPT 進行一些更深入的對話修改。

例如接下來我想要加入「自訂時間」的功能,我就問 ChatGPT:「目前的樣式非常好看,你真的是專業的網頁程式設計師,接下來,我想讓番茄鐘計時器加上自訂時間長度的功能,可以如何修改?

ChatGPT 給了我一段程式碼,也告訴我要貼上哪裡,我貼上去也成功,但是覺得效果不太滿意,於是我就開始跟 ChatGPT 展開了大概 30 分鐘左右的來回對話,東改改、西改改,有時候改到不知道變成什麼,就把整段程式碼貼給 ChatGPT 請他看看哪裡出錯。

最後結合了一些前面練習過程,我新增的理解,我自己手動微調,把自訂時間改成放在中間的按鈕狀態。




第四個階段的另外 30 分鐘,則是貢獻給:「把待辦清單改成圓形核取框。」

原本我的待辦清單只是點一下會有一條灰底刪除線而已,但想說既然都改到這個階段了,不出現一個圓形打勾的核取方塊實在不滿意。

於是我就開始問 ChatGPT 怎麼改,下面是我自己筆記的問題清單,可以看到真的來回很多次,才讓 ChatGPT 提出了一個讓我滿意的修改建議。




你可能會想說,這樣改來改去,會不會我們根本看不懂 ChatGPT 要我們改哪裡呢?其實不會,仔細看下面這張圖, ChatGPT 在提供修改程式碼時,甚至會註明要新增、刪除、修改的是哪一個部分,只要仔細看,就不會弄亂(弄亂也可以丟回去給 ChatGPT 請他重新分析)。





第五階段改進:進一步美化番茄鐘與待辦清單

在第四階段完成後,其實我就開始正常使用這個自製的番茄鐘小工具,也沒什麼問題。只是有時候用一用,就會發現或想到有個小地方可以改進,於是就進入 ChatGPT 進續詢問,請他幫我改造。

例如有一天我發現少了網站的 icon 圖示,在瀏覽器分頁上不明顯,於是就加上一個番茄的網站圖示 icon。




又有一天,我覺得可以在待辦清單上加上一句鼓勵自己的話,並且每次開啟網頁都會自動更換。

於是我就繼續追問 ChatGPT (在同一個對話串),要怎麼把原本的今日待辦清單欄位,換成自動輪播的名言佳句呢?

這時候就是愛玩文字遊戲的 ChatGPT 最擅長的了,我直接請他根據某個字數、風格標準,列出 50 個來自書籍、鼓勵人心的經典名言。




於是我的番茄鐘每次打開,都會出現一句鼓勵人的話了。




又用了一陣子,我忽然覺得少了「通知」,這樣每次番茄鐘倒數計時到了,我沒辦法即時知道,於是我就問 ChatGPT 怎麼加上通知?一開始我想直接授權系統通知,後來發現有難度,於是我就改問他:「或許我們可以換個方式,如果不要系統通知,我有什麼辦法可以讓自己知道番茄鐘的倒數計時結束了?

是的,我沒有用什麼專業術語,就是用「我想要的效果」來問 ChatGPT 。結果,ChatGPT 反而提供給我很多個變通方案。

後來這些方案我全部都用上,於是倒數計時到了,分頁標題會改變、會發出音效、會有瀏覽器彈出視窗。





後來我也偶爾做一些改進,每次改進到 ChatGPT 問一下,獲得答案後改進去原本的 HTML 程式碼,大概都是 3 分鐘內可以解決,例如像是:

  • 讓倒數計時變色
  • 結束後,自動恢復25分鐘
  • 讓名言佳句顯示更清楚
  • 讓所有按鈕對齊
  • 等等

於是完成了現在這個版本。




我用得很滿意,還把他加入瀏覽器書籤。





當然,這樣的工具可能要變成產品,或是公開分享的軟體,還是要經過專業的程式設計師打磨,或者起碼要部屬到網站、打包成擴充套件等等,也還需要再一番琢磨(其實我也有請 ChatGPT 教我打包成 Chrome 套件的方式,也有初步成功)。

但如果只是自己使用,如果自己缺乏某種小工具,要解決某個技術問題,問問看 ChatGPT ,即使我一開始沒有程式碼技術基礎(不過確實了解一些基本概念),也能在幾分鐘到幾個小時內,完成自己的工具打造

並且,這個過程我也確實又更進一步了解這些網頁程式碼的原理與更多技巧。

或許我們可以這樣思考,可能是程式碼的學習,可能是英文語言的學習, ChatGPT 其實提供了一個很簡單的「做中學」工具,他告訴我們怎麼做,也會解析原理,做的過程有問題還可以問他,於是我們就是一邊做,一邊加速學習。

下面是這次利用 ChatGPT 寫一個網頁小工具,我體驗到的一些心得總結:

  • ChatGPT 會給我程式碼直接複製貼上,所以完全不懂,也有很大機會做出成果。
  • 可以教我一步一步操作,會解釋操作的原因,幫助我理解。
  • 可以直接告訴我目前程式碼有哪些改進方向。
  • 可以解析並指出我的程式碼中哪裡有錯誤,哪裡要添加。
  • 在對話串中,只要前面改過的程式碼,後面都會記得,並提出正確修改。
  • 可以教我去哪邊獲取需要的資源或連結(有時候給的連結是錯的,但方向是對的,我可以自己搜尋就好)
    • 例如設定 Google 字體
    • 例如設定 unsplash 圖片
  • 會自動加上一些他自己覺得更好用、更好看的修改。
    • (自動在要用風景圖時,加上半透明效果)
    • (自動在要使用圓形核取框框時,加上紅底效果)

之後如果我又發現生活中、工作上需要一個什麼小工具,有了這次經驗,我就可以利用 ChatGPT 在最短時間再次快速打造一個,然後一邊使用一邊打磨!

有興趣的朋友還可以進一步研究


大家好,我是電腦玩物站長 Esor ,我在 2023 年推出的「個人數位生產力」線上課程中,從如何寫出有效的防彈筆記出發,觸及工作、生活與自我管理問題,解析如何打造一套執行起來更有效率,也更有成就感的生產力系統,歡迎參考(可使用電腦玩物老讀者折扣碼 ESOR500 ,獲得 500 元折價喔!)。

我的電子郵件是 esorhjy@gmail.com ,如果你有任何關於筆記術、時間管理、提升工作效率的問題,歡迎寫信跟我討論。或訂閱「電腦玩物電子報

我也開設了 podcast 節目,歡迎訂閱追蹤:高效人生商學院」(Apple podcast 訂閱、 Google Podcast 訂閱)。

也跟大家介紹我開設的一系列時間管理、筆記術、數位工具課程,歡迎報名:「課程介紹連結」。或參考我的最新書籍著作:《防彈筆記法》。

(歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具,實測心得

留言

  1. 請問Esor站長: 我曾經也想做類似的功能,但chatgpt回答得太長而導致中斷
    他回答的程式碼就只產生出一半來,這時候要怎麼進行銜接呢?
    尤其是到後面程式碼和風格越來越多的時候,問題一定會越來越嚴重

    回覆刪除
    回覆
    1. 我通常有兩種做法:

      一個就是直接說:「繼續」,就有一定機率可以接續下去

      另一個就是分段問,把問題拆成不同小問題來解決

      刪除
    2. 可以分享你製成品的html code嗎

      刪除
  2. 請問是用ChatGPT3.5還是4 實作?

    回覆刪除
  3. 這篇心得令我重拾信心。我曾想製作個人使用的小程式,也有買書來研究和上網查詢,但因為找不到以及不知道想到效果的程式碼不斷受挫而最終放棄。您的心得和步驟細節著實開了盞明燈,教會我該如何與使用chatgpt並溝通以達成想要的效果,現在我有信心親手打造出自己想要的軟體了。

    回覆刪除
  4. 我可以完全複製您的蕃茄鐘從頭到尾的操作步驟實際操作一遍嗎?

    回覆刪除
    回覆
    1. 「完全」的話,如我文章所說,我是分成好幾次對話來完成的,中間也有問錯或重問,所以直接分享我從頭到尾的問答步驟,可能不切實際,但是您可以在 ChatGPT 這樣開始提問:

      你可以當一位網頁程式設計專家,但用不懂程式碼也能理解的方式,教我一步一步打造一個網頁上可以顯示的番茄鐘倒數計時小工具嗎?

      接下來可以直接給我具體的程式碼,帶我建立這個網頁番茄鐘工具嗎?

      你幫我分析看看還可以往哪些方向改進?

      刪除
  5. 老師我有在omykamp買您課程後來到期~我想說您的第一步驟我就gg您是怎樣開啟?謝謝~

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

Google NotebookLM 影音升級:用 AI 學習英文 YouTube 影片、 整理大量錄音檔最佳工具

Google Maps 我的地圖完全教學!規劃自助旅行攻略

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Slack 完整教學與上手心得:找到正確的團隊溝通之道

ChatGPT Canvas 全新 AI 寫作、程式碼編輯工具,不再只能對話!

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

ChatGPT 進階語音對話純測試心得:腦力激盪、即時口譯、冥想教練,台語也能通

讓你看懂即時颱風動態 Windyty驚人動畫播報天氣網站