從零開始的股票預測程式開發（三）
前端開發完成！
第三篇：應用程式開發－前端
一、前言
前兩篇中，我們從做一個按鈕開始，練習控制字體的大小、顏色及位置，也創建了使用者可以輸入的欄位，以及修改了窗口的標題、Icon 與背景。
在這一篇中，我們要嘗試將前兩篇練習的化為股票分析程式的雛型！
二、版面設計
首先，將我們上次創建的 LineEdit 輸入框、按鈕及兩個 Label 拖曳到版面上。（圖一）
接下來我們要存檔，一樣是將 .ui 透過 PyUIC 轉成 .py 格式。（我們的 .ui 檔名是 StockUI_1 ）
接下來我們要控制我們剛剛拖曳出來的這些元件。我們希望使用者按下按鈕時，螢幕可以呈現的是股市走勢及神經網路預測的結果：
因為我們還沒有走勢圖，因此這邊先用網路上的圖片作為替代。我們選用某一檔股票的走勢圖存為 2884.png 在我的資料夾下。接著，按下 pushButton 後利用第32–37行的 QPixmap 將我的圖片讀進來，並縮放圖片、設定位置及邊框。
我們在第28–30行，設定按下按鈕 label_2 後，在指定位置、大小的條件下產生我們要的文字”Stock rising!!”。
最後，剩下的就是把我們前一篇所學：將 Icon 、單色背景及視窗標題設定成我們要的樣子，結果就會像圖二！
愈來愈有樣子了！
三、走勢圖時段
做到這裡，我們想到: 需要一個日曆，讓使用者可以選擇想要分析的時段。
首先，拉出2 個 Label 、2 個 Date Edit 。（圖三）
兩個 Date Edit 就為了分別設定走勢圖的起始與結束時間。
再度透過PyUIC轉我們的 .ui 檔。
接下來，我們要來控制剛剛的 Date Edit 。我們希望能讓使用者按下按鈕，從跳出的日曆中選擇想要的時間，這個時間就會在之後建立的資料庫中搜尋出需要的資料。
在這段程式碼中，我們主要加入了第27–37行，以及第39行與第43行的兩個 function 。我們用了兩段相同的程式碼，讓大家更容易看得懂。
其中，第27–28行我們設定日期及時間的最大值；第29行讓使用者能透過日曆選擇時間；第30行調整位置；第39–41行連結前段提到的 function 。在 function 中，我們將使用者選擇的日期分別存入變數 d,m,y 中，之後就可以利用這個變數來搜尋資料庫。（圖四）
我們利用第41行的程式碼，將 d,m,y 中的變數值印出。每次我們在變動日期時就會觸發這個 function，也就是說，當我們每次選擇後都可以在 PyCharm 底下看到所選擇的日期，很酷吧！(ΦωΦ)
四、前端開發小結
一路跟我們走到現在的你，我們很開心的宣布：
我們的前端終於開發得差不多了！
先來總結一下對整個前端開發的想法。
如果有認真看到這裡的你，應該可以發現幾個讓我們應用程式停留陽春階段的元素：我們皆沒有針對視窗大小的變動去設計元件。換句話說：我們的元件不會隨著使用者將視窗放大而跟著放大(◔⊖◔)つ。所以，這也是我們可以預見需要優化的地方之一。另外，我們也還沒有將此程式打包成 .exe 執行檔，原因是：我們還有其他 function 尚未完成，需要等全部的連動都做完，我們才會一起打包！（但如果看到這裡的你想先打包的話，可以關鍵字搜尋：Pyinstaller。）
這一篇我們紀錄了如何放上從資料庫讀出的股票走勢圖，及如何設定走勢圖的時間區段。
在下一篇中，我們將學習如何利用簡單的 Web Crawler爬蟲建立我們的資料庫。還請繼續多多指教(✪ω✪)
By the way，希望我們能更新快點的也可以留言讓我們知道喔!
我們是 Craig & Jason，下次見！
