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: ✨ updated docs

Browse Source
This commit is contained in:
Leifer Mendez
2022-12-24 14:10:27 +01:00
parent b336586de3
commit ba02496222
12 changed files with 274 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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];
}

42
packages/docs/src/components/widgets/CallToAction.tsx
View File

@@ -5,31 +5,25 @@ export default component$(() => {
<section class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
<span class="text-[#039de1]">Qwik</span> +{' '}
<br class="block sm:hidden" />
<span class="text-[#039de1] sm:whitespace-nowrap">
Tailwind CSS
</span>
</h2>
<p class="text-xl text-gray-600 dark:text-slate-400">
Be very surprised by these huge fake numbers you are
seeing on this page. <br class="hidden md:inline" />
Don't waste more time!
</p>
<video
style={'height:600px'}
width="100%"
height="400"
autoPlay
muted
loop
playsInline
>
<source
src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/xbmcc-kx99h.webm"
type='video/mp4; codecs="hvc1"'
/>
<div class="mt-6">
<a
class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto"
href="https://github.com/onwidget/qwind"
target="_blank"
rel="noopener"
>
Get template
</a>
</div>
</div>
<source
src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/xbmcc-kx99h.webm"
type="video/webm"
/>
</video>
</div>
</div>
</section>

8
packages/docs/src/components/widgets/Footer.tsx
View File

@@ -54,14 +54,6 @@ export default component$(() => {
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
<div class="col-span-12 lg:col-span-4 pr-8">
<div class="mb-2">
<Link
class="inline-block font-bold text-xl"
href={'/'}
>
Qwind
</Link>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Nos sentimos muy afortunados de poder contribuir a
este proyecto y esperamos poder seguir trabajando

18
packages/docs/src/components/widgets/Hero.tsx
View File

@@ -64,24 +64,6 @@ export default component$(() => {
</div>
<div class="block md:flex items-center flex-1">
<div class="relative m-auto max-w-4xl">
{/* <video
width="600"
height="100%"
autoPlay
muted
playsInline
>
<source
src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
type='video/mp4; codecs="hvc1"'
/>
<source
src="https://s19.aconvert.com/convert/p3r68-cdx67/5if2i-k2pvs.webm"
type="video/webm"
/>
</video> */}
<picture>
<source srcSet={srcsetAvif} type="image/avif" />
<source srcSet={srcsetWebp} type="image/webp" />

4
packages/docs/src/components/widgets/NavBar.tsx
View File

@@ -16,8 +16,8 @@ export default component$(
}) => {
return (
<div>
{options.map((item) => (
<UlCompoent title={item.title} list={item.list} />
{options.map((item, i) => (
<UlCompoent key={i} title={item.title} list={item.list} />
))}
</div>
)

74
packages/docs/src/components/widgets/Navigation.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { component$ } from '@builder.io/qwik'
export const ButtonLink = component$(
(props: { name: string; link: string; direction: 'left' | 'right' }) => {
const ArrowRight = () => (
<svg
viewBox="0 0 3 6"
class="ml-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300"
>
<path
d="M0 0L3 3L0 6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
)
const ArrowLeft = () => (
<svg
viewBox="0 0 3 6"
class="mr-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-300"
>
<path
d="M3 0L0 3L3 6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
)
return (
<a
class="group flex items-center hover:text-slate-900 dark:hover:text-white"
href={props.link}
>
{props.direction === 'left' ? (
<>
<ArrowLeft />
{props.name}
</>
) : (
<>
{props.name}
<ArrowRight />
</>
)}
</a>
)
}
)
export default component$(
(props: { pages: ({ name: string; link: string } | null)[] }) => {
const { pages } = props
return (
<div class="text-sm leading-6 mt-12">
<div class="mb-10 text-slate-700 font-semibold flex justify-between items-center dark:text-slate-200">
{pages[0] ? (
<ButtonLink direction="left" {...pages[0]} />
) : null}
{pages[1] ? (
<ButtonLink direction="right" {...pages[1]} />
) : null}
</div>
</div>
)
}
)

58
packages/docs/src/routes/docs/concepts/index.mdx Normal file
View File

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

68
packages/docs/src/routes/docs/example/index.mdx Normal file
View File

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

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

@@ -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
</video>
</div>
**¿Algun error?**
Recuerda que debes de cumplir con los [requisitos minimos](/docs/install) del sistema

133
packages/docs/src/routes/docs/install/index.mdx
View File

@@ -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)
<div class="my-4 w-full ">
<video
class="rounded drop-shadow-xl rounded "
width="100%"
height="100%"
autoplay
loop
muted
playsinline
>
<source
src="https://leifer-landing-page.s3.us-east-2.amazonaws.com/console.webm"
type="video/webm"
/>
</video>
</div>

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

@@ -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$(() => {
</div>
<div class={'px-3 col-span-3 slot pb-5'}>
<Slot />
<Collaborators />
{/* <Navigation pages={[null,store.options[0][1]]} /> */}
</div>
<div class={'px-3 col-span-1 '}>
<NavBar options={store.options} />
@@ -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',

8
packages/docs/src/routes/index.tsx
View File

@@ -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 (
<>
<Hero />
<Features />
{/* <CallToAction /> */}
<CallToAction />
<FAQs />
<Stats />
{/* <Stats /> */}
</>
)
})