คำแนะนำแบบทีละขั้น

Python

ตัวอย่าง Python ใช้เฟรมเวิร์ก Flask คุณสามารถดาวน์โหลดซอร์สโค้ดฉบับสมบูรณ์ได้จากลิงก์ที่ให้ไว้

หากจำเป็น ให้ติดตั้ง Python 3.7 ขึ้นไป และตรวจสอบว่า pip พร้อมใช้งาน

python3 -m ensurepip --upgrade

นอกจากนี้ เราขอแนะนําให้คุณตั้งค่าและเปิดใช้งานสภาพแวดล้อมเสมือนของ Python ใหม่

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

จะมี requirements.txt ในไดเรกทอรีย่อยของคำแนะนำแบบทีละขั้นแต่ละรายการในตัวอย่างที่ดาวน์โหลด คุณสามารถติดตั้งไลบรารีที่จําเป็นได้อย่างรวดเร็วโดยใช้ pip ใช้คําสั่งต่อไปนี้เพื่อติดตั้งไลบรารีที่จําเป็นสําหรับการแนะนำครั้งแรก

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

ตัวอย่าง Node.js ใช้เฟรมเวิร์ก Express คุณสามารถดาวน์โหลดซอร์สโค้ดที่สมบูรณ์ได้จากลิงก์ที่ระบุ

ตัวอย่างนี้ต้องใช้ Node.js v16.13 ขึ้นไป

ติดตั้งโมดูลโหนดที่จําเป็นโดยใช้ npm

npm install

Java

ตัวอย่าง Java ใช้เฟรมเวิร์ก Spring Boot คุณสามารถดาวน์โหลดซอร์สโค้ดที่สมบูรณ์ได้จากลิงก์ที่ระบุ

ติดตั้ง Java 11 ขึ้นไป หากยังไม่ได้ติดตั้งในเครื่อง

แอปพลิเคชัน Spring Boot สามารถใช้ Gradle หรือ Maven เพื่อจัดการบิลด์และจัดการข้อกําหนด ตัวอย่างนี้ประกอบด้วย Maven Wrapper ที่ช่วยให้คุณสร้างโปรเจ็กต์ได้สําเร็จโดยไม่ต้องติดตั้ง Maven ด้วยตนเอง

ในไดเรกทอรีที่คุณดาวน์โหลดหรือโคลนโปรเจ็กต์ ให้เรียกใช้คำสั่งต่อไปนี้เพื่อให้แน่ใจว่าคุณมีคุณสมบัติตามข้อกําหนดเบื้องต้นในการใช้งานโปรเจ็กต์

java --version
./mvnw --version

หรือใน Windows ให้ทำดังนี้

java -version
mvnw.cmd --version

• รูทไดเรกทอรีมีไฟล์ต่อไปนี้

  • main.py - จุดแรกเข้าของแอปพลิเคชัน Python ระบุการกําหนดค่าเซิร์ฟเวอร์ที่ต้องการใช้ในไฟล์นี้ จากนั้นเรียกใช้เพื่อเริ่มเซิร์ฟเวอร์
  • requirements.txt - โมดูล Python ที่จําเป็นสําหรับเรียกใช้เว็บแอป ซึ่งสามารถติดตั้งโดยอัตโนมัติได้โดยใช้ pip install -r requirements.txt

  • client_secret.json - ไฟล์รหัสลับไคลเอ็นต์ที่ดาวน์โหลดจาก Google Cloud โปรดทราบว่าไฟล์นี้ไม่รวมอยู่ในไฟล์เก็บถาวรตัวอย่าง คุณควรเปลี่ยนชื่อและคัดลอกไฟล์ข้อมูลเข้าสู่ระบบที่ดาวน์โหลดมาไว้ในรูทไดเรกทอรีแต่ละรายการ

• config.py - ตัวเลือกการกําหนดค่าสําหรับเซิร์ฟเวอร์ Flask

• ไดเรกทอรี webapp มีเนื้อหาสําหรับเว็บแอปพลิเคชัน ซึ่งรวมถึงสิ่งต่างๆ ต่อไปนี้

• ไดเรกทอรี /templates/ ที่มีเทมเพลต Jinja สำหรับหน้าต่างๆ

• ไดเรกทอรี /static/ ที่มีรูปภาพ, CSS และไฟล์ JavaScript เสริม

• routes.py - เมธอดแฮนเดิลสำหรับเส้นทางของเว็บแอปพลิเคชัน

• __init__.py - ตัวเริ่มต้นสําหรับโมดูล webapp ตัวเริ่มต้นนี้จะเริ่มต้นเซิร์ฟเวอร์ Flask และโหลดตัวเลือกการกำหนดค่าที่ตั้งไว้ใน config.py

• ไฟล์เพิ่มเติมตามที่ขั้นตอนแนะนำระบุ

Node.js

แต่ละขั้นตอนของคำแนะนำจะอยู่ใน<step> โฟลเดอร์ย่อยของตัวเอง แต่ละขั้นตอนประกอบด้วย

