cheveguerra/whatsapp-api-tutorial
1
0
Fork 0
mirror of https://github.com/cheveguerra/whatsapp-api-tutorial.git synced 2026-04-17 19:36:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Keep index.html for app.js & make another for multiple device

Browse Source
This commit is contained in:
Nur Muhammad
2020-12-13 13:52:29 +08:00
parent f67f3b8d61
commit 9272951df7
3 changed files with 97 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app-multiple-device.js
View File

@@ -18,7 +18,7 @@ app.use(express.urlencoded({
})); }));
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.sendFile('index.html', { res.sendFile('index-multiple-device.html', {
root: __dirname root: __dirname
}); });
}); });

86
index-multiple-device.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<title>Whatsapp API by Ngekoding</title>
<style>
.client {
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
display: inline-block;
margin: 10px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1>Whatsapp API</h1>
<p>Powered by Ngekoding</p>
<div class="form-container">
<label for="client-id">ID</label><br>
<input type="text" id="client-id" placeholder="Masukkan ID">
<br><br>
<label for="client-description">Deskripsi</label><br>
<textarea rows="3" id="client-description" placeholder="Masukkan deskripsi"></textarea>
<br><br>
<button class="add-client-btn">Tambah Client</button>
</div>
<hr>
<div class="client-container">
<div class="client hide">
<h3 class="title"></h3>
<p class="description"></p>
<img src="" alt="QR Code" id="qrcode">
<h3>Logs:</h3>
<ul class="logs"></ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.min.js" integrity="sha512-/WwtKR6NnHomLo0O4w9QKc1INTPEJs7ko6u2aBTA1paPldhPl8LtXsi7a35iEZ69+9P5dcgVNESG8hrP4Y2t3w==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var socket = io();
// Ketika button tambah diklik
$('.add-client-btn').click(function() {
var clientId = $('#client-id').val();
var clientDescription = $('#client-description').val();
var template = $('.client').first().clone()
.removeClass('hide')
.addClass(clientId);
template.find('.title').html(clientId);
template.find('.description').html(clientDescription);
$('.client-container').append(template);
socket.emit('create-session', {
id: clientId,
description: clientDescription
});
});
socket.on('message', function(data) {
$(`.client.${data.id} .logs`).append($('<li>').text(data.text));
});
socket.on('qr', function(data) {
$(`.client.${data.id} #qrcode`).attr('src', data.src);
$(`.client.${data.id} #qrcode`).show();
});
socket.on('ready', function(data) {
$(`.client.${data.id} #qrcode`).hide();
});
socket.on('authenticated', function(data) {
$(`.client.${data.id} #qrcode`).hide();
});
});
</script>
</body>
</html>

59
index.html
View File

@@ -2,44 +2,16 @@
<html> <html>
<head> <head>
<title>Whatsapp API by Ngekoding</title> <title>Whatsapp API by Ngekoding</title>
<style>
.client {
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
display: inline-block;
margin: 10px;
}
.hide {
display: none;
}
</style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<h1>Whatsapp API</h1> <h1>Whatsapp API</h1>
<p>Powered by Ngekoding</p> <p>Powered by Ngekoding</p>
<div class="form-container">
<label for="client-id">ID</label><br>
<input type="text" id="client-id" placeholder="Masukkan ID">
<br><br>
<label for="client-description">Deskripsi</label><br>
<textarea rows="3" id="client-description" placeholder="Masukkan deskripsi"></textarea>
<br><br>
<button class="add-client-btn">Tambah Client</button>
</div>
<hr>
<div class="client-container">
<div class="client hide">
<h3 class="title"></h3>
<p class="description"></p>
<img src="" alt="QR Code" id="qrcode"> <img src="" alt="QR Code" id="qrcode">
<h3>Logs:</h3> <h3>Logs:</h3>
<ul class="logs"></ul> <ul class="logs"></ul>
</div> </div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.min.js" integrity="sha512-/WwtKR6NnHomLo0O4w9QKc1INTPEJs7ko6u2aBTA1paPldhPl8LtXsi7a35iEZ69+9P5dcgVNESG8hrP4Y2t3w==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.min.js" integrity="sha512-/WwtKR6NnHomLo0O4w9QKc1INTPEJs7ko6u2aBTA1paPldhPl8LtXsi7a35iEZ69+9P5dcgVNESG8hrP4Y2t3w==" crossorigin="anonymous"></script>
@@ -47,38 +19,21 @@
$(document).ready(function() { $(document).ready(function() {
var socket = io(); var socket = io();
// Ketika button tambah diklik socket.on('message', function(msg) {
$('.add-client-btn').click(function() { $('.logs').append($('<li>').text(msg));
var clientId = $('#client-id').val();
var clientDescription = $('#client-description').val();
var template = $('.client').first().clone()
.removeClass('hide')
.addClass(clientId);
template.find('.title').html(clientId);
template.find('.description').html(clientDescription);
$('.client-container').append(template);
socket.emit('create-session', {
id: clientId,
description: clientDescription
});
}); });
socket.on('message', function(data) { socket.on('qr', function(src) {
$(`.client.${data.id} .logs`).append($('<li>').text(data.text)); $('#qrcode').attr('src', src);
}); $('#qrcode').show();
socket.on('qr', function(data) {
$(`.client.${data.id} #qrcode`).attr('src', data.src);
$(`.client.${data.id} #qrcode`).show();
}); });
socket.on('ready', function(data) { socket.on('ready', function(data) {
$(`.client.${data.id} #qrcode`).hide(); $('#qrcode').hide();
}); });
socket.on('authenticated', function(data) { socket.on('authenticated', function(data) {
$(`.client.${data.id} #qrcode`).hide(); $('#qrcode').hide();
}); });
}); });
</script> </script>