---
title: Game Design Club Offical Website
tags: Web design, vue, firebase
description: Member Website of NTUT Game Design Club.
---
<table>
<tr>
<td>首頁</td>
<td>頁面內容、介紹</td>
</tr>
<tr>
<td>功能</td>
<td>網頁功能介紹</td>
</tr>
<tr>
<td>Firebase</td>
<td>API、儲存格式</td>
</tr>
</table>

---

# 頁面
> [雲端、設計稿](https://drive.google.com/drive/folders/1myCq442g51C3YpkwYaR9YAMvfOPx5g_S)
1. 進入首頁
2. 社團介紹頁面
3. 行事曆頁面
4. 聯絡我們
5. 報名社員
6. 專案頁面
7. 個人資料頁面

---

# 功能
> [repo](https://github.com/NTUT-NGD/official-site)

- [行事曆](https://vuetifyjs.com/en/components/calendars/#calendars)
- 專案分組顯示系統（公開）
- 專案名稱
- 專案介紹
- 開發平台
- 開發工具
- 2D / 3D
- 顯示資訊
- 個人資訊
- 職務

- 專案分組顯示系統（小組）
- GitHub Repo 連結
- 雲端素材連結
- 專案名稱
- 顯示資訊
- 個人資訊
- 職務

- 組隊系統
- 發起專案系統
- 專案名稱
- 專案介紹
- 開發平台
- 2D / 3D
- 申請加入組別
- 個人介紹
- 附件上傳
- 組長審核組隊
- 同意 & 否
- 行事曆新增功能
> 新增
> 新增
> 新增
> 新增
> 新增

---

# Firebase
> Data base format

- Users
- UID | String
- Email | String
- Name | String
- Parties | Map
- Project id | Array
- Profile | String
- LastSignin | Timestamp
-

- About `infos of club`
- Infos | array
- String : Descript1
- String : Descript2
- String : ...

- Projects
- random ID
- Name | String
- Intro | String
- Recruiting Intro | String
- Storage
- Image | File
- Platform | Array
- String : ios
- String : Android
- String : PC
- String : Xbox
- String : PS4
- String : Switch
- String : Others
- Tools | Array
- String : Unity
- String : Unreal
- String : Xcode
- String : Illustrator
- String : Photoshop
- String : After Effects
- String : 3D Max
- String : Blender
- String : *
- String : *
- String : *
- String : *
- String : *
- String : *
- Tag | Array
- String : 2D
- String : 3D
- String : Action
- String : ...
- Members | Array
- index | Map
- UID `Team member uid`
- Job
- Contact | String (URL)
> Team member visible only
- IsRecruiting | Bool
> 招娉中：可以自由申請加入
- IsFinished | Bool
- IsDeleted | Bool
> Firebase visible only. To hide project from web.
- WebGL/Download URL | String (URL)

- Calendar
- Evenet
- Name
- Content
- Start
- End
- Location
- isPrivate
- Color
- Poster

## reference
>

- [Using Firebase to Authenticate to Google Drive](https://gist.github.com/jamestalmage/2d8d1d5c42157caf349e)
- [客製化 Google 表單](https://medium.com/front-end-augustus-study-notes/customized-google-form-and-post-data-bcf1d6e1861b)
- [vue 專案實現發 郵件 的功能](https://www.itread01.com/content/1542767125.html)

> Google Calendar
- [Google Calendar API](https://developers.google.com/calendar)
- [Vue with GC Example](https://jsfiddle.net/andrisv/nqwdymee/)

---

# 報告內容
> 未完成：[網頁連結](https://ntut-ngd.github.io/official-site/)
## 題目：社團官網

## 專案背景
- 遊戲設計社，社團官方網站，用於聯絡、媒合各個系、查看相關資訊

## 網站架構
- 首頁
> 重要資訊集（下面的集合，但都只顯示一點點）
- 關於我們
> 藉由互動小遊戲來介紹社團
- 遊戲作品
> 創作過的專案，含 open source、素材連結
- 創作專案
> 可以在這裡創建project，讓不認識的人來加入組隊，一起創作遊戲
- 社團行事曆
> 可以觀看我們的活動行程
- 聯絡我們
> 自定義社團表單，會透過post填寫道google表單留下紀錄
- 加入社團
> 自定義社團表單，會透過post填寫道google表單留下紀錄

## 設計概念
- 字體： 思源黑體 Noto Sans CJK TC
- 設計風格：Material Design
- 這次採用質感設計的風格，因應電子遊戲的風格，讓整體網站有現代感，網站內容著重在與使用者的對話，例如透過互動小遊戲來介紹社團之外，也客製化 Google 表單取代附加連結的方式，在填寫客製化表單後，也會自動寄送 Email 給使用者方，加強對話的感覺。

## 技術
- Vue.js
- Vuetify
- Firebase
- Git Flow

- Google Script
- 自動發送Email

## 未來展望
- 加入 Google Calendar API，使用者登入後能夠載入個人 Google 行事曆
- 互動小遊戲：加入 Socket.io，讓使用者在遊玩互動小遊戲時能夠互相看到彼此