/projetowt1

Primary LanguageJavaScriptMIT LicenseMIT

Donate FOSSA Status Quality Gate Status Maintainability Rating Discord Chat

WhaTicket

** NOTA **: A nova versão do whatsapp-web.js requer o Node 14. Atualize suas instalações para continuar usando.

Um sistema de tickets muito simples baseado em mensagens do WhatsApp.

O backend usa [whatsapp-web.js] (https://github.com/pedroslopez/whatsapp-web.js) para receber e enviar mensagens WhatsApp, criar tíquetes a partir delas e armazenar tudo em um banco de dados MySQL.

O frontend é um chat app multiusuário com recursos completos, inicializado com react-create-app e Material UI, que se comunica com o backend usando REST API e Websockets. Ele permite que você interaja com contatos, tickets, envie e receba mensagens do WhatsApp.

** NOTA **: Não posso garantir que você não será bloqueado com esse método, embora tenha funcionado para mim. O WhatsApp não permite bots ou clientes não oficiais em sua plataforma, então isso não deve ser considerado totalmente seguro.

Motivação

Sou um SysAdmin, e no meu trabalho diário, dou muito suporte através do WhatsApp. Como o WhatsApp Web não permite vários usuários, e 90% dos nossos ingressos vêm deste canal, criamos este para compartilhar a mesma conta do WhatsApp entre nossa equipe.

Como funciona?

A cada nova mensagem recebida em um WhatsApp associado, um novo Ticket é criado. Então, este tíquete pode ser acessado em uma fila na página Tiquetes, onde você pode atribuir um tíquete a você mesmo, aceptando-o, responder à mensagem do tíquete e, eventualmente, resolvê-lo.

As mensagens subsequentes do mesmo contato serão relacionadas ao primeiro tíquete ** aberto / pendente ** encontrado.

Se um contato enviar uma nova mensagem em menos de 2 horas de intervalo e não houver nenhum tíquete desse contato com o status ** pendente / aberto **, o tíquete ** fechado ** mais recente será reaberto, em vez de criar um novo .

Capturas de tela

Recursos

  • Faça com que vários usuários conversem no mesmo número do WhatsApp ✅
  • Conecte-se a várias contas do WhatsApp e receba todas as mensagens em um só lugar ✅ 🆕
  • Crie e converse com novos contatos sem tocar no celular ✅
  • Envie e receba mensagem ✅
  • Enviar mídia (imagens / áudio / documentos) ✅
  • Receber mídia (imagens / áudio / vídeo / documentos) ✅

Implantação de produção básica (Ubuntu 18.04 VPS)

Todas as instruções abaixo presumem que você NÃO está executando como root, já que resultará em um erro no titereiro. Então, vamos começar a criar um novo usuário e conceder privilégios sudo a ele:

adduser deploy
usermod -aG sudo deploy

Now we can login with this new user:

su deploy

Você precisará de dois subdomínios encaminhados para seu ip VPS para seguir estas instruções. Usaremos myapp.mydomain.com para frontend e api.mydomain.com para backend no exemplo a seguir.

Update all system packages:

sudo apt update && sudo apt upgrade

Install node and confirm node command is available:

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
npm -v

Install docker and add you user to docker group:

sudo apt install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable"
sudo apt update
sudo apt install docker-ce
sudo systemctl status docker
sudo usermod -aG docker ${USER}
su - ${USER}

Create Mysql Database using docker: Note: change MYSQL_DATABASE, MYSQL_PASSWORD, MYSQL_USER and MYSQL_ROOT_PASSWORD.

docker run --name whaticketdb -e MYSQL_ROOT_PASSWORD=strongpassword -e MYSQL_DATABASE=whaticket -e MYSQL_USER=whaticket -e MYSQL_PASSWORD=whaticket --restart always -p 3306:3306 -d mariadb:latest --character-set-server=utf8mb4 --collation-server=utf8mb4_bin

Clone this repository:

cd ~
git clone https://github.com/marcossonotec/projetowt1.git

Create backend .env file and fill with details:

cp projetowt1/backend/.env.example projetowt1/backend/.env
nano projetowt1/backend/.env
NODE_ENV=
BACKEND_URL=https://api.mydomain.com      #USE HTTPS HERE, WE WILL ADD SSL LATTER
FRONTEND_URL=https://myapp.mydomain.com   #USE HTTPS HERE, WE WILL ADD SSL LATTER, CORS RELATED!
PROXY_PORT=443                            #USE NGINX REVERSE PROXY PORT HERE, WE WILL CONFIGURE IT LATTER
PORT=8080

DB_HOST=localhost
DB_DIALECT=
DB_USER=
DB_PASS=
DB_NAME=

JWT_SECRET=3123123213123
JWT_REFRESH_SECRET=75756756756

Install puppeteer dependencies:

sudo apt-get install -y libxshmfence-dev libgbm-dev wget unzip fontconfig locales gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils

Install backend dependencies, build app, run migrations and seeds:

cd projetowt1/backend
npm install
npm run build
npx sequelize db:migrate
npx sequelize db:seed:all

Start it with npm start, you should see: Server started on port... on console. Hit CTRL + C to exit.

Install pm2 with sudo, and start backend with it:

sudo npm install -g pm2
pm2 start dist/server.js --name projetowt1-backend

Make pm2 auto start afeter reboot:

pm2 startup ubuntu -u `YOUR_USERNAME`

Copy the last line outputed from previus command and run it, its something like:

sudo env PATH=\$PATH:/usr/bin pm2 startup ubuntu -u YOUR_USERNAME --hp /home/YOUR_USERNAM

Go to frontend folder and install dependencies:

cd ../frontend
npm install

Edit .env file and fill it with your backend address, it should look like this:

REACT_APP_BACKEND_URL = https://api.mydomain.com/

Build frontend app:

npm run build

Start frontend with pm2, and save pm2 process list to start automatically after reboot:

pm2 start server.js --name projetowt1-frontend
pm2 save

To check if it's running, run pm2 list, it should look like:

deploy@ubuntu-whats:~$ pm2 list
┌─────┬─────────────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name                    │ namespace   │ version │ mode    │ pid      │ uptime │ .    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼─────────────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 1   │ whaticket-frontend      │ default     │ 0.1.0   │ fork    │ 179249   │ 12D    │ 0    │ online    │ 0.3%     │ 50.2mb   │ deploy   │ disabled │
│ 6   │ whaticket-backend       │ default     │ 1.0.0   │ fork    │ 179253   │ 12D    │ 15   │ online    │ 0.3%     │ 118.5mb  │ deploy   │ disabled │
└─────┴─────────────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

Install nginx:

sudo apt install nginx

Remove nginx default site:

sudo rm /etc/nginx/sites-enabled/default

Create a new nginx site to frontend app:

sudo nano /etc/nginx/sites-available/projetowt1-frontend

Edit and fill it with this information, changing server_name to yours equivalent to myapp.mydomain.com:

server {
  server_name myapp.mydomain.com;

  location / {
    proxy_pass http://127.0.0.1:3333;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
  }
}

Create another one to backend api, changing server_name to yours equivalent to api.mydomain.com, and proxy_pass to your localhost backend node server URL:

sudo cp /etc/nginx/sites-available/projetowt1-frontend /etc/nginx/sites-available/projetowt1-backend
sudo nano /etc/nginx/sites-available/projetowt1-backend
server {
  server_name api.mydomain.com;

  location / {
    proxy_pass http://127.0.0.1:8080;
    ......
}

Create a symbolic links to enalbe nginx sites:

sudo ln -s /etc/nginx/sites-available/projetowt1-frontend /etc/nginx/sites-enabled
sudo ln -s /etc/nginx/sites-available/projetowt1-backend /etc/nginx/sites-enabled

By default, nginx limit body size to 1MB, what isn't enough to some media uploads. Lets change it to 20MB adding a new line to config file:

sudo nano /etc/nginx/nginx.conf
...
http {
    ...
    client_max_body_size 20M; # HANDLE BIGGER UPLOADS
}

Test nginx configuration and restart server:

sudo nginx -t
sudo service nginx restart

Now, enable SSL (https) on your sites to use all app features like notifications and sending audio messages. A easy way to this is using Certbot:

Install certbot:

sudo add-apt-repository ppa:certbot/certbot
sudo apt update
sudo apt install python-certbot-nginx

Enable SSL on nginx (Fill / Accept all information asked):

sudo certbot --nginx

Upgrading

WhaTicket is a working in progress and we are adding new features frequently. To update your old installation and get all the new features, you can use a bash script like this:

Note: Always check the .env.example and adjust your .env file before upgrading, since some new variable may be added.

nano updateWhaticket
#!/bin/bash
echo "Updating Whaticket, please wait."

cd ~
cd whaticket
git pull
cd backend
npm install
rm -rf dist
npm run build
npx sequelize db:migrate
npx sequelize db:seed
cd ../frontend
npm install
rm -rf build
npm run build
pm2 restart all

echo "Update finished. Enjoy!"

Make it executable and run it:

chmod +x updateWhaticket
./updateWhaticket

Contributing

This project helps you and you want to help keep it going? Buy me a coffee:

Buy Me A Coffee

Para doações em BRL, utilize o Paypal:

Donate

Any help and suggestions will be apreciated.

Disclaimer

I just started leaning Javascript a few months ago and this is my first project. It may have security issues and many bugs. I recommend using it only on local network.

This project is not affiliated, associated, authorized, endorsed by, or in any way officially connected with WhatsApp or any of its subsidiaries or its affiliates. The official WhatsApp website can be found at https://whatsapp.com. "WhatsApp" as well as related names, marks, emblems and images are registered trademarks of their respective owners.