CS50 wk9 Flask學習和Finance作業心得

學習心得:

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/,(eg:https://fulltimemammy.com/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個月的業餘時間完成。雖然花了很久,但是總算是完成了。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *