หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

แอพแชท

มันเป็นแอพแชทแชทปกติเช่นแอพอื่น ๆ ตอบสนองอย่างเต็มที่และมือถือครั้งแรก สร้างด้วย Mern Stack โฮสต์ด้วย netlify



ภาพหน้าจอของแอพแชท

เริ่มต้นใช้งาน

คุณสามารถเห็นโครงการนี้อยู่ที่นี่


สร้างด้วย

นี่คือเทคโนโลยีหลักที่ใช้ในโครงการนี้

  • MongoDB - ฐานข้อมูลที่ใช้เอกสาร NOSQL
  • ExpressJS - NodeJS Framework สำหรับเว็บและแอปพลิเคชันมือถือ
  • React - JavaScript Library สำหรับการสร้างส่วนต่อประสานผู้ใช้
  • Redux - คอนเทนเนอร์สถานะที่คาดเดาได้สำหรับแอพ JS
  • nodejs - เครื่องยนต์รันไทม์ JavaScript ที่สร้างขึ้นบนเครื่องยนต์ V8 JavaScript ของ Chrome A ที่ใช้งาน JavaScript นอกเว็บเบราว์เซอร์

เทคโนโลยีอื่น ๆ คือ

  • Sass - ภาษาสคริปต์ preprocessor สำหรับ CSS
  • React-Bootstrap-กรอบส่วนหน้ายอดนิยมมากที่สุดสำหรับส่วนประกอบ UI
  • Bootstrap - กรอบส่วนหน้ายอดนิยมมากที่สุด
  • Pusher - Powering Realtime Experiences สำหรับมือถือและเว็บ
  • JWT - JSON Web Tokens เป็นวิธีการเปิดมาตรฐานอุตสาหกรรม RFC 7519 สำหรับการเรียกร้องการเรียกร้องอย่างปลอดภัยระหว่างสองฝ่าย
  • Mongoose-Mongoose ให้บริการโซลูชันแบบตรงไปข้างหน้าเพื่อเป็นแบบจำลองข้อมูลแอปพลิเคชันของคุณ
  • Multer - แพ็คเกจสำหรับไฟล์ Handeling จากข้อมูลแบบฟอร์ม
  • ปั๊ก - เครื่องกำเนิดเทมเพลตสำหรับการแสดงผลด้านเซิร์ฟเวอร์

การตั้งค่าท้องถิ่น

ไคลเอนต์และเซิร์ฟเวอร์มีที่เก็บแยกต่างหากและเซิร์ฟเวอร์สองตัวจะทำงานในเวลาเดียวกันที่ไดเรกทอรีระดับรูทระดับต่าง ๆ ดังนั้นให้แยกกัน

โครงสร้างโฟลเดอร์ของโครงการ

ข้อกำหนดเบื้องต้น

ติดตั้งโหนด, NPM และ GIT


การตั้งค่าเซิร์ฟเวอร์ 

 git clone https://github.com/ramankarki/chat-app-api.git

cd chat-app-api

npm install nodemon -g

npm install

สร้างไฟล์ config.env ในรูทและเพิ่มตัวแปร ENV บางตัว 

 NODE_ENV=development
DB_STRING=your mongodb database string

// I have used sendgrid to send emails,
// create a sendgrid account and after your setup is done add your credentials here

SENDGRID_USERNAME=your sendgrid username
SENDGRID_PW=your sendgrid password
EMAIL_FROM=email from which you are sending mails.

JWT_SECRET=any random string you want (preferred min 32 strings)
JWT_EXPIRES_IN=expiry date for your jwt tokens
JWT_COOKIE_EXPIRES_IN=expiry date for your cookies

// I have used pusher to make this app real time
// create a pusher account and after your setup is done add your credentials here

PUSHER_APP_ID=your pusher app id
PUSHER_KEY=your pusher app key
PUSHER_SECRET_KEY=your pusher secret key
PUSHER_CLUSTER=your pusher app cluster

ตอนนี้คุณทำเสร็จแล้วและสามารถเริ่มต้นเซิร์ฟเวอร์การพัฒนาของคุณได้ 

 npm run dev

การตั้งค่าไคลเอนต์ 


git clone https://github.com/ramankarki/chat-app-client.git

cd chat-app-client

npm install

สร้างไฟล์. env ในรูทและเพิ่มตัวแปร env เนื่องจากฉันใช้ sass 

 SASS_PATH=node_modules:src/*

สร้างโฟลเดอร์ config inside /src และสร้างไฟล์ dev.js ภายในโฟลเดอร์ config เพื่อเพิ่มปุ่มลับ 

 module.exports = {
  PUSHER_KEY: "YOUR PUSHER KEY FOR CLIENT SIDE",
  PUSHER_CLUSTER: "YOUR PUSHER CLUTER",
};

ตอนนี้คุณทำเพื่อฝั่งไคลเอ็นต์เช่นกันและสามารถเริ่มต้นเซิร์ฟเวอร์ React Development ของคุณ 

 npm run dev

ตอนนี้ควรเปิดหน้าแรกของแอพแชทนี้บนเบราว์เซอร์เริ่มต้นของคุณ

โฮมเพจสำหรับแอพแชท
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด