ข้อมูลเบื้องต้นเกี่ยวกับการทดสอบด้วย Gemini Code Assist

1. บทนำ

ในแล็บนี้ คุณจะได้ใช้ Gemini Code Assist ซึ่งเป็นผู้ทำงานร่วมกันที่ทำงานด้วยระบบ AI ใน Google Cloud เพื่อเพิ่มการทดสอบลงในเว็บแอปพลิเคชัน Python ที่มีอยู่ รวมถึงค้นหาและแก้ไขข้อผิดพลาดในแอปพลิเคชันนั้นที่การทดสอบแสดงให้เห็น จากนั้นคุณจะใช้ตัวช่วยเขียนโค้ดเพื่อสร้างการทดสอบฟังก์ชันการทำงานใหม่และสร้างโค้ดเพื่อให้ผ่านการทดสอบเหล่านั้นและขยายแอป

สิ่งที่คุณต้องทำ...

  • คุณจะใช้ Cloud Shell Editor เพื่อดาวน์โหลดโค้ดสำหรับเว็บแอปพลิเคชันที่มีอยู่
  • คุณจะใช้แชท Gemini Code Assist ใน Cloud Shell Editor เพื่อถามคำถามทั่วไปเกี่ยวกับ Google Cloud
  • คุณจะใช้ความช่วยเหลือด้านโค้ดในบรรทัดของ Gemini Code Assist ใน Cloud Shell Editor เพื่อสร้างการทดสอบสำหรับแอปพลิเคชัน รันการทดสอบ ค้นหาและแก้ไขข้อผิดพลาด แล้วจึงขยายฟังก์ชันการทำงานของแอปพลิเคชัน

สิ่งที่คุณจะได้เรียนรู้...

  • วิธีใช้ Gemini Code Assist สำหรับงานของนักพัฒนาแอปหลายอย่าง เช่น การสร้างการทดสอบและการสร้างโค้ด
  • วิธีใช้ Gemini Code Assist เพื่อดูข้อมูลเกี่ยวกับ Google Cloud

สิ่งที่คุณต้องมี...

  • เว็บเบราว์เซอร์ Chrome
  • บัญชี Gmail
  • โปรเจ็กต์ Cloud ที่เปิดใช้การเรียกเก็บเงิน
  • เปิดใช้ Gemini Code Assist สำหรับโปรเจ็กต์ Cloud

แล็บนี้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ทุกระดับ รวมถึงผู้เริ่มต้น แม้ว่าแอปพลิเคชันตัวอย่างจะอยู่ในภาษา Python แต่คุณไม่จำเป็นต้องคุ้นเคยกับการเขียนโปรแกรม Python เพื่อทำความเข้าใจสิ่งที่เกิดขึ้น เราจะมุ่งเน้นไปที่การทำความคุ้นเคยกับความสามารถของ Gemini Code Assist สำหรับนักพัฒนาซอฟต์แวร์

2. ตั้งค่า

คุณควรมีโปรเจ็กต์ Cloud ที่เปิดใช้การเรียกเก็บเงินแล้วเพื่อใช้ในแล็บนี้ ตอนนี้เราจะเปิดใช้ Gemini API ในโปรเจ็กต์ Google Cloud ทำตามขั้นตอนด้านล่าง

  1. ไปที่ https://console.cloud.google.com และตรวจสอบว่าคุณได้เลือกโปรเจ็กต์ Google Cloud ที่วางแผนจะใช้ในแล็บนี้ คลิกไอคอน Gemini ที่คุณเห็นที่ด้านขวาบน

GeminiBanner.png

  1. หน้าต่างคอนโซล Gemini สำหรับ Cloud จะเปิดขึ้นทางด้านขวาของคอนโซล คลิกปุ่มเปิดใช้หากแสดงอยู่ด้านล่าง หากไม่เห็นปุ่มเปิดใช้ แต่เห็นอินเทอร์เฟซของ Chat แสดงว่าคุณได้เปิดใช้ Gemini สำหรับ Cloud สำหรับโปรเจ็กต์แล้ว และไปที่ขั้นตอนถัดไปได้โดยตรง

