AI talkingdocs

Project ReadMe: ReactJs dengan Vite Framework, MongoDB, JWT, Node.js, dan banyak lagi

Daftar isi

1. Perkenalan
2. Teknologi digunakan
3. Pengaturan dan Konfigurasi
4. Struktur proyek
5. Otentikasi dan Otorisasi
6. Penyimpanan data
7. Unggahan file
8. Frontend dan UI
9. Titik akhir API

Perkenalan

Proyek saya adalah aplikasi PDFChat yang dibangun menggunakan ReactJS Vite Framework, MongoDB untuk penyimpanan data, JWT untuk otentikasi dan otorisasi pengguna, dan Node.js dengan Express.js untuk backend. Ini juga menggunakan berbagai perpustakaan dan alat untuk pengembangan yang efisien, termasuk dotenv untuk manajemen variabel lingkungan, langchain dan toko vektornya untuk pemrosesan bahasa, multer untuk unggahan file, dan axios untuk membuat permintaan ke backend. Proyek ini ditata dengan kerangka kerja CSS dan shadcn tailwind untuk antarmuka pengguna yang ramping.

Di back-end, saya menggunakan Node.js dengan Express.js untuk menangani permintaan dan MongoDB untuk menyimpan informasi pengguna dan mengelola login pengguna. Untuk menjaga hal -hal aman, saya menggunakan token web JSON untuk otentikasi pengguna, memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses bagian -bagian tertentu dari proyek.

Untuk menangani file PDF, saya menggunakan alat yang disebut Multer untuk menyimpan file dan lokasi mereka di database. Kemudian, saya memproses PDF yang diunggah, memecahnya menjadi bagian -bagian yang lebih kecil dan menyimpannya di toko vektor HNSW yang disediakan oleh Langchain. Perjalanan ini memperluas keterampilan saya dan memberi saya pemahaman yang lebih baik tentang kemungkinan yang ditawarkan oleh teknologi canggih seperti Langchain dan Rag.

Teknologi digunakan

• ReactJs : Perpustakaan JavaScript yang populer untuk membangun antarmuka pengguna.
• Vite Framework : Alat pembuatan cepat dan server pengembangan untuk pengembangan web modern.
• MongoDB : Basis data NoSQL untuk menyimpan informasi pengguna.
• JWT (JSON IB Tokens) : Digunakan untuk otentikasi dan otorisasi yang aman.
• Node.js : Runtime JavaScript untuk membangun backend.
• Express.js : Kerangka kerja aplikasi Node.js yang minim dan fleksibel untuk menangani rute.
• DOTENV : Untuk mengelola variabel lingkungan, termasuk kunci API OpenAI, kredensial MongoDB Atlas, dan rahasia JWT.
• Langchain : Untuk pemrosesan bahasa dan analisis teks.
• Multer : Middleware untuk menangani unggahan file.
• AXIOS : Klien HTTP berbasis janji untuk mengajukan permintaan ke backend.
• Tailwind CSS : Kerangka kerja CSS utilitas-pertama untuk menata frontend.
• Shadcn Framework : Untuk meningkatkan UI dengan bayangan dan efek.

Pengaturan dan Konfigurasi

Sebelum menjalankan proyek, Anda perlu mengatur variabel lingkungan dan konfigurasi:

1. Klon The Repository : Mulailah dengan mengkloning repositori ini ke mesin lokal.

2. Pengaturan Frontend :

   • Arahkan ke Direktori Frontend dan jalankan npm install untuk menginstal Dependencies Frontend.
   • Gunakan npm run dev untuk memulai frontend.

3. Pengaturan Backend :

   • Arahkan ke direktori backend dan jalankan npm install untuk menginstal dependensi backend.
   • Buat file .env di direktori backend dan atur variabel berikut:
     • PORT : Nomor port di server akan berjalan. (Secara default 8080)
     • username : Nama Pengguna Mongodb Atlas Connection.
     • password : Kata sandi koneksi MongoDB Atlas.
     • JWT_SECRET : Rahasia untuk generasi token JWT.
     • OPENAI_API_KEY : Kunci API OpenAI.

4. Pengaturan Basis Data :

   • Konfigurasikan database MongoDB menggunakan kredensial yang menyediakan Anda sendiri di DOTENV.

5. Mulailah backend :

   • Jalankan npm start untuk memulai server backend.

6. Akses aplikasi :

   • Kunjungi http://localhost:5173 di browser untuk mengakses aplikasi.
   • Buka http://localhost:8080 atau http://localhost:PORT di terminal Anda untuk mengakses aplikasi bagian backend.

Struktur proyek

Struktur proyek diatur menjadi dua direktori utama:

• frontend : Berisi semua kode ReactJS untuk frontend dengan naskah.
• backend : Berisi server Node.js menggunakan Express.js untuk logika backend.

Otentikasi dan Otorisasi

Saya telah menggunakan JWT (JSON Web Token) untuk otentikasi dan otorisasi pengguna. Ketika pengguna mendaftar atau masuk, mereka menerima token yang harus dikirim dengan permintaan berikutnya untuk mengakses rute resmi.

Penyimpanan data

Informasi pengguna disimpan di MongoDB, database NoSQL yang fleksibel. Data pengguna disimpan dengan aman dan diambil sesuai kebutuhan untuk interaksi pengguna.

Unggahan file

Saya telah menggunakan Multer, middleware untuk menangani unggahan file, memungkinkan pengguna untuk mengunggah file seperti gambar atau dokumen. Fitur ini meningkatkan pengalaman pengguna dengan mendukung konten multimedia.

Frontend dan UI

Frontend dirancang dengan antarmuka yang ramah pengguna menggunakan CSS tailwind dan kerangka shadcn. Ini menawarkan pengalaman yang responsif dan menarik secara visual bagi pengguna.

Titik akhir API

Backend menyediakan berbagai titik akhir API untuk mengelola data pengguna, otentikasi, dan unggahan file. Titik akhir ini didokumentasikan dalam kode, dan Anda dapat menemukan detail lebih lanjut di basis kode backend.