Vibe Coding - AI时代的开发新方式

AI时代的开发新方式 - 让AI成为你的编程伙伴

🗓️

活动日期

2025年10月18日

📍

活动地点

南区计算机楼 B110苹果机房

👨‍💻

主要内容

AI辅助开发实战

🎯

适合人群

所有对编程感兴趣的同学

活动概述 NEW

欢迎来到 Vibe Coding 工作坊！在这个AI时代，编程的方式正在发生革命性的变化。本次活动将带你探索如何使用Qoder等AI辅助开发工具，让AI成为你的编程伙伴，大幅提升开发效率。

无论你是想开发iOS应用、搭建个人网站，还是创建有趣的小项目，AI都能帮助你快速实现想法。即使是零基础的同学，也能在AI的帮助下完成令人惊叹的作品！

💡 你将学到什么？

✅ 如何使用Qoder进行AI辅助开发
✅ 认识Xcode及其项目结构
✅ 如何编写高效的AI提示词（Prompt）
✅ iOS应用开发基础流程
✅ 静态网页开发与部署
✅ API的使用与集成

🎯 Part 1: 认识Xcode

Xcode是苹果官方的集成开发环境（IDE），是iOS开发的核心工具。虽然我们主要使用Qoder进行开发，但了解Xcode的项目结构对于理解iOS开发至关重要。

创建你的第一个Xcode项目

打开Xcode后，你会看到一个简洁的欢迎界面。点击 Create New Project 开始创建你的第一个iOS项目。

选择默认的 App 模板，这是最基础的iOS应用模板。

输入你的项目名称，这里演示使用 test 作为项目名。建议使用有意义的英文名称。

选择一个合适的文件夹保存项目，也可以点击左下角的 New Folder 创建新文件夹。

理解Xcode项目结构

创建完成后，你会看到Xcode的主界面，包含了许多文件和配置选项。现阶段我们不需要深入了解每个文件的作用，重点是理解项目的整体结构。

🔍 重要发现：xcodeproj文件

在Finder中打开项目文件夹，你会发现一个 .xcodeproj 文件。这个文件是什么呢？

xcodeproj文件是Xcode项目的大脑，它定义了：

项目中包含哪些源文件
资源文件的位置
使用的frameworks
编译配置
子项目关系

双击这个文件，就能打开Xcode并加载整个项目！

💡 快速定位文件

如果找不到保存的项目位置，按下 Command + 空格 打开聚焦搜索，直接搜索项目文件夹名即可！

🤖 Part 2: AI辅助开发实战

构思你的项目

在开始动手之前，我们需要明确想要创建什么。但作为初学者，我们可能不清楚需要哪些技术栈、开发流程是怎样的。这时候，AI就是你最好的老师！

📝 编写高效的Prompt模板

一个好的Prompt应该包含以下要素：

text

你现在是[角色/身份]
+ 我现在想要做[目标]
+ 我的想法是[详细描述]
+ 限制条件：[约束]
+ 我需要你[具体要求]

完整模板示例：

text

你是一个 [角色/身份]。
你的任务是 [要完成的目标或任务]。

以下是我提供的信息或材料：
[输入内容，例如文本、数据、问题描述等]

请你：
1. [具体要求1]
2. [具体要求2]
3. [具体要求3]

输出时请遵循以下格式/风格：
[输出格式或风格说明]

限制条件：
- [比如：语言简洁、字数不超过××]
- [风格、受众定位等]

🎓 深入学习Prompt工程

想要系统学习Prompt编写技巧？推荐观看吴恩达的提示词工程教程：【吴恩达】2025年公认最好的【提示词工程】教程

使用Qoder开始开发

打开Qoder，选择 打开项目，选择一个文件夹作为项目存储位置（建议使用英文命名）。

首次打开时，选择 信任此作者 以启用完整功能。

Qoder的界面分为三个主要区域：

左侧：文件资源管理器
中间：代码预览区域
右侧：AI对话框

⚡ 提升效率小技巧

厌倦了每次都要手动点击确认？

