【程式學習】哈佛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!!!

【程式設計】新手必學的版本控制：Git & GitHub的介紹與基本操作

在CS50x課程沒有談到Git的使用，不過我在過去曾經學過網頁設計（雖然學得不好），所以我知道Git是必學項目之一。有志於往網站開發學習的文組，也最好一起來學習哦！

各位或許還不是軟體工程師，我也不是，不過也許你已經有共同協作的概念。例如我在大學裡工作，辦公室的同仁大量利用Google服務，包含Google雲端硬碟、Google協作平台、Google表單、Google試算表、Google文件、Google日曆等等，能夠線上即時傳遞資訊，共同修改文件，打造在家也能加班的雲端工作環境。

文組的工作都是如此了，理組工程師當然更能把雲端工作的精神，發揮得淋漓盡致。尤其是程式碼動輒數百行甚至數千行，如果沒辦法共同協作，並且知道哪一個版本是誰修改的，就會是一場惡夢。

因此，要成為優良的軟體工程師，務必要學會版本控制。版本控制具備了備份、共用兩種意涵，備份意味著即便不是在自己的電腦，或者電腦發生當機、中毒等不幸事件，也能夠隨時上雲端取得備份資料。共用檔案則是類似公用的Google試算表一樣，每位具有權限的使用者，都能夠上去修改資料，並且能夠知道哪一個版本是由哪一位使用者修改。

談到版本控制，除了Git以及GitHub，沒有之一。Git是分散式的版本控制系統，GitHub是原始碼代管服務平台，目前已被微軟收購，提供付費帳號及免費帳號，使用者可以在本地端使用Git管理程式版本，再透過GitHub社群與同事或其他軟體開發者交流。Git及GitHub受到軟體工程師的青睞，也被大量運用於非程式相關的協同工作上。

Git需要一些時間來熟悉，網路上有許多免費的教學內容，例如Git & GitHub 教學手冊、連猴子都能懂得Git入門指南（介紹圖形化介面TortoiseGit）、為你自己學Git（大部分免費）。本文僅介紹如何安裝，以及最基本的操作方式，希望給初學者一個大概的輪廓，之後再深入學習。本操作說明主要依據此英文網頁編譯，並且綜合其他相關網頁資料。

步驟0：在Windows上安裝Git工具組

你也可以在Linux及macOS上安裝Git工具組，請參考此頁面。我是Windows使用者，因此這裡只介紹如何在Windows上安裝Git工具組。請直接點選此頁面下載安裝程式，是一個.exe的檔案，安裝時無腦地直接按下一步就可以。安裝好之後，可以到GitHub官方網站註冊（當然，你也可以先註冊再安裝）。

你可以透過命令列工具使用Git，例如剛剛裝好的Git BASH，當然也可以使用圖形化介面軟體（GUI），例如TortoiseGit。不過一般都還是建議先學習使用命令列，畢竟不是什麼伺服器都能夠安裝圖形化介面軟體。

這就是Git Bash命令列

 步驟1：建立一個本地的Git檔案庫

1. 在你指定的磁碟區，建立一個資料夾。例如叫做 project1
2. Windows視窗左下角搜尋列輸入 git bash，按下 Enter
3. 用 cd 指令進入你要儲存Git檔案庫的磁碟區的資料夾，如果你放在D槽，你就輸入 cd d:/project1，再輸入 git init，本地的Git檔案庫就啟動完成了。

步驟2：針對網頁做版本控制

1. 首先在 project1裡面建立一個html資料夾，再寫一個.html檔案來模擬看看。
2. 此時如果輸入 git status，會顯示 nothing added to commit but untracked files present (use "git add" to track) ，代表你還沒有把想追蹤的檔案標記起來。

步驟3：將檔案放入暫存區裡（staging environment）

1. 輸入 git add接檔案名稱，這裡我接 index.html
2. 再輸入 git status，確認是否成功 。
3. 如果是要把資料夾內的所有檔案一次新增，就輸入 git add --all
4. 沒有把檔案放入暫存區，就不能被提交到檔案庫。
5. 如果把檔案加入暫存區後，又修改了檔案，則需要再加入一次。

步驟4：將變更的檔案提交到檔案庫

1. 在要上傳的資料夾內，輸入 git commit，後面可以接常用的參數，

2. 提交時，如果沒加上參數，會跳出-Vim編輯器。使用方法如下：

• 分為Normal、Insert兩種模式。-Vim編輯器打開後即為Normal模式，僅能複製、貼上、存檔、離開；Insert模式可以輸入文字。
• 可輸入 i、 a、 o 任一個英文字母，進入Insert模式，再按下 ESC或 Ctrl+[可離開。
• 輸入訊息後，先按下 ESC回到Normal模式，輸入 :wq存檔離開。
• 輸入的訊息、檔名，最好都是用英文命名。如果用中文，可能會有亂碼，網路上有修正亂碼的教學，但是我試了兩種方法都無法解決，你各位還是認命學好英文吧。

3. 如果變更只有修改檔案，沒有新增與刪除，可以使用 -a，直接提交變更。

4. 把變更合併到上次提交之中，使用 —amend

5. 接上簽名， -s

6. -m，用於檔案已經在暫存區的提交，使用時，後面可再接上註記。例如 git commit -m "First commit"

步驟5：新增分支

有時候正在開發新功能，開發到一半，你不想直接覆蓋掉過去的檔案，就可以開創新的分支，如此一來就不會蓋掉原有檔案。等到你新增的功能確定完成了，可以再把檔案合併在一起。

新增且切換分支，請輸入 git checkout -b <branch name>，接著可以輸入 git branch看看目前的分支情況。

有星號的部分就是目前我所在的分支。

步驟6：在GitHub上建立檔案庫

如果只是要在自己的電腦運行Git版本控制軟體，不需要這個步驟。不過大型軟體開發都是團隊合作居多，在GitHub上建立一個檔案庫是個好主意，就可以共同協作。

1. 首先在GitHub上，按下+建立新的檔案庫，然後替自己的檔案庫取名，第一次取名可以取名為 你的帳號.github.io，這樣傳上去時，如果裡面有index.html檔案，就可以變成靜態網頁。
2. 接著GitHub會轉到新頁面，問你是要在本地端開一個同樣的檔案庫，還是要把既有的檔案庫同步上去。因為我們之前已經建立了本地端的檔案庫，因此我們選擇 …or push an existing repository from the command line

git remote add origin https://github.com/taiwankaiyuan/project1.git git branch -M main git push -u origin main

依序輸入上頭的指令（注意，不要複製我的連結，是複製你自己的連結），會跳出視窗，要求使用者輸入帳號密碼。輸入後，則會跳出成功同步。

噠拉，這就是個人網頁啦。如果你按照上面的步驟操作，你的個人網頁網址就是：

你的帳號.github.io

我把CS50x第8週的作業也放上來囉，可以點此查看，你點進去看後，如果把.io後面的內容都刪除，還可以看到我數年前學習前端工程失敗的作品，哈。

Happy coding!!!