目標

專案實戰想把網站開發跟PowerBI交換一下
目的是先讓大家在前面的爬蟲章節提到的HTTP跟前後端架構
去加深熟悉起來

這周的開端是以網頁開發為主
網頁工程師又可以分為前端工程師跟後端工程師兩種
這個各大網站應該都介紹到爆炸了
如果忘記可以複習[Day19] Python專案 - 爬蟲程式 - (1) 擷取資料前的武器鍛造(基礎知識、爬蟲工具、API)

因為本系列文章是Python
網頁框架並不會著墨太多
後端的程式邏輯還是會比較多
因為主要的
Backend 架構是用python起來的
Frontend 是由瀏覽器(HTML、javascript、css組成) => 主要以JS作為前端操作的程式語言

我的意思是還是前面幾個篇章講的
目標-> 設計 -> 工具-> 查找語法 ->實作
如果先把所有語法都學完再完成老闆或客戶目標就太慢了

今天主要會介紹幾個

1.網站設計的架構
2.套件管理工具
3.資料庫
4.API測試工具

1. 網站設計的架構

本篇會先講到今天以接案工程師來說
第一章節的講解會以
如果接到案子後
要使用哪個設計模式跟開發流程來探討

1.1目的取向區分開發模式

架設網站的目的可以分成兩種主要方法：使用內容管理系統（CMS）來建立網站，或者是掌握前後端工程師來自行開發。以下是這兩種方法的比較：

使用 CMS 建立網站

優點：

1. 簡單易用：CMS 如 WordPress、Joomla 和 Wix 等提供了直觀的界面和豐富的模板，使得非技術人員也能輕鬆地建立和自訂網站。
2. 快速部署：大多數 CMS 提供快速部署功能，讓您能夠快速上線並開始使用。
3. 免費或低成本：許多 CMS 提供免費或低成本的版本，適合小型企業或個人使用。

缺點：

1. 限制自定義：雖然 CMS 提供了許多自定義選項，但對於高度自定義需求的用戶可能會有所限制。
2. 安全性：由於使用者數量龐大，CMS 會面臨安全性問題，需要定期更新和維護。

掌握前後端工程師來自行開發

優點：

1. 高度自定義：掌握前後端技術，可以完全自定義網站的架構和功能，滿足高度複雜需求。
2. 控制權：完全控制網站的源代碼，可以進行任意修改和優化。
3. 性能優化：能夠根據需求進行性能優化，提高網站的速度和穩定性。

缺點：

1. 學習曲線陡峭：需要具備前後端工程師的技能，包括 HTML、CSS、JavaScript、後端語言（如 Node.js、Python 等）和資料庫管理等。
2. 耗時耗力：自行開發需要花費大量時間和精力，尤其是在初期階段。

結論

兩種方法各有其優缺點。使用 CMS 是適合那些不具備前後端技術但仍希望快速建立和自訂網站的用戶。掌握前後端技術則是適合那些需要高度自定義和控制權的用戶。最終的選擇取決於您的需求和技能水平。

CMS 開發的應用例子

** WordPress 部落格**
適合原因：WordPress 提供了簡單易用的界面和豐富的主題選擇，適合個人或小型企業快速建立和管理部落格。無需編碼知識，用戶可以輕鬆撰寫、編輯和發布內容。

** 電子商務網站（如 WooCommerce）**
適合原因：WooCommerce 是一個 WordPress 外掛，專為電子商務設計。它提供了完整的購物車功能和支付整合，讓商家能夠快速上線並開始銷售產品，而不需要深入的技術背景。

前後端開發的應用例子

自訂企業應用程式
適合原因：大型企業通常需要特定功能和流程，這時掌握前後端技術的工程師可以根據需求開發完全自訂的應用程式，以滿足業務需求。
例如: 權限控管、搭配AI或是視覺化分析的應用程式。

單頁應用程式（SPA）
適合原因：使用 React 或 Vue.js 等前端框架，可以創建流暢的單頁應用程式，提供更好的用戶體驗。這類應用通常需要與後端 API 進行交互，進行數據加載和更新。