点击右上角用户头像 → Qoder设置 → 智能会话 → 将终端和Web工具改为 自动执行，让AI帮你自动处理！

将你精心准备的Prompt粘贴到对话框中，按Enter发送。接下来，就是见证奇迹的时刻——AI会为你自动生成完整的项目代码！

示例：创建俄罗斯方块游戏的完整Prompt

text

请生成一个完整、可编译的 Xcode iOS/iPadOS（Universal）项目，名为 "TetraPlay"（俄罗斯方块小游戏）。要求如下：

总体与技术栈：
- 使用 Swift 5.9+，Xcode 15+。
- 游戏渲染使用 SpriteKit，主 UI 使用 SwiftUI + 一个承载 SKView 的桥接（或 SwiftUI 的 SpriteKit 支持）。
- 项目应是一个标准 Xcode 项目（.xcodeproj），包含 app target 与 tests target。

核心功能（必做）：
1. 基本俄罗斯方块玩法：
   - 七种标准 Tetrimino（I, O, T, S, Z, J, L），包含旋转与边界检测（SRS 或简化旋转规则均可，但请注明）。
   - 方块自动下落、软降（按住向下增速）、硬降（快速到底）。
   - 左右移动、旋转（顺/逆时针可选），碰撞检测。
   - 检测并消除满行、更新分数并显示行数与等级（level）。
   - 下一块预览（至少显示下 1 个方块）。

2. 控制方法：
   - 触摸控制：左右滑或点击移动，轻扫下落，顶部/右侧按钮用于旋转（请实现触控友好方案）。
   - 键盘支持（在 iPad 上）：左右箭头、上键/空格旋转或硬降、下键软降。
   - 手柄支持（GCController）：左右/按钮映射移动/旋转/下落/暂停。

3. UI：
   - 主菜单（开始、继续、设置、排行榜/最高分）、暂停面板、游戏结束画面。
   - HUD 显示当前分数、最高分、当前等级、下一块。
   - 设置面板（音量开关、振动开关、控制模式选择：触摸/滑动/按钮）。

4. 持久化：
   - 使用 UserDefaults 保存最高分、设置项。
   - README 中注明如何启用 Game Center 排行榜（可选，若实现则加注释说明）。

5. 音效与资源：
   - 提供示例音效（或占位文件）和占位美术资源（Assets.xcassets）。
   - AudioManager 封装播放背景音乐和音效（开启/关闭开关）。

6. 测试：
   - 包含至少 3 个 Unit Test：行消除（Board 的消行函数）、得分计算、方块旋转与边界检测。
   - 测试应使用 XCTest 并能通过 `xcodebuild test` 运行。

工程质量与交付：
- 代码风格清晰、模块化，包含注释与文档注释（重要函数、旋转规则、得分公式）。
- 包含 README.md，写明：运行方法、Xcode 版本、iOS / iPadOS 目标、常用快捷键、项目结构说明、如何运行测试。
- 提供简单的 Git 仓库结构（.gitignore），可选提供 GitHub Actions CI 配置（macos-latest，xcode 15，运行 build & test）。

额外说明（可选实现但需标注）：
- 可选：Game Center 排行榜与成就。
- 可选：iCloud 同步最高分（若实现请说明所用 API）。
- 可选：多语言 (en/zh) 本地化支持（若实现请一并生成 Localizable.strings）。

交付格式：
- 请直接生成完整 Xcode 项目文件与源码（可在 zip 中）。  
- 在 README 里列出"如何在本地编译并运行"的命令（例如：`open TetraPlay.xcodeproj`，然后在 Xcode 选择 target，或使用 `xcodebuild -scheme TetraPlay -destination 'platform=iOS Simulator,name=iPhone 15 Pro,OS=17.5' build`）。
- 在 README 里列出"验收测试步骤"。例如：
  1. 在 iPhone Simulator 运行并验证触摸控制。
  2. 在 iPad Simulator 使用键盘操作验证键盘映射。
  3. 运行 `xcodebuild test` 并确保所有测试通过。

