Unduhan Travel - Unduhan kode Sumber Travel

Travel

Kode Sumber AI

1.0.0

Unduh

Github: https://github.com/mohdjami/Travel

Tautan yang Dikerahkan: https://travelplanai.vercel.app/

Video YT: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq

Arsitektur dan Aliran Aplikasi

Diagram di atas memberikan gambaran umum tingkat tinggi tentang Aplikasi, layanan, dan solusi.

Saya telah memanfaatkan Next.js, Supabase, Gemini-1.5-flash Model, Shadcn, TypeScript, dan Tailwind CSS.

Daftarkan akun Anda di https://travel-three-lovat.vercel.app/signup
Anda akan login dan diarahkan ke Halaman / Rencana Perjalanan.
Setiap pengguna menerima 5 Kredit karena saya juga memiliki token terbatas dari Gemini API.
Isi formulir Rencana Perjalanan dan klik Tombol Hasilkan.
Diperlukan waktu beberapa detik, permintaan dikirim ke Backend dengan data Preferensi pengguna.
Pengendali Rute membuat dB preferensi pengguna, membuat Prompt yang Dipersonalisasi.
Prompt dikirim ke Model Gemini, dan respons diterima.
Setelah menerima respons, respons tersebut disempurnakan, dibersihkan, dan diurai ke JSON.
Responsnya kemudian disimpan dalam database dan dikirim kembali ke Klien.
Fronted menggunakan Leaflet Maps API untuk menampilkan lokasi setiap Aktivitas.
Bingo!! Rencana Perjalanan siap diunduh dalam format PDF atau TXT.
Anda dapat membuka Dasbor untuk Mengelola dan melihat Rencana Perjalanan terkini.

Skema ERDiagram

Detail Implementasi

Saya telah membagi Aplikasi ke dalam Modul-Modul ini.

Otentikasi dan Otorisasi

Supabase digunakan untuk Mengautentikasi dan mengotorisasi pengguna
Mengapa Supabase untuk Otentikasi dan Penyimpanan Data?
1. Semua dalam satu Tempat, Otentikasi, Penyimpanan, Basis Data.
2. Supabase dibangun di atas PostgreSQL, menawarkan sistem database yang kuat dan kaya fitur, yang memungkinkan untuk menulis kueri SQL mentah untuk membuat Tabel, kebijakan RLS, dan izin GRANT.
3. Pengalaman pengembang yang luar biasa.
Github
1. Membuat Aplikasi OAuth di Github dan mengintegrasikannya ke Database.
2. Di auth/callback/route.ts tempat kode ditukar untuk otentikasi, pengguna baru dibuat di Database.
Kredensial
1. Pengguna membuat akun.
2. Pengguna dibuat di layanan otentikasi.
3. Pengguna baru ditambahkan ke tabel Pengguna di Supabase.

Generasi Rencana Perjalanan

Di sini kami telah menggunakan Model Google gemini-1.5-flash.

Next.js untuk membangun aplikasi full stack.

Next.js adalah pilihan yang sangat baik karena Rendering Sisi Server, Pembuatan Situs Statis, dan SEO.

Mengapa Next.js?

Rute API membuatnya sangat mudah untuk membuat titik akhir untuk aplikasi.
Perutean Berbasis File meningkatkan Pengalaman Pengembang.
Perpustakaan seperti Shadcn dan Tailwind menghemat banyak waktu dan membangun UI yang lancar.
Dukungan TypeScript kelas satu tanpa konfigurasi tambahan yang tidak kami dapatkan di Node.js
Penerapan yang Cepat dan Mudah.
Untuk proyek yang memerlukan rendering sisi server, rute API, dan skalabilitas, Next.js menyediakan solusi yang kuat, berperforma tinggi, dan ramah pengembang. Integrasinya dengan React, pengoptimalan bawaan, dan dukungan komunitas yang kuat menjadikannya pilihan menarik untuk pengembangan web modern.

Formulir Rencana Perjalanan

Setelah menerima Preferensi Pengguna dari Formulir Rencana Perjalanan, permintaan dikirim ke Backend dengan semua datanya.

Tampilkan Rencana Perjalanan

Rencana perjalanan kemudian digunakan di Komponen untuk menampilkan data. Saya juga telah mengintegrasikan peta dari brosur.

Gemini-1,5-flash

Gemini-1.5-flash adalah model AI canggih yang dikembangkan oleh Google yang mendukung pembuatan rencana perjalanan dalam aplikasi kita. Model ini unggul dalam memahami preferensi perjalanan yang kompleks dan menghasilkan rencana perjalanan yang terperinci dan dipersonalisasi. Dengan memanfaatkan flash Gemini-1.5, kami dapat membuat rencana perjalanan yang sangat disesuaikan dengan mempertimbangkan faktor-faktor seperti keterbatasan anggaran, minat pribadi, dan durasi perjalanan.

Mengapa saya menggunakan AI dibandingkan melakukan panggilan API secara manual untuk mendapatkan Data Lokasi?

Ini menawarkan beberapa keuntungan utama untuk aplikasi rencana perjalanan kami. Pertama, pembuatan rencana perjalanan yang didukung AI dapat memproses sejumlah besar data tentang tujuan, objek wisata, dan preferensi pengguna dengan lebih cepat dan efisien dibandingkan metode manual. Kedua, hal ini memungkinkan rekomendasi yang sangat dipersonalisasi yang dapat beradaptasi dengan minat dan batasan unik setiap pengguna. Terakhir, AI dapat terus mempelajari dan menyempurnakan sarannya berdasarkan masukan pengguna dan tren perjalanan, memastikan aplikasi kami tetap relevan dan berharga bagi wisatawan.

