---
# System prepended metadata

title: Game Design Club Offical Website
tags: [' vue', Web design, ' firebase']

---

---
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
![](https://i.imgur.com/wjjtqGV.png)

- Google Script
    - 自動發送Email
![](https://i.imgur.com/6fKz4ZQ.png)
![](https://i.imgur.com/53xnPNG.png)
![](https://i.imgur.com/xBmA9XY.png)

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