Merge pull request #517 from codigoencasa/release/production

Release/production

.github/workflows/releases-dev.yml

@@ -10,9 +10,15 @@ jobs:
     release:
         name: Release
         runs-on: ubuntu-latest
+        outputs:
+            commit: ${{ steps.vars.outputs.commit }}
         steps:
             - name: Checkout
               uses: actions/checkout@v3
+              with:
+                  fetch-depth: 0
+                  ref: ${{github.event.after}}
+                  persist-credentials: false
 
             - name: Setup Node
               uses: actions/setup-node@v3
@@ -50,8 +56,9 @@ jobs:
             - name: Release @bot-whatsapp/portal
               run: yarn node ./scripts/release.js --name=portal --version=  --token="${{ secrets.NPM_TOKEN }}"
 
-            - name: Commit Versioning & Push changes
-              uses: stefanzweifel/git-auto-commit-action@v4
+            - name: Commit & Push changes
+              uses: actions-js/push@master
               with:
-                  commit_message: 'ci(version): :zap: automatic - "${date}" updated versions every packages'
-                  branch: dev
+                  branch: release/next
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  force: true

.github/workflows/releases.yml

@@ -67,13 +67,9 @@ jobs:
             - name: Release Github
               run: yarn node ./scripts/github.js --version="${{ steps.package-version.outputs.current-version}}" --token="${{ secrets.OCTO_TOKEN }}"
 
-            - name: 'Run if changes have been detected'
-              run: |
-                  git add .
-                  git commit -m "chore(version): pre release"
-
-            - name: Commit Versioning & Push changes
-              if: github.event_name == 'push'
-              uses: stefanzweifel/git-auto-commit-action@v4
+            - name: Commit & Push changes
+              uses: actions-js/push@master
               with:
-                  commit_message: 'chore(version): launch release 🚀 "${{ steps.package-version.outputs.current-version}}"'
+                  branch: release/production
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  force: true

packages/cli/interactive/index.js

