學習心得：

CS50 wk9 是學習用Flask框架做網絡應用，作業是做一個簡易的股票買賣網站。

wk8和wk9都是網頁相關的，一開始有些抗拒，感覺沒有前半部分的會涉及電腦底層知識的課程有趣。然後又一口氣教這麼多，壓力很大。

加上Finance是一個很大的作業，會不想下手。所以我改變想法，讓自己每天寫1個小時，專注在時間上，而不是專注在作業本身。因為有時候作業很難很複雜會造成很大的心理壓力讓我們拖延。這是從《學習如何學習》這門課程學到的，專注在Process，而不是Product。

最後直到進入做Finance這個作業的狀態的時候，發現稍微改動一下，馬上就可以很直觀的看到網頁的變化，感覺還是蠻好玩的。最後做完，也是蠻有成就感的。

CS50的每節課都是這麼神奇，一開始覺得不可能，寫完作業就感覺把不可能變成了可能。（哪怕這只是幻覺，也還是超棒的。）

筆記：

參考官方Notes

1.route

上週的HTTP/CSS/JavaScript可以創造出一個頁面，不過只是一個page。這週通過Python的Flask框架可以創造出一個網絡應用（web application），包含很多page，這樣就可以實現很多功能。

怎麼到不同的page就是靠route。比如下面的例子，在applicaiton裡先定義好不同的route執行不同的Function，執行完畢再返回不同的頁面。

@app.route("/")
def index():
    return render_template("index.html")

通過學習route發現兩個有用的技巧：

一是在網址裡打上加上年份比如2021/，就可以輕鬆顯示2021年的所有文章。之前看別人的部落格的時候常常想選某一年的文章來看，這下子可以一步實現了。試了10個網站，成功率50%。比如這兩個（https://hiraku.tw/2022/，https://rich01.com/2020/）也是ok的。

另外還發現我的部落格文章的URL設置太長，進一步改善裡我的WordPress 部落格URL 設置

Flask

Flask是一種框架，是別人寫好的很多Function,我們直接拿來用。比如Flask框架裡有自動發郵件的Function，使用此功能，只要在模板上填寫要發送到什麼郵箱之類的個人設置，不用自己慢慢寫code。

用現有的框架很省時間，但是為了順利運行，必須要遵守框架給我們的模板，比如Flask的四個模板。

Flask模板：
app.py
requirements.txt
static/
templates/

1.app.py，主要應用程序；

2.requirements.txt，列出支援應用的模塊；

3.static/，包含CSS和其他修改網站外觀的文件；

4.templates/，包含所有的HTML模板。

網站的實現-Model View Controller

MVC模型是MVC模式是一種網絡應用架構模式。把網路應用分為三部分：模型（Model）、視圖（View）和控制器（Controller）。

model：數據庫處理數據；

view：html和css控制網頁的頁面顯示。可以從網頁獲得信息（輸入）和展示信息（輸出）；

Controller:程式應用用來控制和聯繫model和view。

GET/POST

GET/POST是應用層HTTPS協議裡規定的方法，具體是通過HTML Body的Form裡的選擇來實現的。

<body>
        <form action="/greet" method="get">
            <input type="submit">
        </form>
</body>

二者主要的區別是用法不同。

  • GET用來獲取數據比如看網頁。

為了使用方便性，當提交Form後，Form裡提交的值會以key=value 的形式顯示在URL裡。

比如下面的網址，google search的時候URL就會顯示q=what+time+is+it這一組key=value。這樣每次每次獲取數據的時候不用再重新輸入了。

https://www.google.com/search?q=what+time+is+it
  • POST用來執行或操作，比如登入會員。官方文件裡列舉了如下的用法。

如果使用POST，key=value則不會顯示在在url裡，因為隱私的關係。

w3schools 有總結二者區別，但是RFC文件裡好像並沒有規定這麼多。

Session/Cookie

