Edu Teknoid Teknologi Cara Membuat Aplikasi Calculator Pro berbasis App Script

Cara Membuat Aplikasi Calculator Pro berbasis App Script

admin Oktober 1, 2026 63 Views 0 Comment
Cara Membuat Aplikasi Calculator Pro berbasis App Script

Cara Membuat Aplikasi Calculator Pro Berbasis Apps Script – Membuat aplikasi kalkulator sendiri tidak selalu membutuhkan bahasa pemrograman yang rumit. Dengan Google Apps Script, kita bisa membangun kalkulator berbasis web yang dapat digunakan langsung melalui browser. Selain praktis, pendekatan ini cocok untuk pemula karena kode dapat dibuat dalam satu proyek dan hasilnya bisa dipublikasikan sebagai aplikasi web.

Pada artikel ini, kita akan membahas cara membuat Calculator Pro berbasis Apps Script dengan tampilan modern, tombol operasi matematika, layar hasil perhitungan, serta beberapa fitur tambahan agar aplikasi terasa lebih lengkap.

Baca juga: Cara Membuat Aplikasi Kasir Toko Berbasis Google Apps Script untuk Pemula

Apa Itu Google Apps Script?

Cara Membuat Aplikasi Calculator Pro berbasis App Script

Google Apps Script adalah platform berbasis JavaScript yang memungkinkan pengguna membuat berbagai macam aplikasi dan otomatisasi yang terhubung dengan layanan Google. Namun, penggunaannya tidak terbatas pada spreadsheet atau dokumen saja.

Dengan fitur Web App, Apps Script juga dapat digunakan untuk membuat halaman web interaktif. HTML dan CSS digunakan untuk membangun antarmuka, sedangkan JavaScript menangani logika aplikasinya.

Karena itu, Apps Script cukup menarik digunakan untuk membuat proyek sederhana seperti kalkulator, konverter satuan, generator teks, hingga berbagai aplikasi berbasis web lainnya.

Fitur yang Bisa Ditambahkan pada Calculator Pro

Agar tidak sekadar menjadi kalkulator sederhana, aplikasi dapat dirancang dengan beberapa fitur seperti:

  • Operasi penjumlahan, pengurangan, perkalian, dan pembagian.
  • Tombol persentase.
  • Tombol desimal.
  • Fungsi menghapus angka terakhir.
  • Tombol reset atau clear.
  • Dukungan keyboard.
  • Tampilan hasil secara real-time.
  • Desain responsif untuk komputer dan smartphone.
  • Riwayat perhitungan sederhana.
  • Tampilan antarmuka bergaya aplikasi modern.

Fitur tersebut dapat dikembangkan secara bertahap. Tidak harus semuanya dibuat sejak awal karena struktur aplikasi bisa diperluas setelah fungsi dasar berhasil berjalan.

Persiapan Membuat Aplikasi

Sebelum mulai membuat Calculator Pro, siapkan sebuah proyek baru di Google Apps Script. Setelah proyek dibuat, biasanya kita membutuhkan setidaknya dua bagian utama, yaitu file script untuk mengatur aplikasi dan file HTML untuk menampilkan kalkulator.

Struktur sederhananya dapat dibuat seperti berikut:

Calculator Pro
├── Code.gs
└── Index.html

Code.gs digunakan untuk fungsi Apps Script, sedangkan Index.html berisi HTML, CSS, dan JavaScript yang menjalankan kalkulator di browser.

Membuat File Code.gs

Langkah pertama adalah membuat fungsi yang menampilkan halaman HTML ketika aplikasi dibuka.

Contohnya:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Calculator Pro');
}

Fungsi doGet() akan dijalankan ketika Web App diakses melalui URL. Apps Script kemudian mengambil file Index.html sebagai halaman utama.

Dengan kode tersebut, kita sudah memiliki dasar untuk menjalankan kalkulator melalui browser.

Membuat Tampilan Calculator Pro

Selanjutnya buat file bernama Index.html. File ini menjadi tempat untuk membuat tampilan kalkulator.

Struktur dasarnya dapat dibuat menggunakan elemen HTML seperti layar kalkulator dan tombol angka.

Contoh konsep sederhananya:

<div class="calculator">
  <div class="display">
    <div id="expression"></div>
    <div id="result">0</div>
  </div>

  <div class="buttons">
    <button class="function" onclick="clearDisplay()">AC</button>
    <button class="function" onclick="deleteLast()">DEL</button>
    <button class="operator" onclick="chooseOperator('%')">%</button>
    <button class="operator" onclick="chooseOperator('/')">÷</button>

    <button onclick="inputNumber('7')">7</button>
    <button onclick="inputNumber('8')">8</button>
    <button onclick="inputNumber('9')">9</button>
    <button class="operator" onclick="chooseOperator('*')">×</button>

    <button onclick="inputNumber('4')">4</button>
    <button onclick="inputNumber('5')">5</button>
    <button onclick="inputNumber('6')">6</button>
    <button class="operator" onclick="chooseOperator('-')">−</button>

    <button onclick="inputNumber('1')">1</button>
    <button onclick="inputNumber('2')">2</button>
    <button onclick="inputNumber('3')">3</button>
    <button class="operator" onclick="chooseOperator('+')">+</button>

    <button class="zero" onclick="inputNumber('0')">0</button>
    <button onclick="inputNumber('.')">.</button>
    <button class="equal" onclick="calculate()">=</button>
  </div>
