update README

2026-04-17 19:37:02 +00:00 · 2020-09-07 10:05:31 -03:00
parent 42a8feacdd
commit dc62a85dcb
1 changed files with 44 additions and 34 deletions
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ A _very simple_ Ticket System based on WhatsApp messages.

 Backend uses [whatsapp-web.js](https://github.com/pedroslopez/whatsapp-web.js) to receive and send WhatsApp messages, create tickets from them and store all in a MySQL database.

-Frontend is a full-featured multi-user _chat app_ bootstrapped with react-create-app and Material UI, that comunicates with backend using REST API and Websockets. It allows you to interact with contacts, tickets, send and receive WhatsApp messagees.
+Frontend is a full-featured multi-user _chat app_ bootstrapped with react-create-app and Material UI, that comunicates with backend using REST API and Websockets. It allows you to interact with contacts, tickets, send and receive WhatsApp messages.

 **NOTE**: I can't guarantee you will not be blocked by using this method, although it has worked for me. WhatsApp does not allow bots or unofficial clients on their platform, so this shouldn't be considered totally safe.

@@ -26,9 +26,9 @@ If a contact sent a new message in less than 2 hours interval, and there is no t

 ## Demo

-**Note**: It's not a good idea to sync your whatsapp account is this demo enviroment, because all your received messages will be stored in database and will be accessible by everyone that access this URL and creates an account.
+**Note**: It's not a good idea to sync your WhatsApp account is this demo enviroment, because all your received messages will be stored in database and will be accessible by everyone that access this URL and creates an account.

-That said, theres not much to test without syncing an whatsapp account, since adding contacts or tickets simple throws an error if app is not synced with whatassp. I will create a better test enviroment in future.
+That said, theres not much to test without syncing an WhatsApp account, since adding contacts or tickets simple throws an error if app is not synced with WhatsApp.

 Meanwhile, if you want to test it, remember to disconnect session and delete all tickets and contacts after your tests.

@@ -38,12 +38,12 @@ email: demo@demo.com

 password: demo123

-It's online thanks to [@ramphy](https://github.com/ramphy), who provided a VPS for me to create these installation instructions.
+It's online thanks to [@ramphy](https://github.com/ramphy), who provided a VPS to creation of these installation instructions.

 ## Installation and Usage (Linux Ubuntu - Development)

 Create Mysql Database using docker:
-_Note_: change dbname, username password.
+_Note_: change MYSQL_DATABASE, MYSQL_PASSWORD, MYSQL_USER and MYSQL_ROOT_PASSWORD.

 ```bash
 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
@@ -57,9 +57,10 @@ sudo apt-get install -y libgbm-dev wget unzip fontconfig locales gconf-service l

 - Clone this repo
 - On backend folder:
-  - Copy .env.example to .env and fill it with database details
+  - Copy .env.example to .env and fill it with database details.
  - Install dependecies: `npm install` (Only in the first time)
  - Create database tables: `npx sequelize db:migrate` (Only in the first time)
+  - Fill database with initial values: `npx sequelize db:seed:all`
  - Start backend: `npm start`
 - In another terminal, on frontend folder:
  - Copy .env.example to .env and fill it with backend URL (normally localhost:port)
@@ -67,12 +68,13 @@ sudo apt-get install -y libgbm-dev wget unzip fontconfig locales gconf-service l
  - Start frontend: `npm start`
 - Go to http://your_server_ip:3000/signup
 - Create an user and login with it.
- On the sidebard, go to _Connection_ and read QRCode with your WhatsApp.
+- On the sidebard, go to _Connections_ and create your first WhatsApp connection.
+- Wait for QR CODE button to appear, click it and read qr code.
 - Done. Every message received by your synced WhatsApp number will appear in Tickets List.

 ## Basic production deployment (Ubuntu 18.04 VPS)

-You need two subdomains forwarding to youts VPS ip to follow these instructions. We'll use `myapp.mydomain.com` and `api.mydomain.com` in examples.
+You'll need two subdomains forwarding to yours VPS ip to follow these instructions. We'll use `myapp.mydomain.com` to frontend and `api.mydomain.com` to backend in the following example. We'll also use an dedicated user with sudo privileges no deploy it (not root).

 Update all system packages:

@@ -89,7 +91,7 @@ node -v
 npm -v
 ```

-Install docker:
+Install docker and add you user to docker group:

 ```bash
 sudo apt install apt-transport-https ca-certificates curl software-properties-common
@@ -98,20 +100,21 @@ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubun
 sudo apt update
 sudo apt install docker-ce
 sudo systemctl status docker
-```
-
-Add current user to docker group:
-
-```bash
 sudo usermod -aG docker \${USER}
 su - \${USER}
 ```

-Create database container (Instructions in installation)
+Create Mysql Database using docker:
+_Note_: change MYSQL_DATABASE, MYSQL_PASSWORD, MYSQL_USER and MYSQL_ROOT_PASSWORD.
+
+```bash
+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:

 ```bash
+cd ~
 git clone https://github.com/canove/whaticket whaticket
 ```

@@ -124,8 +127,8 @@ nano whaticket/backend/.env

 ```bash
 NODE_ENV=
-BACKEND_URL=https://api.mydomain.com
-PROXY_PORT=443
+BACKEND_URL=https://api.mydomain.com      #USE HTTPS HERE, WE WILL ADD SSL LATTER
+PROXY_PORT=443                            #USE NGINX REVERSE PROXY PORT HERE, WE WILL CONFIGURE IT LATTER
 PORT=8080

 DB_HOST=
@@ -134,34 +137,34 @@ DB_PASS=
 DB_NAME=
 ```

-Install puppeteer dependencies(Instructions in installation)
+Install puppeteer dependencies:

-Install backend dependencies and run migrations:
+```bash
+sudo apt-get install -y 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, run migrations and seeds:

 ```bash
 cd whaticket/backend
 npm install
 npx sequelize db:migrate
+npx sequelize db:seed:all
 ```

-Start backend to confirm its working, you should see: `Server started on port...` on console.
+Start it with `npm start`, you should see: `Server started on port...` on console. Hit `CTRL + C` to exit.

-Install pm2 **with sudo**:
+Install pm2 **with sudo**, and start backend with it:

 ```bash
 sudo npm install -g pm2
-```
-
-Start backend with pm2:
-
-```bash
 pm2 start src/app.js --name whaticket-backend
 ```

 Make pm2 auto start afeter reboot:

 ```bash
-pm2 startup ubuntu -u YOUR_USERNAME
+pm2 startup ubuntu -u `YOUR_USERNAME`
 ```

 Copy the last line outputed from previus command and run it, its something like:
@@ -170,7 +173,7 @@ 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
 ```

-Now, lets prepare frontend:
+Go to frontend folder and install dependencies:

 ```bash
 cd ../whaticket/frontend
@@ -189,16 +192,24 @@ Build frontend app:
 npm run build
 ```

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

 ```bash
 pm2 start server.js --name whaticket-frontend
+pm2 save
 ```

-Save pm2 process list to start automatically after reboot:
+To check if it's running, run `pm2 list`, it should look like:

 ```bash
-pm2 save
+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:
@@ -211,7 +222,6 @@ Remove nginx default site:

 ```bash
 sudo rm /etc/nginx/sites-enabled/default
-sudo service nginx restart
 ```

 Create a new nginx site to frontend app:
@@ -240,7 +250,7 @@ server {
 }
 ```

-Create another one to backend api, changing `server_name` to yours equivalent to `api.mydomain.com`, and `proxy_pass` to you localhost backend node server URL:
+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:

 ```bash
 sudo cp /etc/nginx/sites-available/whaticket-frontend /etc/nginx/sites-available/whaticket-backend
@@ -257,7 +267,7 @@ server {
 }
 ```

-Create a symbolic link to enalbe nginx site:
+Create a symbolic links to enalbe nginx sites:

 ```bash
 sudo ln -s /etc/nginx/sites-available/whaticket-frontend /etc/nginx/sites-enabled