Datawhale AI冬令营（第二期）动手学AI辅助编程task3---学AI编程做项目的方法论，构建自己的应用

前言——回顾我们的“初阶武林秘籍”

开始高阶心法——构建自己应用的方法论

发散灵感

明确灵感之上的需求

实现和完善需求基础上的功能

HTML结构

代码结构

代码亮点

前言——回顾我们的“初阶武林秘籍”

相信大家已经领会到了 写好提示词，借助AI力量 的重要性，这就是我们想传授给你的 初阶武林秘籍 ，此时你已经拥有了和 AI对话创作 的能力。

我该如何确定我的需求属于前端开发，还是后端开发，还是两者都要涉及呢？

接下来，就让我们传授大家AI辅助编程的 高阶心法——构建自己应用的方法论 ！接下来的内容中：你将学会：

如何用AI辅助自己发散灵感，进行头脑风暴
如何用AI辅助自己明确“风暴”之上的需求
如何用AI辅助自己实现和完善需求基础之上的功能

开始高阶心法——构建自己应用的方法论

也许大家会问， 为什么不直接讲构建应用的方法论，而是让我们先学习提示词工程，学会借助AI的力量呢？

有一句古话说的好， “合抱之木，生于毫末” 。既然是 方法论 ，必然有 底层原理 支撑，我们要想构建自己的应用，就必然遵循一定的 章法或程序 ，而我们所遵循的 章法或程序 ， 底层原理来自于我们对于“提示词工程”的掌握。

只有掌握了 “提示词工程” ，我们才能 “借助AI的力量，与AI对话”
只有 掌握了与“与AI对话”的能力 ，我们才能 “让AI辅助我们” ：
- 发散我们的灵感
- 明确灵感之上的需求
- 实现和完善需求基础上的功能

发散灵感

通过AI辅助，得到了能够落地实现的“灵感”—— 专注于隐私保护和基于时间的个人成长记录 。接下来，我需要通过AI辅助，明确灵感之上的需求。

实现和完善需求基础上的功能

开发需要遵循 前后端分离 的原则，AI辅助编程也不例外，这里以前端单页设计作为演示，由于上述AI回应的前端框架“react和vue”涉及到的前置知识较多也较为复杂，因此实际提示词演示仍为html、tailwind css和javascript为主：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>情绪游戏</title><link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"><style>body {font-family: 'Arial', sans-serif;background-color: #f7fafc;}.story-container {max-width: 600px;margin: 50px auto;padding: 20px;background-color: #ffffff;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}</style>
</head>
<body><div class="story-container"><h1 class="text-2xl font-bold mb-4">情绪之旅</h1><p id="story-text" class="mb-4"></p><button id="next-btn" class="px-4 py-2 bg-blue-500 text-white rounded">下一步</button><button id="continue-btn" class="px-4 py-2 bg-green-500 text-white rounded mt-2 hidden">继续玩</button><div class="mt-6"><h2 class="text-xl font-semibold mb-2">情绪控制</h2><div class="flex items-center"><span class="mr-2">焦虑:</span><input type="range" id="anxiety-slider" min="0" max="100" value="50"></div><div class="flex items-center mt-2"><span class="mr-2">困惑:</span><input type="range" id="confusion-slider" min="0" max="100" value="50"></div></div><div class="mt-6"><h2 class="text-xl font-semibold mb-2">剧情记录</h2><textarea id="story-log" rows="10" class="w-full p-2 border rounded" readonly></textarea></div></div><div id="story-section"><p id="story-text"></p><textarea id="story-log" readonly></textarea><button id="continue-btn" class="hidden">继续玩</button></div><div id="hint-section" class="hidden"></div> <script src="game.js"></script>
</body>
</html>

HTML结构

头部（<head>）部分：
- 设置了字符编码为UTF-8。
- 设置了视口，以确保页面在移动设备上有良好的显示效果。
- 引入了Tailwind CSS库（版本2.2.19），用于快速实现样式设计。
- 定义了一些自定义样式，主要用于设置页面的字体、背景色以及故事容器的样式。
主体（<body>）部分：
- 包含一个主要的故事容器（<div class="story-container">），其中包含了游戏的标题、故事文本、按钮、情绪控制滑块和剧情记录文本框。
  - 标题：使用<h1>标签显示“情绪之旅”。
  - 故事文本：使用<p id="story-text">标签来动态显示故事内容（初始为空）。
  - 按钮：
    - “下一步”按钮（<button id="next-btn">），用于推进故事。
    - “继续玩”按钮（<button id="continue-btn">），初始状态为隐藏，可能在某些情况下显示以允许用户继续游戏。
  - 情绪控制：包含两个滑块，分别用于控制“焦虑”和“困惑”的情绪值。
  - 剧情记录：使用<textarea id="story-log" readonly>来显示游戏的剧情记录，用户不能编辑。