</div>

Struktur tersebut baru merupakan kerangka. Agar tampilannya lebih menarik, kita dapat menambahkan CSS dengan gaya modern.

Membuat Desain yang Lebih Modern

Calculator Pro akan terlihat lebih profesional jika memiliki kombinasi warna yang konsisten, jarak antar tombol yang nyaman, serta tampilan yang mampu menyesuaikan ukuran layar.

Misalnya, bagian kalkulator dapat dibuat menggunakan konsep kartu dengan sudut membulat dan bayangan lembut.

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  font-family: Arial, sans-serif;
}

.calculator {
  width: min(360px, 92vw);
  padding: 20px;
  border-radius: 24px;
  background: #1f2937;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.display {
  min-height: 110px;
  padding: 18px;
  margin-bottom: 15px;
  border-radius: 18px;
  background: #0f172a;
  color: white;
  text-align: right;
  box-sizing: border-box;
}

#expression {
  min-height: 28px;
  color: #94a3b8;
  font-size: 15px;
}

#result {
  margin-top: 8px;
  font-size: 38px;
  font-weight: bold;
  overflow: hidden;
}

Untuk bagian tombol, CSS Grid dapat digunakan agar susunannya rapi.

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  min-height: 58px;
  border: none;
  border-radius: 15px;
  background: #374151;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: transform .1s, background .2s;
}

button:hover {
  background: #4b5563;
}

button:active {
  transform: scale(.95);
}

.operator {
  background: #2563eb;
}

.equal {
  background: #16a34a;
}

.function {
  background: #64748b;
}

.zero {
  grid-column: span 2;
}

Desain seperti ini membuat kalkulator terlihat lebih modern tanpa membutuhkan library CSS tambahan.

Membuat Logika Perhitungan

Bagian terpenting berikutnya adalah JavaScript. Di sinilah aplikasi menentukan apa yang harus dilakukan ketika pengguna menekan tombol.

Kita dapat menggunakan beberapa variabel untuk menyimpan angka pertama, operator, dan angka berikutnya.

Contoh sederhananya:

let currentValue = '';
let previousValue = '';
let operator = '';

function inputNumber(value) {
  if (value === '.' && currentValue.includes('.')) return;

  currentValue += value;
  updateDisplay();
}

function chooseOperator(selectedOperator) {
  if (!currentValue && !previousValue) return;

  if (currentValue && previousValue && operator) {
    calculate();
  }

  previousValue = currentValue;
  currentValue = '';
  operator = selectedOperator;

  updateDisplay();
}

Selanjutnya kita membutuhkan fungsi untuk melakukan perhitungan.

function calculate() {
  const first = Number(previousValue);
  const second = Number(currentValue);

  if (!operator || Number.isNaN(first) || Number.isNaN(second)) {
    return;
  }

  let result;

  switch (operator) {
    case '+':
      result = first + second;
      break;

    case '-':
      result = first - second;
      break;

    case '*':
      result = first * second;
      break;

    case '/':
      if (second === 0) {
        result = 'Error';
      } else {
        result = first / second;
      }
      break;

    default:
      return;
  }

  currentValue = String(result);
  previousValue = '';
  operator = '';

  updateDisplay();
}

Dengan pendekatan tersebut, kalkulator dapat menangani operasi dasar tanpa membutuhkan server tambahan.

Menambahkan Tombol Clear dan Delete

Pengalaman menggunakan kalkulator akan terasa kurang nyaman jika pengguna tidak dapat memperbaiki input.

Karena itu, tambahkan fungsi untuk menghapus seluruh input:

function clearDisplay() {
  currentValue = '';
  previousValue = '';
  operator = '';

  updateDisplay();
}

Kemudian tambahkan fungsi untuk menghapus karakter terakhir:

function deleteLast() {
  currentValue = currentValue.slice(0, -1);
  updateDisplay();
}

Dengan demikian, tombol DEL dapat digunakan ketika pengguna salah memasukkan angka.

Menampilkan Hasil ke Layar

Kita juga membutuhkan fungsi untuk memperbarui tampilan setiap kali terjadi perubahan.

function updateDisplay() {
  document.getElementById('result').textContent =
    currentValue || '0';

  document.getElementById('expression').textContent =
    previousValue && operator
      ? `${previousValue} ${operator}`
      : '';
}