HTTP請求網頁是stateless，沒有狀態，意思是不會記得你是誰。索取一個信息然後獲得信息後，就結束了。在statless的狀態下，我們每次只能打開一個網頁，如果是登陸系統的話，就需要不斷的輸入用戶名密碼login。

通過Session就解決了HTTP的stateless的特性，把網絡應用變成stateful，有狀態，記得你是誰。就好像去動物園蓋個手章，每次進入秀個手章就可以了。

而cookie是實作Session的方式之一。比如第一次登入網頁login的時候，會通過Set-Cookie被自動置入一個cookie，相當於蓋一個手章。

HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: session=value
...

這個cookie是一串很長的比如下面的代碼，每個用戶單獨一個代碼。相當於蓋手章。

2029240f6d1128be89ddc32729463129

下一次在登入同網絡應用的時候，http請求會自動展示這個session來表明身分。

GET / HTTP/1.1
Host: gmail.com
Cookie: session=value

這樣就可以無限瀏覽此應用的網頁和瀏覽無限多次。

當然也可以設置session的時間，像是股票購買網站可以設置比較短的時間比如15分鐘，像是郵件登入應用可以設置很長比如一個月。

cookie可以幫我們實現網站登錄和購物車的功能，但是也會被有心網站（比如FB和google記住，向我們精準投送廣告。

更多cookie有關內容可學習HTTP Cookies: Standards, Privacy, and Politics。

Finance作業心得：

1.看往年的walkthrough，2017年版本的比如C$50 Finance / register也會提供多一些顯示。

2.耐心，這個pset我花了1個月，平常沒有時間，用每天早起的一個小時來完成。

3.作業一開始有給人很簡單的錯覺，只不過是用SQLite數據庫、HTML/CSS、Python語言和Jinja這套Model View Controller來做很多個網頁然後串在一起。

在做的過程中，發現自己在Python的dictionary、SQLite數據庫的各種操作和HTML的form上都犯了很多錯誤。其實想想光靠一節課學Python，一節課學SQLite數據庫，一節課學HTML/CSS，每個都學個皮毛，然後再一節課用這些皮毛學著把所有的都串起來，想想不出bug才是不可能的。

所以，這個finance pset是CS50課程中唯一一個參考部分solution的pset，看別人的solution也是一種學習。

後續學習-From Nand to Tetris

學完CS50算是對軟體層面稍微有個big picture。

本來想學習CS50W，因為1）CS50團隊出品；2）據說比CS50更難，想挑戰看看；3）馬上可以產出作品，很有成就感。

但是考慮了下，決定先學From Nand to Tetris這門課程看看。因為：

1）在學習CS50時候，比較感興趣的是前幾章和電腦底層知識相關的。Nand2Tetris 號稱：“從零開始造一台電腦“，從硬體到軟體，講解電腦是怎麼運行的，激發了我想要探索的好奇心。

2）先理解然後chunk最後神經元才會連結的更多。我覺得學習基礎課程應該可以幫助理解。現在回想今年一月份學習Python課程（心得）的時候，覺得一切都很難。經過了CS50的課程，現在連看_Computer Systems: A Programmer’s Perspective_這種經典教科書都覺得好像可以努力試試看。就是因為CS50課程花了一些時間在講電腦底層的知識。

3）刷到Scott Young的文章，裡面說自己做出來一點東西（比如網頁或app等）再學習CS相關的理論知識會非常有趣。Teach Yourself Computer Science也建議先學編程，再學CS。然後完成本週的作業我也算在老師的幫助下勉強做出來一個網站。所以可以去學更有趣的理論知識了。

4）鍛鍊下我的邏輯和思考能力。

huli大大說這門課很吃邏輯和思考能力（文章），這剛好是我所欠缺的。看看上這門課能不能鍛鍊一下。

總結：

CS50課程學完作業做完，算是挑戰成功。課程最後要求做的Project，等以後有興趣學習網頁製作的時候，比如CS50W的時候再做吧。

翻看了下我的github，從2月4號到7月7號，總共花了5個月的業餘時間完成。雖然花了很久，但是總算是完成了。