请在实现前先生成一个简短的开发说明（≤ 200 字），说明核心实现思路（例如：方块表示、旋转规则、碰撞检测、渲染更新节奏），接着开始生成代码文件。谢谢。

🔧 Part 3: 调试与完善

AI虽然强大，但生成的代码可能存在一些问题。这时候就需要我们进行调试和优化。

构建项目

当AI完成代码生成后，直接告诉它：

text

请你帮我构建这个项目，直到项目构建成功。

AI会自动进行编译并修复可能出现的错误。

使用Xcode进行微调

有些视觉效果和交互细节，我们可以在Xcode中进行精细调整。

比如发现了一些UI布局问题：文字位置偏移、大小不合适、颜色不喜欢等。

打开主文件，找到 ContentView()，右键选择 Jump to Definition 跳转到定义位置。

Xcode的界面分为四个区域：

左侧：文件资源管理器
中间：代码编辑器
右侧中：实时预览
右侧右：属性面板

点击重试按钮启动实时预览，可以实时看到UI效果。

左下角有三个工具按钮：

交互模式：直接与UI交互
选择模式：点击组件查看对应代码
更多选项

使用选择模式点击有问题的UI元素，代码编辑器会自动高亮对应代码。

在右侧属性面板中可以直接调整大小、颜色、字体等属性，代码会自动更新！

🎨 Xcode界面微调教程

以下是完整的SwiftUI界面调整方法和示例，让你轻松掌握Xcode的界面微调技巧。

🟢 1. 控件的基本组成：View + 修饰符

SwiftUI 里的界面控件都以 View 为单位，例如：

swift

Text("分数")

这是一个文字控件。在 SwiftUI 里，我们不会去拖"按钮"或"文本框"，而是直接用代码堆积"积木"，每个积木都有外观修饰语句，叫做 修饰符（Modifier）。

例如：

swift

Text("分数")
    .font(.system(size: 14, weight: .medium)) // 字体大小 + 粗细
    .foregroundColor(.white)                  // 字体颜色

🔠 2. 修改字体大小与粗细

Xcode 中修改字体有三种常见方法：

写法	效果
`.font(.title)`	使用系统预设的大号标题
`.font(.system(size: 20))`	手动设置字体大小
`.font(.system(size: 20, weight: .bold))`	同时设置字体粗细（bold / medium / light）

举例：

swift

Text("分数")
    .font(.system(size: 14, weight: .medium))

🎨 3. 设置文字或图形颜色

使用 .foregroundColor() 或 .fill()：

swift

Text("分数")
    .foregroundColor(.white)

Rectangle()
    .fill(Color.blue)

如果希望颜色透明一点，可以加 .opacity(0.5)：

swift

Color.blue.opacity(0.5)

🟧 4. 设置背景色和圆角

任何 View 都可以加背景：

swift

Text("继续游戏")
    .padding()
    .background(Color.blue)      // 背景颜色
    .foregroundColor(.white)     // 前景色（文字颜色）
    .cornerRadius(10)            // 圆角

也可以用 RoundedRectangle 更精细控制：

swift

RoundedRectangle(cornerRadius: 10)
    .fill(Color.black.opacity(0.6))

📏 5. 设置控件的大小与位置

（1）固定尺寸：

swift

.frame(width: 100, height: 50)

（2）相对布局（固定比例）：

使用 GeometryReader 可以获取屏幕的宽高，然后根据比例设置大小：

swift

GeometryReader { geometry in
    let width = geometry.size.width * 0.5 // 宽度占屏幕一半
    Rectangle()
        .frame(width: width, height: width)
}

（3）用坐标（x, y）指定位置：

swift

.position(x: 100, y: 200)

📍 注意

坐标是相对于父容器左上角计算的。例如 .position(x: 100, y: 200) 表示距离左边 100 像素、上边 200 像素的位置。

在俄罗斯方块项目的 NextTetriminoView 中就是这么用的：

swift

.position(
    x: centerOffset + CGFloat(position.x) * blockSize,
    y: centerOffset - CGFloat(position.y) * blockSize
)

这代表每个俄罗斯方块小格子的位置是通过计算出来的。

