GitHub - การทำงานอัตโนมัติในการตรวจสอบโค้ดด้วย GenAI

1. ภาพรวม

ในบทแนะนำนี้ คุณจะต้องตั้งค่าเวิร์กโฟลว์การดำเนินการของ GitHub และผสานรวมกับ Gemini เพื่อทำให้ขั้นตอนการตรวจสอบโค้ดเป็นแบบอัตโนมัติ

2bab73f63b927f93.png

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

ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีดำเนินการต่อไปนี้

  • วิธีเพิ่มขั้นตอนการทำงานอัตโนมัติในการตรวจสอบโค้ด GenAI ใน GitHub
  • วิธีเรียกใช้ CLI ของ devai ในเครื่องเพื่อทำให้การตรวจสอบโค้ดเป็นแบบอัตโนมัติ

ข้อกำหนดเบื้องต้น

  • แล็บนี้ถือว่าคุณคุ้นเคยกับสภาพแวดล้อม Cloud Console และ Cloud Shell

2. การตั้งค่าและข้อกําหนด

การตั้งค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์

  1. ลงชื่อเข้าใช้ Google Cloud Console แล้วสร้างโปรเจ็กต์ใหม่หรือใช้โปรเจ็กต์ที่มีอยู่ซ้ำ หากยังไม่มีบัญชี Gmail หรือ Google Workspace คุณต้องสร้างบัญชี

fbef9caa1602edd0.png

a99b7ace416376c4.png

5e3ff691252acf41.png

  • ชื่อโปรเจ็กต์คือชื่อที่แสดงสำหรับผู้เข้าร่วมโปรเจ็กต์นี้ ซึ่งเป็นสตริงอักขระที่ Google APIs ไม่ได้ใช้ คุณจะอัปเดตได้ทุกเมื่อ
  • รหัสโปรเจ็กต์จะซ้ำกันไม่ได้ในโปรเจ็กต์ Google Cloud ทั้งหมดและจะเปลี่ยนแปลงไม่ได้ (เปลี่ยนแปลงไม่ได้หลังจากตั้งค่าแล้ว) คอนโซล Cloud จะสร้างสตริงที่ไม่ซ้ำกันโดยอัตโนมัติ ซึ่งปกติแล้วคุณไม่จำเป็นต้องสนใจว่าสตริงนั้นจะเป็นอะไร ในโค้ดแล็บส่วนใหญ่ คุณจะต้องอ้างอิงรหัสโปรเจ็กต์ (ปกติจะระบุเป็น PROJECT_ID) หากไม่ชอบรหัสที่สร้างขึ้น คุณอาจสร้างรหัสอื่นแบบสุ่มได้ หรือจะลองใช้อุปกรณ์ของคุณเองเพื่อดูว่าอุปกรณ์พร้อมใช้งานหรือไม่ก็ได้ คุณจะเปลี่ยนแปลงหลังจากขั้นตอนนี้ไม่ได้ และชื่อนี้จะคงอยู่ตลอดระยะเวลาของโปรเจ็กต์
  • โปรดทราบว่ามีค่าที่ 3 ซึ่งเป็นหมายเลขโปรเจ็กต์ที่ API บางรายการใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับค่าทั้ง 3 รายการนี้ได้ในเอกสารประกอบ
  1. ถัดไป คุณจะต้องเปิดใช้การเรียกเก็บเงินใน Cloud Console เพื่อใช้ทรัพยากร/API ของ Cloud การทำตามโค้ดแล็บนี้จะไม่เสียค่าใช้จ่ายมากนัก หากต้องการปิดใช้ทรัพยากรเพื่อหลีกเลี่ยงการเรียกเก็บเงินหลังจากบทแนะนำนี้ คุณสามารถลบทรัพยากรที่สร้างไว้หรือลบโปรเจ็กต์ได้ ผู้ใช้ Google Cloud รายใหม่มีสิทธิ์เข้าร่วมโปรแกรมช่วงทดลองใช้ฟรีมูลค่า$300 USD

