iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
Modern Web

給心理人的前端網頁開發系列 第 13

[給心理人的前端網頁開發] 13 關卡二:網路問卷 - 程式架構介紹

  • 分享至 

  • xImage
  •  

今天要來介紹網路問卷的程式架構。

其實網頁程式的運作,可以用一間餐廳的運作來比喻。餐廳基本上會有這些規劃:有櫃台與端盤服務生的前場、有做菜員工與廚師的後場,以及存放食材的區域。顧客進餐廳後,會先到前場的櫃台點餐。接著菜單會傳送到後場給廚師,廚師會妥善保管好菜單、以及到冰箱拿食材回廚房。料理完成後端盤手從廚房拿菜回前場,遞上餐點給消費者。

網頁程式也是類似的運作模式。一個網頁程式常有這些規劃:有許多文字、按鈕、表單顯示的網頁前端 (餐廳前場)、接收處理與傳送資料的後端 (餐廳廚房)、以及儲存資料的資料庫 (保管菜單、餐廳冰箱)。

當一個使用者透過網址想進到網站,就會先接觸到網頁前端的部份 (也只會接觸到前端的部份)。假如你只是想逛一下餐廳(網頁前端)、沒有想要吃東西的話以及點菜單放到廚房排隊的話 (資料庫的資料),那就也不會麻煩到廚房的人 (後端)。

  • 網頁前端:主要是網頁畫面的部份,像是文字、圖片、表單、按鈕等等
  • 後端:與前端與資料庫溝通的橋樑,可以接收、處理與傳送資料
  • 資料庫:存放資料的地方,可以想成是 Excel 資料筆,有 Row (橫向的資料列) 跟 Column (直行的欄位)

假如消費者不只是逛逛餐廳而已,而是想吃東西的話,那流程也許就會是這樣

  • 到餐廳看看,準備點餐 (網頁前端文字、圖片、表單、按鈕)
  • 服務生拿菜單往後面跑 (後端接收來自前端資料)
  • 廚師根據菜單拿食材 (後端根據前端的要求,去跟資料庫拿資料)
  • 廚師做菜 (後端重新加工來自資料庫的資料)
  • 廚師做完菜服務生來端菜 (後端丟資料給前端)
  • 服務生上菜,消費者看到剛出爐的餐點 (前端渲染出畫面到螢幕上)

在關卡二中,預計會做這些事情

  • 到餐廳看看,準備點餐 (網頁上有表單可以填寫、有按鈕可以提交)
  • 服務生拿菜單往後面跑 (填完表單後,送資料到後端)
  • 廚師將菜單放到廚房桌上,方便之後查看 (後端將資料存進資料庫中)
  • 廚師有空時到桌上看菜單 (工程師/問卷開發者到資料庫中看問卷的資料)

在關卡二網路問卷的架構中,對應到的工具有:

  • 前端:CodeSandBox
  • 後端:Google App Script
  • 資料庫:Google Spread Sheet

明天就先從餐廳的門面,也就是網頁的畫面開始著手吧。


上一篇
[給心理人的前端網頁開發] 12 關卡二:心理學研究工具與問卷
下一篇
[給心理人的前端網頁開發] 14 關卡二:網路問卷 - 用 Google Sheet 當資料庫
系列文
給心理人的前端網頁開發20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言