【程式學習】哈佛CS50x學習筆記_第8週最後作業

第8週作業不意外地也是難度很高

前言

最近在學習程式語言時有一個心得，那就是對比繁體中文的臉書社團（以臺灣人為主），以及英文社群（以Stackoverflow為例），英文社團的討論風氣似乎比較好？我使用疑問句是因為我本身並沒有沉浸在英文環境裡，所以不敢保證。但是根據使用經驗，中文的程式語言社群，有時會有學長姊趾高氣昂的情況，就是一種以貶低新手來增進自身優越感的氛圍。通常新手發問時都必須要謙卑的方式發問，如果有什麼問題讓學長姊不滿，就會出現各種嘲諷。閱讀Stackoverflow的文章，就很少看到這種情況。原因不明。所以告誡大家英文一定要學好，很重要，閱讀技術文件、詢問程式解法、甚至求職等，都會需要。

第8週作業

在整個cs50x學習旅程裡，我看過兩次YouTube上的解答，這是其中一次，因為對我來說難度頗高，知識量過大，無法全部吸收。在最後一份作業裡（期末作業不算的話），需要我們製作一個能夠註冊、登錄、購買股票、售出股票、呈現歷次購買資料的互動式網站。這份作業需要學生具有HTTP網路協定知識，包括了Session及Cookie的概念。

這些概念不太好明白，可見：

• 白話 Session 與 Cookie：從經營雜貨店開始（原理介紹，非常容易閱讀）
• [Flask教學] Flask Session 使用方法和介紹
• Flask框架從入門到精通之Session（九）
• Web 技術中的 Session 是什麼？

這裡大概簡述一下Session與Cookie的用途，以購物網站為例，如果我們登入購物網站後，只要重新整理，就必須再登入一次，一定會覺得很煩。最好是讓使用者登入後，不會重複要求登入。甚至可以讓使用者自訂，設定為定期只需要登入一次即可。使用者如果在網站上購買商品，網站也會記得你買了什麼，也會有你曾經購買過的歷史記錄。

為什麼網站無法記得你，是因為伺服器與客戶端的瀏覽器不會一直保持連線狀態。如果沒有留下記錄，下一秒再訪問時，網站只會覺得「你誰啊」。因此電腦技術天才引進了Session與Cookie的概念，Session的意思是工作階段，網站會把使用者登入狀態，或者購買商品的狀態記住，例如使用者的ID為KAI，買了Apple共5個，要送到指定的7-11。這些項目統稱為Session。Cookie是網站為了辨識使用者，儲存在使用者瀏覽器上的小型文字檔案，瀏覽器關閉就會消失。當然也能把儲存在使用者硬碟裡，所以每次訪問網站，它都會記得你。

所以我們只要把使用者Session裡的資料，放在伺服器內，然後發給使用者一個Cookie，也就是號碼牌的概念。使用者再次訪問網站時，就能夠從伺服器裡抓取原先的資料。另外還有一個方法叫Cookie-based Session，把Session所有資料都放在Cookie裡，再把Cookie給使用者。使用者買完商品後，離開網站，Cookie上的資料就直接丟棄，這樣伺服器就不用浪費空間儲存Session資料。

那你可能會想，這樣子我們使用 Cookie-based Session技術就好啦，可是Cookie的資料大小只有4k，所以也不一定都能夠這麼做。有些網站甚至會兩者並行。

我們在這次的學習是採用Python的套件Flask，它本身有內建session，另外也有擴充套件flask_session，從作業提供的程式碼看起來，兩者都有使用，目前我能力還不足，不知道為什麼他們要這樣寫。如果用內建的session，就是把Session儲存在Cookie，放在使用者端的瀏覽器裡。或者用flask_session，把整個工作階段資料存到資料庫內，cookie只是存session id而已。

在最底下是本週作業一部分，學生必須要在資料庫內新增一個購買股票歷史記錄的表格，在application.py完成指定的功能，以及在tamplates資料夾新增功能對應的網頁。我試著理解這些相關知識，並且用中文寫下註解。看起來不難，那是因為我咀嚼過知識了。如果在知識為0的情況下接觸，非常非常燒腦。

未來學習計畫

cs50x的期末作業並沒有限定格式，想做什麼都可以，主要是三大步驟。

步驟1：上傳 README.md ，裡面解釋期末作業內容。

步驟2：自拍一部影2分鐘內的影片，簡介作業，包括作業名稱、學生姓名、居住城市、國家等。必須包含操作畫面。將這影片上傳到YouTube。

