Claude AI Powered

Claude Code + VSCode
開發 Notes 應用程式

HCL Domino NSFODP · LotusScript · Domino REST API · Vue.js 全端智能開發

Part 1

NSFODP + Notes 元件
LotusScript 同步

Part 2

Domino REST API
Vue.js 前台整合

由 Claude AI 自動執行全端開發流程  |  安格資訊
議程概覽

Agenda Overview

01

技術架構總覽

Claude Code + VSCode 整合環境

02

Part 1 ｜ NSFODP + Notes 元件同步

LotusScript 開發與 Claude AI 自動執行

03

Part 2 ｜ Domino REST API + 自定 API

Vue.js 前台框架與後台整合

04

Claude AI 自動執行流程

端對端開發自動化展示

05

成果展示與 Q&A

Demo + 問題討論

技術架構總覽

Technology Architecture

開發工具層
VSCode IDE
Claude Code Extension
Claude AI Engine
Domino 後台層
HCL Domino Server
Notes NSF / NSFODP
Domino REST API
前台應用層
Vue.js Framework
自定 REST API
Notes App UI
全程由 Claude AI 自動執行：代碼生成 · 元件配置 · API 串接 · UI 開發
PART1
前端開發環境

NSFODP 同步到 VSCode

使用 Notes 元件與 LotusScript 核心功能

NSFODP Maven Plugin

NSF ODP（On-Disk Project）同步至 VSCode 工作區，實現版本控管與協作開發

Notes 元件開發

表單、視圖、代理等 Notes 元件智能編輯，Claude AI 提供即時語法建議

LotusScript 自動生成

Claude AI 根據需求自動撰寫 LotusScript 邏輯，大幅降低開發時間

雙向同步機制

VSCode ↔ Domino Server 即時雙向同步，修改立即反映於伺服器

Claude AI 自動執行 LotusScript 元件開發流程

1

環境設定

安裝 NSFODP Maven Plugin
VSCode + Claude Code Extension

2

ODP 同步

NSF → ODP 匯出
建立 VSCode 工作區

3

Claude AI 分析

解析現有元件結構
理解業務邏輯需求

4

自動代碼生成

LotusScript 自動撰寫
Notes 元件自動配置

5

同步回 Domino

ODP → NSF 編譯
Server 即時部署

LotusScript — Claude AI 自動生成 
' Claude AI 根據需求自動生成 — 建立新文件並寫入欄位
Sub CreateNewNote()
    Dim db  As NotesDatabase
    Dim doc As NotesDocument
    Dim ses As NotesSession

    Set ses = New NotesSession
    Set db  = ses.GetDatabase("", "notes.nsf")
    Set doc = db.CreateDocument()

    doc.ReplaceItemValue "Form",    "MainForm"
    doc.ReplaceItemValue "Subject", "New Document"
    doc.ReplaceItemValue "Created", ses.CreateDateTime("Today")

    Call doc.Save(True, False)
    MsgBox "Document created successfully!"
End Sub
實際操作畫面 — VSCode + Claude Code 開發 NSF-ODP 專案
VSCode + Claude Code 開發 Notes 應用程式實際畫面
NSF-ODP 目錄結構
表單元件直接在 VSCode 管理
LotusScript 代碼
Claude AI 自動生成後端邏輯
Claude Code 面板
自然語言下指令，AI 自動執行
PART2
後台 API 整合

Domino REST API + 自定 API

串接前台 Vue.js 框架

Domino REST API (DRAPI)

OpenAPI 規範，零代碼暴露 Notes 資料，支援標準 CRUD 操作

自定 API 端點

擴展業務邏輯，自定 HTTP 動詞與路由，搭配 LotusScript Agent 後端處理

Vue.js 3 前台框架

Composition API + Pinia 狀態管理，打造現代化回應式使用者介面

Claude AI 全自動整合

API 串接、Vue 元件生成、樣式優化全程自動完成，無需手動撰寫樣板代碼

Claude AI 自動串接前後台，生成 Vue.js 元件

後台 Backend

Domino REST API (DRAPI)

GET /api/v1/notes/{id}

POST /api/v1/notes

PUT /api/v1/notes/{id}

自定 API Agent

自定業務邏輯端點

LotusScript 後端處理

身份驗證

OAuth 2.0 / JWT Token

安全存取控制

⇌

Claude AI
自動串接

前台 Frontend

Vue.js 3 框架

<NotesList />

<NoteEditor />

<NoteViewer />

Pinia 狀態管理

useNotesStore()

API 請求封裝層

自動生成元件

Claude AI 根據 API

自動生成 Vue 元件與樣式

自動化流程

Claude AI 自動執行流程

End-to-End AI-Driven Development Automation

開發者下指令

用自然語言描述需求給 Claude AI

分析 NSF 結構

解析現有元件與業務邏輯

生成 LotusScript

自動撰寫後端邏輯代碼

Claude Code AI

生成 Vue 元件

自動產生前台 UI 元件與樣式

API 自動串接

前後台 API 自動整合

部署 & 測試

ODP → NSF 編譯，Domino Server 即時部署上線

成果總結

成果展示 & 總結

Demo Results & Summary

開發效率提升 80%

Claude AI 自動完成代碼生成與元件配置，工程師專注於業務邏輯設計

NSFODP 無縫同步

VSCode ↔ Domino Server 雙向即時同步，支援 Git 版本控管與多人協作

REST API 全覆蓋

DRAPI + 自定 API 完整覆蓋業務需求，標準化介面降低維護成本

Vue.js 現代化 UI

回應式設計提升使用者體驗，支援桌機與行動裝置瀏覽

由 Claude Code AI 驅動的 HCL Domino Notes 全端應用開發新典範