Pernahkah Anda ingin mengirim pesan WhatsApp ke seseorang tanpa harus menyimpan nomornya terlebih dahulu? Dalam artikel ini, kita akan membuat aplikasi web sederhana yang memungkinkan Anda melakukan itu dengan memanfaatkan URL API WhatsApp Web.

Aplikasi ini sangat mudah dibuat dan cocok untuk Anda yang baru belajar HTML, CSS, dan JavaScript. Yuk, kita mulai!

Apa yang Akan Kita Buat?

Kita akan membuat aplikasi web sederhana di mana pengguna dapat:

  • Memasukkan nomor WhatsApp (dalam format internasional).
  • Menuliskan pesan yang ingin dikirim.
  • Menekan tombol untuk langsung membuka WhatsApp Web dengan pesan siap terkirim.

Langkah-Langkah Pembuatan

1. Siapkan Folder Proyek

Buat folder baru untuk proyek Anda, misalnya dengan nama wa-messenger. Di dalam folder ini, kita akan membuat file HTML.

2. Buat File index.html

Pada praktek ini, saya menggunakan aplikasi TrebEdit di perangkat Android. TrebEdit adalah aplikasi teks editor yang mendukung HTML, CSS, dan JavaScript, sehingga sangat cocok untuk pengembangan web langsung dari smartphone. Namun, Anda juga bisa menggunakan teks editor lain seperti Notepad (di Windows) atau aplikasi serupa di platform lain.

Buat file baru bernama index.html dan salin kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi Kirim Pesan WhatsApp</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #25d366;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #20b358;
}
</style>
</head>
<body>
<h1>Kirim Pesan WhatsApp Tanpa Simpan Nomor</h1>
<form id="waForm">
<div class="form-group">
<label for="phone">Nomor WhatsApp</label>
<input type="text" id="phone" placeholder="Contoh: 6281234567890" required>
</div>
<div class="form-group">
<label for="message">Pesan</label>
<textarea id="message" rows="5" placeholder="Tulis pesan Anda di sini..." required></textarea>
</div>
<button type="submit">Kirim Pesan</button>
</form>

<script>
document.getElementById('waForm').addEventListener('submit', function (e) {
e.preventDefault();

// Ambil data dari form
const phone = document.getElementById('phone').value;
const message = document.getElementById('message').value;

// Redirect ke URL WhatsApp
const waURL = `https://api.whatsapp.com/send?phone=${phone}&text=${encodeURIComponent(message)}`;
window.open(waURL, '_blank');
});
</script>
</body>
</html>

3. Penjelasan Kode

HTML:

  • Menyediakan form input untuk nomor WhatsApp dan pesan.
  • Form ini dirancang agar mudah digunakan dengan placeholder sebagai panduan.

CSS:

  • Membuat tampilan form lebih menarik dan user-friendly.

JavaScript:

  • Mengambil data dari input nomor dan pesan.
  • Membuka WhatsApp Web melalui URL API dengan nomor dan pesan yang sudah diisi.

Cara Menjalankan

  • Simpan file index.html.
  • Buka file tersebut di browser favorit Anda.
  • Masukkan nomor WhatsApp (format internasional, contoh: 6281234567890).
  • Tulis pesan yang ingin dikirim.
  • Klik tombol “Kirim Pesan” untuk membuka WhatsApp Web dengan pesan yang sudah siap terkirim.

Aplikasi ini sangat sederhana namun bermanfaat untuk kebutuhan sehari-hari. Pada tutorial ini, kita memanfaatkan aplikasi TrebEdit untuk menulis kode secara langsung di perangkat Android. Namun, Anda juga dapat menggunakan teks editor lain seperti Notepad, Visual Studio Code, atau Sublime Text.

Dengan memahami kode di atas, Anda juga dapat mengembangkan aplikasi lebih lanjut sesuai kebutuhan.

Selamat mencoba dan semoga berhasil!