---
# System prepended metadata

title: 活動手冊 - 第七屆黑客松 (1101)
tags: [' 110 學年', 文件, ' 上學期', ' 黑客松']

---

---
title: 活動手冊 - 第七屆黑客松 (1101)
tags: 文件, 黑客松, 110 學年, 上學期
GA: UA-54884750-6
---
<!-- Tag 規範：https://hackmd.io/@cmrdb/tags -->

# 活動手冊

## 活動流程

### ==主題發想==

#### 器材&工具

- 海報紙
    - 便利貼
    - 無痕膠帶
- Whimsical
    - [連結](https://whimsical.com/) 

#### 注意事項

- 商業分析
  - 特色
  - 客群
  - [商業模式圖](https://growthmarketing.tw/business-model-canvas/)
- 便利貼歸納
    - 結束發想後，組內可以開始將便利貼分類，將發想收斂 
- 發想情境
    - 可以用使用者的角度說出希望這個系統在使用時可以解決什麼問題


#### 產出文件

- 發想海報 * 1
- 商業模式圖
- 發想心智圖 * 1 （選）

:::spoiler
<summary class="example">查看範例（點選展開）</summary>

![](https://i.imgur.com/W6DP97p.png)

![](https://i.imgur.com/rnqxJvx.png)
:::

### ==功能發想==

#### 器材&工具

- HackMD

#### 注意事項

- 將所有訂下的大功能全部列出訂下，並慢慢地往內收，最後才是每個功能的細項
- 細項需要夠明確，比如這個功能可能會需要什麼欄位，可舉例登入系統就需要有基本的帳號密碼，還有如果往後有其他功能需要什麼相關聯性資料也必須現在規劃進去
- 需要對每個功能進行可行性評估

#### 產出文件
- 功能列表 * 1
- 功能心智圖 * 1 （選）
:::spoiler
<summary class="example">查看範例（點選展開）</summary>

![](https://i.imgur.com/EHGfF0v.png)
![](https://i.imgur.com/0xuBTO9.png)
:::

### ==流程規劃==

#### 器材&工具

- Whimsical

#### 注意事項

- 在流程圖的繪製過程中需多注意是否有確實的將所有階段的判斷加入流程中
- [教學網址](http://www.chwa.com.tw/TResource/VS/book2/ch2/2-2.htm#:~:text=%E6%9C%89%E9%97%9C%E6%B5%81%E7%A8%8B%E5%9C%96%E7%AC%A6%E8%99%9F%EF%BC%8C%E7%82%BA%E4%BE%BF%E6%96%BC%E6%B5%81%E9%80%9A%E9%96%B1%E8%AE%80%EF%BC%8C%E7%9B%AE%E5%89%8D%E6%89%80%E6%8E%A1%E7%94%A8%E7%9A%84%E6%98%AF%E7%BE%8E%E5%9C%8B%E5%9C%8B%E5%AE%B6%E6%A8%99%E6%BA%96%E5%AD%B8%E6%9C%83(ANSI)%E6%96%BC1970%E5%B9%B4%E5%85%AC%E4%BD%88%E7%9A%84%E6%B5%81%E7%A8%8B%E5%9C%96%E7%AC%A6%E8%99%9F%E3%80%82%E7%8F%BE%E5%B0%87%E8%BC%83%E5%B8%B8%E7%94%A8%E8%80%85%E4%BE%9D%E6%AC%A1%E5%88%97%E7%A4%BA%E5%A6%82%E8%A1%A82.1%EF%BC%9A)

#### 產出文件

- 系統流程圖

:::spoiler
<summary class="example">查看範例（點選展開）</summary>

- ![](https://i.imgur.com/0Qt4HvW.png)
:::

### ==畫面設計==

#### 器材&工具

- Figma

#### 注意事項

- 運用你個人的美感，或是多參考相關網站的設計思路

#### 產出文件

- 畫面構想圖 * 1
:::spoiler
<summary class="example">查看範例（點選展開）</summary>

#### Pomodoro (Figma)

https://www.figma.com/file/40ymddYnLej4DbIT2OPr7B/Pomodoro?node-id=0%3A1

##### 知識王 網頁後台

<iframe width="640" height="360" src="https://xd.adobe.com/embed/3ae77cbc-5678-4e48-af3c-52d0aa5faa44-6fb4/" frameborder="0" allowfullscreen></iframe>

Link: https://xd.adobe.com/view/3ae77cbc-5678-4e48-af3c-52d0aa5faa44-6fb4/

---

##### 知識王 手機介面

<iframe width="640" height="360" src="https://xd.adobe.com/embed/b8070b44-bc54-47b6-bcaf-93740952b8e3-ed54/" frameborder="0" allowfullscreen></iframe>

Link: https://xd.adobe.com/view/b8070b44-bc54-47b6-bcaf-93740952b8e3-ed54/

:::

### ==資料庫分析（選）==

#### 器材&工具

- draw.io

#### 注意事項

- 提醒各組多注意在資料表的欄位形態要符合功能所需（這是細部規劃）

#### 產出文件

- ERD * 1
    - 資料庫分析圖
:::spoiler
<summary class="example">查看範例（點選展開）</summary>

![5th-hackathon](https://i.imgur.com/65oz0pb.jpg)
![6th-hackathon](https://i.imgur.com/TyqEqwV.jpg)
:::
- 系統循序圖 * n
    - n = 功能數量
    - 與資料庫溝通的流程
    - ![](https://i.imgur.com/7XKMtjz.png)


### ==成果簡報製作==

#### 器材&工具

- [Google Slides](https://docs.google.com/presentation)（線上協作）
- [Office 365 PowerPoint](https://www.office.com/launch/powerpoint)（可線上協作版）

#### 注意事項

- 提醒各組簡報中需要一些畫面，並且必須前面幾個階段所產出的文件也必須加入簡報中並詳細說明設計的思路與流程規劃

#### 教學文章或影片

- [Google Slides 使用技巧](https://youtu.be/5wRBiKdIRoU)
- [簡報風格技巧](https://youtu.be/m4YKkj8An0s)

#### 產出文件

- 成果簡報 * 1



## 推薦工具

### ==討論工具==

- 共識、共筆工具: [HackMD](//hackmd.io)
- [使用手冊](https://hackmd.io/s/quick-start-tw)

### ==發想工具==

- 便利貼發想: [Whimsical](//whimsical.com) (可以多人線上協作)
    - 注意不要使用行動裝置，輸入的時候不能直接輸入，需要用貼上的才會正常
- 備案
    - 便利貼發想: [Google Jamboard](//jamboard.google.com)
    - 便利貼發想: [Miro](//miro.com)

### ==系統設計工具==

- 心智圖、架構圖等等: [Whimsical](//whimsical.com) (可以多人線上協作)
- 備案
    - 心智圖、架構圖等等: [XMind](//www.xmind.net) (離線單人)
    - 通用繪圖工具: [draw.io](//draw.io) (線上單人)

### ==介面設計工具==

- [Figma](//www.figma.com) (可以多人線上協作)
- 備案
    - [Adobe XD](//www.adobe.com/tw/products/xd.html) (線上單人)

### ==簡報製作==

- [Google Slides](https://docs.google.com/presentation)（線上協作）
- [Office 365 PowerPoint](https://www.office.com/launch/powerpoint)（可線上協作版）
- [Prezi](//prezi.com)

## 參考執行方式與結果

- [Ray 4.0 青年學生體檢政府網站計畫](//ray2020.pdis.nat.gov.tw)

<style>
    details summary.example {
        font-size: 20px;
        line-height: 2;
        color: cornflowerblue;
        background: antiquewhite;
    }
</style>