mirror of
https://github.com/cheveguerra/bot-whatsapp.git
synced 2026-04-18 03:29:15 +00:00
docs: se agrego ejemplo de flujos hijos a MIGRATION.md
excelente trabajo como siempre
This commit is contained in:
Leifer Mendez
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["xyc.vscode-mdx-preview"]
|
||||
}
|
||||
86
MIGRATION.md
86
MIGRATION.md
@@ -2,9 +2,9 @@
|
||||
|
||||
#### Versión (legacy)
|
||||
|
||||
En la ***versión (legacy)*** se implementas los flujos de esta manera, en dos archivos independientes.
|
||||
En la ***versión (legacy)*** se implementaban los flujos de esta manera, en dos archivos independientes.
|
||||
|
||||
> __`initial.json`__ para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar.
|
||||
> __`initial.json`__ para establecer las palabras claves y el flujo a responder, por otro lado tambien se necesitaba implementar
|
||||
> __`response.json`__ donde se escriben los mensajes a responder.
|
||||
|
||||
```json
|
||||
@@ -77,7 +77,7 @@ En la ***versión (legacy)*** se implementas los flujos de esta manera, en dos
|
||||
|
||||
#### Versión 2 (0.2.X)
|
||||
|
||||
En esta versión es mucho más sencillo abajo encontraras un ejemplo del mismo flujo anteriormente mostrado.
|
||||
En esta versión es mucho más sencillo, abajo encontraras un ejemplo del mismo flujo anteriormente mostrado.
|
||||
|
||||
```js
|
||||
//app.js
|
||||
@@ -126,6 +126,86 @@ const flowCatalogo = addKeyword(['imagen', 'foto'])
|
||||
}
|
||||
```
|
||||
|
||||
#### Flujos hijos
|
||||
|
||||
A continuación se muestra un ejemplo de flujos hijos, estos nos sirven para crear flujos que solo se disparan cuando el flujo anterior es el especificado, ejemplo:
|
||||
|
||||
> Menu Principal (Escoge zapatos o bolsos)
|
||||
> - SubMenu 1 (Elegiste bolsos, ahora escoge piel o tela)
|
||||
> - Submenu 1.1 (piel)
|
||||
> - Submenu 2 (Elegiste zapatos, ahora escoge piel o tela)
|
||||
> - Submenu 2.1 (piel)
|
||||
|
||||
El __submenu 1__ solo se va a disparar cuando el flujo anterior sea el __principal__, e igualmente el __submenu 1.1__, solo cuando el flujo anterior sea el __submenu 1__, ejemplo:
|
||||
|
||||
```js
|
||||
/**
|
||||
* Aqui declaramos los flujos hijos, los flujos se declaran de atras para adelante, es decir que si tienes un flujo de este tipo:
|
||||
*
|
||||
* Menu Principal
|
||||
* - SubMenu 1
|
||||
* - Submenu 1.1
|
||||
* - Submenu 2
|
||||
* - Submenu 2.1
|
||||
*
|
||||
* Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
|
||||
*/
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*(2) Zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*(2) Bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
> Forma parte de este proyecto.
|
||||
|
||||
- [Discord](https://link.codigoencasa.com/DISCORD)
|
||||
|
||||
10
packages/docs/src/routes/docs/advanced/index.mdx
Normal file
10
packages/docs/src/routes/docs/advanced/index.mdx
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Overview
|
||||
contributors:
|
||||
- adamdbradley
|
||||
- steve8708
|
||||
- manucorporat
|
||||
- gabrielgrant
|
||||
---
|
||||
|
||||
# Avanzado
|
||||
10
packages/docs/src/routes/docs/buttons_lists/index.mdx
Normal file
10
packages/docs/src/routes/docs/buttons_lists/index.mdx
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Overview
|
||||
contributors:
|
||||
- adamdbradley
|
||||
- steve8708
|
||||
- manucorporat
|
||||
- gabrielgrant
|
||||
---
|
||||
|
||||
# Botones y listas
|
||||
@@ -8,3 +8,76 @@ contributors:
|
||||
---
|
||||
|
||||
# Instalación
|
||||
|
||||
Instalar el bot muy sencillo, solo deberas ejecutar el siguiente comando 🚀
|
||||
|
||||
```shell
|
||||
npm create bot-whatsapp@latest
|
||||
```
|
||||
|
||||
Te va a preguntar que si quieres crear un bot, contesta con "Y" y la tecla `Enter`
|
||||
|
||||
```shell
|
||||
🚀 Revisando tu Node.js
|
||||
Node.js compatible v18.12.0
|
||||
|
||||
🙂 Revisando tu sistema operativo
|
||||
|
||||
? Quieres crear un bot? (Y/n) »
|
||||
```
|
||||
|
||||
A continuación te va pedir que selecciones el proveedor que quieres usar, puedes seleccionarlo moviendote sobre las opciones con las flechas arriba y abajo, y cuando estes sobre el que quieres, presiona la tecla de `Espacio` y después la tecla `Enter`.
|
||||
|
||||
```shell
|
||||
? ¿Cuál proveedor de whatsapp quieres utilizar? » Espacio para seleccionar ↑/↓
|
||||
( ) whatsapp-web.js (gratis)
|
||||
( ) Venom (gratis)
|
||||
(x) Baileys (gratis)
|
||||
( ) Twilio
|
||||
( ) API Oficial (Meta)
|
||||
```
|
||||
|
||||
Continuamos con la selección de la base de datos que vamos a usar para guardar las conversaciones, de igual manera, usamos las flechas y barra de espacio para la selección:
|
||||
|
||||
```shell
|
||||
? ¿Cuál base de datos quieres utilizar? » Espacio para seleccionar ↑/↓
|
||||
(x) Memory
|
||||
( ) Mongo
|
||||
( ) MySQL
|
||||
( ) Json
|
||||
```
|
||||
|
||||
Terminamos con la selección de preveedor y base de datos, y continuamos con la instalación:
|
||||
|
||||
Hay que cambiarnos de directorio al que se acaba de crear, dependiendo de lo que seleccionamos previamente, en este caso es `base-baileys-memory`.
|
||||
Una vez que nos cambiamos de directorio ejecutamos el comando `npm install`.
|
||||
Y cuando termine la instalación ejecutamos `npm start`.
|
||||
|
||||
```shell
|
||||
√ ¿Cuál base de datos quieres utilizar? » Memory
|
||||
success!
|
||||
|
||||
⚡⚡⚡ INSTRUCCIONES ⚡⚡⚡
|
||||
cd base-bailey-memory
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
En el directorio del bot (**base-baileys-memory**) se va a crear un archivo `qr.png`, este archivo contiene un código QR, hay que escanear ese código desde la aplicación de Whatsapp en el telefono que queremos ligar al bot.
|
||||
|
||||
```shell
|
||||
⚡⚡ ACCIÓN REQUERIDA ⚡⚡
|
||||
Debes escanear el QR Code para iniciar session reivsa qr.svg
|
||||
Recuerda que el QR se actualiza cada minuto
|
||||
Necesitas ayuda: https://link.codigoencasa.com/DISCORD
|
||||
```
|
||||
|
||||
Una vez que escanemos el código nos va a aparecer el mensaje, y el bot está listo para recibir mensajes.
|
||||
|
||||
```shell
|
||||
Proveedor conectado y listo
|
||||
```
|
||||
|
||||
Desde **otro** celular, manda un mensaje al numero que acabas de ligar con el texto "hola", y debes de recibir un mensaje de "Bienvenido a mi tienda".
|
||||
|
||||
**Listo.**
|
||||
|
||||
@@ -11,7 +11,9 @@ export default component$(() => {
|
||||
{ name: 'Primeros pasos', link: '/docs' },
|
||||
{ name: 'Instalación', link: '/docs/install' },
|
||||
{ name: 'Configuración', link: '/docs/settings' },
|
||||
{ name: 'Botones y Listas', link: '/docs/buttons_lists' },
|
||||
{ name: 'Migración', link: '/docs/migration' },
|
||||
{ name: 'Avanzado', link: '/docs/advanced' },
|
||||
],
|
||||
extraOptions: [
|
||||
{ name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },
|
||||
|
||||
@@ -7,4 +7,210 @@ contributors:
|
||||
- gabrielgrant
|
||||
---
|
||||
|
||||
# Migracion
|
||||
# Migración
|
||||
|
||||
#### Versión (legacy)
|
||||
|
||||
En la **_versión (legacy)_** se implementaban los flujos en dos archivos independientes, de la siguiente manera:
|
||||
|
||||
> **`initial.json`** para establecer las palabras claves y el flujo a responder, por otro lado, tambien se necesitaba implementar
|
||||
> **`response.json`** donde se escriben los mensajes a responder.
|
||||
|
||||
```json
|
||||
//initial.json
|
||||
[
|
||||
{
|
||||
"keywords": ["hola", "ola", "alo"],
|
||||
"key": "hola"
|
||||
},
|
||||
{
|
||||
"keywords": ["productos", "info"],
|
||||
"key": "productos"
|
||||
},
|
||||
{
|
||||
"keywords": ["adios", "bye"],
|
||||
"key": "adios"
|
||||
},
|
||||
{
|
||||
"keywords": ["imagen", "foto"],
|
||||
"key": "catalogo"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
```json
|
||||
//response.json
|
||||
{
|
||||
"hola": {
|
||||
"replyMessage": ["Gracias a ti! \n"],
|
||||
"media": null,
|
||||
"trigger": null
|
||||
},
|
||||
"adios": {
|
||||
"replyMessage": ["Que te vaya bien!!"]
|
||||
},
|
||||
"productos": {
|
||||
"replyMessage": ["Más productos aquí"],
|
||||
"trigger": null,
|
||||
"actions": {
|
||||
"title": "¿Que te interesa ver?",
|
||||
"message": "Abajo unos botons",
|
||||
"footer": "",
|
||||
"buttons": [
|
||||
{ "body": "Telefonos" },
|
||||
{ "body": "Computadoras" },
|
||||
{ "body": "Otros" }
|
||||
]
|
||||
}
|
||||
},
|
||||
"catalogo": {
|
||||
"replyMessage": ["Te envio una imagen"],
|
||||
"media": "https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif",
|
||||
"trigger": null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Versión 2 (0.2.X)
|
||||
|
||||
En esta versión es mucho más sencillo, abajo encontrarás un ejemplo del mismo flujo anteriormente mostrado.
|
||||
|
||||
```js
|
||||
//app.js
|
||||
const {
|
||||
createBot,
|
||||
createProvider,
|
||||
createFlow,
|
||||
addKeyword,
|
||||
addChild,
|
||||
} = require('@bot-whatsapp/bot')
|
||||
|
||||
const BaileysProvider = require('@bot-whatsapp/provider/baileys') //Provider
|
||||
const MockAdapter = require('@bot-whatsapp/database/mock') //Base de datos
|
||||
/**
|
||||
* Declarando flujos principales.
|
||||
*/
|
||||
const flowHola = addKeyword(['hola', 'ola', 'alo']).addAnswer(
|
||||
'Bienvenido a tu tienda online!'
|
||||
)
|
||||
|
||||
const flowAdios = addKeyword(['adios', 'bye'])
|
||||
.addAnswer('Que te vaya bien!!')
|
||||
.addAnswer('Hasta luego!')
|
||||
|
||||
const flowProductos = addKeyword(['productos', 'info']).addAnswer(
|
||||
'Te envio una imagen',
|
||||
{
|
||||
buttons: [
|
||||
{ body: 'Telefonos' },
|
||||
{ body: 'Computadoras' },
|
||||
{ body: 'Otros' },
|
||||
],
|
||||
}
|
||||
)
|
||||
|
||||
const flowCatalogo = addKeyword(['imagen', 'foto']).addAnswer(
|
||||
'Te envio una imagen',
|
||||
{ media: 'https://media2.giphy.com/media/VQJu0IeULuAmCwf5SL/giphy.gif' }
|
||||
)
|
||||
|
||||
const main = async () => {
|
||||
const adapterDB = new MockAdapter()
|
||||
const adapterFlow = createFlow([
|
||||
flowHola,
|
||||
flowAdios,
|
||||
flowProductos,
|
||||
flowCatalogo,
|
||||
]) //Se crean los flujos.
|
||||
const adapterProvider = createProvider(BaileysProvider)
|
||||
createBot({
|
||||
flow: adapterFlow,
|
||||
provider: adapterProvider,
|
||||
database: adapterDB,
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
#### Flujos hijos
|
||||
|
||||
A continuación se muestra un ejemplo de flujos hijos, estos nos sirven para crear flujos que solo se disparan cuando el flujo anterior es el especificado, ejemplo:
|
||||
|
||||
> Menu Principal (Escoge zapatos o bolsos)
|
||||
> - SubMenu 1 (Elegiste bolsos, ahora escoge piel o tela)
|
||||
> - Submenu 1.1 (piel)
|
||||
> - Submenu 2 (Elegiste zapatos, ahora escoge piel o tela)
|
||||
> - Submenu 2.1 (piel)
|
||||
|
||||
El `submenu 1` solo se va a disparar cuando el flujo anterior sea el `principal`, e igualmente el `submenu 1.1`, solo cuando el flujo anterior sea el `submenu 1`, ejemplo:
|
||||
|
||||
```js
|
||||
/**
|
||||
* Aqui declaramos los flujos hijos, los flujos se declaran de atras para adelante, es decir que si tienes un flujo de este tipo:
|
||||
*
|
||||
* Menu Principal
|
||||
* - SubMenu 1
|
||||
* - Submenu 1.1
|
||||
* - Submenu 2
|
||||
* - Submenu 2.1
|
||||
*
|
||||
* Primero declaras los submenus 1.1 y 2.1, luego el 1 y 2 y al final el principal.
|
||||
*/
|
||||
const flowBolsos2 = addKeyword(['bolsos2', '2'])
|
||||
.addAnswer('🤯 *MUCHOS* bolsos ...')
|
||||
.addAnswer('y mas bolsos... bla bla')
|
||||
|
||||
const flowZapatos2 = addKeyword(['zapatos2', '2'])
|
||||
.addAnswer('🤯 repito que tengo *MUCHOS* zapatos.')
|
||||
.addAnswer('y algunas otras cosas.')
|
||||
|
||||
const flowZapatos = addKeyword(['1', 'zapatos', 'ZAPATOS'])
|
||||
.addAnswer('🤯 Veo que elegiste zapatos')
|
||||
.addAnswer('Tengo muchos zapatos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*(2) Zapatos2*', 'para mas información'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowZapatos2)]
|
||||
)
|
||||
|
||||
const flowBolsos = addKeyword(['2', 'bolsos', 'BOLSOS'])
|
||||
.addAnswer('🙌 Veo que elegiste bolsos')
|
||||
.addAnswer('Tengo muchos bolsos...bla bla')
|
||||
.addAnswer(
|
||||
['Manda:', '*(2) Bolsos2*', 'para mas información.'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos2)]
|
||||
)
|
||||
/**
|
||||
* Declarando flujo principal
|
||||
*/
|
||||
const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
|
||||
.addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
|
||||
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
|
||||
.addAnswer(
|
||||
['Para continuar escribe:', '*(1) Zapatos*', '*(2) Bolsos*'],
|
||||
{ capture: true },
|
||||
(ctx) => {
|
||||
console.log('Aqui puedes ver más info del usuario...')
|
||||
console.log('Puedes enviar un mail, hook, etc..')
|
||||
console.log(ctx)
|
||||
},
|
||||
[...addChild(flowBolsos), ...addChild(flowZapatos)]
|
||||
)
|
||||
```
|
||||
|
||||
> Forma parte de este proyecto.
|
||||
|
||||
- [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)
|
||||
|
||||
Reference in New Issue
Block a user