Cara Saya Membuat Plugin Excel Sederhana dengan Office JavaScript API

Office JavaScript API memungkinkan pengembang untuk memperluas fungsionalitas aplikasi Microsoft Office seperti Excel, Word, dan PowerPoint. Dalam postingan blog ini, saya akan memandu Anda melalui proses langkah demi langkah membuat plugin Excel sederhana menggunakan Office JavaScript API. Plugin ini akan memungkinkan pengguna untuk melakukan tugas tertentu langsung dari dalam Excel, meningkatkan produktivitas dan menyederhanakan alur kerja mereka. Kita akan membahas segala hal, mulai dari pengaturan lingkungan pengembangan hingga menerapkan fungsionalitas inti dan menguji plugin Anda. Bersiaplah untuk terjun ke dunia pengembangan plugin Excel!

Daftar Isi

1. Pendahuluan: Kekuatan Plugin Excel dan Office JavaScript API
2. Prasyarat: Apa yang Anda Butuhkan untuk Memulai
3. Menyiapkan Lingkungan Pengembangan Anda
4. Membuat Manifes Add-in: Blueprint Plugin Anda
5. Membangun Antarmuka Pengguna: HTML, CSS, dan JavaScript
6. Menulis Kode JavaScript: Berinteraksi dengan Excel
7. Menerapkan Fungsionalitas Inti: Contoh Praktis
8. Menguji dan Debug Plugin Anda
9. Men-debug Plugin Excel Menggunakan Tools Developer Browser
10. Penerbitan Plugin Anda (Opsional)
11. Praktik Terbaik untuk Pengembangan Plugin Excel
12. Kesimpulan: Melepaskan Kekuatan Office JavaScript API

1. Pendahuluan: Kekuatan Plugin Excel dan Office JavaScript API

Excel adalah alat yang sangat kuat, tetapi kadang-kadang, fungsionalitas defaultnya tidak cukup untuk memenuhi kebutuhan khusus. Di sinilah plugin berperan. Plugin Excel (juga dikenal sebagai add-in) memungkinkan Anda memperluas kemampuan Excel dengan menambahkan fitur dan fungsionalitas khusus. Ini dapat berkisar dari perhitungan sederhana hingga integrasi kompleks dengan sistem eksternal.

Office JavaScript API menyediakan cara bagi pengembang untuk berinteraksi dengan aplikasi Office menggunakan JavaScript. Ini adalah platform yang memungkinkan Anda membuat add-in yang berjalan di berbagai platform, termasuk Excel di Windows, Mac, dan web. Dengan menggunakan API ini, Anda dapat mengakses data Excel, memanipulasi lembar kerja, dan berinteraksi dengan pengguna melalui antarmuka khusus.

Manfaat Menggunakan Plugin Excel:

• Otomatisasi Tugas: Otomatiskan tugas-tugas yang berulang dan membosankan.
• Peningkatan Produktivitas: Menyederhanakan alur kerja dan mengurangi waktu yang dihabiskan untuk tugas-tugas manual.
• Fungsionalitas yang Disesuaikan: Menambahkan fitur yang disesuaikan yang sesuai dengan kebutuhan khusus Anda.
• Integrasi Data: Terhubung dengan sumber data eksternal dan mengimpor data ke Excel.
• Distribusi Mudah: Membagikan plugin Anda dengan rekan kerja atau pelanggan.

2. Prasyarat: Apa yang Anda Butuhkan untuk Memulai

Sebelum kita mulai mengembangkan plugin Excel kita, kita perlu memastikan bahwa kita memiliki semua alat dan pengetahuan yang diperlukan.

Persyaratan Perangkat Lunak:

• Office 365: Anda membutuhkan langganan Office 365 yang mencakup Excel.
• Node.js dan npm: Node.js adalah lingkungan runtime JavaScript yang memungkinkan Anda menjalankan JavaScript di luar browser. npm (Node Package Manager) digunakan untuk mengelola paket dan dependensi JavaScript. Anda dapat mengunduh dan menginstal Node.js dari https://nodejs.org/.
• Visual Studio Code (atau IDE pilihan Anda): Visual Studio Code adalah editor kode gratis dan kuat yang sangat direkomendasikan untuk pengembangan JavaScript. Anda dapat mengunduhnya dari https://code.visualstudio.com/.
• Yeoman dan Generator Office: Yeoman adalah alat scaffolding yang membantu Anda memulai proyek baru dengan cepat. Generator Office adalah generator Yeoman yang menyediakan templat untuk membuat add-in Office. Kita akan menginstal ini menggunakan npm.