步驟3：填寫Google表單

我自訂的期末作業很簡單，我會重新把第8週作業寫一次，也許做成簡易的商城。如果你的目標也是學習網站開發的話。向您分享我之後的學習計畫。初步目標是搞懂前端語言JavaScript，也要學習flask框架、網站建置原理、網站功能測試，以及如何部屬網站等等。進階目標是學習Django框架。

我的學習資源分為線上課程及書籍，底下這些學習資源，我會先選Codecademy關於Flask及部屬網站的部分來學，以完成期末作業為優先考量，趕在年底以前把作業交出去，也算是對自己一個交代。明年的主要學習架構是CS50的進階課程。

線上課程：

• Hahow的線上課程JavaScript 程式設計新手村
• Codecademy，主要是學習Developer Tools的Command Line、Git，以及Web Development的Build Python Web Apps with Flask、How to Deploy a Website、Front-End Engineer、Learn Testing for Web Development。
• CS50's Web Programming with Python and JavaScript

書籍：

• Minguel Grinberg著，賴屹民譯，《Flask網頁開發》
• Berenda Jin, Saurabh Sahni, Amir Shevat著，賴屹民譯，《Web API建構與設計》
• Mike Amundsem著，賴宥羽譯，《RESTful Web Clinets技術手冊》
• 劉超，《乾脆一次搞清楚：最完整詳細網路協定全書》
• 陳惠貞，《HTML5、CSS3、JavaScript、jQuery、jQuery UI、Ajax、RWD網頁程式設計 》

底下向各位介紹本次作業程式碼，html部分就請各位自己寫了。

cs50x_week8-9.py

Happy Coding!!!

【程式學習】 Flask網路教學課程介紹及基礎知識_給CS50x的補充資料(1)

不懂為什麼Flask的圖示是辣椒

 在cs50x第8週課程需要學生挑選專業領域，我選了網站開發，這部分課程在後端部分，介紹了以Python寫成的Flask框架。然而看完課程提供的約1小時Flask教學影片，我還是覺得作業很難。而且教學都是英文說明，英文程度再好，若不到母語等級，還是覺得有點隔閡。因此我決定再來找一些補充教材。

順道提一下，自學程式最大的困難點是，網路上看似免費的教學太多太多了，可是大部分都是片面的介紹，你臨時要查相關知識很方便，但是如果是要系統性的學習，就很不建議。因此新手自學經常會浪費很多時間查找資料，可能挑了一樣開始學習，過沒多久又發現不合適，來來回回地就損失寶貴的學習時間，也會磨損學習慾望。因此如果有找到不錯的系統性的介紹課程，即便是要付錢，也不用猶豫了。

Flask的相關中文教學影片較少，目前在YouTube上找到的有（下列數字可能會變動）：

• 【千锋Python】最经典的Flask框架入门教程（免費）： 聽起來是大陸人的教學，看起來比較完整，不過聽他的教學方式，我實在看不下去。而且這些影片應該是實際上課時的側錄影片，應該是要找專門為了網路課程而製作的影片比較好。
• Yufan Zheng的【Flask Web 教程】（免費）： 聽起來應該也是大陸人的教學，只有23部影片，對比上面的影片，比較聽得下去。
• 彭彭的Python Flask 網站開發（付費）： 台灣老師，當然最推薦囉，所有用字遣詞比較不會有隔閡。缺點是語速很慢，我得開1.5甚至1.75倍速。目前影片僅3部，其餘還在製作中，而且要看得加入會員，每月100元。所以建議要看的人，可以等他至少做了10幾部之後，再訂閱，一口氣看完。

書籍的部分，我是買歐萊禮出版社，作者為Miguel Grinberg的《Flask 網頁開發第二版》，一般來說這種英文母語人士寫的書籍，有能力的話還是買一本原版來對照閱讀比較好。但是在博客來中文版只賣522元，原版在Amazon大約要800多元，大家自己斟酌囉。

由於Flask的免費中文教學影片少，如果真的不想花錢，不然也可以看Python Flask Tutorial: Full-Featured Web App，雖然是英文版，但是講得挺清楚的。全部的影片看一遍，應該就有辦法來寫作業了。

Flask基本介紹

要用Flask在你的電腦部署網站，非常簡單，首先在你的電腦設定一個指定放網站的資料夾，例如叫 project，然後在裡頭寫一個python檔案，通常會命名為 application.py，這裡的檔案名稱不會特別要求。application.py裡的程式碼可以看下列。

cs50x_week8-1.py