💠 6. 布局容器：VStack / HStack / ZStack

SwiftUI 通过"堆叠"控件来决定排版：

VStack { ... }：竖着排
HStack { ... }：横着排
ZStack { ... }：叠放（上下一层层堆）

示例：

swift

ZStack {
    Color.black                // 最底层背景
    VStack {
        Text("分数")
        Text("1000")
    }
}

这表示有一个黑色背景，然后在上面放了两行文字。

📱 7. 在 Xcode 预览中实时调整

在 Xcode 右上角点击 Canvas（画布），你会看到代码右侧出现"实时预览"。任何修改（字体、颜色、位置）都会立即更新。

例如：

swift

#Preview {
    GameView(gameManager: GameManager())
}

如果你想改颜色或字体，只需要改代码，右边的预览马上变化。

🧭 8. 常用控件与修饰符速查表

功能	修饰符	示例
字体大小	`.font(.system(size:))`	`.font(.system(size:18))`
字体粗细	`.fontWeight(.bold)`	`.fontWeight(.semibold)`
字体颜色	`.foregroundColor()`	`.foregroundColor(.white)`
背景颜色	`.background()`	`.background(Color.blue)`
圆角	`.cornerRadius()`	`.cornerRadius(10)`
宽高	`.frame(width:height:)`	`.frame(width:100,height:50)`
透明度	`.opacity()`	`.opacity(0.5)`
位置	`.position(x:y:)`	`.position(x:150,y:200)`
内边距	`.padding()`	`.padding(10)`
边框	`.border(Color,width:)`	`.border(.white,width:2)`

🌐 Part 4: 静态网页开发与部署

除了iOS开发，我们还可以创建静态网页项目。这对于不熟悉Mac或想要快速搭建个人主页的同学特别友好！

💼 项目一：个人主页

创建一个炫酷的个人主页，展示你的作品集、技能和联系方式。

技术栈：HTML + CSS + JavaScript

部署平台：GitHub Pages（免费！）

🎯 项目二：AI Quiz

基于AI的智能问答系统，可以上传PDF/PPT自动生成测验题目。

技术栈：Next.js + TypeScript + AI API

特色：集成智谱AI API

使用GitHub Pages部署网站

登录GitHub，点击 new 创建新仓库。

输入仓库名称，点击 Create repository 创建。

点击 uploading an existing file 上传现有文件。

将项目文件拖入上传区域。重要：确保包含 index.html 文件！

⚠️ 必须包含的文件

index.html - 网站入口文件（必须）
README.md - 项目说明（推荐）
其他CSS、JS、图片等资源文件

上传完成后，点击 Settings 进入设置页面。

在左侧菜单找到 Pages，选择 GitHub Actions 作为部署方式。

选择 Static HTML 模板，点击 Configure。

直接点击 Commit changes 保存配置。

等待几分钟后，你的网站就部署成功了！点击 Visit site 访问，分享给朋友吧！🎉

🔑 Part 5: API使用指南

对于AI Quiz等需要调用AI服务的项目，我们需要获取API密钥。这里以智谱AI为例。

获取智谱AI API密钥

访问智谱AI开放平台，注册并登录账号。

鼠标移动到右上角头像，选择 API Key。

点击 添加新的API Key，给密钥取个名字，然后复制生成的API Key。

在主页的 开发者 部分可以找到详细的API调用文档。

💡 让AI帮你调用API

你不需要自己编写API调用代码！只需要：

将API密钥提供给AI
告诉AI你想实现什么功能
AI会自动生成完整的API调用代码

AI Quiz项目完整Prompt示例

以下是创建AI Quiz项目的完整prompt，你可以直接复制使用：

text

系统角色说明（给 Qoder 的指令）：

你是负责实现「基于上传的 PDF/PPT 自动生成测验(Quiz)」功能的后端/逻辑组件。请严格按下列规范工作 —— 所有题目与答案**必须**以用户上传的文件内容为准，不得加入文件外的假设或通用常识。生成的项目需包含前端 (Next.js App Router + TypeScript + Tailwind) 与后端 API 路由（Next.js route handlers），并可直接运行。

