AI talkingdocs

Project ReadMe: ReactJS ด้วย Vite Framework, MongoDB, JWT, Node.js และอื่น ๆ

สารบัญ

1. การแนะนำ
2. เทคโนโลยีที่ใช้
3. การตั้งค่าและการกำหนดค่า
4. โครงสร้างโครงการ
5. การรับรองความถูกต้องและการอนุญาต
6. การจัดเก็บข้อมูล
7. การอัปโหลดไฟล์
8. ส่วนหน้าและ UI
9. จุดสิ้นสุด API

การแนะนำ

โครงการของฉันคือแอปพลิเคชัน PDFChat ที่สร้างขึ้นโดยใช้ ReactJS VITE Framework, MongoDB สำหรับการจัดเก็บข้อมูล, JWT สำหรับการตรวจสอบสิทธิ์ของผู้ใช้และการอนุญาตและ node.js พร้อม Express.js สำหรับแบ็กเอนด์ นอกจากนี้ยังใช้ห้องสมุดและเครื่องมือต่าง ๆ เพื่อการพัฒนาที่มีประสิทธิภาพรวมถึง DOTENV สำหรับการจัดการตัวแปรสภาพแวดล้อม Langchain และร้านค้าเวกเตอร์สำหรับการประมวลผลภาษา Multer สำหรับการอัปโหลดไฟล์และ Axios สำหรับการร้องขอแบ็กเอนด์ โครงการนี้มีสไตล์ด้วย Failwind CSS และ Shadcn Framework สำหรับส่วนต่อประสานผู้ใช้ที่ทันสมัย

ในส่วนหลังฉันใช้ node.js กับ Express.js สำหรับการจัดการคำขอและ MongoDB เพื่อจัดเก็บข้อมูลผู้ใช้และจัดการการเข้าสู่ระบบของผู้ใช้ เพื่อให้สิ่งต่าง ๆ ปลอดภัยฉันใช้โทเค็น JSON Web สำหรับการตรวจสอบผู้ใช้ตรวจสอบให้แน่ใจว่ามีเพียงผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงบางส่วนของโครงการได้

สำหรับการจัดการไฟล์ PDF ฉันใช้เครื่องมือที่เรียกว่า Multer เพื่อจัดเก็บไฟล์และตำแหน่งของพวกเขาในฐานข้อมูล จากนั้นฉันประมวลผล PDF ที่อัปโหลดแล้วแบ่งออกเป็นชิ้นส่วนเล็ก ๆ และเก็บไว้ในร้านค้าเวกเตอร์ HNSW ที่ให้โดย Langchain การเดินทางครั้งนี้ขยายทักษะของฉันและทำให้ฉันเข้าใจถึงความเป็นไปได้ที่ดีขึ้นโดยเทคโนโลยีขั้นสูงเช่น Langchain และ Rag

เทคโนโลยีที่ใช้

• ReactJS : ไลบรารี JavaScript ยอดนิยมสำหรับการสร้างส่วนต่อประสานผู้ใช้
• Vite Framework : เครื่องมือสร้างและเซิร์ฟเวอร์การพัฒนาที่รวดเร็วสำหรับการพัฒนาเว็บที่ทันสมัย
• MongoDB : ฐานข้อมูล NOSQL สำหรับการจัดเก็บข้อมูลผู้ใช้
• JWT (โทเค็น JSON IB) : ใช้สำหรับการตรวจสอบความปลอดภัยและการอนุญาตที่ปลอดภัย
• node.js : รันไทม์ JavaScript สำหรับการสร้างแบ็กเอนด์
• Express.js : กรอบแอปพลิเคชัน Node.js ที่น้อยที่สุดและยืดหยุ่นสำหรับการจัดการเส้นทาง
• DOTENV : สำหรับการจัดการตัวแปรสภาพแวดล้อมรวมถึง OpenAI API Keys, MongoDB ATLAS Credentials และ JWT Secrets
• Langchain : สำหรับการประมวลผลภาษาและการวิเคราะห์ข้อความ
• Multer : มิดเดิลแวร์สำหรับการจัดการการอัปโหลดไฟล์
• Axios : ไคลเอนต์ HTTP ตามสัญญาสำหรับการร้องขอไปยังแบ็กเอนด์
• Tailwind CSS : เฟรมเวิร์ก CSS ยูทิลิตี้แรกสำหรับจัดแต่งทรงผมส่วนหน้า
• Shadcn Framework : เพื่อเพิ่ม UI ด้วยเงาและเอฟเฟกต์

