dialogflow web v2

Dialogflow für Web v2

Mit Dialogflow können Sie Konversationsschnittstellen zusätzlich zu Ihren Produkten und Dienstleistungen erstellen, indem Sie eine leistungsstarke NLU-Engine (Natural Language Understanding) bereitstellen, um Eingaben in natürlicher Sprache zu verarbeiten und zu verstehen

Dies ist eine inoffizielle Webintegration für Dialogflow V2

Hinweis : Im August 2021 habe ich die Web-App auf Vue 3 aktualisiert, Sicherheitslücken behoben und Abhängigkeiten aktualisiert. Die Software ist kostenlos, meine Zeit jedoch nicht. Erwägen Sie, mich über PayPal oder eine kommerzielle Vereinbarung zu unterstützen

Merkmale

• Progressive Web-App (100/100 Lighthouse-Score)
• Barrierefreiheitsfunktionen
• Umfangreiche Browser-Unterstützung (IE8+), Offline-Fähigkeiten (Verlauf) und großartige SEO
• Vertraute Benutzeroberfläche und UX, basierend auf den offiziellen Google Assistant-Designspezifikationen
• Dunkler Modus und Themen
• Freihändige Interaktion mit Spracheingabe und Sprachfeedback (mit SSML)
• Sprachunabhängig
• Docker- und Kubernetes-Unterstützung
• Rich-Component, Webhook und Actions on Google Support (Demo)
• Floating Widget zum Einbetten auf Websites (Repo und Demo)
• Basierend auf Vue 3 , Webpack, Babel und PostCSS
• Leicht (Build ist ~50 KB gzippt)
• Kostenlos und vollständig dokumentiert
• Hergestellt in Deutschland
• Empfohlen von Dialogflow und MadeWithVueJS

gesponsert von Vokode – einem Audio-Marketing-Studio aus Paris, das sich um Sounddesign, Podcasts und Sprach-Apps kümmert

Installation

Anforderungen

• NodeJS
• npm oder Garn
• Google-Konto und Dialogflow V2-Agent (wenn Sie nach V1 suchen, verwenden Sie bitte mein altes Repo)

Backend

Dialogflow Gateway ermöglicht Integrationen von Drittanbietern wie dieser den sicheren Zugriff auf die Dialogflow V2-API

• Dokumentation
• Implementierungen

AD Dialogflow Gateway von Ushakov (gehostet) ist der schnellste Weg, mit Dialogflow for Web v2 zu beginnen

Klonen Sie das Repository

Sie können Git verwenden oder von GitHub herunterladen

Installieren Sie die Abhängigkeiten

Öffnen Sie den geklonten Ordner. Installieren Sie dann mit Ihrem Paketmanager die Abhängigkeiten

Verwenden von npm

npm i

Garn verwenden

yarn

Verbinden Sie den Agenten

Öffnen Sie src/config/index.js und ändern Sie die endpoint in Ihre Dialogflow Gateway-URL

Hinweis: Die URL für das von Ushakov gehostete Dialogflow Gateway ist immer Ihre Google Cloud-Projekt-ID + .core.ushaflow.io . Wenn Sie Probleme haben, stellen Sie sicher, dass Ihr Agent mit dem Gateway verbunden ist. Besuchen Sie dann die Konsole, klicken Sie auf „Verwalten“ und kopieren Sie die Gateway-URL

Beispiel

 export default {
    endpoint : 'https://dialogflow-web-v2.core.ushaflow.io'
    [ ... ]
}

[ ... ]

Das Logo, der Name des Agenten, die Beschreibung und die verfügbaren Sprachen werden von Dialogflow abgerufen. Ändern Sie sie in Dialogflow und es wird mit der Benutzeroberfläche synchronisiert. Bitte beachten Sie, dass Sie beim Hinzufügen neuer Sprachen möglicherweise auch einen Teil der Benutzeroberfläche übersetzen müssen ( translations.json in src/translations ).

Entwickeln

Öffnen Sie Ihren geklonten Ordner. Führen Sie dann mit Ihrem bevorzugten Paketmanager den Befehl serve aus

Verwenden von npm

npm run serve

Garn verwenden

yarn serve

Ihr Standardbrowser sollte sich öffnen und zu localhost:8080 umleiten. Wenn der Port 8080 bereits verwendet wird, können Sie ein port angeben, um eine Verbindung am angegebenen Port herzustellen

Verwenden von npm

npm run serve --port 9090

Garn verwenden

yarn serve --port 9090

BITTE VERWENDEN SIE DEN ENTWICKLUNGSSERVER NICHT ZUM BEREITSTELLEN IHRER APP FÜR BESUCHER. DER ENTWICKLUNGSSERVER IST FÜR DIE ENTWICKLUNG GEDACHT. BITTE LADEN SIE BUILD-ARTEFAKTE AUF EINEN STATISCHEN WEBSERVER HOCH

Thema

Sie können ein benutzerdefiniertes Design für Dialogflow for Web v2 gemäß der Spezifikation erstellen:

Um die Variablen anzuwenden, öffnen Sie src/style/theme.sass und ändern Sie sie im :root Selektor

Sie können Ihr Design auch für Clients mit aktiviertem Dark-Modus in derselben Datei und demselben Selektor unter @media (prefers-color-scheme: dark) optimieren.

Bauen

Ihre App wird im dist -Verzeichnis gebündelt

Zum Erstellen können Sie npm oder Yarn verwenden

Verwenden von npm

npm run build

Garn verwenden

yarn build

Aktualisieren

Führen Sie git pull origin master aus, um Änderungen zu integrieren

Halten Sie außerdem die Vue-Pakete auf dem neuesten Stand

 vue upgrade

Häufig gestellte Fragen

• F: Ich sehe keine Änderungen
• A: Stellen Sie sicher, dass Sie den Cache geleert und die App neu erstellt haben . Gehen Sie in Safari zu „Entwickeln“ > „Caches leeren“. In Chrome: „Entwicklertools“ > „Anwendung“ > „Speicher löschen“ > „Site-Daten löschen“

Anfragen

Kontaktieren Sie den Entwickler oder eröffnen Sie ein Problem