# 共學圈圈 6000字心得
## **動機：**
**動機：**

在剛進入這所學校的時候，我們面對了升上大學的第一個挑戰，那就是選課。學校的校務資訊系統設計並不人性化，光是找到選課系統的位置在哪裡就有些困難，進入選課系統後更是無所適從。

首先，我們的選課系統由課程查詢系統、預排系統以及正式選課系統組成。學生可以先在課程查詢系統系統裡查詢課程，看這學期有哪些有興趣的課，並且在預排系統將這些課程安排在課表上，規劃一下下學期的課表。還能查詢哪些時段有什麼課，方便安排通識課或選修課的時間。但是，最重要的選課系統居然沒有依照課程名稱或是開課時間查詢的功能。讓我們在尋找合適的課程時，往往需要花費大量時間和精力，從不同的開課單位下一個一個肉眼搜尋資訊，這個過程非常的累人而且效率很低。網路上的論壇（如： Dcard, PTT ）有課程的評價，對於選課是非常重要的參考資料，但每一門課程都需手動搜尋，需要花費大量的時間才能完成。
此外，選課時間還安排在期末考準備週，我們並沒有足夠的時間和精力來進行選課。
這些問題讓我們想要創建一個集中、簡單、高效的查詢平台。我希望能夠透過科技的力量，讓電腦為我們處理繁雜的手動過程，為學生提供一個方便快捷的方式，讓他們能夠輕鬆地找到符合自己需求的課程。

我們希望透過提供一個開放、透明的查詢平台，能夠打破信息壁壘，使得每位學生都能找到喜愛的課程，能在清華大學平等的獲得優質的教育資源。

## **設計思路：**

在開始這個專案之前，我們花了很多時間思考與討論使用者的需求。我們希望有一個方便的系統，可以依各種條件對課程進行查詢與篩選。基於這些洞察，我們制定了一個簡單、直觀且功能強大的設計。

網站的前端設計注重用戶體驗，提供美觀的介面、清晰的指示和友好的介面，以確保使用者能夠輕鬆地查找所需信息。而且我們盡力網站在各種設備上都能夠提供一致的使用體驗，包括電腦、平板和手機。
後端則使用Next.js做伺服器渲染，來提高網站的性能。先進的搜尋演算法和資料庫，使查詢速度快且結果準確，這樣能讓使用者能快速地得到網站的回饋。

## **專案開發技術簡介（使用Next.js）：**

**1. 前端技術：**

- **Next.js：** 使用 React.js 和 Next.js 進行前端開發。
Next.js 提供了一個基於React.js的快速簡單的框架，能夠以模組化的方式開發，讓我們能快速的撰寫程式並且維護他，支援伺服器渲染和靜態網站生成，很適合我們的專案。

     // Next.js 頁面組件範例
     import React from 'react';

     const CoursePage = ({ course }) => (
       <div>
         <h3>{course.title}</h3>
         <p>{course.description}</p>
       </div>
     );

     export async function getServerSideProps(context) {
       const courseId = context.params.id;
       const course = 

       return {
         props: {
           course,
         },
       };
     }

     export default CoursePage;

- **Redux Toolkit：** 用 Redux Toolkit 讓 Redux 更容易使用，提高效率。

     // Redux Toolkit 
     import { createSlice } from '@reduxjs/toolkit';

     const courseSlice = createSlice({
       name: 'course',
       initialState: { data: null },
       reducers: {
         setCourse: (state, action) => {
           state.data = action.payload;
         },
       },
     });

     export const { setCourse } = courseSlice.actions;

     export default courseSlice.reducer;

- **SWR（React Hooks library for Data Fetching）：** 使用 SWR 處理 data request。

     import useSWR from 'swr';

     const fetcher = (url) => fetch(url).then((res) => res.json());

     function CourseList() {
       const { data, error } = useSWR('/api/courses', fetcher);

       if (error) return <div>Failed to load</div>;
       if (!data) return <div>Loading...</div>;

       return (
         <ul>
           {data.courses.map((course) => (
             <li key={course.id}>{course.title}</li>
           ))}
         </ul>
       );
     }