GeminiApiEnable.png

  1. เมื่อเปิดใช้แล้ว คุณสามารถทดลองใช้ Gemini ได้โดยการถามคำค้นหา 1-2 รายการ ระบบจะแสดงตัวอย่างคำค้นหา 2-3 รายการ แต่คุณลองค้นหาคำว่าCloud Run คืออะไรก็ได้

GeminiChatWindow.png

Code Assist จะตอบคำถามของคุณ คุณคลิกไอคอน f68286b2b2ea5c0a.png ที่มุมขวาบนเพื่อปิดหน้าต่างแชทของ Code Assist ได้

เปิดใช้ Gemini ใน Cloud Shell Editor

Gemini Code Assist พร้อมให้บริการและทำงานในลักษณะเดียวกันใน IDE ยอดนิยมหลายรายการ คุณจะได้ใช้ Google Cloud Shell Editor ซึ่งทำงานในเว็บเบราว์เซอร์อย่างสมบูรณ์ใน Codelab นี้ คุณต้องเปิดใช้และกำหนดค่า Gemini ใน Cloud Shell Editor โดยทำตามขั้นตอนด้านล่าง

  1. เปิดใช้ Cloud Shell ผ่านไอคอนที่แสดงด้านล่าง การเริ่มต้นอินสแตนซ์ Cloud Shell อาจใช้เวลา 1-2 นาที

72dc3df7b007fcde.png

  1. คลิกปุ่มเอดิเตอร์หรือเปิดเอดิเตอร์ (ตามกรณี) แล้วรอจนกว่า Cloud Shell Editor จะปรากฏขึ้น หากเห็นปุ่มลองใช้เครื่องมือแก้ไขใหม่ ให้คลิกปุ่มนั้น

CloudShellEditor.png

  1. คลิกปุ่ม Cloud Code - ลงชื่อเข้าใช้ ในแถบสถานะด้านล่างตามที่แสดง ให้สิทธิ์ปลั๊กอินตามวิธีการ หากเห็น "Cloud Code - ไม่มีโปรเจ็กต์" ในแถบสถานะ ให้เลือกข้อความดังกล่าว แล้วเลือกโปรเจ็กต์ Google Cloud ที่ต้องการจากรายการโปรเจ็กต์ที่คุณวางแผนจะใช้

CloudCodeSignIn.png

  1. หากไม่เห็นไอคอน Gemini ในแถบสถานะที่ด้านล่างขวา คุณจะต้องเปิดใช้ใน Cloud Code ก่อนดำเนินการดังกล่าว โปรดตรวจสอบว่าได้เปิดใช้ Gemini (เดิมชื่อ Duet AI สำหรับนักพัฒนาซอฟต์แวร์) ใน IDE โดยไปที่ส่วนขยาย Cloud Code → การตั้งค่า แล้วป้อนข้อความ Duet AI: เปิดใช้ ดังที่แสดงด้านล่าง ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายแล้ว คุณควรโหลด IDE ซ้ำ ซึ่งจะเปิดใช้ Gemini ใน Cloud Code และแถบสถานะ Gemini จะปรากฏใน IDE

EnableDuetAiSetting.png

  1. คลิกปุ่ม Gemini ที่มุมขวาล่างตามที่แสดง แล้วเลือกโปรเจ็กต์ Google Cloud ที่ถูกต้องซึ่งเราได้เปิดใช้ Cloud AI Companion API

GeminiSelectGoogleCloudProject.png

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

GeminiEnabledStatusBar.png

Gemini Code Assist พร้อมใช้งานแล้ว

3. ดาวน์โหลดและตรวจสอบแอปพลิเคชัน

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

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