Pengetahuan yang Diperlukan:

• HTML: Pengetahuan dasar tentang HTML diperlukan untuk membuat antarmuka pengguna plugin Anda.
• CSS: CSS digunakan untuk menata gaya antarmuka pengguna Anda dan membuatnya terlihat menarik.
• JavaScript: JavaScript adalah bahasa utama yang digunakan untuk mengembangkan logika dan fungsionalitas plugin Anda.
• Office JavaScript API: Familiaritas dengan Office JavaScript API akan sangat membantu. Anda dapat menemukan dokumentasi dan contoh di https://docs.microsoft.com/en-us/office/dev/add-ins/reference/javascript-api-for-office.

3. Menyiapkan Lingkungan Pengembangan Anda

Sekarang kita memiliki semua yang kita butuhkan, mari siapkan lingkungan pengembangan kita.

1. Instal Node.js dan npm:

   Jika Anda belum melakukannya, unduh dan instal Node.js dari https://nodejs.org/. npm secara otomatis diinstal dengan Node.js.

2. Instal Yeoman dan Generator Office:

   Buka terminal atau command prompt dan jalankan perintah berikut:

   npm install -g yo generator-office

   Ini akan menginstal Yeoman dan Generator Office secara global di sistem Anda.

3. Buat Proyek Add-in Baru:

   Buat direktori baru untuk proyek add-in Anda. Buka direktori di terminal atau command prompt dan jalankan perintah berikut:

   yo office

   Ini akan meluncurkan Generator Office, yang akan memandu Anda melalui proses pembuatan proyek baru.

4. Pilih Jenis Proyek:

   Generator akan menanyakan beberapa pertanyaan. Pilih opsi berikut:

   • Choose a project type: Pilih “Excel Custom Functions using a shared runtime” (atau pilihan lainnya sesuai kebutuhan Anda)
   • Choose a script type: Pilih “JavaScript” (atau TypeScript jika Anda lebih suka)
   • What do you want to name your add-in?: Berikan nama untuk add-in Anda (misalnya, “MyExcelPlugin”)
   • Would you like to support legacy versions of Office?: Pilih “No” (kecuali Anda perlu mendukung versi Office yang lebih lama)
5. Tunggu Proyek Dibuat:

   Generator akan membuat struktur proyek dan menginstal semua dependensi yang diperlukan. Ini mungkin memakan waktu beberapa menit.

6. Buka Proyek di Visual Studio Code:

   Setelah proyek dibuat, buka direktori proyek di Visual Studio Code.

4. Membuat Manifes Add-in: Blueprint Plugin Anda

Manifes add-in adalah file XML yang menjelaskan plugin Anda ke Excel. Ini berisi informasi tentang nama plugin, deskripsi, ikon, izin, dan di mana menemukan file HTML, CSS, dan JavaScript plugin.

File manifes biasanya bernama `manifest.xml` dan terletak di direktori root proyek Anda. Buka file ini di Visual Studio Code.

Elemen Penting dalam File Manifes:

• ``: GUID unik yang mengidentifikasi plugin Anda. Generator Office secara otomatis membuat GUID untuk Anda.
• ``: Nomor versi plugin Anda.
• ``: Nama organisasi atau pengembang Anda.
• ``: Bahasa default plugin Anda.
• ``: Nama yang akan ditampilkan untuk plugin Anda di Excel.
• ``: Deskripsi singkat tentang plugin Anda.
• ``: URL ke ikon yang akan ditampilkan untuk plugin Anda.
• ``: Menentukan aplikasi Office mana yang didukung plugin Anda (dalam kasus ini, Excel).
• ``: Menentukan file HTML, CSS, dan JavaScript yang digunakan oleh plugin Anda.
• ``: Menentukan izin yang diperlukan plugin Anda (misalnya, membaca dan menulis data ke lembar kerja).
• ``: Menentukan cara plugin Anda berinteraksi dengan Excel modern. Bagian ini sangat penting untuk mendefinisikan tombol ribbon dan fungsi kustom.

