Travel
1.0.0
Github: https://github.com/mohdjami/Travel
ลิงก์ที่ปรับใช้: https://travelplanai.vercel.app/
วิดีโอ YT: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq
แผนภาพด้านบนแสดงภาพรวมระดับสูงของแอปพลิเคชัน บริการ และโซลูชัน
ฉันใช้ประโยชน์จาก Next.js, Supabase, Gemini-1.5-flash Model, Shadcn, Typescript และ Tailwind CSS แล้ว
ใช้ Supabase เพื่อรับรองความถูกต้องและให้สิทธิ์ผู้ใช้
ทำไมต้อง Supabase สำหรับการรับรองความถูกต้องและการจัดเก็บข้อมูล?
Github
ข้อมูลรับรอง
ที่นี่เราใช้ Google gemini-1.5-flash Model
Next.js สำหรับการสร้างแอปพลิเคชันสแต็กเต็มรูปแบบ
Next.js เป็นตัวเลือกที่ยอดเยี่ยมเนื่องจากการแสดงผลฝั่งเซิร์ฟเวอร์ การสร้างไซต์แบบคงที่ และ SEO
หลังจากได้รับการตั้งค่าผู้ใช้จากแบบฟอร์มกำหนดการเดินทางแล้ว คำขอจะถูกส่งไปยังแบ็กเอนด์พร้อมข้อมูลทั้งหมด
จากนั้นจะใช้แผนการเดินทางในส่วนประกอบเพื่อแสดงข้อมูล ฉันยังได้รวมแผนที่จากแผ่นพับด้วย
Gemini-1.5-flash เป็นโมเดล AI ขั้นสูงที่พัฒนาโดย Google ซึ่งขับเคลื่อนการสร้างแผนการเดินทางในแอปพลิเคชันของเรา โมเดลนี้มีความเป็นเลิศในการทำความเข้าใจความต้องการการเดินทางที่ซับซ้อน และสร้างแผนการเดินทางที่มีรายละเอียดและเป็นส่วนตัว ด้วยการใช้ประโยชน์จาก Gemini-1.5-flash เราสามารถสร้างแผนการเดินทางที่ปรับแต่งมาอย่างดีโดยพิจารณาปัจจัยต่างๆ เช่น ข้อจำกัดด้านงบประมาณ ความสนใจส่วนบุคคล และระยะเวลาการเดินทาง
มีข้อได้เปรียบที่สำคัญหลายประการสำหรับการสมัครกำหนดการเดินทางของเรา ประการแรก การสร้างแผนการเดินทางที่ขับเคลื่อนด้วย AI สามารถประมวลผลข้อมูลจำนวนมหาศาลเกี่ยวกับจุดหมายปลายทาง สถานที่ท่องเที่ยว และการตั้งค่าของผู้ใช้ได้รวดเร็วและมีประสิทธิภาพมากกว่าวิธีการแบบแมนนวลมาก ประการที่สอง ช่วยให้สามารถให้คำแนะนำส่วนบุคคลได้สูง ซึ่งสามารถปรับให้เข้ากับความสนใจและข้อจำกัดเฉพาะตัวของผู้ใช้แต่ละคนได้ สุดท้ายนี้ AI สามารถเรียนรู้และปรับปรุงคำแนะนำได้อย่างต่อเนื่องตามความคิดเห็นของผู้ใช้และแนวโน้มการเดินทาง ทำให้มั่นใจได้ว่าแอปพลิเคชันของเรามีความเกี่ยวข้องและมีคุณค่าต่อนักเดินทาง
Leaflet เป็นไลบรารี JavaScript แบบโอเพ่นซอร์สสำหรับแผนที่เชิงโต้ตอบที่เหมาะกับอุปกรณ์พกพา เพื่อรวมแผนที่ Leaflet เข้ากับแอปพลิเคชันแผนการเดินทางของเรา เราได้ทำตามขั้นตอนสำคัญเหล่านี้:
ด้วยการรวมแผนที่ Leaflet เข้าด้วยกัน ฉันปรับปรุงประสบการณ์ผู้ใช้ด้วยการจัดเตรียมบริบทที่เป็นภาพสำหรับแต่ละจุดหมายปลายทางและกิจกรรมภายในแผนการเดินทางที่สร้างขึ้น
ฉันยังประสบปัญหากับแผ่นพับซึ่งก็คือส่วนประกอบแผนที่ไม่โหลด 100% ทำให้เกิดข้อผิดพลาดและหน้าโหลดไม่ถูกต้อง ดังนั้นฉันจึงแก้ไขปัญหานี้ด้วยวิธีแก้ไขปัญหานี้
เพื่อปรับปรุงประสบการณ์ผู้ใช้และจัดการการใช้งาน API ฉันจึงใช้ระบบตามเครดิต นี่คือวิธีการทำงาน:
ระบบนี้ช่วยให้เราสามารถควบคุมต้นทุน API ในขณะที่ให้ความยืดหยุ่นแก่ผู้ใช้ในการใช้บริการ
แดชบอร์ดจะให้ภาพรวมของแผนการเดินทางที่สร้างขึ้น เครดิตที่เหลืออยู่ และข้อมูลบัญชีแก่ผู้ใช้ คุณสมบัติที่สำคัญ ได้แก่ :
ส่วนโปรไฟล์ผู้ใช้และการตั้งค่าช่วยให้ผู้ใช้ปรับแต่งประสบการณ์และจัดการข้อมูลบัญชีของตนได้ คุณสมบัติที่สำคัญของส่วนนี้ได้แก่:
เพื่อเพิ่มเวลาตอบสนองในการสร้าง Itineray ฉันจึงใช้ระบบคิว
ประมวลผลงานที่ไม่สำคัญทั้งหมดโดยใช้คิว
แม้ว่าจะมีข้อผิดพลาดหลังจากสร้างแผนการเดินทาง แต่ก็ควรมีกลไกสำรอง ขณะนี้หากมีข้อผิดพลาดในการป้อนข้อมูลในฐานข้อมูล ก็ไม่มีกลไกทางเลือกเนื่องจากแผนการเดินทางสูญหายซึ่งจำเป็นต้องได้รับการแก้ไข
ตอนนี้ฉันได้ปิดการใช้งานนโยบาย RLS แล้ว จะทำงานเกี่ยวกับเรื่องนี้
ปัญหา:
เส้นทางการสร้างการเดินทางใช้เวลานานมากในการสร้างแผนการเดินทาง
ประกอบด้วยหลายกระบวนการ:
สารละลาย:
ด้วยการวิเคราะห์เส้นทางอย่างรอบคอบ ฉันสามารถสรุปได้ว่าการแทรกการตั้งค่าผู้ใช้ การแทรกการตอบกลับ และการอัปเดตเครดิตเป็นงานที่ไม่สำคัญ และการส่งการตอบกลับไปยังผู้ใช้เป็นงานที่สำคัญอย่างยิ่ง
ดังนั้นฉันจึงสามารถทำงานที่ไม่สำคัญเหล่านี้แบบอะซิงโครนัสได้โดยใช้คิว
วิธีการแบบอะซิงโครนัสนี้สามารถลดเวลาตอบสนองได้มาก
การใช้กลไกแคชสามารถปรับปรุงประสิทธิภาพและเวลาตอบสนองของแอปพลิเคชันแผนการเดินทางของเราได้อย่างมาก ด้วยการแคชข้อมูลที่เข้าถึงบ่อย เช่น ปลายทางยอดนิยมหรือการตั้งค่าทั่วไปของผู้ใช้ เราสามารถลดภาระบนเซิร์ฟเวอร์ของเราและให้ผลลัพธ์ที่รวดเร็วยิ่งขึ้นแก่ผู้ใช้ สิ่งนี้อาจเป็นประโยชน์อย่างยิ่งสำหรับผู้ใช้ซ้ำหรือสำหรับการแสดงคำแนะนำเบื้องต้นในขณะที่กำลังสร้างผลลัพธ์ที่เป็นส่วนตัวมากขึ้น
ฉันจะทำเช่นนี้สำหรับแดชบอร์ด ฉันจะแคชแผนการเดินทางที่เพิ่งเยี่ยมชมซึ่งจะลดจำนวนคำขอไปยังฐานข้อมูลในที่สุดทำให้แอปพลิเคชันเร็วขึ้น
เทียบท่าแอปพลิเคชันเพื่อการปรับใช้ที่ง่ายดายบน AWS Elastic Container Service ซึ่งเป็นแนวทางที่ดีที่สุดสำหรับการปรับขนาดอัตโนมัติ
ขณะนี้มีการปรับใช้บน Vercel เพื่อการสาธิต