如果你有很多邏輯是需要搭配交互應用，例如: 訂票系統、音樂播放系統、直播平台。這種需要高效能的交互應用。

移動應用程式
適合原因：掌握前後端技術的開發者可以創建跨平台的移動應用程式，利用框架如 React Native 或 Flutter，實現高效能且可重用的代碼庫。

1.2分析需求

基本上按照1.1區分好開發類別後
我會開始先把需求定義好

在前面有提到軟體設計的模式
需求 -> 分析 -> 設計 -> 實作 -> 測試 -> 部屬
可以參考

[Day5] 複習流程控制 - if else 的思路 跟 軟體設計流程分享

我們又可以把需求分析拆成下面的模式
因為網頁平台式大型專案
考量的點特別多
所以會需要集思廣益以及效率執行才會有好的結果

發散需求(使用心智圖)

第0天時有跟大家介紹過mapify、gitmind、xmind的功能
為什麼會使用心智圖

其實最適合先發散思維

今天要建立一個美食網站需求，我們可以跟客戶討論把功能展開

心智圖主要是把功能發散，不要限制範圍。

收斂需求(user story)

透過user story把每個情境拆分成
activities : 主要的動作，也可以是user的操作情境。
task : 依照情境可以分類成任務。
sub-task : 可以想像成任務的細項，也是要列出工程師要實作的功能列。

執行計畫(sprint goal)

軟體工程重要一環
透過把sub-task放在backlog當作代辦清單，之後首先要實作的放在task
之後再來是in-progress跟done

Sprint Goal 是在每個 Sprint 開始時設定的目標，旨在提供團隊一個清晰的方向和焦點。它是團隊在 Sprint 期間希望達成的主要目的，通常由產品負責人和開發團隊共同制定。Sprint Goal 應該具體、可測量、可實現、相關且有時間限制（SMART 原則）

2.套件管理工具

這邊會簡略介紹一下網站開發所需要的工具跟知識

2.1 技術大成

這邊有簡介有這些技術，大家可以嘗試去搜尋或查找資料
但是給大家一個大方向
我們主要會以python 後端程式來做重點教學

2.2必安裝套件組合

前端必安裝之框架 - Nodejs
Node.js 是一個基於 Chrome V8 引擎的開源 JavaScript 執行環境,簡單說原本javascript是在
前端瀏覽器執行的程式語言，但是透過這個安裝包可以在server或是user端上執行javascript,
跟我們的python寫法應用很像。

https://nodejs.org/zh-tw

應用場景

• 實時應用：如聊天應用、即時通知系統等，需要快速響應用戶操作。
• API 服務：構建 RESTful API 或 GraphQL 服務，適合數據密集型應用。
• 數據流處理：如視頻流、音頻流或大型文件上傳下載等。
• 單頁應用（SPA）：與前端框架（如 React 或 Vue）結合使用，提供動態內容。

Nodejs也是我們使用現代三大前端框架的主要執行環境以及套件安裝管理(npm類似python的pip)
所以說前端開發者必裝，後端開發者若使用nodejs (express、Koa等都算)

三大前端框架

2.3前端三大框架比較

如果問我要學哪個
vue最好學，因為語法結構精簡比較可以避掉javascript的深度知識操作
React 最多公司使用的前端框架，也就是學這個最大碗。
Angular 學得比較少，但是可以說比較適合有規範跟嚴謹的定義來使用(ts、組件設計創建嚴謹)。

3.資料庫

資料庫是一種系統，用於以結構化的方式儲存、檢索、更新和管理數據。資料庫通常由資料庫管理系統（DBMS）控制，並允許多位使用者同時訪問和操作資料。

3.1 資料庫分類

資料庫主要分為兩大類型：關係型資料庫（Relational Database）和非關係型資料庫（NoSQL）

3.2應用場景