@@ -48,11 +48,11 @@ const nextSteps = async () => {
             name: 'providerWs',
             message: '¿Cuál proveedor de whatsapp quieres utilizar?',
             choices: [
-                { title: 'whatsapp-web.js (gratis)', value: 'wweb' },
-                { title: 'Venom (gratis)', value: 'venom' },
                 { title: 'Baileys (gratis)', value: 'baileys' },
+                { title: 'Venom (gratis)', value: 'venom' },
+                { title: 'whatsapp-web.js (gratis)', value: 'wweb' },
                 { title: 'Twilio', value: 'twilio' },
-                { title: 'API Oficial (Meta)', value: 'meta' },
+                { title: 'Meta', value: 'meta' },
             ],
             max: 1,
             hint: 'Espacio para seleccionar',

packages/docs/src/components/widgets/Collaborator.tsx

@@ -14,7 +14,7 @@ export default component$(
                 <a href={props.user.html_url} target="_blank">
                     <img
                         class="w-16 h-16 rounded-full mx-auto object-cover"
-                        src={props.user.avatar_url + '&s=80'}
+                        src={props.user.avatar_url}
                         alt={props.user.login}
                         width="80"
                         height="80"
@@ -23,7 +23,9 @@ export default component$(
 
                 <div class="pt-2 space-y-4 justify-center flex">
                     <figcaption class="text-sm">
-                        <div class={'font-semibold'}>{props.user.login}</div>
+                        <div class={'font-semibold truncate'}>
+                            {props.user.login}
+                        </div>
                     </figcaption>
                 </div>
             </figure>

packages/docs/src/components/widgets/Hero.tsx

@@ -56,7 +56,7 @@ export default component$(() => {
                                         </a>
                                         <a
                                             target={'_blank'}
-                                            href="https://youtu.be/DEIyGyJNGa8"
+                                            href="https://youtu.be/UgoS8PXxe-A"
                                             class="btn  bg-gray-50 dark:bg-transparent"
                                         >
                                             Ver video

packages/docs/src/components/widgets/Members.tsx

@@ -0,0 +1,54 @@
+import { component$ } from '@builder.io/qwik'
+import { RequestHandlerCloudflarePages } from '@builder.io/qwik-city/middleware/cloudflare-pages'
+import { User } from '~/contexts'
+import Collaborator from './Collaborator'
+
+export const onRequest: RequestHandlerCloudflarePages = async () => {
+    console.log('??heree')
+}
+
+export const TaleUsers = component$((props: { users: User[] }) => {
+    return (
+        <>
+            {props.users.map((user) => (
+                <div class="col-span-2 ">
+                    {' '}
+                    <Collaborator user={user} />
+                </div>
+            ))}
+        </>
+    )
+})
+
+export default component$((props: { users: User[] }) => {
+    return (
+        <section class="relative ">
+            <div class={'px-4 py-16 mx-auto max-w-6xl lg:py-20'}>
+                <div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
+                    <p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
+                        Premium
+                    </p>
+                    <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
+                        Miembros
+                    </h2>
+                    <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
+                        Conviértete en un miembro destacado y forma parte del
+                        proyecto y disfruta de manera adelantada de las
+                        actualizaciones{' '}
+                        <a
+                            class={'font-semibold'}
+                            target={'_blank'}
+                            href="https://opencollective.com/bot-whatsapp"
+                        >
+                            Únete
+                        </a>
+                    </p>
+                </div>
+
+                <div class="grid lg:grid-cols-12 grid-cols-1 gap-4 ">
+                    <TaleUsers users={props.users} />
+                </div>
+            </div>
+        </section>
+    )
+})

packages/docs/src/root.tsx

@@ -52,16 +52,22 @@ export default component$(() => {
             title: 'Avanzado',
             list: [
                 { name: 'Migración', link: '/docs/migration' },
-                { name: 'Extender funcionalidades', link: '/docs/custom' },
+                { name: 'MasterClass', link: '/docs/masterclass' },
+            ],
+        },
+        {
+            title: 'Despliegue',
+            list: [
+                { name: 'Local', link: '/docs/deploy/local' },
+                { name: 'Docker', link: '/docs/deploy/docker' },
+                { name: 'Cloud', link: '/docs/deploy/cloud' },
             ],
         },
         {
             title: 'Comunidad',
             list: [
-                { name: 'MasterClass', link: '/docs/masterclass' },
                 { name: 'Colabores', link: '/docs/contributing' },
                 { name: 'Unirme al proyecto', link: '/docs/join' },
-                { name: 'Sponsors', link: '/docs/sponsors' },
             ],
         },
     ])

packages/docs/src/routes/docs/deploy/cloud/index.mdx

@@ -0,0 +1,108 @@
+import Alert from '../../../../components/widgets/Alert'
+import Navigation from '../../../../components/widgets/Navigation'
+
+# Entorno Cloud
+
+Si deseas tener tu chatbot en ejecución en un servidor en la nueba esta, guía te ayudará.
+El servidor deberá cumplir con los requisitos mínimos, puedes ver en [este enlace.](/docs/requirements)
+
+---
+
+Dependiendo de tu proveedor de **servicio Cloud** debes crear una instancia (máquina virtual), este ejemplo iremos orientando en un entorno de AWS.
+En nuestro ejemplo creamos una maquina virtual con **Ubuntu 20.04**
+
+![](https://i.imgur.com/5zRCz9q.png)
+
+---
+
+Posterior al proceso de crear la máquina esperamos unos minutos hasta que ya está operativo y tomamos nota del usuario y la IP pública para proceder a conectarnos vía SSH
+
+## ![](https://i.imgur.com/ljyJPBm.png)
+
+## Conectarse via SSH
+
+Luego de obtener los datos necesarios para conectarnos a nuestra máquina, procedemos a hacerlo
+
+```shell
+ssh -i llaveBot.pem ubutnu@34.228.208.104
+```
+
+---
+
+Luego puede aparecer un mensaje como el siguiente donde solo debes de responder **yes**
+
+![](https://i.imgur.com/rUBASqR.png)
+
+---
+
+Una vez conectado ya estás dentro de la máquina virtual, te aconsejamos la primera vez hacer una actualización de dependencias de Ubuntu con los siguientes comandos
+
+```shell
+sudo apt-get update
+```
+
+```shell
+sudo apt-get upgrade
+```
+
+---
+
+## Recuerda instalar Node 16 o superior
+
+Puedes ver más a detalle los pasos de la instalacion en este [blog](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es)
+
+```shell
+curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
+```
+
+```shell
+sudo bash nodesource_setup.sh
+```
+
+```shell
+sudo apt-get install -y nodejs
+```
+
+---
+
+## Implementar el bot
+
+Si tienes el código de tu chatbot en un repositorio, solo falta que clones el repo en el servidor y ejecutes `npm start`
+
+Para escanear el **QR** puedes hacerlo vía WEB accediendo a la URL `http://[TU_IP_PUBLICA]:3000` en este ejemplo seria `http://34.228.208.10:3000`
+
+![](https://i.imgur.com/xcovczm.png)
+
+---
+
+## Firewall
+
+Si no te abre la pagina web asegurate de tener el puerto abierto en tu firewall.
+Ejemplo permitir el puerto **3000**
+
+![](https://i.imgur.com/0dAz0B1.png)
+
+---
+
+## Escanear QR
+
+![](https://i.imgur.com/2m3NbXC.png)
+
+---
+
+## Ejecutar en Producción
+
+Debes ubicarte en el directorio donde tienes el codigo fuente de tu chatbot.
+
+Independientemente de tu sistema operativo deberás ejecutar el chatbot con el comando atrevés de un sistema que mantenga el proceso en ejecución.
+Recomendamos [Pm2](https://pm2.keymetrics.io/)
+
+```shell
+pm2 start app.js --name=bot1
+```
+
+![](https://i.imgur.com/ilPS75H.png)
+
+La consola de devolver un mensaje con una lista de procesos, en el ejemplo puedes observar, que tenemos un proceso llamado `bot1`
+
+De esta manera ya puedes cerrar la terminal y tu bot seguirá en ejecución sin problema

packages/docs/src/routes/docs/deploy/docker/index.mdx

@@ -0,0 +1,32 @@
+import Alert from '../../../../components/widgets/Alert'
+import Navigation from '../../../../components/widgets/Navigation'
+
+# Entorno Docker
+
+Previamente, necesitas tener instalado Docker en tu servidor dependiendo del sistema operativo, los procesos cambian,
+puedes encontrar toda la información oficial de docker en [este enlace.](https://docs.docker.com/get-docker/)
+
+---
+
+Dependiendo del proveedor que has elegido necesitaras una implementación de Docker específica, pero no te preocupes, ya que viene implementada automáticamente en un archivo llamado **Dockerfile**, también puedes ver los otros Dockerfile en el apartado de [plantillas.](https://github.com/codigoencasa/bot-whatsapp/tree/main/starters/apps)
+
+![](https://i.imgur.com/cDspa0R.png)
+
+---
+
+## Contruir imagen
+
+Solo es necesario construir la imagen del docker lo puedes hacer con el siguiente comando
+
+```shell
+docker build . -t botwhatsapp:latest
+```
+
+## Iniciar contenedor
+
+Para iniciar el contenedor con la imagen previamente construida puedes realizarlo ejecutando el siguiente comando.
+Se utiliza el puerto **3001** solo com un ejemplo puedes usar el puerto que tu quieras
+
+```shell
+docker run -e PORT=3001 -p 3001:3001 botwhatsapp:latest
+```

packages/docs/src/routes/docs/deploy/local/index.mdx

@@ -0,0 +1,26 @@
+import Alert from '../../../../components/widgets/Alert'
+import Navigation from '../../../../components/widgets/Navigation'
+
+# Entorno Local
+
+Si deseas tener tu chatbot en ejecución en un servidor local (computadora personal, etc.) esta, guía te ayudará.
+El servidor local deberá cumplir con los requisitos mínimos, puedes ver en [este enlace.](/docs/requirements)
+
+---
+
+<Alert>Si deseas instalar pm2 puedes ejecutar `npm install pm2 --global`</Alert>
+
+Debes ubicarte en el directorio donde tienes el codigo fuente de tu chatbot.
+
+Independientemente de tu sistema operativo deberás ejecutar el chatbot con el comando atrevés de un sistema que mantenga el proceso en ejecución.
+Recomendamos [Pm2](https://pm2.keymetrics.io/)
+
+```shell
+pm2 start app.js --name=bot1
+```
+
+![](https://i.imgur.com/ilPS75H.png)
+
+La consola de devolver un mensaje con una lista de procesos, en el ejemplo puedes observar, que tenemos un proceso llamado `bot1`
+
+De esta manera ya puedes cerrar la terminal y tu bot seguirá en ejecución sin problema

packages/docs/src/routes/docs/masterclass/index.md

@@ -1,24 +0,0 @@
-[![hackmd-github-sync-badge](https://hackmd.io/79xQyVSgRD6RsTpqtMPPdw/badge)](https://hackmd.io/79xQyVSgRD6RsTpqtMPPdw)
-### Preguntas Frecuentes para Master Class BOT v2
-> Anota aqui las preguntas o dudas que tengas
-> Pronto estare publicando fecha y hora para la masterclass
-
-1.- Si necesito correr dos bots al mismo tiempo ¿donde puedo cambiar el puerto?
-
-2.- Si necesito agregar o modificar funciones del bot, ¿como puedo hacerlo?
-
-3.- Si quiero mi bot con otra base de datos diferente a MySQL ¿como lo puedo hacer?
-
-4.- Quiero conectarme a tal o cual API con JSON/XML/etc, ¿se puede hacer?
-
-5.- ¿Como integrar listas?
-
-6.- Preguntas y respuestas con el Bot
-
-7.- Guardar conversaciones en Excel.
-
-8.- ¿Puedo usar 2 o mas sesiones (códigos QR) al mismo tiempo?
-
-9.- ¿Puede ser que al usar el provider bailey, al leer el qr.png, que sea desde una url en el navegador, y no desde visual studio? Gracias
-
-10.- ¿Cómo tomo los datos que me envían en un mensaje para utilizarlo internamente en la búsqueda de datos propios y devolver la respuesta?

packages/docs/src/routes/docs/masterclass/index.mdx

@@ -0,0 +1,26 @@
+# MasterClass
+
+<iframe
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/22jiE2Z3XGM"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowfullscreen
+></iframe>
+
+---
+
+### Preguntas de la masterclass
+
+-   Si necesito correr dos bots al mismo tiempo ¿donde puedo cambiar el puerto?
+-   Si necesito agregar o modificar funciones del bot, ¿como puedo hacerlo?
+-   Si quiero mi bot con otra base de datos diferente a MySQL ¿como lo puedo hacer?
+-   Quiero conectarme a tal o cual API con JSON/XML/etc, ¿se puede hacer?
+-   ¿Como integrar listas?
+-   Preguntas y respuestas con el Bot
+-   Guardar conversaciones en Excel.
+-   ¿Puedo usar 2 o mas sesiones (códigos QR) al mismo tiempo?
+-   ¿Puede ser que al usar el provider bailey, al leer el qr.png, que sea desde una url en el navegador, y no desde visual studio? Gracias
+-   ¿Cómo tomo los datos que me envían en un mensaje para utilizarlo internamente en la búsqueda de datos propios y devolver la respuesta?

packages/docs/src/routes/index.tsx

@@ -5,7 +5,9 @@ import Features from '~/components/widgets/Features'
 import FAQs from '~/components/widgets/FAQs'
 import CallToAction from '~/components/widgets/CallToAction'
 import Collaborators from '~/components/widgets/Collaborators'
+import Members from '~/components/widgets/Members'
 import { fetchGithub } from '~/services/github'
+import { fetchOpenCollective } from '~/services/opencollective'
 import { RequestHandlerNetlify } from '@builder.io/qwik-city/middleware/netlify-edge'
 import { GITHUB_TOKEN } from './docs/constant'
 
@@ -13,8 +15,12 @@ export const onGet: RequestHandlerNetlify = async ({ platform }) => {
     const CHECK_GITHUB_TOKEN =
         (platform as any)?.['GITHUB_TOKEN'] ?? GITHUB_TOKEN
     console.log(`[🚩 platform]: `, GITHUB_TOKEN)
-    const data = await fetchGithub(CHECK_GITHUB_TOKEN)
-    return data
+    const dataGithub = await fetchGithub(CHECK_GITHUB_TOKEN)
+    const dataOpenCollective = await fetchOpenCollective()
+    return {
+        dataGithub,
+        dataOpenCollective,
+    }
 }
 
 export default component$(() => {
@@ -27,9 +33,16 @@ export default component$(() => {
             <CallToAction />
             <Resource
                 value={resource}
-                onResolved={(data: any) => <Collaborators users={data} />}
+                onResolved={(data: any) => {
+                    return (
+                        <>
+                            <Collaborators users={data.dataGithub} />
+                            <FAQs />
+                            <Members users={data.dataOpenCollective} />
+                        </>
+                    )
+                }}
             ></Resource>
-            <FAQs />
         </>
     )
 })

packages/docs/src/services/github.ts

@@ -14,6 +14,9 @@ export const fetchGithub = async (token: string) => {
             },
         }
     )
-    const listUsers = data.json()
-    return listUsers
+    const listUsers = await data.json()
+    return listUsers.map((u: any) => ({
+        ...u,
+        avatar_url: `${u.avatar_url}&s=80`,
+    }))
 }

packages/docs/src/services/opencollective.ts

@@ -0,0 +1,19 @@
+/**
+ * GET API from OpenCollective
+ * @returns
+ */
+export const fetchOpenCollective = async () => {
+    const data = await fetch(
+        `https://opencollective.com/bot-whatsapp/members/users.json?limit=10&offset=0`,
+        {
+            method: 'GET',
+        }
+    )
+    const listUsers = await data.json()
+    return listUsers.map((u: any) => ({
+        html_url: u.profile,
+        avatar_url: u.image ?? 'https://i.imgur.com/HhiYKwN.png',
+        login: u.name,
+        id: u.MemberId,
+    }))
+}