# Hackathon
###### tags: `Project` `比賽`
## 一、網站名稱：Demotion

## 二、符合 SDGs 議題：

從 SDGs 第四點中所指出的：教育，解放了智力，想像力。它是人的自尊起點，也是促使社會發展的必要關鍵：不僅僅是教導識字，更關著重於培養改變獲得資源的能力，讓教育能夠直接對生活有正面的影響。因此，「教育」應該應是對所有人開放且有教無類，具公平性，高品質，以及促進所有人的終身學習——我們認為教育權不應以金錢與網路為門檻。

## 三、目標對象：處於偏鄉，網路及各項資源缺少的家庭

為什麼我們要打造「Demotion」呢？一方面，偏鄉學校的經費不能與都市學校相匹敵，導致偏鄉學校的學生，學習到的內容硬生生就比都市學生少了很多。這也導致不少出身於偏鄉學校的老師，選擇去都市學校教學——畢竟都市學校的資源比較多。

線上學習期間，這問題更加突出——我們常常在 Facebook 看到老師分享「他們怎麼讓偏鄉學生『學會』用電腦」的案例，這對於我們這種都市學生是難以想像的。我之前在 Facebook 看到一個案例：這個鄉村的學生大多沒有電腦，即使不少人有手機，然而會操作 Google Classroom、Meet 的人寥寥無幾——連「上課」都有問題，何況是延伸學習？更何況，偏鄉地區的網路架設沒有都市這麼好，即便架設好網路，偏鄉學生的家庭是否可以負擔網路裝置的費用也是個大問題——**從「怎麼學習」就有問題，從何提起「學習什麼」？**

## 四、目的：縮短學習資源間的差距

我們打算製作一款操作直覺，即使斷網也能正常使用的學習平台。

## 五、設計理念：

我們想縮小城鄉網路上的差距——所以我們讓學生可以下載影片回家觀賞。
學生可以在有網路的時間下載想要聽的課程，就算回家沒有網路，學生照樣可以打開電腦或手機觀賞；我們不想讓偏鄉學生花多餘的時間成本在學習系統使用，所以我們嘗試把學生操作的介面，盡可能簡化到最直覺的模樣——我們參考 YouTube、Netflix 等各大平台的設計，汲取他們 UI/UX 好的部分並適度改良，減少使用者學習這套系統的時間與精力成本。

老師的介面我們也會設計得很簡單——聽不少老師講，很多老師不喜歡線上教學，是因為各大系統操作繁雜且錯誤連連。我們不願重蹈覆徹，因此我們打算利用我們在工程、開發、UI/UX 上的才能，重新讓老師願意重新接納線上學習。

至於我們要怎麼讓老師願意加入我們的 Demotion 計畫呢？首先是經費——我們會考慮在募資平台拉天使投資，並會在下載影片及播放影片的時候安插不嚴重影響體驗的廣告，這樣一來，老師的辛苦都能夠獲得金錢上的酬勞；其次是把我們的「開放」理念推廣給諸位老師，讓老師知道「為什麼我們會這麼做」，讓他們有源自心理的原動力。

最後，我們也會邀請各大領域的專家在我們的 Demotion 平台開課，讓學生可以探索學科外的知識，發展其多元的未來。我們期許 Demotion 可以消減城鄉差距的代溝，讓所有學生——無論起跑點在哪個地方——都可以在穩定的系統、周到的設計以及精緻的影片中，學習並發展自己有興趣的事物。

## 六、風格

主頁帶有現代美術風格，並且選擇課程的選單是帶有簡潔風的優雅設計。
### (1) 編排形式：
從主頁進入到選單中後，映入眼簾的是上方搜尋欄位，下方的課程欄位。除了使用搜尋欄位快速查找想要的課程，也能直接點擊課程進入課程頁面，透過圖卡上的簡單說明，使用者也能輕鬆了解這堂課主要的授課內容。影片的選擇畫面則是和選擇課程一樣的圖卡，也延續了選單的設計，使得使用者能規劃自己的學習路徑。
### (2) 整體設計調性：
主頁為暗色，進入選單後則以白灰的形式配色，文字則使用黑色。
### (3) 瀏覽動線：
由上而下，由左而右
### (4) 視覺效果：
整體的風格給人種簡潔，不複雜的感覺。