***项目必须同时生成一个 run.sh 脚本，用户在 macOS 上执行 `chmod +x run.sh && ./run.sh` 即可安装依赖并启动开发服务器。***

---

## 智谱 API (Zhipu) 配置（已为你填入 Key）
在生成的 `.env.local` 中请包含以下内容（Qoder 代为生成）：

ZHIPU_API_KEY=你的API密钥
ZHIPU_API_URL=https://open.bigmodel.cn/api/paas/v4/chat/completions

> 如果你希望不把 key 明文放在仓库，请在生产说明中写明如何通过环境变量注入（例如 CI / Docker secrets）。

---

## 功能要点（必实现）

1. 文件解析：
   - 接收用户上传的 PDF/PPT（多页、多幻灯片）。
   - 将文件切分为页/幻灯片单元，提取每页纯文本及文字位置信息（用于前端高亮/预览）。对扫描件执行 OCR，并返回 `is_ocr` 与 `ocr_confidence`。
   - 若某页解析失败，返回 `parse_error` 并列出失败页码与错误原因，前端显示可重试提示。

2. 题目生成：
   - 可按指定页范围或整份文件生成题目。
   - 题型：多项选择题（MCQ）与开放式问答题（Short/Long answer）。
   - 可配置题量与难度（例如 5/10/20，simple/medium/hard），可配置 MCQ 比例。
   - 每题必须返回：题干、题型、（MCQ）选项列表（≥3）、正确答案（选项 key）、正确答案的**精确摘录**（来自文件）、答案页码、页内字符起止位置或坐标、用于高亮的短片段（≤200 字）。

3. 答题反馈（选择题）：
   - 用户答题后即时返回 `is_correct`。
   - 若错误：返回 `correct`、基于文件的 AI 解析（逐句/逐点说明并引用文件句子或段落）、以及"定位信息"（页码 + 用于高亮的文本片段，包含前后 30–80 字）。
   - 返回 `preview_html` 或 `preview_text` 字段用于前端高亮展示。

4. 问答题处理：
   - 后端不自动判分（除非选择人工审核或特殊配置），用户提交后显示"参考答案"。
   - 参考答案必须为文件摘录或严格基于文件的摘要，并标注页码与片段。
   - 若问题在文件中对应多个相关段落，返回所有段落与页码。

5. 可审核与可溯源：
   - 每题和每条解析都必须包含溯源字段：`page`, `char_start`, `char_end`, `snippet`（≤200 字），方便管理员核对与编辑。

6. 安全与边界：
   - 对 OCR 置信度低的页标注 `ocr_low_confidence` 并建议人工校验。
   - 若源信息不足以生成唯一正确答案，响应 `insufficient_source`，切勿编造答案。

---

## API/路由与数据契约（Qoder 请按此实现）

### 1) `/api/upload` （前端 -> 后端 文件上传，后端负责解析/OCR）
Request: multipart/form-data 包含文件与选项
Response:
{
  "status":"ok",
  "pages":[
    {"page":1,"text":"...","text_snippets":[{"start":100,"end":180,"text":"..."}],"is_ocr":false},
    {"page":2,"parse_error": "图片解析失败或OCR低置信度", "is_ocr": true, "ocr_confidence": 0.62}
  ]
}

### 2) `/api/generate` （前端 -> 后端 -> 智谱 API ）

Request:
{
  "pages":[1,2,3],
  "num_questions":10,
  "mcq_ratio":0.6,
  "difficulty":"medium",
  "format":"strict_source_based"
}

后端实现须：
- 将被请求页的纯文本（含每段字符索引）传入智谱模型输入，并在 system/user 指令中**严格限定"仅可使用所提供文本作为知识源"**。
- 要求智谱返回 JSON 严格按照指定模式。

### 3) `/api/verify` （前端 -> 后端，用于 MCQ 即时判分）

Request:
{ "question_id":"q_001", "selected":"A", "user_id":"stu_123" }

