📝 备忘录应用程序（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 install3.运行开发服务器
npm dev4.浏览器连接
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密钥设置:
- 谷歌AI工作室在中发放API密钥
.env.local在文件中GEMINI_API_KEY设置- 单击注解详细模式中的按钮执行摘要
LocalStorage直接操作
import { localStorageUtils } from '@/utils/localStorage'
// 모든 메모 가져오기
const memos = localStorageUtils.getMemos()
// 메모 추가
localStorageUtils.addMemo(newMemo)
// 메모 검색
const results = localStorageUtils.searchMemos('React')🚀 发布
Vercel分发
npm run build
npx vercel --prodNetlify部署
npm run build
# dist 폴더를 Netlify에 드래그 앤 드롭📄 许可证
MIT许可证-用于学习和实践。
🤝 贡献
这个项目是为了培训而制作的。请将改善事项或错误报告提交到热点或PR。
______________________________________________________________________
由...制作❤️ 用于实践工作坊