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

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 เพื่อจัดการสร้างและจัดการได้ ทรัพยากร Dependency ตัวอย่างนี้มี Wrapper ของ Maven ที่ช่วยให้ สร้างได้สำเร็จโดยที่คุณไม่ต้องติดตั้ง 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 มีข้อมูลที่จำเป็นในการสร้างโปรเจ็กต์และ กำหนดทรัพยากร Dependency ที่จำเป็น
  • .gitignore มีชื่อไฟล์ที่ไม่ควรอัปโหลดไปยัง Git ตรวจสอบว่าคุณเพิ่มเส้นทางไปยังคีย์สโตร์ใน .gitignore นี้ ในตัวอย่างที่ระบุ นี่คือ secrets/*.p12 (วัตถุประสงค์ของ คีย์สโตร์จะมีการอธิบายในหัวข้อด้านล่าง) สำหรับคำแนะนำแบบทีละขั้น 2 และ นอกเหนือจากนั้น คุณยังควรระบุเส้นทางสู่ client_secret.json เพื่อให้แน่ใจว่าคุณไม่ได้ระบุ ข้อมูลลับในที่เก็บระยะไกล สำหรับคำแนะนำแบบทีละขั้น 3 ขึ้นไป คุณ ควรเพิ่มเส้นทางไปยังไฟล์ฐานข้อมูล H2 และพื้นที่เก็บข้อมูลไฟล์ โรงงาน ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าพื้นที่เก็บข้อมูลเหล่านี้ได้ คำแนะนำแบบทีละขั้นที่ 3 เกี่ยวกับการจัดการการเข้าชมซ้ำ
  • mvnw และ mvnw.cmd เป็นไฟล์ปฏิบัติการ Wrapper ของ Maven สำหรับ 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 คุณต้องระบุ Tuple ของไฟล์คีย์ 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