接著在終端機上輸入 python application.py，就是第一個網站了。

實際上我們當然不會在 return後面直接輸入字串，通常會接指定的html檔。例如 index.html。但是我們無法直接return，必須要有一個程式能夠在瀏覽器上呈現網頁。我們需要 render_template函式。

要使用 render_template函式，必須先在 project資料夾內放入 templates資料夾，這個資料夾名稱是固定的，不能修改，templates資料夾裡面可以放你想要的網頁，如 index.html。接著在application.py裡 import render_template函式，程式碼如下：

cs50x_week8-2.py

Jinja2樣版引擎

Flask預設使用Jinja2樣版引擎，要另外解釋Jinja2太麻煩了，只要記得是一種特殊的語法就好了。我們可以在上面的程式裡，修改成：

cs50x_week8-3.py

接著在剛剛的index.html裡面，放入語法如下：

cs50x_week8-4.html

在終端機上輸入 python applicaion.py，看看有什麼變化！

模版繼承

程式設計中，必須注意盡可能不要寫重複的語法。因此如果有一個html樣式，可以套用在不同的頁面上（追求風格一致），最好是寫成模版。而不是複製貼上。

使用Flask加入模版，可在 templates資料夾內，寫一個 layout.html（名字隨意），假設要加入bootstrap，可寫成下列語法：

cs50x_week8-5.html

接著在你本來的 index.html，改成這樣：

cs50x_week8-6.html

下一次會來學如何使用Flask結合SQL資料庫，讓使用者能夠註冊、登入、登出。

Happy Coding!!!

【程式學習】哈佛CS50x學習筆記_Week8-1：HTML、CSS、JavaScript

響應式網頁設計的確是不簡單的問題

 

*本文是CS50x的中文學習筆記，是原課程的筆記補充，建議先上完課，看完原課程筆記，再閱讀本文。

哈囉，文組們，我們終於到最後一週啦。這一週主要是分流，你可以選擇網站開發、手機應用程式，或是遊戲。我本身對於網站開發比較有興趣，因為網站的應用面很廣，不管是用Windows系統、macOS系統、Linux系統、Android系統、iOS系統，都會使用到網站。本週課程內容不多，教授David回顧了之前的學習，然後談了資訊安全的重要性，但是講得不深，跳過也沒差，主軸還是放在分流後的教學影片。如果你也是選擇網站開發的話，就跟著我一起動手做吧。

網站開發工程師分為前端及後端兩大領域，在較有規模的大公司，前端領域的工作可能又分UI/UX設計師，以及專精於JavaScript的前端工程師。UI設計師負責使用者介面，主要是視覺上的工作；UX設計師負責使用者經驗之設計，安排網站上的內容規劃；至於前端工程師則是負責網站上所有動態及互動效果。

UI/UX設計師專精的領域除了Illustrator、Photoshop等繪圖軟體，HTML、CSS也是必學的項目。然而，如果你的目標是擔任前端工程師，除了要學JavaScript以及前端框架，HTML、CSS也是必學的哦（畢竟公司不一定會聘專任的UI/UX設計師）。

假設目標是後端工程師，自然就是要學習後端常用的程式語言、網站應用框架、及資料庫，不過我們已經在第6週、第7週分別學了Python、SQL，接著就只剩下網站應用框架。所以要學的項目也不至於太多。

因此，在網站開發課程裡，總共有底下項目需要學習：

1. HTML、CSS、Bootsrap、JavaScript（HTML DOM）、第一份作業
2. Flask、資料庫、第二份作業

在第8週的學習筆記，我將會依照上述分成2篇文章。在第一份作業裡，你必須需要學會最基本的HTML、CSS、JavaScript。如果你跟著課程上到現在，已經學會了C語言，那麼你就已經會JavaScript的核心概念了，只差一些特別用法以及常用函數要記住。

至於HTML、CSS的學習重點是什麼，我認為可以把響應式網頁設計（Responsive web design）的設計理念及基礎原理搞清楚。因為網頁設計者必須考慮到使用者可能用各種平台，如電腦、平版、手機來瀏覽你的網頁，他們甚至使用的瀏覽器也不同。網頁設計者得設法讓網頁能夠在不同平台、瀏覽器上都能夠正常顯示，初學者先搞懂怎麼使用Bootstrap就好了。至於要如何寫出更符合HTML5風格的網頁，或者要怎麼使用CSS讓網頁更加美觀，反而是相對枝微末節的事，有興趣的話可以再繼續專研。

