docs: 🎨 lot stuff

This commit is contained in:
Leifer Mendez
2023-01-05 13:17:49 +01:00
parent 77c6baf46b
commit 8d6c34d8b9
18 changed files with 237 additions and 99 deletions

View File

@@ -1,4 +1,5 @@
import Alert from '../../../components/widgets/Alert'
import Navigation from '../../../components/widgets/Navigation'
# DataBase (Base de datos)
@@ -30,3 +31,12 @@ Los conectores disponibles hasta el momento son los siguientes:
`require('@bot-whatsapp/database/mysql')`
`require('@bot-whatsapp/database/json')`
---
<Navigation
pages={[
{ name: 'Proveedores', link: '/docs/providers' },
{ name: 'Migración', link: '/docs/migration' },
]}
/>

View File

@@ -1,4 +1,5 @@
import Alert from '../../../components/widgets/Alert'
import Navigation from '../../../components/widgets/Navigation'
# Conceptos
@@ -97,3 +98,12 @@ Los conectores disponibles hasta el momento son los siguientes:
`require('@bot-whatsapp/database/mysql')`
`require('@bot-whatsapp/database/json')`
---
<Navigation
pages={[
{ name: 'Pruebalo', link: '/docs/example' },
{ name: 'Conversaciones', link: '/docs/flows' },
]}
/>

View File

@@ -1,3 +1,5 @@
import Navigation from '../../../components/widgets/Navigation'
# 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
@@ -66,3 +68,12 @@ const flowPrincipal = addKeyword(['hola', 'alo'])
.addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
```
---
<Navigation
pages={[
{ name: 'Instalación', link: '/docs/install' },
{ name: 'Conceptos', link: '/docs/essential' },
]}
/>

View File

@@ -1,3 +1,5 @@
import Navigation from '../../../components/widgets/Navigation'
# 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**.
@@ -18,3 +20,12 @@ const flowPrincipal = addKeyword(['hola', 'alo'])
.addAnswer(['Hola, bienvenido a mi tienda', '¿Como puedo ayudarte?'])
.addAnswer(['Tengo:', 'Zapatos', 'Bolsos', 'etc ...'])
```
---
<Navigation
pages={[
{ name: 'Conceptos', link: '/docs/essential' },
{ name: 'Proveedores', link: '/docs/providers' },
]}
/>

View File

@@ -1,15 +1,16 @@
import Alert from '../../components/widgets/Alert'
import Navigation from '../../components/widgets/Navigation'
# Introducción
<Alert>
**Atención** estás leyendo la documentación de la **versión estable
(0.2.x)** de esta librería, si vienes de la versión anterior te recomendamos
pasarte por la sección de **[migración](/docs/migration/)** para que puedas
disfrutar de las nuevas características.
**Atención** estás leyendo la documentación de la **versión v2** de esta
librería, si vienes de la versión anterior te recomendamos pasarte por la
sección de **[migración](/docs/migration/)** para que puedas disfrutar de
las nuevas características.
</Alert>
## ¿Què es esto?
## ¿Qué es esto?
**@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.
@@ -41,4 +42,13 @@ npm create bot-whatsapp@latest
</div>
**¿Algún error?**
Recuerda que debes de cumplir con los [requisitos minimos](/docs/install) del sistema
Recuerda que debes de cumplir con los [requisitos minimos](/docs/requirements) del sistema
---
<Navigation
pages={[
{ name: 'Home', link: '/' },
{ name: 'Requerimientos', link: '/docs/requirements' },
]}
/>

View File

@@ -1,40 +1,27 @@
import Alert from '../../../components/widgets/Alert'
import Navigation from '../../../components/widgets/Navigation'
# Instalación
A continuación se describen los puntos técnicos que debes de tener en cuenta antes de trabajar con esta herramienta
**Con esta librería, puedes construir flujos automatizados de conversación de manera agnóstica al proveedor de WhatsApp,** configurar respuestas automatizadas para preguntas frecuentes, recibir y responder mensajes de manera automatizada, y hacer un seguimiento de las interacciones con los clientes. Además, puedes configurar fácilmente disparadores que te ayudaran a expandir las funcionalidades sin límites.
## Requerimientos
---
- Node v16 o superior **[descargar node](https://nodejs.org/es/download/)**
### Comenzamos
## ¿Como instalar Node en Windows?
https://youtu.be/xRXHQlqA3Ak?t=376
## ¿Como instalar Node en Ubuntu?
Te comparto un recurso de **[Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es)** donde explica como instalar node en Ubuntu.
## ¿Como saber que tengo el Node?
Solo debes ejecutar el siguiente comando y esperar que la versión que te arroja sea superior a v16
Crear un bot es tan sencillo como ejecutar el siguiente comando y seguir las instrucciones
```shell
$ node -v
v18.12.1
npm create bot-whatsapp@latest
```
## Opcionales
_Para seleccionar usa la tecla de **espacio** y para confirmar la tecla **enter**_
Dependiendo de las opciones de configuraciones que has marcado al momento de crear el bot **Command Line Interface (CLI)** puede que necesites instalar más cosas.
El **CLI** te hace una revisión previa, de versión de Node y sistema operativo, con la finalidad de informarte si cumples los requisitos o mostrarte información de interés.
**Ejemplo**: Si elegiste _(MySQL)_ como proveedor de base de datos, lógicamente necesitaras tener un entorno de MySQL.
📄 Pronto se agregará más información y videos explicando esto a fondo.
<div class="my-4 w-full ">
<div class="my-4 ">
<video
class="rounded drop-shadow-xl rounded "
width="100%"
class="rounded drop-shadow-xl w-full md:w-full max-w-screen-md"
height="100%"
autoplay
loop
@@ -47,3 +34,37 @@ Dependiendo de las opciones de configuraciones que has marcado al momento de cre
/>
</video>
</div>
### Plantilla
Luego de seleccionar las opciones de tu preferencia se creara una carpeta con una plantilla de un flujo de un bot listo para ejecutar y que puedes modificar a tu gusto.
**[Ver más plantillas](https://github.com/codigoencasa/bot-whatsapp/tree/dev/starters/apps)**
Cada plantilla tiene sus dependencias necesarias basadas en tu previa selección. **Ejemplo**, si seleccionas el proveedor de MySQL, la plantilla incorpora lo necesario para que tu conexión con la base de datos sea exitosa.
```json
"dependencies": {
"@bot-whatsapp/bot": "latest",
"@bot-whatsapp/cli": "latest",
"@bot-whatsapp/database": "latest",
"@bot-whatsapp/provider": "latest",
"@adiwajshing/baileys": "4.4.0",
"mysql2": "^2.3.3", 👈
},
```
<Alert>
📄 Si deseas cambiar tu **proveedor o tu motor** de base de datos no es
necesario volver ejecutar el CLI (lo puedes hacer sin problema) aunque
tambien basta con solo modificar un par de lineas. [Ver
explicación](/docs/essential)
</Alert>
---
<Navigation
pages={[
{ name: 'Requerimientos', link: '/docs/requirements' },
{ name: 'Pruebalo', link: '/docs/example' },
]}
/>

View File

@@ -6,6 +6,8 @@ Deseamos que te sientas cómodo y que puedas aportar tu valioso conocimiento y h
Recuerda que si tienes alguna inquietud, o simplemente deseas interactuar con los otros colaboradores puedes unirte a la comunidad.
---
## Ventajas al unirme
Participar en un proyecto de código abierto te permite aprender de manera práctica sobre tecnologías y metodologías de desarrollo de software. También puedes aprender de otros desarrolladores y contribuir a la comunidad de código abierto.
@@ -21,5 +23,3 @@ Contribución al bien común Participar en un proyecto de código abierto te per
Es una excelente manera de incrementar tus habilidades tecnológicas y **estar al tanto de las últimas tendencias y desarrollos en el mundo del software**. Al trabajar con otros desarrolladores y contribuir a proyectos de código abierto, tendrás la oportunidad de \*\*aprender y practicar nuevas tecnologías y metodologías, lo que te ayudará a mejorar tus habilidades y a mantenerte actualizado en el mundo en constante cambio de la tecnología.
Esperamos que estés listo para **unirte a nosotros en esta emocionante aventura**
...

View File

@@ -4,6 +4,7 @@ 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 Navigation from '~/components/widgets/Navigation'
import SponsorBar from '~/components/widgets/SponsorBar'
import { GlobalStore } from '~/contexts'
// import Navigation from '~/components/widgets/Navigation'
@@ -44,7 +45,6 @@ export default component$(() => {
</div>
</div>
</main>
<Footer />
</>
)
})

View File

@@ -1,3 +1,5 @@
import Navigation from '../../../components/widgets/Navigation'
# Migración
#### Versión (legacy)
@@ -199,9 +201,11 @@ const flowPrincipal = addKeyword(['hola', 'ole', 'alo'])
)
```
> 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)
<Navigation
pages={[
{ name: 'Base de datos', link: '/docs/database' },
{ name: 'Extender', link: '/docs/custom' },
]}
/>

View File

@@ -1,4 +1,5 @@
import Alert from '../../../components/widgets/Alert'
import Navigation from '../../../components/widgets/Navigation'
# Provider (Proveedor)
@@ -29,3 +30,12 @@ Los proveedores disponibles hasta el momento son los siguientes:
[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')`
---
<Navigation
pages={[
{ name: 'Conversaciones', link: '/docs/flows' },
{ name: 'Base de datos', link: '/docs/database' },
]}
/>

View File

@@ -0,0 +1,34 @@
import Navigation from '../../../components/widgets/Navigation'
# Requerimientos
A continuación se describen los puntos técnicos que debes de tener en cuenta antes de trabajar con esta herramienta
- Node v16 o superior **[descargar node](https://nodejs.org/es/download/)**
---
## ¿Como instalar Node?
- **Windows**: [Ver video](https://youtu.be/xRXHQlqA3Ak?t=376). Necesita ayuda para instalar Node en Windows. A continuación te comparto un video en el minuto exacto donde explico como instalar.
- **Ubuntu**: Te comparto un recurso de **[Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es)** donde explica como instalar node en Ubuntu.
---
## ¿Como saber que tengo el Node?
Solo debes ejecutar el siguiente comando y esperar que la versión que te arroja sea superior a v16
```shell
$ node -v
v18.12.1
```
---
<Navigation
pages={[
{ name: 'Vista rápida', link: '/docs' },
{ name: 'Instalación', link: '/docs/install' },
]}
/>