├── api
    └── index.js
├── static
    └── whatsapp-sessions.json
├── nodemon.json
├── .gitignore
├── utils
    └── formatter.js
├── README.md
├── package.json
├── LICENSE
├── app.js
└── index.html


/api/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/whatsapp-sessions.json:
--------------------------------------------------------------------------------
1 | []
2 | 


--------------------------------------------------------------------------------
/nodemon.json:
--------------------------------------------------------------------------------
1 | {
2 |     "ignore":["./static/*.json"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | package-lock.json
3 | static/./static/whatsapp-session-*.json


--------------------------------------------------------------------------------
/utils/formatter.js:
--------------------------------------------------------------------------------
 1 | const phoneNumberFormatter = (number) => {
 2 |     let formatted = number.replace(/\D/g, '')
 3 |     
 4 |     if(formatted.startsWith('0')){
 5 |         formatted = '62' + formatted.substr(1);
 6 |     }
 7 | 
 8 |     if (!formatted.endsWith('@c.us')) {
 9 |         formatted += '@c.us';
10 |     }
11 |     
12 |     return formatted;
13 | }
14 | 
15 | module.exports = {
16 |     phoneNumberFormatter
17 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Whapi
 2 | 
 3 | Whapi Adalah open source WhatsApp Api Gateaway Multi Device yang di kembangkan oleh : [Muhammad Zakir Ramadhan](https://github.com/muhammadzakirramadhan/) yang dapat di pakai dan kembangkan oleh siapa aja. Jangan jadikan open source ini untuk jadi brand tanpa seizin Pengembang.
 4 | 
 5 | ## Instalasi
 6 | 
 7 | Clone Project
 8 | 
 9 |     git clone https://github.com/muhammadzakirramadhan/whapi
10 | 
11 | Instalasi Depedency
12 | 
13 |     npm install
14 | 
15 | Command Development
16 | 
17 |     npm run dev
18 | 
19 | ## Todo
20 | 
21 |  - [x] Frontend
22 |  - [ ] Rest Api
23 |  - [ ] Dokumentasi Api
24 |  
25 | 
26 | > Untuk Api masih di develop karena ada beberapa kendala saat save device baru
27 | 
28 | ## Untuk Contribute
29 | 
30 | Silahkan Commit dengan branch :
31 | 
32 |     username-commit-(pembaruan yang di lakukan) 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "whapi",
 3 |   "version": "1.0.0",
 4 |   "description": "WhatsApp Api Gateaway",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "start": "node app.js",
 8 |     "dev": "nodemon app.js",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/muhammadzakirramadhan/whapi.git"
14 |   },
15 |   "keywords": [
16 |     "whatsapp-api",
17 |     "whatsapp",
18 |     "whapi"
19 |   ],
20 |   "author": "Muhammad Zakir Ramadhan",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/muhammadzakirramadhan/whapi/issues"
24 |   },
25 |   "homepage": "https://github.com/muhammadzakirramadhan/whapi#readme",
26 |   "dependencies": {
27 |     "express": "^4.17.1",
28 |     "http": "0.0.1-security",
29 |     "qrcode": "^1.4.4",
30 |     "socket.io": "^3.1.1",
31 |     "whatsapp-web.js": "^1.12.1"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Muhammad Zakir Ramadhan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | const { Client } = require('whatsapp-web.js')
  2 | const express = require('express')
  3 | const socketIO = require('socket.io');
  4 | const qrcode = require('qrcode');
  5 | const http = require('http');
  6 | const fs = require('fs')
  7 | 
  8 | const port = process.env.PORT || 8000;
  9 | const app = express();
 10 | const server = http.createServer(app)
 11 | const io = socketIO(server);
 12 | 
 13 | app.use(express.json())
 14 | app.use(express.urlencoded({
 15 |     extended:true
 16 | }))
 17 | 
 18 | // WhatsApp Api Core 
 19 | const sessions = [];
 20 | const SESSIONS_FILE = './static/whatsapp-sessions.json';
 21 | 
 22 | const createSessionsFileIfNotExists = () =>{
 23 |     if (!fs.existsSync(SESSIONS_FILE)) {
 24 |         try {
 25 |             fs.writeFileSync(SESSIONS_FILE, JSON.stringify([]));
 26 |             console.log('Sessions file created successfully.');
 27 |         } catch(err) {
 28 |             console.log('Failed to create sessions file: ', err);
 29 |         }
 30 |     }
 31 | }
 32 |   
 33 | createSessionsFileIfNotExists();
 34 | 
 35 | const setSessionsFile = (sessions) => {
 36 |     fs.writeFile(SESSIONS_FILE, JSON.stringify(sessions), (err) => {
 37 |         if(err){
 38 |             console.log(err)
 39 |         }
 40 |     })
 41 | }
 42 | 
 43 | const getSessionsFile = () => {
 44 |     return JSON.parse(fs.readFileSync(SESSIONS_FILE))
 45 | }
 46 | 
 47 | const createSession = async (id) => {
 48 |     console.log('Create sessions : ' + id);
 49 |     const SESSION_FILE_PATH = `./static/whatsapp-session-${id}.json`;
 50 | 
 51 |     let sessionCfg;
 52 |     if (fs.existsSync(SESSION_FILE_PATH)) {
 53 |         sessionCfg = require(SESSION_FILE_PATH);
 54 |     }
 55 | 
 56 |     const client = new Client({
 57 |         restartOnAuthFail: true,
 58 |         puppeteer: {
 59 |         headless: true,
 60 |         args: [
 61 |             '--no-sandbox',
 62 |             '--disable-setuid-sandbox',
 63 |             '--disable-dev-shm-usage',
 64 |             '--disable-accelerated-2d-canvas',
 65 |             '--no-first-run',
 66 |             '--no-zygote',
 67 |             '--single-process', // <- this one doesn't works in Windows
 68 |             '--disable-gpu'
 69 |         ],
 70 |         },
 71 |         session: sessionCfg
 72 |     });
 73 | 
 74 |     client.initialize();
 75 | 
 76 |     client.on('qr', (qr) => {
 77 |         // Generate and scan this code with your phone
 78 |         // console.log('QR RECEIVED', qr);
 79 |         qrcode.toDataURL(qr, (err, url) => {
 80 |             // console.log('QR RECEIVED', url);
 81 | 
 82 |             io.emit('qr', { 
 83 |                 id: id, 
 84 |                 src: url 
 85 |             });
 86 | 
 87 |             io.emit('message', { 
 88 |                 id: id, 
 89 |                 text: 'QR Code received, scan please!' 
 90 |             });
 91 |         })
 92 |     });
 93 | 
 94 |     client.on('ready', () => {
 95 |         io.emit('ready', {
 96 |             id:id
 97 |         });
 98 | 
 99 |         io.emit('message', {
100 |             id:id,
101 |             text:'WhatsApp Ready!'
102 |         });
103 | 
104 |         const savedSessions = getSessionsFile();
105 |         const sessionIndex = savedSessions.findIndex(sess => sess.id = id);
106 |         savedSessions[sessionIndex].ready = true;
107 |         setSessionsFile(savedSessions);
108 |     });
109 | 
110 |     client.on('authenticated', (session) => {
111 |         io.emit('authenticated', {
112 |             id:id
113 |         });
114 | 
115 |         io.emit('message',  {
116 |             id:id,
117 |             text:'Client is authenticated!'
118 |         });
119 | 
120 |         console.log('AUTHENTICATED', session);
121 |         sessionCfg=session;
122 |         fs.writeFile(SESSION_FILE_PATH, JSON.stringify(session), function (err) {
123 |             if (err) {
124 |                 console.error(err);
125 |             }
126 |         });
127 |     });
128 | 
129 |     client.on('auth_failure', (session) =>{
130 |         io.emit('message', { 
131 |             id: id, 
132 |             text: 'Auth failure, restarting...' 
133 |         });
134 |     });
135 |     
136 |     client.on('disconnected', (reason) => {
137 |         io.emit('message', { id: id, text: 'Whatsapp is disconnected!' });
138 |         fs.unlinkSync(SESSION_FILE_PATH, function(err) {
139 |             if(err) return console.log(err);
140 |             console.log('Session file deleted!');
141 |         });
142 | 
143 |         client.destroy();
144 |         client.initialize();
145 |     
146 |         // Menghapus pada file sessions
147 |         const savedSessions = getSessionsFile();
148 |         const sessionIndex = savedSessions.findIndex(sess => sess.id == id);
149 |         savedSessions.splice(sessionIndex, 1);
150 |         setSessionsFile(savedSessions);
151 |     
152 |         io.emit('remove-session', id);
153 |     });
154 | 
155 |     sessions.push({
156 |         id:id,
157 |         client:client
158 |     });
159 | 
160 |     console.log(sessions)
161 | 
162 |     const savedSessions = getSessionsFile()
163 |     const sessionsIndex = savedSessions.findIndex(sess => sess.id = id)
164 |     console.log(sessionsIndex)
165 |     if(sessionsIndex == -1){
166 |         savedSessions.push({
167 |             id:id,
168 |             ready:false
169 |         });
170 | 
171 |         setSessionsFile(savedSessions);
172 |     }
173 | }
174 | 
175 | const init = (socket) => {
176 |     const savedSessions = getSessionsFile();
177 | 
178 |     if(savedSessions.length > 0){
179 |         if(socket){
180 |             socket.emit('init', savedSessions);
181 |         } else {
182 |             savedSessions.forEach(sess => {
183 |                 createSession(sess.id)
184 |             });
185 |         }
186 |     }
187 | }
188 | 
189 | init();
190 | // socket.io
191 | 
192 | io.on('connection', (socket) => {
193 |     init(socket)
194 |     socket.on('create-session', (data) => {
195 |         // console.log(data)
196 |         createSession(data.id);
197 |     })
198 | })
199 | 
200 | // Application Core
201 | app.get('/', (req, res) => {
202 |     res.status(200).sendFile('index.html', {
203 |         root: __dirname
204 |     });
205 | })
206 | 
207 | 
208 | server.listen(port, () => {
209 |     console.log(`Running Server On Port ${port}`);
210 | })


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Whapi - WhatsApp Api Gateaway</title>
  7 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  8 |     <style>
  9 |         .hide {
 10 |             display: none;
 11 |         }
 12 |     </style>
 13 | </head>
 14 | <body>
 15 |     <nav class="navbar navbar-expand-lg navbar-light bg-light">
 16 |         <a class="navbar-brand" href="#">Whapi</a>
 17 |         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 18 |             <span class="navbar-toggler-icon"></span>
 19 |         </button>
 20 |       
 21 |         <div class="collapse navbar-collapse" id="navbarSupportedContent">
 22 |           <ul class="navbar-nav mr-auto">
 23 |             <li class="nav-item active">
 24 |                 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 25 |             </li>
 26 |         </div>
 27 |       </nav>
 28 |     <div class="jumbotron my-3">
 29 |         <h1 class="display-4">Selamat Datang Di Whapi!</h1>
 30 |         <p class="lead">Whapi adalah Whatsapp Api Gateaway yang di kembangkan oleh <a href="https://github.com/muhammadzakirramadhan">Muhammad Zakir Ramadhan</a>.</p>
 31 |         <hr class="my-4">
 32 |         <p>Whapi adalah Open Source yang dapat di kembangkan oleh siapa saja, <a href="https://github.com/muhammadzakirramadhan/whapi" target="_blank" rel="noopener noreferrer">Fork</a>.</p>
 33 |         <a class="btn btn-success btn-lg btnAdd" href="#" role="button">Mulai</a>
 34 |     </div>
 35 |     <div class="container-fluid client-container">
 36 |         <div class="client hide">
 37 |             <div class="col-lg-12">
 38 |                 <div class="row">
 39 |                     <div class="col-md-4 qrc" style="display: none;">
 40 |                         <div class="card card-default">
 41 |                             <div class="card-header">
 42 |                                 <h4>QRCode</h4>
 43 |                             </div>
 44 |                             <div class="card-body">
 45 |                                 <img src="" alt="QRCode" id="qrcode">
 46 |                             </div>
 47 |                         </div>
 48 |                     </div>
 49 |                     <div class="col-md-4">
 50 |                         <div class="card card-default">
 51 |                             <div class="card-header">
 52 |                                 <h4>Logs</h4>
 53 |                                 <!-- <h3 class="title"></h3> -->
 54 |                             </div>
 55 |                             <div class="card-body">
 56 |                                 <ul class="logs"></ul>
 57 |                             </div>
 58 |                         </div>
 59 |                     </div>
 60 |                     <div class="col-md-4">
 61 |                         <div class="card card-default">
 62 |                             <div class="card-header">
 63 |                                 <h4>Token</h4>
 64 |                                 <!-- <h3 class="title"></h3> -->
 65 |                             </div>
 66 |                             <div class="card-body">
 67 |                                 <div class="form-group">
 68 |                                     <label for="token">Token : </label>
 69 |                                     <input type="text" id="myInput" class="form-control token" value="" readonly>
 70 |                                 </div>
 71 |                                 <!-- <button class="btn btn-info" onclick="copy()">Copy</button> -->
 72 |                             </div>
 73 |                         </div>
 74 |                     </div>
 75 |                 </div>
 76 |             </div>
 77 |         </div>  
 78 |     </div>      
 79 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
 80 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.min.js" integrity="sha512-tXH7Av8en7+/hg0XwBppaCDPmpJhUXbZ+j7lNC4y+ZQpmCZQcgQN6RjkM7Irj1MUW7bZengfuTOqR4RzCC4bnA==" crossorigin="anonymous"></script>
 81 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
 82 |     <script>
 83 |         $(document).ready(function(){
 84 |             let socket = io(); 
 85 |             var _token = window.localStorage.getItem('_token');
 86 | 
 87 |             if(_token){
 88 |                $('.btnAdd').hide() 
 89 |             }
 90 | 
 91 |             $('.btnAdd').click(function(){
 92 |                 let token = _uid(36)
 93 |                 let data = {
 94 |                     id: token
 95 |                 }
 96 |                 
 97 |                 var template = $('.client').first().clone().removeClass('hide').addClass(token) 
 98 |                 template.find('.token').val(token)
 99 |                 template.find('.qrc').show()
100 |                
101 |                 $('.client-container').append(template)
102 |                 
103 |                 socket.emit('create-session', data);
104 |                 window.localStorage.setItem('_token', token);
105 |                 console.log(token)
106 |             });
107 |             
108 |             socket.on('init', function(data){
109 |                 $('.client-container .client').not(':first').remove()
110 |                 console.log(data)
111 |                 for(let i = 0; data.length; i++){
112 |                     let session = data[i]
113 | 
114 |                     var clientId = session.id;
115 |                     var description = session.description;      
116 |                     var template = $('.client').first().clone().removeClass('hide').addClass(clientId) 
117 |                     var __token = window.localStorage.getItem('_token');
118 | 
119 |                     if(clientId == __token){
120 |                         template.find('.token').val(clientId)
121 |                     
122 |                         $('.client-container').append(template)
123 | 
124 |                         if(session.ready){
125 |                             $(`.client.${session.id} .logs`).append($('<li>').text('WhatsApp Is Ready!'));
126 |                         } else {
127 |                             $(`.client.${session.id} .logs`).append($('<li>').text('Connecting....'));
128 |                             template.find('.qrc').show()
129 |                         }
130 |                     }
131 |                 }                
132 |             })
133 | 
134 |             socket.on('remove-session', function(id){
135 |                 $(`.client.${id}`).remove()
136 |                 window.localStorage.removeItem('_token');
137 |             })
138 | 
139 |             socket.on('message', function(data){
140 |                 console.log(data)
141 |                 $(`.client.${data.id} .logs`).append($('<li>').text(data.text));
142 |             });
143 | 
144 |             socket.on('qr', function(data){
145 |                 console.log(data)
146 |                 $(`.client.${data.id} .qrc`).show();
147 |                 $(`.client.${data.id} #qrcode`).attr('src', data.src);
148 |                 $(`.client.${data.id} #qrcode`).show();
149 |             })
150 | 
151 |             socket.on('ready', function(data){
152 |                 $(`.client.${data.id} #qrcode`).hide();
153 |                 $(`.client.${data.id} .qrc`).hide();
154 |             });
155 | 
156 |             socket.on('authenticated', function(data){
157 |                 $(`.client.${data.id} #qrcode`).hide();
158 |                 $(`.client.${data.id} .qrc`).hide();
159 |             });
160 | 
161 |         });
162 | 
163 |         function _uid(length) {
164 |             var result           = '';
165 |             var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
166 |             var charactersLength = characters.length;
167 |             for ( var i = 0; i < length; i++ ) {
168 |                 result += characters.charAt(Math.floor(Math.random() * charactersLength));
169 |             }
170 |             return result;
171 |         }
172 |     </script>
173 | </body>
174 | </html>


--------------------------------------------------------------------------------