ChatGPT教我寫程式：花不到30分鐘，寫好5行日記小工具

做為一個教文案寫作的老師，平時我總是苦口婆心地希望同學們可以多找些時間來練習書寫，從撰寫部落格文章或商品文案開始，都是一個不錯的起點。為此，我也時常在課堂上，鼓勵大家可以用自由書寫（free writing）的方式來練習，好比每天睡前可以寫5行日記（真的只需要5行，夠簡單吧？），記錄當天值得記錄的美好人事物。

寫作的重要性，我想大家都知道！但如果你還沒養成寫作的習慣，我想建議你每天先撥出睡前或飯後的空檔時間，哪怕只花10分鐘寫寫5行日記，都是很不錯的開始。既然是寫日記，也就不需要妙筆生花，更不用出口成章。在我看來，5行日記的重點，就是請你把每一天最觸動自己，或者讓你最值得關注的人事物寫下來即可。

我鼓勵大家寫5行日記，但是如果沒有一個好使的工具也不行。雖然紙筆取得很方便，但我想大家應該更喜歡用手機或電腦輸入！所以，剛剛突發奇想，是不是可以請ChatGPT教我寫一個5行日記的小工具呢？

說起來還真巧，今晚恰巧看到好友Esor的這篇「ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得」，給了我一個靈感。我雖然是資訊背景出身，但說來汗顏，自己已經很久沒碰程式了⋯⋯所以，我就拜ChatGPT當老師，請它教我寫程式囉！

可以請你當我的網頁程式設計的老師，針對程式新手用不懂程式碼也能理解的方式，教我一步一步打造一個可以在網頁上每天輸入5則日記記事的小工具程式嗎？

條件限制：
#每天只能輸入5則日記，每則不超過100字。
#輸入滿5則之後，提示1次「今日額度已滿，明天請繼續寫」。
#符合RWD網頁。
#輸入日記之後，有刪除鈕和編輯鈕可以刪除或編輯單則日記。
#版面請幫忙美化。
#分別教我設計 index.html 、 style.css 以及 diary.js 的程式碼。

謝謝你，我的程式設計老師。

我才剛剛打完一連串的咒語，ChatGPT馬上就教我怎麼寫程式了！為了方便學習，我刻意請ChatGPT把程式碼分成HTML、CSS和JavaScript三個檔案。很快地，才花不到五分鐘光景，第一版「我的5行日記」就應運而生了！

當然，在學習程式設計的過程中，難免會遇到錯誤，好比我在修改第二版「我的5行日記」程式的時候，就發現版面有點怪怪的！我們把偵錯稱為debug，以前在讀書的時候覺得抓蟲是件苦差事，但如今有了ChatGPT的幫助，感覺也滿有意思的。

嗯，遇到錯誤其實是很正常的事，所以倒也不用驚慌！我發現刪除鈕不見了，加上版面也有點兒紊亂⋯⋯所以，我就請ChatGPT幫我檢視程式碼，看看有哪些環節需要修正？真的無法搞定的時候，我就把程式碼貼上來，請ChatGPT幫我找出問題點。

請大家特別注意：雖然ChatGPT「表示」，我們可以用多種方式傳輸檔案給它，但經過查證，發現目前還是無法透過這類方式進行，敬請周知。在此特別感謝pmli與李孟秋等朋友的意見回饋，謝謝！

就這樣，我耐著性子，按照ChatGPT的指示逐步修正程式碼，逐一解決問題。嗯，距離心中理想的目標也就愈來愈近囉⋯⋯其實只要你很清楚自己的目標，能夠運用正確的方法，ChatGPT真的是一位滿不錯的老師。更重要的是自己要多動手練習，我想寫程式是這樣，學習寫作或者做任何事，也都是一樣的道理。

正所謂「一步一腳印」，我就花了半個小時跟ChatGPT學習寫程式，雖然中間難免遇到了一些問題，但只要仔細思考和修正，或許也沒那麼難！當我確認過程式碼可正式執行之後，下一步就是設法美化版面呈現與加強使用體驗。所以，接下來我又請ChatGPT教我如何修正CSS，讓整體版面變得更美觀、舒適。

嗯，我想，當大家看到第三版「我的5行日記」的時候，是否覺得這個小工具愈來愈有模有樣了呢？不但版面更加美觀了，上頭還有編輯跟刪除的按鈕⋯⋯

當然，我也必須承認，這個網頁程式畢竟只是一個簡單的小工具，跟我認識的很多專業程式設計師朋友所設計出來的作品，自然是天差地遠、不能同日而語啦！不過，再仔細想想，從一開始有了這個靈感到最後完成整個網頁程式，我也才花了30分鐘左右的時間，是不是值得給自己一個掌聲呢？

對我來說，最大的收穫其實還在後頭。那就是透過這次的嘗試與學習，感覺程式設計真的很重要，而且並沒有那麼困難；在練習與摸索的過程中，彷彿又激發自己想要學習程式設計的動機了！

在這個AI時代，會寫一點程式不但能夠做很多事，也可提升工作效率，誠然是很棒的事。嗯，有興趣的朋友，歡迎你也來試試看！

當然，除了學習程式設計，我更期待你一起加入寫作的行列唷！如果你有任何寫作的問題，歡迎與我聯繫。如果你在學習寫作的路上，需要有一位寫作教練陪伴，也歡迎現在就報名參加第18期「Vista寫作陪伴計畫」！