Sie wollen die bestmögliche Kundenkommunikation, haben aber nicht das nötige Personal dafür: Dann installieren sie sich doch einen Chatbot auf der Webseite. Das geht schneller und ist einfacher als Sie denken. Wir zeigen Ihnen Schritt für Schritt wie sie vorgehen müssen.

Für den eigenen Chatbot bedienen Sie sich der google-eigenen Entwicklung "Dialogflow" https://dialogflow.com . Mit dieser Plattform lassen sich Chatbots leicht erstellen: Von einfach bis anspruchsvoll, je nach Ihren Anforderungen. Zusätzlich zeigen wir Ihnen, wie Sie eine Webapplikation einrichten, bei der der mit Dialogflow eingerichteten Chatbot, zu Kommunikation benutzt wird.

Wir haben den Ablauf kurz für Sie zusammengefasst:

• Erstellen Sie einen google-Account
• Verbinden Sie Dialogflow mit dem google-Account
• Erstellen eines Dialogflow-Agent
• Klonen Sie ein Angular Projekt vom Github
• Fügen Sie dem Projekt eine Dockerfile und Docker-compose-Datei hinzu
• Erstellen Sie eine environments-Datei
• Access-Token des Dialogflow-Agents in die evironments Datei hinzufügen
• Bauen Sie das Docker-Image
• Starten Sie den Docker Container
• Starten Sie den Webclient

1. Erstellen Sie einen google-Account
Gehen Sie auf die Webseite von Dialogflow https://dialogflow.com und wählen den punkt „Signup for free“.

Hier werden Sie aufgefordert sich mittels google-Accounts authentifizieren.

Wir raten Ihnen: Erstellen für den zukünftigen Chatbot einen eigenen google-Account – so kommen Sie nicht mit anderen google-Accounts durcheinander.

2. Verbinden Sie "Dialogflow" mit dem google-Account
Sobald Sie mit der Erstellung des google-Account fertig sind, werden Sie aufgefordert "Dialogflow" dem google-Account hinzuzufügen.

3. Erstelle Dialogflow Agent
Legen Sie jetzt einen "Chatbot Agent" an.

4. Klonen Sie ein Angular Projekt vom Github
Jetzt können Sie sich der Webapplikation widmen, die später mit dem Chatbot Agent kommunitieren wird. Hierfür können Sie auf eine Vielzahl von github-Projekten zurückgreifen. Als gutes Beispiel empfiehlt es sich für Sie auf eine Angular Webapp von AngularFirebase auf github.com zurückzugreifen.

Hier finden Sie den Link zum Webapp Projekt: AngularFirebase

Klonen Sie jetzt das github Projekt in Ihr Projekte Verzeichnis.

5. Fügen Sie dem Projekt eine Dockerfile und Docker-compose-Datei hinzu
Damit das bauen und ausführen der Webapplikation einfacher wird , empfiehlt es sich die Applikation in einem Docker-Container zu starten. Dazu fügen Sie dem Angular Projekt folgende Docker-Dateien hinzu:
Quellcode Dockerfile

# base image
FROM node:alpine

# set working directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install -g @angular/cli
COPY . /usr/src/app

EXPOSE 4200 49153

CMD [ "ng", "serve", "--host", "0.0.0.0", "--poll", "1" ]

und docker-compose.yml Datei
Quellcode docker-compose.yml

version: '3.5'

services:
  web:
    container_name: dialogflowchatbot
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src/app/
      - '/usr/src/app/node_modules'
    ports:
      - '4200:4200'
      - '49153:49153'
    environment:
      - NODE_ENV=dev
    command: "ng serve --host 0.0.0.0 --poll 1"

6. Erstelle environments Datei
Die Webapplikation benötigt noch Umgebungsvarible für den Token des Chatbot Agents.
Dazu legen Sie im Webapp Projekt „environments“ Verzeichnis mit der Datei „environment.ts“ an.

7. Access-Token des Dialogflow Agents in die evironments Datei hinzufügen
Den benötigten Access-Token finden Sie auf "Dialogflow" unter den "Agent Einstellungen".

Hier kopieren Sie den Access-Token und fügen Sie ihn in der „environments.ts“-Datei hinzu.

8. Bauen Sie das Docker-Image
Die Webapplikation ist fertig und Sie können nun das Docker-Image bauen.

9. Starten Sie den Docker-Container
Um die Webapplikation nun ausführen zu können, starten Sie einen Docker-Container von dem zuvor gebauten Image.

10. Starten Sie den Webclient
Der Webserver lauscht auf http://localhost:4200 und Sie können nun im Browser den Chatbot ausprobieren.

In unserem zweiten Teil lesen Sie, wie Sie Ihren Chatbot mit KI intelligent machen.