本週練習目標:
要真的開始了解 render_template 的前因後果 !
w3.py 讓你知道透過 render_template 我們可以把一些資訊從 Python 傳過去網頁如 test.html,
還有,
該 test.html 其實是繼承了另外一個檔案 layout.html 的內容 !
在第四週的練習, 我們從 w3.py 複製為 w4.py 來修改,
並規定 /week04 要從 w4.py 傳一些不同的資訊過去 test4.html
因為原先的 test.html 仍有用, 所以才必須把 test.html 複製到 test4.html (當然名稱沒規定喔 !)
不過當時這 test4.html 可以仍然 extends "layout.html" ( WHY ? )
因為, 當時我們希望 test4.html 的格局樣式都類似原先的 test.html, 所以仍然 extends "layout.html" 即可!
還有, 第四週的練習仍規定要用 SSH 工具(Putty 或 PieTTy 等)連入 iottalk.vip 做練習,
也就是說 w4.py 的網站仍放在 iottalk.vip 這在美國西雅圖的機器 !!
阿就是說, 第四週(含)之前, 我們都是規定要用 SSH 工具連過去 iottalk.vip 這 Linux 機器做習題,
但第四週的加分題開始則是要在自己電腦(或學校電腦教室的電腦)上直接執行 python 做出網站 !
* 之所以讓大家用 SSH 連線去 iottalk.vip 或 iottalk.club 這種 Linux 機器做練習主要是讓大家體驗一下不同的電腦系統 !
通常 Linux / Unix 系統大多被拿來做 Server (伺服器), 當然, 也有人在自己電腦上灌 Linux 作業系統 + GUI 環境 :-)
*
之後的練習, 原則上不再規定連去 iottalk.vip 或 iottalk.club;
但是會保留大家在 iottalk.vip 機器上的帳號, 大家仍可隨時用 SSH 工具(包括 PuTTY 或 PieTTY 甚至 ssh 命令)連進去 "玩 Linux" :-)
關於 Linux / Unix 的常用命令, 請 點這到 iottalk.vip/607 看我整理的 Linux 常用二十幾個命令。
|
Deploy(部署) vs. Install (安裝) ?
除了第三週的練習是體驗 IoT 物聯網的應用, 其他各週的練習我們都是在做 "部署一個網站" (其實事一個網頁式應用 Web Application);
"Deploy (部署)" 這個詞和 "Install (安裝)" 類似, 而且網路上也常有人吵架有的說意思一樣有的堅持說這兩個 word 意思不同 !
你可以把它想成 "Deploy" 就是比較複雜的 "Install", 因為安裝通常就是執行一個如 Setup.exe 的檔案然後..就幾乎一直 "下一步" "下一步" .. 就可以完成 :-)
通常我們會說 "幫我安裝 Python3 這個軟體", 不會說 "幫我部署 Python3 這個軟體" !
但是, 我們會說 "幫我部署一個網站!", 不會說 "幫我安裝一個網站" !
不過, 倒是也有人說 "幫我建置一個網站" 甚至說 "幫我弄一個網站" !
|
上次 Week05 是希望你把網站部署(Depoly)到 Heroku 的虛擬主機上, 但步驟有點多(顯然沒辦說一直"下一步"就做好:-),
所以如果弄不出來或其他科目功課較忙或偷懶不想挑戰這種比較難的練習,
則可改做把網站部署在自己電腦然後用 ngrok 服務挖地道弄出 https:// 的外部網站也可以 !
第五週的重點在把你的網站開放成 https:// 某個網址,
所以上次的 /week05 我們只利用 return '''整個網頁'''
把陶淵明的田園詩送去給瀏覽器!
這次(Week06), 要把網站放在你自己的機器(宿舍或家裡, 甚至用學校計中電腦也都可),
要增加 /week06 並做類似第四週的練習, 就是說要用 return render_template
且要多傳一些信息:
跑該網站之伺服器的 IP, 以及該機器當時的時間;
還有, 這次規定也要複製 layout.html 來改為 layout6.html
當然在 test6.html 內要 extends "layout6.html"
關於 template 用法與規定, 可以參考 Flask 官方網站的相關文件:
http://flask.pocoo.org/docs/1.0/tutorial/templates/
舊版好像比較好:
http://flask.pocoo.org/docs/0.12/tutorial/templates/
http://flask.pocoo.org/docs/1.0/patterns/templateinheritance/
還有, 這次也是在自己的電腦上做, 然後利用 ngrok 服務開放為 https:// 的網站 !
|
說明:
補充關於03/29上課時的 Demo:
2019/03/29(五)下午上課時, 我們是直接複製 w3.py 到 w6.py 來 Demo 把 Server 的 IP 和 Server 的當時日期時間傳到 test6.html 以便秀在網頁上 !
以下把當時做的過程大略覆述一次:
(1)透過用瀏覽器看 w3.py並把 w3.py 和相關檔案的內容用記事本 notepad 建立在 PC 上某個目錄內:
(a)開啟一個 CMD 窗, 用 mkdir ggggg 造一個子目錄 ggggg, 打算用這子目錄當網站的根目錄(Web Root)
mkdir ggggg
(當然也可以用滑鼠開檔案夾到 C:\Users\user 然後按滑鼠右鍵新建立一個資料夾 ggggg)
|
(b)用 cd 命令進入該子目錄, 建立 w6.py
cd ggggg
notepad w6.py
然後把 w3.py 內容複製貼上到這 w6.py 檔案內
另存新檔以便選擇編碼用 UTF-8 (因為預設是 ANSI 那樣中文會被用 BIG5, 不符合 Python 的期待 !)
|
(c)建立一個子目錄 templates 並進入該子目錄, 然後建立 test.html 和 layout.html
mkdir templates
cd templates
notepad layout.html (因為原先的網頁仍會用到 layout.html 所以要有這檔案)
(還有, 記得也是要另存新檔把編碼改用 UTF-8 存檔)
notepad test.html (注意原先的網頁也是仍會用到這 test.html)
(還有, 記得要另存新檔把編碼改用 UTF-8 存檔)
(d)把 test.html 複製一份到 test6.htmp 並且把 layout.html 複製一份到 layout6.html
copy test.html test6.html
copy layout.html layout6.html
(e)修改 layout6.html
notepad layout6.html (可以故意改內容讓它和 layout.html 有些不同)
(f)修改 test6.html
notepad test6.html (記得要改 extends layout6.html 喔 !)
|
(2)繼續修改 test6.html, 加入會秀出參數 myIP 以及 svrTime (參數名稱要由 w6.py 內決定並傳過來)
這在第四週已經練習過, 第四週是要求從 w4.py 把你學號和姓名傳入 test4.html 秀在網頁上; 這次是希望在 w6.py 那抓取伺服器 Server 的 IP 位址
以及當時的日期時間(Date Time)
傳到 test6.html 內, 由 test6.html 決定要秀在網頁的哪個位置,
以及字體大小顏色等(字體大小顏色也可以在 layout6.html 利用 CSS 決定)
所以, 可以參考
那個 {{name}} 的寫法 ( 在test.html 裡面 ),
把 {{myIP}} 和 {{svrTime}} 擺在網頁適當的地方(自己決定), 例如我們上課時在 test6.html 內寫了如下:
<h2 align=LEFT>伺服器的 IP 是 <font color=red> {{myIP}} </font> </h2>
<h2 align=center>伺服器現在日期和時間是 <font color=red> {{svrTime}} </font> </h2>
還有 還有, 我們也修改了
layout6.html
我們故意在
layout6.html
內用 CSS 定義了
h2 這 tag (標籤)
會用到的一些屬性如下:
h2{
font-size:58px; font-family: '標楷體';
color: #0800ff; /* Blue */
}
|
補充說明: 如果上面
h2{
改寫成
.h2{
則表示這個
h2
是 class (類別) 不是 tag,
如果改寫為
#h2{
則表示這個
h2
是 id 不是 tag 也不是 class (類別) !
|
(3)回頭修改 w6.py, 在裡面 加入 /week06 要用到的程式碼..
(a)先回到上一層目錄:
cd ..
# 點點 .. 代表上一層目錄
dir # 看看目前目錄內有啥檔案
|
(b)用任何文字編輯器修改 w6.py
(c)在裡面最後的 if __name__ ... 那句之前加入以下:
@app.route("/week06/")
@app.route("/week06")
def hello2_wk06( ):
#函數名稱不重要, 但不可以重複
myID="999888777"
# 學號
ggg="張三豐"
# 姓名
myIP="140.113.3.8"
ggyy="2019/03/29 33:88:58" # 變數故意永 ggyy, 且故意先亂寫時間
return render_template( 'test6.html', name=ggg, myID=myID, \
myIP=myIP, svrTime=ggyy)
|
補充說明:
這裡我故意用 ggg 來代表姓名, 傳入網頁 test6.html 內的 name
還有, ggyy 代表網站的當時時間, 傳入 test6.html 內的 svrTime
請注意剛剛在 test6.html 我們有用到 {{svrTime}} 如下:
<h2 align=center>伺服器現在日期和時間是 <font color=red> {{svrTime}} </font> </h2>
|
|
|
(4) 先測試 w6.py 看看
(5)用瀏覽器看看網頁 /week06 如何? (注意程式碼最後那列用的 port 是多少 ? 不一定是 3388 喔 )
|
在網址列打入 127.0.0.1:3388/week06
|
(6)想辦法讓 Server 的 IP 是正確的 IP
用 google.com 搜尋 how to find myip python
可以找到很多答案, 我們挑以下來用, 修改 w6.py 內取代原先亂寫的 myIP, 記得改好之後要存檔
import socket
myIP = socket.gethostbyname(socket.gethostname( ))
|
|
(7)按 F5 刷新瀏覽器(重開也可), 可以把網頁內看到的 Server IP 位址分享給同學測試看能否看到同樣的網頁
＊ 注意這 Server IP 當然不會是 0.0.0.0 也不會是 127.0.0.1
如果在學校計中電腦教室的應該是
192.168.??.??
這種
Private IP (私有 IP)
(8)也想辦法修改 w6.py 讓它抓到正確的日期時間傳給 test6.html
用 google.com 搜尋 how to get current date time python
可以找到很多答案, 我們挑以下來用, 修改 w6.py 內取代原先亂寫的 ggyy, 注意變數名稱, 還有記得改好之後要存檔
import time
ggyy = time.strftime("%Y/%m/%d %H:%M:%S")
|
|
(9)按 F5 刷新瀏覽器(重開也可), 注意看看日期時間是否正確
(10)跑 w6.py 的 CMD 窗留者讓網頁活著, 另開一個 CMD 窗,
以便執行 ngrok http 3388 做挖地道從 ???.ngrok.io 連回你的網頁
( 當然要到
ngrok.com
網站抓回 ngrok 的壓縮檔來解壓縮出 ngrok.exe 才能用
)
(11)自己另開瀏覽器窗, 在網址列打入 ngrok.com 給你的 https://???.ngrok.io/week06
(ㄟ, 那個 ??? 是指 ngrok 給你的網址, 不要真的打 ??? 喔 !
還有, 這 ngrok.io 的網址不要再打 :3388 了喔, 因為 https:// 意思就是用 port 443 這安全 port )
這時看到的應該是和剛剛 127.0.0.1:3388/week06 那網頁相同 !
也請同學測試看能否看到同樣的網頁(要把 ngrok 給你的 https:// 網址 給同學!)
(12)請注意, 這週練習好之後仍要確定執行這 w6.py 後, 原先的 /week04 和 /week05 都還是好的喔 !
也就是說, 網站是持續擴充之前做好的 ！
|
|
|
