diff --git a/packages/docs/src/assets/images/desahogo.png b/packages/docs/src/assets/images/desahogo.png new file mode 100644 index 0000000..6c2ddce Binary files /dev/null and b/packages/docs/src/assets/images/desahogo.png differ diff --git a/packages/docs/src/assets/images/leanga.png b/packages/docs/src/assets/images/leanga.png new file mode 100644 index 0000000..0d03d1b Binary files /dev/null and b/packages/docs/src/assets/images/leanga.png differ diff --git a/packages/docs/src/assets/images/qwik.png b/packages/docs/src/assets/images/qwik.png new file mode 100644 index 0000000..3ae7d8f Binary files /dev/null and b/packages/docs/src/assets/images/qwik.png differ diff --git a/packages/docs/src/assets/styles/global.css b/packages/docs/src/assets/styles/global.css index 0f83342..dea809b 100644 --- a/packages/docs/src/assets/styles/global.css +++ b/packages/docs/src/assets/styles/global.css @@ -6,10 +6,10 @@ * */ +@import url('./fonts.css'); @tailwind base; @tailwind components; @tailwind utilities; -@import url('./fonts.css'); @layer components { .btn { @@ -36,12 +36,16 @@ @apply mt-4 font-semibold text-lg; } - .slot code { - @apply text-xs font-mono; + .slot p code { + @apply text-xs font-mono bg-stone-100 dark:bg-slate-600 dark:text-white text-red-500 p-1 rounded-sm; } .slot pre { - @apply bg-gray-800 dark:bg-slate-800 p-3 rounded w-full max-w-lg text-gray-100 flex my-2; + @apply w-full flex my-2; + } + + .slot pre code { + @apply p-3 rounded-sm min-w-[32rem] w-fit bg-gray-800 dark:bg-slate-800 text-gray-100 text-xs; } .slot a { @@ -53,7 +57,7 @@ } .slot img { - @apply rounded drop-shadow-2xl; + @apply rounded-sm drop-shadow-2xl; } .slot ul { diff --git a/packages/docs/src/components/widgets/ExtraBar.tsx b/packages/docs/src/components/widgets/ExtraBar.tsx index 030951f..fda47b2 100644 --- a/packages/docs/src/components/widgets/ExtraBar.tsx +++ b/packages/docs/src/components/widgets/ExtraBar.tsx @@ -4,24 +4,22 @@ import { useLocation } from '@builder.io/qwik-city' /** * options = [] array con la lista de opciones de la documentacion */ -export default component$( - ({ - options = [], - }: { - options: { link: string; name: string; class?: string }[] - }) => { - const { pathname } = useLocation() - const editUrl = ` https://github.com/codigoencasa/bot-whatsapp/edit/dev/packages/docs/src/routes${pathname}index.mdx` - return ( -
- -
- ) - } -) +export default component$(() => { + const { pathname } = useLocation() + const editUrl = ` https://github.com/codigoencasa/bot-whatsapp/edit/dev/packages/docs/src/routes${pathname}index.mdx` + return ( +
+ +
+ ) +}) diff --git a/packages/docs/src/components/widgets/SponsorBar.tsx b/packages/docs/src/components/widgets/SponsorBar.tsx new file mode 100644 index 0000000..45ad277 --- /dev/null +++ b/packages/docs/src/components/widgets/SponsorBar.tsx @@ -0,0 +1,52 @@ +import { component$ } from '@builder.io/qwik' +import { useLocation } from '@builder.io/qwik-city' + +// @ts-ignore +import { src as qwik } from '~/assets/images/qwik.png?width=100&metadata' +// @ts-ignore +import { src as leanga } from '~/assets/images/leanga.png?width=40&metadata' + +/** + * options = [] array con la lista de opciones de la documentacion + */ +export default component$(() => { + const { pathname } = useLocation() + const editUrl = ` https://github.com/codigoencasa/bot-whatsapp/edit/dev/packages/docs/src/routes${pathname}index.mdx` + return ( +
+ +
+ ) +}) diff --git a/packages/docs/src/contexts/index.tsx b/packages/docs/src/contexts/index.tsx index 929daa4..8c77bda 100644 --- a/packages/docs/src/contexts/index.tsx +++ b/packages/docs/src/contexts/index.tsx @@ -8,3 +8,5 @@ export interface DocumentationCtx { export const GlobalStore = createContext('documentation-site') + +export const AppSetting = createContext<{ repo: string }>('app-settings') diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx index 0f05c69..1006d42 100644 --- a/packages/docs/src/root.tsx +++ b/packages/docs/src/root.tsx @@ -34,30 +34,30 @@ export default component$(() => { list: [ { name: 'Vista rápida', link: '/docs' }, { name: 'Instalación', link: '/docs/install' }, - { name: 'Ejemplo', link: '/docs/example' }, + { name: 'Pruebalo', link: '/docs/example' }, ], }, { title: 'Esenciales', list: [ - { name: 'Resumen', link: '/docs/essential' }, - { name: 'Proveedores', link: '/docs/install' }, - { name: 'Base de datos', link: '/docss' }, + { name: 'Conceptos', link: '/docs/essential' }, + { name: 'Conversaciones', link: '/docs/flows' }, + { name: 'Proveedores', link: '/docs/providers' }, + { name: 'Base de datos', link: '/docs/database' }, ], }, { title: 'Avanzado', list: [ { name: 'Migración', link: '/docs/migration' }, - { name: 'Extender funcionalidades', link: '/' }, + { name: 'Extender funcionalidades', link: '/docs/custom' }, ], }, { title: 'Comunidad', list: [ - { name: 'Unirme al proyecto', link: '/' }, - { name: 'Sponsors', link: '/' }, - { name: 'Roadmap', link: '/' }, + { name: 'Unirme al proyecto', link: '/docs/join' }, + { name: 'Sponsors', link: '/docs/sponsors' }, ], }, ]) diff --git a/packages/docs/src/routes/docs/custom/index.mdx b/packages/docs/src/routes/docs/custom/index.mdx new file mode 100644 index 0000000..6eb5b99 --- /dev/null +++ b/packages/docs/src/routes/docs/custom/index.mdx @@ -0,0 +1,3 @@ +# Extender Funcionalidades + +... diff --git a/packages/docs/src/routes/docs/database/index.mdx b/packages/docs/src/routes/docs/database/index.mdx new file mode 100644 index 0000000..c3dfe08 --- /dev/null +++ b/packages/docs/src/routes/docs/database/index.mdx @@ -0,0 +1,32 @@ +import Alert from '../../../components/widgets/Alert' + +# DataBase (Base de datos) + + + ⚡ Dependiendo del tipo de conector que utlices puede que necesites pasar + algunas configuracion adicional como **user, host, password** para esos + casos te recomendamos guiarte de los + **[starters](https://github.com/codigoencasa/bot-whatsapp/tree/dev/starters/apps)** + o si gustas puedes editar esta documentación para ir agregando más info + + +Es la pieza encargada de mantener el **"estado"** de una conversación, para mayor facilidad la libreria te proporcia diferentes conectores que se de adapten mejor a tu desarrollo + +```js +const MongoAdapter = require('@bot-whatsapp/database/mongo') +.... +const adapterDB = new MongoAdapter({ + dbUri: 'mongodb://0.0.0.0:27017', + dbName: 'db_bot', +}) +``` + +Los conectores disponibles hasta el momento son los siguientes: + +`require('@bot-whatsapp/database/mock')` + +`require('@bot-whatsapp/database/mongo')` + +`require('@bot-whatsapp/database/mysql')` + +`require('@bot-whatsapp/database/json')` diff --git a/packages/docs/src/routes/docs/essential/index.mdx b/packages/docs/src/routes/docs/essential/index.mdx index e3c34e9..c20703a 100644 --- a/packages/docs/src/routes/docs/essential/index.mdx +++ b/packages/docs/src/routes/docs/essential/index.mdx @@ -1,6 +1,14 @@ +import Alert from '../../../components/widgets/Alert' + # Conceptos -Durante el desarrollo de este sistema se elaboraron tres (3) conceptos principales que conformar el funcionamiento +El desarrollo de la librería se base en tres (3) piezas claves para su correcto funcionamiento: + +- **Flow:** Encargado de construir todo el contexto de la conversación, finalmente su objetivo es brindar una capa amigable al desarrollador. +- **Provider:** Como si de un [conector](https://www.dignited.com/wp-content/uploads/2019/06/Plug-type-768x432.jpg) se tratara el objetivo es poder cambiar facilmente de proveedor de Whatsapp en minutos + sin el riesgo de dañar otras partes del bot +- **Database:** Siguiendo la linea de pensamiento de conectores, de igual manera que el provider nos brinda la capacidad de poder cambiar de capa de persistencia de datos (guardar datos) sin invertir tiempo en + reescribir nuestro flujo. --- @@ -29,6 +37,14 @@ const flowPrincipal = addKeyword(['hola', 'alo']) ## Provider (Proveedor) + + ⚡ Dependiendo del tipo de proveedor que utlices puede que necesites pasar + algunas configuracion adicional como **token, api, etc.** para esos casos te + recomendamos guiarte de los + **[starters](https://github.com/codigoencasa/bot-whatsapp/tree/dev/starters/apps)** + o si gustas puedes editar esta documentación para ir agregando más info + + 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 @@ -39,26 +55,45 @@ const adapterProvider = createProvider(WhatsappProvider) Los proveedores disponibles hasta el momento son los siguientes: -### [whatsapp-web.js](https://github.com/pedroslopez/whatsapp-web.js) +[whatsapp-web.js](https://github.com/pedroslopez/whatsapp-web.js) `require('@bot-whatsapp/provider/web-whatsapp')` -**require('@bot-whatsapp/provider/web-whatsapp')** +[Venom](https://github.com/orkestral/venom) `require('@bot-whatsapp/provider/venom')` -### [Venom](https://github.com/orkestral/venom) +[Baileys](https://github.com/adiwajshing/Baileys) `require('@bot-whatsapp/provider/baileys')` -**require('@bot-whatsapp/provider/venom')** +[Meta Official](https://developers.facebook.com/docs/whatsapp/cloud-api/reference/messages) `require('@bot-whatsapp/provider/meta')` -### [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')** +[Twilio Official](https://www.twilio.com/es-mx/messaging/whatsapp) `require('@bot-whatsapp/provider/twilio')` --- ## DataBase (Base de datos) + + + ⚡ Dependiendo del tipo de conector que utlices puede que necesites pasar + algunas configuracion adicional como **user, host, password** para esos + casos te recomendamos guiarte de los + **[starters](https://github.com/codigoencasa/bot-whatsapp/tree/dev/starters/apps)** + o si gustas puedes editar esta documentación para ir agregando más info + + +Es la pieza encargada de mantener el **"estado"** de una conversación, para mayor facilidad la libreria te proporcia diferentes conectores que se de adapten mejor a tu desarrollo + +```js +const MongoAdapter = require('@bot-whatsapp/database/mongo') +.... +const adapterDB = new MongoAdapter({ + dbUri: 'mongodb://0.0.0.0:27017', + dbName: 'db_bot', +}) +``` + +Los conectores disponibles hasta el momento son los siguientes: + +`require('@bot-whatsapp/database/mock')` + +`require('@bot-whatsapp/database/mongo')` + +`require('@bot-whatsapp/database/mysql')` + +`require('@bot-whatsapp/database/json')` diff --git a/packages/docs/src/routes/docs/flows/index.mdx b/packages/docs/src/routes/docs/flows/index.mdx new file mode 100644 index 0000000..4e9651a --- /dev/null +++ b/packages/docs/src/routes/docs/flows/index.mdx @@ -0,0 +1,20 @@ +# 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 ...']) +``` diff --git a/packages/docs/src/routes/docs/index.mdx b/packages/docs/src/routes/docs/index.mdx index 4552abe..5548cfa 100644 --- a/packages/docs/src/routes/docs/index.mdx +++ b/packages/docs/src/routes/docs/index.mdx @@ -11,7 +11,7 @@ import Alert from '../../components/widgets/Alert' ## ¿Que es esto? -Esto es una librería que te permitirá **crear chatbot para WhatsApp** en tan solo minutos de una manera ágil y rápida. A lo largo de esta documentación encontrarás ejemplos y material de ayuda. +**@bot-whatsapp** es una librería que te permitirá **crear chatbot para WhatsApp** en tan solo minutos de una manera ágil y rápida. A lo largo de esta documentación encontrarás ejemplos y material de ayuda. Si eres una persona con **poco tiempo y gran capacidad** de comprensión con conocimientos, ejecutando proyectos en Node.js y manejo de terminal. Esta documentación te ayudará a instalar tu bot de WhatsApp en simples pasos con el propósito de que tengas un chatbot funcional **en solo minutos.** diff --git a/packages/docs/src/routes/docs/join/index.mdx b/packages/docs/src/routes/docs/join/index.mdx new file mode 100644 index 0000000..87864a4 --- /dev/null +++ b/packages/docs/src/routes/docs/join/index.mdx @@ -0,0 +1,3 @@ +# Unirme + +... diff --git a/packages/docs/src/routes/docs/layout!.tsx b/packages/docs/src/routes/docs/layout!.tsx index 0643e7e..d7d2fc6 100644 --- a/packages/docs/src/routes/docs/layout!.tsx +++ b/packages/docs/src/routes/docs/layout!.tsx @@ -1,8 +1,10 @@ import { component$, Slot, useContext } from '@builder.io/qwik' import type { DocumentHead } from '@builder.io/qwik-city' +import ExtraBar from '~/components/widgets/ExtraBar' import Footer from '~/components/widgets/Footer' import Header from '~/components/widgets/Header' import NavBar from '~/components/widgets/NavBar' +import SponsorBar from '~/components/widgets/SponsorBar' import { GlobalStore } from '~/contexts' // import Navigation from '~/components/widgets/Navigation' // import Collaborators from '~/components/widgets/Collaborators' @@ -37,7 +39,8 @@ export default component$(() => { 'hidden lg:block fixed z-20 inset-0 top-[4rem] right-[max(0px,calc(50%-48rem))] left-auto w-[14.5rem] py-5 px-8 overflow-y-auto' } > - + + diff --git a/packages/docs/src/routes/docs/providers/index.mdx b/packages/docs/src/routes/docs/providers/index.mdx new file mode 100644 index 0000000..d905022 --- /dev/null +++ b/packages/docs/src/routes/docs/providers/index.mdx @@ -0,0 +1,31 @@ +import Alert from '../../../components/widgets/Alert' + +# Provider (Proveedor) + + + ⚡ Dependiendo del tipo de proveedor que utlices puede que necesites pasar + algunas configuracion adicional como **token, api, etc.** para esos casos te + recomendamos guiarte de los + **[starters](https://github.com/codigoencasa/bot-whatsapp/tree/dev/starters/apps)** + o si gustas puedes editar esta documentación para ir agregando más info + + +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')` diff --git a/packages/docs/src/routes/docs/sponsors/index.mdx b/packages/docs/src/routes/docs/sponsors/index.mdx new file mode 100644 index 0000000..257497d --- /dev/null +++ b/packages/docs/src/routes/docs/sponsors/index.mdx @@ -0,0 +1,3 @@ +# Sponsors + +...