เปิดตัวเว็บไซต์พอร์ตโฟลิโอด้วย AI

1. บทนำ

ภาพรวม

การสร้างสรรค์ด้วย AI เริ่มต้นที่ใดในปัจจุบัน สำหรับพวกเราส่วนใหญ่ การสร้างสรรค์เริ่มต้นด้วยการค้นหาหรือการสร้างต้นแบบ Google AI Studio มีโหมดสร้าง ที่มีประสิทธิภาพ (มักเรียกว่า "การเขียนโค้ดแบบสบายๆ") ซึ่งช่วยให้คุณออกแบบ ทดสอบ และสร้างเว็บแอปพลิเคชันโดยใช้การสร้างโค้ดที่ขับเคลื่อนโดยโมเดล Gemini

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

เว็บไซต์พอร์ตโฟลิโอเวอร์ชันที่เสร็จสมบูรณ์

สิ่งที่คุณจะได้ทำ

  • ใช้พรอมต์กับ Google AI Studio เพื่อสร้างต้นแบบเว็บไซต์พอร์ตโฟลิโอส่วนตัว
  • ทดสอบแอปพลิเคชันในแซนด์บ็อกซ์การแสดงตัวอย่างแบบอินเทอร์แอกทีฟ
  • ทำให้แอปพลิเคชันใช้งานได้ใน Cloud Run โดยตรงจาก UI ของ Google AI Studio

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

  • วิธีใช้โหมดสร้างของ Google AI Studio เพื่อสร้างต้นแบบบริการฟรอนท์เอนด์อย่างรวดเร็วโดยใช้ภาษาธรรมชาติ
  • วิธีทำให้แอปพลิเคชัน AI Studio ใช้งานได้ในรูปแบบคอนเทนเนอร์แบบ Serverless ใน Cloud Run

2. การตั้งค่าโปรเจ็กต์

ก่อนเปิดตัว AI Studio ให้ตรวจสอบสถานะบัญชีและข้อกำหนดเบื้องต้น

บัญชี Google และข้อมูลระดับ

  1. หากยังไม่มีบัญชี Google ให้สร้างบัญชี Google
    • เคล็ดลับ: ใช้บัญชี Google ส่วนบุคคลสำหรับ Lab นี้หากเป็นไปได้ เนื่องจากบัญชีของกลุ่ม องค์กร หรือโรงเรียนอาจบังคับใช้นโยบาย Workspace ที่ปิดใช้ฟีเจอร์ทดลองหรือการผสานรวมระบบคลาวด์
  2. ตรวจสอบรายละเอียดการเรียกเก็บเงินสำหรับการทำให้ใช้งานได้ ดังนี้
    • ระดับเริ่มต้นของ Google Cloud: อนุญาตให้เผยแพร่แอปพลิเคชันแบบ Full-Stack ได้สูงสุด 2 รายการในภูมิภาคที่เลือกโดยไม่มีค่าใช้จ่าย โดยไม่ต้องสร้างบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud แบบเต็ม
    • Standard Deployment: เชื่อมต่อกับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ Google ที่มีอยู่และชำระเงินแล้ว รวมถึงขยายขีดจำกัดพื้นที่เก็บข้อมูล ทรัพยากร CPU และ API

3. สร้างเว็บไซต์พอร์ตโฟลิโอในโหมดสร้างของ AI Studio

สร้างเชลล์ของแอปพลิเคชันและใช้พรอมต์กับผู้ช่วยเขียนโค้ด AI เพื่อสร้างเลย์เอาต์ฟรอนท์เอนด์

  1. ไปที่แผงแอปของ Google AI Studio แล้วคลิกแอปใหม่
  2. ป้อนคำอธิบายสำหรับแอปพลิเคชันพอร์ตโฟลิโอในช่องพรอมต์แชท ดังนี้ 
    Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
    ลิงก์นี้จะป้อนข้อมูลในช่องพรอมต์ให้คุณโดยอัตโนมัติ
  3. คลิกสร้าง เพื่อเริ่มกระบวนการสร้างแอปพลิเคชัน

4. ทดสอบและทำซ้ำ

