Parabah Vue Chatbot Frontend, a library to easily deploy chatbot frontend to your web app

Overview

Parabah Vue Chatbot Frontend

Este projeto é um front end para implementar a interface de um chatbot de forma rápida e simples. Foi desenvolvido em Vue.js e construído com o objetivo de ser um ponto de partida para o desenvolvimento de chatbots em websites.

Partindo do código fornecido aqui é possível construir chatbots mais complexos e também integrar com serviços e frameworks de chatbots de mercado, como por exemplo: Google DialogfFlow, Microsoft Q&A maker, IBM Watson e outros.

Características:

  • Aparência customizável, podendo alterar: a localização na tela, as cores, o avatar, o título, a mensagem de boas-vindas e outros parâmetros.
  • Escrito em Vue.js e, portanto, funcionando como um front-end que é executado no browser.
  • Com exemplos de código que permitem a migração de forma fácil para um servidor Node.js com acesso por meio de uma API.
  • Fornece dois drivers / engines que implementam o acesso básico aos frameworks de chatbot: Google Dialogflow e Microsoft Q&A Maker.
  • Possibilidade de acesso a outros serviços através de programação de novo Engines.

Pré-requisitos

Para utilizar esta biblioteca você necessitará instalar em seu ambiente de desenvolvimento:

A documentação está sendo estruturada de maneira a permitir que este projeto seja utilizado também por não programadores, de forma que a princípio não é necessário conhecimento prévio de Vue.js ou Javascript .

Entretanto, você irá se beneficiar mais deste projeto caso conheça pelo menos o básico de Vue.js e Javascript.

Instalação

Para realizar a instalação entre em um shell, linha de comando, ou terminal e execute os comandos abaixo:

git clone https://github.com/ewertonvaz/pbh_vcf.git chatbot
cd chatbot
npm install
npm run serve

O último comando acima irá compilar o projeto e ativar o mesmo no modo hot-reload que é o mais apropriado para desenvolvimento. Seu chatbot estará, então, disponível acessando a seguinte URL:

http://localhost:8080

Na seção de build / deploy abaixo serão fornecidas instruções de como compilar o projeto para produção e sugestões de como fazer o deploy do aplicativo.

Customizando a aparência

Quando acessar a aplicação exemplo pela primeira vez é possível que você estranhe a aparência inicial do chatbot e a ache simples. Deixei assim de propósito para que você siga as instruções do Guia de Customização e possa alterar a aparência do chatbot de forma a que ele fique com a aparência que você desejar.

Seguindo as instruções do guia acima você poderá alterar o avatar, o título, a posição na tela, as cores, linhas e tamanhos do seu chatbot.

Escolhendo o Engine

O Parabah Vue Chatbot Frontend implementa uma interface genérica que se comunica através de mensagens com Engines, ou motores, de chatbot. Desta forma, é possível, alterando apenas uma linha de código, implementar a comunicação com vários serviços de chatbot.

Neste projeto estão contido 4 engines padrão localizados na pasta src\engines, são eles:

  • pbah_bot.js : é o engine default, implementa um chatbot com acesso ao servidor local e contém a demonstração dos recursos, como tipos de mensagens, disponíveis atualmente neste projeto.
  • pbah_api_bot.js : este engine contém um exemplo de como acessar uma API usando esta bibloteca.
  • dialogflow.js : contém o código necessário para acessar o Google Dialogflow.
  • qnamaker.js : contém o código necessário para acessar o Microsoft Q&A Maker.

Tenha em mente que estes engines são exemplos simplificados e meu objetivo foi fornecer a você um ponto de partida a partir do qual possa desenvolver aplicativos de chatbot mais sofisticados conforme sua necessidade.

Você poder acessar o Guia de Engines para aprender como alternar entre os motores acima e os princípios básicos para desenvolver os seus próprios engines a partir dos exemplos desta biblioteca.

Build e Deploy para produção

Após realizar as alterações que você deseja e escolher o engine desejado, execute o comando abaixo para compilar, minificar e gerar os arquivos do chatbot que poderão ser usados em produção:

npm run build

Após executar o comando acima será criada na pasta do projeto a subpasta chatbot na qual estarão armazenados os arquivos a serem usados no deploy. Leia o Guia do Deploy para saber como colocar em produção o chatbot.

