銀河護胃隊-beta衝刺

starryship發表於2024-12-05
作業所屬課程 https://edu.cnblogs.com/campus/fzu/SE2024/
作業要求 https://edu.cnblogs.com/campus/fzu/SE2024/homework/13310
作業的目標 beta衝刺總結
團隊名稱 銀河護胃隊
團隊成員學號-名字 072208130-曹星才（組長）
052205144-張詩悅
102201120-陳康培
102201342-潘宇晴
102202108-王露潔
102202111-劉哲睿
102202128-林子豪
102202142-黃悅佳
102202149-詹鎮壕
102202153-來再提·葉魯別克

一、alpha衝刺後問題與解決

問題一

問題：

在小程式的部署過程中，我們只能在安卓手機端上執行，其他裝置如蘋果、電腦，暫時無法使用。

解決方法：

iOS裝置除錯：對於iOS裝置，需要在開發者工具中設定特殊UserAgent讓小程式程式碼知道是iOS平臺，並且在iOS裝置上攔截URL特殊處理，以便小程式程式碼在iOS平臺上正常執行。

問題二

問題：

前後端對接未完成，部分後端介面設計在同一個埠，且flask預設是單執行緒的，當接受較多請求時，後端響應時速度過慢

探索思路：

可以透過提高硬體效能解決，但不現實，考慮能否實現多執行緒同步響應或者將部分介面呼叫埠分離，以提高響應速度。

解決過程：

對不同介面進行分離呼叫，如將大模型部分的介面與資料庫資料管理的介面分別部署在不同的埠上，同時使用flask的併發介面，開啟多執行緒處理請求，提高處理速度。

問題三

問題：

部分頁面或元件在不同裝置上顯示不正常，可能是由於響應式設計不足或樣式衝突，導致頁面在不同尺寸的螢幕上無法自適應。
解決方案：
使用瀏覽器的開發者工具模擬不同裝置，檢查佈局和樣式，發現部分頁面未使用合適的媒體查詢來適配不同的螢幕尺寸。針對這個問題，增加了媒體查詢來確保頁面在各種裝置上都能自適應顯示，同時使用了 flexbox 和 grid 等 CSS 佈局模組來最佳化佈局的響應式效果，確保字型、影像等元素在各種螢幕上都能正確顯示。

問題四

問題：

在前端開發中，遇到了一個影響使用者體驗的問題：食譜詳情頁面載入緩慢，尤其是在網路環境較差的情況下，使用者需要等待較長時間才能看到食譜內容。
解決方案：
使用瀏覽器的開發者工具進行網路分析，發現每次載入食譜詳情時，頁面會發起多個 API 請求，而部分 API 請求的響應時間較長，尤其是獲取食材的介面。所以進行了對API 請求的合併，即將多個相關的 API 請求合併為一個請求，減少網路請求次數。

問題五

問題：

在協助前端進行整合時，前端的程式碼無法呼叫後端的介面。

解決方案：

為了解決前端程式碼無法呼叫後端介面的問題，我們採取了以下措施：首先，我們在後端伺服器上配置了CORS策略，允許前端域名進行跨域請求。但沒用，後面我們研究後發現在伺服器上的開放的埠太少，太多請求同時進行會佔用埠導致無法呼叫。為了解決這個問題，我們在伺服器上多開放了幾個埠。這樣可以確保即使在高併發的情況下，伺服器也能夠處理來自前端的請求，避免因埠不足而導致的呼叫失敗。透過這些措施，我們成功解決了前端程式碼無法呼叫後端介面的問題，確保了專案的順利進行。

問題六

問題：

前端和後端之間的資料傳輸格式（JSON、表單資料等）會出現問題。例如，前端傳送的資料結構不符合後端的要求，或者後端返回的資料格式不符合前端的預期。前端和後端可能部署在不同的域上，這會導致跨域問題，瀏覽器阻止前端請求後端介面。

