diff --git a/packages/docs/src/components/widgets/Features.tsx b/packages/docs/src/components/widgets/Features.tsx
index 5f870e5..87cd099 100644
--- a/packages/docs/src/components/widgets/Features.tsx
+++ b/packages/docs/src/components/widgets/Features.tsx
@@ -1,45 +1,43 @@
import { component$ } from '@builder.io/qwik'
import { IconStar } from '~/components/icons/IconStar'
+import { IconDiscord } from '../icons/IconDiscord'
export default component$(() => {
const items = [
[
{
- title: 'Qwik + Tailwind CSS Integration',
+ title: 'Atención al cliente rápida y eficiente',
description:
- 'A seamless integration between two great frameworks that offer high productivity, performance and versatility.',
- icon: 'tabler:brand-tailwind',
+ 'El chatbot puede ayudar a tus clientes a obtener respuestas a sus preguntas o solucionar problemas de manera rápida y sencilla, sin tener que esperar horas o incluso días por una respuesta.',
},
{
- title: 'Ready-to-use Components',
+ title: 'Automatización de tareas repetitiva',
description:
- 'Widgets made with Tailwind CSS ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...',
- icon: 'tabler:components',
+ 'Se pueden automatizar tareas repetitivas y ahorrar tiempo y esfuerzo en tareas administrativas, como enviar recordatorios a tus clientes sobre pagos pendientes o para confirmar citas o reservas.',
},
{
- title: 'Best Practices',
+ title: 'Experiencia personalizada para tus clientes',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
- icon: 'tabler:list-check',
+ 'Podrás enviar mensajes automatizados con ofertas especiales o recomendaciones de productos basadas en el historial de compras de tus clientes, lo que significa que tus clientes pueden recibir una experiencia más personalizada.',
},
],
[
{
- title: 'Excellent Page Speed',
+ title: 'Análisis de datos y toma de decisiones informadas',
description:
- 'Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.',
+ 'Te permite recopilar y analizar datos sobre tus clientes para ayudarte a entender mejor sus necesidades y preferencias, y ofrecerles un servicio aún más destacado.',
icon: 'tabler:rocket',
},
{
- title: 'Search Engine Optimization (SEO)',
+ title: 'Mejora de la eficiencia',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+ 'Te brinda la facilidad de manejar varias conversaciones al mismo tiempo, lo que significa que tus clientes no tendrán que esperar en una larga cola de mensajes para obtener atención. Esto puede ayudar a mejorar la eficiencia y la productividad en tu negocio.',
icon: 'tabler:arrows-right-left',
},
{
- title: 'Open to new ideas and contributions',
+ title: 'Personalización y adaptación',
description:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
+ 'Como proyecto open source, el chatbot de WhatsApp es totalmente personalizable y puede ser adaptado a las necesidades específicas de tu negocio o proyecto. Esto significa que puedes modificar el código fuente y adaptar el chatbot a tus necesidades exactas.',
icon: 'tabler:bulb',
},
],
@@ -50,16 +48,16 @@ export default component$(() => {
- Features
+ Caracteristicas
- What you get with{' '}
- Qwind
+ Nuestras principales{' '}
+ funciones
- Sed ut perspiciatis unde omnis iste natus error sit
- voluptatem accusantium doloremque rem aperiam, eaque
- ipsa quae.
+ El secreto es mantener los procesos repetitivos en
+ procesos automatizados simples, por eso te mostramos en
+ que destacamos.
+ )
+ }
+)
diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx
index bbaf423..dae1474 100644
--- a/packages/docs/src/root.tsx
+++ b/packages/docs/src/root.tsx
@@ -8,6 +8,7 @@ import {
import { RouterHead } from '~/components/core/RouterHead'
import { DarkThemeLauncher } from '~/components/core/DarkThemeLauncher'
+import fontStyles from '~/assets/styles/fonts.css?inline'
import globalStyles from '~/assets/styles/global.css?inline'
export default component$(() => {
@@ -18,6 +19,7 @@ export default component$(() => {
* Dont remove the `` and `` elements.
*/
+ useStyles$(fontStyles)
useStyles$(globalStyles)
return (
@@ -29,10 +31,7 @@ export default component$(() => {
content="width=device-width, initial-scale=1"
/>
-
+
diff --git a/packages/docs/src/routes/docs/buttons/index.mdx b/packages/docs/src/routes/docs/buttons/index.mdx
new file mode 100644
index 0000000..d0b2556
--- /dev/null
+++ b/packages/docs/src/routes/docs/buttons/index.mdx
@@ -0,0 +1 @@
+# Botones
diff --git a/packages/docs/src/routes/docs/contribuiting/index.mdx b/packages/docs/src/routes/docs/contribuiting/index.mdx
new file mode 100644
index 0000000..38a782f
--- /dev/null
+++ b/packages/docs/src/routes/docs/contribuiting/index.mdx
@@ -0,0 +1 @@
+# Personas que quieran unirse
diff --git a/packages/docs/src/routes/docs/index.mdx b/packages/docs/src/routes/docs/index.mdx
index d5aa85f..c6d4b13 100644
--- a/packages/docs/src/routes/docs/index.mdx
+++ b/packages/docs/src/routes/docs/index.mdx
@@ -1,3 +1,5 @@
+import Collaborators from '../../components/widgets/Collaborators'
+
# Primeros Pasos
Los chatbots son una herramienta poderosa para que las empresas y
@@ -6,8 +8,6 @@ organizaciones comuniquen de forma personalizada y automatizada con sus clientes
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.
----
-
### Ejecutar
Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
@@ -16,4 +16,12 @@ Es muy sencillo solo deberas ejecutar el siguiente comando 🚀
npm create bot-whatsapp@latest
```
-
+
+
+
+
+
diff --git a/packages/docs/src/routes/docs/install/index.mdx b/packages/docs/src/routes/docs/install/index.mdx
index 07c166b..10141c3 100644
--- a/packages/docs/src/routes/docs/install/index.mdx
+++ b/packages/docs/src/routes/docs/install/index.mdx
@@ -9,75 +9,112 @@ contributors:
# Instalación
-Instalar el bot muy sencillo, solo deberas ejecutar el siguiente comando 🚀
+### 📄 Bienvenido/a
-```shell
-npm create bot-whatsapp@latest
+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)
+
+---
+
+
+
+**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
+
+**Clonar repo rama dev**
+
+```
+git clone --branch dev https://github.com/codigoencasa/bot-whatsapp
```
-Te va a preguntar que si quieres crear un bot, contesta con "Y" y la tecla `Enter`
+**Instalar dependencias**
-```shell
-🚀 Revisando tu Node.js
-Node.js compatible v18.12.0
-
-🙂 Revisando tu sistema operativo
-
-? Quieres crear un bot? (Y/n) »
+```
+cd bot-whatsapp
+yarn install
```
-A continuación te va pedir que selecciones el proveedor que quieres usar, puedes seleccionarlo moviendote sobre las opciones con las flechas arriba y abajo, y cuando estes sobre el que quieres, presiona la tecla de `Espacio` y después la tecla `Enter`.
+**Compilar (build)**
+Para compilar la aplicación es necesario ejecutar este comando, el cual genera un directorio `lib` dentro de los paquetes del monorepo.
-```shell
-? ¿Cuál proveedor de whatsapp quieres utilizar? » Espacio para seleccionar ↑/↓
-( ) whatsapp-web.js (gratis)
-( ) Venom (gratis)
-(x) Baileys (gratis)
-( ) Twilio
-( ) API Oficial (Meta)
+```
+yarn build
```
-Continuamos con la selección de la base de datos que vamos a usar para guardar las conversaciones, de igual manera, usamos las flechas y barra de espacio para la selección:
+**Example-app**
+Se ejecuta el CLI (Command Line Interface) para ayudarte a crear un app-bot de ejemplo.
-```shell
-? ¿Cuál base de datos quieres utilizar? » Espacio para seleccionar ↑/↓
-(x) Memory
-( ) Mongo
-( ) MySQL
-( ) Json
+```
+yarn run cli
```
-Terminamos con la selección de preveedor y base de datos, y continuamos con la instalación:
+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.
-Hay que cambiarnos de directorio al que se acaba de crear, dependiendo de lo que seleccionamos previamente, en este caso es `base-baileys-memory`.
-Una vez que nos cambiamos de directorio ejecutamos el comando `npm install`.
-Y cuando termine la instalación ejecutamos `npm start`.
+Se creó un subdirecorio con el nombre del proveedor y base de datos que seleccionaste, ejemplo: `base-bailey-mysql`
-```shell
-√ ¿Cuál base de datos quieres utilizar? » Memory
-success!
+Dentro de ese directorio necesitas editar el archivo package.json y borrar las siguientes lineas:
-⚡⚡⚡ INSTRUCCIONES ⚡⚡⚡
-cd base-bailey-memory
+```
+ "@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 directorio del bot (**base-baileys-memory**) se va a crear un archivo `qr.png`, este archivo contiene un código QR, hay que escanear ese código desde la aplicación de Whatsapp en el telefono que queremos ligar al bot.
+En el caso de MySql y Mongo es necesario especificar en app.js los datos de la conexión, ejemplo de MySql:
-```shell
-⚡⚡ ACCIÓN REQUERIDA ⚡⚡
-Debes escanear el QR Code para iniciar session reivsa qr.svg
-Recuerda que el QR se actualiza cada minuto
-Necesitas ayuda: https://link.codigoencasa.com/DISCORD
+```
+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'
```
-Una vez que escanemos el código nos va a aparecer el mensaje, y el bot está listo para recibir mensajes.
+
-```shell
-Proveedor conectado y listo
-```
+> **NOTA:** [Eres libre de aportar informacion a este documento o arreglar ortografia 🤣](https://github.com/codigoencasa/bot-whatsapp/edit/dev/CONTRIBUTING.md)
-Desde **otro** celular, manda un mensaje al numero que acabas de ligar con el texto "hola", y debes de recibir un mensaje de "Bienvenido a mi tienda".
+---
-**Listo.**
+- [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 41b5243..23dcea5 100644
--- a/packages/docs/src/routes/docs/layout!.tsx
+++ b/packages/docs/src/routes/docs/layout!.tsx
@@ -3,23 +3,23 @@ import type { DocumentHead } from '@builder.io/qwik-city'
import Footer from '~/components/widgets/Footer'
import Header from '~/components/widgets/Header'
import NavBar from '~/components/widgets/NavBar'
-import ExtraBar from '~/components/widgets/ExtraBar'
+// import ExtraBar from '~/components/widgets/ExtraBar'
export default component$(() => {
const store = useStore({
options: [
- { name: 'Primeros pasos', link: '/docs' },
- { name: 'Instalación', link: '/docs/install' },
- { name: 'Configuración', link: '/docs/settings' },
- { name: 'Botones y Listas', link: '/docs/buttons_lists' },
- { name: 'Migración', link: '/docs/migration' },
- { name: 'Avanzado', link: '/docs/advanced' },
- ],
- extraOptions: [
- { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },
- { name: 'Instalación', link: '/docs' },
- { name: 'Configuración', link: '/docs' },
- { name: 'Forma de pensar', link: '/docs' },
+ {
+ title: 'Primeros pasos',
+ list: [
+ { name: 'Vista rápida', link: '/docs' },
+ { name: 'Instalación', link: '/docs/install' },
+ { name: 'Configuración', link: '/docs/settings' },
+ { name: 'Migración', link: '/docs/migration' },
+ { name: 'Botones y Listas', link: '/docs/buttons_lists' },
+ { name: 'Avanzado', link: '/docs/advanced' },
+ { name: 'Contribuidores', link: '/docs/contribuiting' },
+ ],
+ },
],
})
@@ -35,7 +35,7 @@ export default component$(() => {
+ 
+ 
+ 
+ 
+