Response:
{
  "is_correct": false,
  "correct":"B",
  "explanation":"引用页5，句子：\"...\"，说明为什么B对A错",
  "source":{"page":5,"snippet":"...", "char_start":..., "char_end":...}
}

---

## 错误码与边界返回（后端必实现）

- `insufficient_source` — 指定页信息不足以生成唯一答案
- `parse_error` — 智谱返回无法解析或后端 JSON 解析失败
- `ocr_low_confidence` — OCR 置信度低，需人工校验
- `quota_exceeded` — 智谱/网络调用返回配额错误

---

## 前端 UI 建议（Qoder 请生成页面）

- `/` 上传页面：文件缩略预览、OCR 标识、选择页码范围、题量、难度、MCQ 比例、生成按钮
- `/quiz` 题目页：显示题目列表，MCQ 选择后即时显示结果与解析折叠面板（包含"查看原文"高亮功能）；问答题提交后显示参考答案卡片
- 审核模式页面：管理员可以查看每题的原文引用并编辑修正题干/选项

---

## run.sh 要求（Qoder 必须生成）

生成一个 `run.sh`，内容如下（在项目根）：

#!/bin/bash
set -e
echo "🚀 Installing dependencies..."
npm install
echo "✅ Dependencies installed."
echo "🔁 Building..."
npm run build || true
echo "🌐 Starting Next.js dev server..."
npm run dev

并在生成说明里写明：
- 运行前请执行 `chmod +x run.sh`
- 或者直接：`bash run.sh`

---

## 输出要求（Qoder 返回给我）

1. 项目文件树（主要文件与目录）
2. 主要文件代码（至少包含：`app/page.tsx`, `app/quiz/page.tsx`, `app/api/upload/route.ts`, `app/api/generate/route.ts`, `app/api/verify/route.ts`, `run.sh`, `.env.local` 样例）
3. 运行说明（如何启动、如何替换 Key、如何切换模型名）
4. 简短的调试建议（如何查看智谱返回的原始响应、如何在本地 mock 智谱返回用于调试）

---

## 其他实现细节（给后端/工程师的提示）

- 给智谱的请求尽量把 `temperature: 0.0`，并强制要求 JSON 输出，以便保证可重复性与易解析性。
- 对于长文档，采用"检索 + 片段摘要 + 题目生成"流程：先检索最相关段落，再让智谱基于这些段落生成题目并返回引用。
- 所有返回必须包含字符级位置或坐标，便于前端精确高亮。
- 对智谱返回做严格的 JSON schema 校验；若不合法返回 `parse_error` 并记录原始响应以备审计。

---

请基于以上完整 prompt 为我生成项目骨架与文件内容（Qoder 执行端）。谢谢。

AI Quiz项目特别说明

这个项目需要本地服务器运行，建议让Qoder生成启动脚本：

text

请为这个项目生成一个 run.sh 启动脚本，
并告诉我如何在 macOS/Windows 上运行这个项目。

📦 安装Node.js (macOS)

如果你的电脑还没有安装Node.js，可以使用以下命令安装：

bash

# 安装Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 配置Homebrew环境
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

# 安装Node.js
brew install node

# 验证安装
node -v
npm -v

当看到版本号输出时，说明安装成功！

📦 安装Node.js (Windows)

Windows用户推荐直接下载安装包：

访问 Node.js官网
下载 LTS版本 的 .msi 安装包
运行安装向导（确保勾选 Add to PATH）
打开PowerShell验证安装：

powershell

node -v
npm -v

🎓 总结与思考

🤔 AI能否完全替代程序员？

通过这次活动，你可能会产生一个疑问：既然AI这么强大，我们还需要学习编程吗？

答案是：AI是工具，不是替代品。

AI确实能够：

✅ 快速生成基础代码
✅ 帮助理解技术文档
✅ 提供实现思路和建议
✅ 加速开发流程

但AI目前还无法：

❌ 理解复杂的业务逻辑
❌ 进行创新性的架构设计
❌ 保证代码的最优性和安全性
❌ 完全按照你的审美偏好设计UI

AI是你的助手，而不是你的老板。 你需要：