解決辦法：

確保前後端的資料格式統一，使用 JSON 作為標準資料交換格式；前端傳送請求時需要設定正確的 Content-Type，後端則要正確解析請求體中的 JSON 資料。
跨域問題（CORS）。使用 CORS（跨域資源共享）中介軟體解決跨域問題。在 Flask 中，可以透過安裝 flask-cors 來輕鬆解決

問題七

問題：

呼叫AI介面並給其模板併合成成為一個大介面並進行除錯輸出時，返回的答案會是兩次一摸一樣的

解決方案：

為了解決這個問題，我在每次呼叫AI介面時增加了一個唯一的呼叫標識，時間戳以確保每次呼叫都是獨立且可區分的。我仔細審查了介面的程式碼邏輯，確保沒有錯誤導致重複呼叫或返回相同的結果。後面發現其實是AI介面輸出了一次結果，後面又返回輸出了一次。所以我們在處理介面返回資料時，增加了邏輯判斷，只取第一次的返回結果進行輸出，忽略後續的重複返回。這樣就解決了問題

問題八

問題：

在前端頁面加入logo背景圖片會導致部分按鈕失靈。

解決方案：

背景圖片使用 position: absolute; 定位，這樣它就不會佔據任何文件流的空間，從而不會影響按鈕的佈局和點選區域。透過設定 z-index: 0，確保背景圖片位於頁面的最底層，這樣其他元素（如按鈕）就可以位於背景圖片之上。背景圖片的 opacity 設定為 0.1;，這意味著它是完全不透明的，這樣就不會遮擋任何位於其上的元素。

問題九

問題：
關於體重記錄的部分，每次記錄完之後，記錄的新體重就會取代初始體重，而且折線圖上每次退出後重新進入也只會保留上次最新的一個記錄，導致不好看出體重的變化趨勢。

解決思路：

這涉及到後端返回的資料的格式以及資料庫中表格的設計，前端需要的是使用者體重的所有歷史資料，所以相對應的後端從資料庫中獲取的體重資料應該是json型別，而不是目前的int型別，只要修改一下資料庫表格的結構和介面中返回資料的邏輯，應該就能使得前端呈現出體重記錄的變化

二、專案特色功能

食譜食物查詢

可以查詢有什麼食譜推薦，點進去可以看到該食譜的詳細資料，包括但不限於該食譜的餐廳位置、價格、營養成分、食材、過敏原。

還可以查詢食物的資料

在食物紅黑榜處可以看對應疾病、或者是減肥、增肌目標的推薦和謹慎食用的食物

隨心配

不知道吃什麼？可以到我們的隨心配介面，“換一換”，挑選你心動的食物！

身體資料記錄

身體資料記錄，用於後面的健康計劃生成和食物推薦

記錄每天攝入的食物熱量以及體重變化和一些其它的身體資料

AI小助手

普通詢問

基於身體資料詢問

生成一週計劃

生成（儲存）為健康計劃

三、軟體測試

後端測試

API測試





進行多執行緒測試（10輪次，10執行緒同時進行）

執行緒數量為10，此時響應速度較慢，平均請求耗時達到163毫秒，約為單執行緒次數的三倍

執行緒數量為20時，達到約260毫秒


Python程式碼測試

測試使用者登入註冊等功能


測試透過


前端測試

1. 單元測試（Unit Testing） 單元測試主要用於測試程式碼中每個獨立功能的正確性。在本專案中，前端的每個元件都可以進行單元測試。

  • 目標：確保各個元件的功能符合預期，特別是：

    • collectionItems是否正確傳遞到元件並渲染。
    • 按鈕是否按預期執行goBack方法，跳轉到其他頁面。
    • syncCollection方法是否正確同步資料（儘管現在是佔位方法，未來會實現從雲端獲取資料的功能）。

  • 工具：Jest、Mocha等

  • 測試案例：

    1. 驗證collectionItems的資料是否在頁面中正確渲染。
    2. 驗證返回按鈕是否觸發頁面跳轉。

    程式碼：

    import { mount } from '@vue/test-utils';
