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

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

Python

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

  • 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 และโรงงานที่เก็บข้อมูลไฟล์ ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าที่เก็บข้อมูลเหล่านี้ได้ใน คำแนะนำแบบทีละขั้นตอนที่ 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 ในโฟลเดอร์รูทของที่เก็บ คุณอาจต้องเพิ่มคีย์เหล่านี้ลงในพวงกุญแจของระบบปฏิบัติการเพื่อให้เบราว์เซอร์ยอมรับคีย์

ตรวจสอบว่า *.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