ก่อนเปิดตัวบริการ ให้เรียกใช้การตรวจสอบความถูกต้องในการแสดงตัวอย่างแบบอินเทอร์แอกทีฟ

  1. เปิดบานหน้าต่างแสดงตัวอย่างภายใน Google AI Studio
  2. โต้ตอบกับปุ่มนำทาง ลิงก์ หรือเลย์เอาต์ใดก็ได้ในแซนด์บ็อกซ์การแสดงตัวอย่างเพื่อยืนยันประสบการณ์การใช้งานภาพ
    • หมายเหตุเกี่ยวกับการแก้ไขข้อผิดพลาด: ระหว่างการสร้างหรือการทดสอบ คุณอาจพบปัญหาเกี่ยวกับรันไทม์หรือข้อผิดพลาดในการคอมไพล์เป็นครั้งคราว หากเกิดกรณีนี้ขึ้น AI Studio จะแสดงปุ่มแก้ไข ในแชท ซึ่งช่วยให้คุณขอให้ Agent วินิจฉัยและแก้ไขปัญหาโดยอัตโนมัติได้
    ตำแหน่งปุ่มแก้ไขใน Google AI Studio
  3. หากต้องการเปลี่ยนสไตล์หรือลักษณะการทำงาน ให้สั่ง Agent ผ่านหน้าต่างแชท เช่น
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Include a new section to showcase my recent presentations and talks."
  4. รอให้ Agent อัปเดตฐานของโค้ด แล้วตรวจสอบเบราว์เซอร์แสดงตัวอย่างเพื่อดูการอัปเดต

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

เมื่อต้นแบบทำงานได้อย่างสมบูรณ์แล้ว ให้ทำให้ต้นแบบใช้งานได้เป็นบริการสาธารณะใน Cloud Run

  1. ที่มุมขวาบนของ Google AI Studio ให้คลิกปุ่มเผยแพร่ เพื่อเริ่มวิซาร์ดการทำให้ใช้งานได้ตำแหน่งปุ่มเผยแพร่ของ Google AI Studio
  2. คลิกเริ่มต้นใช้งาน เพื่อกำหนดค่าโปรเจ็กต์ Google Cloud
    • ตรวจสอบว่าเมนูแบบเลื่อนลงโปรเจ็กต์ Google Cloud เป้าหมายตรงกับโปรเจ็กต์ที่คุณเชื่อมโยงกับ Workspace
    • AI Studio จะสร้างตัวระบุบริการที่ไม่ซ้ำกันสำหรับอินสแตนซ์ Cloud Run โดยอัตโนมัติ
    • คุณเลือกระบุคำนำหน้า URL ที่กำหนดเอง .ai.studio (เช่น your-portfolio-name.ai.studio) เป็นส่วนหนึ่งของการกำหนดค่าการทำให้ใช้งานได้ก็ได้
  3. หากคุณทำให้ใช้งานได้เป็นครั้งแรกและใช้พารามิเตอร์มาตรฐานของ Google Cloud ระบบอาจแจ้งให้คุณระบุประเภทองค์กรและระบุรายละเอียดการเรียกเก็บเงิน
  4. คลิกเผยแพร่แอป
  5. ขั้นตอนการสร้างคอนเทนเนอร์ การลงทะเบียนคอนเทนเนอร์ และการทำให้บริการใช้งานได้จะเกิดขึ้นเบื้องหลัง โดยปกติกระบวนการนี้จะใช้เวลา 2-4 นาที
  6. เมื่อการทำให้ใช้งานได้เสร็จสิ้น ให้คัดลอกURL ของแอป ที่สร้างขึ้น แล้วไปที่ลิงก์แอปพลิเคชันที่ใช้งานจริงในแท็บเบราว์เซอร์
  7. ทดสอบเว็บแอปพลิเคชันที่ใช้งานจริงในเบราว์เซอร์

6. (ไม่บังคับ) เพิ่มโดเมนที่กำหนดเอง

โดยค่าเริ่มต้น Cloud Run จะโฮสต์บริการของคุณในโดเมนย่อย run.app ที่ Google จัดการ หากต้องการใช้โดเมนส่วนตัว (เช่น yourname.com หรือ portfolio.yourname.com) คุณสามารถแมปโดเมนที่กำหนดเองกับบริการได้