总的来说，这个HTML页面是一个情绪管理或互动故事游戏的基础框架，通过JavaScript可以实现丰富的游戏逻辑和交互效果。

document.addEventListener('DOMContentLoaded', () => {const storyText = document.getElementById('story-text');const nextBtn = document.getElementById('next-btn');const continueBtn = document.getElementById('continue-btn');const storyLog = document.getElementById('story-log');const anxietySlider = document.getElementById('anxiety-slider');const confusionSlider = document.getElementById('confusion-slider');const hintSection = document.getElementById('hint-section'); // 假设页面上有一个用于显示提示的sectionconst story = ["主角发现自己只有20岁的生命，感到无比焦虑。","他开始思考自己的未来，困惑于时间的短暂。","在一次散步中，他遇到了一个智者，智者给了他一些建议。","智者说：'珍惜当下，活出精彩。' 主角若有所思。","主角决定用剩下的时间去做自己热爱的事情，不再焦虑。"];let currentStep = 0;function updateStory() {storyText.textContent = story[currentStep];storyLog.value = `${currentStep + 1}. ${story[currentStep]}\n` + storyLog.value.split('\n').slice(0, -1).join('\n') + '\n'; // 更新日志，保持最新在上console.log(`焦虑: ${anxietySlider.value}, 困惑: ${confusionSlider.value}`);}nextBtn.addEventListener('click', () => {if (currentStep < story.length - 1) {currentStep++;updateStory();} else {nextBtn.classList.add('hidden');continueBtn.classList.remove('hidden');}});continueBtn.addEventListener('click', () => {// 重置故事，并添加新元素currentStep = 0;storyLog.value = '欢迎再次游玩！新的旅程即将开始...\n'; // 添加欢迎消息到日志updateStory();// 显示一个新的提示const hintElement = document.createElement('div');hintElement.textContent = "提示：在故事中做出选择时，请仔细考虑你的情感反应。";hintSection.innerHTML = ''; // 清空之前的提示hintSection.appendChild(hintElement);nextBtn.classList.remove('hidden');continueBtn.classList.add('hidden');});// 初始化故事updateStory();// 初始隐藏提示部分（如果页面加载时没有提示）hintSection.classList.add('hidden');// 假设我们想在游戏开始时显示一个初始提示const initialHint = document.createElement('div');initialHint.textContent = "提示：点击‘下一步’继续故事。";hintSection.classList.remove('hidden'); // 如果需要初始提示，则移除隐藏类hintSection.appendChild(initialHint);
});

代码结构

事件监听器：
- document.addEventListener('DOMContentLoaded', () => {...})：确保在DOM完全加载后执行代码，防止在元素未加载时尝试访问它们。
元素获取：
- 使用document.getElementById获取页面上的元素，包括故事文本、按钮、日志、滑块和提示部分。
故事数组：
- const story = [...]：定义了一个包含故事各个段落的数组。
状态管理：
- let currentStep = 0：用于跟踪当前故事步骤。
函数定义：
- function updateStory() {...}：
  - 更新storyText以显示当前步骤的故事内容。
  - 更新storyLog，将当前步骤添加到日志的顶部。
  - 在控制台打印当前的焦虑和困惑滑块值。
事件处理程序：
- nextBtn.addEventListener('click', () => {...})：
  - 如果当前步骤不是最后一个，则递增currentStep并调用updateStory。
  - 如果是最后一个步骤，隐藏“下一步”按钮，显示“继续玩”按钮。
- continueBtn.addEventListener('click', () => {...})：
  - 重置故事到第一步，更新日志以显示欢迎消息。
  - 创建一个新的提示元素并添加到hintSection。
  - 显示“下一步”按钮，隐藏“继续玩”按钮。
初始化：
- updateStory()：初始化时显示第一个故事步骤。
- hintSection的初始状态设置：
  - 初始隐藏提示部分。
  - 如果需要，添加一个初始提示并显示hintSection。