**2. 後端技術：**

- **Node.js + Express.js：** 使用Node.js作為後端的運行環境，Express.js處理 API request

     const express = require('express');
     const app = express();

     app.get('/api/courses', (req, res) => {
       res.json({ courses: [] });
     });

     app.listen(3000, () => {
       console.log('Server is running on port 3000');
     });

- **MongoDB：** 使用MongoDB作為數據庫，儲存和查詢課程信息。

     // 使用Mongoose連接MongoDB
     const mongoose = require('mongoose');
     mongoose.connect('mongodb://localhost/courses', { useNewUrlParser: true, useUnifiedTopology: true });

     const courseSchema = new mongoose.Schema({
       title: String,
       description: String,
     });

     const Course = mongoose.model('Course', courseSchema);

**3. 安全性技術：**

- **HTTPS：** 在Next.js中使用HTTPS，確保數據的安全性。

     // next.config.js
     module.exports = {
       env: {
         NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
       },
       https: process.env.NODE_ENV === 'production',
     };

## **開發挑戰：**
雖然我們是資工系的學生，並且有一些程式基礎，但對網站開發的經驗卻是少之又少。因此這個小專案對我們還是有一定難度的。我們在讀書會的時間在網路上看教學影片和技術文獻學習相關知識，並立刻投入實作。這樣我們不僅可以高效率的開發網站的相關技術，同時也能做出一個作品。
在寫程式的過程中當然免不了出現各種奇奇怪怪的問題，很可能自己一個人看一個小時都看不出個所以然來，但還好讀書會的形式讓我們可以幫彼此檢查程式，請別人幫忙往往能最快的找出自己的邏輯盲點，這讓我們得以在幾次的讀書會聚會就完成這個專案。
以下是我們遇到的一些問題，以及最終我們克服困雃的方式。
- **前端與後端的整合：**

- **挑戰：** 我們一部分的人負責開發前端的網頁，另一部分則負責處理後端，前端和後端的協同開發需要良好的協作和溝通。前後端的接口定義、數據傳輸格式等需要一致，否則可能導致前後端整合時出現錯誤。

- **應對措施：** 我們使用Swagger等API工具確保前後端的接口文檔清晰，好在對方就在鍋子的對面，我們可以快速的溝通。同時，採用了前端和後端分離的架構，這使得各自的團隊可以獨立工作，減少整合時的問題。

- **安全性問題：**

- **挑戰：** 由於網站涉及用戶隱私資訊，安全性是一個關鍵問題。防止數據泄露、身份驗證攻擊等安全問題對我們來說是一個重要挑戰。

- **應對措施：** 我們使用了HTTPS加密傳輸封包資料，使用JWT實現了合法用戶的身份驗證，盡力讓程式中不存在安全漏洞。

- **用戶體驗的平衡：**

- **挑戰：** 在提供豐富的功能和即時回饋的同時，保持網站的簡潔和易用是一個平衡問題。太多的訊息和功能可能讓用戶感到困惑。

- **應對措施：** 我們採用了用戶測試和反饋的方式，不斷調整UI界面，確保使用者能夠直觀地使用網站。同時，提供清晰的說明和幫助文檔，以引導使用者使用更複雜的功能。

- **技術選擇的平衡：**

- **挑戰：** 選擇技術時需要在性能、開發速度、未來擴充可能等多方面取得平衡。選擇適合的技術對整個項目的架構甚至開發速度至關重要。

- **應對措施：** 我們在技術選擇時進行了詳細的評估和比較，根據項目的實際需求做出了適當的選擇。同時，保持技術更新，隨時應對新的挑戰。

### **專案心得：**

這次參與查詢課程的網站開發是一次充滿學習機會的經歷。透過這個專案，我們的程式能力在多個方面得有了明顯的進步，不僅在技術深度上有了更深的理解，也在團隊協作、問題解決等方面有了更全面的發展。

**1. 技術深度與廣度的提升：**