## 七、網頁設計圖

選擇課程

選擇影片

影片撥放器

## 八、網站內容(概述)

我們的學習網站預計會有教師端可以使用，像其他平台一樣，先註冊並登入教師的帳號就可以上傳新影片又或是對內容進行管理。
至於一般的用戶(例如學生)只要連上網站，即可免費觀看所有教學影片。

### 教師端

教師可以新增課程並上傳自己的教學影片，並邀請學生加入課程。這個方法可以降低老師對於時間掌控的負擔，只要將預錄好的影片上傳，附上簡單的說明，就能讓自己的教學影片在平台上供學生觀看。

## 九、網頁結構：


## 十、製作技術：

我們專案採前後端分離：前端與後端使用的程式語言及框架盡不相同。

### 前端

採用 React.js 的框架「Next.js」，並使用「TypeScript」撰寫。我們採用 component-driven 的設計，也就是把介面拆分成好幾個組件 (component)。每個組件的顯示效果可以在 Storybook 檢視：`yarn storybook` 。

我們前端的部分工具函式有寫測試，使用 Jest 測試框架進行測試。不過**我們不是 TDD，也不打算達到 100% 的 coverage。**若要進行測試，請輸入 `yarn test`。

### 後端

採用 Kotlin 語言的 Web 框架「Ktor」。後端有利用到 BCrypt做密碼儲存、JWT進行身分驗證。資料庫則使用 PostgreSQL。

資料庫操作則使用JetBrains Exposed這個ORM框架進行操作。

測試部分因時間緣故部分有寫測試。

# 黑客松

## 會卡到的時間

- 7/13
- 9AM (播放影片)
- 10AM (開始比賽)
- ~ 50hr 比賽時間
- 睡覺
- Pan 3:00 AM ~ 10:00 AM
- Young 1:00 AM ~ 8:00 AM
- Xigua 3:00 AM ~ 8:00 AM
- SF 不睡覺ㄉ(佬) anytime 3hr
- pan
- 7/14 至少有 15 分鐘會被拿去考試
- 7/15 我 10:00AM 不可能上線
- 返校
- 最終收尾我可能辦不到
- Young
- 沒意外三天都在 👍
- SFeather
- 除了SCIST跟雄資如果開會以外應該都在
- 學校補考弄5分鐘ㄅ(扯)
- xigua
- 三天都在

## 時間
- 7/13: 幾乎可以在
- 7/14: 幾乎可以在
- 7/15: 除 pan 之外應該都能在
- 我收尾會定在 7/14 的凌晨
- 繳交靠你們

---

## Tech Stack / IDE

### 前端

- JetBrains WebStorms
- Next.js
- TypeScript

### 後端

- JetBrains IDEA
- Ktor

---

## 你們對主題有什麼開發上的想法

主題明確 要能清楚傳達 他是什麼 他在幹麻

---

## 時間安排

| 項目 | 耗時 |
| ------------ |:-------------- |
| 思考主題方向 | 30min 內 |
| 企劃書 | 2hr 內，不連續 |
| 前端 50% | 12hr 內完成 |
| 後端 50%. | 8hr 內完成 |
| 前端 100% | 36hr 內完成 |
| 後端 100% | 24hr 內完成 |
| 影片 | 2hr 內 |
| 改良 | 12hr+ |
| 收尾 | 3hr |

---

## 評分標準

本次競賽分為【基礎組】與【進階組】進行，
均以【SDGs聯合國17項目標】為主題進行WEB創作

依其內容40%(相關性、可行性、完整度、創新)、技術35%(複雜度、功能)、設計25%(UX（使用者體驗）、UI（使用者介面）) 評分
該分數佔總分的80%