เปิด main.py ในโปรแกรมแก้ไข แล้วเปิดหน้าต่าง Gemini Chat โดยคลิกไอคอน Gemini Chat ทางด้านซ้ายของโปรแกรมแก้ไข หน้าต่าง Gemini Chat นี้อยู่ภายใน IDE และมีโค้ดใน IDE พร้อมใช้งานเป็นบริบทสำหรับการสนทนา ป้อนพรอมต์อธิบายสิ่งนี้ แล้วดูคำตอบ

GeminiChatExplainThis.png

คุณเลื่อนหน้าต่างแชทนี้เพื่อดูคำตอบทั้งหมดได้ คำอธิบายระบุว่าเราสามารถเรียกใช้โปรแกรมนี้ในเครื่องได้ด้วยคำสั่ง python3 main.py ในหน้าต่างเทอร์มินัล

4. เรียกใช้ในเครื่อง

เปลี่ยนเป็นไดเรกทอรีที่เก็บด้วย cd ~/testing-with-duet-ai-codelab หากจำเป็น แล้วป้อนคำสั่ง python3 main.py ในหน้าต่างเทอร์มินัล

3bf558e9cea15375.png

คลิกลิงก์ http://127.0.0.1:8080 เพื่อเปิดแท็บเบราว์เซอร์ใหม่ไปยังหน้าแรกของแอปพลิเคชัน

fb06f382a4c03e4c.png

แอปพลิเคชันทำงาน "ในเครื่อง" จริงๆ แล้ว Cloud Shell Editor ได้ทำสิ่งมหัศจรรย์เล็กๆ น้อยๆ ไว้ที่นี่ แอปพลิเคชันทำงานใน Cloud Shell ไม่ใช่ในคอมพิวเตอร์ของคุณ เมื่อคุณคลิกลิงก์ ระบบจะเปิดแท็บไปยังเซิร์ฟเวอร์พร็อกซีที่ Cloud Shell ตั้งค่าไว้เพื่อจุดประสงค์นี้โดยเฉพาะ ไม่ใช่ที่อยู่จริงในเครื่อง http://127.0.0.1:8080 ซึ่งให้ผลเช่นเดียวกับการเรียกใช้ในเครื่องจริงๆ

ลองใช้เลย ป้อน 25 แล้วกดแปลง

e1b9d5832f6d0058.png

ถูกต้อง 25 คือ XXV ในเลขโรมัน คุณต้องดำเนินการที่นี่ให้เสร็จ

ลองตรวจสอบหมายเลขอื่นๆ เพิ่มเติม 25 ใช้ได้ แล้ว 24 ล่ะ

37982e385e17baac.png

บางทีเราอาจรีบสรุปว่าทุกอย่างเรียบร้อยดี XXIIII เป็นการแปลง 24 ที่ถูกต้องใช่ไหม ควรจะเป็น XXIV ไม่ใช่เหรอ

อาจมีกรณีที่ XXIIII ถูกต้อง แต่โดยปกติแล้วผู้คนมักไม่คาดหวังให้เป็นเช่นนั้น แต่เนื่องจากเวลาที่แสดงนั้นไม่ได้ผิดจริงๆ (โปรดทราบว่านาฬิกาหลายเรือนแสดงเลข 4 เป็นเลขโรมัน IIII) เราจึงจะเก็บปัญหานี้ไว้สำหรับการปรับปรุงในอนาคต

ลองใช้ตัวเลขติดลบไหม ศูนย์ คุณไม่สามารถแสดงตัวเลขเหล่านั้นในเลขโรมันได้ ไม่มีสิ่งใดปรากฏกลับมาให้ผู้ใช้ ซึ่งดูเหมือนจะเป็นข้อผิดพลาดที่ต้องแก้ไข

การทดสอบช่วยค้นหาและกำจัดข้อผิดพลาดได้ และ Gemini Code Assist ก็ช่วยเราเขียนและใช้การทดสอบได้