Agradecimento

Já agradeço por ter baixado e experimentado este projeto, espero que tenha sido útil de alguma forma, e peço que, se por acaso você gostar dele, me ajude dando uma estrela aqui no GitHub.

Agora se você gostou muito pode também, mas só se quiser mesmo, clicar na xícara ao lado e me pagar um café.

You might also like...
Kinklist-v2 - New version of kinklist. Kinklist lets you easily share your preferences in kink with others

kinklistv2 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and

Rust app to tag your music library.
Rust app to tag your music library.

OneTagger Cross-platform music tagger written in Rust, Vue.js and Quasar. It can fetch metadata from Beatport, Traxsource, Juno Download and Discogs.

Flutter ARB is a web editor for creating and editing your .arb files needed for internationalising your Flutter applications.

Flutter ARB Editor Description This is a web editor for .arb files, which are required for internationalizing flutter applications using the official

A single-page web-app made to browse and download your Netlify deploys. Built with Vue.js and Vite, deployed on Netlify.

A single-page web-app made to browse and download your Netlify deploys. Built with Vue.js and Vite, deployed on Netlify.

Turn your smartphone into a 3D controller with a web app
Turn your smartphone into a 3D controller with a web app

web-riimote Turn your smartphone into a 3D controller (think Wii remote) with a web app. No need to install mobile or desktop apps. ⚠️ Works best on C

Peachpage - a web app that enables you to store articles you come across on your device for later reading

Peachpage - a web app that enables you to store articles you come across on your device for later reading

Maple-Forest-Frontend - CRM system (Frontend)

Maple-Forest-Frontend Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build

Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays translucent boxes on your screen to guide your eyes while reading.
Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays translucent boxes on your screen to guide your eyes while reading.

Reading Ruler (beta version) Read better using a digital ruler. Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays tra

Javascript Frontend (Vue + Electron) for Exiv2 - C++ Image Metadata Library

GNSS EXIFR Add (or) Replace GeoTag Information from CSV to JPEG (or) JPG Drone Imageries (embedded into EXIF). Remove GeoTag Information from Drone Im

Owner
Ewerton da Costa Vaz
Ewerton da Costa Vaz
P7Groupo Frontend - Frontend du projet 7 de la formation "Developpeur Web" pour OpenClassroom

Frontend du projet 7 de la formation "Developpeur Web" pour OpenClassroom Objectif Construire un réseau social interne pour les employés de Groupomani

Nicolas Lopez 0 Jan 10, 2022
The Coach Finder App is an Web App which should help us find a coach that, for example, helps us become better in web development, whatever.

The Coach Finder App is an Web App which should help us find a coach that, for example, helps us become better in web development, whatever.

Asmaa Adel 2 Aug 27, 2022
🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

?? Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.

EGGSY 30 Sep 3, 2022
Task nr 2 - Frontend Software Engineer. Web-app listing user's repositories based on their popularity.

user_repos Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lint

null 0 Jan 10, 2022
Manage your pictures easily for Github.

Battle Manage your pictures easily for Github. Screenshot Usage Create a New Repository Get Token => https://github.com/settings/tokens Open https://b

xiejiahe 289 Jan 7, 2023
💣 Manage your pictures easily for Github. 基于 Github 轻松管理您的存储图库

Manage your pictures easily for Github. Screenshot Usage Create a New Repository Open https://boomb.cn. Built with Vue3 Element Plus TypeScript Github

xiejiahe 286 Dec 19, 2022
Catus Notebook is an effective and elegant “note as todos” software that allows you to schedule your life and work easily and safely

Catus Notebook The Catus Notebook combines the defination for both a note and a todo to enable you to easily create, edit and schedule your notes effe

Fu Zhang 4 Dec 14, 2022
covid19 live data component. add your website easily

covid19-vue-component Project It's a VueJs component which provides you a list of countries and their COVID-19 datas. It has a search feature. Easy to

Muratcan Şentürk 10 Aug 23, 2022
Rest-api-client - Easily accessible REST API client available on your favorite browser

REST API Client Website: https://l23de.github.io/rest-api-client/ Inspirations t

Lester Huang 0 Jan 1, 2022