การตั้งค่าสภาพแวดล้อม

เปิดแชท Gemini

bc3c899ac8bcf488.png

หรือพิมพ์ "ถาม Gemini" ในแถบค้นหา

e1e9ad314691368a.png

เปิดใช้ Cloud AI Companion API

66cb6e561e384bbf.png

คลิก "Start chatting" แล้วทำตามคำถามตัวอย่างหรือพิมพ์พรอมต์ของคุณเองเพื่อลองใช้

5482c153eef23126.png

พรอมต์ให้ลองใช้

  • อธิบาย Cloud Run ใน 5 ประเด็นสำคัญ
  • คุณเป็นผู้จัดการผลิตภัณฑ์ Google Cloud Run ให้อธิบาย Cloud Run แก่นักเรียนเป็นประเด็นสำคัญสั้นๆ 5 ข้อ
  • คุณเป็นผู้จัดการผลิตภัณฑ์ Google Cloud Run อธิบาย Cloud Run ให้แก่นักพัฒนาซอฟต์แวร์ Kubernetes ที่ได้รับการรับรองใน 5 ประเด็นสำคัญสั้นๆ
  • คุณเป็นผู้จัดการผลิตภัณฑ์ Google Cloud Run อธิบายให้นักพัฒนาซอฟต์แวร์อาวุโสทราบถึงกรณีที่ควรใช้ Cloud Run กับ GKE โดยใช้ประเด็นสำคัญสั้นๆ 5 ข้อ

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเขียนพรอมต์ที่ดีขึ้นได้ในคู่มือการใช้พรอมต์

วิธีที่ Gemini สำหรับ Google Cloud ใช้ข้อมูลของคุณ

ความมุ่งมั่นด้านความเป็นส่วนตัวของ Google

Google เป็นหนึ่งในบริษัทแรกๆ ในอุตสาหกรรมที่เผยแพร่ความมุ่งมั่นด้านความเป็นส่วนตัวเกี่ยวกับ AI/ML ซึ่งระบุความเชื่อของเราว่าลูกค้าควรมีความปลอดภัยและการควบคุมข้อมูลของตนเองในระดับสูงสุดที่จัดเก็บไว้ในระบบคลาวด์

ข้อมูลที่คุณส่งและได้รับ

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

การเข้ารหัสพรอมต์

เมื่อคุณส่งพรอมต์ไปยัง Gemini ระบบจะเข้ารหัสข้อมูลของคุณระหว่างการส่งเป็นอินพุตให้กับโมเดลพื้นฐานใน Gemini

ข้อมูลโปรแกรมที่สร้างขึ้นจาก Gemini

Gemini ได้รับการฝึกด้วยโค้ด Google Cloud ของบุคคลที่หนึ่งและโค้ดของบุคคลที่สามที่เลือก คุณมีหน้าที่รับผิดชอบต่อความปลอดภัย การทดสอบ และประสิทธิภาพของโค้ด รวมถึงการเติมโค้ด การสร้าง หรือการวิเคราะห์ที่ Gemini มีให้คุณ

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Google จัดการพรอมต์ของคุณ

3. ตัวเลือกในการทดสอบพรอมต์

หากต้องการเปลี่ยน/ขยายพรอมต์ devai cli ที่มีอยู่ คุณมีตัวเลือกหลายอย่างในการดำเนินการ

Vertex AI Studio เป็นส่วนหนึ่งของแพลตฟอร์ม Vertex AI ของ Google Cloud ซึ่งออกแบบมาเพื่อลดความซับซ้อนและเร่งการพัฒนาและการใช้โมเดล Generative AI โดยเฉพาะ

Google AI Studio เป็นเครื่องมือบนเว็บสำหรับการสร้างต้นแบบและทดสอบการสร้างพรอมต์และ Gemini API