Contoh Potongan Manifes:

<OfficeApp
  xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://schemas.microsoft.com/office/appforoffice/1.1 http://schemas.microsoft.com/office/appforoffice/1.1/manifest.xsd">
  <Id>YOUR_ADDIN_ID</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Your Company</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="My Excel Plugin" />
  <Description DefaultValue="A simple Excel plugin" />
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
  <Hosts>
    <Host Name="Workbook" />
  </Hosts>
  <Resources>
    <bt:Images>
      <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png" />
      <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png" />
      <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png" />
    </bt:Images>
    <bt:Urls>
      <bt:Url id="Functions.Script.Url" DefaultValue="https://localhost:3000/functions.js" />
      <bt:Url id="Functions.Metadata.Url" DefaultValue="https://localhost:3000/functions.metadata.json" />
      <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
    </bt:Urls>
  </Resources>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xsi:type="VersionOverridesV1_1">
    <Hosts>
      <Host xsi:type="Workbook">
        <Runtimes>
          <Runtime resid="Functions.Script.Url" lifetime="long" />
        </Runtimes>
        <Ribbon>
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <OfficeTab id="TabHome">
              <Group id="MyExcelPlugin.Group1" resid="MyExcelPlugin.Group1Label">
                <Control xsi:type="Button" id="MyExcelPlugin.Button1" resid="MyExcelPlugin.Button1Label">
                  <Action xsi:type="ShowTaskpane" taskpaneId="MyTaskPaneId" />
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </Ribbon>
        <FunctionFile resid="Functions.Metadata.Url" />
        <ExtensionPoint xsi:type="PrimaryCommandSurface"></ExtensionPoint>
      </Host>
    </Hosts>
    <Resources>
      <bt:Strings>
        <bt:String id="MyExcelPlugin.Group1Label" DefaultValue="My Plugin Group" />
        <bt:String id="MyExcelPlugin.Button1Label" DefaultValue="Show Taskpane" />
      </bt:Strings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

Penting: Ganti `YOUR_ADDIN_ID` dengan GUID yang dihasilkan. Anda biasanya tidak perlu mengubah ini secara manual.

Luangkan waktu untuk meninjau dan memahami file manifes. Ini adalah jantung dari plugin Anda.

5. Membangun Antarmuka Pengguna: HTML, CSS, dan JavaScript

Plugin Excel Anda akan membutuhkan antarmuka pengguna (UI) agar pengguna dapat berinteraksi dengannya. UI biasanya dibuat menggunakan HTML, CSS, dan JavaScript.

Generator Office biasanya membuat file HTML dasar untuk Anda, seringkali bernama `taskpane.html`. File ini akan berisi struktur dasar UI Anda.

Struktur Dasar `taskpane.html`:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Excel Plugin</title>

  <link rel="stylesheet" href="taskpane.css" />
</head>

<body>
  <div id="container">
    <h1>My Excel Plugin</h1>
    <p>Welcome to my Excel plugin!</p>
    <button id="myButton">Click Me!</button>
  </div>

  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
  <script src="taskpane.js"></script>
</body>

</html>

Penjelasan:

• `<!DOCTYPE html>` dan `<html>`: Deklarasi standar HTML5 dan elemen root.
• `<head>`: Berisi metadata tentang dokumen, termasuk set karakter, viewport, dan tautan ke stylesheet.
• `<link rel=”stylesheet” href=”taskpane.css” />`: Menautkan ke file CSS untuk menata gaya UI.
• `<body>`: Berisi konten utama UI.
• `<div id=”container”>`: Wadah untuk semua elemen UI.
• `<h1>` dan `<p>`: Elemen HTML standar untuk judul dan paragraf.
• `<button id=”myButton”>`: Tombol yang dapat diklik pengguna.
• `<script src=”https://appsforoffice.microsoft.com/lib/1/hosted/office.js”></script>`: Penting! Ini menyertakan Office JavaScript API, yang memungkinkan kode Anda berinteraksi dengan Excel.
• `<script src=”taskpane.js”></script>`: Menautkan ke file JavaScript Anda, di mana Anda akan menulis logika plugin Anda.

Contoh CSS (`taskpane.css`):

#container {
  width: 300px;
  padding: 20px;
  font-family: sans-serif;
}

h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

Anda dapat menyesuaikan HTML dan CSS untuk membuat UI yang Anda inginkan. Pastikan untuk memasukkan tautan ke Office JavaScript API di bagian bawah `<body>`.

6. Menulis Kode JavaScript: Berinteraksi dengan Excel

Sekarang saatnya untuk menulis kode JavaScript yang akan berinteraksi dengan Excel. Kode ini akan menangani logika plugin Anda, seperti membaca dan menulis data ke lembar kerja, melakukan perhitungan, dan merespons tindakan pengguna.

Buka file JavaScript Anda (biasanya bernama `taskpane.js`) di Visual Studio Code.

Struktur Dasar `taskpane.js`:

(function () {
  "use strict";

  Office.onReady(function (info) {
    if (info.host === Office.HostType.Excel) {
      // Plugin is ready
      document.getElementById("container").classList.remove("hidden");
      document.getElementById("myButton").onclick = sayHello;
    }
  });

  function sayHello() {
    Excel.run(function (context) {
      var range = context.workbook.getSelectedRange();
      range.values = [["Hello, world!"]];
      return context.sync();
    })
    .catch(function (error) {
      console.error(error);
    });
  }
})();

Penjelasan:

• `(function () { … })();`: Fungsi Immediate Invocation (IIFE) digunakan untuk membuat lingkup pribadi untuk kode Anda dan mencegah konflik dengan kode lain.
• `”use strict”;`: Mengaktifkan mode ketat JavaScript, yang membantu Anda menulis kode yang lebih baik dengan menangkap beberapa kesalahan umum.
• `Office.onReady(function (info) { … });`: Fungsi ini dipanggil saat Office JavaScript API siap digunakan. Penting untuk menunggu hingga API siap sebelum mencoba berinteraksi dengan Excel.
• `if (info.host === Office.HostType.Excel) { … }`: Memastikan bahwa plugin Anda berjalan di Excel.
• `document.getElementById(“container”).classList.remove(“hidden”);`: Menghapus kelas “hidden” dari elemen kontainer, membuat UI terlihat. Ini sering digunakan untuk menyembunyikan UI hingga Office API siap.
• `document.getElementById(“myButton”).onclick = sayHello;`: Menetapkan fungsi `sayHello` untuk dijalankan saat tombol diklik.
• `Excel.run(function (context) { … });`: Fungsi ini menjalankan serangkaian perintah pada Excel. `context` adalah objek yang memungkinkan Anda berinteraksi dengan Excel workbook.
• `var range = context.workbook.getSelectedRange();`: Mendapatkan rentang yang saat ini dipilih oleh pengguna.
• `range.values = [[“Hello, world!”]];`: Menetapkan nilai rentang yang dipilih ke “Hello, world!”.
• `return context.sync();`: Menyinkronkan perubahan ke Excel. Ini *harus* dipanggil untuk menerapkan perubahan yang Anda buat pada workbook.
• `.catch(function (error) { … });`: Menangani kesalahan yang mungkin terjadi selama interaksi dengan Excel.

Contoh yang Lebih Kompleks: Membaca Data dari Lembar Kerja

function readData() {
  Excel.run(function (context) {
    var range = context.workbook.getSelectedRange();
    range.load("values");

    return context.sync()
      .then(function () {
        var values = range.values;
        console.log(values); // Output data ke konsol

        // Lakukan sesuatu dengan data
        alert("Data yang dipilih: " + values.join(", "));
      });
  })
  .catch(function (error) {
    console.error(error);
  });
}

Penjelasan:

• `range.load(“values”);`: Memuat properti `values` dari rentang yang dipilih. Anda *harus* memuat properti sebelum Anda dapat mengaksesnya.
• `return context.sync().then(function () { … });`: `context.sync()` mengembalikan Promise, yang memungkinkan Anda menjalankan kode setelah sinkronisasi selesai. Ini penting untuk memastikan bahwa Anda hanya mencoba mengakses data setelah dimuat.
• `var values = range.values;`: Mendapatkan nilai-nilai dari rentang yang dipilih.
• `console.log(values);`: Output nilai-nilai ke konsol pengembang. Berguna untuk debugging.
• `alert(“Data yang dipilih: ” + values.join(“, “));`: Menampilkan nilai-nilai dalam kotak peringatan.

7. Menerapkan Fungsionalitas Inti: Contoh Praktis

Mari kita lihat beberapa contoh praktis tentang bagaimana Anda dapat menggunakan Office JavaScript API untuk menerapkan fungsionalitas inti di plugin Excel Anda.

1. Memformat Rentang yang Dipilih:

   Contoh ini memformat rentang yang dipilih menjadi tebal.

   
   function formatBold() {
     Excel.run(function (context) {
       var range = context.workbook.getSelectedRange();
       range.format.font.bold = true;
       return context.sync();
     })
     .catch(function (error) {
       console.error(error);
     });
   }
   

2. Menyisipkan Baris Baru:

   Contoh ini menyisipkan baris baru di atas rentang yang dipilih.

   
   function insertRow() {
     Excel.run(function (context) {
       var range = context.workbook.getSelectedRange();
       range.insert("InsertEntire", "ShiftDown");
       return context.sync();
     })
     .catch(function (error) {
       console.error(error);
     });
   }
   

3. Menghitung Rata-rata:

   Contoh ini menghitung rata-rata dari rentang yang dipilih dan menampilkannya dalam kotak pesan.

   
   function calculateAverage() {
     Excel.run(function (context) {
       var range = context.workbook.getSelectedRange();
       range.load("values");
   
       return context.sync()
         .then(function () {
           var values = range.values;
           var sum = 0;
           var count = 0;
   
           for (var i = 0; i < values.length; i++) {
             for (var j = 0; j < values[i].length; j++) {
               var value = values[i][j];
               if (typeof value === "number") {
                 sum += value;
                 count++;
               }
             }
           }
   
           var average = sum / count;
           alert("Rata-rata: " + average);
         });
     })
     .catch(function (error) {
       console.error(error);
     });
   }
   

4. Menulis Data ke Sel Tertentu:

   Contoh ini menulis data ke sel A1 pada lembar kerja aktif.

   
   function writeDataToCell() {
    Excel.run(function (context) {
      var sheet = context.workbook.worksheets.getActiveWorksheet();
      var range = sheet.getRange("A1");
      range.values = [["Data from plugin"]];
      return context.sync();
    })
    .catch(function (error) {
      console.error(error);
    });
   }
   

5. Membuat Fungsi Kustom (Custom Functions):

   Fungsi kustom memungkinkan Anda membuat fungsi Excel baru yang dapat dipanggil langsung dari lembar kerja. Ini adalah fitur yang sangat kuat.

   Pertama, definisikan fungsi Anda di `functions.js` (file ini secara otomatis dibuat oleh Generator Office ketika Anda memilih opsi Custom Functions):

   
   /**
    * Mengalikan dua angka.
    * @customfunction
    * @param {number} first Angka pertama.
    * @param {number} second Angka kedua.
    * @returns {number} Hasil dari angka pertama dikalikan angka kedua.
    */
   function multiply(first, second) {
     return first * second;
   }
   
   // Set nilai return-nya untuk memastikan bahwa itu bisa dibaca JSON
   // Saat fungsi berjalan terlalu cepat, atau yang lain, maka Excel akan menampilkan #VALUE!
   multiply.call(this);
   
   /**
    * Increment a value by 1.
    * @customfunction
    * @param {number} value The value to increment.
    * @returns {number}
    */
   function increment(value) {
     return value + 1;
   }
   

   Kemudian, pastikan bahwa `manifest.xml` Anda mengarah dengan benar ke file `functions.js` dan `functions.metadata.json` (ini harus dikonfigurasi secara otomatis oleh generator).

   Sekarang, Anda dapat menggunakan fungsi `MULTIPLY` di lembar kerja Excel Anda seperti ini: `=MULTIPLY(2, 3)`.