5. การเพิ่มการทดสอบ

กลับไปที่หน้าต่าง Gemini Chat แล้วถามว่า

How can I test the number_to_roman function?

อ่านคำตอบซึ่งควรรวมถึงการอภิปรายโมดูล unittest และโมดูล pytest

คุณอาจต้องการให้ Gemini Code Assist เขียนการทดสอบเหล่านี้ให้คุณ เปิด calendar.py ซึ่งเป็นที่อยู่ของโค้ดการแปลงจริงในโปรแกรมแก้ไข กลับไปที่หน้าต่าง Gemini Chat แล้วถามอีกครั้งว่า

How can I test the number_to_roman function?

ตอนนี้คำตอบมีความเฉพาะเจาะจงมากขึ้น โดยรวมถึงโมดูล unittest ที่คุณสามารถคัดลอกหรือแทรกลงในไฟล์ใหม่ได้

import unittest
import calendar

class NumberToRomanTest(unittest.TestCase):

    def test_convert_1(self):
        self.assertEqual(calendar.number_to_roman(1), "I")

    def test_convert_4(self):
        self.assertEqual(calendar.number_to_roman(4), "IV")

    def test_convert_9(self):
        self.assertEqual(calendar.number_to_roman(9), "IX")

    def test_convert_40(self):
        self.assertEqual(calendar.number_to_roman(40), "XL")

    def test_convert_90(self):
        self.assertEqual(calendar.number_to_roman(90), "XC")

    def test_convert_400(self):
        self.assertEqual(calendar.number_to_roman(400), "CD")

    def test_convert_900(self):
        self.assertEqual(calendar.number_to_roman(900), "CM")

    def test_convert_1990(self):
        self.assertEqual(calendar.number_to_roman(1990), "MCMXC")

    def test_convert_2023(self):
        self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")

คุณอาจเห็นโค้ดที่แตกต่างจากตัวอย่างด้านบน เราจะอัปเดตโมเดลพื้นฐานของ Gemini Code Assist เป็นครั้งคราว คำตอบจึงอาจไม่เหมือนกันเสมอไป หากเห็นชุดโค้ดที่แตกต่างออกไป คุณสามารถเลือกได้ว่าจะใช้ตัวอย่างที่แสดงในโค้ดแล็บนี้ต่อโดยการคัดลอกโค้ดที่แสดงที่นี่ หรือจะลองใช้คำตอบสำรองที่ Gemini Code Assist แสดงให้คุณตอนนี้ก็ได้ หากมีเวลา คุณอาจลองทั้ง 2 เส้นทางก็ได้ Gemini Code Assist เป็นผู้ช่วยเขียนโค้ดให้คุณใช้ตามที่เห็นสมควร

คลิกลูกศรสองหัวที่มุมขวาบนของหน้าต่าง Gemini Chat เพื่อสร้างไฟล์ใหม่ที่มีโค้ดการทดสอบหน่วย หรือใช้ IDE เพื่อสร้างไฟล์ใหม่และวางโค้ดที่แสดงในแล็บนี้ กด CTRL-S หรือ CMD-S ในหน้าต่างนั้นเพื่อบันทึก และตั้งชื่อไฟล์ที่บันทึกเป็น calendar-unittest.py

กลับไปที่เทอร์มินัลแล้วกด CTRL-C เพื่อหยุดเว็บเซิร์ฟเวอร์ที่คุณปล่อยให้ทำงานไว้ก่อนหน้านี้ และรับพรอมต์เชลล์ ป้อนคำสั่ง

python3 calendar-unittest.py

เพื่อทำการทดสอบใหม่