เว็บแอป Google Gemini (gemini.google.com) เป็นเครื่องมือบนเว็บที่ออกแบบมาเพื่อช่วยให้คุณสำรวจและใช้ประโยชน์จากความสามารถของโมเดล AI ของ Gemini ของ Google

4. สร้างบัญชีบริการ

เปิดใช้งาน Cloud Shell โดยคลิกไอคอนทางด้านขวาของแถบค้นหา

3e0c761ca41f315e.png

ในเทอร์มินัลที่เปิดอยู่ ให้เปิดใช้บริการที่จำเป็นเพื่อใช้ Vertex AI API และแชท Gemini

gcloud services enable \
    aiplatform.googleapis.com \
    cloudaicompanion.googleapis.com \
    cloudresourcemanager.googleapis.com \
    secretmanager.googleapis.com

หากได้รับข้อความแจ้งให้ให้สิทธิ์ ให้คลิก "ให้สิทธิ์" เพื่อดำเนินการต่อ

6356559df3eccdda.png

เรียกใช้คําสั่งต่อไปนี้เพื่อสร้างบัญชีบริการและคีย์ใหม่

คุณจะใช้บัญชีบริการนี้เพื่อเรียก API ไปยัง Vertex AI Gemini API จากไปป์ไลน์ CICD

PROJECT_ID=$(gcloud config get-value project)
SERVICE_ACCOUNT_NAME='vertex-client'
DISPLAY_NAME='Vertex Client'
KEY_FILE_NAME='vertex-client-key'

gcloud iam service-accounts create $SERVICE_ACCOUNT_NAME --display-name "$DISPLAY_NAME"

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/aiplatform.admin" --condition None

gcloud projects add-iam-policy-binding $PROJECT_ID --member="serviceAccount:$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com" --role="roles/secretmanager.secretAccessor" --condition None

gcloud iam service-accounts keys create $KEY_FILE_NAME.json --iam-account=$SERVICE_ACCOUNT_NAME@$PROJECT_ID.iam.gserviceaccount.com

5. แยกที่เก็บ GitHub ไปยังที่เก็บ GitHub ส่วนตัว

ไปที่ https://github.com/GoogleCloudPlatform/genai-for-developers/fork แล้วเลือกรหัสผู้ใช้ GitHub ของคุณเป็นเจ้าของ

ยกเลิกการเลือกตัวเลือกเพื่อคัดลอกเฉพาะสาขา "หลัก"

โปรดคลิกที่ "Create fork"

6. เปิดใช้เวิร์กโฟลว์ GitHub Actions

เปิดที่เก็บ GitHub ที่แยกออกมาในเบราว์เซอร์ แล้วเปลี่ยนไปใช้แท็บ "Actions" เพื่อเปิดใช้เวิร์กโฟลว์

1cd04db9b37af7cf.png

7. เพิ่มข้อมูลลับของที่เก็บ

สร้างข้อมูลลับของที่เก็บในส่วน "Settings / Secrets and variables / Actions" ในที่เก็บ GitHub ที่แยกออกมา

เพิ่มข้อมูลลับของที่เก็บที่มีชื่อ "GOOGLE_API_CREDENTIALS"

94cbe2778bef25eb.png

เปลี่ยนไปที่หน้าต่าง/แท็บ Google Cloud Shell แล้วเรียกใช้คําสั่งด้านล่างในเทอร์มินัล Cloud Shell

cat ~/vertex-client-key.json

คัดลอกเนื้อหาไฟล์และวางเป็นค่าสำหรับข้อมูลลับ

915579a97f8f2ced.png

เพิ่มข้อมูลลับ PROJECT_ID ที่มีรหัสโปรเจ็กต์ Qwiklabs เป็นค่า

4fa92833ce615a36.png

8. เรียกใช้เวิร์กโฟลว์ GitHub Actions

ไปที่ที่เก็บ GitHub ในเบราว์เซอร์แล้วเรียกใช้เวิร์กโฟลว์

