iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
佛心分享-IT 人自學之術

從 Figma 到 Angular:打造智慧醫院預約掛號系統的 30 天實作之旅 系列

這是一個以智慧醫院預約掛號系統為主題的 30 天實作挑戰。我將從現有的需求分析與Figma設計開始,結合Angular、ASP.NET Core、C#與Oracle,將設計實際開發成一個可以操作的智慧醫院預約網站。
以一般使用者的預約掛號流程為核心,實作首頁、醫師查詢、醫師詳細資訊、登入、預約掛號、預約成功、我的預約與取消預約等功能。
這系列不只是技術教學,也會記錄實際開發過程,包括功能規劃、程式撰寫、Bug 排除、Figma與Angular的轉換,以及ChatGPT與Codex如何協助開發。
目標是在 30 天內打造出兼具流暢前端互動與後端 API 串接的實用掛號系統。

參賽天數 8 天 | 共 8 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1|為什麼我要做一個智慧醫院預約掛號系統?

為什麼想做智慧醫院管理平台? 醫學資訊是我目前學習的領域,因此我希望透過一個與醫療資訊相關的專案,把課堂上學到的概念實際應用在系統開發上。一開始我並沒有想直接製...

2026-09-15 ‧ 由 syy 分享
DAY 2

Day 2|開始做系統前,先分析使用者真正需要什麼

一、這個系統是給誰使用的? 一開始我其實有點困惑,醫院系統應該不只是病人使用,醫師、護理人員、行政人員甚至管理者,都可能需要使用系統,但如果全部一起做,範圍很容...

2026-09-16 ‧ 由 syy 分享
DAY 3

Day 3|把醫院預約流程畫出來:User Flow 怎麼規劃?

前兩天主要在思考「系統需要有哪些功能」以及「畫面應該怎麼設計」。今天就來思考: 如果今天真的有一個使用者要使用這個系統,他會怎麼操作? 這時候就需要開始規劃Us...

2026-09-17 ‧ 由 syy 分享
DAY 4

Day 4|正式開始畫介面:從Wireframe開始規劃醫院網站

一、Wireframe是什麼? Wireframe可以把它想成是網站介面的「骨架」。在這個階段,不會先考慮: 顏色 字體 陰影 圖示 漂亮的圖片 視覺特效...

2026-09-18 ‧ 由 syy 分享
DAY 5

Day 5|從線框稿變成正式介面:智慧醫院UI Design

Wireframe主要是在規劃「頁面要放什麼、功能要放在哪裡」,而今天開始進入下一個階段: 把 Wireframe 轉換成真正的 UI Design。 這也...

2026-09-19 ‧ 由 syy 分享
DAY 6

Day 6|為什麼不能每個按鈕都重新畫?Figma Component 實作

前幾天完成Wireframe,並開始將畫面轉換成正式的UI Design後,我發現一個新的問題。 雖然目前每個頁面都已經有基本的UI設計,但網站中有很多重複出現...

2026-09-20 ‧ 由 syy 分享
DAY 7

Day 7|讓設計真正「動起來」: Figma Prototype預約流程

這時候雖然每個頁面都已經畫完成了,但如果只是把所有畫面放在一起,其實還不像一個真正可以操作的網站。 例如: 點擊「醫師查詢」後會去哪裡? 點擊「立即預約」後要...

2026-09-21 ‧ 由 syy 分享
DAY 8

Day 8|設計完成後,思考 Angular 要怎麼實作

前幾天主要都在處理Figma的設計。 從最一開始的 User Flow、Wireframe,到後來的 UI Design,再到 Component、Varian...

2026-09-22 ‧ 由 syy 分享