From d6e50923e972c18bcc09520370ab8f34f21f0d3c Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Wed, 27 Dec 2023 08:20:22 +0800
Subject: [PATCH 1/9] Add files via upload
---
pages/hackpack-web-next.md | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
create mode 100644 pages/hackpack-web-next.md
diff --git a/pages/hackpack-web-next.md b/pages/hackpack-web-next.md
new file mode 100644
index 0000000..75004f1
--- /dev/null
+++ b/pages/hackpack-web-next.md
@@ -0,0 +1,24 @@
+# Web Next 教程
+
+## 入门指南
+本教程旨在帮助你迅速上手 [Next](https://nextjs.org)，并使用 React 和 Express 制作网站。最后，你将创建一个从 [PokéApi](https://pokeapi.co/) 获取数据并属于自己的宝可梦图鉴网站！
+
+### 什么是 NextJS？
+NextJS 是一个框架，它允许你快速开始使用 React 和服务器端代码。它带有内置功能，如路由（路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程）、热模块替换（允许在运行时更新各种模块，而无需进行完全刷新）、服务器端渲染（一种在用户自己的服务器上加载网站的 JavaScript 的方法）和代码分割（一种将代码拆分成多个独立文件的技术），可以提高性能，而这些功能如果自己实现可能会是一个**巨大**的痛苦。
+
+### 入门
+在本地克隆此存储库并安装依赖项：
+
+```
+git clone https://github.com/TreeHacks/hackpack-web-next.git
+```
+
+如果想启动，请运行以下命令：
+
+```
+npm install
+```
+
+你可以通过访问 http://localhost:3000 打开网站。请注意，现在的终端将监视代码的更改并自动重新编译代码。尝试更改 `pages/index.js` 中的一些文本，网站会立即更改。这被称为 [热模块替换 (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)！
+
+
From 0af66e6ee8473f9843844f67cd22bab8d19e6982 Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Wed, 27 Dec 2023 09:08:23 +0800
Subject: [PATCH 2/9] Add files via upload
---
pages/hackpack-web-frontend.md | 78 +++++++++++++++-------------------
1 file changed, 35 insertions(+), 43 deletions(-)
diff --git a/pages/hackpack-web-frontend.md b/pages/hackpack-web-frontend.md
index 86338de..1bfbdb8 100644
--- a/pages/hackpack-web-frontend.md
+++ b/pages/hackpack-web-frontend.md
@@ -1,16 +1,16 @@
-# Web Frontend Hackpack
+# Web Frontend 教程
-我们将构建一个类似于以下样式的日记/笔记网络应用：
+ 在本教程中，我们将会教你如何开发一个如下图所示日记网页程序
-为了构建这个应用，我们将使用 React 和 Redux。为了存储我们的数据，我们将使用 LocalStorage，它允许您在浏览器中拥有一种小型数据存储。
+为了构建我们的网站，我们将使用 React 和 Redux。除此之外，由于我们希望下次打开网页还可以看到我们写过的日记，我们需要在本地储存数据，那么就要用 LocalStorage 去存储我们的数据，这是一种允许用户在浏览器中拥有一种小型数据存储的技术。
-有许多不同的方法和框架可以用来创建相同的应用，但我喜欢 React + Redux，因为它们共同为您提供了一种处理交互、流动数据和为应用创建新功能的非常清晰和逻辑的方式。
+我们有许多不同的方法和框架可以用来创建相同的应用，但我喜欢 React 和 Redux，因为它们为你提供了一种非常清晰和逻辑地去处理交互、流动数据和为应用创建新功能的方式。
-本教程包括使用许多 ES6（和JavaScript的更新版本）语法的代码。如果您对某些语法不熟悉，[这里](http://es6-features.org/)是一个很好的参考来源。如果您对JavaScript不熟悉，[这里](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)是一个很好的参考工具，[这里](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash)和[这里](https://www.codecademy.com/)是很好的学习资源。
+本教程包括使用许多 ES6（和JavaScript的更新版本）语法的代码。如果你对某些语法不熟悉，[此教程](http://es6-features.org/)是一个很好的参考来源。如果你对JavaScript不熟悉，[此教程](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)是一个很好的参考工具，[此教程](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash)和[此教程](https://www.codecademy.com/)是很好的学习资源。
-首先，确保您已经安装了git并克隆了此存储库：
+首先，确保你已经安装了git并克隆了此存储库：
```
git clone https://github.com/TreeHacks/hackpack-web-frontend
@@ -24,30 +24,27 @@ cd hackpack-web-frontend
npm install
```
-这可能需要一些时间，但一旦安装完成，请确保你可以通过运行以下命令来启动应用程序：
-
-
+这可能需要一些时间，安装完成后，请确保你可以通过运行以下命令来启动应用程序：
```
npm run dev
```
-这个命令运行一个开发服务器（你可以在 `package.json` 中查看实际的命令），它会在你进行更改时自动重新加载你的应用程序。在本教程中，你不需要太担心这个命令的具体内容（但如果你感兴趣的话，该应用程序正在使用 [React 热加载](https://www.youtube.com/watch?v=xsSnOQynTHs)）。
-
-打开 [http://localhost:3000](http://localhost:3000)，你应该能看到一个相当空的界面。
+这个命令会运行一个开发服务器，它会在你进行更改时自动重新加载你的应用程序。在本教程中，我们不会提到这个命令的具体内容（但如果你感兴趣的话，该应用程序正在使用 [React 热加载](https://www.youtube.com/watch?v=xsSnOQynTHs)）。
-现在你已经成功安装并运行了应用程序，让我们开始编码。
+打开 [http://localhost:3000](http://localhost:3000)，你应该能看到一个空界面。
-在 React 中，你的应用程序的每个部分（按钮、标题等）都可以被定义为一个 '组件'，你可以在需要的任何地方重复使用它们。
+现在你已经成功安装并运行了应用程序，让我们开始写代码吧。
+在 React 中，你的应用程序的每个部分（按钮、标题等）都可以被定义为一个 “组件“，你可以在需要的任何地方重复使用它们。
-Redux 本质上允许我们在应用程序中拥有一个集中的数据存储，我们可以通过应用程序流动数据并分派操作来修改它（如果现在完全不明白，不要担心！稍后你会明白的）。
+Redux 本质上允许我们在应用程序中拥有一个数据集中的数据存储，我们可以通过应用程序流动数据并分派操作来修改它（稍后我们会详细介绍）。
-### 构建块（组件）
+### 构建组件
-对于日记界面，我们将需要一个侧边栏和一个编辑界面组件。侧边栏将列出您的条目，您可以单击其中一个来进行编辑，或者创建一个新的条目。编辑界面将是一个纯文本输入区域。让我们进一步定义这些组件。
+对于日记界面，我们将需要一个侧边栏和一个编辑界面组件。侧边栏将列出你的日记条目，你可以单击其中一个来进行编辑，或者创建一个新的日记条目。编辑界面将是一个纯文本输入区域。让我们进一步定义这些组件。
-在 `src/app/components/journal/Sidebar.jsx` 中，用以下内容替换：
+将位于 `src/app/components/journal/Sidebar.jsx` 中的代码，用以下代码替换：
```jsx
import React from 'react';
@@ -92,12 +89,12 @@ const Sidebar = ({
export default Sidebar;
```
-声明语法定义了一个新的 React '组件'。
+声明语法定义了一个新的 React 组件。
在这里，我们硬编码了变量 `entries`，然后通过它们进行迭代，以显示每个条目的 `li` 项。
-接下来，在 `src/app/components/journal/EditEntry.jsx` 中，将内容更改为以下内容：
-```
+接下来，在 `src/app/components/journal/EditEntry.jsx` 中，将原本内容更改为以下代码：
+```jsx
import React from 'react';
import _ from 'lodash';
@@ -126,12 +123,11 @@ const EditEntry = ({
export default EditEntry;
```
-这个 `textarea` 将始终显示我们定义的 `entry` 变量的内容 `Hello world`。
-
-当前默认要显示的组件是 `src/app/components/Journal.jsx`。在该文件中，我们需要将 `Sidebar` 和 `EditEntry` 添加到 `Journal` 组件中，以便在打开网站时渲染它们。在 `Journal.jsx` 文件中，将其更改为以下内容：
+`textarea` 标签定义一个多行的文本输入控件。 文本区域中可容纳无限数量的文本。这个 `textarea` 将始终显示我们定义的 `entry` 变量的内容 `Hello world`。
+当前默认显示的组件是 `src/app/components/Journal.jsx`。在该文件中，我们需要将 `Sidebar` 和 `EditEntry` 添加到 `Journal` 组件中，以便在打开网站时渲染它们。在 `Journal.jsx` 文件中，将其更改为以下代码：
-```
+```jsx
import React from 'react';
import Sidebar from './Sidebar';
import EditEntry from './EditEntry';
@@ -153,7 +149,7 @@ export default Journal;
在顶部导入这两个组件，然后将它们添加到渲染的内容中。
-尝试重新打开应用程序，你会发现无法编辑 `textarea` 的内容。这是因为当其值更改时，它的值没有更新。我在那里留下了一些占位符注释，我们将在那里添加一些**操作**！现在我们将使一切真正实用。
+请尝试重新打开应用程序，你会发现无法编辑 `textarea` 的内容。这是因为当其值更改时，它的值没有更新。我在那里留下了一些占位符注释，我们将在那里添加一些**操作**！现在我们将让一切真正运行起来。
### 操作！
在这个网站的这个迭代中，我们将支持三个操作：
@@ -242,22 +238,21 @@ export const selectEntry = (id) => {
}
```
-这是一大段代码。这里发生了什么呢？
+这一大段代码是什么意思呢？
我们正在定义应用程序可能发生的三种操作。我们将我们的 `entries` 存储在 `localStorage` 中。由于 `localStorage` 将我们的数据存储为字符串，当我们检索和保存数据时，我们必须使用 `JSON.parse` 和 `JSON.stringify` 在字符串和对象之间进行转换。
-`updateEntry` 函数具有一些逻辑，根据 `id` 来保存新条目或更新现有条目。
+1. `updateEntry` 函数具有一些逻辑，根据 `id` 来保存新条目或更新现有条目。
-`newEntry` 创建并保存存储中的新条目。
+2. `newEntry` 创建并保存存储中的新条目。
-`selectEntry` 简单地返回所选 id。
+3. `selectEntry` 简单地返回所选 id。
每个操作最终都返回一个带有 `type` 和其他数据点的对象。我们的 `localStorage` 功能模拟了基本数据库的功能。通常，这些操作将调用某个 API（应用程序编程接口）以更新或检索数据。否则，这些操作可能只是传递数据，比如 `selectEntry` 通知应用程序的其余部分用户输入的一些信息。
-
既然我们已经定义了这些操作，让我们弄清楚如何使用这些操作并相应地更新我们的应用程序状态。
-在 `src/app/reducers/index.js` 中将其更改为以下内容：
+在 `src/app/reducers/index.js` 中将其原本内容更改为以下代码：
```jsx
@@ -320,15 +315,15 @@ const rootReducer = combineReducers({
export default rootReducer;
```
-这又是一大段代码。在顶部，我们有一些逻辑来初始化 `entries`，如果它为空或无效的话。通常情况下，你不太可能遇到任何错误，但有一些边缘情况可能导致你的 `localStorage` 对象出现问题。
+这又是一大段代码。首先，我们有一些逻辑来初始化 `entries`，如果它为空或无效的话。通常情况下，你不太可能遇到任何错误，但有一些边缘情况可能导致你的 `localStorage` 对象出现问题。
然后，我们定义了 `initialState`，这是在应用程序打开时的默认状态（在任何用户交互之前）。
-之后，我们定义了一个 `reducer`，它接受被 `dispatch` 的任何操作，并决定如何使用操作的数据更新状态。如果你以前没有见过 `Object.assign({}, state, { DATA })` 语法，它是将 `{ DATA }` 合并到 `state` 中的新对象中（换句话说，它返回一个带有 `{ DATA }` 的更新状态）。`reducer` 返回这个更新后的状态。然后将应用程序的状态更新为新状态。
+最后，我们定义了一个 `reducer`，它接受被 `dispatch` 的任何操作，并决定如何使用操作的数据更新状态。如果你以前没有见过 `Object.assign({}, state, { DATA })` 语法，它是将 `{ DATA }` 合并到 `state` 中的新对象中（换句话说，它返回一个带有 `{ DATA }` 的更新状态）。`reducer` 返回这个更新后的状态。然后将应用程序的状态更新为新状态。
现在，实际上动作已经 **做** 了一些事情，让我们开始向组件中添加数据和动作。
-将 `src/app/containers/Journal.jsx` 更改为：
+将 `src/app/containers/Journal.jsx` 中原本内容更改为以下代码：
```jsx
@@ -370,7 +365,7 @@ const JournalContainer = connect(
export default JournalContainer;
```
-`JournalContainer` 在这里包装了我们之前定义的 `Journal` 组件，并通过调用 `connect` 将其与Redux的数据存储绑定在一起。
+`JournalContainer` 在这里包装了我们之前定义的 `Journal` 组件，并通过调用 `connect` 将其与 Redux 的数据存储绑定在一起。
在这里，我们还传递了两个函数：`mapStateToProps` 和 `mapDispatchToProps`。我们有这些函数来过滤我们想要传递到 `Journal` 的状态的哪些部分。 `dispatch` 函数本质上是将来自给定操作的数据发送到 reducers，这些 reducers 再次决定如何获取该数据并更新应用程序的整体状态。
@@ -469,15 +464,15 @@ const EditEntry = ({
相比之前的硬编码变量，我们现在使用了传递下来的 `props`（状态数据和调度函数）。
-现在你的应用应该是完全可用的！你可以编辑条目并创建新的条目。
+现在你的应用应该是完全可用的！你可以编辑日记条目并创建新的日记条目。
### 连接到新页面
-由于你将来可能会发现自己需要这样做，这是如何添加到页面的方法。
+因为你将来可能想要添加新的页面，以下如何添加页面的方法。
在你的 `Sidebar` 组件中，在定义的末尾的 `` 后面添加 `About`。在文件的顶部，你会看到我们已经 `import` 了 `{ Link } from 'react-router';`。添加这个后，你就可以点击该链接，它会跳转到 `/about`。你可以在 `src/app/components/about/About.jsx` 中查看该组件。
### 总结
-你已经成功构建了一个基本的 React + Redux 应用程序 - 包括组件、操作、减速器等！一开始，React + Redux 被认为学习曲线陡峭，所以如果你对应用程序中发生的事情仍然有疑问，那没关系。
+你已经成功构建了一个基本的 React 和 Redux 的网站了！一开始，React 和 Redux 的学习是很困难的，所以如果你对应用程序仍然有疑问，那是很正常的。
为了巩固你的理解，这里有一些你可以添加到你的应用程序的内容：
@@ -485,8 +480,5 @@ const EditEntry = ({
- 在侧边栏下每个条目的列表中显示创建/编辑日期
- 为每个条目添加标题属性，并在侧边栏中显示该标题
-除此之外，你可以为这个日志应用程序添加许多功能，放弃整个日志应用程序，并使用你新获得的知识去构建完全不同的东西，通过你的操作将应用程序连接到后端服务器（而不是使用 `localStorage`）。可能性是无穷无尽的。
-
-
-在 `completed` 分支中查看完整的代码。
+除此之外，你可以为这个日志应用程序添加许多功能，放弃整个日志应用程序，并使用你新获得的知识去构建完全不同的东西，通过你的操作将应用程序连接到后端服务器（而不是使用 `localStorage`）。
From 95f7f4bdb249604d01c12294e36e15071611146a Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Wed, 3 Jan 2024 08:48:30 +0800
Subject: [PATCH 3/9] Delete pages/hackpack-web-api.md
---
pages/hackpack-web-api.md | 47 ---------------------------------------
1 file changed, 47 deletions(-)
delete mode 100644 pages/hackpack-web-api.md
diff --git a/pages/hackpack-web-api.md b/pages/hackpack-web-api.md
deleted file mode 100644
index e038cee..0000000
--- a/pages/hackpack-web-api.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Web API教程
-
-### 概述
-
-本研讨会的目标是学习如何使用 Node、MongoDB 和 Express 构建 RESTful Web API。从这个研讨会中，你将了解什么是 Web API，深入了解 Web 的前端/后端结构，并为你的 We b应用程序构建自己的后端！你还将学到一些关于 JavaScript 以及你可以在其中执行的所有有趣的事情。
-
-### 研讨会 - 入门
-要开始完整的研讨会，请确保安装了 Node JS。运行以下命令：
-
-```
-npm install
-npm start
-```
-
-然后服务器应该在 `localhost:3000` 上启动。
-
-该服务器使用 `mongodb-memory-server` 将MongoDB以内存形式运行为数据库，使用Express处理API端点。
-
-如果你想挑战一下，使用`skeleton`分支（`git fetch && git checkout skeleton`），你可以自己填写API端点的实现。
-
-### 什么是API？
-
-API 代表应用程序编程接口。简而言之，API 是一种从你自己的程序访问在服务器上运行的数据和服务的方式。一个很好的公开可用的 API 的例子是 Dog API（确实叫这个）位于https://dog.ceo/dog-api/。你可以通过点击每个路由下列出的 “JSON” 按钮，访问有关 Dog 的各种有趣信息。试试看！
-
-你会注意到你将被重定向到一个包含一些文本的网页，文本使用花括号‘{}’格式化。你看到的是一个以 JSON（JavaScript对象表示法）表示的 JavaScript 对象。JS 对象本质上是 Python 字典或 C++ 映射，它的功能是将键映射到值。实际上 JavaScript 中的几乎所有东西都是一个对象（另一则故事），所以这很重要。它之所以重要的另一个原因是 JSON 是在 Web 中传输数据的标准方式，所以例如当你在网站上注册账户时，发送到Web服务器的数据是 JSON 格式的。此外， MongoDB 将其信息存储在 JavaScript 对象中。
-
-酷的是你可以将这些 API 调用传递到你的 Web 程序中，以便从应用程序中访问返回的数据。这使我们能够集成来自我们自己代码中的公共 API（以及TreeHacks赞助商提供的私有API）的各种有趣信息。我们将在研讨会中演示如何使用 Dog API 做到这一点！
-
-### 前端与后端，单手揭示互联网的魔法
-
-有没有想过互联网是如何工作的？非常简单，当你访问一个网站时，你正在从某个服务器接收一堆 JavaScript、CSS 和 HTML 文件，然后由你的 Web 浏览器运行。在你的浏览器中运行的代码是前端，提供信息的服务器上运行的代码是后端。Web 开发包括编写在两端都运行的代码（全栈开发），人们专门从事其中一方。API本质上是从后端提供资源的代码。由于我们正在构建一个 Web API，我们的研讨会的重点将放在构建后端上。
-
-### 为动物收容所构建社交网络
-
-在研讨会中，我们将假装构建一个 Web API，供一家假设的动物收容所使用。基本上，动物收容所希望能够随机将动物分配给新主人。由于他们位于硅谷，他们还希望在这个操作之上建立一个社交网络，以便能够查看哪些狗主人是朋友，以便协调狗主人的聚会。他们来到 TreeHacks 找一些聪明的大学生为他们完成这个任务，价格便宜。
-
-为了完成这项任务，我们将使用 Node 和 Express 构建一个 Web API，该 API 与 Dog API 进行交互，以及一个相应的前端，允许动物收容所查看有关他们的用户的所有信息。我们希望支持添加人员和将庇护所的狗分配给他们的操作，查看所有狗主人，在两个狗主人之间添加朋友关系，显示狗主人的朋友以组织聚会，并从数据库中删除一个狗主人，以防其狗死亡...（我们想不出更好的理由了，抱歉，我知道这很黑暗，但知道如何做是很重要的，RIP）。
-
-### 资源
-
-你可以在这个 GitHub 仓库的 Master 分支下访问我们的 Web API 的全部代码，并查看我们演示中使用的幻灯片！
-
-Mozilla 还有一个名为 MDN 的出色文档网站，详细介绍了你可能想了解的有关 Web 开发的任何东西。他们有一个很好的文本指南，介绍了 Web 开发的入门知识：https://developer.mozilla.org/en-US/docs/Learn
-
-我们使用的幻灯片是由 TheNetNinja YouTube 频道的 REST API 教程播放列表慷慨提供的。他更深入地解释了构建 REST API 时正在发生的事情，同时使用 React 构建了一个很棒的应用程序，扩展了前端开发方面。你可以在这里查看：https://www.youtube.com/playlist?list=PL4cUxeGkcC9jBcybHMTIia56aV21o2cZ8
-
-
From e490e6a9f651d051625b3e1af14949fb4589fe00 Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Wed, 3 Jan 2024 08:48:57 +0800
Subject: [PATCH 4/9] Add files via upload
---
pages/hackpack-web-api.md | 36 ++++++++++++++++++++++++++++++++++++
1 file changed, 36 insertions(+)
create mode 100644 pages/hackpack-web-api.md
diff --git a/pages/hackpack-web-api.md b/pages/hackpack-web-api.md
new file mode 100644
index 0000000..02b25d0
--- /dev/null
+++ b/pages/hackpack-web-api.md
@@ -0,0 +1,36 @@
+# Web API 教程
+
+### 介绍
+
+本教程的目标是讲述如何学习和使用 Node、MongoDB 和 Express 构建 RESTful Web API。在本教程中，你将了解什么是 Web API，深入了解 Web 的前端和后端结构，并为你的 Web 应用程序构建自己的后端！你还将学到一些关于 JavaScript 的知识以及你可以做的所有有趣的事情。
+
+阅读本教程前，请确保你已经安装了 Node JS。运行以下命令：
+
+```
+npm install
+npm start
+```
+
+服务器将会在 `localhost:3000` 上启动。
+
+该服务器使用 `mongodb-memory-server` ，将 MongoDB 以内存形式运行为数据库并使用Express处理 API 端点。
+
+如果你想挑战一下使用 `skeleton` 分支（`git fetch && git checkout skeleton`），你可以自己填写 API 端点的实现。
+
+### 什么是API？
+
+API 是应用程序编程接口。简而言之，API 是一种从你自己的程序访问在服务器上运行的数据和服务的方式。一个很好的公开可用的 API 的例子是 Dog API，它位于 https://dog.ceo/dog-api/ 。你可以通过点击每个路由下列出的 “JSON” 按钮，访问有关 Dog 的各种有趣信息。
+
+你将被重定向到一个包含一些文本的网页，文本使用花括号‘{}’格式化。你看到的是一个以 JSON（JavaScript对象表示法）表示的 JavaScript 对象。JS 对象本质上是 Python 字典或 C++ 映射，它的功能是将键映射到值。实际上 JavaScript 中的几乎所有东西都是一个对象，所以这很重要。它之所以重要的另一个原因是 JSON 是在 Web 中传输数据的标准方式，所以例如当你在网站上注册账户时，发送到Web服务器的数据是 JSON 格式的。此外， MongoDB 将其信息存储在 JavaScript 对象中。
+
+你可以将这些 API 调用传递到你的 Web 程序中，以便从应用程序中访问返回的数据。这使我们能够集成来自我们自己代码中的公共 API 的各种有趣信息。我们将在教程中演示如何使用 Dog API 做到这一点！
+
+### 前端与后端
+
+有没有想过互联网是如何工作的？非常简单，当你访问一个网站时，你会从某个服务器接收一堆 JavaScript、CSS 和 HTML 文件，然后由你的 Web 浏览器运行。在你的浏览器中运行的代码是前端，提供信息的服务器上运行的代码是后端。Web 开发包括编写在两端都运行的代码（全栈开发），人们专门从事其中一方。API 本质上是从后端提供资源的代码。由于我们正在构建一个 Web API，本教程的重点将放在构建后端上。
+
+### 为动物收容所构建社交网络
+
+在本教程中，我们将构建一个 Web API，供一家的动物收容所使用。事实上，动物收容所希望能够随机将动物分配给新主人。由于他们位于硅谷，他们还希望在这个操作之上建立一个社交网络，以便能够查看哪些狗主人是朋友，以便协调狗主人的聚会。
+
+为了完成这项任务，我们将使用 Node 和 Express 构建一个 Web API，该 API 与 Dog API 进行交互，以及一个相应的前端，允许动物收容所查看有关他们的用户的所有信息。我们的 Web API 支持添加人员和将庇护所的狗分配给他们的操作，查看所有狗主人的社交网络，在两个狗主人之间添加朋友关系，显示狗主人的朋友以组织聚会，并从数据库中删除一个狗主人。
From 03b32f90dc5ec862694781bcdcb548babaf2cc57 Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:08:24 +0800
Subject: [PATCH 5/9] Delete pages/hackpack-web.md
---
pages/hackpack-web.md | 144 ------------------------------------------
1 file changed, 144 deletions(-)
delete mode 100644 pages/hackpack-web.md
diff --git a/pages/hackpack-web.md b/pages/hackpack-web.md
deleted file mode 100644
index 145688b..0000000
--- a/pages/hackpack-web.md
+++ /dev/null
@@ -1,144 +0,0 @@
-# Web开发攻略包
-
-### 介绍
-
-欢迎来到 TreeHacks web 开发攻略包！我们将创建一个名为 TreeYaks 的应用程序，该应用程序允许用户发布内容并对其他人发布的内容进行投票。
-
-### 设置
-
-Windows 用户：通过下载 Ruby 安装程序来安装 Ruby：[http://rubyinstaller.org/](http://rubyinstaller.org/)。
-
-Mac 用户：Ruby 应该已经安装在您的计算机上。
-
-所有平台：下载攻略包后，转到 treeyaks/ 文件夹并输入 `bundle install`。然后，输入 `ruby app.rb`。现在，转到 [http://localhost:4567](http://localhost:4567)。如果您看到 TreeYaks 页面，那么您已经准备好了，一切都安装正确！如果没有，这可能意味着在安装Ruby和/或运行 `bundle install` 时出现了问题。
-
-## TreeYaks
-
-我们将使用一个名为 Sinatra 的框架在 Ruby 中构建 TreeYaks。Sinatra 是用 Ruby 编写的 Web 框架，可帮助您开发 Web 应用程序。如果您以前从未使用过 Ruby，不用担心！我们将在进行的过程中解释语法。但是，如果您想了解更多关于 Ruby 的信息，请查看这些交互式 Ruby 教程：
-
-[https://www.codecademy.com/learn/ruby](https://www.codecademy.com/learn/ruby)
-
-[http://tryruby.org/](http://tryruby.org/)
-
-### 查看所有帖子
-
-我们将首先解决的第一个里程碑是查看所有帖子。在 app.rb 中，有一个名为 `Yak` 的类。Ruby 中的类具有实例变量和方法，就像 Java 或 C++ 中的类一样。每个 `Yak` 对象将代表用户发布的一条Yak。
-
-
-```
-class Yak < ActiveRecord::Base
-end
-```
-让我们在 `get '/'` 方法中将所有的Yaks分配给一个名为 `yaks` 的变量。这将使所有的Yaks都出现在主页上。您可以通过在 `Yak` 类上调用 `all` 方法来获取每个用户发布的所有 Yaks。
-
-
-```
-get '/' do
- # BEGIN YOUR CODE HERE
-
- # Here, you should store all the Yak's in the database in a variable called yaks.
-
- # END YOUR CODE HERE
-
- erb :index, locals: { yaks: yaks }
-end
-```
-
-应该已经有一行调用 `erb` 函数的代码。`erb` 是一个特殊的函数，用于呈现显示 `yaks` 的 HTML。这就是为什么我们将 `yaks` 变量传递给它的原因 - 它将获取从数据库加载的所有yaks，并将呈现的 HTML 返回给浏览器。它呈现的 HTML 位于 `views/index.erb` 文件中。您不需要编辑此文件，但请随意更改样式以自定义主页的外观和感觉！
-
-### 添加帖子
-
-接下来，让我们让用户添加帖子。您会注意到主页上已经有一个用于 TreeYaks 的 “创建Yak” 链接。然而，目前填写表单实际上什么都不会发生。
-
-在 `post '/new_yak'` 方法中，用户填写的表单的内容已经在 `contents` 变量中。为了完成方法的其余部分，添加代码以创建新的 `Yak`，设置实例变量，并在对象上调用 `save` 方法将其保存到数据库。
-
-
-
-```
-post '/new_yak' do
- contents = params['contents']
-
- # BEGIN YOUR CODE HERE
-
- # Here, you should create a new yak, initialize it with the data from the form, and then save it to the database.
-
- # END YOUR CODE HERE
-
- redirect to('/')
-end
-```
-
-在方法末尾调用的 `redirect_to` 意味着用户发布了新的 Yak 之后，我们将带他们返回到主页 - 这样他们就可以看到他们刚刚发布的 Yak！
-
-现在，您应该能够测试所有内容。转到主页，您应该已经看到一些 Yaks。点击 “创建Yak”，添加一个新的 Yak，然后返回主页。如果您看到刚刚发布的 Yak，那么一切都很顺利！
-
-### 点赞和反对
-
-现在，让我们添加用户点赞或反对 Yaks 的功能。两者的代码将非常相似，因此让我们首先处理点赞。您会注意到每个 Yak 卡片中已经有一些 “点赞” 和 “反对” 的链接。点击 “点赞” 链接将调用 `app.rb` 中的 `post '/upvote'` 方法。
-
-
-
-```
-post '/upvote' do
- yak_id = params['yak_id']
-
- # BEGIN YOUR CODE HERE
-
- # In this section, you should increment the yak's upvotes by 1 and return the new number of upvotes in json.
- # (Note: This will be called via AJAX, so you don't need to render any html or redirect to any other page.)
-
- # END YOUR CODE HERE
-end
-```
-
-`yak_id` 变量是一个包含用户点击赞的 Yak 的 ID 的整数。填写方法的其余部分，该方法应该找到Yak，将其 `upvotes` 数量增加，并将其保存到数据库中。
-
-现在，对于 `downvote`，做类似的事情，只是减少赞的数量而不是增加。这个方法应该看起来与 `post '/upvote'` 方法非常相似。
-
-
-
-```
-post '/downvote' do
- yak_id = params['yak_id']
-
- # BEGIN YOUR CODE HERE
-
- # In this section, you should decrement the yak's upvotes by 1.
- # This will be called via AJAX, so you don't need to render any html or redirect to any other page.
- # Hint: You should be able to reuse some code from the '/upvote' method.
-
- # END YOUR CODE HERE
- end
-```
-
-### 排序
-
-对于最后一个功能，我们将添加按点赞数量排序Yaks的功能，以便用户可以轻松找到最受欢迎的Yaks。查看 `get '/hot'` 方法。当用户想查看所有Yaks时，将调用此方法，但按点赞数量降序排序。
-
-
-```
-get '/hot' do
- # BEGIN YOUR CODE HERE
-
- # Here, you should use the order method on the Yak class to get all the Yaks ordered by upvotes.
- # The order method takes one parameter, which is the field you want to order by.
-
- # END YOUR CODE HERE
-end
-```
-
-```
-get '/new' do
- # BEGIN YOUR CODE HERE
-
- # Here, you should use the order method on the Yak class to get all the Yaks ordered by it's created_at field.
- # The order method takes one parameter, which is the field you want to order by.
-
- # END YOUR CODE HERE
-end
-```
-
-
-
-
-
From 846a5de64228296e1fde206b04eba3e8ae1f14b5 Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:08:48 +0800
Subject: [PATCH 6/9] Add files via upload
---
pages/hackpack-web.md | 145 ++++++++++++++++++++++++++++++++++++++++++
1 file changed, 145 insertions(+)
create mode 100644 pages/hackpack-web.md
diff --git a/pages/hackpack-web.md b/pages/hackpack-web.md
new file mode 100644
index 0000000..d93a9a7
--- /dev/null
+++ b/pages/hackpack-web.md
@@ -0,0 +1,145 @@
+# Web 开发攻略包
+
+### 介绍
+
+在本教程中，我们将创建一个名为 TreeYaks 的应用程序，该应用程序允许用户发布内容并对其他人发布的内容进行投票。
+
+### 设置
+
+Windows 用户：点击[这里](http://rubyinstaller.org/)下载 Ruby 安装程序。
+
+Mac 用户：Ruby 应该已经安装在你的电脑上。
+
+所有平台：下载攻略包后，进入 `treeyaks/` 文件夹并输入 `bundle install`。然后，输入 `ruby app.rb`。然后点击[这里](http://localhost:4567)。如果你看到 TreeYaks 页面，那么你已经准备好了，一切都安装正确！如果没有，这可能意味着在安装 Ruby 或运行 `bundle install` 时出现了问题。
+
+## TreeYaks
+
+我们将使用一个名为 Sinatra 的框架在 Ruby 中构建 TreeYaks。Sinatra 是用 Ruby 编写的 Web 框架，可帮助你开发 Web 应用程序。如果你以前从未使用过 Ruby，不用担心！我们将在进行的过程中解释语法。如果你想了解更多关于 Ruby 的信息，请查看这些交互式 Ruby 教程：
+
+[https://www.codecademy.com/learn/ruby](https://www.codecademy.com/learn/ruby)
+
+[http://tryruby.org/](http://tryruby.org/)
+
+### 查看所有帖子
+
+我们将首先实现的第一个功能是查看所有帖子。在 app.rb 中，有一个名为 `Yak` 的类。Ruby 中的类具有实例变量和方法，就像 Java 或 C++ 中的类一样。每个 `Yak` 对象将代表用户发布的一条 Yak。
+
+
+```
+class Yak < ActiveRecord::Base
+end
+```
+让我们在 `get '/'` 方法中将所有的Yaks分配给一个名为 `yaks` 的变量。这将使所有的Yaks 都出现在主页上。你可以通过在 `Yak` 类上调用 `all` 方法来获取每个用户发布的所有 Yaks。
+
+
+```
+get '/' do
+ # 从这里开始编写代码
+
+ # 在这里，你将数据库中的所有 Yak 存储到一个名为 "Yak" 的变量中。
+
+ # 在此结束代码
+
+ erb :index, locals: { yaks: yaks }
+end
+```
+
+这里应该已经有一行调用 `erb` 函数的代码。`erb` 是一个特殊的函数，用于呈现显示 `yaks` 的 HTML。这就是为什么我们将 `yaks` 变量传递给它。 它将获取从数据库加载的所有yaks，并将显示的 HTML 返回给浏览器。它显示的 HTML 位于 `views/index.erb` 文件中。你不需要编辑此文件，但可以随意更改样式以自定义主页的外观。
+
+### 添加帖子
+
+接下来，让我们让用户添加帖子。你会注意到主页上已经有一个用于 TreeYaks 的 “创建 Yak” 链接。然而，目前填写表单实际上什么都不会发生。
+
+在 `post '/new_yak'` 方法中，用户填写的表单的内容已经在 `contents` 变量中。为了完成方法的其余部分，添加代码以创建新的 `Yak`，设置实例变量，并在对象上调用 `save` 方法将其保存到数据库。
+
+
+
+```
+post '/new_yak' do
+ contents = params['contents']
+
+ # 从这里开始编写代码
+
+ # 在这里，你创建一个新的 Yak，用表单中的数据对其进行初始化，然后将其保存到数据库中。
+
+ # 在此结束代码
+
+ redirect to('/')
+end
+```
+
+在方法末尾调用的 `redirect_to` 意味着用户发布了新的 Yak 之后，我们将带他们返回到主页，这样他们就可以看到他们刚刚发布的 Yak！
+
+现在，你应该能够测试所有内容。回到主页，你应该已经看到一些 Yaks。点击 “创建 Yak”，添加一个新的 Yak，然后返回主页。如果你看到刚刚发布的 Yak，那么一切都很顺利！
+
+### 点赞和反对
+
+现在，让我们添加用户点赞或反对 Yaks 的功能。两者的代码将非常相似，因此让我们首先应用点赞功能。你会注意到每个 Yak 卡片中已经有一些 “点赞” 和 “反对” 的链接。点击 “点赞” 链接将调用 `app.rb` 中的 `post '/upvote'` 方法。
+
+
+
+```
+post '/upvote' do
+ yak_id = params['yak_id']
+
+ # 从这里开始编写代码
+
+ # 在这一部分，您应该将 Yak 的 upvotes 递增 1，并以 json 格式返回新的 upvotes 数量。
+ # 注意：这将通过 AJAX 调用，因此您不需要呈现任何 HTML 或重定向到任何其他页面。
+
+ # 在此结束代码
+
+end
+```
+
+`yak_id` 变量是一个包含用户点击赞的 Yak 的 ID 的整数。填写方法的其余部分，该方法应该找到Yak，将其 `upvotes` 数量增加，并将其保存到数据库中。
+
+现在，对于 `downvote`，做类似的事情，只是减少赞的数量而不是增加。这个方法应该看起来与 `post '/upvote'` 方法非常相似。
+
+
+
+```
+post '/downvote' do
+ yak_id = params['yak_id']
+
+ # 从这里开始编写代码
+
+ # 在这一部分，您应该将 Yak 的点赞票数减 1。
+ # 这将通过 AJAX 调用，因此您不需要渲染任何 HTML 或重定向到任何其他页面。
+ # 提示：您可以重复使用 "/upvote" 方法中的一些代码。
+
+ # 在此结束代码
+end
+```
+
+### 排序
+
+对于最后一个功能，我们将添加按点赞数量排序 Yaks 的功能，以便用户可以轻松找到最受欢迎的Yaks。查看 `get '/hot'` 方法。当用户想查看所有Yaks时，将调用此方法，但按点赞数量降序排序。
+
+
+```
+get '/hot' do
+ # 从这里开始编写代码
+
+ # 在这里，你应该使用 Yak 类的 order 方法来获取所有按 upvotes 排序的 Yaks。
+ # order 方法需要一个参数，即你想要排序的字段。
+
+ # 在此结束代码
+end
+```
+
+```
+get '/new' do
+ # 从这里开始编写代码
+
+ # 在这里，你应该使用 Yak 类的 order 方法来获取所有按 created_at 字段排序的 Yak。
+ # order 方法需要一个参数，即你想要排序的字段。
+
+ # 在此结束代码
+end
+```
+
+
+
+
+
From b10bf49469dc392187a0423f212e0179a9e34614 Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:18:18 +0800
Subject: [PATCH 7/9] Add files via upload
---
pages/hackpack-researchkit.md | 112 ++++++++++++++++++++++++++++++++++
1 file changed, 112 insertions(+)
create mode 100644 pages/hackpack-researchkit.md
diff --git a/pages/hackpack-researchkit.md b/pages/hackpack-researchkit.md
new file mode 100644
index 0000000..84489ca
--- /dev/null
+++ b/pages/hackpack-researchkit.md
@@ -0,0 +1,112 @@
+# ResearchKit 教程
+
+在本教程中，我们将使用 Swift 4 和 XCode 9+ 来解决 Apple 的 ResearchKit 和 Healthkit 的问题。所需要的功能包括创建一个同意书以从用户那里请求批准，分发带有不同类型问题的调查表单，以及 iOS 应用程序从 iPhone 的 Health 应用程序中收集数据的访问点。
+
+--------------------------------------------------------------------------------
+
+首先，让我们创建一个标准的 XCode 项目。我们想通过以下步骤将 ResearchKit 和 HealthKit 嵌入到我们的 iOS 应用程序中。
+
+1. 请注册一个开发者帐户（用于 HealthKit 使用），大约需要5-10分钟。[https://developer.apple.com/programs/] 克隆此存储库并按照步骤进行操作！使用 [master] 获取完整的解决方案和 [starterkit] 来填写代码。
+
+2. 我们要下载最新版本的 ResearchKit，并在终端中键入
+
+```
+git clone -b stable [https://github.com/ResearchKit/ResearchKit.git](https://github.com/ResearchKit/ResearchKit)
+```
+然后，进入带有 `.xcodeprj` 扩展名的文件，并通过运行 ResearchKit 框架来构建项目。
+
+3. 将 **ResearchKit.xcodeproj** 拖到当前 iOS 项目中，如果需要，请复制项目。如果在拖入后看不到 ResearchKit 旁边有箭头，请等待加载，或关闭并重新打开项目。
+
+
+
+4. 找到项目的 **General** 设置，并找到 `+Embedded Binaries`。单击 “+” 按钮并添加 ResearchKit。
+
+
+
+5. 要使用 HealthKit，请找到 **Capabilities** 设置，滑动到底部以打开 HealthKit 访问，它会自动添加到你的项目中。
+
+
+
+6. 在你的 `info.plist` 中，右键单击以打开源代码，然后粘贴：
+
+```swift
+NSHealthShareUsageDescription
+Need to share healthkit information
+NSHealthUpdateUsageDescription
+Need healthkit to track steps
+```
+
+
+
+7. （可选）如果你在 XCode 模拟器中测试代码，则必须从 Health App 模拟数据，以便从 HealthStore 获取结果。为此，请运行 iPhone 模拟器，单击硬件选项卡的主页按钮，然后导航到 Health 应用程序。点击要查看的类别，然后使用 “+” 按钮添加数据。例如，如果你要获取步数，那么请找到 **活动**，添加不同天数的运动量。
+
+上面的步骤为你的 Xcode 项目安装了 ResearchKit 和 HealthKit。
+
+--------------------------------------------------------------------------------
+
+**master** 分支包含具有 ResearchKit 同意和调查表单以及 HealthKit 访问和步数计数的完整代码。**starterkit** 分支包含具有注释和适用于项目各部分的自行添加/自定义的代码部分。
+
+**Main.storyboard** 创建导航控制器，将按钮连接到同意、调查和步数计数的特定功能，用于描述用途的文本框以及用于 HealthKit 数据的单独视图控制器。将按钮和文本框对齐以适应每个 iPhone 产品的规格。
+
+**FirstViewController.swift** 将同意和调查按钮链接到其特定功能，该功能呈现一个具有特定任务（例如 ConsentTask 和 SurveyTasks）的新 taskViewController。taskViewController 继承自 ORKTaskViewController，用来在操作完成后关闭 viewController。
+
+**ConsentDocument.swift** 和 **ConsentTasks.swift** 创建了一个同意书，要求用户同意研究。**ConsentTasks.swift** 创建了一个 ORKOrderedTask 来逐步执行创建的文档。**ConsentDocument.swift** 使用特定问题创建了一个 ORKConsentDocument，用户可以同意，并在表单中包含签名部分。同意事项的示例如下：
+
+```Swift
+let consentSectionTypes: [ORKConsentSectionType] = [
+ .overview,
+ .dataGathering,
+ .privacy,
+ .dataUse,
+ .studySurvey,
+ .studyTasks,
+ .withdrawing
+]
+```
+
+**SurveyTask.swift** 创建了一个供用户填写的简单调查表单。它也是一个 ORKOrderedTask，初始化了问题的格式和详细信息，以及一个用于逐步执行的摘要步骤。示例问题如下：
+
+```Swift
+let nameAnswerFormat = ORKTextAnswerFormat(maximumLength: 20)
+nameAnswerFormat.multipleLines = false
+let nameQuestionStepTitle = "What is your name?"
+let nameQuestionStep = ORKQuestionStep(identifier: "QuestionStep", title: nameQuestionStepTitle, answer: nameAnswerFormat)
+steps += [nameQuestionStep]
+```
+
+**HealthKitViewController.swift** 请求 HealthKit 访问并获取用户过去七天的步数。请记住，HealthKit 访问表单将仅出现一次，因为用户只需要接受一次协议。请求信息授权的示例代码如下：
+
+```Swift
+if HKHealthStore.isHealthDataAvailable() {
+ let stepsCount = NSSet(object: HKQuantityType.quantityType(forIdentifier: HKQuantityTypeIdentifier.stepCount))
+ let sharedObjects = NSSet(objects: HKQuantityType.quantityType(forIdentifier: HKQuantityTypeIdentifier.height),HKQuantityType.quantityType(forIdentifier: HKQuantityTypeIdentifier.bodyMass))
+
+ healthStore.requestAuthorization(toShare: sharedObjects as? Set, read: stepsCount as? Set, completion: { (success, err) in
+ self.getStepCount(sender: self)
+ })
+
+}
+```
+创建用于 HealthStor 执行的查询的示例代码如下：
+```Swift
+let predicate = HKQuery.predicateForSamples(withStart: dates, end: Date(), options: [])
+let query = HKSampleQuery(sampleType: type!, predicate: predicate, limit: 0, sortDescriptors: nil) {
+ query, results, error in
+ var steps: Double = 0
+ var allSteps = [Double]()
+ if let myResults = results {
+ for result in myResults as! [HKQuantitySample] {
+ print(myResults)
+ steps += result.quantity.doubleValue(for: HKUnit.count())
+ allSteps.append(result.quantity.doubleValue(for: HKUnit.count()))
+ }
+ }
+ completion(steps, allSteps, error as NSError?)
+
+}
+
+// Executes query through healthstore
+healthStore.execute(query)
+```
+
+一上就是如何使用 Swift 4 和 XCode 9 来解决 ResearchKit 和 HealthKit 问题的教程。你可以自定义这些项目，并保存信息以在 iOS 应用程序中的其他部分使用，以此来创建一个医疗保健应用。
\ No newline at end of file
From 64d8bf4a6b95952c0321ef7e99711f7c0767c403 Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:24:09 +0800
Subject: [PATCH 8/9] Delete pages/hardware_hackpack.md
---
pages/hardware_hackpack.md | 137 -------------------------------------
1 file changed, 137 deletions(-)
delete mode 100644 pages/hardware_hackpack.md
diff --git a/pages/hardware_hackpack.md b/pages/hardware_hackpack.md
deleted file mode 100644
index e5c01fe..0000000
--- a/pages/hardware_hackpack.md
+++ /dev/null
@@ -1,137 +0,0 @@
-# 树莓派 Pico 教程
-
-这是一个关于如何使用微控制器，特别是树莓派 Pico 的初学者教程。无论你的经验水平如何，你都可以理解我们的教学内容。我们在这里打下一些基础，并将在黑客马拉松中举办更多与硬件相关的活动。我们希望你从这个 Hackpack 中学到的技能能够帮助你在硬件方面打好基础，并产生自己的创意想法！
-
-#### 部件:
-基本设置：
-1. 树莓派 Pico
-2. 微型 USB 电缆
-3. 你的电脑！
-
-制作 Pico 项目还需要以下部件：
-1. 舵机电机
-2. 杜邦线（母头对母头和母头对公头）
-3. 红外传感器
-4. 面包板
-
-# ⚙️ 设置
-
-1) 从 [https://thonny.org/](https://thonny.org/) 下载 Thonny: 点击屏幕右上角的下载按钮，选择适用于你操作系统的下载按钮。
-
-2) 将 Pico 连接到电脑: 你需要一根将 Pico 与电脑连接的微型 micro-USB 线。连接时，你需要按下 Pico 上的白色 bootsel 按钮，然后释放它。
-
-
-
-一个名为 RPI-RP2 的文件夹应该会弹出，这意味着 Pico 已成功刷入到你的电脑中。
-
-
-
-3) 下载 uf2 文件: 在 RPI-RP2 文件夹中，点击 INDEX.HTM 文件，这将重定向到一个名为 "Raspberry Pi Documentation" 的网页。在这个页面上滚动到 "Microcontrollers" 选项卡下，你会看到 "Micropython"。点击进入。
-
-
-
-现在，在 Micropython 页面上滚动到 "Drag-and-Drop MicroPython" 部分，在其中你会看到下载不同板的 Micropython 的说明。点击 "Raspberry Pi Pico" 选项，下载一个 uf2 文件（文件名类似 rp2-pico-......uf2）。
-
-
-
-5) 将文件添加到 Pico: 将文件拖放到 RPI-RP2 文件夹中。这将导致 Pico 断开连接。然后，从 Mac 上拔下 Pico。设置这个 Micropython 的过程只需要一次，用于设置 Micropython，连接 Pico 到电脑时不需要每次都执行。
-
-
-
-# Pico 上的 Micropython 🖥️
-
-1) 连接 Pico: 将 Pico 通过连接线连接到电脑。不要按下 bootsel 按钮。此时不会出现任何文件夹。
-
-2) 连接到 Thonny: 接下来，打开我们在 "设置" 步骤中下载的 Thonny 编辑器。点击下方右侧的选项卡，如下图所示，选择 "MicroPython (Raspberry Pi Pico)"。
-
-
-
-7) Hello world: 让我们通过在 Thonny 的 shell 中运行一个简单的打印语句来检查是否有错误。
-
-
-
-8) Blink.py: 现在，我们在 Pico 上运行一个实际的程序。在 Thonny 中打开一个新文件，复制粘贴这个存储库中提供的 blink.py 的内容。这样做后，点击 "Save"，然后会提示你选择保存的位置-选择 "This Computer"。将文件保存为 "blink.py"。
-
-
-
-10) 然后，在 Thonny 编辑器的顶部标签中点击 "run" 按钮。要停止运行程序，点击同一标签中的 "stop" 按钮。
-
-
-
-这是 blink.py 的结果-你的 Pico 的内置 LED 会周期性地闪烁！
-
-
-
-9) 自动运行代码: 如果你希望在不点击 "run" 按钮并使用 Thonny 的情况下运行此代码，只需将文件重命名为 main.py，并将其保存到 "Raspberry Pi Pico" 而不是 "This Computer"。Pico 一直在寻找 main.py 文件，并自动运行它。因此，每当 Pico 连接到电源时，它都会自动运行主.py 中的代码。
-
-[演示视频](https://user-images.githubusercontent.com/93958307/209356017-308ecaa8-3088-4eb6-9975-39af675000bc.mov)
-
-所以现在，每当我将 Pico 连接到电脑时，它都会自动运行 main.py，Pico 上的 LED 就会开始闪烁。
-//视频展示我连接和断开它
-
-#### 恭喜你在你的 Pico 上运行了一个 Micropython 程序!! 🎉
-
-现在，你可以尝试使用不同的 Micropython 程序，并让你的 Pico 做一些很酷的事情。在下一节中，我们将介绍如何将你的 Pico 进一步连接到其他对象，从而可以构建更多的项目！
-
-### ⚡ Pico
-
-Pico 是一款微控制器，类似于 Arduino 或 Adafruit 的著名 M4 Feather Express。它具有数字输入和输出引脚（GPIO）以及模拟引脚（ADC）。这些引脚是当我们将 Pico 连接到其他对象，如传感器、电机、LED 等时使用的。你可以在它的数据表中了解更多信息: [Pico 数据表](https://datasheets.raspberrypi.com/pico/pico-datasheet.pdf)
-
-
-
-# 例子: 红外传感器 + 舵机电机
-
-我们将演示如何使用红外传感器与舵机电机结合使用。我们最终的结果将是一个在物体靠近传感器时启动的舵机电机！
-
-## 舵机
-
-#### 连接:
-如果你以前没有使用过面包板并想了解更多信息，你可以查看...，（尽管这不是必需的）
-要连接舵机，请参照下面的图像：
-
-
-
-我们连接到的引脚是:
-1. 舵机的红线（VCC）连接到 Pico 的 3V3(OUT)
-2. 舵机的黑线（GND）连接到 Pico 的 GND
-3. 舵机的橙线（OUT）连接到 Pico 的 GPIO-0
-
-整个过程应该看起来像这样：
-
-[演示视频](https://user-images.githubusercontent.com/93958307/209615678-ab9aa838-0db8-4334-8671-44983f771de6.mov)
-
-#### 代码
-请查看 servomotor.py 文件中的代码。通过将代码保存为主板上的 main.py 文件，或通过 Thonny 运行它，你可以运行代码，就像我们之前用 'blink' 示例一样。
-
-#### 演示
-
-
-## 添加传感器
-
-#### 连接:
-
-要连接红外传感器，请参照下面的图像：
-
-
-
-我们连接到的引脚是:
-1. 传感器的红线（VCC）连接到 Pico 的 3V3(OUT)
-2. 传感器的黑线（GND）连接到 Pico 的 GND
-3. 传感器的橙线（OUT）连接到 Pico 的 GPIO-21
-
-正如你所见，有两根线需要连接到 Pico 的 3V3(OUT) 引脚-舵机的和服务器的。为此，我们将 3v3 引脚连接到面包板较小的两行侧面的一行，并在同一条线上连接两根线！整个过程应该看起来像这样：
-
-[演示视频](https://user-images.githubusercontent.com/93958307/211267151-88f961cc-dde9-40b5-8d4e-b5c39ba7e7b7.MOV)
-
-最终的连接应该看起来像这样：
-
-
-
-#### 代码
-
-请查看 irservo.py 文件中的代码。通过将代码保存为主板上的 main.py 文件，或通过 Thonny 运行它，你可以运行代码，就像我们之前用 'blink' 示例一样。
-
-#### 演示
-请注意，当有干扰时，红外传感器上会亮起两个红灯，而在没有干扰时只会亮起一个！
-
-
From cc34b145244c186a108e576320c05090d1abc929 Mon Sep 17 00:00:00 2001
From: Colson Hong <113927364+qinghuanduelf@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:25:25 +0800
Subject: [PATCH 9/9] Add files via upload
---
pages/hardware_hackpack.md | 136 +++++++++++++++++++++++++++++++++++++
1 file changed, 136 insertions(+)
create mode 100644 pages/hardware_hackpack.md
diff --git a/pages/hardware_hackpack.md b/pages/hardware_hackpack.md
new file mode 100644
index 0000000..72d1f63
--- /dev/null
+++ b/pages/hardware_hackpack.md
@@ -0,0 +1,136 @@
+# 硬件教程
+
+这是一个关于如何使用像树莓派 Pico 这样的微控制器的初学者教程。无论是否有这方面的基础，你都可以轻易理解我们的教学内容。我们在这里打下一些基础，并将在之后的 ***AdventureX*** 青年创业大赛中举办更多与硬件相关的活动。希望你从本教程中学到的技能能够帮助你在硬件方面打好基础，并产生自己的创意想法！
+
+#### 需要使用到的零件与材料:
+基本设置：
+1. 树莓派 Pico
+2. 微型 USB 电缆
+3. 你的电脑！
+
+制作 Pico 项目还需要以下材料：
+1. 舵机电机
+2. 杜邦线（母头对母头和母头对公头）
+3. 红外传感器
+4. 面包板
+
+# 设置
+
+1) 从 [https://thonny.org/](https://thonny.org/) 下载 Thonny: 点击屏幕右上角的下载按钮，选择适用于你操作系统的下载按钮。
+
+2) 将 Pico 连接到电脑: 你需要一根将 Pico 与电脑连接的微型 micro-USB 线。连接时，你需要按下 Pico 上的白色 bootsel 按钮，然后释放它。
+
+
+
+一个名为 RPI-RP2 的文件夹应该会弹出，这意味着 Pico 已成功刷入到你的电脑中。
+
+
+
+3) 下载 uf2 文件: 在 RPI-RP2 文件夹中，点击 INDEX.HTM 文件，这将重定向到一个名为 "Raspberry Pi Documentation" 的网页。在这个页面上滚动到 "Microcontrollers" 选项卡下，你会看到 "Micropython"。点击进入。
+
+
+
+现在，在 Micropython 页面上滚动到 "Drag-and-Drop MicroPython" 部分，在其中你会看到下载不同板的 Micropython 的说明。点击 "Raspberry Pi Pico" 选项，下载一个 uf2 文件（文件名类似 rp2-pico-......uf2）。
+
+
+
+5) 将文件添加到 Pico: 将文件拖放到 RPI-RP2 文件夹中。这将导致 Pico 断开连接。然后，从 Mac 上拔下 Pico。设置这个 Micropython 的过程只需要一次，用于设置 Micropython，连接 Pico 到电脑时不需要每次都执行。
+
+
+
+# Pico 上的 Micropython 🖥️
+
+1) 连接 Pico: 将 Pico 通过连接线连接到电脑。不要按下 bootsel 按钮。此时不会出现任何文件夹。
+
+2) 连接到 Thonny: 接下来，打开我们在 "设置" 步骤中下载的 Thonny 编辑器。点击下方右侧的选项卡，如下图所示，选择 "MicroPython (Raspberry Pi Pico)"。
+
+
+
+7) Hello world: 让我们通过在 Thonny 的 shell 中运行一个简单的打印语句来检查是否有错误。
+
+
+
+8) Blink.py: 现在，我们在 Pico 上运行一个实际的程序。在 Thonny 中打开一个新文件，复制粘贴这个存储库中提供的 blink.py 的内容。这样做后，点击 "Save"，然后会提示你选择保存的位置-选择 "This Computer"。将文件保存为 "blink.py"。
+
+
+
+10) 然后，在 Thonny 编辑器的顶部标签中点击 "run" 按钮。要停止运行程序，点击同一标签中的 "stop" 按钮。
+
+
+
+这是 blink.py 的结果：你的 Pico 的内置 LED 会周期性地闪烁！
+
+
+
+9) 自动运行代码: 如果你希望在不点击 "run" 按钮并使用 Thonny 的情况下运行此代码，只需将文件重命名为 main.py，并将其保存到 "Raspberry Pi Pico" 而不是 "This Computer"。Pico 一直在寻找 main.py 文件，并自动运行它。因此，每当 Pico 连接到电源时，它都会自动运行主.py 中的代码。
+
+[演示视频](https://user-images.githubusercontent.com/93958307/209356017-308ecaa8-3088-4eb6-9975-39af675000bc.mov)
+
+所以现在，每当我将 Pico 连接到电脑时，它都会自动运行 main.py，Pico 上的 LED 就会开始闪烁。
+//视频展示我连接和断开它
+
+#### 恭喜你在你的 Pico 上运行了一个 Micropython 程序!!
+
+现在，你可以尝试使用不同的 Micropython 程序，并让你的 Pico 做一些很酷的事情。在下一节中，我们将介绍如何将你的 Pico 进一步连接到其他设备，从而可以构建更多的项目！
+
+### Pico
+
+Pico 是一款微控制器，类似于 Arduino 或 Adafruit 的著名 M4 Feather Express。它具有数字输入和输出引脚（GPIO）以及模拟引脚（ADC）。这些引脚是当我们将 Pico 连接到其他对象，如传感器、电机、LED 等时使用的。你可以在它的数据表中了解更多信息: [Pico 数据表](https://datasheets.raspberrypi.com/pico/pico-datasheet.pdf)
+
+
+
+# 示例: 红外传感器 + 舵机电机
+
+我们将演示如何使用红外传感器与舵机电机结合使用。我们最终的结果将是一个在物体靠近传感器时启动的舵机电机！
+
+## 舵机
+
+#### 连接:
+要连接舵机，请参照下面的图像：
+
+
+
+我们连接到的引脚是:
+1. 舵机的红线（VCC）连接到 Pico 的 3V3(OUT)
+2. 舵机的黑线（GND）连接到 Pico 的 GND
+3. 舵机的橙线（OUT）连接到 Pico 的 GPIO-0
+
+整个过程应该看起来像这样：
+
+[演示视频](https://user-images.githubusercontent.com/93958307/209615678-ab9aa838-0db8-4334-8671-44983f771de6.mov)
+
+#### 代码
+请查看 servomotor.py 文件中的代码。将其保存在主板上的 main.py 文件，或者通过 Thonny 运行它，就像我们之前用 “blink“ 示例一样。
+
+#### 演示
+
+
+## 添加传感器
+
+#### 连接:
+
+要连接红外传感器，请参照下面的图像：
+
+
+
+我们连接到的引脚是:
+1. 传感器的红线（VCC）连接到 Pico 的 3V3(OUT)
+2. 传感器的黑线（GND）连接到 Pico 的 GND
+3. 传感器的橙线（OUT）连接到 Pico 的 GPIO-21
+
+正如你所见，有两根线需要连接到 Pico 的 3V3(OUT) 引脚-舵机的和服务器的。为此，我们将 3v3 引脚连接到面包板较小的两行侧面的一行，并在同一条线上连接两根线！整个过程应该看起来像这样：
+
+[演示视频](https://user-images.githubusercontent.com/93958307/211267151-88f961cc-dde9-40b5-8d4e-b5c39ba7e7b7.MOV)
+
+最终的连接应该看起来像这样：
+
+
+
+#### 代码
+
+请查看 irservo.py 文件中的代码，将代码保存在主板上的 main.py 文件里，或通过 Thonny 运行它，就像我们之前用 'blink' 示例一样。
+
+#### 演示
+请注意，当有干扰时，红外传感器上会亮起两个红灯，而在没有干扰时只会亮起一个！
+
+