mirror of
https://github.com/cheveguerra/bot-whatsapp.git
synced 2026-04-21 13:09:16 +00:00
docs: ✨ updated docs
This commit is contained in:
Leifer Mendez
58
packages/docs/src/routes/docs/concepts/index.mdx
Normal file
58
packages/docs/src/routes/docs/concepts/index.mdx
Normal file
@@ -0,0 +1,58 @@
|
||||
# Conceptos
|
||||
|
||||
Durante el desarrollo de este sistema se elaboraron tres (3) conceptos principales que conformar el funcionamiento
|
||||
|
||||
## Flow (Flujos)
|
||||
|
||||
Los flujos hace referencia al hecho de construir un flujo de conversion. Esto es un flow podemos observar que estan presente dos metodos importantes **addKeyword** y el **addAnswer**.
|
||||
|
||||
Tan sencillo como decir **palabra/s clave** y **mensaje a responder**
|
||||
|
||||
Ambos metodos **[addKeyword](https://github.com/codigoencasa/bot-whatsapp/blob/dev/packages/bot/io/methods/addKeyword.js)** y el **[addAnswer](https://github.com/codigoencasa/bot-whatsapp/blob/dev/packages/bot/io/methods/addAnswer.js)** tienen una serie opciones disponibles
|
||||
|
||||
```js
|
||||
const {
|
||||
createBot,
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'alo'])
|
||||
.addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
|
||||
```
|
||||
|
||||
## Provider (Proveedor)
|
||||
|
||||
Es la pieza que conectara tu flujo con Whatsapp. En este chatbot tenemos varios proveedores disponibles la mayoria gratis pero tambien tenemos integracion la api oficial de whatsapp o twilio
|
||||
|
||||
```js
|
||||
const WhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
|
||||
....
|
||||
const adapterProvider = createProvider(WhatsappProvider)
|
||||
```
|
||||
|
||||
Los proveedores disponibles hasta el momento son los siguientes:
|
||||
|
||||
### [whatsapp-web.js](https://github.com/pedroslopez/whatsapp-web.js)
|
||||
|
||||
**require('@bot-whatsapp/provider/web-whatsapp')**
|
||||
|
||||
### [Venom](https://github.com/orkestral/venom)
|
||||
|
||||
**require('@bot-whatsapp/provider/venom')**
|
||||
|
||||
### [Baileys](https://github.com/adiwajshing/Baileys)
|
||||
|
||||
**require('@bot-whatsapp/provider/baileys')**
|
||||
|
||||
### [Meta Official](https://developers.facebook.com/docs/whatsapp/cloud-api/reference/messages)
|
||||
|
||||
**require('@bot-whatsapp/provider/meta')**
|
||||
|
||||
### [Twilio Official](https://www.twilio.com/es-mx/messaging/whatsapp)
|
||||
|
||||
**require('@bot-whatsapp/provider/twilio')**
|
||||
|
||||
## DataBase (Base de datos)
|
||||
68
packages/docs/src/routes/docs/example/index.mdx
Normal file
68
packages/docs/src/routes/docs/example/index.mdx
Normal file
@@ -0,0 +1,68 @@
|
||||
# Ejemplo
|
||||
|
||||
Si copias y pegas este codigo y tu entorno de trabajo cumple con todos los requesitos te debe funcionar abajo explico muy por encima
|
||||
|
||||
```js
|
||||
const {
|
||||
createBot,
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
|
||||
|
||||
/**
|
||||
* Esta es la funcion importante es la que realmente inicia
|
||||
* el chatbot.
|
||||
*/
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([flowPrincipal])
|
||||
const adapterProvider = createProvider(WebWhatsappProvider)
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
|
||||
main()
|
||||
```
|
||||
|
||||
## Explicando código
|
||||
|
||||
En esta parte solo estamos declaramos las dependencias que vamos a utilizar. Si quieres saber a fondo cada una de las funciones te recomiendo pasarte por la seccion de **[conceptos](/docs/concepts)**
|
||||
|
||||
```js
|
||||
const {
|
||||
createBot,
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const WebWhatsappProvider = require('@bot-whatsapp/provider/web-whatsapp')
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock')
|
||||
```
|
||||
|
||||
La siguiente seccion te declaramos la palabras claves que disparan un flujo de conversación.
|
||||
|
||||
**Ejemplo**:
|
||||
|
||||
Si un usuario te escribe **👦hola** ó **👦alo** el bot respondera
|
||||
|
||||
**🤖Hola, bienvenido a mi tienda, ¿Como puedo ayudarte?**
|
||||
|
||||
**🤖Tengo: Zapatos, Bolsos, etc...**
|
||||
|
||||
```js
|
||||
const flowPrincipal = addKeyword(['hola', 'alo'])
|
||||
.addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
|
||||
```
|
||||
@@ -2,15 +2,14 @@ import Collaborators from '../../components/widgets/Collaborators'
|
||||
|
||||
# Vista rápida
|
||||
|
||||
Los chatbots son una herramienta poderosa para que las empresas y
|
||||
organizaciones comuniquen de forma personalizada y automatizada con sus clientes.
|
||||
Si eres una persona con **poco tiempo y gran capacidad** de comprensión con conocimientos ejecutando proyectos en Node.js y manejo de terminal.
|
||||
|
||||
Está documentación te ayudará a instalar tu bot de whatsapp en simples pasos con el proposito de
|
||||
que tengas un chatbot funcional en solo minutos.
|
||||
que tengas un chatbot funcional en **solo minutos.**
|
||||
|
||||
## Ejecutar
|
||||
|
||||
Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
|
||||
Solo debes de ubicarte en un directorio de tu preferencia, ejecutar el siguiente comando y **seguir las instrucciones**
|
||||
|
||||
```shell
|
||||
npm create bot-whatsapp@latest
|
||||
@@ -33,4 +32,5 @@ npm create bot-whatsapp@latest
|
||||
</video>
|
||||
</div>
|
||||
|
||||
**¿Algun error?**
|
||||
Recuerda que debes de cumplir con los [requisitos minimos](/docs/install) del sistema
|
||||
|
||||
@@ -1,120 +1,41 @@
|
||||
---
|
||||
title: Overview
|
||||
contributors:
|
||||
- adamdbradley
|
||||
- steve8708
|
||||
- manucorporat
|
||||
- gabrielgrant
|
||||
---
|
||||
|
||||
# Instalación
|
||||
|
||||
### 📄 Bienvenido/a
|
||||
A continuacion se describen los puntos técnicos que debes de tener en cuenta antes de trabajar con esta herramienta.
|
||||
|
||||
Si deseas colaborar con el proyecto existen varias maneras, la primera de ellas es aportando conocimiento y mejorando el repositorio (actualizando documentación, mejorando código, revisando **[issues](https://github.com/codigoencasa/bot-whatsapp/issues)**, etc).
|
||||
|
||||
También es bien recibido los aportes económicos que se utilizaran para diferentes fines **[ver más](https://opencollective.com/bot-whatsapp)**
|
||||
|
||||
El lenguaje principal que se utilizó para desarrollar este proyecto fue **JavaScript** con el fin de qué personas que están iniciando en el mundo de la programación puedan entender fácilmente.
|
||||
|
||||
### 🤔 Preguntas frecuentes
|
||||
|
||||
- ¿Como puedo hacer aportaciones de código en el proyecto?: [Ver Video](https://youtu.be/Lxt8Acob6aU)
|
||||
- ¿Como ejecutar el entorno de pruebas?: [Ver Video](https://youtu.be/Mf9V-dloBfk)
|
||||
- ¿Como crear un nuevo proveedor?: [Ver Video](https://youtu.be/cahK9zH3SI8)
|
||||
- ¿Que son los GithubActions?: [Ver Video](https://youtu.be/nYBEBFKLiqw)
|
||||
- ¿Canales de comunicación?: [Discord](https://link.codigoencasa.com/DISCORD)
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
**Requerimientos:**
|
||||
## Requerimientos
|
||||
|
||||
- Node v16 o superior **[descargar node](https://nodejs.org/es/download/)**
|
||||
- **[Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)** como gestor de paquetes. En el link conseguirás las intrucciones para instalar yarn.
|
||||
- **[VSCode](https://code.visualstudio.com/download)** (recomendado): Editor de código con plugins.
|
||||
- **[Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits&ssr=false#overview)** (plugin-vscode) este plugin te ayudará a crear commit semántico.
|
||||
- Se usará la rama **dev** _(https://github.com/leifermendez/bot-whatsapp/tree/dev)_ como rama principal hasta que se haga oficialmente el lanzamiento de la V2.
|
||||
|
||||
### 🚀 Iniciando
|
||||
## ¿Como saber que tengo el Node?
|
||||
|
||||
**Clonar repo rama dev**
|
||||
Solo debes ejecutar el siguiente comando y esperar que la version que te arroja sea superior a v16
|
||||
|
||||
```
|
||||
git clone --branch dev https://github.com/codigoencasa/bot-whatsapp
|
||||
```shell
|
||||
$ node -v
|
||||
v18.12.1
|
||||
```
|
||||
|
||||
**Instalar dependencias**
|
||||
## Opcionales
|
||||
|
||||
```
|
||||
cd bot-whatsapp
|
||||
yarn install
|
||||
```
|
||||
Dependiendo de las opciones de configuraciones que haz marcado al momento de crear el bot **Command Line Interface (CLI)** puede que necesites instalar más cosas.
|
||||
|
||||
**Compilar (build)**
|
||||
Para compilar la aplicación es necesario ejecutar este comando, el cual genera un directorio `lib` dentro de los paquetes del monorepo.
|
||||
**Ejemplo**: Si elegiste _(MySQL)_ como proveedor de base de datos logicamente necesitaras tener un entorno de MySQL.
|
||||
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
📄 Pronto se agregara más informacion y videos explicando esto a fondo.
|
||||
|
||||
**Example-app**
|
||||
Se ejecuta el CLI (Command Line Interface) para ayudarte a crear un app-bot de ejemplo.
|
||||
|
||||
```
|
||||
yarn run cli
|
||||
```
|
||||
|
||||
Selecionas (mediante las flechas arriba y abajo) el proveedor que quieras usar y cuando estes sobre el presiona la barra de espacio, igualmente selecciona la base de datos que quieras usar.
|
||||
|
||||
Se creó un subdirecorio con el nombre del proveedor y base de datos que seleccionaste, ejemplo: `base-bailey-mysql`
|
||||
|
||||
Dentro de ese directorio necesitas editar el archivo package.json y borrar las siguientes lineas:
|
||||
|
||||
```
|
||||
"@bot-whatsapp/bot": "latest",
|
||||
"@bot-whatsapp/cli": "latest",
|
||||
"@bot-whatsapp/database": "latest",
|
||||
"@bot-whatsapp/provider": "latest",
|
||||
```
|
||||
|
||||
Cambiate al directorio creado ejemplo: `base-bailey-mysql`
|
||||
|
||||
```
|
||||
cd base-baileys-mysql
|
||||
```
|
||||
|
||||
Ejecuta los comandos:
|
||||
|
||||
```
|
||||
npm install
|
||||
npm run pre-copy
|
||||
npm start
|
||||
```
|
||||
|
||||
En el caso de MySql y Mongo es necesario especificar en app.js los datos de la conexión, ejemplo de MySql:
|
||||
|
||||
```
|
||||
const BaileysProvider = require('@bot-whatsapp/provider/baileys')
|
||||
const MySQLAdapter = require('@bot-whatsapp/database/mysql')
|
||||
|
||||
/**
|
||||
* Declaramos las conexiones de MySQL
|
||||
*/
|
||||
const MYSQL_DB_HOST = 'localhost'
|
||||
const MYSQL_DB_USER = 'usr'
|
||||
const MYSQL_DB_PASSWORD = 'pass'
|
||||
const MYSQL_DB_NAME = 'bot'
|
||||
```
|
||||
|
||||
|
||||
|
||||
> **NOTA:** [Eres libre de aportar informacion a este documento o arreglar ortografia 🤣](https://github.com/codigoencasa/bot-whatsapp/edit/dev/CONTRIBUTING.md)
|
||||
|
||||
---
|
||||
|
||||
- [Discord](https://link.codigoencasa.com/DISCORD)
|
||||
- [Twitter](https://twitter.com/leifermendez)
|
||||
- [Youtube](https://www.youtube.com/watch?v=5lEMCeWEJ8o&list=PL_WGMLcL4jzWPhdhcUyhbFU6bC0oJd2BR)
|
||||
- [Telegram](https://t.me/leifermendez)
|
||||
<div class="my-4 w-full ">
|
||||
<video
|
||||
class="rounded drop-shadow-xl rounded "
|
||||
width="100%"
|
||||
height="100%"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
>
|
||||
<source
|
||||
src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/console.webm"
|
||||
type="video/webm"
|
||||
/>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { component$, Slot, useStore } from '@builder.io/qwik'
|
||||
import type { DocumentHead } from '@builder.io/qwik-city'
|
||||
import Collaborators from '~/components/widgets/Collaborators'
|
||||
import Footer from '~/components/widgets/Footer'
|
||||
import Header from '~/components/widgets/Header'
|
||||
import NavBar from '~/components/widgets/NavBar'
|
||||
// import Navigation from '~/components/widgets/Navigation'
|
||||
// import Collaborators from '~/components/widgets/Collaborators'
|
||||
// import ExtraBar from '~/components/widgets/ExtraBar'
|
||||
|
||||
export default component$(() => {
|
||||
@@ -14,14 +15,13 @@ export default component$(() => {
|
||||
list: [
|
||||
{ name: 'Vista rápida', link: '/docs' },
|
||||
{ name: 'Instalación', link: '/docs/install' },
|
||||
{ name: 'Configuración', link: '/docs/install' },
|
||||
{ name: 'Ejemplos', link: '/docs/install' },
|
||||
{ name: 'Ejemplo', link: '/docs/example' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Conceptos',
|
||||
list: [
|
||||
{ name: 'Flows', link: '/docs' },
|
||||
{ name: 'Resumen', link: '/docs/concepts' },
|
||||
{ name: 'Proveedores', link: '/docs/install' },
|
||||
{ name: 'Base de datos', link: '/docss' },
|
||||
],
|
||||
@@ -50,8 +50,7 @@ export default component$(() => {
|
||||
</div>
|
||||
<div class={'px-3 col-span-3 slot pb-5'}>
|
||||
<Slot />
|
||||
|
||||
<Collaborators />
|
||||
{/* <Navigation pages={[null,store.options[0][1]]} /> */}
|
||||
</div>
|
||||
<div class={'px-3 col-span-1 '}>
|
||||
<NavBar options={store.options} />
|
||||
@@ -65,7 +64,7 @@ export default component$(() => {
|
||||
})
|
||||
|
||||
export const head: DocumentHead = {
|
||||
title: 'Qwind — Free template for starts a website using Qwik + Tailwind CSS',
|
||||
title: 'Chatbot Whatsapp — Servicio de chatbot para whatspp gratis proyecto OpenSource',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
|
||||
@@ -4,17 +4,17 @@ import type { DocumentHead } from '@builder.io/qwik-city'
|
||||
import Hero from '~/components/widgets/Hero'
|
||||
import Features from '~/components/widgets/Features'
|
||||
import FAQs from '~/components/widgets/FAQs'
|
||||
import Stats from '~/components/widgets/Stats'
|
||||
// import CallToAction from '~/components/widgets/CallToAction'
|
||||
// import Stats from '~/components/widgets/Stats'
|
||||
import CallToAction from '~/components/widgets/CallToAction'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
<Features />
|
||||
{/* <CallToAction /> */}
|
||||
<CallToAction />
|
||||
<FAQs />
|
||||
<Stats />
|
||||
{/* <Stats /> */}
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user