ไม่มีเอาต์พุต ซึ่งไม่เป็นไปตามที่คาดไว้ ทุกอย่างผ่านไปอย่างเงียบๆ ไหม คุณคงอยากทราบเรื่องนี้อย่างแน่นอน ย้อนกลับไปดูคำตอบจาก Gemini Code Assist ที่มีโค้ดทดสอบ ด้านล่างโค้ดมีข้อมูลเพิ่มเติมเกี่ยวกับวิธีเรียกใช้กรณีทดสอบ

run-unittest.png

ลองเรียกใช้คำสั่งที่แนะนำ

python -m unittest discover

คุณอาจพบปัญหาหากเครื่องไม่ได้ใช้นามแฝงคำสั่ง python3 เป็น python ในกรณีนี้ ให้เรียกใช้คำสั่งต่อไปนี้

python3 -m unittest discover

คำสั่งทำงาน แต่แสดงผลเป็น Ran 0 tests in 0.000s โมดูลนี้มีการทดสอบหลายอย่าง บอกว่าคุณกำลังคิดอะไรอยู่

นั่นคือคำสุดท้ายในคำสั่ง discover มาจากไหน เห็นได้ชัดว่า Gemini Code Assist คาดหวังให้บันทึกโค้ดทดสอบในไฟล์ชื่อ discover หรือ discover.py แต่ไม่ได้ระบุว่าคุณควรทำเช่นนั้น เนื่องจากคุณบันทึกไฟล์ใน calendar-unittest.py จริงๆ ให้ลองเรียกใช้คำสั่งต่อไปนี้

python3 -m unittest calendar-unittest

ตอนนี้คุณจะเห็นเอาต์พุตจำนวนมาก โดยเริ่มต้นด้วยข้อความต่อไปนี้

$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
    self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC

บรรทัดแรกจะแสดงระยะเวลาของการทดสอบที่ผ่านแต่ละรายการ และ F สำหรับการทดสอบที่ไม่ผ่านแต่ละรายการ การทดสอบส่วนใหญ่ไม่ผ่าน จากนั้นจะแสดงรายการการทดสอบที่ไม่ผ่านทีละรายการ โดยแสดงเอาต์พุตที่คาดไว้และเอาต์พุตจริง เราไม่แน่ใจว่าการทดสอบเหล่านี้ดำเนินการตามลำดับใด โดยเรียงตามลำดับตัวอักษรตามชื่อการทดสอบ ไม่ใช่ลำดับที่การทดสอบปรากฏในไฟล์ ดังนั้น test_convert_1 จึงทำงานก่อน ตามด้วย test_convert_1990 แล้วจึงเป็น test_convert_2023 และอื่นๆ มีเพียงกรณีทดสอบสำหรับ 1 และ 2023 เท่านั้นที่ผ่าน

เมื่อลองใช้โค้ดนี้เป็นครั้งแรก คุณจะเห็นว่าโค้ดแปลง 24 เป็น XXIIII ซึ่งก็ไม่ได้ผิดเสียทีเดียว แต่ไม่ใช่รูปแบบทั่วไปที่แปลง IIII เป็น IV การทดสอบที่ไม่ผ่านทั้งหมดเป็นกรณีที่คล้ายกัน เมื่อทราบปัญหานี้ครั้งแรก ทีมทดลองกล่าวว่า "เนื่องจากไม่ได้ผิดจริงๆ (โปรดทราบว่านาฬิกาหลายเรือนแสดง 4 เป็นเลขโรมัน IIII) เราจะเก็บปัญหานี้ไว้สำหรับการปรับปรุงในอนาคต"

คุณสามารถเปลี่ยนกรณีทดสอบเพื่อคาดหวังและยอมรับคำตอบที่ "ไม่ผิด" จริงๆ ที่โค้ดให้ หรือยอมรับว่าถึงเวลาสำหรับ "การปรับปรุงในอนาคต" แล้ว ดังนั้นขั้นตอนถัดไปคือการแก้ไขโค้ดด้วยความช่วยเหลือจาก Gemini Code Assist เพื่อให้ได้คำตอบที่ยอมรับได้มากขึ้นตามที่การทดสอบคาดหวัง

