250923 MCP test

📝 备忘录应用程序（Memo App）

用于手机实习的Next.js笔记应用程序

具有基于LocalStorage的完整CRUD功能的备忘录应用程序，是MCP集成和GitHub PR生成实践的基础项目。

🚀 主要功能

• 创建、读取、修改和删除注释（CRUD）
• 📂 按类别分类注释（个人、工作、学习、想法、其他）
• 🏷️ 使用标记系统标记注释
• 🔍 基于标题、内容和标记的实时搜索
• 📱 响应式设计（移动、平板电脑、台式机）
• 💾 基于LocalStorage的数据存储（离线支持）
• 🎨 现代UI/UX with Tailwind CSS
• 📝 标记编辑器和实时预览
• 🤖 AI笔记摘要功能（Google Gemini 2.0 Flash）
• 👁️ 注释详细查看器模式

🛠 技术堆栈

• 框架：Next.js 15.4.4（应用路由器）
• 语言：TypeScript
• 样式：顺风CSS v4
• 存储：本地存储
• 状态管理：反应挂钩（useState、useEffect、useMemo）
• 程序包管理器：npm
• 标记语言：React MDEditor（@uiw/React-md编辑器）
• 人工智能集成：Google Gemini API（@Google/genai）

📦 安装和运行

1.设置环境变量

# .env.local 파일 생성 후 Google Gemini API 키 설정
cp .env.example .env.local
# GEMINI_API_KEY에 실제 API 키 입력

2.安装依赖性

npm install

3.运行开发服务器

npm dev

4.浏览器连接

http://localhost:3000

📁 项目结构

memo-app/
├── src/
│   ├── app/
│   │   ├── globals.css          # 글로벌 스타일
│   │   ├── layout.tsx           # 루트 레이아웃
│   │   └── page.tsx             # 메인 페이지
│   ├── components/
│   │   ├── MemoForm.tsx         # 메모 생성/편집 폼
│   │   ├── MemoItem.tsx         # 개별 메모 카드
│   │   └── MemoList.tsx         # 메모 목록 및 필터
│   ├── hooks/
│   │   └── useMemos.ts          # 메모 관리 커스텀 훅
│   ├── types/
│   │   └── memo.ts              # 메모 타입 정의
│   └── utils/
│       ├── localStorage.ts      # LocalStorage 유틸리티
│       └── seedData.ts          # 샘플 데이터 시딩
└── README.md                    # 프로젝트 문서

💡 主要元件

MemoItem

• 以卡片形式显示单个注释
• 单击打开详细查看器模式
• 编辑/删除动作按钮
• 显示类别徽章和标记
• 格式化日期和修剪标记文本

备忘录表格

• 用于创建/编辑注释的模式表单
• 集成标记编辑器（MDEditor）
• 实时Mark Down预览
• 输入标题、内容、类别和标签
• 添加/删除标签功能
• 表单验证和错误处理

MemoDetailMode

• 仅查看注释详细信息模式
• AI摘要功能（Google Gemini 2.0 Flash）
• 显示标记的渲染内容
• 编辑/删除动作按钮
• 通过ESC键和背景点击关闭

备忘录列表

• 显示注释列表网格
• 实时搜索和类别过滤
• 统计信息和空状态处理
• 反应式网格布局

📊 数据结构

interface Memo {
  id: string // 고유 식별자
  title: string // 메모 제목
  content: string // 메모 내용
  category: string // 카테고리 (personal, work, study, idea, other)
  tags: string[] // 태그 배열
  createdAt: string // 생성 날짜 (ISO string)
  updatedAt: string // 수정 날짜 (ISO string)
}

🎯 实验方案

该项目用于以下三个实践的基础：

实践1：Supabase MCP迁移（45分钟）

• LocalStorage→Supabase数据库转换
• 通过MCP自动创建模式
• 现有数据无损迁移

实践2：功能扩展+GitHub PR（60分钟）

• 添加注释收藏夹功能
• 使用Cursor Custom Modes创建PR
• 代码审查和协作实践

练习3:Playwright MCP测试（45分钟）

• 创建E2E测试
• 浏览器自动化和可视化测试
• 性能测量和报告

详细的实习指南请参考课程资料。

🎨 示例数据

首次运行应用程序时，将自动生成6个示例注释：

• 准备项目会议（工作）
• React 18学习新功能（学习）
• 新的应用程序创意：习惯交易者（创意）
• 周末旅行计划（个人）
• 阅读列表（个人）
• 性能优化创意（创意）

🔧 开发指南

注释CRUD操作

// useMemos 훅 사용 예시
const {
  memos, // 필터링된 메모 목록
  loading, // 로딩 상태
  createMemo, // 메모 생성
  updateMemo, // 메모 수정
  deleteMemo, // 메모 삭제
  searchMemos, // 검색
  filterByCategory, // 카테고리 필터링
  stats, // 통계 정보
} = useMemos()

AI注释摘要功能

// useMemoSummarize 훅 사용 예시
const { summarizeMemo, isLoading, error } = useMemoSummarize()

// 메모 요약 실행
const summary = await summarizeMemo(memo.content)
if (summary) {
  console.log('요약 결과:', summary)
}

Google Gemini API密钥设置:

1. 谷歌AI工作室在中发放API密钥
2. .env.local 在文件中 GEMINI_API_KEY 设置
3. 单击注解详细模式中的按钮执行摘要

LocalStorage直接操作

import { localStorageUtils } from '@/utils/localStorage'

// 모든 메모 가져오기
const memos = localStorageUtils.getMemos()

// 메모 추가
localStorageUtils.addMemo(newMemo)

// 메모 검색
const results = localStorageUtils.searchMemos('React')

🚀 发布

Vercel分发

npm run build
npx vercel --prod

Netlify部署

npm run build
# dist 폴더를 Netlify에 드래그 앤 드롭

📄 许可证

MIT许可证-用于学习和实践。

🤝 贡献

这个项目是为了培训而制作的。请将改善事项或错误报告提交到热点或PR。

______________________________________________________________________

由...制作❤️ 用于实践工作坊