8. Menguji dan Debug Plugin Anda

Setelah Anda menulis kode untuk plugin Anda, penting untuk menguji dan men-debugnya secara menyeluruh untuk memastikan bahwa plugin berfungsi sebagaimana mestinya.

1. Memuat Plugin Anda di Excel:

   Ada beberapa cara untuk memuat plugin Anda di Excel:

   • Menggunakan File Manifes:
     1. Buka Excel.
     2. Buka tab “Insert” pada ribbon.
     3. Klik “My Add-ins”.
     4. Klik “Upload My Add-in”.
     5. Telusuri ke file manifes Anda (`manifest.xml`) dan pilih.
     6. Klik “Open”.
   • Menggunakan Pengembangan Lokal (Sideloading):

     Ini adalah metode yang paling umum digunakan selama pengembangan karena memungkinkan Anda untuk membuat perubahan pada kode Anda dan melihat hasilnya dengan cepat tanpa perlu terus-menerus mengunggah file manifes.

     1. Pastikan Anda menjalankan server pengembangan lokal. Generator Office biasanya menyediakan perintah untuk ini (misalnya, `npm start`).
     2. Buka Excel.
     3. Buka tab “Insert” pada ribbon.
     4. Klik “My Add-ins”.
     5. Klik “Develop” (mungkin perlu mengaktifkan opsi ini di pengaturan Excel).
     6. Masukkan URL server pengembangan lokal Anda (misalnya, `https://localhost:3000/manifest.xml`).
     7. Klik “OK”.
2. Menguji Fungsionalitas Plugin:

   Setelah plugin Anda dimuat, uji semua fiturnya untuk memastikan bahwa plugin berfungsi sebagaimana mestinya. Klik tombol, masukkan data, dan periksa apakah plugin berinteraksi dengan Excel seperti yang diharapkan.

3. Menggunakan `console.log()` untuk Debugging:

   Gunakan `console.log()` untuk mencetak informasi ke konsol pengembang. Ini sangat berguna untuk men-debug kode Anda dan melihat nilai variabel.

4. Menggunakan Breakpoint dan Debugger:

   Editor kode seperti Visual Studio Code menyediakan debugger yang memungkinkan Anda untuk mengatur breakpoint dalam kode Anda dan melangkah melaluinya baris demi baris. Ini sangat berguna untuk mengidentifikasi dan memperbaiki kesalahan.

9. Men-debug Plugin Excel Menggunakan Tools Developer Browser

Tools developer browser adalah alat yang sangat kuat untuk men-debug plugin Excel Anda, terutama saat Anda bekerja dengan UI dan interaksi JavaScript. Anda dapat menggunakan Tools Developer untuk memeriksa elemen HTML, men-debug JavaScript, dan memantau permintaan jaringan.

1. Membuka Tools Developer:

   Cara membuka Tools Developer bervariasi tergantung pada browser yang Anda gunakan. Beberapa metode yang umum adalah:

   • Chrome: Klik kanan di mana saja di plugin Anda dan pilih “Inspect”. Atau, tekan `Ctrl+Shift+I` (Windows) atau `Cmd+Option+I` (Mac).
   • Firefox: Klik kanan di mana saja di plugin Anda dan pilih “Inspect Element”. Atau, tekan `Ctrl+Shift+I` (Windows) atau `Cmd+Option+I` (Mac).
   • Edge: Klik kanan di mana saja di plugin Anda dan pilih “Inspect”. Atau, tekan `F12`.
2. Menggunakan Tab Elemen:

   Tab Elemen memungkinkan Anda untuk memeriksa struktur HTML plugin Anda dan melihat bagaimana CSS diterapkan. Anda dapat menggunakan tab ini untuk mengidentifikasi masalah tata letak dan menata gaya.

3. Menggunakan Tab Konsol:

   Tab Konsol menampilkan pesan yang dicetak oleh kode JavaScript Anda menggunakan `console.log()`. Ini juga menampilkan kesalahan JavaScript apa pun yang terjadi. Anda dapat menggunakan tab ini untuk men-debug kode Anda dan melihat nilai variabel.

