KK 的 Web 實驗室(Day1,2)

Chunhao Weng
8 min readSep 18, 2020

--

過去喜歡讀各種成功前故事,現在有幸能看著故事悄悄展開。

TENET。

這純粹是自己不知道為什麼想做的事情,紀錄一下 KK 的生命旅程。

Web 實驗室資源:

Youtube

Facebook

以下為 KK 課程內容的文字紀錄,我本人不是KK。(重要)

影片開始。

01 成為看起來很強的後端:系列規劃與介紹

這是KK老師,他是一位魔術師。

一開始是自我介紹。

「大家好,我是kk。今天很高興能夠分享這個系列給各位觀眾。」

KK老師先分享他過去經歷過的角色。

從實習生、後端、前端、AWS、GCP、系統架構師、專案、PM…等。

他分享在Web做了一段時間,喜歡做知識分享或給一些 talk 。

後來創了Web 實驗室社群。

對這個系列有問題可以去臉書找這個社群和他討論喔。

這系列在做什麼?

這個系列叫做「成為看起來很強的後端」。

KK 老師發現他的朋友遇到一些問題。

如:後端不知道怎麼描述工作內容、前端想知道後端到底是哪個部分困難。

大家對於後端知識很碎片化,沒有一個架構可以了解整個後端。

有些 PM 朋友被分派要做一個網站,思索著應該從哪一個地方著手,怎麼分析一個網站或功能。

這個系列就是教你如何把後端切成框架以利於了解。

系列適合什麼樣的人?

沒有想要寫程式,只是想要了解後端怎麼運作,或是整個網站怎麼運作。

如果你希望做出一個 project ,KK 老師建議可以左轉或上一頁去看別人的。

如果想要了解架構或是跟別人可以討論後端,這個系列就適合你。

整個系列的架構圖

整個系列架構

如上圖:分為外圈跟內圈。

內圈是核心,分五個面向。

交付、權限、運算、資料、儲存。

KK老師說明,為什麼切五個面向。

因為參考了 Google的 Firebase,AWS 的 Amplify,和現在已經收掉 Facebook 的 Parse。

這些服務幫忙把網站常用的功能模組化。

大部分的網站都可以用這五個面向做分析,了解怎麼規劃跟實作。

但 KK 老師一直賣關子,說後面幾天會對每一個面向做解說。

所以內圈五個面向到底是什麼?

交付:API 交付模式、Web 交付模式、桌面應用

權限:第三方登入、帳號密碼登入、一次性密碼登入

運算:排程的運算、分散式的運算、搶票避免系統掛掉的高峰搶票系統

資料儲存:關聯式、非關聯式

儲存:雲端空間、本地空間

外圈呢?

效能優化:(沒有特別舉例,大概就是字面意義。)

資訊安全:避免網站被攻擊

軟體工程:快速更有效的開發

反正這個框架就是幫助大家成為「看起來很強」的後端工程師。

02 成為看起來很強的後端:常見網站應用

網站百百種

KK 老師開頭又再次自我介紹。

今天要來介紹如何用五個面向解釋各種網站應用。

形象網站

第一個可以想像的是「形象」類網站,如:Spotify、Apple的官方網站。

特色:視覺效果比較強烈、訴說為主,互動比較少,如果有購買行為通常會用另外一個網站去處理。

電商網站

第二個就是「電商」網站,如:PChome或蝦皮。

特色:明確的會員系統、可以有購買行為(建立自己的商品、開自己的商店、串金流、串物流)。

部落格網站

第三個就是「部落格」網站,如:Medium、Blogger、Wordpress。

如果不是想要賣東西、只是想要產內容的網站。

常常被稱為 CMS (Content Management System)。

特色:重視的是「管理」這件事情。如何把內容管理、搜尋、分類。

社群網站

再來就是「社群」網站,如: FB、IG、Youtube。

