cheveguerra/bot-whatsapp
1
0
Fork 0
mirror of https://github.com/cheveguerra/bot-whatsapp.git synced 2026-04-18 03:29:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: ⚡ more info

Browse Source 
docs: ⚡ more info
This commit is contained in:
Leifer Mendez
2022-12-26 14:08:40 +01:00
committed by GitHub
parent c3e44f764b 3cdff95f0f
commit 42931ca689
17 changed files with 238 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/docs/src/assets/images/desahogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 KiB

BIN
packages/docs/src/assets/images/leanga.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
packages/docs/src/assets/images/qwik.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

14
packages/docs/src/assets/styles/global.css
View File

@@ -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 {

40
packages/docs/src/components/widgets/ExtraBar.tsx
View File

@@ -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 (
<div>
<ul>
{options.map((opt) => (
<li class={opt.class}>
<a href={editUrl}>{opt.name}</a>
</li>
))}
</ul>
</div>
)
}
)
export default component$(() => {
const { pathname } = useLocation()
const editUrl = ` https://github.com/codigoencasa/bot-whatsapp/edit/dev/packages/docs/src/routes${pathname}index.mdx`
return (
<div class={'pb-3'}>
<ul>
<li>
<a target={'_blank'} class={'font-semibold'} href={editUrl}>
📄 Editar esta pagina
</a>
<p class={'text-xs'}>
Forma parte de esta comunidad mejorando la documentación
siente libre de poder agregar o editar lo que quieras
</p>
</li>
</ul>
</div>
)
})

52
packages/docs/src/components/widgets/SponsorBar.tsx Normal file
View File

@@ -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 (
<div>
<ul>
<li>
<a target={'_blank'} class={'font-semibold'} href={editUrl}>
🙌 Sponsors
</a>
</li>
<li>
<a target={'_blank'} href="https://qwik.builder.io/">
<picture>
<img
src={qwik}
class="border border-slate-200 rounded my-2 p-1 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
alt="Qwind Hero Image (Cool dog)"
loading="eager"
decoding="async"
/>
</picture>
</a>
</li>
<li>
<a target={'_blank'} href="https://leangasoftware.es/">
<picture>
<img
src={leanga}
class="border border-slate-200 rounded my-2 p-1 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
alt="Qwind Hero Image (Cool dog)"
loading="eager"
decoding="async"
/>
</picture>
</a>
</li>
</ul>
</div>
)
})

2
packages/docs/src/contexts/index.tsx
View File

@@ -8,3 +8,5 @@ export interface DocumentationCtx {
export const GlobalStore =
createContext<DocumentationCtx[]>('documentation-site')
export const AppSetting = createContext<{ repo: string }>('app-settings')

16
packages/docs/src/root.tsx
View File

@@ -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' },
],
},
])

3
packages/docs/src/routes/docs/custom/index.mdx Normal file
View File

@@ -0,0 +1,3 @@
# Extender Funcionalidades
...

32
packages/docs/src/routes/docs/database/index.mdx Normal file
View File

@@ -0,0 +1,32 @@
import Alert from '../../../components/widgets/Alert'
# DataBase (Base de datos)
<Alert>
⚡ 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
</Alert>
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')`

67
packages/docs/src/routes/docs/essential/index.mdx
View File

@@ -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)
<Alert>
⚡ 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
</Alert>
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)
<Alert>
⚡ 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
</Alert>
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')`

20
packages/docs/src/routes/docs/flows/index.mdx Normal file
View File

@@ -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 ...'])
```

2
packages/docs/src/routes/docs/index.mdx
View File

@@ -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.**

3
packages/docs/src/routes/docs/join/index.mdx Normal file
View File

@@ -0,0 +1,3 @@
# Unirme
...

5
packages/docs/src/routes/docs/layout!.tsx
View File

@@ -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'
}
>
<NavBar options={store} />
<ExtraBar />
<SponsorBar />
</div>
</div>
</main>

31
packages/docs/src/routes/docs/providers/index.mdx Normal file
View File

@@ -0,0 +1,31 @@
import Alert from '../../../components/widgets/Alert'
# Provider (Proveedor)
<Alert>
⚡ 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
</Alert>
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')`

3
packages/docs/src/routes/docs/sponsors/index.mdx Normal file
View File

@@ -0,0 +1,3 @@
# Sponsors
...