iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
自我挑戰組

賽博紓壓診所:從零打造純前端心理測驗與互動紓壓網頁系列 第 30 篇

Day 30:診所正式開業!三十天後,我終於把這個想法做出來了

  • 分享至 

  • xImage
  •  

不知不覺,三十天的鐵人賽終於來到最後一天。

回頭看這段時間,從一開始構思「賽博紓壓診所」的主題,到慢慢加入互動功能、心理測驗、雷達圖、診斷報告,再到最後把整個網站整合起來,這個專案也從原本的想法,一步一步變成真正可以操作的作品。

這三十天不只是每天寫一篇文章,也不只是把程式碼放進網站裡。對我來說,更重要的是學著把不同的功能串起來,讓原本零散的想法,最後能夠組成一個完整的系統。

一、從一個想法,到一間有模有樣的紓壓診所

一開始,我希望做的不是單純的心理測驗網站,而是一個帶有診所概念、又有一點幽默感的互動空間。

所以,我把網站取名為「賽博紓壓診所」,將使用者設定成來診所掛號的人,透過一連串的問題,慢慢了解自己的壓力狀態。

在這個過程中,我加入了幾個主要功能:

  • 互動式心理測驗: 讓使用者透過回答問題參與測驗,而不是只能閱讀固定的內容。
  • 隨機求籤: 在部分題目中加入不同的互動形式,讓測驗過程多一點變化。
  • 六個面向的分數分析: 將回答轉換成不同面向的分數,讓結果不只是單一數字。
  • Canvas 雷達圖: 把分析結果視覺化,讓使用者比較容易看出各個面向的差異。
  • 診斷報告與模擬處方: 以診所的情境呈現測驗結果,讓整體體驗更有主題性。
  • 呼吸動畫與視覺效果: 透過動畫和畫面變化,增加網站的互動感。
  • 多語言切換: 提供中文、英文、日文與韓文,讓網站不只侷限於單一語言。

這些功能單獨看起來可能都不算特別龐大,但當它們放在同一個網站裡,就會開始出現新的問題。

例如,測驗回答必須正確對應到分數,分數必須能夠呈現在雷達圖上,最後的報告也要根據結果顯示。多語言切換則不能只改變部分文字,而是要盡可能讓整個操作流程保持一致。

因此,真正花心力的地方,不只是完成每個功能,而是讓它們能夠互相配合。

二、開發過程中,最重要的是整合與反覆測試

在專案剛開始時,可能會覺得只要把想要的功能列出來,再一個一個完成,就能順利做出網站。

但實際開發後才發現,功能完成不代表整個系統就一定能正常運作。

有時候,單獨測試某個功能沒有問題,放進完整流程後卻可能出現其他狀況;有時候,畫面看起來已經完成,但實際操作時才會發現流程不夠順暢。

這也讓我慢慢理解,測試並不是等到專案全部完成後才做的最後一步,而是開發過程中不可缺少的一部分。

尤其是互動式網站,除了確認程式有沒有執行,也需要實際操作,檢查使用者能不能順利完成測驗、看到對應結果,以及使用不同語言時是否仍能正常使用。

這次專案也讓我更清楚地看到,把功能做出來,和把功能整合成一個完整作品,是兩件不同的事。

前者著重於單一功能的實作,後者則需要考慮整體流程、資料傳遞、畫面呈現,以及不同功能之間的關係。

三、使用 AI 協助開發,也要學會判斷與驗證

這次開發過程中,AI 工具也是我學習與處理問題時的重要輔助。

遇到不熟悉的程式碼、功能不知道該如何實作,或是需要調整既有內容時,可以先透過 AI 協助理解問題、整理思路,或提供可能的解決方向。

還有,取得程式碼並不代表問題就真的解決了。

產生的程式碼是否符合目前的架構、會不會影響其他功能,以及實際執行後是否達到預期效果,仍然需要自己確認。

如果只是把程式碼複製進去,卻不清楚它的用途,也不知道出錯時該從哪裡開始檢查,那麼即使一時完成了功能,遇到新的問題時還是不知道如何處理。

因此,這次經驗也提醒我,使用 AI 的重點不只是提高開發速度,而是要逐漸培養理解問題、判斷答案與驗證結果的能力。

我目前還有許多技術需要繼續學習,但至少透過這次專案,我更清楚自己在哪些地方需要加強,也知道未來可以從哪些方向繼續累積。

四、如果還有下一次,我希望把它做得更完整

雖然目前已經完成網站的主要功能,但這不代表它沒有繼續改善的空間。

如果未來有機會繼續開發,我希望可以從以下幾個方向著手。

1. 改善使用者操作流程

重新檢查每個頁面之間的連接方式,讓使用者能更直覺地理解目前所在的位置,以及接下來可以進行的操作。

2. 加強測驗結果的呈現

除了分數與雷達圖,也可以進一步改善不同結果的說明方式,讓使用者更容易理解各個面向代表的意義。

3. 持續測試不同情境

除了正常操作,也需要考慮使用者重新作答、切換語言,或遇到非預期操作時的情況,減少可能出現的問題。

4. 持續整理程式碼

隨著功能增加,程式碼也可能變得越來越複雜。未來可以進一步整理重複的部分,改善程式結構,讓後續維護與新增功能更加方便。

這些方向不一定能在三十天內全部完成,但它們也讓我知道,一個專案並不會因為完成第一個版本就停止成長。

五、三十天鐵人賽,我真正帶走了什麼?

回頭看這三十天,我不敢說自己已經把所有技術都學會了,也不會說現在遇到任何問題都能獨立解決。

但我確實比一開始更了解,完成一個專案需要經歷哪些事情。

從構思主題、規劃功能,到實際撰寫程式、處理問題、整合系統,再到最後讓作品能夠被使用,每個階段都有不同的挑戰。

有些問題在一開始沒有想到,直到實際操作後才發現;有些功能原本以為很簡單,真正開始實作後才知道還有不少細節需要處理。

而每天持續整理開發過程,也讓我有機會重新回顧自己做了什麼、遇到了什麼問題,以及下次可以怎麼改善。

對我來說,這次鐵人賽最有意義的地方,就是把一個原本停留在想法中的作品,逐步實作出來!

今日結語:三十天,終於走到這裡

文章寫到 Day 30,代表這次鐵人賽正式告一段落。

三十天不一定能讓一個人立刻成為熟練的開發者,但可以讓原本不熟悉的事情,透過一次次實作,慢慢變得比較具體。

謝謝一路看到這裡的讀者,也謝謝這三十天持續嘗試、沒有中途放棄的自己。

Day 30,完賽!

三十天的鐵人賽到此真的結束啦!

至於賽博紓壓診所——

歡迎隨時回來掛號。


上一篇
Day 29:診所掛牌開業,從硬碟搬進網路!
系列文
賽博紓壓診所:從零打造純前端心理測驗與互動紓壓網頁 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言