📚 掌握基础的编程知识，才能判断AI生成的代码是否正确
🎨 具备设计思维，才能指导AI创造出符合需求的作品
🔍 培养问题分析能力，才能提出准确的需求
💡 保持创新精神，AI只能辅助，创意来源于你

🚀 下一步学习建议

如果你对iOS开发感兴趣：

学习Swift语言基础
掌握SwiftUI框架
了解iOS人机界面设计规范
参加移动应用创新赛（MAIC）

如果你对Web开发感兴趣：

学习HTML/CSS/JavaScript基础
尝试React、Vue等现代框架
了解API调用与后端交互
部署更多个人项目

如果你对AI应用感兴趣：

学习Prompt工程技巧
了解常见AI模型的能力边界
尝试集成多种AI服务
探索AI在不同领域的应用

记住：AI是放大器，它会放大你的能力。 你懂得越多，AI能帮你实现的就越多！

📚 相关资源

📖

学习资源

查看完整学习资源库

🏆

竞赛信息

了解MAIC等竞赛

👥

加入我们

成为iOS Club成员

💬

问题求助

访问问答社区

用AI赋能你的创意，让想法变为现实

有任何问题？欢迎在活动群或社团群内讨论～

活动日期

活动地点

主要内容

适合人群

活动概述 NEW ​

🎯 Part 1: 认识Xcode

创建你的第一个Xcode项目 ​

打开Xcode并创建新项目

选择项目模板

配置项目信息

选择保存位置

理解Xcode项目结构 ​

🔍 重要发现：xcodeproj文件

🤖 Part 2: AI辅助开发实战

构思你的项目 ​

📝 编写高效的Prompt模板

使用Qoder开始开发 ​

打开Qoder并创建项目

信任作者

了解Qoder工作区

输入Prompt开始创建

🔧 Part 3: 调试与完善

构建项目 ​

使用Xcode进行微调 ​

定位问题代码

使用实时预览

使用选择工具定位组件

🎨 Xcode界面微调教程

🟢 1. 控件的基本组成：View + 修饰符 ​

🔠 2. 修改字体大小与粗细 ​

🎨 3. 设置文字或图形颜色 ​

🟧 4. 设置背景色和圆角 ​

📏 5. 设置控件的大小与位置 ​

（1）固定尺寸： ​

（2）相对布局（固定比例）： ​

（3）用坐标（x, y）指定位置： ​

💠 6. 布局容器：VStack / HStack / ZStack ​

📱 7. 在 Xcode 预览中实时调整 ​

🧭 8. 常用控件与修饰符速查表 ​

🌐 Part 4: 静态网页开发与部署

💼 项目一：个人主页

🎯 项目二：AI Quiz

使用GitHub Pages部署网站 ​

创建GitHub仓库

上传项目文件

配置GitHub Pages

访问你的网站

🔑 Part 5: API使用指南

获取智谱AI API密钥 ​

注册并登录

创建API Key

查看API文档

AI Quiz项目完整Prompt示例 ​

AI Quiz项目特别说明 ​

📦 安装Node.js (macOS)

📦 安装Node.js (Windows)

🎓 总结与思考

🤔 AI能否完全替代程序员？

🚀 下一步学习建议

📚 相关资源

学习资源

竞赛信息

加入我们

问题求助

活动概述 NEW

创建你的第一个Xcode项目

理解Xcode项目结构

构思你的项目

使用Qoder开始开发

构建项目

使用Xcode进行微调

🟢 1. 控件的基本组成：View + 修饰符

🔠 2. 修改字体大小与粗细

🎨 3. 设置文字或图形颜色

🟧 4. 设置背景色和圆角

📏 5. 设置控件的大小与位置

（1）固定尺寸：

（2）相对布局（固定比例）：

（3）用坐标（x, y）指定位置：

💠 6. 布局容器：VStack / HStack / ZStack

📱 7. 在 Xcode 预览中实时调整

🧭 8. 常用控件与修饰符速查表

使用GitHub Pages部署网站

获取智谱AI API密钥

AI Quiz项目完整Prompt示例

AI Quiz项目特别说明