ไม่มี .lw-course-card-progress → ยังไม่ได้ซื้อ
สิ่งที่ต้องรู้ของ Code นี้
- Code นี้ ใช้ Swipe เช็คว่าคอมหรือมือถือ ไม่ใช่เช็คจากจอกว้างเฉยๆ
- Popup มีการหน่วงเวลาประมาณ 200 ก่อนปรากฏนะ ไม่งี้นจะมั่วไปหมด
- Background ที่เป็นวีดีโอ มีการเช็คก่อนว่าโหลดวีดีโอเสร็จหรือยัง (โดยเฉพาะวีดีโอที่ใช้จาก Youtube ที่ช้ากว่า) เมื่อได้ภาพวีดีโอมาแล้วค่อยเฟดแสดงวีดีโอ ถ้ายังเป็นจอดำให้แสดง Background รูปภาพดั้งเดิมรอก่อน...แต่สำหรับวีดีโอที่ใช้จาก LernWorlds ที่โหลดเร็วกว่า ก็มีการกำหนดว่าให้หน่วงเวลาแสดง Background รูปภาพดั้งเดิมแปปนึงก่อน ค่อยเฟดเป็นวีดีโอ
- คอร์สไหนที่ยังไม่ได้ซื้อ ปุ่ม "ลงทะเบียนเรียน" จะวิ่งไปหน้า Page "Payment โอนชำระเงิน" pay?product_id=xxx ที่เราสร้างขึ้นมาเองนะ ไม่ใช่ไปหน้า Payment ของ LearnWorlds เพราะอันนั้นเป็นแบบตัดบัตรเครดิต ติดตั้งวุ่นวาย
เราใช้ ChatGPT Go เป็นหลัก (ถ้ายากค่อยใช้ ChatGPT Plus ของปู) และเคยใช้แต่ Claude เคยแก้ Bug ยากๆ ได้เช่นทำไล่ Code จุดนึงให้รองรับทุก Browser (แต่ Claude มี ข้อเสียคือถ้าฟรีจะใช้ได้น้อย ต้องรอ reset ถ้าซื้อก็แพงเดือนละ 799 เลยใช้ ChatGPT ดีกว่า เพราะมีตัว Plus ของปูด้วย)version 6: ใช้ Plus ของปู loading สวยกว่ามาก: https://chatgpt.com/c/6ab3ec1b-f908-83ec-8c4d-e87d1afc2adb
version 5: https://chatgpt.com/c/6aaaf1c9-07d4-83ec-964b-0a8bccd6dc70
version เสริม: https://claude.ai/chat/3850d9ab-02b0-4bcf-ba18-40834a2e75f7
version เสริม: https://claude.ai/chat/50a9f7db-783f-4b3e-92da-dc53e7e587de
version 4: https://chatgpt.com/c/6aa95aaf-41c0-83ec-bba7-6ba7f5b1fc61
version 3: https://chatgpt.com/c/6aa94cfc-70b4-83ec-930b-c04fe8230d64
version 2: https://chatgpt.com/c/6aa9291e-d444-83ec-bcbb-1889beddc581
version 1: https://chatgpt.com/c/6aa60877-2464-83ec-bf49-24702ede364d
หลักการง่ายๆ เวลาจะเปลี่ยนหน้าตา Leanworld แบบใช้ Ai ช่วยทำ ก็คือต้องมีทั้ง HTML, CSS, JavaScript และโยนให้ Ai แก้จากต้นฉบับจาก 3 ตัวปัจจุบันนี้ และแคปหน้าจอให้เขาเห็นผลการรันด้วยก็ดี
✅ 1. ต้องมี HTML ก็คือสิ่งที่ออกแบบ
สร้าง Section Course ขึ้นมา เลือก Layout แบบที่มีข้อมูลครบถ้วนที่สุด ปกใหญ่ๆ, ชื่อคอร์ส, คำบรรยายรายละเอียด, ราคา, ชื่อครู, Progress, Ribbon ฯลฯ แบบจัดเต็ม และ Card appearance เปิดให้หมดจะได้มีข้อมูลครบๆ
และเลือกไม่ให้ลดคุณภาพภาพ (image optimize = No)
และอยากลืมเลือกว่าถ้าเป็นคอร์สที่ซื้อแล้ว Enrolle เวลาคลิกให้ Go to: Course player
การจะเอา HTML ของ Section คือ คลิกเลือก Section ที่ครอบ Course Catalogue ทั้งก้อน ด้านขวากดเครื่องหมาย </> ให้ Copy HTML ของ Section ทั้งชุดนี้ไปให้ Ai และแคปหน้าจอให้เขาเห็นผลการรันด้วยก็ดี
✅ 2. ต้องใช้ CSS
- ไปที่ Site → Site custom code
- อยู่นี่ <style> Dynamic (css)
✅ 3. ต้องใช้ JavaScript
- ไปที่ Site → Site custom code
- อยู่ที่ <head> logged in (JavaScript), <head> logged out (JavaScript)
(2 อันนี้ใส่เหมือนกัน เพราะใช้ทั้งคนที่ Login และไม่ Login)
✅ โยนทั้ง 3 ตัวเข้า Ai และ แคปหน้าจอให้เขาเห็นผลการรันด้วยก็ดี และบอกว่าให้แก้จากต้นฉบับ html, js, css ล่าสุดของฉัน และค่อยเล่าว่าอยากได้อะไรเพิ่ม ให้ Ai สร้าง Js,css มาให้
💥 พวกคำพิเศษ เช่น เพิ่มใหม่ล่าสุด, ยอดนิยม ฯลฯ อันนี้เราทำเป็น Label และให้ css, javascript เอามาแสดงเป็นกรอบพื้นแดง อักษรขาว อีกทีนั่นเอง โดยใน Label เรามีฝังรหัสวีดีโอเอาไว้ด้วย เช่น วีดีโอจาก Learnworlds [LW:8l68gbsuyu] และ วีดีโอจาก Youtube [YT:6nJrRWVq3F8]
💥 ในครั้งแรกควรบอก Ai ด้วยว่า Section คอร์สเรียนอาจจะมีหลายอันในหนึ่งหน้าดังนั้นให้เขียน Code ให้รองรับด้วย ประมาณว่า:
* เนื่องจากอันนี้เป็นเพียงแค่ 1 section แต่ในอนาคตเมื่อ code สำเร็จแล้ว ในหน้าๆ เดียว เราจะมีหลาย section ที่มี section id ต่างกันไป ดังนั้นให้ออกแบบไอเดียด้วยว่า ทำอย่างไรถึงจะทำให้ code ชุดเดียวนี้ สามารถใช้งานได้ทุก section
