簡化版的流程說明

情境：

為了報名一個活動，我現在要送出一個 google 的表單，從我按下「送出」，到「看到結果」，這之間發生了什麼事呢？

1. 我「提交表單」，也就是「送出一個 request」到「Google 的 server」

• 「雲端」就是一個「看不到的 server」

2. 「Google 的 server」就會把我送出的表單資料，存到 database 裡面

3. 成功存到 database 裡面之後，「Google 的 server」就會回傳一個 response 到我的瀏覽器，這個 response 就是我最後看到的「填表成功」的頁面

稍微細節的流程說明

1. 是我指揮「Firefox 瀏覽器」送出 request 到「Google 的 server」

2. 「Google 的 server」就會把這個送出的表單資料，存到 database 裡面

3. 成功存到 database 裡面之後，「Google 的 server」就會回傳一個 response 到我的瀏覽器，這個 response 就是我最後看到的「填表成功」的頁面

• Server 回傳的 response 就是一個 html 格式的檔案，瀏覽器接到 response 後就會把這個 html 檔案解析之後再顯示出來
• 剛剛的那個表單（同樣也是一個 html 格式的檔案），用「檢視原始碼」來看就是這樣的一堆我們看不懂的東西，但是透過「瀏覽器」解析之後，就會是美美的表單畫面

更細節的流程說明

其實，送出 request 的並不是瀏覽器

首先要先了解，電腦可以分成幾個層次：

1. 最底層：硬體（Hardware），像是：網路卡、CPU
2. 在硬體之上，會有「作業系統（Operating System 簡稱 OS）」，像是：windows、mac
3. 在 Operating System 之上，才會有「瀏覽器」，像是：Chrome、Firefox

所以，送出 request 的流程其實是：

1. 我在表單按下送出，叫「瀏覽器」送出 request

2. 「瀏覽器」叫「作業系統」送出 request

3. 「作業系統」叫「網路卡」送出 request，最終就是由「硬體裡面的網路卡」送出 request 到「Google 的 server」

就像是，
我跟朋友說「我有寄明信片給你」
但其實嚴格說起來「不是我寄的」，而是我把明信片投到郵筒後--> 郵差把明信片拿起來，轉交給另一個郵差--> 另一個郵差再把明信片送到我朋友的信箱--> 朋友把明信片拿出來
真正做「寄信」這個動作的是「郵差」，電腦裡面的「硬體」就是扮演這個「郵差」的角色

送出 request 後：

4. 送出 request 後，會先經過我家的網路--> 再經過社區的網路--> 再經過台灣的網路--> 再經過美國的網路，這個 request 才會抵達「Google 的 server」

5. 「Google 的 server」就會把這個表單資料，存到 database 裡面

6. 成功存到 database 裡面之後，「Google 的 server」回傳的 response 也是先傳到網路卡

7. 網路卡把 response 解析完之後，傳給作業系統

8. 作業系統把 response 解析完之後，傳給瀏覽器

9. 最後，瀏覽器才可以把畫面呈現出來

前後端的區別

綠線左側是「我看得到的頁面」--> 就是屬於「Front End」
綠線右側是「我看不到的，server 在處理的部分」--> 就是屬於「Back End」

前端

因此，現在要再把前端的「瀏覽器」拉出來看，瀏覽器可以分成這三個部分：

• 網頁的內容就是 html
• 負責裝飾的就是 css（排版、背景顏色、字體大小...）
  • 在 Firefox 選單點擊「檢視/頁面樣式/無樣式」就可以把 css 關掉，網頁就會用「純文字」顯示出來
    
• 負責網頁功能（頁面互動、資料溝通）的是 JavaScript
  • 在網頁上寫的程式，一定都是 JavaScript

後端

以「Google 表單」的範例來說，我們要把 request 發送到 docs.google.com 這個網址去，但是，網路只認「IP 位置」
（docs.google.com 是“域名”）

因此，在發送 request 之前，

1. 瀏覽器（網路卡）要先去問「DNS server」，問說「docs.google.com 的 IP 位置是什麼？」
2. DNS server 就會回答說：「docs.google.com 的 IP 位置是 216.58.200.46」
3. 網路卡就會把 request 發送到 216.58.200.46 這個 IP 位置的 server 去

用 Command Line 查詢 IP 位置

輸入指令 nslookup docs.google.com，就可以查詢到 docs.google.com 的 IP 位置是「216.58.200.46」（紅色箭頭處）

綠色箭頭處的是「我的 DNS server」的位置

後端的程式語言

負責處理從「Google server」之後的事情，就是後端負責的：
可以使用不同的程式語言，有 PHP, Ruby 等等

後端的系統架構

如果 Database 只有一台的話，這台掛掉，整個服務就掛掉了，

因此，會把資料都複寫到另一台 Database，一台掛了，就可以連到另一台，服務就不會中斷掉。

Request 和 Response 的概念

可以把「Request 和 Response」當作是一個封包（一種“信件”的格式），叫做 HTTP

在 Console 查看 Request 和 Response

在 Chrome 按右鍵「檢查」打開 Console，進入「Network」頁籤，重新整理後，就可以看到瀏覽器發出的所有 request

• Request URL：對這個網域發送 request
  
• 在 Response 可以看到回傳的回應（原始格式：html）
  
• 在 Preview 可以看到「瀏覽器解析過後的畫面」（有搭配 css）
  

手機的前後端架構也是一樣的

前面講到的「前後端架構」，在桌機、手機上都是一樣的，只是差在：網頁的部分（下圖中的黑色框框），替換成手機

1. 從手機的瀏覽器（app）--> 透過手機的作業系統--> 再透過手機的硬體，發送 request 給 server
2. server 從 database 存取到資料後，回傳 response 到手機的硬體--> 手機的作業系統--> 最後，在手機的瀏覽器顯示畫面出來

因此，廣義的 Front end 其實包含「網頁、手機的 app」（前端就是：除了 server、database 的部分）