เวิร์กโฟลว์ได้รับการกําหนดค่าให้ทํางานเมื่อมีการพุชโค้ดหรือเรียกใช้ด้วยตนเอง

da11273b4b54f7b6.png

ตรวจสอบผลลัพธ์

cf49aa41980aacc5.png

ผลลัพธ์ของคําสั่งทดสอบความครอบคลุม

devai review testcoverage -c ${{ github.workspace }}/sample-app/src/main/java/anthos/samples/bankofanthos/balancereader

3b21bd4639524763.png

ผลลัพธ์ของคำสั่งตรวจสอบโค้ด

devai review code -c ${{ github.workspace }}/sample-app/src/main/java/anthos/samples/bankofanthos/balancereader

4876dbc2e0042943.png

ผลลัพธ์ของคําสั่งการตรวจสอบประสิทธิภาพ

devai review performance -c ${{ github.workspace }}/sample-app/src/main/java/anthos/samples/bankofanthos/balancereader

98dd2472b2e819bf.png

ผลลัพธ์ของคําสั่งการตรวจสอบความปลอดภัย

devai review security -c ${{ github.workspace }}/sample-app/src/main/java/anthos/samples/bankofanthos/balancereader

7d180a763db92d56.png

ผลลัพธ์ของคำสั่งตรวจสอบตัวบล็อก

devai review blockers -c ${{ github.workspace }}/sample-app/pom.xml

726175e874aefcf.png

9. โคลนที่เก็บ

กลับไปที่เทอร์มินัล Cloud Shell แล้วโคลนที่เก็บ

เปลี่ยน YOUR-GITHUB-USERID เป็นรหัสผู้ใช้ GitHub ของคุณก่อนเรียกใช้คำสั่ง

git clone https://github.com/YOUR-GITHUB-USERID/genai-for-developers.git 

เปลี่ยนโฟลเดอร์และเปิดไฟล์เวิร์กโฟลว์ใน Cloud Shell Editor

cd genai-for-developers

cloudshell edit .github/workflows/devai-review.yml 

รอจนกว่าไฟล์การกําหนดค่าจะแสดงใน IDE

9e81e5a79d421eac.png

10. เปิดใช้ฟีเจอร์ช่วยเขียนโค้ดของ Gemini

คลิกไอคอน "Gemini" ที่มุมขวาล่าง 7c891e32c055c0e4.png

คลิก "Login to Google Cloud" และ "Select a Google Cloud Project"

f5318f22c91ecaa8.png

6b7203ffdd8485fa.png

fb8d42a6bc8a260f.png

เลือกโปรเจ็กต์ Qwiklabs จากหน้าต่างป๊อปอัป

f661047956a6d6f9.png

11. อธิบายโค้ดด้วยฟีเจอร์ Gemini Code Assist

คลิกขวาที่ใดก็ได้ในไฟล์ devai-review.yml แล้วเลือก Gemini Code Assist > Explain นี้

41fb7da002bdf43.png

คำอธิบายการตรวจสอบ

7724d52e54918c00.png

12. เรียกใช้ DEVAI CLI ในเครื่อง

กลับไปที่เทอร์มินัล Cloud Shell แล้วเรียกใช้คําสั่งด้านล่างเพื่อติดตั้ง devai ในเครื่อง

pip3 install devai-cli

ติดตั้ง CLI แล้ว แต่ CLI ไม่ได้อยู่ใน PATH

WARNING: The script devai is installed in '/home/student_00_478dfeb8df15/.local/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.

เรียกใช้คําสั่งด้านล่างเพื่ออัปเดตตัวแปรสภาพแวดล้อม PATH แทนที่ด้วยชื่อโฟลเดอร์หลักของผู้ใช้ เช่น student_00_478dfeb8df15

export PATH=$PATH:/home/YOUR-USER-HOME-FOLDER/.local/bin

เรียกใช้คําสั่ง devai cli เพื่อดําเนินการตรวจสอบโค้ดในเครื่อง ตรวจสอบเอาต์พุต CLI