另外你可能注意到，我並沒有談到HTTP、TCP/IP、DNS等，而這些在助教的影片裡都有提及。我個人是認為以作業為主軸，把核心概念先學起來。基礎知識部分可以回頭慢慢補齊。

前置工作

1. 下載Visual Studio Code程式碼編輯器

如果你在第6週學習Python時，下載了Anaconda，裡頭就包含了VS Code。這是微軟開發的編輯器，個人是覺得用起來挺順手的，重點是免費。

2. 下載不同的瀏覽器

目前最常用的瀏覽器有 Firefox、Chrome、Opera、Safari、Internet Explorer 與 Micrososft Edge。為什麼要有不同的瀏覽器呢，因為你的網頁在不同的瀏覽器上，可能會長得不一樣。些許差別沒關係，就怕跑版。

當然啦，如果只是要先把作業交出去，可以先下載 Chrome就好了。Chrome上有一個外掛叫Responsive Web Design Tester，建議裝上去，這個外掛可以另開新網頁模擬不同平台的網頁畫面。例如你原本在桌上型電腦上看得好好的，可能用手機閱覽，版面就不太對了。

3. 版本控制系統

這次作業用不到，但是強烈建議要學起來。版本控制系統，類似Google雲端硬碟，可以讓團隊共同編輯程式碼， Git 是最常見的版本控制工具，GitHub則是最常用的程式碼分享服務。

MDN及W3SCHOOL

助教的教學影片當然有教HTML、CSS、Bootstrap、JavaScript的基本概念。不過你是無法只看教學影片就有辦法完成作業的，一定要看補充教材，個人建議是看MDN及W3SCHOOL。建議先看MDN，比較有系統一點，說明得也很詳細；W3SCHOOL則是很適合查語法。

網頁呈現的基本概念

網頁呈現的流程：

1. 在瀏覽器上輸入網址，接收HTML、CSS、JavaScript訊息
2. 瀏覽器將HTML轉成文件物件模型（DOM, Document Object Model），文件物件模型有著一個樹狀結構，每個標記語言中的元素、屬性，以及文字片段都會是這個樹狀結構裡的節點。

HTML

HTML （HyperText Markup Language），是一種標記語言（markup language），用來告訴瀏覽器資訊如何呈現，目前最新版本是2017年發佈的HTML 5.2。建議大家使用Visual Studio Code，然後在Extensions下載HTML CSS Support套件，在使用上會更加便利。HTML學習時間非常短，認真學習的話，最多不會超過6小時就可以掌握。

CSS及Bootstrap

CSS（Cascading Style Sheets），是用來讓HTML變得更漂亮的樣式表語言，學習CSS可以看W3SCHOOL，CSS非常簡單，尤其如果你使用VS Code編輯，都能夠自動帶入，也不怕打錯字。Bootstrap是前端框架，目的是做響應式網頁設計（核心精神看這裡）。CSS及Bootstrap的學習時間要比較長一點，因為資料量比較龐大，但是一般來說有3個工作天的話，應該就能掌握核心觀念，我建議Bootstrap參考W3SCHOOL教學。

JavaScript

在第八週第1份作業裡，對於JavaScript要求的學習量很少很少，初學者可以先把重點放在HTML DOM部分。你可以先看W3SCHOOL的簡介，還有這裡對於HTML DOM的介紹。

在網頁上使用JavaScript，相關程式碼可能會長得像是下面這樣，只要先記得document這個字就好了：

document.addEventListener("DOMContentLoaded", function() { // to do });

最後，雖然我建議你學VS Code，但是如果你一時覺得不太習慣，也沒關係，你可以先使用CodePen，在CodePen可以讓實驗HTML、CSS、JavaScript的功能，作用就像是cs50沙盒。這裡是我按照MDN的教程內容，練習的JavaScript小遊戲，放在CodePen上，各位可以參考看看。

作業

第1份作業的重點是：

1. 必須至少要有4頁不同的html，其中一頁是index.html
2. 每頁要互相連結在一起
3. 使用至少10個HTML tags，除了<html>、<head>、<body>、<title>以外
4. 某一些tag (例如 <p>)要多使用幾次。
5. 使用Bootstrap前端框架
6. 至少要有一個CSS檔叫styles.css，裡頭至少有5個選擇器，至少5個不同的CSS樣式
7. 使用至少1個以上的JavaScript語法
8. 必須具有響應式網頁設計（Responsive Web Design）

我除了繳交作業以外，也把作業放在Github上，卡關的同學可以上去看看。

Happy Coding!!!