From c410e9763c180179f610b18b9938dfd45f2b22c8 Mon Sep 17 00:00:00 2001 From: cheveguerra Date: Thu, 22 Dec 2022 22:07:02 -0600 Subject: [PATCH 1/7] docs: se agrego ejemplo de flujos hijos a migration.md se agrego ejemplo de flujos hijos a migration.md --- MIGRATION.md | 75 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 72 insertions(+), 3 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 8e4d1b4..114a477 100644 --- a/MIGRATION.md +++ b/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,75 @@ 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 espacificado, ejemplo: + + > Menu Principal (Escoge zapatos o bolsos) + > - SubMenu 1 (bolsos, ahora escoge piel o tela) + > - Submenu 1.1 (piel) + > - Submenu 2 (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 se dispara cuando el flujo anterior sea el __submenu 1__, ejemplo: + +```js +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) From 2f30b995e2fca87d59fc698d221a7dbc0ce4cf20 Mon Sep 17 00:00:00 2001 From: cheveguerra Date: Thu, 22 Dec 2022 23:47:07 -0600 Subject: [PATCH 2/7] =?UTF-8?q?docs:=20se=20agreg=C3=B3=20texto=20al=20arc?= =?UTF-8?q?hivo=20index.mdx=20de=20INSTALACION?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se agegaron instraucciones para instalar el bot al archivo index.mdx de INSTALACION --- .vscode/extensions.json | 3 + .../docs/src/routes/docs/install/index.mdx | 73 +++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 .vscode/extensions.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..0d0e52b --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["xyc.vscode-mdx-preview"] +} diff --git a/packages/docs/src/routes/docs/install/index.mdx b/packages/docs/src/routes/docs/install/index.mdx index a8eeb88..140f8dc 100644 --- a/packages/docs/src/routes/docs/install/index.mdx +++ b/packages/docs/src/routes/docs/install/index.mdx @@ -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.** From 9577aba145dbba387c371e0155df9699b2b69378 Mon Sep 17 00:00:00 2001 From: cheveguerra Date: Thu, 22 Dec 2022 23:56:52 -0600 Subject: [PATCH 3/7] docs: cambios en el formato del texto cambios en el formato del texto --- packages/docs/src/routes/docs/install/index.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docs/src/routes/docs/install/index.mdx b/packages/docs/src/routes/docs/install/index.mdx index 140f8dc..07c166b 100644 --- a/packages/docs/src/routes/docs/install/index.mdx +++ b/packages/docs/src/routes/docs/install/index.mdx @@ -26,7 +26,7 @@ Node.js compatible v18.12.0 ? 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`. +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 ↑/↓ @@ -49,9 +49,9 @@ Continuamos con la selección de la base de datos que vamos a usar para guardar 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**. +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 From a256b78e5ff19435d76ca0c7d4e4f7d34c0dea9a Mon Sep 17 00:00:00 2001 From: cheveguerra Date: Fri, 23 Dec 2022 00:12:56 -0600 Subject: [PATCH 4/7] =?UTF-8?q?docs:=20peque=C3=B1os=20cambios=20en=20el?= =?UTF-8?q?=20formato=20del=20texto=20de=20MIGRATION.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit pequeños cambios en el formato del texto de MIGRATION.md --- MIGRATION.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 114a477..c13a058 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -128,15 +128,15 @@ 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 espacificado, ejemplo: +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 (bolsos, ahora escoge piel o tela) + > - SubMenu 1 (Elegiste bolsos, ahora escoge piel o tela) > - Submenu 1.1 (piel) - > - Submenu 2 (zapatos, ahora escoge piel o tela) + > - 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 se dispara cuando el flujo anterior sea el __submenu 1__, ejemplo: +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 const flowBolsos2 = addKeyword(['bolsos2', '2']) From 26dbfcdc72cd6c9e268cf9292b44a96882427d5e Mon Sep 17 00:00:00 2001 From: cheveguerra Date: Fri, 23 Dec 2022 00:15:39 -0600 Subject: [PATCH 5/7] docs: se agrego encabezado al ejemplo de los flujos hijos se agrego encabezado al ejemplo de los flujos hijos --- MIGRATION.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index c13a058..329ac9b 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -139,6 +139,17 @@ A continuación se muestra un ejemplo de flujos hijos, estos nos sirven para cre 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') From 6656676123c96757fd89518ba6c7281235803451 Mon Sep 17 00:00:00 2001 From: cheveguerra Date: Fri, 23 Dec 2022 00:48:47 -0600 Subject: [PATCH 6/7] docs: se agrego texto al archivo index.mdx de MIGRACION MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se agrego texto al archivo index.mdx de MIGRACION, solo copié el texto de MIGRATION.md --- .../docs/src/routes/docs/migration/index.mdx | 208 +++++++++++++++++- 1 file changed, 207 insertions(+), 1 deletion(-) diff --git a/packages/docs/src/routes/docs/migration/index.mdx b/packages/docs/src/routes/docs/migration/index.mdx index 560a39c..e5076de 100644 --- a/packages/docs/src/routes/docs/migration/index.mdx +++ b/packages/docs/src/routes/docs/migration/index.mdx @@ -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) From c539fc3788954d332d392bac7764f6f29e890b21 Mon Sep 17 00:00:00 2001 From: cheveguerra Date: Fri, 23 Dec 2022 01:44:51 -0600 Subject: [PATCH 7/7] docs: se agregaron secciones avanzado y botones y listas se agregaron secciones avanzado y botones y listas --- packages/docs/src/routes/docs/advanced/index.mdx | 10 ++++++++++ packages/docs/src/routes/docs/buttons_lists/index.mdx | 10 ++++++++++ packages/docs/src/routes/docs/layout!.tsx | 2 ++ 3 files changed, 22 insertions(+) create mode 100644 packages/docs/src/routes/docs/advanced/index.mdx create mode 100644 packages/docs/src/routes/docs/buttons_lists/index.mdx diff --git a/packages/docs/src/routes/docs/advanced/index.mdx b/packages/docs/src/routes/docs/advanced/index.mdx new file mode 100644 index 0000000..dc09a3d --- /dev/null +++ b/packages/docs/src/routes/docs/advanced/index.mdx @@ -0,0 +1,10 @@ +--- +title: Overview +contributors: + - adamdbradley + - steve8708 + - manucorporat + - gabrielgrant +--- + +# Avanzado diff --git a/packages/docs/src/routes/docs/buttons_lists/index.mdx b/packages/docs/src/routes/docs/buttons_lists/index.mdx new file mode 100644 index 0000000..915b67e --- /dev/null +++ b/packages/docs/src/routes/docs/buttons_lists/index.mdx @@ -0,0 +1,10 @@ +--- +title: Overview +contributors: + - adamdbradley + - steve8708 + - manucorporat + - gabrielgrant +--- + +# Botones y listas diff --git a/packages/docs/src/routes/docs/layout!.tsx b/packages/docs/src/routes/docs/layout!.tsx index 3ff05ae..41b5243 100644 --- a/packages/docs/src/routes/docs/layout!.tsx +++ b/packages/docs/src/routes/docs/layout!.tsx @@ -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' },