作業報告 / HTML + CSS + JavaScript

周一第一周作業AI工具

蘇明心 - 1111310012

本頁面整理了 Node.js、Git、Claude Code、以及 OpenWeather API 串接工具的安裝與操作流程, 並搭配操作截圖作為作業報告展示。

總步驟
8
主題
AI Agent & API

流程大綱

  1. 安裝 Node.js
  2. npm install -g @anthropic-ai/claude-code
  3. Git Download
  4. 安裝 Git
  5. Git Bash 使用 Claude
  6. 天氣查詢
  7. pip install requests
  8. API 串接工具(OpenWeather)

完成 Node.js 安裝精靈,顯示 Node.js has been successfully installed.

Node.js 安裝完成畫面
Node.js Setup 完成畫面

在命令提示字元輸入 npm install -g @anthropic-ai/claude-code,成功安裝套件。

CMD 執行 npm install 安裝 claude-code
CMD 執行 npm 全域安裝 claude-code

前往 Git 官方網站下載 Windows 安裝版本。

Git 官方下載頁面
Git 官網下載頁面(Windows)

完成 Git 安裝,安裝精靈顯示 Setup has finished installing Git on your computer。

Git 安裝完成畫面
Git 安裝完成畫面

透過 Git Bash 啟動 Claude 相關工具,確認環境可正常執行。

Git Bash 執行 Claude 工具畫面
Git Bash 使用 Claude 工具示意

以 Taipei 為例進行天氣查詢,顯示目前溫度、濕度、風速、氣壓等資訊。

天氣查詢網頁顯示 Taipei 天氣資訊
Taipei 即時天氣查詢結果

在 VS Code 終端機執行 pip install requests,安裝 API 請求所需套件。

VS Code 終端機執行 pip install requests
VS Code Terminal 安裝 requests 套件

撰寫 Python 程式串接 OpenWeather API,取得天氣資料並輸出 JSON 檔案。

VS Code 顯示 OpenWeather API 串接程式與輸出結果
OpenWeather API 串接程式與執行結果

心得(可自行修改)

這次作業讓我從環境安裝(Node.js、Git)一路練習到工具使用(Claude / Git Bash),再延伸到 Python 套件安裝與 OpenWeather API 串接。透過實際操作,我更清楚了解前後端工具與 API 應用的基本流程,也學會如何把執行結果整理成報告。