---
# System prepended metadata

title: 一日工程師大體驗

---

# 一日工程師大體驗

## 時程規劃
| 時間 | 主題 | 內容 |
| -------- | -------- | -------- |
| 10:00~10:30|認識|專案介紹、程式架構|
| 10:30~11:00|來自 PM 的需求|釐清需求|
| 11:00~11:30|會議 Part1|討論實作方式、評估需求、設定目標|
| 11:30~12:00|會議 Part2|拆解任務、確認彼此今日任務分配|
| 12:00~13:00|呷奔|休息一下、ㄘ個飯|
| 13:00~14:00|開發、討論|衝刺GOGOGO、文件紀錄|
| 14:00~15:00|開發、討論|衝刺GOGOGO、文件紀錄|
| 15:00~16:00|開發、討論|衝刺GOGOGO、文件紀錄|
| 16:00~17:00|報告、總結|報告、彼此分享同步資訊、總結|

## 來自 PM 的需求
| 優先度 | 背景 | 解法 |
| -------- | -------- | -------- |
|高|老師在觀看其他分頁(看學生專案時)，若學生有傳聊天室訊息不會接收到，有問題的學生會覺得老師不見了|切到其他頁面的時候，若有學生傳訊息，可以跳通知給老師  https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API|
|高|老師若斷線重進入線上教室，學生正在專心做專案沒切到線上教室分頁就無法和老師建立連線，此時老師就無法看到學生的專案&通話| 可不可以不要跳卻確認直接連接|
|中|需要有第2個人(非老師)確認老師上課情況、有沒有學生離線、或處理學生設備問題|需要主任的角色|
|中|主畫面螢幕小，比較難看清楚老師/學生的操作|聊天室放到主畫面上半透明，主畫面就可以放大|
|中|老師端若同時有5位以上學生，老師需要滑動滾輪，可能導致體驗不佳|重新設計介面(主畫面可以縮小)老師頭像跟自己的狀態可以合併|
|低|有些學生可能會刷頻或是留不雅字眼|過濾文字、禁言、舉手才能發言|
|中|老師在跟A學生通話時，若有學生BCD有問題，老師邊講話邊打字回覆BCD同學很不容易|一鍵發送範本、固定一個範本自動回覆（在舉手時自動送出）|
|低|現有排版較樸實無華，希望能看起來更colorful、更豐富一點|加一個 Navbar、聊天室可以不可以發送可愛的貼圖或 emoji|
|低|學生喜歡看過去的聊天記錄，上課時可能會被畫面吸引而分心|留最新的50則訊息|
|高|聊天室的文字訊息會超出文字框，導致有文字看不到|BUG|
|中|聊天室沒有防止插入插入文字，會有資安上的問題|BUG https://stackoverflow.com/questions/15861451/anti-sql-injection-function|
|低|聊天室的文字訊息需要顯示角色，不然多人在上面留言時學生會搞不清楚是老師還是學生在回覆|名稱後面有角色小標|

**還OK吧各位！**

## 開發前準備

### hackmd 開發文件紀錄

### 開發環境の架設
1. [專案連結](https://drive.google.com/file/d/1_hMdO2ZP5TbaNeHc0bduUNzypINam6vj/view?usp=sharing)
2. [vscode 編輯器](https://azure.microsoft.com/zh-tw/products/visual-studio-code/)
3. [live server 套件](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
4. [firebase 專案](https://console.firebase.google.com/u/0/project/test-1-e4896)
5. [localhost:5500/index.html](http://127.0.0.1:5500/index.html)
6. 參數 ?userName=Tony&conferenceName=test 學生
7. 參數 ?userRole=teacher&userName=Tony&conferenceName=test 老師

### 官方框架の文件
* [jQuery](https://jquery.com/)
* [Firebase](https://firebase.google.com/)
* [ApiRTC](https://apirtc.com/)
* [bootstrap](https://getbootstrap.com/)
* [fontawesome](https://fontawesome.com/)

---

## 會議紀錄
### PART1
### PART2

## 開發筆記
![](https://i.imgur.com/ADVLsXI.gif)
![](https://media.giphy.com/media/ule4vhcY1xEKQ/giphy.gif)

### 施東霖の小天地
☆☆☆ tonyshih0125@gmail.com ☆☆☆

### 黃昀柔の小天地
melody.0973621846@gmail.com
* 自動換行 http://blog.davidou.org/archives/855
* text overflow http://www.eion.com.tw/Blogger/?Pid=1158
* overlow-wrap https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-wrap

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


<!-- [text() vs html()](https://www.tutorialspoint.com/What-is-the-difference-between-text-and-html-in-jQuery)
 -->
### 周子馨の小天地
1234littleduck@gmail.com

firebase 文件
[https://firebase.google.com/docs/database](https://firebase.google.com/docs/database)

過濾、排序
[https://firebase.google.com/docs/database/web/lists-of-data](https://firebase.google.com/docs/database/web/lists-of-data)

### 蕭文洋の小天地
iyannic@gmail.com



## 報告概要
報告：
1.今天做了哪些功能(條列說明功能)
2.挑一個你最有成就感的功能show給大家看&解說這個功能的使用方式
  http://bit.ly/oazoom2 點擊網址下載zoom，會議ID913 910 0327，密碼264880
心得：
1.今天的心情是：(輕鬆的、愉悅的、緊張的、疑惑的、憤怒的、有挑戰的)
2.工作與上課最不一樣的地方：(難度? 自由度? 時間壓力? 沒解答? 執行效率? )
3.碰到問題&解決過程：描述一下遇到的最大問題&如何解決(先上網查? 後問老師? 組員提供? )
4.如何評估工作難度&時間：(學過這個語言? 做過類似功能? )
5.今天解鎖的成就：(新語言、新功能、新演算法、新觀念)···············
6.與心中工程師的想像：(差一點如：、差很多如：)


