chat21 ionic

คุณต้องการติดตั้ง Tiledesk บนเซิร์ฟเวอร์ของคุณด้วยคลิกเดียวหรือไม่?

ใช้คู่มือการติดตั้ง Tiledesk

chat21 เป็นแกนหลักของแพลตฟอร์มแชทสดโอเพนซอร์ส tiledesk.com

คุณสมบัติ

ด้วย chat21-ionic คุณสามารถ:

• ส่งข้อความโดยตรงไปยังผู้ใช้ (หนึ่งถึงหนึ่งข้อความ)
• ดูประวัติข้อความ
• คุณลักษณะการอ่านใบเสร็จรับเงินช่วยให้ผู้ใช้ของคุณดูเมื่อส่งข้อความส่งและอ่าน
• มุมมองรายการบทสนทนาพร้อมข้อความสุดท้ายที่ส่ง (เช่น WhatsApp)
• ด้วยตัวจัดการล่วงหน้าคุณสามารถดูได้เมื่อผู้ใช้ออนไลน์หรือออฟไลน์และระยะเวลาไม่ใช้งาน
• การออกแบบที่ตอบสนอง (เดสก์ท็อปและมือถือ)
• ดูโปรไฟล์ผู้ใช้ด้วย FullName และอีเมล
• เข้าสู่ระบบด้วยอีเมลและรหัสผ่าน (ใช้วิธีการรับรองความถูกต้องของอีเมลและรหัสผ่าน Firebase)
• ลงทะเบียนด้วย FullName, อีเมล, รหัสผ่านและรูปภาพโปรไฟล์
• มุมมองรายชื่อผู้ติดต่อพร้อมฟิลด์ FullText Search for fullName

การสาธิตสด

เยี่ยมชม https://web.chat21.org/ เพื่อดูการสาธิตสดของ Chat21-ionic

เอกสาร

กำลังดำเนินการ

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

• ติดตั้ง nodejs: https://nodejs.org/en/download/
• ติดตั้ง Ionic CLI: npm install -g ionic
• ติดตั้ง Cordova: npm install -g [email protected]
• โครงการ Firebase สร้างฟรีหนึ่งรายการบน https://firebase.google.com
• "chat21 firebase cloud function" ติดตั้ง คำแนะนำ: https://github.com/chat21/chat21-cloud-functions

เรียกใช้ Tiledesk กับนักเทียบท่า

คุณต้องการติดตั้งส่วนประกอบ Tiledesk ทั้งหมดบนเซิร์ฟเวอร์ของคุณด้วยการคลิกเพียงครั้งเดียวหรือไม่? ใช้คู่มือการติดตั้ง Tiledesk

การติดตั้ง

• ติดตั้งรีลีสที่เสถียรล่าสุด ตรวจสอบหน้า GitHub รีลีสล่าสุดภายใต้แท็บรีลีสแล้วเรียกใช้

• git clone https://github.com/frontiere21/chat21-ionic.git --branch <LATEST-RELEASE-VERSION>
• cd chat21-ionic

• Build Running: npm install

ฐานไฟ

• สร้างบัญชี Firebase
• สร้างโครงการ Firebase ในคอนโซล Firebase หากคุณยังไม่มี https://console.firebase.google.com/
• ปรับใช้ฟังก์ชั่นคลาวด์ firebase chat21 ตามที่อธิบายไว้ที่นี่: https://github.com/chat21/chat21-cloud-functions

การกำหนดค่า

• กำหนดค่า File Environment.TS ในโฟลเดอร์ SRC/Environment:

   export const environment = {
      supportMode: false,
      production: false,
      remoteConfig: true,
      remoteConfigUrl: '/chat-config.json',
      chatEngine: "mqtt", // OR YOUR CUSTOM CHAT ENGINE
      updloaEngine: "native", // OR YOUR CUSTOM UPLOAD ENGINE
      pushEngine:"none", // OR YOUR CUSTOM PUSH ENGINE
      fileUploadAccept:"*/*",
      logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
      supportMode: false,
      writeToButton: false,
      archivedButton: false,
      firebaseConfig: {
          tenant:"tilechat",
          apiKey: '123ABC..',
          authDomain: 'XYZ.firebaseapp.com',
          databaseURL: 'https://XYZ.firebaseio.com',
          projectId: 'XYZ',
          storageBucket: 'XYZ.appspot.com',
          messagingSenderId: '123456',
          appId: 'CHANGEIT',
          chat21ApiUrl: '<YOUR_CHAT21_CLOUD_FUNCTION_FIREBASE_ENDPOINT>'
      },
       chat21Config: {
          "appId": "tilechat",
          "MQTTendpoint": "mqtt://<YOUR-MQTT-ENPOINT>",
          "APIendpoint": "http://<YOUR-MQTT-API-ENPOINT>"
      },
      "apiUrl": "https://<YOUR-TILEDESK-API-URL>",
      "baseImageUrl": "https://<YOUR-BASE-IMAGE-URL>",
      "dashboardUrl": "https://<YOUR-DASHBOARD-URL>"
      "wsUrl": 'ws://' + window.location.hostname + '/ws/',
  }
  };
  

• logLevel : Chat21-ionic รองรับ 4 ระดับบันทึก คำสั่งซื้อมีดังนี้: Error < Warn < Info < Debug

• fileUploadAccept : Chat21-ionic ช่วยให้คุณสามารถจัดการประเภทของไฟล์ที่สามารถอัปโหลดได้ โดยค่าเริ่มต้นประเภทไฟล์ทั้งหมดจะได้รับการยอมรับ

• wsUrl : ช่วยให้คุณทราบในเวลาจริงสถานะความพร้อมใช้งานของตัวแทนสถานะไม่ว่างของตัวแทนและจำนวนการสนทนาที่ไม่ได้กำหนดสำหรับโครงการที่เลือก

• supportMode : หากตั้งค่าเป็นจริงมันจะแสดงแถบด้านข้างด้านซ้ายซึ่งทำให้แดชบอร์ดและการจัดการแชทฉลาดขึ้น

• writeToButton : หากตั้งค่าเป็นจริงมันทำให้ปุ่มสำหรับการดูรายชื่อผู้ติดต่อที่มองเห็นได้และทำการสนทนาโดยตรงกับพวกเขา

• archivedButton : หากตั้งค่าเป็นจริงมันทำให้ปุ่มสำหรับการดูการสนทนาที่เก็บถาวรปรากฏให้เห็น

การแจ้งเตือน

• เปิด /src/firebase-messaging-sw.js และแทนที่ messagingsenderid: ด้วย <ของคุณ messagingsenderid> ข้อมูลเพิ่มเติมที่นี่: https://angularfirebase.com/lessons/send-push-notificationsin-angular-with-firebase-cloud-messaging/
• firebase-messaging-sw.js จะต้องเข้าถึงได้ในรูทของ WebApp เช่น (https://support.tiledesk.com/firebase-messaging-sw.js)
• หลังจากกระบวนการสร้างให้ตรวจสอบคุณสมบัติ GCM_SENDER_ID ของไฟล์ manifest.json ค่าที่ถูกต้องสำหรับ firebase คือ: "gcm_sender_id": "103953800507"

(ไม่บังคับ) รับรองความถูกต้องด้วยรหัสผ่านอีเมล

• กำหนดค่า Auth Auth ในคอนโซล Firebase เปิดส่วนการตรวจสอบความถูกต้อง> แท็บเมธอดลงชื่อเข้าใช้คุณต้องเปิดใช้งานผู้ให้บริการลงชื่อเข้าใช้อีเมล/รหัสผ่านและคลิกบันทึก สิ่งนี้จะช่วยให้ผู้ใช้สามารถลงชื่อเข้าใช้เว็บแอปด้วยอีเมล https://firebase.google.com/docs/auth/

เรียกใช้แอพบนเบราว์เซอร์

• ตอนนี้คุณจะต้องให้บริการแอพ Run: ionic serve ในเทอร์มินัล

เพิ่มแพลตฟอร์มเบราว์เซอร์และสร้างมัน

• Run: cordova platform add browser@latest
• Run: ionic cordova build browser

ปรับใช้

ปรับใช้บนเว็บเซิร์ฟเวอร์ (Apache หรือ Nginx)

คัดลอกเนื้อหาของแพลตฟอร์มไดเรกทอรี/เบราว์เซอร์/www ไปยังเว็บเซิร์ฟเวอร์สาธารณะของคุณ

ปรับใช้บน Firebase Hosting

• ติดตั้ง Firebase CLI Run: npm install -g firebase-tools
• Run: firebase login (ขั้นตอนเหล่านี้สามารถหลีกเลี่ยงได้หากคุณเคยทำมาก่อนแล้ว)
• เปลี่ยนไดเรกทอรีในเทอร์มินัลเป็นไดเรกทอรีโครงการที่คุณต้องการ (RUN: cd platforms/browser ) และเรียกใช้: firebase init
  • เลือกโฮสติ้ง (กด Spacebar เพื่อเลือก) แล้วกด Return
  • เลือกโครงการของคุณและกด Return
  • ตอบคำถามต่อไปนี้:
    • "คุณต้องการใช้อะไรเป็นไดเรกทอรีสาธารณะของคุณ" www และกด Return
    • "กำหนดค่าเป็นแอพหน้าเดียว?" n และกดกลับ
    • "ไฟล์ www/index.html alredy มีอยู่การเขียนทับ?" n และกดกลับ
• Run: firebase deploy
• ใน Firebase Consol ของคุณคลิกโฮสติ้งและคลิกที่ลิงค์โครงการของคุณข้อมูลเพิ่มเติมที่นี่ https://firebase.google.com/docs/hosting/quickstart?authuser=0

วิ่งบน Android

• รันบนเครื่องจำลอง: ionic cordova run android
• เรียกใช้บนอุปกรณ์: ionic cordova run android --device

วิ่งบน iOS

• รันบนเครื่องจำลอง: ionic cordova run ios
• เรียกใช้บนอุปกรณ์: ionic cordova run ios --device

เรียกใช้กับนักเทียบท่า

ในการเรียกใช้ Chat21-ionic บนพอร์ต 8080 Run:

curl https://raw.githubusercontent.com/chat21/chat21-ionic/master/env.sample --output .env

nano .env #configure .env file properly

docker run -p 8080:80 --env-file .env chat21/chat21-ionic

การสร้างแบรนด์ด้วย Docker

หากคุณต้องการปรับแต่งโลโก้และสินทรัพย์คุณสามารถติดตั้งระดับเสียง Docker และแนบกับโฟลเดอร์สินทรัพย์ หลังจากนั้นคุณสามารถแทนที่ไฟล์สินทรัพย์ลงในปริมาณ Docker

ตัวอย่าง:

 docker run -p 8080:80 --env-file .env --mount source=chat21-ionic-assets-vol,destination=/usr/share/nginx/html/assets  chat21/chat21-ionic

autologin

หากต้องการเข้าสู่ระบบอัตโนมัติผ่านโทเค็น JWT เป็นพารามิเตอร์การสืบค้นของ URL แชทของคุณดังต่อไปนี้:

 "http://localhost:8100/#/conversation-detail?jwt=<JWT_TOKEN>"