import CollectionPage from '@/components/CollectionPage.vue'; // 假設你的元件路徑是這樣
import { createRouter, createWebHistory } from 'vue-router';

describe('CollectionPage.vue', () => {
  let wrapper;
  const mockPush = jest.fn(); // 模擬router.push方法

  beforeEach(() => {
    // 建立一個mock路由例項
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/home', name: 'home' },
      ],
    });

    // 掛載元件
    wrapper = mount(CollectionPage, {
      global: {
        plugins: [router],
      },
      data() {
        return {
          collectionItems: [
            { name: '水煮雞胸肉', description: '低脂高蛋白的健身餐', image: '/path/to/image1.png' },
            { name: '水煮蝦', description: '低卡高蛋白的健康食物', image: '/path/to/image2.png' },
          ],
        };
      },
    });
  });

  it('renders collection items correctly', async () => {
    // 測試菜品列表是否正確渲染
    const items = wrapper.findAll('.collection-item');
    expect(items.length).toBe(2); // 確保渲染了兩項菜品

    const firstItemTitle = items[0].find('.item-title');
    expect(firstItemTitle.text()).toBe('水煮雞胸肉'); // 檢查第一個菜品的標題

    const secondItemDescription = items[1].find('.item-description');
    expect(secondItemDescription.text()).toBe('低卡高蛋白的健康食物'); // 檢查第二個菜品的描述
  });

  it('fires goBack method correctly', async () => {
    // 測試返回按鈕是否觸發跳轉
    const backButton = wrapper.find('.back-button');
    await backButton.trigger('click'); // 觸發點選事件

    expect(mockPush).toHaveBeenCalledWith('/home'); // 驗證是否呼叫了路由跳轉方法
  });

  it('handles empty collectionItems gracefully', async () => {
    // 測試如果 collectionItems 為空，頁面是否沒有崩潰
    await wrapper.setData({ collectionItems: [] });
    const items = wrapper.findAll('.collection-item');
    expect(items.length).toBe(0); // 確保沒有渲染任何菜品項
  });

  it('renders correct alt text for images', async () => {
    // 測試圖片的alt屬性是否正確
    const images = wrapper.findAll('.item-image');
    expect(images.at(0).attributes('alt')).toBe('載入中'); // 檢查第一個圖片的alt文字
  });
});

2. 驗收測試（Acceptance Testing） 驗收測試主要驗證使用者需求是否被滿足。透過模擬使用者行為，確保應用能夠正確實現預期的業務需求。

  • 目標：確保使用者在“我的收藏”頁面的各項操作都能順利完成：

    • 使用者點選返回按鈕後是否跳轉到主頁。
    • 使用者能看到菜品的圖片、名稱和描述，並且圖片能正確載入。

  • 工具：Selenium、Cypress等

  • 測試案例：

    1. 使用者進入頁面時是否顯示菜品列表。
    2. 使用者點選返回按鈕是否跳轉到指定頁面。

  • 程式碼：

    import { mount } from '@vue/test-utils';
import HealthReportPage from '@/components/HealthReportPage.vue'; // 假設你的元件路徑是這樣
import { createRouter, createWebHistory } from 'vue-router';