• ไฟล์แบบคงที่ เช่น JavaScript, CSS และรูปภาพ จะอยู่ในโฟลเดอร์ ./<step>/public
• คุณจะพบเราเตอร์ Express ในโฟลเดอร์ ./<step>/routes
• เทมเพลต HTML จะอยู่ในโฟลเดอร์ ./<step>/views
• แอปพลิเคชันเซิร์ฟเวอร์คือ ./<step>/app.js

Java

ไดเรกทอรีโปรเจ็กต์ประกอบด้วยสิ่งต่อไปนี้

• ไดเรกทอรี src.main มีซอร์สโค้ดและการกำหนดค่าเพื่อเรียกใช้แอปพลิเคชัน ไดเรกทอรีนี้ประกอบด้วยสิ่งต่อไปนี้ + ไดเรกทอรี java.com.addons.spring มีไฟล์ Application.java และ Controller.java ไฟล์ Application.java มีหน้าที่รับผิดชอบในการใช้งานเซิร์ฟเวอร์แอปพลิเคชัน ขณะที่ไฟล์ Controller.java จะจัดการตรรกะเกี่ยวกับปลายทาง + ไดเรกทอรี resources มีไดเรกทอรี templates ที่มีไฟล์ HTML และ JavaScript รวมถึงมีไฟล์ application.properties ที่ระบุพอร์ตที่จะเรียกใช้เซิร์ฟเวอร์ เส้นทางไปยังไฟล์คีย์สโตร์ และเส้นทางไปยังไดเรกทอรี templates ตัวอย่างนี้รวมไฟล์คีย์สโตร์ในไดเรกทอรี resources คุณสามารถจัดเก็บไฟล์ไว้ที่ใดก็ได้ แต่อย่าลืมอัปเดตไฟล์ application.properties ด้วยเส้นทางดังกล่าว
  • pom.xml มีข้อมูลที่จำเป็นในการสร้างโปรเจ็กต์และกำหนดข้อกำหนดที่จำเป็น
  • .gitignore มีชื่อไฟล์ที่ไม่ควรอัปโหลดไปยัง Git ตรวจสอบว่าคุณได้เพิ่มเส้นทางไปยังคีย์สโตร์ใน .gitignore นี้แล้ว ในตัวอย่างนี้คือ secrets/*.p12 (เราจะพูดถึงวัตถุประสงค์ของคีย์สโตร์ในส่วนด้านล่าง) สำหรับบทแนะนำที่ 2 ขึ้นไป คุณควรระบุเส้นทางไปยังไฟล์ client_secret.json ด้วยเพื่อให้แน่ใจว่าไม่ได้รวมข้อมูลลับไว้ในที่เก็บข้อมูลระยะไกล สำหรับบทแนะนำที่ 3 ขึ้นไป คุณควรเพิ่มเส้นทางไปยังไฟล์ฐานข้อมูล H2 และ File DataStore Factory ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าที่เก็บข้อมูลเหล่านี้ได้ในบทแนะนำที่ 3 เกี่ยวกับการจัดการการเข้าชมซ้ำ
  • mvnw และ mvnw.cmd คือไฟล์ปฏิบัติการของ Maven Wrapper สำหรับ Unix และ Windows ตามลำดับ เช่น การรัน ./mvnw --version ใน Unix จะแสดงผลเวอร์ชัน Apache Maven และข้อมูลอื่นๆ
  • ไดเรกทอรี .mvn มีการกำหนดค่าสำหรับ Maven Wrapper

Python

ข้อมูลเข้าสู่ระบบ OAuth

สร้างและดาวน์โหลดข้อมูลเข้าสู่ระบบ OAuth ตามที่อธิบายไว้ก่อนหน้านี้ วางไฟล์ JSON ในไดเรกทอรีรูทข้างไฟล์เปิดใช้งานเซิร์ฟเวอร์ของแอปพลิเคชัน

กําหนดค่าเซิร์ฟเวอร์

คุณมีตัวเลือกหลายวิธีในการเรียกใช้เว็บเซิร์ฟเวอร์ เพิ่มรายการใดรายการหนึ่งต่อไปนี้ที่ส่วนท้ายของไฟล์ Python

1. localhost ที่ไม่ปลอดภัย โปรดทราบว่าวิธีนี้เหมาะสำหรับการทดสอบในหน้าต่างเบราว์เซอร์โดยตรงเท่านั้น ระบบจะโหลดโดเมนที่ไม่ปลอดภัยใน iframe ของส่วนเสริม Classroom ไม่ได้

   if __name__ == "__main__":
     # Disable OAuthlib's HTTPs verification.
     os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"
   
     # Run the web app at http://localhost:5000.
     app.run(debug=True)
   

2. รักษาความปลอดภัยให้กับ localhost คุณต้องระบุทูเปิลของไฟล์คีย์ SSL สำหรับอาร์กิวเมนต์ ssl_context

   if __name__ == "__main__":
     # Run the web app at https://localhost:5000.
     app.run(host="localhost",
             ssl_context=("localhost.pem", "localhost-key.pem"),
             debug=True)
   

3. เซิร์ฟเวอร์ Gunicorn ตัวเลือกนี้เหมาะสำหรับเซิร์ฟเวอร์หรือการใช้งานระบบคลาวด์ที่พร้อมใช้งานจริง เราขอแนะนำให้ตั้งค่าตัวแปรสภาพแวดล้อม PORT เพื่อใช้กับตัวเลือกการเริ่มนี้

   if __name__ == "__main__":
     # Run the web app at https://<your domain>:<server_port>.
     # Defaults to https://<your domain>:8080.
     server_port = os.environ.get("PORT", "8080")
     app.run(debug=True, port=server_port, host="0.0.0.0")
   

เปิดเซิร์ฟเวอร์

เรียกใช้แอปพลิเคชัน Python เพื่อเปิดเซิร์ฟเวอร์ตามที่กําหนดค่าไว้ในขั้นตอนก่อนหน้า

python main.py

คลิก URL ที่ปรากฏขึ้นเพื่อดูเว็บแอปในเบราว์เซอร์เพื่อยืนยันว่าเว็บแอปทํางานได้อย่างถูกต้อง

Node.js

กําหนดค่าเซิร์ฟเวอร์

หากต้องการเรียกใช้เซิร์ฟเวอร์ผ่าน HTTPS คุณจะต้องสร้างใบรับรองด้วยตนเองเพื่อใช้เรียกใช้แอปพลิเคชันผ่าน HTTPS คุณควรบันทึกข้อมูลเข้าสู่ระบบเหล่านี้เป็น sslcert/cert.pem และ sslcert/key.pem ในโฟลเดอร์รูทของที่เก็บ คุณอาจต้องเพิ่มคีย์เหล่านี้ลงในพวงกุญแจของ OS เพื่อให้เบราว์เซอร์ยอมรับ

ตรวจสอบว่า *.pem อยู่ในไฟล์ .gitignore เนื่องจากคุณไม่ต้องการคอมมิตไฟล์ไปยัง Git

เปิดเซิร์ฟเวอร์

คุณอาจเรียกใช้แอปพลิเคชันด้วยคําสั่งต่อไปนี้โดยแทนที่ step01 ด้วยขั้นตอนที่ถูกต้องที่คุณต้องการเรียกใช้เป็นเซิร์ฟเวอร์ (เช่น step01 สําหรับ 01-basic-app และ step02 สําหรับ 02-sign-in)

npm run step01

หรือ

npm run step02

ซึ่งจะเปิดเว็บเซิร์ฟเวอร์ที่ https://localhost:5000

คุณสิ้นสุดเซิร์ฟเวอร์ได้ด้วย Control + C ในเทอร์มินัล

Java

กําหนดค่าเซิร์ฟเวอร์

หากต้องการเรียกใช้เซิร์ฟเวอร์ผ่าน HTTPS คุณจะต้องสร้างใบรับรองด้วยตนเองเพื่อใช้เรียกใช้แอปพลิเคชันผ่าน HTTPS

ลองใช้ mkcert สําหรับการพัฒนาซอฟต์แวร์ภายใน เมื่อติดตั้ง mkcert แล้ว คำสั่งต่อไปนี้จะสร้างใบรับรองที่เก็บไว้ในเครื่องเพื่อเรียกใช้ผ่าน HTTPS

mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>

ตัวอย่างนี้รวมไฟล์คีย์สโตร์ไว้ในไดเรกทอรีทรัพยากร คุณสามารถจัดเก็บไฟล์ไว้ที่ใดก็ได้ แต่อย่าลืมอัปเดตไฟล์ application.properties ด้วยเส้นทางดังกล่าว ชื่อโดเมนคือโดเมนที่คุณใช้เรียกใช้โปรเจ็กต์ (เช่น localhost)

ตรวจสอบว่า *.p12 อยู่ในไฟล์ .gitignore เนื่องจากคุณไม่ต้องการคอมมิตไฟล์ไปยัง Git

เปิดเซิร์ฟเวอร์

เรียกใช้เซิร์ฟเวอร์โดยเรียกใช้เมธอด main ในไฟล์ Application.java ตัวอย่างเช่น ใน IntelliJ คุณสามารถคลิกขวาไปที่ Application.java > Run 'Application' ในไดเรกทอรี src/main/java/com/addons/spring หรือเปิดไฟล์ Application.java เพื่อคลิกลูกศรสีเขียวทางด้านซ้ายของลายเซ็นเมธอด main(String[] args) หรือจะเรียกใช้โปรเจ็กต์ในหน้าต่างเทอร์มินัลก็ได้ โดยทำดังนี้

./mvnw spring-boot:run

หรือใน Windows ให้ทำดังนี้

mvnw.cmd spring-boot:run

ซึ่งจะเปิดเซิร์ฟเวอร์ที่ https://localhost:5000 หรือที่พอร์ตที่คุณระบุใน application.properties