Syllabus
本課程主要講義 https://iottalk.vip/6
本班各同學網頁的網址
* 🅶vm亞歷克羅斯：程式、跨領域、終身學習，是未來成功關鍵
請先仔細複習之前的 w3.py
本週主要練習項目:
(
注意: 本題規定要用 ssh/PuTTY/PieTTY 連入 iottalk.vip 或 iottalk.club 做練習
)
(1)複製 w3.py 到 w4.py 以便增加一個 endpoint "/week04"
(2)學號與姓名用參數從 Python 傳入 templates file
除了學號與姓名外, 至少再多傳一個參數(至多五個), 自己決定
|
|
說明:
所謂增加一個新的 endpoint "/week04"
意思就是要修改 w4.py 使得多了一個網頁,
而這網頁的網址是類似 http://. . ./week04
所以, 如果原先的搖頭大集合是 http://iottalk.vip:3388/haha
則這多出的新網頁是 http://iottalk.vip:3388/week04
|
那要怎麼改 w4.py 呢 ?
注意 w4.py 是從 w3.py 複製來的:
cp w3.py w4.py
以上是 Unix 的複製命令, PC/Weindows 則把 cp 改為 copy
其實, 你也可以在任何文字編輯器內用另存新檔(Save as)存為別的檔案名稱 !
請仔細看看 w4.py 內容(就是 w3.py 內容),
有沒發現針對每一個 endpoint (網頁處理點)都類似如下:
|
# 以下這列意思是在瀏覽器網址列尾巴(endpoint)用 /haha
@app.route("/haha")
def giveHaha(): # 這函數名稱不可以重複 !
這裡是處理這網頁的程式碼 ...
注意.. 凹入寫的格式
但這 /week04 顯然要抄蛇亂動那項目, 阿就是:
@app.route("/hello/<string:name>/")
會了嗎?
還不會 .. OK, 再說詳細一些, 就是要加入類似如下六列: (假設參數傳三個, 規定最多傳五個喔!)
|
@app.route("/week04")
def hello456(name):
myId="009008007" # 學號
myName="蔡文能" # 姓名
ggyy="我來自高雄市" # 這項規定每個人自己發揮創意 (這題目規定最多傳五項參數, 這是第三個)
return render_template( 'test4.html',idn=myId, name=myName, otherinfo=ggyy)
# 原先這有一 列 app.run( "0.0.0.0" ) 是忘了砍掉的, 不過因前列已經 return, 所以沒差 :-)
|
然後呢?
ㄟ.. 然後當然是參考原先處理蛇亂舞怎麼處理的啊 !?
就是說要參考 test.html 那個檔案啊 !!!
那這個 /week04 新網頁要呈現蝦密碗糕呢 ?!
當然是希望每個人可以不太一樣, 所以我就不說得太詳細囉 ..
就是說:
這個 /week04 新的網頁內容自己決定, 例如可以拿你的自我介紹來套用。
至於 Port 改或不改自己決定, 只要注意不和別人衝到即可。
|
|
|
(3)各個檔案要利用檔案元件, 把檔案放到你的 WeeBLY 以便可以讓任何人下載。
還有, 為了方便瀏覽, 也要在網頁內就可以看得到檔案內容 !
這很簡單:
(a)簡易做法: 拖拉文字元件到網頁內, 然後在文字編輯器複製檔案內容來貼入該文字元件即可
然後, 你仍可針對部分內容改顏色或字體大小
(b)自己控制網頁格式: 拖拉"內嵌程式碼"元件, 就外表像 </> 的那個,
加入 HTML/CSS 控制格式;
如果HTML不太會, 建議可以點這看看我以前寫的簡單網頁教學(會的就不必看啦:-)
＊練習過程中至少抓3次畫面, 最多抓五次畫面繳交(放入你的 WeeBLY 網站)。
當然要抓包括新做好的網頁: iottalk.vip:????/week04 或 iottalk.club:????/week04
注意: 為了證明是你親自操作練習, 每次抓畫面時左上角請用記事本開小窗秀出你學號姓名,
可以先如下建立一個文字檔案, 把字型大小設為 24 點 或 28 點以免字太小;
然後, 把窗拉小以便每次要用 CTRL_PrintScr 抓畫面之前先拉到左上角。
(註: 有些筆電可能要加按 Func 功能鍵才能用 CTRL_PrintScr 抓下畫面)
|
|
|
＊＊
想把跑在自己電腦的網站公開為 https://某網址 (想寫 LINE 聊天機器人或 FB 機器人時很好用)
|
👍
加分題:
除了連入雲端 iottalk.vip 或 iottalk.club 做這題之外,
也在 PC (學校電腦教室或自己機器都可)做幾乎相同的練習並搭配 ngrok 服務。
意思就是把"網站"架設(跑)在自己電腦上, 但全世界都可以用 https://某網址 連進來看 !
說明:
(1)其實這個練習下週就一定要做, 但這週先做有加分, 等於送分題 :-)
(2)請把 app.run( ) 那列改為如下:
app.run( '127.0.0.1' , port="38538")
請注意: 這次每位同學都用這樣, 不要改 IP 也不要改 port 喔,
# 故意用 port 三八我三八 .. 哈哈
(3)要把你跑在 自己電腦 38538 的網站(網頁)透過 ngrok 挖地道(tunneling)服務開放為公眾網址 !
這很簡單, 只要到 ngrok 官網 抓 ngrok zip檔來解壓縮後, 執行如下命令即可(請開另一個 CMD 視窗):
ngrok http 38538
|
|
注意如果你是用 Mac OS, 則因為 Mac OS 也是 Unix, 而 Unix 的路徑預設不包括目前的目錄(.),
可是解壓縮後檔案在目前目錄, 不在系統目錄也就不在命令路徑中, 所以執行要先打 ./ (點斜線) 如下:
./ngrok http 38538
當然, Mac OS 和 Unix 都可以使用"安裝"的方式, 那樣會把 ngrok 塞到命令路徑中, 下命令就不必打 ./ 了!
以下命令應該可以在 Mac OS 和 Unix 上用來安裝 ngrok (雖然官網是建議你下載 .zip 檔解壓縮即可):
|
sudo npm install ngrok -g
|
如果不行, 請看這 How to Install Node.js and NPM on a Mac
或是, 看這 How to Install Node.js and NPM on Ubuntu Linux
|
請注意: 這
ngrok http 後面也用 38538 就是要與你機器上的 "網站" 聽的 port 相同 !
這時它會給你兩個網址, 一個 https:// 以及一個 http:// 但都會被轉向到你機器的 38538 這 port,
意思就是全世界都可以用該兩個網址連到你在自己電腦上跑起來聽 38538 的網站,
注意, 即使你電腦只有 Private IP 也一樣可以喔 !
這個概念叫做 Tunneling 挖隧道,
嚴格說來, 應該叫反向隧道(Reverse Tunnel),
因為是從公眾網址偷偷連到我們的電腦 Local Port 上的網站。
＊ 如果沒有註冊(免費)ngrok並認證(也是免費), 則該兩個臨時的網址最多只能持續 8 小時 !
當然, 如果你把執行 ngrok 那 CMD 窗砍殺了, 則該兩個網址也立即失效 !
＊ 可以在自己電腦上開瀏覽器用 127.0.0.1:4040 監看網站連線情況 !
|
(4)當然要開瀏覽器測試 ngrok 提供的 https:// 是否真的連到你電腦跑在 127.0.0.1:38538 的網站 !?
＊
也開一個瀏覽器看看用網址 127.0.0.1:38538 是否完全相同 !?
＊
注意也要測試 https://...ngrok.../week04 和 127.0.0.1:38538/week04
|
(5)如果有註冊並做認證(都免費)則 ngrok 給你的臨時網址就可以一直存在, 除非你自己把 ngrok 砍了 !
(a)註冊後, 登入 ngrok 就可看到你的認證碼, 複製來照它網頁上說的做認證即可:
ngrok authtoken 認證碼
(b)其實你登入 ngrok 後點 Auth 那項, 複製它秀的命令列來用即可, 但是 ..
但是, 那命令列是給 Mac OS 和 Unix 用的,
PC/Windows 使用者請去掉最開頭的 ./ (點斜線)
或是你把 / (斜線) 改為用 反斜線 (.\ngrok ...) 也可以 !
(c)這個認證動作在自己電腦只要做一次即可,
因為 ngrok 會偷建立一個子目錄 .ngrok2
並把認證碼偷寫到裡面 ngrok.yml 檔案, 之後會自己檢查該子目錄(若你把它砍了或移走則要重新認證)
|
|
(d)如果有做認證, 則用 ngrok 挖地道網站時還可以設網頁的帳號與密碼, 如下圖:
|
阿就是要想一個帳號和密碼來授權看你的網站:
|
ngrok http -auth 隨便想的帳號:對應的密碼 網站的Port
|
這樣, 只有知道帳號和密碼的人可以看到網站 (因為要通過登入才會轉到你網站)
(e)如果你有付錢, 還可以登入點 Auth 建立 IP 白名單 (White List), 就是除非列在上面否則不允許連入 !
因為學校電腦教室大多用 Private IP, 白名單中當然不能寫 Private IP,
那我們開瀏覽器連去 ngrok 時, ngrok 看到我們電腦的 IP 是啥呢?
只要在瀏覽器的網址列打 myip 然後就會查到可以問我IP的網站, 點進去看看就是了 !
|
|
(6)免費的 ngrok plan(方案) 已經夠用(雖然有些限制), 除非你錢太多, 否則不建議去選要錢的方案喔 :-)
你可以跑一個有註冊認證的 ngrok http 隧道(免費帳號同時間只能跑一個),
但是, 仍可在同一台電腦上同時跑很多個沒認證的 ngrok 隧道 :-) (只是沒認證的網址最多持續八小時)
(可以先偷把 .ngrok2 子目錄改名例如 暫時改為 .ngrok222 就可跑沒認證的 ngrok http)
第二個跑的 ngrok http 之管理介面在 http://127.0.0.1:4041 , 之後在 :4042, :4043, 以此類推 !
|
|
Q: 為何需要 https:// ... 這種網址呢?
A: 如果要寫 FB 的自動回覆或聊天機器人, 或要寫 LINE 的聊天機器人,
它們都規定你必須用 https:// 來使用 webhook 溝通,
注意 https:// 後面必須是網域名稱, 不可以使用 IP address, (因為憑證是針對網域不是 IP)
然而 網域名稱(Domain name)是要另外買(租)的, 通常是一年大約台幣 800 元,
要買網域名稱建議到 Godaddy 快樂老爹購買比較公道且它的管理介面很好用(但不要買它的 VPS 因為很貴!)
另外, https 需要 SSL 憑證, 費用也很貴, 每年從數千元(進入點學校專案有價錢)到甚至數萬元都有!
不過也有免費的 Let's Encrypt 憑證 :-)
|
|
|