describe('HealthReportPage.vue', () => {
  let wrapper;
  const mockPush = jest.fn(); // 模擬router.push方法

  beforeEach(() => {
    // 建立一個mock路由例項
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/home', name: 'home' },
      ],
    });

    // 掛載元件
    wrapper = mount(HealthReportPage, {
      global: {
        plugins: [router],
      },
      data() {
        return {
          healthReport: {
            healthStatus: '無慢性疾病，無過敏現象',
            lifestyle: '輕度運動，長期久坐',
            testResults: {
              bloodSugar: '正常',
              bloodFat: '正常',
            },
            otherIndicators: '正常',
          },
        };
      },
    });
  });

  it('renders health report data correctly', async () => {
    // 測試健康報告資料是否渲染
    const healthStatus = wrapper.find('.health-status');
    expect(healthStatus.text()).toBe('健康狀況：無慢性疾病，無過敏現象');

    const lifestyle = wrapper.find('.lifestyle');
    expect(lifestyle.text()).toBe('生活習慣：輕度運動，長期久坐');

    const bloodSugar = wrapper.find('.blood-sugar');
    expect(bloodSugar.text()).toBe('血糖水平：正常');

    const bloodFat = wrapper.find('.blood-fat');
    expect(bloodFat.text()).toBe('血脂水平：正常');

    const otherIndicators = wrapper.find('.other-indicators');
    expect(otherIndicators.text()).toBe('其他指標：正常');
  });

  it('fires goBack method correctly', async () => {
    // 測試返回按鈕是否觸發跳轉
    const backButton = wrapper.find('.back-button');
    await backButton.trigger('click'); // 觸發點選事件

    expect(mockPush).toHaveBeenCalledWith('/home'); // 驗證是否呼叫了路由跳轉方法
  });

  it('displays health report sections correctly', async () => {
    // 測試報告頁面的不同部分是否顯示正確
    const reportSections = wrapper.findAll('.report-section');
    expect(reportSections.length).toBe(4); // 確保有4個報告部分顯示

    const reportTitle = wrapper.find('h1');
    expect(reportTitle.text()).toBe('體檢報告'); // 檢查報告標題是否正確
  });

  it('handles missing data gracefully', async () => {
    // 測試如果缺少健康報告資料，頁面是否正常顯示
    await wrapper.setData({
      healthReport: {
        healthStatus: '',
        lifestyle: '',
        testResults: {
          bloodSugar: '',
          bloodFat: '',
        },
        otherIndicators: '',
      },
    });

    const healthStatus = wrapper.find('.health-status');
    expect(healthStatus.text()).toBe('健康狀況：無資料'); // 如果沒有資料，應該顯示“無資料”
  });
});

3. 可訪問性測試（Accessibility Testing） 可訪問性測試確保頁面可以被所有使用者使用，包括有視力或聽力障礙的使用者。

  • 目標：確保頁面符合WCAG（Web Content Accessibility Guidelines）標準。

    • 頁面元素是否可以透過鍵盤導航。
    • 視力受限的使用者是否可以透過螢幕閱讀器理解頁面內容。

  • 工具：axe-core、Google Lighthouse等

  • 測試案例

    1. 檢查所有圖片是否有合適的alt屬性。
    2. 確保頁面能夠透過鍵盤進行導航。

  • 程式碼：

    import { mount } from '@vue/test-utils';
import HealthReportPage from '@/components/HealthReportPage.vue'; // 假設你的元件路徑是這樣
import { createRouter, createWebHistory } from 'vue-router';
import { axe } from 'jest-axe';