Integrasi Peta Selebaran

Leaflet adalah perpustakaan JavaScript sumber terbuka untuk peta interaktif ramah seluler. Untuk mengintegrasikan peta Leaflet ke dalam aplikasi rencana perjalanan kami, kami mengikuti langkah-langkah utama berikut:

Menginstal paket Leaflet dan pembungkus React-nya
Membuat komponen Peta dinamis untuk menangani rendering sisi klien
Penanda yang diterapkan untuk setiap lokasi kegiatan dalam rencana perjalanan

Dengan menggabungkan peta Leaflet, saya meningkatkan pengalaman pengguna dengan menyediakan konteks visual untuk setiap tujuan dan aktivitas dalam rencana perjalanan yang dibuat.

Saya juga menghadapi masalah dengan brosur yaitu komponen Peta tidak dimuat 100% yang menyebabkan kesalahan dan halaman tidak dimuat dengan benar. Jadi saya mengatasi masalah ini dengan solusi ini.

Fitur Tambahan:

Sistem Berbasis Kredit

Untuk meningkatkan pengalaman pengguna dan mengelola penggunaan API, saya menerapkan sistem berbasis kredit. Begini cara kerjanya:

Pengguna baru menerima 5 kredit gratis saat mendaftar
Setiap generasi rencana perjalanan menggunakan 1 kredit
Pengguna dapat membeli kredit tambahan sesuai kebutuhan (Terapkan di masa mendatang)

Sistem ini memungkinkan kami mengontrol biaya API sekaligus memberikan fleksibilitas kepada pengguna dalam menggunakan layanan.

Dasbor

Dasbor memberi pengguna gambaran umum tentang rencana perjalanan yang mereka buat, sisa kredit, dan informasi akun. Fitur utama meliputi:

Daftar rencana perjalanan terkini.
Tampilan saldo kredit dan opsi untuk membeli lebih banyak kredit

Profil dan Pengaturan Pengguna

Bagian Profil Pengguna dan Pengaturan memungkinkan pengguna untuk menyesuaikan pengalaman mereka dan mengelola informasi akun mereka. Fitur utama dari bagian ini meliputi:

Saat ini pengguna hanya dapat memperbarui nama pengguna
Di masa depan saya dapat menerapkan email, kata sandi, dan unggahan gambar.

Qstash

Untuk meningkatkan waktu respons dalam menghasilkan Itineray, saya menerapkan sistem antrian.

Memproses semua tugas non-kritis menggunakan antrian.

Masalah Baru Terjadi

Meskipun ada kesalahan setelah membuat Rencana Perjalanan, harus ada mekanisme cadangan. Saat ini jika ada kesalahan dalam memasukkan data ke database, tidak ada mekanisme fallback yang menyebabkan Itinerary hilang dan perlu diperbaiki.

Untuk saat ini saya telah menonaktifkan Kebijakan RLS. Akan mengerjakan ini

Perbaikan di Masa Depan

Masalah:

Rute pembangkitan perjalanan membutuhkan banyak waktu untuk menghasilkan rencana perjalanan.

Ini berisi beberapa proses:

Menerima preferensi pengguna dan membuat tabel di database.
Dapatkan Pengguna yang masuk saat ini.
Menghasilkan prompt yang Dipersonalisasi dan mengirimkannya ke Model AI Gemini.
Menerima respons, menyesuaikannya, mengurai respons ke dalam JSON karena saya menyimpan respons JSON langsung di database.
Memperbarui kredit yang tersisa dari pengguna.
Mengirim kembali tanggapan.

Larutan:

Dengan menganalisis rute dengan cermat, saya dapat menyimpulkan bahwa Memasukkan Preferensi Pengguna, Memasukkan Respons, dan Memperbarui Kredit bukanlah tugas yang penting dan mengirimkan respons kepada pengguna adalah tugas penting yang utama.

Jadi saya dapat melakukan Tugas-Tugas non-Kritis ini secara Asinkron dengan menggunakan antrian.

Pendekatan asinkron ini dapat mengurangi banyak Waktu Respons.

cache

Menerapkan mekanisme caching dapat meningkatkan kinerja dan waktu respons aplikasi rencana perjalanan kita secara signifikan. Dengan menyimpan data yang sering diakses dalam cache, seperti tujuan populer atau preferensi umum pengguna, kami dapat mengurangi beban pada server kami dan memberikan hasil yang lebih cepat kepada pengguna. Hal ini bisa sangat bermanfaat bagi pengguna berulang atau untuk menampilkan rekomendasi awal sementara hasil yang lebih dipersonalisasi dihasilkan.

Saya akan melakukan ini untuk Dasbor, saya akan menyimpan Rencana Perjalanan yang baru-baru ini saya kunjungi yang akan mengurangi jumlah permintaan ke Basis Data yang pada akhirnya membuat aplikasi Lebih Cepat.

Penyebaran

Melakukan Docker pada aplikasi untuk kemudahan penerapan di AWS Elastic Container Service yang merupakan pendekatan terbaik untuk penskalaan otomatis.

Saat ini digunakan di Vercel untuk penggunaan demo.

Memperluas

Informasi Tambahan