export PROJECT_ID=$(gcloud config get-value project)
export LOCATION=us-central1

cd ~/genai-for-developers

devai review code -c ./sample-app/src/main/java/anthos/samples/bankofanthos/balancereader

เปิดสคริปต์การตรวจสอบโดยเรียกใช้คําสั่งด้านล่าง

cloudshell edit devai-cli/src/devai/commands/review.py

คลิกขวาที่ใดก็ได้ในไฟล์ review.py แล้วเลือก Gemini Code Assist > Explain นี้

ตรวจสอบคำอธิบาย

30e3baf4c272c8ab.png

13. การพัฒนา DevAI CLI

ในส่วนนี้คุณจะทําการเปลี่ยนแปลงใน devai cli

ในการเริ่มต้น ให้ตั้งค่า virtualenv ของ Python, ติดตั้งข้อกําหนด และเรียกใช้คําสั่งตัวอย่าง

cd ~/genai-for-developers/devai-cli
python3 -m venv venv
. venv/bin/activate
pip3 install -r src/requirements.txt
pip3 install --editable ./src
devai echo

เรียกใช้คำสั่งการตรวจสอบโค้ดอีกครั้งเพื่อตรวจสอบว่าทุกอย่างทำงานได้ตามปกติ

devai review code -c ~/genai-for-developers/sample-app/src/main/java/anthos/samples/bankofanthos/balancereader

ตรวจสอบผลลัพธ์โดยใช้การแสดงตัวอย่าง Markdown ในเครื่องมือแก้ไข Cloud Shell

สร้างไฟล์ใหม่และวางคำตอบของ Gemini

จากนั้นใช้พาเล็ตคำสั่งและเลือก "Markdown: Open Preview"

ec6fedf4b6d3fb73.png

9999e7fbb20cf251.png

9a12ba6ee8b3eedd.png

14. สำรวจคําสั่ง devai cli

คำสั่งการตรวจสอบโค้ด

devai review code -c ~/genai-for-developers/sample-app/src/main/java

คําสั่งการตรวจสอบประสิทธิภาพ

devai review performance -c ~/genai-for-developers/sample-app/src/main/java

คำสั่งการตรวจสอบความปลอดภัย

devai review security -c ~/genai-for-developers/sample-app/src/main/java

ทดสอบคําสั่งการตรวจสอบความครอบคลุม

devai review testcoverage -c ~/genai-for-developers/sample-app/src

คำสั่งการตรวจสอบตัวบล็อก

devai review blockers -c ~/genai-for-developers/sample-app/pom.xml
devai review blockers -c ~/genai-for-developers/sample-app/setup.md

การตรวจสอบและสรุปรูปภาพ/แผนภาพ

แผนภาพอินพุต[~/genai-for-developers/images/extension-diagram.png]:

4b109a74e1aa3fb6.png

ตรวจสอบคําสั่ง

devai review image \
  -f ~/genai-for-developers/images/extension-diagram.png \
  -p "Review and summarize this diagram"

เอาต์พุต:

The diagram outlines a process for conducting local code reviews using a VS Code extension or CLI, leveraging Google Cloud's Vertex AI (Gemini Pro) for generating review prompts. 

**Process Flow:**

1. **Code Style Check:** Developers initiate the process by checking their code for adherence to pre-defined style guidelines.
2. **Prompt Generation:** The VS Code extension/CLI sends the code to Vertex AI (Gemini Pro) on Google Cloud. 
3. **Vertex AI Review:**  Vertex AI analyzes the code and generates relevant review prompts.
4. **Local Review:** The prompts are sent back to the developer's IDE for their consideration.
5. **Optional Actions:** Developers can optionally: 
    - Create new JIRA issues directly from the IDE based on the review prompts.
    - Generate new issues in a GitLab repository.

**Key Components:**

