# 20220929 My First Web App
學習目標:
1. Visual Studio Code 基本操作
2. 在本地端建立 Web App
3. 學習建立 function
4. 學習基本命令: if, print
## Part 1: 建置新的工作區域(workspace repository)
步驟1: 電腦建立一個新的資料夾, 例如, pythonlab_111_MIG004301
```
PS D:\python_lab>mkdir pythonlab_111_MIG004301
```
步驟2: 打開 Visual Studio Code 並點選 File -> Open Folder... -> pythonlab_111_MIG004301, 並點選"Select Folder"
步驟3: 信任作者
步驟4: 新的 workspace, pythonlab_111_MIG004301
步驟5: 練習操作 workspace 的元件, 例如:
* New File...
* New Folder...
* Terminal
## Part 2: Python Flask - 建立 Web App
步驟1: 打開 Visual Studio Code 並點選 workspace
步驟2: 建立一個新的專案, firstApp, 並建立該專案專屬的資料夾
步驟3: 打開 terminal 安裝 flask
```
PS D:\pythonlab_111_MIG004301>mkdir firstApp
PS D:\pythonlab_111_MIG004301>cd firstApp
PS D:\pythonlab_111_MIG004301\firstApp> pip install flask
```
如果無法執行 pip 的同學, 可以嘗試下列方法
```
方法1:
PS D:\pythonlab_111_MIG004301\firstApp> python -m pip install flask
方法2:
PS D:\pythonlab_111_MIG004301\firstApp> py -m pip install flask
```
步驟4: 如何驗證 flask 有安裝成功
```
$ python
Python 3.10.0 (tags/v3.10.0:b494f59, Oct 4 2021, 19:00:18) [MSC v.1929 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import flask
>>> exit()
```
[原步驟5-6 skip]
步驟7: 點選專案資料夾,firstApp,在專案的資料夾中新增檔案, 並取名為 app.py
(Ref: https://flask.palletsprojects.com/en/2.2.x/tutorial/layout/)
```python=
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello, World!'
if __name__ == '__main__':
app.run()
```
第3行: 建立一個 Flask 應用程式的物件, app. 傳入的參數, '*\___name\___*', 是 python 內建的變數, 它會儲存目前這個程式執行的模組名稱, 也就是目前這個程式在哪個模組下執行. 如果這個程式是當成主程式來執行, '*\___name\___*' 的值就是 *\__main\__*.
第7-8行: 是一個函式 (function)
第6行: 在 function 上面用一個 "@" 符號, 就是 function 的裝飾(decorator), 以function為基礎，提供附加的功能. 在這裡是 app.route 的功能.
第10行: 如果目前這個程式是以主程式來執行
第11行: 立刻啟動伺服器
步驟8: 執行應用程式
```
PS D:\pythonlab_111_MIG004301\firstApp> python app.py
```
步驟9: 在啟動伺服器之前, 新增網站頁面.
```python=
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello, World!'
@app.route("/readme")
def readme():
return "This is ream me page. Please read me first!!"
if __name__ == '__main__':
app.run()
```
第10行: 代表我們要處理的網站路徑
第11-12行: 執行 readme() 函式
-----------------------
參考資料:
1. Flask 函式庫: https://flask.palletsprojects.com/en/2.2.x/tutorial/layout/
2. Python print() function: https://www.w3schools.com/python/ref_func_print.asp
3. Python functions: https://www.w3schools.com/python/python_functions.asp
4. Python conditions: (if... else...) https://www.w3schools.com/python/python_conditions.asp
---------------------------
備註:
步驟5: 點選專案資料夾,firstApp,在專案的資料夾中新增檔案, 並取名為 app.py
(Ref: https://flask.palletsprojects.com/en/2.2.x/tutorial/layout/)
```python=
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello, World!'
```
第3行: 建立一個 Flask 應用程式的物件, app. 傳入的參數, '*\___name\___*', 是 python 內建的變數, 它會儲存目前這個程式執行的模組名稱, 也就是目前這個程式在哪個模組下執行. 如果這個程式是當成主程式來執行, '*\___name\___*' 的值就是 *\__main\__*.
第7-8行: 是一個函式 (function)
第6行: 在 function 上面用一個 "@" 符號, 就是 function 的裝飾(decorator), 以function為基礎，提供附加的功能. 在這裡是 app.route 的功能.
步驟6: 執行應用程式
```
PS D:\pythonlab_111_MIG004301>cd firstApp
PS D:\pythonlab_111_MIG004301\firstApp> set FLASK_APP=app.py
PS D:\pythonlab_111_MIG004301\firstApp> flask run
```
附註: 如果是使用 Mac 的同學,
```
PS D:\pythonlab_111_MIG004301\firstApp> set FLASK_APP=app.py 要換成
$ export FLASK_APP=app.py
```
Sign in with Wallet
Connect another wallet