Software Studio 2021 Spring Midterm Project

Topic

• Project Name : Midterm_Project_108062108

Basic Components

Component	Score	Y/N
Membership Mechanism	15%	Y
Firebase Page	5%	Y
Database	15%	Y
RWD	15%	Y
Topic Key Function	20%	Y

Advanced Components

Component	Score	Y/N
Third-Party Sign In	2.5%	Y
Chrome Notification	5%	Y
Use CSS Animation	2.5%	Y
Security Report	5%	Y

作品網址：

https://software-studio-d7a04.web.app/index.html

Website Detail Description

此project為網頁聊天室，進入網站後，若還沒登入，則點選上方的Account -> Sign in進入登入頁面，若還沒有帳號，則先點Sign up。

登入後即可創建聊天室、加入新成員聊天。

另外，也可以更改個人簡介與大頭貼。

Components Description :

1. Sign up : 輸入名稱、E-mail、密碼註冊。
2. Sign in : 輸入E-mail、密碼登入。
3. Sign in with Google : 選擇Google帳戶登入。
4. RWD : 當頁面寬度縮小時，左半邊個人資訊欄會收起，只剩聊天畫面。點左上角個人資訊欄會出現，再點則出現聊天畫面。
5. Create private chatrooms : 點擊按鈕後，輸入聊天室名稱，就可以有新的聊天室。目前所加入的聊天室會顯示在頁面左方，點擊便可進入聊天。
6. Send messages : 在輸入框輸入訊息後，點或按Enter鍵傳送訊息。
7. history message : 點擊頁面左方的聊天室名稱，即可進入該聊天室並載入歷史訊息。
8. Chrome notification : 當其他人傳訊息過來，或有新成員被加入聊天室時會有通知。
9. CSS Animation : 登入後，進入聊天室前，會有"Start to chat"的動畫。
10. Deal with messages when sending html code : 可以成功傳送含有html code的訊息。

Other Functions Description :

1. Sign out : 登入後，點選上方的Account -> Sign out即可登出。
2. Add new members to chatroom : 進入聊天室後點右上角，接著輸入新成員E-mail，即可將他人加入聊天室。
3. Send heart : 點即可發送有彩色動畫的愛心。
4. Send like : 點即可發送有縮放動畫的讚。
5. Change my photo : 在大頭貼旁有「change your photo」的按鈕，點擊即可上傳大頭貼。
6. Edit profile : 點選上方的Account -> Your Profile，可以更改自我介紹。
7. Click photo and pop up profile : 在聊天室中點擊他人的大頭貼，會彈出此人的名稱、E-mail、自我介紹的資訊，再點擊一次大頭貼資訊就會消失。