chat21 ionic

Voulez-vous installer TILEDESK sur votre serveur en un seul clic?

Utiliser le guide d'installation de Docker Compose Tiledesk

Chat21 est au cœur de la plate-forme de chat en direct open source tiledesk.com.

Caractéristiques

Avec Chat21-ionic, vous pouvez:

• Envoyer un message direct à un utilisateur (un message à un)
• Afficher l'historique des messages
• La fonction de reçus de lecture permet à vos utilisateurs de voir quand un message a été envoyé, livré et lu
• Conversations Liste Voir avec les derniers messages envoyés (comme WhatsApp)
• Avec le gestionnaire de Presense, vous pouvez consulter lorsqu'un utilisateur est en ligne ou hors ligne et la période d'inactivité
• Conception réactive (bureau et mobile)
• Afficher le profil utilisateur avec FullName et Email
• Connectez-vous avec e-mail et mot de passe (utilisez la méthode d'authentification des e-mails et du mot de passe de Firebase)
• Inscription avec FullName, e-mail, mot de passe et photo de profil
• Affichage de la liste des contacts avec Recherche FullText pour FullName Field

Démo en direct

Visitez https://web.chat21.org/ pour voir une démo en direct de Chat21-ionic.

Documentation

En cours Git

Condition préalable

• Installez Nodejs: https://nodejs.org/en/download/
• Installer Ionic CLI: npm install -g ionic
• Installer Cordova: npm install -g [email protected]
• Un projet de base de feu. En créer un gratuit sur https://firebase.google.com
• "Chat21 Firebase Cloud Fonctions" installé. Instructions: https://github.com/chat21/chat21-cloud-functions

Exécutez Tiledesk avec Docker Compose

Voulez-vous installer tous les composants TILEDESK sur votre serveur en un seul clic? Utiliser le guide d'installation de Docker Compose Tiledesk

Installation

• Installez la dernière version stable. Vérifiez la page GitHub la dernière version sous l'onglet des versions, puis exécutez

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

• CONSTRUCTION COMMENT: npm install

Base de feu

• Créer un compte Firebase
• Créez un projet Firebase dans la console Firebase, si vous n'en avez pas déjà. https://console.firebase.google.com/
• Déployer les fonctions de cloud Firebase CHAT21 comme décrit ici: https://github.com/chat21/chat21-cloud-functions

Configuration

• Configurez le fichier Environment.ts dans le dossier SRC / Environments:

   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 : Le CHAT21-IONIC prend en charge 4 niveaux de journal. L'ordre est le suivant: Error < Warn < Info < Debug

• fileUploadAccept : le chat21-ionic vous permet de gérer le type de fichiers qui peuvent être téléchargés. Par défaut, tous les types de fichiers sont acceptés.

• wsUrl : vous permet de savoir en temps réel le statut de disponibilité de l'agent, l'état chargé de l'agent et le nombre de conversations non attribuées pour un projet sélectionné

• supportMode : s'il est défini sur true, il montre la barre latérale gauche qui rend la gestion du tableau de bord et du chat plus intelligent

• writeToButton : S'il est défini sur true, il rend le bouton pour afficher la liste de contacts visible et rend les conversations directes avec eux possibles

• archivedButton : Si vous êtes réglé sur true, il rend le bouton pour visualiser les conversations archivées visibles

Notification push

• ouvrir /src/firebase-messaging-sw.js et remplacer messagingSenSend: par <votre messagingSenSend> plus d'informations ici: https://angularfirebase.com/lesons/send-push-notifications-in-angular-with-firebase-cloud-messing/
• Firebase-Messaging-sw.js doit être accessible à la racine du webapp, par exemple (https://support.tilidesk.com/firebase-singing-sw.js)
• Après le processus de construction, vérifiez la propriété gcm_sender_id du fichier manifeste.json. La valeur correcte pour Firebase est: "gcm_sender_id": "103953800507"

(Facultatif) Authentifiez avec le mot de passe e-mail

• Config Firebase Auth in the Firebase Console Ouvrez la section d'authentification> Onglet Méthode Connexion Vous devez activer le fournisseur de connexion par e-mail / mot de passe et cliquez sur Enregistrer. Cela permettra aux utilisateurs de connecter l'application Web avec leur e-mail https://firebase.google.com/docs/auth/

Exécuter l'application sur le navigateur

• Vous devrez maintenant servir l'application. Exécution: ionic serve dans le terminal.

Ajouter la plate-forme du navigateur et construire

• Exécuter: cordova platform add browser@latest
• Run: ionic cordova build browser

Déployer

Déployer sur un serveur Web (Apache ou Nginx)

Copiez le contenu des plates-formes de répertoire / navigateur / www sur votre serveur Web Dir.

Déploiement sur l'hébergement Firebase

• Installez la CLI de la base de feu. Exécuter: npm install -g firebase-tools
• Run: firebase login (ces étapes peuvent être évitées si vous l'avez déjà fait)
• Changer les répertoires du terminal dans le répertoire de projet souhaité (exécuter: cd platforms/browser ) et exécuter: firebase init
  • Sélectionnez l'hébergement (appuyez sur la barre d'espace pour sélectionner) et appuyez sur retour
  • Sélectionnez votre projet et appuyez sur Retour
  • Répondez aux questions suivantes:
    • "Que voulez-vous utiliser comme répertoire public?" www et retour appuyez sur
    • "Configurer comme une application à une seule page?" N et Retour appuyé
    • "Le fichier www / index.html est Alredy. Écraser?" N et Retour appuyé
• Exécution: firebase deploy
• Dans votre Firebase Consol, cliquez sur l'hébergement et cliquez sur lier votre projet plus d'informations ici https://firebase.google.com/docs/hosting/quickstart?authuser=0

Exécuter sur Android

• Exécuter sur Simulator: ionic cordova run android
• Exécuter sur l'appareil: ionic cordova run android --device

Courir sur iOS

• Exécutez sur Simulator: ionic cordova run ios
• Exécutez sur l'appareil: ionic cordova run ios --device

Courir avec docker

Pour exécuter Chat21-ionic sur le port 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

Marque avec Docker

Si vous souhaitez personnaliser les logos et les actifs, vous pouvez monter un volume Docker et le joindre au dossier Assets. Après cela, vous pouvez remplacer les fichiers Assets dans le volume Docker.

Exemple:

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

Autologine

Pour connecter automatiquement, passer le jeton JWT en tant que paramètre de requête de votre URL de chat comme dans l'exemple suivant:

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