ใช้ Bolt.New และ Logto เพื่อสร้างกระบวนการเข้าสู่ระบบแบบกำหนดเองอย่างรวดเร็ว

Bolt.New คืออะไร#

Bolt.new เป็นเครื่องมือบนเบราว์เซอร์สำหรับสร้างและรันแอปเว็บแบบ full-stack ได้ทันที โดยพื้นฐานอยู่บน เทคโนโลยี WebContainer ของ StackBlitz ให้นักพัฒนามี stack ที่สะอาดและตั้งค่าล่วงหน้าซึ่งรวมถึง Next.js (App Router), Tailwind CSS, Supabase, Prisma และ ShadCN UI ทั้งหมดทำงานในเครื่องในเบราว์เซอร์ ไม่ต้องติดตั้ง ไม่ต้อง build บนคลาวด์ และไม่ต้องสมัครสมาชิก

แตกต่างจากเครื่องมือที่เน้นโค้ดช่วย AI ในโปรเจกต์ที่มีอยู่ Bolt.new เน้นที่ จุดเริ่มต้นของกระบวนการพัฒนา มันลดขั้นตอนยุ่งยากในการจัดระเบียบโครงสร้างโปรเจกต์ ติดตั้ง dependencies และเซิร์ฟเวอร์โลคัล ให้คุณไปจากไอเดียสู่ต้นแบบที่ใช้งานได้ภายในไม่กี่วินาที

Bolt.new ต่างจาก Cursor หรือ Lovable อย่างไร?#

ขณะที่เครื่องมือเช่น Cursor และ Lovable ทำหน้าที่เป็นผู้ช่วย AI ใน editor ของคุณ Bolt.new เน้นสิ่งที่แตกต่าง — การสร้างและรันโปรเจกต์ full-stack ทันที

• Cursor ช่วยเสริม workflow ของ VS Code ด้วย AI ช่วยสร้างหรือแก้ไขโค้ดในโปรเจกต์เดิมของคุณ
• Bolt.new สร้างแอปที่ใช้งานได้โดยเริ่มจาก prompt หรือ template และรันทันทีในเบราว์เซอร์โดยใช้ WebContainers

ไม่ต้องพึ่งพาเครื่องมือโลคัลหรือ VM คลาวด์ ทุกอย่างรันในเบราว์เซอร์โดยมี Node.js แพ็คเกจแมเนจเมนต์ และการพัฒนา full-stack รองรับโดยตรง จึงเหมาะอย่างยิ่งสำหรับการสร้างต้นแบบเร็วและทดลองแบบ local-first โดยเฉพาะงาน AI หรือ SaaS

Bolt.new เหมาะกับใคร?#

Bolt.new ถูกออกแบบมาสำหรับนักพัฒนาที่มักเริ่มจากศูนย์ เช่น:

• อินดี้แฮกเกอร์ที่ต้องการทดสอบไอเดียสินค้า
• นักพัฒนา AI ที่ต้องการทดสอบเวิร์กโฟลว์หรือฝังโมเดล
• ผู้ก่อตั้งที่สร้าง MVP ตัวต้นแบบ
• วิศวกรที่สร้างเครื่องมือภายในหรือเดโม

ผู้ใช้งานกลุ่มนี้มักคุ้นเคยกับเว็บสแต็กยุคใหม่ และชอบเครื่องมือที่เร็ว สะอาด และไม่ชี้นำ Bolt.new ไม่ใช่เว็บบิวเดอร์แบบลากวางหรือแพลตฟอร์มสอนตามขั้นตอน มันสมมติว่าคุณรู้ React และการพัฒนา full-stack แล้ว แค่เอาความยุ่งยากออก

ประวัติและวิวัฒนาการของ Bolt.new#

Bolt.new ถูกสร้างโดยทีมงาน StackBlitz บริษัทที่ก่อตั้งในปี 2017 โดย Eric Simons และ Albert Pai StackBlitz เป็นผู้ริเริ่ม WebContainers ซึ่งเป็น runtime WebAssembly บนเบราว์เซอร์ที่สามารถรัน Node.js ได้โดยตรงในเบราว์เซอร์ ช่วยลดความจำเป็นต้องใช้เซิร์ฟเวอร์คลาวด์หรือโปรแกรมติดตั้งโลคัลเมื่อต้องพัฒนาแอป JavaScript สมัยใหม่

ในปี 2023 StackBlitz เจอจุดเปลี่ยนเมื่อการเติบโตช้าลง ทีมจึงทดลองแนวทางใหม่ที่ล้ำกว่า: ผสาน WebContainers กับ AI เพื่อสร้างแอปที่ใช้ได้จริงจาก prompt ภาษาธรรมชาติ

การทดลองนี้กลายเป็น Bolt.new ที่เปิดตัวสู่สาธารณะในเดือนตุลาคม 2024 และได้รับความสนใจอย่างรวดเร็วจากนักพัฒนาเพราะเรียบง่ายและเร็ว มันรวมคุณสมบัติที่ StackBlitz พัฒนามาเป็นปี ทั้ง runtime isolation, การติดตั้ง dependency ที่รวดเร็ว, สภาพแวดล้อมที่แชร์ได้ และอินเทอร์เฟซ AI ที่เข้าใจเป้าหมายของการพัฒนา

Bolt.new ได้เปลี่ยนวิธีเลือกใช้เครื่องมือนักพัฒนา: แทนที่จะต้องเขียนโค้ดตั้งแต่ต้น นักพัฒนาสามารถ เริ่มจากโค้ดที่ทำงานอยู่แล้ว ที่สอดคล้องกับเป้าหมายของตน

