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“.
1_0_einstieg_dialogflow

Hier werden Sie aufgefordert sich mittels google-Accounts authentifizieren.

1_2_einloggen_mit_google_account

1_3_google_account_erstellen

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

1_4_google_account_erstellen

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.

2_0_dialogflow_mit-_google_accont

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

2_1_dialogflow_account_einstellungen

3_0_dialogflow_begin

3_1_dialogflow_agent_erstellen

3_2_dialogflow_agent_erstellen

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.

0_0_github_projekt

Hier finden Sie den Link zum Webapp Projekt: AngularFirebase

Klonen Sie jetzt das github Projekt in Ihr Projekte Verzeichnis.

4_0_clone_webclient

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" ]

5_0_dockerfile

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_0_docker-compose

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_0_environment

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".

8_1_dialogflow_agent_tocken
8_3_dialogflow_agent_tocken

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

8_4_dialogflow_agent_tocken

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

9_1_baue_docker_image
9_2_baue_docker_image
9_3_baue_docker_image

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_1_starte_docker_container
10_2_starte_docker_container

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

11_webclient_starten
11_webclient_test

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