6. การปรับปรุงโค้ด

โปรดทราบว่าคำตอบอย่าง XXIIII สำหรับ 24 แทนที่จะเป็น XXIV ซึ่งพบได้บ่อยกว่า ถือว่า "ไม่ผิดจริงๆ" และถูกเลื่อนไปเพื่อการปรับปรุงในอนาคต อนาคตนั้นมาถึงแล้ว คำตอบที่ "ไม่ผิดนัก" เหล่านั้นก็ยังน่ารำคาญอยู่ดี

กฎข้อแรกสำหรับตัวเลขที่ซ้ำกันในเลขโรมันคือ เมื่อใดก็ตามที่คุณมีตัวเลขที่เหมือนกัน 4 ตัวเรียงกัน คุณควรแทนที่ด้วยตัวเลขตัวใดตัวหนึ่งตามด้วยตัวเลขที่สูงขึ้นถัดไป ดังนั้น XXIIII จึงควรแทนที่ด้วย XXIV ในทำนองเดียวกัน XXXX ควรเปลี่ยนเป็น XL และ CCCC ควรเปลี่ยนเป็น CD

ถาม Gemini Code Assist ว่าจะเปลี่ยนค่าของตัวแปร roman ในลักษณะนี้ได้อย่างไรก่อนที่ฟังก์ชัน number_to_roman จะแสดงผล

If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?

คำแนะนำคือให้เพิ่มโค้ดบางส่วนที่ท้ายโค้ด

6437c3fa2c5fabd1.png

คัดลอก/วางหรือพิมพ์บรรทัดเหล่านั้นในเครื่องมือแก้ไข แล้วดูผลลัพธ์ที่เกิดขึ้น

dcefa568cab82fb7.png

Gemini Code Assist ได้เพิ่มบรรทัดเพิ่มเติมเพื่อจัดการกรณีที่คุณอาจพบหลังจากทำการแทนที่ชุดแรก เช่น 19 จะแปลงเป็น XVIIII แล้วเป็น XVIV และสุดท้ายเป็น XIX ที่ถูกต้อง

หาก Gemini Code Assist ให้คำแนะนำที่ดูเหมือนว่าจะเป็นประโยชน์ ให้กด Tab เพื่อยอมรับคำแนะนำ บันทึกไฟล์ และเรียกใช้เว็บเซิร์ฟเวอร์อีกครั้ง หรือเพิ่มบรรทัดที่แสดงในตัวอย่างที่นี่ด้วยตนเอง แล้วบันทึกไฟล์ ลองใช้การแปลงที่ยาก: 1999:

a206999587fdc9.png

ถูกต้อง

เรียกใช้การทดสอบอีกครั้งตอนนี้ ทุกรายการผ่าน

ดูเหมือนว่าเว็บแอปพลิเคชันพร้อมที่จะนำไปใช้งานจริงแล้ว

7. ทำให้ใช้งานได้กับ Cloud Run

Cloud Run จะเรียกใช้แอปพลิเคชันที่สร้างโดยใช้คอนเทนเนอร์บนอินเทอร์เน็ตให้คุณ สำหรับแอปพลิเคชันที่เขียนโดยใช้เฟรมเวิร์กทั่วไป เช่น Flash คำสั่ง gcloud run deploy จะสร้างคอนเทนเนอร์ให้คุณก่อนที่จะนำไปใช้งานด้วย เรียกใช้คำสั่งต่อไปนี้

gcloud run deploy

ในเทอร์มินัล เมื่อระบบถามถึงตำแหน่งของซอร์สโค้ด ให้กด Enter เพื่อยอมรับตำแหน่งที่ถูกต้องที่ระบบแนะนำ ในทำนองเดียวกัน เมื่อระบบขอชื่อบริการ ให้กด Enter เพื่อยอมรับคำแนะนำ

