NextJs Messenger Clone

NextJS-Messenger-Clone

แอพแชทแบบเรียลไทม์ที่ตอบสนองได้อย่างสมบูรณ์ซึ่งทำด้วย NextJS 13 (เราเตอร์แอพ), MongoDB, Tailwind CSS, Pusher, Next-Auth และ Cloudinary

• nextjs (13.4.x)
• ตอบสนอง (18.x)
• MongoDB (6.x)
• Tailwind CSS (3.x)
• Pusher (5.x)
• Next-Auth (4.x)
• typescript (5.x)
• สคริปต์การผลิตการผลิต

การสาธิตสด

ดูการสาธิตสดใน Vercel

คุณสมบัติ

• การอัปเดตแชทแบบเรียลไทม์ด้วย Pusher
• การแชทเป็นกลุ่ม
• ลบประวัติการแชท
• ภาพโฮสติ้งด้วยคลาวด์
• การรองรับธีมแบบไดนามิก (โหมดแสงและมืด)
• รองรับทั้งหน้าจอเดสก์ท็อปและมือถือ

การติดตั้ง

การตั้งค่า mongoDB

1. ไปที่ https://www.mongodb.com/atlas/database และลงทะเบียน

2. ค้นหาและเลือก Build a Database
   เลือกระดับฟรีและกด Create ที่ด้านล่าง
   

3. สร้างผู้ใช้ (หมายเหตุรหัสผ่าน)
   เลื่อนลงเพื่อ Add entries to your IP Access List
   ป้อน 0.0.0.0/0 แล้วกด Add Entry
   

4. กด Go to Databases
   

5. คลิกที่ Connect และเลือก MongoDB for VSCode
   คัดลอกสตริงการเชื่อมต่อและบันทึกไว้ใน Notepad
   แทนที่ <password> ด้วยการตั้งรหัสผ่านของคุณในขั้นตอนที่ 3
   เพิ่ม test ที่ส่วนท้ายของสตริงการเชื่อมต่อ (เช่น connectionstring/test )
   

การตั้งค่าการรับรองความถูกต้องของ GitHub

1. ไปที่ https://github.com/
   คลิกที่ดรอปดาวน์โปรไฟล์ของคุณที่ด้านบนขวา
   คลิก Settings
   

2. คลิก Developer settings
   คลิก OAuth Apps
   คลิก New OAuth App
   

3. ตั้งชื่อแอปของคุณ
   พิมพ์ http://localhost:3020/ ใน Homepage URL และฟิลด์ Authorization callback URL
   คลิก "แอปพลิเคชันลงทะเบียน"
   

4. คัดลอก Client Id และจดบันทึกลง
   คลิกที่ Generate a new client secret คัดลอกและจดบันทึกลง
   

ตั้งค่าการรับรองความถูกต้องของ Google

1. ไปที่ https://console.cloud.google.com และสร้างโครงการใหม่
   

2. นำทางไปยังโครงการที่สร้างขึ้นใหม่และค้นหา API & Services
   

3. ไปที่ OAuth consent screen
   คลิกฟิลด์ External
   คลิก CREATE
   

4. คลิกฟิลด์ App name และตั้งชื่อ
   ในฟิลด์ผู้ใช้เมลเลือกอีเมลของคุณ
   เลื่อนลงไปที่ Developer contact information และพิมพ์อีเมลของคุณ
   คลิก SAVE AND CONTINUE จนกว่าคุณจะอยู่ในขั้นตอน Summary
   

5. ไปที่ Credentials
   คลิก CREATE CREDENTIALS
   เลือก OAuth client ID
   

6. เลือก Web application เป็นประเภทแอปพลิเคชัน
   เลื่อนลงไปที่ Authorized redirect URIs และเพิ่ม http://localhost:3020/api/auth/callback/google
   คลิก CREATE
   คัดลอก CLient ID และ Client Secret และจดบันทึกลง
   

ตั้งค่าคลาวด์

1. ไปที่ https://console.cloudinary.com และเข้าสู่ระบบ
   ไปที่ Dashboard และจดบันทึก Cloud name ลง
   

2. ไปที่การตั้งค่า
   จากนั้นไป Upload
   

3. คลิก Add upload preset
   เปลี่ยน Signing Mode เป็น Unsigned
   คลิก Save คัดลอกชื่อที่ตั้งไว้ล่วงหน้าใหม่และจดบันทึกลง
   

ตัวเร่งความเร็ว

1. ไปที่ https://dashboard.pusher.com/channels
   คลิก Create app (หรือ Get Started )
   ตั้งชื่อแอป
   เลือก React สำหรับ Frontend และ Node.js สำหรับแบ็กเอนด์
   สร้างแอพ
   

2. ไปที่ App Keys
   บันทึกค่าลง
   

โครงการตั้งค่า

1. โคลน/ดาวน์โหลด repo
2. สร้างไฟล์ที่เรียกว่า. env.local ในไดเรกทอรีรูทของโครงการของคุณพิมพ์ต่อไปนี้ใน cmd/powershell

    cp env.example .env.local
   

3. ภายในไฟล์ .env.local เพิ่ม mongoDB, pusher, Cloudinary, GitHub และ Google Keys จากขั้นตอนก่อนหน้า
4. yarn install เพื่อติดตั้งการพึ่งพา (เรียกใช้ npm install yarn หากคุณไม่ได้ติดตั้งเส้นด้าย)
5. yarn prisma db push เพื่อสร้างคอลเลกชัน db
6. prisma generate เพื่อสร้างไคลเอนต์ Prisma

การใช้งาน

การพัฒนา

yarn dev

• สร้างแอพอย่างต่อเนื่อง (เปิดใช้งาน HMR)

การผลิต

yarn build yarn start

• สร้างแอพหนึ่งครั้ง (ปิดใช้งาน hmr) ถึง /.next/

---

คำสั่งทั้งหมด

สั่งการ	คำอธิบาย
yarn dev	สร้างแอพอย่างต่อเนื่อง (เปิดใช้งาน HMR)
yarn build	สร้างแอพหนึ่งครั้ง (ปิดใช้งาน hmr) ถึง /.next/
yarn start	เรียกใช้การผลิต

ดูด้วย

• แนวคิดการออกแบบบางอย่างนำมาจาก Facebook Messenger
• แนวคิดการใช้งานบางอย่างสำหรับโครงการนี้นำมาจาก Josh และ Antonio
• โครงการถูก bootstrapped ด้วย create-next-app