describe('HealthReportPage.vue', () => {
  let wrapper;

  beforeEach(() => {
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/home', name: 'home' },
      ],
    });

    wrapper = mount(HealthReportPage, {
      global: {
        plugins: [router],
      },
      data() {
        return {
          healthReport: {
            healthStatus: '無慢性疾病，無過敏現象',
            lifestyle: '輕度運動，長期久坐',
            testResults: {
              bloodSugar: '正常',
              bloodFat: '正常',
            },
            otherIndicators: '正常',
          },
        };
      },
    });
  });

  it('should have no accessibility violations', async () => {
    // 使用 axe-core 來檢查頁面的可訪問性
    const results = await axe(wrapper.element);

    // 驗證沒有可訪問性問題
    expect(results).toHaveNoViolations();
  });

  it('should have proper ARIA attributes', async () => {
    // 測試健康報告頁面是否包含必要的ARIA屬性
    const healthStatus = wrapper.find('.health-status');
    expect(healthStatus.attributes('aria-label')).toBe('健康狀況'); // 確保有正確的ARIA標籤

    const lifestyle = wrapper.find('.lifestyle');
    expect(lifestyle.attributes('aria-label')).toBe('生活習慣'); // 確保有正確的ARIA標籤
  });

  it('should have proper tab order', async () => {
    // 測試頁面上的可互動元素（如按鈕、輸入框等）是否有合適的tab順序
    const focusableElements = wrapper.findAll('button, a, input, select, textarea');
    const tabIndexes = focusableElements.map((el) => el.element.tabIndex);

    // 確保tab順序是正確的
    expect(tabIndexes).toEqual([0, 0, 0]); // 根據你的頁面內容調整預期的tabIndex值
  });

  it('should have proper alt text for images', async () => {
    // 測試頁面中的所有圖片是否有合適的alt文字
    const images = wrapper.findAll('img');
    images.wrappers.forEach((imageWrapper) => {
      const altText = imageWrapper.attributes('alt');
      expect(altText).not.toBe('');
    });
  });
});

4. 迴歸測試（Regression Testing） 迴歸測試確保新修改或新增的程式碼不會破壞現有功能。

  • 目標：確保在程式碼更新後，頁面的各個功能依然能夠正常執行。

    • 在修改程式碼後，重新執行所有測試用例。

  • 工具：Jest、Cypress等

  • 測試案例

    1. 執行全部單元測試，確保元件功能不被破壞。
    2. 測試各個頁面的跳轉是否正常，確保返回按鈕和其他功能無誤。

  • 程式碼：

    import { mount } from '@vue/test-utils';
import HealthReportPage from '@/components/HealthReportPage.vue'; // 假設你的元件路徑是這樣
import { createRouter, createWebHistory } from 'vue-router';

describe('HealthReportPage.vue', () => {
  let wrapper;

  beforeEach(() => {
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/home', name: 'home' },
      ],
    });

    wrapper = mount(HealthReportPage, {
      global: {
        plugins: [router],
      },
      data() {
        return {
          healthReport: {
            healthStatus: '無慢性疾病，無過敏現象',
            lifestyle: '輕度運動，長期久坐',
            testResults: {
              bloodSugar: '正常',
              bloodFat: '正常',
            },
            otherIndicators: '正常',
          },
        };
      },
    });
  });

  it('should display correct health status', () => {
    const healthStatus = wrapper.find('.health-status');
    expect(healthStatus.text()).toBe('無慢性疾病，無過敏現象');
  });

  it('should display correct lifestyle habits', () => {
    const lifestyle = wrapper.find('.lifestyle');
    expect(lifestyle.text()).toBe('輕度運動，長期久坐');
  });

  it('should display correct test results', () => {
    const bloodSugar = wrapper.find('.blood-sugar');
    expect(bloodSugar.text()).toBe('血糖水平正常');

    const bloodFat = wrapper.find('.blood-fat');
    expect(bloodFat.text()).toBe('血脂水平正常');
  });

  it('should display correct other indicators', () => {
    const otherIndicators = wrapper.find('.other-indicators');
    expect(otherIndicators.text()).toBe('正常');
  });

  it('should handle changes in health status', async () => {
    // 模擬更新健康狀態
    await wrapper.setData({
      healthReport: {
        healthStatus: '有高血壓',
        lifestyle: '輕度運動，長期久坐',
        testResults: {
          bloodSugar: '正常',
          bloodFat: '正常',
        },
        otherIndicators: '正常',
      },
    });

    const healthStatus = wrapper.find('.health-status');
    expect(healthStatus.text()).toBe('有高血壓');
  });
});

四、成員衝刺體會和收穫

🌟曹星才