คำสั่งอาจไม่สำเร็จเนื่องจาก gcloud ไม่สามารถระบุโปรเจ็กต์ที่จะใช้ได้ ในกรณีนี้ ให้เรียกใช้คำสั่งต่อไปนี้

gcloud config set core/project <project-id>

โดยแทนที่ ด้วยรหัสของโปรเจ็กต์ ซึ่งอาจเหมือนกับชื่อของโปรเจ็กต์ จากนั้นเรียกใช้คำสั่ง gcloud run deploy อีกครั้ง

  • คำสั่งจะแจ้งให้คุณทราบว่าต้องใช้ API บางอย่างและยังไม่ได้เปิดใช้ ป้อน y เพื่อให้เราเปิดใช้ให้คุณ
  • เมื่อระบบขอให้เลือกภูมิภาค ให้เลือกภูมิภาคที่สะดวกสำหรับคุณ การป้อนหมายเลขที่ตรงกับ us-central1 เป็นตัวเลือกที่ปลอดภัย
  • เมื่อระบบถาม ให้ป้อน Y เพื่อดำเนินการต่อ
  • คุณจะต้องอนุญาตการเรียกใช้บริการ Cloud Run นี้ที่ไม่ผ่านการตรวจสอบสิทธิ์ ตัวเลือกการตรวจสอบสิทธิ์ที่ Cloud Run ใช้เหมาะสำหรับโปรแกรมที่เรียกใช้บริการ เนื่องจากเป็นเว็บไซต์ คุณจึงไม่ต้องใช้การตรวจสอบสิทธิ์

Google Cloud จะสร้างคอนเทนเนอร์ ทำให้ใช้งานได้ กำหนดเส้นทางการรับส่งข้อมูลไปยังคอนเทนเนอร์ และตั้งค่านโยบายการเข้าถึง จากนั้นจะแสดงลิงก์ไปยังหน้าแรก

94ba7d8d63a44afd.png

คุณสามารถไปที่ลิงก์ดังกล่าวและเข้าถึงแอปพลิเคชันได้

a2e51666dfd33a9f.png

ป้อนตัวเลขแล้วกด Enter เพียงเท่านี้ก็เสร็จเรียบร้อย

5021535ac991a95c.png

อะไรนะ

ใช้ได้ในเครื่องของคุณ ทำไมถึงยังไม่เสร็จ

ดูข้อมูล ขอความช่วยเหลือจาก Gemini Code Assist

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png

เห็นได้ชัดว่า Gemini Code Assist อ่านไฟล์บันทึกได้ ซึ่งมีข้อความคล้ายกัน มาขอให้ Gemini Code Assist บอกวิธีดูบันทึกด้วยตัวเองกัน

92d1855be73ef1d.png

ในกรณีดังกล่าวให้ดำเนินการสร้างคีย์ตามที่ระบบแจ้ง มองหาบรรทัดที่มีเครื่องหมาย !! สีแดงซึ่งบ่งบอกถึงข้อผิดพลาด ดังนี้

9bed4f9ed82de21c.png

จากนั้นจะมีรายละเอียดหลายบรรทัดเกี่ยวกับสแต็กการเรียกใช้ที่มาถึงจุดนี้ แต่ก็มีสิ่งนี้

47fc93be845f4e3f.png

เมื่อดูไฟล์ calendar.py คุณจะเห็นฟังก์ชัน number_to_roman อยู่ตรงนั้น และคุณรู้ว่ามันถูกต้องเพราะมันทำงานบนเครื่องของคุณ Cloud Run มีอะไรที่แตกต่างออกไปบ้าง