1.企劃書以pdf型式上傳，不得包含影片、連結，企劃書頁數最多10頁
2. 須上傳作品說明影片至YouTube設不公開（影片名稱：隊名主題網頁名稱） 並上傳連結，影片長度至多5分鐘
3. 網頁檔案須壓縮成zip檔(限100mb)上傳

----
## 主題

### [內容](http://203.64.34.6/library/subject/June2020/June2020_index.htm)



#### Quality Education 確保包容和公平的優質教育，讓全民終身享有學習機會。

1. 至2030年時，確保所有男女幼童完成免費、公平和優質的中小學教育，並取得相關和有效的學習成果。
2. 至2030年時，確保所有男女幼童獲得優質幼兒發展、看護和學前教育，為他們接受初級教育做好準備。
3. 至2030年時，確保所有男女平等獲得可負擔的優質技術、職業和高等教育，包括大學教育。
4. 至2030年時，大幅增加掌握就業、體面工作和創業所需相關技能，包括技術性和職業性技能的青年和成年人數。
5. 至2030年時，消除教育中的性別差距，確保殘疾人士、原住民和處境脆弱兒童等弱勢族群平等獲得各級教育和職業培訓。
6. 至2030年時，確保所有青年和大部分成年男女具有識字和計算能力。
7. 至2030年時，確保所有進行學習的人都掌握可持續發展所需的知識和技能，具體做法包含發展可持續發展、可持續生活方式、人權和性別平等方面的教育、宣揚和平非暴力文化、提升全球公民意識以及肯定文化多樣性和文化對可持續發展的貢獻。
8. 建立和改善兼顧兒童、殘疾和性別平等的教育設施，為所有人提供安全、非暴力、包容和有效的學習環境。
9. 至2020年時，在全球範圍內大幅增加先進國家和部分發展中國家為發展中的國家，特別是最不發達國家、小島嶼發展中國家和非洲國家提供高等教育獎學金數量，包括職業培訓和訊息通信技術、技術、工程、科學項目的獎學金。
10. 至2030年時，大幅增加合格教師人數，具體作法包括在發展中國家，特別是最不發達國家和小島嶼發展中國家發展師資培訓方面的國際合作。
----
### 撰寫內容
#### 簡述
教育，解放了智力，想像力，他是人的自尊起點，也是促使社會發展的必要關鍵，
並非只是教導識字，更關著重於培養改變獲得資源的能力，讓教育能夠直接對生活有正面的影響。
因此理應是對所有人開放且有教無類，具公平性，高品質，以及促進所有人的終身學習。

### 問題
- 偏鄉地區學校的經費不足，導致學生的教材和上課品質不穩定
- 偏鄉地區的網路不穩導致無法視訊上課
- 偏鄉地區老師因薪水原因前往都市工作
- 受教權仍無法普及，女性更易被拋下
- 部分學生沒有手機可以使用

### 解決方案
- 大規模開放線上課堂（課程）: MOOC
MOOC沒有完全既定的定義，但有兩個顯著的特點：
Open access/開放共享：MOOC參與者不必是在校的註冊學生，也不要求學費，它是讓大家共享的。
Scalability/可擴張性：許多傳統課堂針對於一小群學生對應一位老師，但MOOC里的「大規模」課堂是針對於不確定的參與者而言來設計的。

- 薪資的解決方案
每位學生在下載影片的過程都會出現廣告，而我們會將廣告收益的 75% 捐給願意支持我們專案，建立課程的老師。

- 提供離線教學影片
- 老師
老師可以將影片及播放器先預存到 USB，並拷貝給每位學生讓他回家看。
- 學生
學生如果沒有自己的手機或是電腦的話可以到學校的電腦教室使用電腦。
- 學校&教育單位
考慮到偏鄉學校的網路狀況很糟糕，我們可以讓這些偏鄉學生下載有時間限制的影片，類似 Netflix。下載到硬碟的部分，我們可以使用 DRM 加密過的影片檔案，要求使用我們帶廣告的播放器播放。這樣一來，也能防止盜版濫用的問題。

- 對於偏鄉地區/國家的師資供給
在影片下方留下願意合作的老師聯繫方式
例如email、電話號碼等等