對於本次beta衝刺，相較於前面alpha衝刺的身體和心理同等權重摺磨，這次beta衝刺的折磨更多是心理折磨。作為組長，雖然不用打程式碼，但是要做一些雜活（答辯、部落格、ppt、專案文件等等），還得跟進每一個組員的進度，這邊問問、那邊問問，每得到一個版本又要這邊改改、那邊改改，像個老媽子一樣，整天操心這個那個做沒做好。因為每組員的能力不太一樣，每次分配任務都是一個大難題，有時候分配給組員做的一些很簡單的問題但是他們又沒做好，我都恨不得我自己來做（無奈又無力(；′⌒`)，心力憔悴），這條路不行那就找下一條路，這個方案不行那就找另外的解決方案，一步步走，終於是把這個軟體給做出來了。

雖然咱們的“養食記”小軟體看起來沒有很出色，但是在我心裡它就是所有組裡面最厲害的！在衝刺的過程中，不斷的改程式碼、溝通交流、一步步明確需求，一起把這個軟體做好，和團隊成員不斷地進步，這也許就是這門抽象的課給我最好的收穫了吧。

喜提“沒事”人：

🥓王露潔

我們的專案已經接近尾聲了，這實a在a是一場令人難忘的，伴隨著各種喜怒哀樂的小組作業經歷。這次beta衝刺主要任務就是進行前後端的對接工作，根據需要將後端的資料呈現在前端的介面上，這不是一件容易的事兒。我這一週一直在反覆除錯，遇到AI無法解決的問題時，我會求助同組的夥伴，他們會把自己知道的東西毫無保留地教給我，最終總能將問題迎刃而解。果然人最不可缺少的就是可靠的夥伴，有了可靠的夥伴，不管做幾次這樣的作業我都不怕（不過最好還是別做了）。

🍕詹鎮壕

在小程式開發的beta衝刺階段，我主要負責前後端的交接工作和介面bug的處理。這個階段讓我深刻認識到精確溝通和細緻測試的重要性。透過與前端團隊的緊密合作，我們確保了介面的相容性和響應速度，同時快速定位並修復了多個關鍵bug，提升了系統的穩定性。這個過程鍛鍊了我的問題解決能力，並加深了我對前後端協同工作流程的理解。

🍩黃悅佳

​ 在本次beta測試中，作為後端開發小組的一員，我深刻了解到後期的測試與最佳化對於一款軟體開發的重要性。在實際體驗自己開發的軟體和程式測試的過程中，各種問題bug層出不窮，需要一步步修改完善。

團隊軟體開發不是一個人能夠完成的，需要整個小組的共同努力，面對問題時，自己獨自理解他人寫的程式碼並修改是很困難的，要優先向程式碼的原作者進行詢問了解情況，能過大大提高修改bug的效率。

🍟劉哲睿

在此次beta衝刺中，我作為負責AI介面的開發和呼叫，深刻體會到團隊合作和個人技能提升的重要性。透過與其他後端隊友的緊密協作，我們成功解決了多個技術難題，如生成健康計劃的回答有誤，幫助前端整合程式碼，這些經歷讓我認識到有效溝通和協調任務的重要性，並提升了我的問題解決和時間管理能力。同時，我也意識到持續學習新技術對於專案成功至關重要。在壓力下，我學會了保持冷靜和專注，確保在團隊中能夠盡我所能實現共同目標。這次衝刺讓我更加明確了團隊合作和個人的學習與工作能力對專案成功的影響。

🥚張詩悅

在本次專案開發過程中，我主要負責AI介面的開發和呼叫，深刻體會到了團隊合作、溝通協調以及技術能力提升的重要性。特別是在處理影像識別和資料預處理方面，團隊成員之間的緊密配合使得問題能夠快速被發現和解決。例如，在處理訓練資料時，儘管我遇到了多次資料預處理錯誤，透過與前端同學的溝通和及時的技術調整，我們找到了合適的解決方案，並有效避免了技術瓶頸的產生。這個過程中，我不僅提升了自己的問題解決能力，還學到了如何在高壓下合理分配時間和資源。

此外，我也意識到持續學習和適應新技術對於專案的成功至關重要。無論是深度學習模型的微調還是資料處理方法的調整，都讓我更加註重技術的深度和廣度。在後期的開發中，我加強了對資料集的理解，嘗試在不同場景下最佳化模型的表現，從而進一步提升了自己的專業能力。

這次專案讓我更加明確了團隊合作和個人學習能力的重要性，也讓我更加堅定了在工作中不斷積累經驗和提升自己技術水平的決心。

🥙來再提

在這次 Beta 衝刺中，我主要負責首頁的功能開發和最佳化。在解決首頁食譜查詢頁面、食物排行榜以及食譜推薦的資料動態載入時，我與後端同學合作，實現了 API 介面。一開始在接介面的過程中，我遇到了很多難題，最後還是透過後端同學和小組長的協助下才完成了這些任務。Beta 衝刺讓我提高了團隊合作意識和使用者體驗意識。透過這次實踐，我更加充分地理解了前後端是如何對接執行的，並積累了寶貴的經驗。

🍠潘宇晴

在這次beta衝刺中，我負責將部分前端頁面與後端相對接。由於之前一直做的是前端有關的工作，所以當我收到後端程式碼時有些不知所措，在同組組員和小組長的幫助下，我嘗試將前端與後端對接執行，成功執行後我開始進行自己負責頁面的對接。一開始總是對接失敗，透過和後端同學的溝通交流，後端程式碼也不斷修改完善成我需要的介面，我一次次試驗修改bug，最終成功將前端程式碼與後端程式碼對接。當對接成功的一刻，前端頁面載入出內容，我感到非常有成就感。這次實踐讓我更加充分地理解了前後端是如何對接執行，使我的實踐操作能力進一步增強。

🍰陳康培

在這次專案開發過程中，我深刻體會到了前端開發中細節的重要性。首先，解決頁面響應式設計的問題讓我意識到，不同裝置的適配不僅僅是調整佈局那麼簡單，還需要考慮字型、影像等元素的自適應顯示。透過合理使用 flexbox 和 grid 等現代佈局技術，我成功提高了頁面在各種裝置上的相容性。而狀態管理問題則讓我認識到，元件間的狀態傳遞應該保持簡潔和清晰。這次團隊合作讓我深刻感受到溝通與協作的重要性。每個人的貢獻都至關重要，只有在共同努力下，才能解決複雜的問題。透過相互支援和分工協作，我們能夠高效推進專案，達成共同目標。

🍭林子豪

在開發過程中，前後端分離架構帶來了非常大的靈活性。前端和後端可以獨立開發，且使用 API 進行通訊，使得前後端的開發團隊能夠並行工作，減少了耦合度。
學會了如何設計清晰且易於維護的 API。良好的 API 設計可以大大提高系統的可擴充套件性和靈活性。例如，RESTful 風格的介面能夠使得系統的擴充套件變得更加簡單，而響應中的標準化錯誤資訊和狀態碼也有助於快速定位問題。
在專案中深入瞭解了資料庫設計的要點，包括如何設計表結構、選擇合適的資料型別、使用索引等。在處理大量資料時，資料庫最佳化尤為重要。透過合理的索引設計和查詢最佳化，可以極大提高應用的效能。

五、軟體體驗

註冊的時候驗證碼可以隨便填

不想註冊的可以直接用測試賬號：手機號（123），密碼（123）

使用手機掃碼體驗（注意只能Android使用者使用，ios的開發者難申請而且比較貴）：

六、原始碼

專案倉庫：https://github.com/healthyFZU/beta

前端倉庫：https://github.com/healthyFZU/qianDuan

後端倉庫：https://github.com/healthyFZU/Backend_developers

相關文章