การตั้งค่าและการกำหนดค่า

ก่อนที่จะเรียกใช้โครงการคุณต้องตั้งค่าสภาพแวดล้อมและตัวแปรการกำหนดค่า:

1. โคลนที่เก็บ : เริ่มต้นด้วยการโคลนที่เก็บนี้ไปยังเครื่องในท้องถิ่น

2. การตั้งค่าส่วนหน้า :

   • นำทางไปยังไดเรกทอรีส่วนหน้าและเรียกใช้ npm install เพื่อติดตั้งการพึ่งพาส่วนหน้า
   • ใช้ npm run dev เพื่อเริ่มต้นส่วนหน้า

3. การตั้งค่าแบ็กเอนด์ :

   • นำทางไปยังไดเรกทอรีแบ็กเอนด์และเรียกใช้ npm install เพื่อติดตั้งการพึ่งพาแบ็กเอนด์
   • สร้างไฟล์ .env ในไดเรกทอรีแบ็กเอนด์และตั้งค่าตัวแปรต่อไปนี้:
     • PORT : หมายเลขพอร์ตบนเซิร์ฟเวอร์จะเรียกใช้ (โดยค่าเริ่มต้น 8080)
     • username : MongoDB Atlas Connection ชื่อผู้ใช้
     • password : MongoDB Atlas Connection Password
     • JWT_SECRET : ความลับสำหรับการสร้างโทเค็น JWT
     • OPENAI_API_KEY : คีย์ OpenAI API

4. การตั้งค่าฐานข้อมูล :

   • กำหนดค่าฐานข้อมูล MongoDB โดยใช้ข้อมูลรับรองของคุณเองใน DOTENV

5. เริ่มต้นแบ็กเอนด์ :

   • เรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์แบ็กเอนด์

6. เข้าถึงแอปพลิเคชัน :

   • เยี่ยมชม http://localhost:5173 ในเบราว์เซอร์เพื่อเข้าถึงแอปพลิเคชัน
   • เปิดค่าเริ่มต้น http://localhost:8080 หรือ http://localhost:PORT ในเทอร์มินัลของคุณเพื่อเข้าถึงแอปพลิเคชันส่วนแบ็กเอนด์

โครงสร้างโครงการ

โครงสร้างโครงการถูกจัดเป็นสองไดเรกทอรีหลัก:

• frontend : มีรหัส ReactJS ทั้งหมดสำหรับส่วนหน้าด้วย typeScript
• backend : มีเซิร์ฟเวอร์ node.js โดยใช้ Express.js สำหรับตรรกะแบ็กเอนด์

การรับรองความถูกต้องและการอนุญาต

ฉันใช้ JWT (JSON Web Tokens) สำหรับการรับรองความถูกต้องของผู้ใช้และการอนุญาต เมื่อผู้ใช้ลงทะเบียนหรือเข้าสู่ระบบพวกเขาจะได้รับโทเค็นที่ต้องส่งพร้อมคำขอที่ตามมาเพื่อเข้าถึงเส้นทางที่ได้รับอนุญาต

การจัดเก็บข้อมูล

ข้อมูลผู้ใช้ถูกเก็บไว้ใน MongoDB ฐานข้อมูล NOSQL ที่ยืดหยุ่น ข้อมูลผู้ใช้จะถูกจัดเก็บและเรียกคืนอย่างปลอดภัยตามต้องการสำหรับการโต้ตอบของผู้ใช้

การอัปโหลดไฟล์

ฉันใช้ Multer มิดเดิลแวร์สำหรับจัดการอัปโหลดไฟล์ทำให้ผู้ใช้สามารถอัปโหลดไฟล์เช่นรูปภาพหรือเอกสาร คุณสมบัตินี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยสนับสนุนเนื้อหามัลติมีเดีย

ส่วนหน้าและ UI

ส่วนหน้าได้รับการออกแบบด้วยอินเทอร์เฟซที่ใช้งานง่ายโดยใช้ Tailwind CSS และ Shadcn Framework มันมีประสบการณ์ที่ตอบสนองและน่าดึงดูดสำหรับผู้ใช้

จุดสิ้นสุด API

แบ็กเอนด์ให้จุดสิ้นสุด API ต่างๆเพื่อจัดการข้อมูลผู้ใช้การรับรองความถูกต้องและการอัปโหลดไฟล์ จุดสิ้นสุดเหล่านี้มีการบันทึกไว้ในรหัสและคุณสามารถค้นหารายละเอียดเพิ่มเติมใน codebase ของแบ็กเอนด์