คำตอบนั้นซับซ้อน Python3 มีโมดูลมาตรฐานชื่อ calendar เช่นเดียวกับไฟล์ calendar.py ที่กำหนดฟังก์ชัน number_to_roman ในเครื่องของคุณ เมื่อ Python ค้นหาโมดูลที่ชื่อ calendar Python จะค้นหาไดเรกทอรีแอปพลิเคชันก่อน เห็นได้ชัดว่า Python ใน Cloud Run จะมองหาโมดูลมาตรฐานก่อน จากนั้นจึงนำเข้าและไม่พบฟังก์ชัน number_to_roman

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

แก้ไขปัญหานี้ คุณต้องเปลี่ยนชื่อโมดูลปฏิทินในเครื่องเป็นชื่ออื่นที่ไม่ใช่ชื่อโมดูลมาตรฐาน เปลี่ยนชื่อไฟล์ calendar.py เป็น my_calendar.py จากนั้นเปลี่ยนบรรทัด import calendar ใน main.py และ calendar-unittest.py เป็น import my_calendar สุดท้าย ให้เปลี่ยนบรรทัด

roman = calendar.number_to_roman(number)

ถึง

roman = my_calendar.number_to_roman(number)

ลองใช้ในเครื่อง เรียกใช้การทดสอบ แล้วจึงนำไปใช้งานอีกครั้ง

gcloud run deploy

ตอนนี้คุณทำได้แล้วโดยทำดังนี้

ed288801c6825eb1.png

คุณแชร์ URL นี้ได้ และทุกคนที่ต้องการเครื่องมือแปลงเลขโรมันจะใช้ URL ของคุณได้

8. ไม่บังคับ: ทำให้ดูดีขึ้น

แอปพลิเคชันของคุณทำงานได้ดีและทุกคนบนเว็บเข้าถึงได้ แต่ดูเรียบๆ ไปหน่อย ก่อนที่จะบอกทุกคน ลองขอให้ Gemini Code Assist ปรับปรุงลักษณะที่ปรากฏของโค้ดดูไหม

เปิดไฟล์ templates/index.html ในหน้าต่างแชทของ Gemini ให้ถามว่า

Make this index.html file use material design.

การตอบกลับคือการเพิ่มเนื้อหาลงในไฟล์ปัจจุบัน ซึ่งจะทำให้ได้ผลลัพธ์ที่คล้ายกับตัวอย่างต่อไปนี้

<!DOCTYPE html>
<html>
<head>
    <title>Roman Numerals</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">   
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>     
</head>
<body>
    <h1 class="mdl-typography--title">Roman Numerals</h1>
    <form action="/convert" method="post">
        <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="number" name="number" required />
            <label class="mdl-textfield__label" for="number">Enter a number:</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
            Convert!
          </button>
    </form>
</body>
</html>

ใช้ไอคอนเพื่อคัดลอกโค้ดที่แนะนำและวางทับเนื้อหาที่มีอยู่ใน index.html ในเทอร์มินัล ให้เรียกใช้ python3 main.py แล้วคลิกลิงก์เพื่อเปิดหน้าต่างแสดงตัวอย่าง ตอนนี้หน้าเว็บดูดีขึ้นเล็กน้อย

295643ec03fcaafc.png

คุณทำซ้ำขั้นตอนนี้กับไฟล์ convert.html ได้หากต้องการ

Gemini Code Assist รู้จัก CSS เป็นอย่างดี และคุณสามารถใช้ให้ช่วยจัดรูปแบบหน้าแอปพลิเคชันได้หลากหลายวิธี นี่เป็นเพียงจุดเริ่มต้น

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

gcloud run deploy

คุณสามารถส่งต่อ URL ให้กับผู้ที่ต้องการแปลงเป็นเลขโรมันได้

9. ยินดีด้วย

ขอแสดงความยินดี คุณใช้ Gemini Code Assist เพื่อเพิ่มการทดสอบลงในแอปพลิเคชัน แก้ไขข้อผิดพลาด และเพิ่มฟังก์ชันการทำงานที่ดียิ่งขึ้นได้สำเร็จ

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

เอกสารอ้างอิง...