在專案中，我們需要進行前端和後端的開發工作。在前端方面，我們深入學習了React.js和Next.js，這使我們更好地理解了模組化開發、狀態管理、路由控制等方面的知識。同時，使用SWR這樣的新型數據獲取工具，提高了我們對前端性能最佳化的認識。

在後端方面，使用Node.js和Express.js搭建了API服務，這為我們打開了後端開發的大門。我學到了如何處理HTTP請求、設計API接口，並且使用MongoDB作為資料庫，學習如何使用資料庫系統來完成工作。

**2. 團隊協作的實踐：**

這個專案是一個真正的團隊合作，每個人在專案中都有自己負責的部分。透過與團隊的緊密合作，我們都更知道如何有效地與他人溝通、合作，如何根據項目需求適應和整合不同的技術和想法。

雖然彼此之間會因為思考方式的不同而產生一些衝突，在程式撰寫時這個情況尤其明顯，四個人的思考邏輯都不太一樣，常常有看不懂其他人程式的情況。但在溝通過後，我們能夠理解彼此思考的方式，並且發現每個人的想法都有其優秀之處，取他人之長彌補己之短處，最後開發出一個高效率的程式。

我們在專案中使用了 github 進行版本管理，為了讓開發進度一目瞭然，並且彼此同步，我們會定期暫停手邊工作幫完成的程式放到 github 上，這段寶貴的暫停時間讓我們可以檢查程式、幫彼此解決問題、規劃接下來的進度等等。這是一個十分好用的工具，往後的開發我們也決定繼續沿用他。

**3. 問題解決和自我學習的能力：**

專案中遇到了不少挑戰，例如數據格式的不統一、前後端整合的問題等。這讓我們需要不斷學習新知識，並且主動尋找解決方案。在查閱官方說明書、線上論壇遇到一樣問題的網友的提問、與團隊成員溝通，我們不斷地克服這些困難，在培養了解決問題的能力的同時，一步一步往完成開發的目標前進。

**4. 對新技術的掌握和應用：**

專案中，我們不僅使用了一些主流的前端和後端技術，還嘗試了一些新興的工具和框架。例如，我們使用了SWR這個在當前React生態系統中嶄露頭角的數據獲取庫，這讓我更好地理解了React Hooks的應用和優勢。

同時，我們也嘗試了一些先進的前端優化技術，例如代碼分割、賜福器渲染等，這擴展了我在前端性能最佳化方面的視野。

## 結論：

這次參與查詢課程的網站開發讓我們深刻體會到了程式世界的無窮可能性，也為我們的個人成長和專業發展開啟了新的大門。

團隊合作成為這次專案裡面最重要的部分。在這個過程中，我們彼此之間建立了堅實的合作基礎，也慢慢的有了良好的友誼，通過不斷的溝通和協作，我們成功地克服了各種技術和管理上的挑戰。在整個開發過程中，我們深刻體會到了團隊的力量，每個成員都發揮了自己的專長，共同努力讓這個專案達到了預期的目標。

特別是在問題解決的過程中，團隊的協作讓人獲益良多。每當遇到難題，我們能夠共同討論、共享想法，從不同的角度來思考問題，最終找到最佳的解決方案。這種集體智慧的體現讓我對團隊協作的價值有了更深的理解。

同時，這次合作也讓我更好地理解了溝通的重要性。很幸運的，共學圈圈計畫讓我們能夠有經費找一個良好的場地討論並工作。我們只要對坐在旁邊的朋友說句話，就立刻能得到答覆，這讓我們的溝通可以十分快速有效。而我們也利用這項優勢，使得每個成員不僅清楚自己手上的工作，也能保持對整個專案的全面了解。

總的來說，這次的經歷讓我深深體會到，一支優秀的團隊就像一台精密的機器，每個零件都有其獨特的功能，而只有在配合無間的情況下，這台機器才能達到最佳的運轉效果。這次合作的成功，除了技術的突破和個人能力的提升，更在於我們作為一個整體的協作和共鳴。這次的心得讓我們相信，團隊合作不僅是解決問題的力量，更是實現夢想的關鍵。