คู่มือ: ใช้ Logto และ Bolt.New เพื่อเพิ่มประสบการณ์ล็อกอินแบบกำหนดเอง#

ลงทะเบียนแอปใน Logto console#

ในตัวอย่างนี้ ฉันใช้ Bolt.new เพื่อสร้างแอป CMS โดยข้ามขั้น prompt และบอก agent ตรง ๆ ว่าอยากได้ CMS ที่ใช้ Logto เป็นระบบยืนยันตัวตน

ตามคู่มือ ที่ต้องเตรียมมีสองข้อมูลสำคัญ:

1. Logto endpoint
2. App ID

เนื่องจากแอปนี้เป็น single-page React app ไม่ต้องใช้ app secret ตัว agent จัดการที่เหลือ: ติดตั้ง Logto React SDK ล่าสุด, ตั้งค่าคอมโพเนนต์ยืนยันตัวตน, และเชื่อมต่อทุกอย่าง

เพื่อให้ setup สมบูรณ์ ฉันเข้าไปที่ Logto Cloud Console, สร้างแอป single-page ใหม่ แล้วคัดลอก Logto endpoint กับ App ID ไปที่ Bolt.new

จากนั้นตั้งค่า Redirect URIs และ Post sign-out redirect URIs

ข้อควรระวัง: เพราะ Bolt.new เป็นเบราว์เซอร์ ไม่ใช่ IDE โลคัล คุณไม่สามารถใช้ http://localhost:3000/ เป็น redirect URI ได้ ต้องใช้ preview URL ที่แสดงใน Bolt.new แทน

ปรับแต่งประสบการณ์หน้าเข้าสู่ระบบของ Logto#

Logto มี flow เข้าสู่ระบบสำเร็จรูปที่ปรับแต่งได้ผ่าน Console เริ่มจากไปที่ Sign-in Experience > Sign-in & Sign-up แล้วเลือกช่องทางเข้าสู่ระบบตามต้องการ (เช่น อีเมล ชื่อผู้ใช้ เบอร์โทร หรือโซเชียลล็อกอิน)

เมื่อกำหนดค่าเสร็จ การทริกเกอร์ flow เข้าสู่ระบบจะพาผู้ใช้ไปยังหน้า sign-in hosted ของ Logto ที่มีตัวเลือกตามที่คุณกำหนด กระบวนการยืนยันตัวตนทั้งหมดจะถูกจัดการโดย Logto และผู้ใช้จะถูกส่งกลับมาที่แอปหลังเข้าสู่ระบบ

สร้างแผงเข้าสู่ระบบแบบลอยตัวซ้อนบน UI สินค้าคุณ#

ทีนี้ฉันอยากก้าวไปอีกขั้น สร้างประสบการณ์เข้าสู่ระบบที่ปรับแต่งมากขึ้น คล้าย ๆ กับของ Perplexity แทนที่จะ redirect ไปหน้าใหม่ ฉันจะวาง แผงเข้าสู่ระบบแบบลอยอยู่ข้างบน UI ของสินค้า คงผู้ใช้ไว้ในบริบทเดิม แต่ยังใช้ flow ยืนยันตัวตนของ Logto เหมือนเดิม

ฉันแค่ใช้ prompt นี้:

ฉันอยากให้หน้าล็อกอินดูดีขึ้น เป็น panel ลอยตรงมุมขวาล่าง มีสองปุ่ม ปุ่มหนึ่ง “Sign In” อีกปุ่ม “Create Account” แต่ละปุ่มไปคนละหน้ากัน ดำเนินการโดย Logto ใช้ first-screen experience จาก Logto https://docs.logto.io/end-user-flows/authentication-parameters/first-screen

จุดเด่นคือ เมื่อคลิก Sign In จะไปหน้าล็อกอินทันที หากคลิก Create Account ก็เปิดไปหน้าสร้างบัญชีโดยตรง

เพิ่มกระบวนการเข้าสู่ระบบแบบโซเชียล#

คุณสามารถให้ agent ดู คู่มือ direct sign-in ของ Logto พร้อม prompt เช่น “เพิ่ม social sign-in flows” วิธีนี้จะข้ามหน้าลงจอด Logto เริ่มต้นได้เลย เช่น เมื่อคลิกปุ่ม Google Sign-In จะเปิด flow ยืนยันตัวตนผ่าน Google ทันที ทำให้ผู้ใช้เข้าสู่ระบบได้เร็วและเป็นมิตรมากขึ้น

อัปเดต Logto ที่จะมาถึง: รองรับการเชื่อมโยงกับ AI auth ใน IDE#

นี่เป็นเพียงตัวอย่างพื้นฐาน Logto กำลังสร้าง MCP servers สำหรับรันตรงใน IDE ให้คุณเชื่อมกับ Logto Console และ Management API ได้จากสภาพแวดล้อมพัฒนาโดยตรง

ด้วยระบบนี้ คุณจะสามารถ:

1. สร้างและจัดการผู้ใช้
2. ดูและกรองล็อก
3. กำหนด flow login และ sign-up
4. กำหนด API resource, permission และ role
5. จัดการแอปและการตั้งค่าการเข้าถึง
6. อื่น ๆ อีกมากมาย

ผสานเครื่องมือโลคัลกับ AI และโครงสร้างพื้นฐานของ Logto การยืนยันตัวตนจะไม่ใช่เรื่องยากสำหรับการเชื่อมต่ออีกต่อไป แต่มันจะกลายเป็นส่วนหนึ่งของ flow การพัฒนาตามธรรมชาติของคุณ