4. Menggunakan Tab Sumber:

   Tab Sumber memungkinkan Anda untuk melihat kode JavaScript Anda, mengatur breakpoint, dan melangkah melaluinya baris demi baris. Ini adalah alat yang sangat kuat untuk mengidentifikasi dan memperbaiki kesalahan.

5. Menggunakan Tab Jaringan:

   Tab Jaringan menampilkan semua permintaan jaringan yang dibuat oleh plugin Anda. Anda dapat menggunakan tab ini untuk memantau permintaan API dan melihat apakah ada kesalahan yang terjadi.

10. Penerbitan Plugin Anda (Opsional)

Setelah Anda selesai mengembangkan dan menguji plugin Anda, Anda dapat menerbitkannya agar orang lain dapat menggunakannya. Anda dapat menerbitkan plugin Anda ke:

• AppSource: AppSource adalah toko online Microsoft untuk aplikasi dan add-in Office. Menerbitkan plugin Anda ke AppSource memungkinkan Anda untuk menjangkau khalayak yang luas dari pengguna Office.
• Katalog Pribadi: Anda dapat menerbitkan plugin Anda ke katalog pribadi untuk penggunaan internal dalam organisasi Anda.
• Berbagi Langsung: Anda dapat membagikan file manifes plugin Anda secara langsung dengan pengguna lain, yang dapat memuat plugin ke Excel secara manual.

Proses penerbitan bervariasi tergantung pada metode yang Anda pilih. Lihat dokumentasi Microsoft Office untuk informasi lebih lanjut.

11. Praktik Terbaik untuk Pengembangan Plugin Excel

Berikut adalah beberapa praktik terbaik untuk pengembangan plugin Excel:

• Gunakan Office JavaScript API terbaru: API terus berkembang, jadi pastikan Anda menggunakan versi terbaru untuk memanfaatkan fitur dan perbaikan bug terbaru.
• Tangani kesalahan dengan benar: Selalu gunakan blok `try…catch` untuk menangani kesalahan yang mungkin terjadi selama interaksi dengan Excel. Ini akan mencegah plugin Anda dari crash dan memberikan umpan balik yang bermakna kepada pengguna.
• Optimalkan kinerja: Plugin Excel dapat memengaruhi kinerja Excel, jadi pastikan untuk mengoptimalkan kode Anda agar berjalan seefisien mungkin. Hindari melakukan operasi yang tidak perlu dan gunakan teknik asinkron untuk mencegah pemblokiran UI.
• Berikan dokumentasi yang jelas: Mendokumentasikan plugin Anda dengan baik, termasuk cara menginstalnya, menggunakannya, dan memecahkan masalah apa pun yang mungkin timbul.
• Uji secara menyeluruh: Sebelum Anda menerbitkan plugin Anda, uji secara menyeluruh untuk memastikan bahwa plugin berfungsi sebagaimana mestinya di berbagai versi Excel dan platform.
• Jaga keamanan: Berhati-hatilah tentang data yang Anda akses dan bagaimana Anda menyimpannya. Hindari menyimpan informasi sensitif di plugin Anda dan selalu gunakan praktik keamanan yang terbaik.

12. Kesimpulan: Melepaskan Kekuatan Office JavaScript API

Office JavaScript API adalah alat yang sangat kuat yang memungkinkan Anda untuk memperluas fungsionalitas Excel dan aplikasi Office lainnya. Dengan menggunakan API ini, Anda dapat membuat plugin yang disesuaikan yang menyederhanakan alur kerja, mengotomatiskan tugas-tugas, dan meningkatkan produktivitas.

Dalam postingan blog ini, kami telah membahas proses langkah demi langkah membuat plugin Excel sederhana menggunakan Office JavaScript API. Kami telah membahas pengaturan lingkungan pengembangan, membuat manifes add-in, membangun antarmuka pengguna, menulis kode JavaScript, menguji dan men-debug plugin, dan menerbitkan plugin (opsional). Dengan pengetahuan ini, Anda sekarang dapat mulai membuat plugin Excel Anda sendiri dan melepaskan kekuatan Office JavaScript API.

Selamat mencoba mengembangkan plugin!