บทช่วยสอน #5: รูปแบบการออกแบบ Flask และวิธีปฏิบัติที่ดีที่สุดสำหรับเว็บแอปพลิเคชัน
บทช่วยสอน #6: บทช่วยสอน Flask API พร้อมตัวอย่าง
บทช่วยสอน Python Flask เบื้องต้นนี้อธิบายถึงสิ่งที่เป็น Flask การติดตั้ง Python, Virtualenv, Flask Hello World พร้อมตัวอย่างโค้ด การดีบัก และการทดสอบ:
การพัฒนาเว็บไซต์คือ เป็นศิลปะมากกว่าทักษะ ต้องใช้ความอดทนและความขยันหมั่นเพียร ควบคู่ไปกับความอุตสาหะ ความกล้าหาญ และความทุ่มเทเพื่อสร้างสิ่งที่จำเป็นสำหรับความสำเร็จอย่างแท้จริง ทุกวันนี้ ผู้เรียนต้องเร่งความเร็วให้เร็วที่สุดเท่าที่จะเป็นไปได้
เราได้สร้างบทช่วยสอน Python Flask นี้เพื่อให้นักเรียนเร่งความเร็วและปรับใช้การเขียนโปรแกรมเว็บทั้งแบบง่ายและแบบซับซ้อนโดยใช้ Python 3 .
บทช่วยสอน Python Flask นี้เป็นเหมือนบทช่วยสอนเริ่มต้นของขวดแก้วมากกว่า ซึ่งจะครอบคลุม การติดตั้ง Python, Virtualenv และแพ็คเกจที่จำเป็นอื่นๆ ในบทช่วยสอนชุดนี้ เราจะติดตั้ง Flask พร้อมกับปลั๊กอิน Flask ที่จำเป็นอื่นๆ ด้วย เรายังได้รวมส่วนเกี่ยวกับการดีบักโค้ด การทดสอบ และการผสานรวมอย่างต่อเนื่องโดยใช้ Git Actions
รายการบทช่วยสอนในซีรี่ส์ Flask นี้
บทช่วยสอน #1: Python Flask บทช่วยสอน – รู้เบื้องต้นเกี่ยวกับ Flask สำหรับผู้เริ่มต้น
บทช่วยสอน #2: แม่แบบขวด แบบฟอร์ม ดู และเปลี่ยนเส้นทางพร้อมตัวอย่าง
บทช่วยสอน #3: การจัดการฐานข้อมูล Flask – วิธีใช้ Flask กับฐานข้อมูล
บทช่วยสอน #4: แอป Flask และเค้าโครงโครงการ Flask พร้อมพิมพ์เขียว &ขั้นตอนที่กล่าวถึงในข้อกำหนดเบื้องต้น
ขั้นตอนที่ 1: ติดตั้ง Python
ตรวจสอบว่าคุณได้ติดตั้ง Python 3 หรือไม่ หากไม่มี ให้ดาวน์โหลด Python 3 จากที่นี่และติดตั้งตามระบบปฏิบัติการของคุณ
ขั้นตอนที่ 2: สร้าง Python Virtual Environment
สร้างสภาพแวดล้อมเสมือนโดยใช้ ด้านล่างคำสั่ง
python3 -m venv venv
ใช้คำสั่งด้านล่างเพื่อเปิดใช้งานสภาพแวดล้อมเสมือน Python
source venv/bin/activate
เราได้ให้ตัวอย่างการเปิดใช้งานและปิดใช้งานสภาพแวดล้อมเสมือนด้านล่าง
คำสั่งต่อมาทั้งหมดในบทช่วยสอนนี้ควรรันในสภาพแวดล้อมเสมือนที่เปิดใช้งาน ติดตั้งชุดวงล้อเพื่อให้เราสามารถสร้างวงล้อภายในสภาพแวดล้อมเสมือนจริงได้
pip install wheel
ขั้นตอนที่ 3: ดาวน์โหลด Flask และ Insall
เราจำเป็นต้องทำตามขั้นตอนการดาวน์โหลด Flask และ ติดตั้ง Flask โดยใช้ขั้นตอนด้านล่าง
ตอนนี้ติดตั้ง Flask
pip install flask
พวกเราบางคนชอบที่จะทำงานร่วมกับการเปลี่ยนแปลงซอร์สโค้ดล่าสุด เราสามารถใช้คำสั่งด้านล่างเพื่อติดตั้งพร้อมกับการเปลี่ยนแปลงล่าสุดของแหล่งที่มาของ Flask
สร้างไดเร็กทอรีชั่วคราว
mkdir tmp
ตอนนี้ติดตั้ง Flask จากที่เก็บ Github คุณต้องเชื่อมต่อกับอินเทอร์เน็ตเพื่อให้คำสั่งด้านล่างทำงานได้
pip3 install -e [email protected]:pallets/flask.git#egg=flask
ดูที่เอาต์พุตของคอนโซลเพื่อตรวจสอบว่าการติดตั้งสำเร็จ ตรวจสอบว่าเราสามารถเข้าถึงคำสั่ง Flask ได้หรือไม่
flask --help
คุณอาจเห็นข้อยกเว้นบางประการเกี่ยวกับการไม่มี Flaskแอปพลิเคชัน. อย่างไรก็ตาม อย่าละเลยสิ่งเหล่านั้นเนื่องจากเราไม่ได้สร้างแอป Flask ใดๆ แอปของเราเป็นตัวอย่างของ Flask ซึ่งเป็นตัวห่อหุ้มบนเฟรมเวิร์กของเว็บ Werkzeug และเครื่องมือสร้างเทมเพลตของ Jinja
Werkzeug
Werkzeug เป็นชุดเครื่องมือ WSGI WSGI เป็นเพียงหลักการเรียกสำหรับเว็บเซิร์ฟเวอร์ในการส่งต่อ คำขอเว็บ ไปยังเว็บแอปพลิเคชันที่เขียนด้วยภาษาโปรแกรม Python
Jinja
Templateing คือ ชุดทักษะที่จำเป็นสำหรับนักพัฒนาเว็บ Jinja เป็นเครื่องมือสร้างเทมเพลตที่มีคุณสมบัติครบถ้วนและเป็นที่นิยมสำหรับ Python เป็นภาษาที่ค่อนข้างสื่อความหมายและมีชุดเครื่องมือที่มีประสิทธิภาพในการสร้างเทมเพลตผู้เขียน
ขั้นตอนที่ 4: ติดตั้ง MongoDB
ทำตามขั้นตอนด้านล่างเพื่อติดตั้ง MongoDB เราได้สรุปขั้นตอนในการติดตั้งใน Linux ที่ใช้ Debian หากคุณใช้ระบบปฏิบัติการอื่น ให้เข้าไปที่ลิงก์และติดตั้งตามระบบปฏิบัติการที่ต้องการ
ติดตั้ง gnupg เพื่อนำเข้าคีย์ GPG สาธารณะ MongoDB
sudo apt-get install gnupg
ตอนนี้นำเข้าคีย์โดยใช้คำสั่งด้านล่าง
wget -qO - //www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -
สร้างไฟล์รายการแหล่งที่มาตามการแจกจ่าย Linux ของคุณ เราได้เพิ่มรายการแหล่งที่มาตาม Debian
echo "deb //repo.mongodb.org/apt/debian buster/mongodb-org/4.2 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list
เรียกใช้คำสั่งอัปเดต
sudo apt-get update
ตอนนี้ติดตั้ง MongoDB โดยใช้คำสั่งด้านล่าง
sudo apt-get install -y mongodb-org
เมื่อติดตั้งสำเร็จ ให้เริ่ม MongoDB โดยใช้คำสั่งด้านล่าง
sudo systemctl start mongod
ตรวจสอบสถานะของ MongoDB โดยใช้คำสั่งด้านล่าง
sudo systemctl status mongod
ตอนนี้ตรวจสอบให้แน่ใจว่า mongod เริ่มต้นโดยอัตโนมัติเมื่อรีบูตระบบโดยออกคำสั่งที่แสดงด้านล่าง
sudo systemctl enable mongod
ตอนนี้ตรวจสอบว่าคุณสามารถ เชื่อมต่อกับเซิร์ฟเวอร์ MongoDB โดยใช้ไคลเอนต์ mongo
mongo
ใน mongo shell ให้ลองใช้ help และแสดงคำสั่ง dbs
Create A Flask App
ใช้คำสั่งด้านล่างเพื่อติดตั้ง flask-appbuilder และ mongoengine
pip install flask-appbuilder pip install mongoengine pip install flask_mongoengine
สร้างแอป Skeleton ด้วยค่าที่แสดงเป็นความคิดเห็นในข้อมูลโค้ดด้านล่าง
flask fab create-app # Give the following values in the command line questionnaire # Application Name: flaskTutorialApp # EngineType : MongoEngine
เราจะเห็นผลลัพธ์ที่คล้ายกับที่แสดงด้านล่าง
Your new app name: exampleApp Your engine type, SQLAlchemy or MongoEngine (SQLAlchemy, MongoEngine) [SQLAlchemy]: MongoEngine Downloaded the skeleton app, good coding!
ดูเค้าโครงของโครงการและแอป เราได้แสดงผลลัพธ์ของคำสั่ง tree ด้านล่าง
มาดูที่ไฟล์กำหนดค่า Flask เป็นการกำหนดค่าเริ่มต้นที่สร้างขึ้นจากผลลัพธ์ของคำสั่งสุดท้าย ยกเลิกการแสดงความคิดเห็น Cyborg ธีมดังที่แสดงด้านล่าง
# Theme configuration for Cybord=g # these themes are located on static/appbuilder/css/themes # We can create our own and easily use them by placing them on the same dir structure to override #APP_THEME = "bootstrap-theme.css" # default bootstrap #APP_THEME = "cerulean.css" # cerulean #APP_THEME = "amelia.css" # amelia theme #APP_THEME = "cosmo.css" # cosmo theme APP_THEME = "cyborg.css" # cyborg theme #APP_THEME = "flatly.css" # flatly theme
หากต้องการเรียกใช้แอพ Skeleton ให้ใช้คำสั่งด้านล่างบนเทอร์มินัล
flask run
Flask Hello World
ในการสร้างโปรแกรมแรกของคุณใน flaskTutorialApp ให้เปิดไฟล์ views.py ใต้ไดเร็กทอรีแอป และเพิ่มโค้ดต่อไปนี้ ค้นหาคำสั่งนำเข้าที่ระบุในไฟล์ เพิ่มคำสั่งเหล่านี้หากยังไม่มี
from flask_appbuilder import BaseView, expose from app import appbuilder class HelloWorld(BaseView): """ This first view of the tutorial """ route_base = "/hello" @expose("/") def hello(self): return "Hello, World! from Software Testing Help" # at the end of the file appbuilder.add_view_no_menu(HelloWorld())
บันทึกไฟล์หลังจากเพิ่มซอร์สโค้ดข้างต้น ไปที่ไดเรกทอรีรากของโปรเจ็กต์และใช้คำสั่งด้านล่างเพื่อเรียกใช้เซิร์ฟเวอร์การพัฒนาของ Flask
flask run
ตอนนี้ไปที่ //localhost:5000/hello/ เพื่อดูผลลัพธ์ในเบราว์เซอร์
การดีบัก
ขณะนี้ เซิร์ฟเวอร์การพัฒนาไม่ได้ทำงานในโหมดดีบัก หากไม่มีโหมดดีบั๊ก การค้นหาข้อผิดพลาดในซอร์สโค้ดของแอปพลิเคชัน Flask จะทำได้ยาก
โหมดดีบั๊กใน Flask ส่งผลให้เกิดผลลัพธ์ต่อไปนี้:
- โหมดแก้ไขข้อบกพร่องเปิดใช้งานตัวโหลดซ้ำอัตโนมัติ หมายความว่าเราไม่จำเป็นต้องรีสตาร์ทเซิร์ฟเวอร์การพัฒนาหลังจากที่เราทำการเปลี่ยนแปลงในซอร์สโค้ดของแอปพลิเคชัน
- โหมดดีบั๊กจะเปิดใช้งานดีบักเกอร์ Python เราสามารถตรวจสอบค่าของตัวแปรระหว่างข้อยกเว้น
- โหมดดีบั๊กเปิดใช้งานการดีบักแอปพลิเคชัน Flask เราสามารถตรวจสอบค่าของตัวแปรต่างๆ ในเซสชันการดีบัก
หยุดเซิร์ฟเวอร์การพัฒนาหากเซิร์ฟเวอร์ทำงานอยู่ คุณสามารถใช้ CTRL + C หรือการขัดจังหวะแป้นพิมพ์เพื่อทำเช่นเดียวกัน
ใช้รหัสต่อไปนี้เพื่อเปิดใช้งานโหมดดีบักและเรียกใช้เซิร์ฟเวอร์การพัฒนาชั่วคราว
@expose("/") def hello(self): raise Exception("A custom exception to learn DEBUG Mode") return "Hello, World! from Software Testing Help"
ค้นหา คอนโซลสำหรับ Debugger PIN และจดบันทึกไว้
ตอนนี้เรามาเปลี่ยนมุมมอง HelloWorld ที่เขียนไว้ด้านบนด้วยบรรทัดต่อไปนี้ของข้อมูลโค้ด ขอให้สังเกตว่าเราได้แนะนำข้อยกเว้นแบบกำหนดเอง
@expose("/") def hello(self): raise Exception("A custom exception to learn DEBUG Mode") return "Hello, World! from Software Testing Help"
ไปที่ //localhost:5000/hello/ และคุณจะเห็นว่าแอปพลิเคชันได้ยกข้อยกเว้นขึ้น เบราว์เซอร์แสดงการติดตามสแต็กดังที่แสดงด้านล่าง
![](/wp-content/uploads/guides/iae5sr2a76-3.png)
นอกจากนี้ ดูที่คอนโซลที่เซิร์ฟเวอร์การพัฒนากำลังทำงานอยู่ คุณจะพบว่าเวลานี้ตรวจพบการเปลี่ยนแปลงใน views.py โดยอัตโนมัติ และเซิร์ฟเวอร์ดีบั๊กจะรีสตาร์ทด้วยตัวเอง ตอนนี้เราไม่ต้องรีสตาร์ทเอง
คอนโซลจะมีเส้นตามที่แสดงด้านล่าง เราจำเป็นต้องจด PIN การแก้ไขข้อบกพร่องไว้ใช้ในภายหลัง
* Detected change in '/work/sth/flaskTutorialApp/app/views.py', reloading 2020-06-02 14:59:49,354:INFO:werkzeug: * Detected change in '/work/sth/flaskTutorialApp/app/views.py', reloading * Restarting with stat 2020-06-02 14:59:49,592:INFO:werkzeug: * Restarting with stat * Debugger is active! * Debugger PIN: 150-849-897
ตอนนี้ให้ตรวจสอบสแต็กเทรซในเบราว์เซอร์และไปที่บรรทัดสุดท้าย คลิกเพื่อขยายมุมมองและคลิกไอคอน CLI เพื่อเปิดเชลล์ในโหมดโต้ตอบ
![](/wp-content/uploads/guides/iae5sr2a76-4.png)
เมื่อคุณเปิดแล้ว คุณจะเห็นว่าเบราว์เซอร์จะแสดงข้อความแจ้งสำหรับ Debug PIN ระบุ Debug PIN และคลิกตกลง
![](/wp-content/uploads/guides/iae5sr2a76-5.png)
เมื่อเราดำเนินการต่อหลังจากให้ Debug PIN แล้ว เราสามารถเข้าถึงเชลล์แบบโต้ตอบได้
เราเข้าถึงเชลล์จากภายในเบราว์เซอร์และ สามารถตรวจสอบค่าของตัวแปรเพื่อหาสาเหตุของข้อยกเว้นและจัดการกับข้อผิดพลาดได้ดีขึ้น โปรดดูหนึ่งในตัวอย่างที่แสดงในภาพด้านล่าง
![](/wp-content/uploads/guides/iae5sr2a76-6.png)
ตอนนี้เปลี่ยนรหัสใน view.py ดังที่แสดงด้านล่าง โปรดทราบว่าเราได้แสดงความคิดเห็นในบรรทัดที่มีการยกข้อยกเว้น
@expose("/") def hello(self): # raise Exception("A custom exception to learn DEBUG Mode") return "Hello, World! from Software Testing Help"
การทดสอบแอปพลิเคชัน Flask
ตอนนี้ เรามาเขียนการทดสอบครั้งแรกสำหรับแอปพลิเคชัน Flask ที่เรากำลังพัฒนา ก่อนอื่นให้ติดตั้ง PyTest PyTest เป็นกรอบการทดสอบ ช่วยให้เราเขียนโค้ดได้ดีขึ้น
ยิ่งไปกว่านั้น เพียงเพราะเราสามารถเขียนการทดสอบหน่วยในขณะที่พัฒนาแอปพลิเคชันของเราได้ จึงเป็นไปได้ที่จะปฏิบัติตามแนวทาง TDD TDD ย่อมาจาก Test-Driven Development ในบทช่วยสอนที่ตามมาของเราซีรีส์นี้ เราจะเขียนการทดสอบก่อนเสมอ และพัฒนามุมมองหรือโมเดลของเรา
ติดตั้ง PyTest
pip install pytest
ตอนนี้สร้างไดเร็กทอรีที่เรียกว่าการทดสอบภายในไดเร็กทอรีแอปและในนั้น สร้างไฟล์ชื่อ test_hello.py มาเขียนการทดสอบหน่วยแรกของเราเพื่อทดสอบมุมมองของเรา
คัดลอกข้อมูลโค้ดต่อไปนี้และวางลงใน test_hello.py
#!/usr/bin/env python from app import appbuilder import pytest @pytest.fixture def client(): """ A pytest fixture for test client """ appbuilder.app.config["TESTING"] = True with appbuilder.app.test_client() as client: yield client def test_hello(client): """ A test method to test view hello """ resp = client.get("/hello", follow_redirects=True) assert 200 == resp.status_code
ใช้คำสั่ง pytest ด้านล่างเพื่อเรียกใช้ การทดสอบ PyTest รวบรวมการทดสอบโดยอัตโนมัติและแสดงผลบนเอาต์พุตมาตรฐาน
![](/wp-content/uploads/guides/iae5sr2a76-7.png)
สร้างเวิร์กโฟลว์ GitHub
เราใช้ Git Actions เพื่อสร้างเวิร์กโฟลว์ CI/CD สำหรับแอปพลิเคชันตัวอย่างของเรา ทำตามขั้นตอนที่กล่าวถึงด้านล่างสำหรับโครงการของคุณ
ขั้นตอนที่ 1: ไปที่หน้าพื้นที่เก็บข้อมูลบน GitHub คลิกที่ Git Actions
![](/wp-content/uploads/guides/iae5sr2a76-8.png)
ขั้นตอนที่ 2: เลื่อนลงมาบนหน้าและค้นหาเทมเพลตเวิร์กโฟลว์ที่มีอยู่สำหรับแพ็คเกจ Python
![](/wp-content/uploads/guides/iae5sr2a76-9.png)
![](/wp-content/uploads/guides/iae5sr2a76-10.png)
ขั้นตอนที่ 4: เมื่อการกำหนดค่าเวิร์กโฟลว์ python-package.yml เปิดขึ้น ให้อัปเดตตาม yaml ที่กำหนดเพิ่มเติม ค่าแท็ก
name: flaskTutorialApp jobs: build: runs-on: ubuntu-latest strategy: matrix: python-version: [3.7, 3.8] mongodb-version: [4.2] steps: - name: Start MongoDB uses: supercharge/[email protected] with: mongodb-version: ${{ matrix.mongodb-version }} # other values
เราต้องการทดสอบแอปพลิเคชัน Flask ของเราในการแจกจ่าย Ubuntu Linux ล่าสุด นอกจากระบบปฏิบัติการแล้ว เราต้องการเรียกใช้การทดสอบโดยใช้ Python 3.7 และ Python 3.8 เท่านั้น
ขั้นตอนที่ 5: ยอมรับ python-package.yml ด้วยค่าที่อัปเดต
![](/wp-content/uploads/guides/iae5sr2a76-11.png)
ขั้นตอนที่ 6: การยืนยันในหน้าที่แล้วจะนำเราไปยัง GitActionsงาน
![](/wp-content/uploads/guides/iae5sr2a76-12.png)
ขั้นตอนที่ 7: [ไม่บังคับ]
ในหน้างาน Github สำหรับแอปสอนตัวอย่าง เราสามารถสร้างตราและวาง บนไฟล์ README.md เพื่อแสดงสถานะการสร้าง
ตอนนี้ เมื่อใดก็ตามที่การเปลี่ยนแปลงถูกยอมรับกับสาขาหลัก Git Workflow ตามที่เขียนใน python-package.yml จะถูกติดตามและทำงานบน Git Actions
บทสรุป
ในบทช่วยสอนนี้ เราได้ครอบคลุมแนวคิดพื้นฐานทั้งหมดตั้งแต่ข้อกำหนดเบื้องต้นไปจนถึงการตั้งค่าเวิร์กโฟลว์ CI/CD สำหรับเว็บแอปพลิเคชันที่พัฒนาโดยใช้ Flask – เฟรมเวิร์กการพัฒนาเว็บที่ใช้ Python
บทช่วยสอนนี้ครอบคลุมขั้นตอนที่จำเป็นทั้งหมด เช่น การติดตั้ง Python การดาวน์โหลด & ติดตั้ง Flask, ทำงานกับ Flask-Appbuilder, ทดสอบด้วย PyTest เป็นต้น เพื่อเริ่มต้นพัฒนาเว็บโดยใช้ Python ชุมชนการพัฒนาเว็บไซต์มักจะเปรียบเทียบ Flask กับเฟรมเวิร์กการพัฒนาเว็บ Python ยอดนิยมอีกตัวที่เรียกว่า Django
เราจะอธิบายความแตกต่างเหล่านี้ และจะเปรียบเทียบเฟรมเวิร์กเหล่านี้ในหนึ่งในบทช่วยสอนในซีรีส์นี้ด้วย