diff --git a/packages/docs/src/assets/styles/global.css b/packages/docs/src/assets/styles/global.css index 6962279..8628551 100644 --- a/packages/docs/src/assets/styles/global.css +++ b/packages/docs/src/assets/styles/global.css @@ -29,23 +29,23 @@ } .slot h2 { - @apply my-2 font-semibold text-xl; + @apply mt-4 font-semibold text-xl; } .slot h3 { - @apply my-2 font-semibold text-lg; + @apply mt-4 font-semibold text-lg; } .slot code { - @apply bg-slate-100 dark:bg-slate-800 p-1 px-2 rounded w-full text-sm; + @apply text-xs font-mono; } .slot pre { - @apply w-full flex my-2; + @apply bg-gray-800 dark:bg-slate-800 p-3 rounded w-full text-gray-100 w-full flex my-2; } .slot a { - @apply text-sky-900 font-medium dark:text-sky-400; + @apply text-sky-900 font-medium dark:text-sky-400 dark:hover:text-white; } .slot hr { @@ -56,6 +56,10 @@ @apply rounded drop-shadow-2xl; } + .slot ul { + @apply list-disc pl-5; + } + [data-aw-toggle-menu] path { @apply transition; } @@ -68,6 +72,10 @@ @apply mt-2 text-sm text-slate-700 dark:text-slate-400; } + .coding p { + @apply m-0; + } + [data-aw-toggle-menu].expanded g > path:last-child { @apply rotate-45 translate-y-[-8px] translate-x-[14px]; } diff --git a/packages/docs/src/components/widgets/CallToAction.tsx b/packages/docs/src/components/widgets/CallToAction.tsx index bbee471..3b1444b 100644 --- a/packages/docs/src/components/widgets/CallToAction.tsx +++ b/packages/docs/src/components/widgets/CallToAction.tsx @@ -5,31 +5,25 @@ export default component$(() => {
-
-

- Qwik +{' '} -
- - Tailwind CSS - -

-

- Be very surprised by these huge fake numbers you are - seeing on this page. - Don't waste more time! -

+
+ +
diff --git a/packages/docs/src/components/widgets/Footer.tsx b/packages/docs/src/components/widgets/Footer.tsx index d7c3b8b..c5e5e0f 100644 --- a/packages/docs/src/components/widgets/Footer.tsx +++ b/packages/docs/src/components/widgets/Footer.tsx @@ -54,14 +54,6 @@ export default component$(() => {
-
- - Qwind - -
Nos sentimos muy afortunados de poder contribuir a este proyecto y esperamos poder seguir trabajando diff --git a/packages/docs/src/components/widgets/Hero.tsx b/packages/docs/src/components/widgets/Hero.tsx index c590eed..47cdc15 100644 --- a/packages/docs/src/components/widgets/Hero.tsx +++ b/packages/docs/src/components/widgets/Hero.tsx @@ -64,24 +64,6 @@ export default component$(() => {
- {/* */} - diff --git a/packages/docs/src/components/widgets/NavBar.tsx b/packages/docs/src/components/widgets/NavBar.tsx index 5df072f..a34d759 100644 --- a/packages/docs/src/components/widgets/NavBar.tsx +++ b/packages/docs/src/components/widgets/NavBar.tsx @@ -16,8 +16,8 @@ export default component$( }) => { return (
- {options.map((item) => ( - + {options.map((item, i) => ( + ))}
) diff --git a/packages/docs/src/components/widgets/Navigation.tsx b/packages/docs/src/components/widgets/Navigation.tsx new file mode 100644 index 0000000..779a787 --- /dev/null +++ b/packages/docs/src/components/widgets/Navigation.tsx @@ -0,0 +1,74 @@ +import { component$ } from '@builder.io/qwik' + +export const ButtonLink = component$( + (props: { name: string; link: string; direction: 'left' | 'right' }) => { + const ArrowRight = () => ( + + + + ) + + const ArrowLeft = () => ( + + + + ) + + return ( + + {props.direction === 'left' ? ( + <> + + {props.name} + + ) : ( + <> + {props.name} + + + )} + + ) + } +) + +export default component$( + (props: { pages: ({ name: string; link: string } | null)[] }) => { + const { pages } = props + return ( +
+
+ {pages[0] ? ( + + ) : null} + {pages[1] ? ( + + ) : null} +
+
+ ) + } +) diff --git a/packages/docs/src/routes/docs/concepts/index.mdx b/packages/docs/src/routes/docs/concepts/index.mdx new file mode 100644 index 0000000..13834a5 --- /dev/null +++ b/packages/docs/src/routes/docs/concepts/index.mdx @@ -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) diff --git a/packages/docs/src/routes/docs/example/index.mdx b/packages/docs/src/routes/docs/example/index.mdx new file mode 100644 index 0000000..2ff0899 --- /dev/null +++ b/packages/docs/src/routes/docs/example/index.mdx @@ -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 ...']) +``` diff --git a/packages/docs/src/routes/docs/index.mdx b/packages/docs/src/routes/docs/index.mdx index e55c23e..bb7dc2a 100644 --- a/packages/docs/src/routes/docs/index.mdx +++ b/packages/docs/src/routes/docs/index.mdx @@ -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
+**¿Algun error?** Recuerda que debes de cumplir con los [requisitos minimos](/docs/install) del sistema diff --git a/packages/docs/src/routes/docs/install/index.mdx b/packages/docs/src/routes/docs/install/index.mdx index 10141c3..9e7cbbc 100644 --- a/packages/docs/src/routes/docs/install/index.mdx +++ b/packages/docs/src/routes/docs/install/index.mdx @@ -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) - ---- - -![](https://i.giphy.com/media/ntMt6TvalpstTIx7Ak/giphy.webp) - -**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' -``` - -![](https://i.imgur.com/dC6lEwy.png) - -> **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) +
+ +
diff --git a/packages/docs/src/routes/docs/layout!.tsx b/packages/docs/src/routes/docs/layout!.tsx index b3b789c..24d0267 100644 --- a/packages/docs/src/routes/docs/layout!.tsx +++ b/packages/docs/src/routes/docs/layout!.tsx @@ -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$(() => {
- - + {/* */}
@@ -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', diff --git a/packages/docs/src/routes/index.tsx b/packages/docs/src/routes/index.tsx index fb3ffaf..1958181 100644 --- a/packages/docs/src/routes/index.tsx +++ b/packages/docs/src/routes/index.tsx @@ -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 ( <> - {/* */} + - + {/* */} ) })