Sekarang perubahan angka dan operator akan langsung terlihat pada layar kalkulator.

Menambahkan Dukungan Keyboard

Calculator Pro dapat dibuat lebih nyaman dengan dukungan keyboard. Pengguna tidak harus selalu mengklik tombol menggunakan mouse atau layar sentuh.

Contohnya:

document.addEventListener('keydown', function(event) {
  const key = event.key;

  if (/^[0-9.]$/.test(key)) {
    inputNumber(key);
    return;
  }

  if (['+', '-', '*', '/'].includes(key)) {
    chooseOperator(key);
    return;
  }

  if (key === 'Enter' || key === '=') {
    calculate();
    return;
  }

  if (key === 'Backspace') {
    deleteLast();
    return;
  }

  if (key === 'Escape') {
    clearDisplay();
  }
});

Fitur kecil ini membuat aplikasi terasa lebih seperti kalkulator desktop daripada sekadar halaman web biasa.

Menambahkan Riwayat Perhitungan

Jika ingin meningkatkan Calculator Pro ke tingkat berikutnya, riwayat perhitungan bisa ditampilkan di bawah kalkulator.

Misalnya setelah melakukan perhitungan:

12 × 5 = 60
100 ÷ 4 = 25
25 + 15 = 40

Riwayat tersebut dapat disimpan sementara menggunakan array JavaScript. Jika ingin data tetap tersimpan setelah halaman ditutup, penyimpanan browser seperti localStorage juga dapat digunakan.

Pendekatan ini tidak membutuhkan database sehingga cocok untuk aplikasi kalkulator sederhana.

Mengatur Tampilan di Smartphone

Karena banyak pengguna membuka aplikasi melalui smartphone, tampilan harus responsif.

Gunakan ukuran relatif seperti vw, rem, atau min() daripada menetapkan lebar yang terlalu besar secara permanen.

Contohnya:

.calculator {
  width: min(360px, 92vw);
}

@media (max-width: 420px) {
  .calculator {
    padding: 15px;
    border-radius: 20px;
  }

  button {
    min-height: 54px;
    font-size: 18px;
  }
}

Dengan pengaturan tersebut, ukuran kalkulator dapat menyesuaikan layar yang lebih kecil.

Cara Menjalankan Calculator Pro

Setelah seluruh kode selesai dibuat, simpan proyek kemudian jalankan aplikasi melalui fitur deployment Apps Script.

Secara umum langkahnya adalah:

  1. Buka proyek Google Apps Script.
  2. Pastikan file Code.gs dan Index.html sudah tersedia.
  3. Simpan seluruh perubahan.
  4. Pilih opsi untuk melakukan deployment sebagai Web App.
  5. Tentukan siapa yang dapat mengakses aplikasi sesuai kebutuhan.
  6. Lakukan deployment.
  7. Buka URL Web App yang diberikan Apps Script.

Setelah URL dibuka, Calculator Pro dapat digunakan langsung melalui browser.

Hal yang Perlu Diperhatikan

Walaupun kalkulator terlihat sederhana, ada beberapa hal yang sebaiknya diperhatikan ketika mengembangkan aplikasinya.

Pertama, jangan hanya mengandalkan fungsi eval() untuk menghitung ekspresi pengguna. Untuk proyek yang ingin dibuat lebih aman dan mudah dikembangkan, logika operasi sebaiknya dikendalikan melalui fungsi JavaScript seperti contoh sebelumnya.

Kedua, perhatikan pembagian dengan angka nol. Aplikasi harus memberikan respons yang jelas daripada menghasilkan tampilan yang membingungkan.

Ketiga, validasi input desimal juga diperlukan agar pengguna tidak dapat memasukkan angka seperti 12.3.4.

Untuk contoh aplikasi kalkulator Sains Pro yang sudah saya buat adalah sebagai berikut:

DEMO APP CALCULATOR SAINS PRO

Kesimpulan

Membuat Calculator Pro menggunakan Google Apps Script sebenarnya cukup mudah apabila proyek dibagi menjadi beberapa bagian. HTML menangani struktur halaman, CSS mengatur tampilan, sedangkan JavaScript menjalankan seluruh logika kalkulator.

Dari kalkulator dasar, aplikasi tersebut masih dapat dikembangkan menjadi proyek yang jauh lebih lengkap dengan riwayat perhitungan, tema gelap dan terang, kalkulasi ilmiah, konversi satuan, dukungan keyboard, hingga penyimpanan data.

Yang menarik, proyek seperti ini juga dapat menjadi latihan yang bagus untuk memahami hubungan antara HTML, CSS, JavaScript, dan Apps Script dalam sebuah aplikasi web sederhana.

Tags:
20 Likes

Author: admin

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *