chat21 ionic

Möchten Sie Tiledesk mit nur einem Klick auf Ihrem Server installieren?

Verwenden Sie Docker Compose Tiledesk Installationshandbuch

CHAT21 ist der Kern der Open -Source -Live -Chat -Plattform Tiledesk.com.

Merkmale

Mit Chat21-Ionic können Sie:

• Senden Sie eine direkte Nachricht an einen Benutzer (eine zu einer Nachricht)
• Sehen Sie sich den Nachrichtenverlauf an
• Mit der Funktion von Lesebelegen können Ihre Benutzer feststellen, wann eine Nachricht gesendet, geliefert und gelesen wurde
• Listenansicht der Konversationen mit den letzten gesendeten Nachrichten (wie WhatsApp)
• Mit dem Präsiense -Manager können Sie sich ansehen, wenn ein Benutzer online oder offline ist und die Inaktivitätszeit
• Responsive Design (Desktop und Mobile)
• Zeigen Sie das Benutzerprofil mit Vollname und E -Mail an
• Melden Sie sich mit E -Mail und Passwort an (verwenden Sie die E -Mail- und Kennwortauthentifizierungsmethode).
• Melden Sie sich mit Fullname, E -Mail, Passwort und Profilbild an
• Kontaktlistenansicht mit FullText -Suche nach Fullname -Feld

Live -Demo

Besuchen Sie https://web.chat21.org/, um eine Live-Demo von CHAT21-ionic zu sehen.

Dokumentation

In Arbeit

Voraussetzungen

• Installieren Sie NODEJS: https://nodejs.org/en/download/
• Installieren Sie Ionic CLI: npm install -g ionic
• Installieren Sie Cordova: npm install -g [email protected]
• Ein Firebase -Projekt. Erstellen Sie eine kostenlos unter https://firebase.google.com
• "CHAT21 Firebase Cloud -Funktionen" installiert. Anweisungen: https://github.com/chat21/chat21-cloud-functions

Führen Sie Tiledesk mit Docker Compose aus

Möchten Sie alle Tiledesk -Komponenten auf Ihrem Server mit nur einem Klick installieren? Verwenden Sie Docker Compose Tiledesk Installationshandbuch

Installation

• Installieren Sie die neueste stabile Version. Überprüfen Sie die GitHub -Seite auf der letzten Release unter der Registerkarte Releases und führen Sie dann aus

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

• Build Running: npm install

Firebase

• Erstellen Sie ein Firebase -Konto
• Erstellen Sie ein Firebase -Projekt in der Firebase -Konsole, wenn Sie noch keine haben. https://console.firebase.google.com/
• Bereitstellen von Chat21 Firebase Cloud-Funktionen wie hier beschrieben: https://github.com/chat21/chat21-cloud-functions

Konfiguration

• Konfigurieren Sie die Dateiumgebung.

   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 : Die CHAT21-IONIC unterstützt 4 Protokollebenen. Die Bestellung lautet wie folgt: Error < Warn < Info < Debug

• fileUploadAccept : Mit dem Chat21-Ionic können Sie die Art der Dateien verwalten, die hochgeladen werden können. Standardmäßig werden alle Dateitypen akzeptiert.

• wsUrl : Ermöglicht Sie in Echtzeit den Verfügbarkeitsstatus des Agenten, den geschäftigen Status des Agenten und die Anzahl der nicht zugewiesenen Gespräche für ein ausgewähltes Projekt

• supportMode : Wenn es auf True eingestellt ist

• writeToButton : Wenn auf True gesetzt wird, wird die Schaltfläche zum Anzeigen der Kontaktliste sichtbar und direkte Gespräche mit ihnen ermöglichen

• archivedButton : Wenn auf True gesetzt, wird die Schaltfläche zum Anzeigen archivierter Gespräche sichtbar

Benachrichtigung überschreiten

• Öffnen Sie /src/firebase-messaging-sw.js und ersetzen Sie Messagingsenderid: Mit <Ihr MessagingSenderID> Weitere Informationen hier: https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging/
• Firebase-Messaging-SW.js muss in der Wurzel des WebApp beispielsweise zugänglich sein (https://support.tiledesk.com/firebase-messaging-sw.js)
• Überprüfen Sie nach dem Build -Prozess die Eigenschaft gcm_sender_id der Manifest.json -Datei. Der korrekte Wert für Firebase ist: "gcm_sender_id": "103953800507"

(Optional) Authentifizieren Sie sich mit E -Mail -Passwort

• Config FireBase Auth In der Firebase-Konsole öffnen Sie den Authentifizierungsabschnitt> Anmelden Sie die Registerkarte "Methode" Sie müssen den E-Mail/Passwort-Anmeldeberator aktivieren und auf Speichern klicken. Auf diese Weise können Benutzer die Web-App mit ihrer E-Mail https://firebase.google.com/docs/auth/ anmelden

App auf Browser ausführen

• Jetzt müssen Sie die App servieren. Run: ionic serve .

Fügen Sie die Browserplattform hinzu und erstellen Sie es

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

Einsetzen

Bereitstellen auf einem Webserver (Apache oder Nginx)

Kopieren Sie den Inhalt der Verzeichnisplattformen/Browser/www in Ihr Webserver Public Dir.

Bereitstellung auf Firebase Hosting

• Installieren Sie die Firebase CLI. Run: npm install -g firebase-tools
• Run: firebase login (diese Schritte können vermieden werden, wenn Sie bereits zuvor durchgeführt wurden)
• Ändern Sie die Verzeichnisse im Terminal in Ihr gewünschtes Projektverzeichnis (Lauf: cd platforms/browser ) und rennen: firebase init
  • Wählen Sie Hosting (Drücken Sie die LeaceBar, um sie auszuwählen) und drücken Sie die Rückgabe
  • Wählen Sie Ihr Projekt aus und drücken Sie die Rückgabe
  • Beantworten Sie die folgenden Fragen:
    • "Was möchten Sie als Ihr öffentliches Verzeichnis verwenden?" www und drücken Sie die Rückkehr
    • "Konfigurieren Sie als einseitige App?" N und Presse Return
    • "Datei www/index.html Alredy existiert. Überschreiben?" N und Presse Return
• Run: firebase deploy
• Klicken Sie in Ihrem FireBase Consol auf Hosting und klicken Sie auf Link Ihr Projekt Weitere Informationen hier finden Sie unter https://firebase.google.com/docs/hosting/quickstart?authuser=0

Laufen Sie auf Android

• Laufen Sie auf Simulator: ionic cordova run android
• Laufen auf dem Gerät: ionic cordova run android --device

Renn auf iOS

• Laufen Sie auf Simulator: ionic cordova run ios
• Laufen auf dem Gerät: ionic cordova run ios --device

Mit Docker laufen

Ausführen von Chat21-Ionic auf Port 8080 Ausführen:

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

Branding mit Docker

Wenn Sie Logos und Assets anpassen möchten, können Sie ein Docker -Volumen montieren und an den Ordner der Vermögenswerte anhängen. Danach können Sie die Assets -Dateien in das Docker -Volumen überschreiben.

Beispiel:

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

Autologin

Um das JWT -Token als Abfrageparameter Ihrer Chat -URL wie im folgenden Beispiel zu automatisieren:

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