• 關係型資料庫：適合需要高度結構化數據和複雜查詢的應用，如電子商務網站、銀行系統和企業資源規劃（ERP）系統。

[
  {
    "book_id": 101,
    "title": "The Great Gatsby",
    "author": "F. Scott Fitzgerald"
  },
  {
    "book_id": 102,
    "title": "To Kill a Mockingbird",
    "author": "Harper Lee"
  },
  {
    "book_id": 103,
    "title": "1984",
    "author": "George Orwell"
  }
]

這個應用就是有結構化的資料格式，非常適合用關聯資料庫。而且可以透過關聯資料去的索引去快速查找。

• 非關係型資料庫：適合需要快速擴展和處理大量非結構化數據的應用，如社交媒體平台、即時消息服務和大數據分析。

{
  "_id": "post_001",
  "user_id": "user_123",
  "content": "Just finished reading The Great Gatsby! It was amazing!",
  "timestamp": "2024-10-07T14:30:00Z",
  "likes": 150,
  "comments": [
    {
      "user_id": "user_456",
      "comment": "I loved that book too!",
      "timestamp": "2024-10-07T15:00:00Z"
    },
    {
      "user_id": "user_789",
      "comment": "One of my favorites!",
      "timestamp": "2024-10-07T15:05:00Z"
    }
  ],
  "tags": ["reading", "books", "Gatsby"],
  "location": {
    "latitude": 37.7749,
    "longitude": -122.4194
  },
  "attachments": [
    {
      "type": "image",
      "url": "https://example.com/image.jpg"
    },
    {
      "type": "link",
      "url": "https://example.com/great-gatsby-review"
    }
  ]
}

社交貼文單一貼文，就有可能長出一長串的延伸屬性(留言、案讚、使用者資料)且不規則(留言可能是文字可能式圖片)

4.API測試工具(Postman)

Postman 簡介

如果我們每開發一隻後端的API就要寫一個前端頁面去請求太浪費時間了。
所以我們就使用postman來做測試的工具。
只要透過url、資料、驗證都正確即可以檢驗後端API是否正確。

Postman 是一個流行的 API 開發和測試工具，廣泛用於簡化 API 的創建、測試和共享過程。以下是 Postman 的一些主要特點和功能：

主要特點

1. 多樣的請求方法：

   • Postman 支持多種 HTTP 請求方法，如 GET、POST、PUT、DELETE 等，方便開發者進行不同類型的 API 測試。

2. 用戶友好的界面：

   • 提供直觀的圖形用戶界面，使得即使是初學者也能輕鬆創建和發送請求，查看響應，並進行調試。

3. 集合管理：

   • 用戶可以將相關的請求組織到集合中，便於管理和重用，並支持批量執行請求。

4. 環境變數：

   • 支持設置環境變數，使得在不同的測試環境中（如開發、測試和生產）使用相同的請求變得更加靈活。

5. 自動化測試：

   • 提供腳本功能，允許用戶在請求之前或之後執行自定義代碼，以進行自動化測試和驗證 API 響應。

6. 團隊協作：

   • Postman 允許團隊成員共享請求和集合，支持實時協作，提高開發效率。

應用場景

• API 測試：開發者可以使用 Postman 測試 API 的功能和性能，確保其按預期工作。
• API 文檔：Postman 可以生成 API 文檔，幫助其他開發者理解如何使用這些 API。
• 模擬 API：開發者可以使用 Postman 模擬未實現的 API，便於前端開發和測試。

總結

Postman 是一個強大的工具，適合各種規模的開發團隊，用於簡化 API 開發過程，提高測試效率。無論是創建、測試還是文檔編寫，Postman 都提供了豐富的功能來支持這些需求。

總結

今天概覽了一位身為網頁工程師團隊
所需要評估的分析跟記能掌握

雖然並不完全
但是這些我覺得都是一個好的切入點
讓大家不要盲目去練切版練到爆炸也沒有目標跟實戰的感覺

希望大家吸收完後，明天就會開始正式做程式碼開發了!!