前面 Day 11~20,我主要使用 Angular、TypeScript、HTML 與 CSS,逐步完成智慧醫院管理平台的使用者端頁面。
目前已經完成醫師查詢、醫師詳細資訊、登入、註冊、個人資料、預約掛號、預約成功,以及我的預約與取消預約等主要 UI。
Day 20 也進行了前端展示流程測試,確認不同頁面之間的導覽與基本操作。
不過,目前網站使用的仍然是前端 Demo 資料,還沒有真正的後端服務與資料庫。
因此從 Day 21 開始,我準備進入後端開發階段,第一次建立 ASP.NET Core Web API。
本次主要目標:
Program.cs 的基本設定。前面幾天已經完成主要前端 UI,但目前預約掛號與預約管理使用的仍是 Demo 資料。
例如 Day 19 的預約成功頁面,可以顯示醫師、日期及時段,但沒有真正將預約儲存到資料庫。
Day 20 的我的預約頁面也只有獨立的展示資料,重新整理後會恢復初始狀態。
這讓我開始思考:
當使用者真的完成預約時,資料應該儲存在哪裡?
如果不同使用者同時預約同一個門診,系統又該如何確認名額?
這些功能就不能只依靠前端的 HTML/CSS。
因此,接下來需要建立後端系統,負責接收前端送來的請求、處理資料及回傳結果。
| 項目 | Angular 前端 | ASP.NET Core 後端 |
|---|---|---|
| 主要用途 | 呈現畫面與使用者操作 | 處理請求與資料規則 |
| 使用技術 | TypeScript、HTML、CSS | C# |
| 醫師查詢 | 顯示搜尋與篩選結果 | 提供醫師資料 |
| 預約掛號 | 顯示表單及選擇項目 | 驗證資料與處理預約 |
| 我的預約 | 顯示預約列表 | 查詢預約紀錄 |
| 資料儲存 | 不直接操作正式資料庫 | 未來透過資料存取層操作 Oracle |
這次要建立的 ASP.NET Core Web API,就是未來 Angular 與後端資料之間的溝通入口。
開始建立專案之前,我先了解 ASP.NET Core Web API 的用途。
ASP.NET Core 是 Microsoft 提供的網頁應用程式開發框架,可以使用 C# 建立網站、Web API 等服務。
而 Web API 可以讓其他程式透過 HTTP 傳送請求,並取得資料或執行指定操作。
例如未來智慧醫院系統可能會需要:
GET /api/doctors
取得醫師列表
GET /api/doctors/1
取得指定醫師詳細資訊
POST /api/appointments
建立預約資料
GET /api/appointments
查詢預約紀錄
以上只是未來可能的 API 規劃,目前都還沒有實作。
這次我先從最簡單的 GET API 開始,確認後端可以接收請求並回傳資料。
之前 Angular 主要負責顯示 HTML 畫面。
但這次建立的 Web API 不需要直接產生使用者介面,而是回傳資料。
例如:
{
"message": "Hello SmartCare Hospital",
"status": "ok"
}
這種資料格式稱為 JSON。
未來 Angular 可以接收 API 回傳的 JSON,再將資料顯示在醫師查詢或預約頁面。
第一次建立 ASP.NET Core 專案之前,需要先確認本機是否已經安裝適合的 .NET SDK。
這次使用 Visual Studio 2022 與 PowerShell 進行開發。
在終端機執行:
dotnet --info
以及:
dotnet --list-sdks
實際檢查結果:
| 項目 | 環境 |
|---|---|
| Visual Studio | Community 2022 |
| Visual Studio 版本 | 17.14.19 |
| .NET SDK | 9.0.306 |
| ASP.NET Core Runtime | 9.0.10 |
| 後端目標框架 | .NET 9.0 |
| 作業系統 | Windows |
這次學到 .NET SDK 和 .NET Runtime 並不是相同的東西。
SDK(Software Development Kit)
主要用來建立、編譯與開發 .NET 程式。
例如:
dotnet new
dotnet build
dotnet run
Runtime
主要負責執行已經建置完成的 .NET 應用程式。
因此,電腦有安裝某個版本的 Runtime,不代表已經安裝相同版本的 SDK。
這次本機只有 .NET 9 SDK,因此選擇使用 net9.0 建立專案。
確認環境後,接著需要決定後端專案要建立在哪個位置。
目前 Angular 專案位於:
C:\Users\Sy\Smart-Hospital2
因為之前已經完成許多 Angular Component,所以這次不希望重新建立前端專案,也不想改動現有的目錄結構。
因此決定保留 Angular 原本的位置,另外建立 backend 資料夾存放 ASP.NET Core。
目前主要結構:
Smart-Hospital2/
│
├── src/
│ └── Angular 前端原始碼
│
├── public/
│ └── 圖片及靜態資源
│
├── angular.json
├── package.json
├── package-lock.json
│
├── backend/
│ └── SmartCare.Api/
│ ├── Controllers/
│ │ └── HelloController.cs
│ │
│ ├── Properties/
│ │ └── launchSettings.json
│ │
│ ├── Program.cs
│ ├── appsettings.json
│ ├── appsettings.Development.json
│ └── SmartCare.Api.csproj
│
└── README.md
這樣安排的好處是:
Angular 仍然在原本的專案根目錄使用:
npm start
ASP.NET Core 則使用:
dotnet run --project backend/SmartCare.Api --launch-profile http
這次開始了解到,即使前端與後端放在同一個專案資料夾中,也可以分別啟動與執行。
完成目錄規劃後,接著正式建立後端專案。
這次實際使用 .NET CLI 建立,而不是直接透過 Visual Studio 的新增專案視窗。
在專案根目錄執行:
dotnet new webapi --name SmartCare.Api --output backend/SmartCare.Api --framework net9.0 --use-controllers --no-openapi --no-https --no-restore
這次建立成功後,終端機顯示:
範本「ASP.NET Core Web API」已成功建立。
| 指令或參數 | 作用 |
|---|---|
dotnet new webapi |
建立 ASP.NET Core Web API |
--name SmartCare.Api |
指定專案名稱 |
--output backend/SmartCare.Api |
指定專案位置 |
--framework net9.0 |
使用 .NET 9.0 |
--use-controllers |
使用 Controller 架構 |
--no-openapi |
暫不加入 OpenAPI |
--no-https |
本機練習先使用 HTTP |
--no-restore |
建立時暫不執行套件還原 |
因為這次是第一次接觸 ASP.NET Core,所以選擇 Controller-based Web API。
ASP.NET Core 可以使用不同方式建立 API。
Controller-based API
將 API 功能放在 Controller 類別中,透過 Attribute 設定路由。
Minimal API
可以直接使用 MapGet() 等方式建立簡單的 API 端點。
這次選擇 Controller-based,主要是希望之後能逐步學習 Controller、Service、Model 及資料庫整合。
建立完成後,原本範本有附帶 WeatherForecast 範例。
因為這次希望建立的是智慧醫院平台自己的第一支 API,所以移除天氣範例,改成 HelloController。
目前尚未建立正式醫師或預約資料模型。
第一次看到 ASP.NET Core 專案時,和前面 Angular 的檔案結構有很大不同。
這次先了解幾個主要檔案的用途。
| 檔案 | 用途 |
|---|---|
Program.cs |
應用程式啟動與設定 |
Controllers/ |
放置 API Controller |
appsettings.json |
一般應用程式設定 |
appsettings.Development.json |
開發環境設定 |
launchSettings.json |
本機啟動設定 |
SmartCare.Api.csproj |
C# 專案與建置設定 |
SmartCare.Api.http |
API 測試請求 |
其中,這次最重要的檔案是 Program.cs 與 HelloController.cs。
這個檔案主要存放應用程式設定。
目前內容:
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
其中 Logging 用來設定程式記錄的等級。
未來如果需要資料庫設定,也可能會使用設定系統讀取相關資訊。
不過正式帳號密碼及資料庫連線密碼,不應直接寫在準備公開的設定檔中。
這個檔案用來設定本機開發時的啟動方式。
這次實際設定:
{
"$schema": "https://json.schemastore.org/launchsettings.json",
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": false,
"applicationUrl": "http://localhost:5099",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
這次比較重要的是:
"applicationUrl": "http://localhost:5099"
它指定目前本機開發使用的網址。
另外:
"launchBrowser": false
表示啟動後端時,不會自動開啟瀏覽器。
這次也了解到,後端 Port 不一定是固定的,需要根據實際啟動設定與終端機輸出確認。
這次 ASP.NET Core 最重要的學習內容,是理解 Program.cs。
在 Angular 專案中,之前主要處理 Component、HTML、CSS 與 Router。
但在 ASP.NET Core 中,Program.cs 是建立及啟動 Web API 的重要入口。
目前完整程式碼:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
var app = builder.Build();
app.MapControllers();
app.Run();
雖然只有五行,但每一行都有不同用途。
var builder = WebApplication.CreateBuilder(args);
這一行用來建立應用程式的建構器。
它會協助載入 ASP.NET Core 的基本設定,讓後面可以加入需要的服務。
其中:
var
是 C# 的型別推論寫法,編譯器會根據右邊的值判斷變數型別。
builder.Services.AddControllers();
這一行是將 Controller 所需的功能註冊到 ASP.NET Core。
之後建立的 Controller,才能使用框架提供的相關功能。
var app = builder.Build();
這一行會根據前面的設定建立應用程式。
app.MapControllers();
這一行會讓 ASP.NET Core 將 Controller 中設定的路由加入應用程式。
這次也學到:
AddControllers() 和 MapControllers() 並不是一樣的功能。
前者負責註冊 Controller 所需服務,後者則負責讓 Controller 的路由可以對應到 HTTP 請求。
app.Run();
這一行會啟動 Web Server,開始等待 HTTP 請求。
因此執行 dotnet run 後,終端機不會立即結束,而是持續等待使用者或其他程式呼叫 API。
了解 Program.cs 後,接著建立第一支 Controller。
目前檔案位置:
backend/SmartCare.Api/Controllers/HelloController.cs
完整 C# 程式碼:
using Microsoft.AspNetCore.Mvc;
namespace SmartCare.Api.Controllers;
[ApiController]
[Route("api/hello")]
public class HelloController : ControllerBase
{
[HttpGet]
public IActionResult Get()
{
return Ok(new
{
message = "Hello SmartCare Hospital",
status = "ok"
});
}
}
這次是第一次正式接觸 C# Controller,因此需要了解幾個新的語法。
using Microsoft.AspNetCore.Mvc;
用來引入需要使用的命名空間。
這裡的 Microsoft.AspNetCore.Mvc 提供 Controller 與路由相關的功能。
namespace SmartCare.Api.Controllers;
用來組織程式中的類別。
這次將 HelloController 放在 SmartCare.Api.Controllers 命名空間下。
public class HelloController : ControllerBase
這一行宣告一個公開的 Controller 類別。
其中:
public:表示類別可以被其他程式碼存取。class:宣告類別。HelloController:類別名稱。ControllerBase:ASP.NET Core API Controller 常用的基底類別。這次也第一次接觸到 C# 的繼承語法。
在 HelloController 中,除了 C# 基本語法,還有幾個中括號包住的設定。
[ApiController]
[Route("api/hello")]
以及:
[HttpGet]
這些稱為 Attribute。
[ApiController]
表示這個類別使用 ASP.NET Core API Controller 的相關慣例。
例如未來處理參數與資料驗證時,框架可以提供一些自動化行為。
但它並不代表 API 已經具有登入驗證功能。
[Route("api/hello")]
用來設定 API 的路由。
這次的路由為:
/api/hello
[HttpGet]
表示這個方法負責處理 HTTP GET 請求。
將 Route 與 HttpGet 結合後,就形成:
GET /api/hello
public IActionResult Get()
{
return Ok(new
{
message = "Hello SmartCare Hospital",
status = "ok"
});
}
這是一個 Action Method。
當使用者向 /api/hello 發送 GET 請求時,就會執行這個方法。
其中:
return Ok(...);
表示回傳 HTTP 200 OK 的結果。
這次也學到,Controller 方法名稱雖然叫做 Get(),但網址不需要再加上 /Get。
實際路由是由 Attribute 決定的。
完成第一支 Controller 後,接著需要了解 API 回傳的資料格式。
這次回傳:
{
"message": "Hello SmartCare Hospital",
"status": "ok"
}
這是 JSON(JavaScript Object Notation)。
JSON 會透過 Key 與 Value 表示資料。
例如:
| Key | Value |
|---|---|
message |
Hello SmartCare Hospital |
status |
ok |
其中:
"message": "Hello SmartCare Hospital"
message 是欄位名稱,Hello SmartCare Hospital 是對應的值。
在 Controller 中寫的是:
return Ok(new
{
message = "Hello SmartCare Hospital",
status = "ok"
});
其中:
new
{
...
}
是 C# 的匿名物件。
ASP.NET Core 會透過輸出格式化與 JSON 序列化功能,將物件轉換成 HTTP 回應內容。
因此不需要自己手動拼接 JSON 字串。
這次也學到,HTTP 狀態碼和 JSON 中的 status 是不同的東西。
HTTP 200 表示伺服器成功處理這次請求。
而:
"status": "ok"
只是回傳資料中的一個欄位。
未來設計 API 時,需要分清楚 HTTP 狀態碼與回傳資料各自的用途。
完成 Controller 後,接著測試 ASP.NET Core 專案能不能正常編譯。
在專案根目錄執行:
dotnet build backend/SmartCare.Api/SmartCare.Api.csproj
這次建置成功。
實際結果:
SmartCare.Api -> ...\bin\Debug\net9.0\SmartCare.Api.dll
建置成功。
0 個警告
0 個錯誤
其中:
dotnet build:編譯專案。bin/:放置編譯後的程式。obj/:放置建置過程中的中間產物。SmartCare.Api.dll:編譯產生的 .NET 組件。這次也了解到,bin 與 obj 不是需要手動撰寫的原始程式碼,而是建置時產生的檔案。
因此後續使用 Git 管理專案時,通常不需要將這些資料夾提交到版本庫。
確認建置成功後,接著啟動後端。
這次使用:
dotnet run --project backend/SmartCare.Api --launch-profile http
啟動成功後,終端機顯示:
Now listening on: http://localhost:5099
Application started. Press Ctrl+C to shut down.
Hosting environment: Development
這代表 ASP.NET Core 已經啟動,正在等待 HTTP 請求。
localhost 代表目前使用的本機電腦。
這次 API 先在本機執行,沒有部署到雲端或正式伺服器。
這次使用:
5099
作為後端監聽的 Port。
因此本次 API 的網址為:
http://localhost:5099/api/hello
這個 Port 是根據實際啟動設定與日誌確認的,不代表所有 ASP.NET Core 專案都會使用 5099。
在執行中的終端機按下:
Ctrl+C
就可以停止目前的 API。
這次也開始了解,Angular 開發伺服器與 ASP.NET Core Web API 都需要先啟動,才能透過瀏覽器或其他工具存取。
成功啟動後端後,接著驗證 API 是否可以回傳正確資料。
這次實際使用 PowerShell 的 HTTP 請求進行測試。
目標網址:
http://localhost:5099/api/hello
實際測試結果:
HTTP Status:200
Content-Type:application/json; charset=utf-8
回傳內容:
{
"message": "Hello SmartCare Hospital",
"status": "ok"
}
表示 API 成功接收 GET 請求,並且回傳預期 JSON。
這次另外測試:
http://localhost:5099/api/not-found
結果為:
HTTP Status:404
404 代表伺服器找不到符合要求的路由。
這和後端沒有啟動的情況不同。
如果後端沒有啟動,瀏覽器或測試工具可能直接無法建立連線,而不是收到 API 回傳的 404。
之後也可以先啟動 API,再開啟:
http://localhost:5099/api/hello
並透過瀏覽器 F12 開發者工具中的 Network 查看:
不過這次實際完成的 HTTP 測試來自 PowerShell,並沒有將尚未執行的瀏覽器操作寫成已完成。
完成第一支 API 後,接著將目前的後端與原本 Angular 專案連結起來思考。
未來使用者操作 Angular 頁面時,前端可以透過 HTTP Request 向 ASP.NET Core 發送請求。
後端收到請求後,執行對應 Controller,再將結果以 JSON 回傳。
基本流程:
使用者
↓
Angular 前端
↓
HTTP Request
↓
ASP.NET Core Web API
↓
Controller
↓
回傳 JSON
↓
Angular 顯示資料
例如未來的醫師查詢頁面:
使用者搜尋醫師
↓
Angular 發送 GET 請求
↓
ASP.NET Core 查詢醫師資料
↓
回傳 JSON
↓
Angular 顯示醫師列表
目前還沒有實際串接醫師查詢 API。
但這次已經建立最基本的 HTTP 通訊入口,讓後續可以逐步將前端 Demo 資料替換為後端提供的資料。
這次也初步了解 CORS。
假設:
Angular:
http://localhost:4200
ASP.NET Core:
http://localhost:5099
雖然兩個網址都使用 localhost,但因為 Port 不同,仍屬於不同 Origin。
未來 Angular 直接向後端發送跨來源請求時,可能需要設定 CORS。
不過這次尚未從 Angular 呼叫 Web API,因此沒有提前加入 CORS 設定。
也沒有使用 AllowAnyOrigin 直接開放所有來源。
除了第一支 Controller,這次也建立了:
SmartCare.Api.http
用來保存 HTTP 請求範例。
目前內容:
@SmartCare.Api_HostAddress = http://localhost:5099
GET {{SmartCare.Api_HostAddress}}/api/hello
Accept: application/json
###
GET {{SmartCare.Api_HostAddress}}/api/not-found
Accept: application/json
###
這裡第一次接觸 .http 檔案。
@SmartCare.Api_HostAddress = http://localhost:5099
可以統一設定目前 API 的主機網址。
這樣之後如果 Port 改變,就不需要分別修改每一個請求。
GET {{SmartCare.Api_HostAddress}}/api/hello
代表向指定路由發送 GET 請求。
Accept: application/json
表示客戶端希望接收 JSON 格式的回應。
###
可以用來區分不同的 HTTP 請求。
這次也讓我了解到,測試 API 不一定每次都需要自己手動輸入完整網址,也可以將常用請求保存下來。
這次雖然成功建立 Web API,但環境檢查及測試過程中仍遇到一些問題。
一開始檢查 Git 狀態時,執行:
git status
出現:
fatal: not a git repository
代表目前工作目錄無法找到 Git Repository。
因此這次沒有直接執行 git init,避免在可能是複製資料夾的位置,建立另一個不必要的 Git Repository。
目前 Git 位置與分支還需要另外確認。
第一次在工具沙箱中執行:
dotnet --info
因為 Windows Service Control Manager 的存取權限問題而失敗。
後續在取得適當權限後重新執行,成功確認本機 .NET SDK 版本。
這個問題是執行環境的權限限制,不是 ASP.NET Core 原始碼有錯誤。
第一次測試時,HTTP 請求因沙箱的網路權限與隔離問題而失敗。
後續將 API 啟動與 HTTP 測試放在同一個可正常連線的執行環境中,再重新驗證。
最後成功取得:
GET /api/hello → 200
GET /api/not-found → 404
因此沒有為了處理這次工具環境問題,額外修改 API 路由或加入 CORS。
這次學到,API 無法連線不一定代表程式碼有問題,也可能和執行環境、權限或服務是否啟動有關。
這次主要學習:
dotnet new webapi 建立專案。Program.cs 的基本設定。AddControllers() 與 MapControllers() 的作用。using、namespace、class。ControllerBase 與類別繼承。[ApiController]、[Route]、[HttpGet]。IActionResult。dotnet build 編譯專案。dotnet run 啟動 Web API。.http 檔案保存 API 測試請求。這次最重要的學習是,第一次了解後端程式如何透過 Controller 接收 HTTP 請求,再將 C# 物件轉換為 JSON 回傳。
本次使用 Codex 協助:
本次已完成:
backend/SmartCare.Api。HelloController。ASP.NET Core 專案結構:

Program.cs:

HelloController:

Web API 啟動結果:

第一支 API 的 JSON 回傳:

目前已經成功建立智慧醫院管理平台的第一個 ASP.NET Core Web API,並完成第一支 GET API。
這次的重點是了解 ASP.NET Core 的基本運作,而不是直接完成整個醫院後端系統。
接下來希望先熟悉 C# 的基本語法、Controller 與 HTTP API,再逐步將前端 Demo 資料改成由後端提供。
後續主要規劃:
正式預約、會員登入、JWT 與資料庫儲存,則會等基本後端架構更加熟悉後再逐步加入。
這次最大的收穫,是從之前只負責顯示資料的 Angular 前端,開始了解伺服器如何接收請求、執行 C# 程式並回傳 JSON。
也讓我對智慧醫院平台未來的前後端整合,有了更清楚的方向。