* **VS Code Extension/CLI:** Tools facilitating the interaction with Vertex AI and potential integrations with JIRA and GitLab.
* **Vertex AI (Gemini Pro):**  Google Cloud's generative AI service responsible for understanding the code and generating meaningful review prompts.
* **Google Cloud Secret Manager:** Securely stores API keys and access tokens required to authenticate and interact with Google Cloud services.
* **JIRA/GitLab (Optional):** Issue tracking and project management tools that can be integrated for a streamlined workflow.

**Benefits:**

* **Automated Review Assistance:**  Leveraging AI to generate review prompts saves time and improves the consistency and quality of code reviews. 
* **Local Development:** The process empowers developers to conduct reviews locally within their familiar IDE.
* **Integration Options:** The flexibility to integrate with project management tools like JIRA and GitLab streamlines workflow and issue tracking.

การวิเคราะห์ความแตกต่างของรูปภาพ

devai review imgdiff \
  -c ~/genai-for-developers/images/devai-api.png \
  -t ~/genai-for-developers/images/devai-api-slack.png  

เอาต์พุต:

The following UI elements are missing in the "AFTER UPGRADE STATE" image compared to the "BEFORE UPGRADE STATE" image:

1. **Slack:** The entire Slack element, including the icon, "Team channel" label, and the arrow indicating interaction, is absent in the AFTER UPGRADE image. 
2. **Storage Bucket:**  The "Storage Bucket" element with its icon and "PDFs" label is missing in the AFTER UPGRADE image. 
3. **"GenAI Agents" label in Vertex AI block:** The BEFORE UPGRADE image has "Vertex AI Agents" and "GenAI Agent" labels within the Vertex AI block, while the AFTER UPGRADE image only has "Vertex AI."
4. **"Open JIRA Issue" and "Team Project" labels:** In the BEFORE UPGRADE image, these labels are connected to the JIRA block with an arrow. These are missing in the AFTER UPGRADE image.

**Decision Explanation:**

The analysis is based on a direct visual comparison of the two provided images, noting the presence and absence of specific UI elements and their associated labels. The elements listed above are present in the BEFORE UPGRADE image but absent in the AFTER UPGRADE image.

คำสั่งการสร้างเอกสาร

devai document readme -c ~/genai-for-developers/sample-app/src/main/

เอาต์พุต:

# Bank of Anthos - Balance Reader Service

## Description

The Balance Reader service is a component of the Bank of Anthos sample application. It provides a REST endpoint for retrieving the current balance of a user account. This service demonstrates key concepts for building microservices with Spring Boot and deploying them to a Kubernetes cluster.

## Features
...

ตรวจสอบคําสั่ง devai cli ที่มีให้ใช้งานในเครื่องมือแก้ไข Cloud Shell

cloudshell edit ~/genai-for-developers/devai-cli/README.md

หรืออ่าน README.md ในที่เก็บ GitHub

15. ยินดีด้วย

ยินดีด้วย คุณทำ Codelab เสร็จแล้ว

สิ่งที่เราได้พูดถึง

  • การเพิ่มขั้นตอนการทำงานอัตโนมัติในการตรวจสอบโค้ดของ GenAI ใน GitHub
  • การเรียกใช้ CLI ของ devai ในเครื่อง

ขั้นตอนต่อไปที่ทำได้

  • เราจะจัดเซสชันแบบลงมือปฏิบัติเพิ่มเติมในเร็วๆ นี้

ล้างข้อมูล

โปรดลบโปรเจ็กต์ที่มีทรัพยากรดังกล่าวหรือเก็บโปรเจ็กต์ไว้และลบทรัพยากรแต่ละรายการเพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในบทแนะนำนี้

การลบโปรเจ็กต์

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

©2024 Google LLC สงวนลิขสิทธิ์ Google และโลโก้ของ Google เป็นเครื่องหมายการค้าของ Google LLC ชื่อบริษัทและผลิตภัณฑ์อื่นๆ ทั้งหมดอาจเป็นเครื่องหมายการค้าของบริษัทที่เป็นเจ้าของ