特色:重視的是關聯性,member跟 member的關係、或是一個 post 跟一個 post 之間的關係。(不是很確定,猜意思應該是說 post)

常常會混用,社群網站同時經營電商或是部落格也可以買賣東西。

社群網站也常常會整合,例如臉書的小遊戲。

遊戲網站

第五個就是「遊戲類」網站,如: Agar.io

特色:比較低的延遲性。網頁上進行的遊戲,或以前臉書的開心農場這類。

課程網站

第六個就是「課程」的網站,如:Hahow、Yotta、學米。

特色:學習體驗做比較好,快速看線上課程,或是線上課程做其他結合。

其他

募資網站、活動網站,各式各樣的網站。

我們再來看一次各種網頁應用

03 成為看起來很強的後端:五大面向拆解網站應用

開始要聊聊交付的常見方式

交付是什麼?

一個網站是如何被交付到使用者手上。

常見方式有 API、Web、Desktop、App。

API:Application Programming Interface。應用程式介面,通常是工程師用程式的方式跟第三方服務對接才會用到。

Web:網頁的形式,瀏覽器裡面這個啦。

Desktop:常見的方式為遊戲,可能下載一個 exe 或 dmg 檔。

KK老師說,如果你是一個 PM 要想的是:

要開API還是要做網頁?

還是要做桌面應用程式?

還是需要做App?(iOS 或是 Android?)

後面會對交付方式做更全面介紹。

2 就是 to 就是兔(剛好這位養過兔子,魔術師,合情合理)

權限是什麼?

Client 2 Server

瀏覽器跟 App 做,使用者看得到

客戶端對伺服器端的權限驗證。如:會員登入(透過瀏覽器登入別人的會員系統)、第三方登入、手機App登入。

Server 2 Server

系統自己做,使用者看不到

後端幫你做伺服器驗證跟對接。

KK老師說後面影片會做更多解說。

想念倫敦的 Pub

運算是什麼?

1- Queue

線上購買東西,電商會寄信給你,如果每次購買都在當下立刻寄email,一千人同時購買,後端就會爆掉。

所以需要排隊。

運算會有個模型叫做 Queue,排到你才會寄出去。

2- Pub/Sub (Publish–subscribe pattern)

看部落格,如果發佈新文章,所有人都會收到通知這種模式。

訂閱跟發布模型,只要一個人發布,其他人都會收到。

3- Web Socket

遊戲需要低延遲性,所以需要一個快速通道。讓 Server 跟 Client 可以及時的交換資料。

4- 其他

變出一支筆

資料跟儲存是什麼?

資料是紀錄 (Record)、儲存是檔案 (File)。

兩者最大的差異是,紀錄可以做更新、檔案要整個換掉。

KK老師舉例來說,假設資料庫有會員資料(姓名、電話、email…等)。

資料去存,可以只改電話內容,不會動到其他欄位。

儲存去存,要換其中內容,整個一包都要換掉。

資料通常都是「動態」資料。

儲存通常都是「靜待」資料。如:圖片、影片、聲音、pdf、doc等等。

會員有好多資料,大頭貼被存在 avatars/1 指向 avatars 資料夾底下的 1

KK 老師問各位同學,如果今天你要上傳一個會員的大頭貼,資料會存在哪裡呢?

沒錯,就是在「儲存」。

儲存之後會有個路徑(這邊的例子是照片存在 Google Drive 上)

有關係沒關係

最後 KK老師談了一下 RDBMS (Relational Database Management System)。

關聯跟非關聯資料庫差異會在後面做介紹。

如:電商網站的會員要連到訂單再連到別的,就會用 RDBMS。

下課啦

KK 老師說,未來系列影片會破解背後的技術,討論如何實作。

大家有興趣請直接去 Web 實驗室的 Youtube 跟 Facebook 社團吧。

Web 實驗室資源:

Youtube

Facebook

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Chunhao Weng
Chunhao Weng

Written by Chunhao Weng

Random notes for personal use.

No responses yet

Write a response