ขั้นตอนที่ 1: เพิ่มการแมปโดเมนใน Cloud Run

  1. ไปที่หน้าการแมปโดเมนของ Cloud Runในคอนโซล Google Cloud
  2. คลิกเพิ่มการแมป
  3. เลือกบริการ Cloud Run ที่ต้องการแมปจากเมนูแบบเลื่อนลง
  4. ป้อนชื่อโดเมนที่กำหนดเอง (เช่น yourname.com หรือ portfolio.yourname.com)
  5. คลิกถัดไป หรือดำเนินการต่อ Cloud Run จะแสดงระเบียน DNS (เช่น A/AAAA หรือ CNAME ระเบียน) ที่คุณต้องสร้างกับผู้รับจดทะเบียนโดเมน

ขั้นตอนที่ 2: กำหนดค่าผู้รับจดทะเบียน DNS

  1. ลงชื่อเข้าใช้แผงดูแลระบบของผู้รับจดทะเบียนโดเมน (เช่น Squarespace, GoDaddy หรือ Namecheap)
  2. เปิดหน้าการกำหนดค่าการจัดการ DNS หรือการตั้งค่า DNS สำหรับโดเมน
  3. สร้างระเบียน DNS ที่ตรงกับค่าที่แสดงในวิซาร์ดการแมปของ Cloud Run ดังนี้
    • สำหรับการแมปโดเมน Apex (เช่น yourname.com) ให้เพิ่มระเบียน A และ AAAA ที่แสดง
    • สำหรับการแมปโดเมนย่อย (เช่น portfolio.yourname.com) ให้เพิ่มระเบียน CNAME ที่แสดง
  4. บันทึกการเปลี่ยนแปลงการกำหนดค่า DNS

ขั้นตอนที่ 3: รอการจัดสรรใบรับรอง SSL

เมื่อการเปลี่ยนแปลง DNS มีผลแล้ว ให้ดำเนินการดังนี้

  1. Google Cloud จะจัดสรรใบรับรอง SSL/TLS ที่มีการจัดการสำหรับการเชื่อมต่อที่ปลอดภัยโดยอัตโนมัติ
  2. โดยปกติกระบวนการนี้จะใช้เวลาประมาณ 15 นาที แต่ก็อาจใช้เวลาถึง 24 ชั่วโมง ทั้งนี้ขึ้นอยู่กับการมีผลของ DNS
  3. เมื่อเสร็จแล้ว โดเมนที่กำหนดเองจะเปลี่ยนเส้นทางไปยังเว็บไซต์พอร์ตโฟลิโออย่างปลอดภัย

7. ล้าง

วิธีหลีกเลี่ยงค่าใช้จ่ายในการเรียกเก็บเงินที่ไม่ได้คาดการณ์ไว้หรือล้างทรัพยากร Workspace

  1. ใน Google AI Studio ให้ไปที่หน้าแอป
  2. ค้นหาแอปพลิเคชันในตารางกริดหรือรายการ
  3. คลิกไอคอนถังขยะเพื่อลบสถานะแอปและยกเลิกการเผยแพร่บริการจาก Cloud Run
  4. หากคุณทำให้ใช้งานได้โดยใช้โปรเจ็กต์ Standard และต้องการปิดทรัพยากรทั้งหมด ให้ไปที่การตั้งค่าโปรเจ็กต์ของคอนโซล Google Cloud แล้วลบโปรเจ็กต์พื้นฐาน

8. บทสรุป

ยินดีด้วย คุณได้ออกแบบ พัฒนา และทำให้เว็บไซต์พอร์ตโฟลิโอใช้งานได้โดยตรงจาก Google AI Studio

ดูข้อมูลเพิ่มเติม

ไปที่ ลิงก์นี้ เพื่อรับป้าย เส้นทางของผู้สร้างเสร็จสมบูรณ์

หากต้องการเดินทางต่อ ให้ไปที่ goo.gle/builders เพื่อทำ Lab ถัดไป