5 Web API Terbaik Untuk Menambah Fungsionalitas Proyek Anda

Last Updated on December 15, 2021 by

Semakin berkembangnya teknologi, software pun semakin kuat memainkan peran penting dalam kehidupan. Namun, membangun setiap komponen software dari awal sangat membosankan dan menghabiskan waktu yang cukup panjang.

Kabar baiknya, kini sudah ada teknologi pengembangan software yang cepat sehingga tidak memakan banyak waktu Anda yaitu dengan memanfaatkan Application Program Interface (API). API memungkinkan aplikasi untuk berinteraksi satu sama lain dan mereka bertindak sebagai perantara bagi pengembang untuk tidak hanya meningkatkan fungsionalitas tetapi juga meningkatkan antarmuka pengguna dari berbagai aplikasi.

Pada artikel kali ini, kami akan secara khusus membahas tentang API untuk website yang dikenal dengan WEB API. Kami akan merekomendasikan, 5 WEB API Terbaik yang dapat menambah fungsionalitas pada proyek Anda.

Apa itu WEB API?

Sebelum merambah ke 5 WEB API terbaik, kami akan membahas terlebuh dahulu, apa itu WEB API? Web API adalah API yang dapat diakses melalui web menggunakan protokol HTTP. API berbasis WEB adalah kerangka kerja yang membantu Anda membuat dan mengembangkan layanan RESTFUL berbasis HTTP.

Web API dapat dikembangkan dengan menggunakan teknologi yang berbeda seperti java, ASP.NET, dan lain sebagainya. Ia bisa digunakan baik di server web atau browser web. Pada dasarnya WEB yang ditujukan untuk API ini adalah konsep pengembangan web.

API untuk WEB terbatas pada client-side Aplikasi Web dan juga tidak termasuk server web atau detail browser web. Jika aplikasi akan digunakan pada sistem terdistribusi dan untuk menyediakan layanan pada perangkat yang berbeda seperti laptop, ponsel, dan lain sebagainya, maka layanan API web digunakan. API untuk WEB  adalah bentuk yang disempurnakan dari aplikasi web.

Salah satu contoh WEB API yang terkenal adalah: https://dotnet.microsoft.com/en-us/apps/aspnet/apis.

Kegunaan Web API

• Layanan Web API lebih disukai daripada layanan lain untuk digunakan dengan aplikasi asli yang tidak mendukung SOAP tetapi memerlukan layanan web.
• Untuk membuat layanan berorientasi sumber daya, layanan API web adalah yang terbaik untuk dipilih. Dengan menggunakan HTTP atau layanan yang tenang, layanan ini dibuat.
• Jika Anda menginginkan kinerja yang baik dan pengembangan layanan yang cepat, layanan API web sangat membantu.
• Untuk mengembangkan layanan web yang ringan dan dapat dipelihara, layanan API web sangat membantu untuk mengembangkan layanan tersebut. Ini mendukung pola teks apa pun seperti JSON, XML, dan lain sebagainya.
• Perangkat yang memiliki bandwidth ketat atau memiliki keterbatasan bandwidth, maka layanan API untuk WEB adalah yang terbaik untuk perangkat tersebut.

5 WEB API Terbaik yang Berguna untuk Menambah Fungsionalitas Website

Berikut ini adalah bebeapa contoh WEB API Terbaik untuk Fungsionalitas Website

1. Web Share API

API ini membantu Anda menerapkan fungsi “share” di situs web Anda. API ini dapat memberikan nuansa mobile-native share. Hal tersebut pun memungkinkan Anda untuk berbagi teks, file, dan tautan ke aplikasi lain di perangkat. Web Share API dapat diakses melalui metode navigator.share:

if (navigator.share) {
  navigator.share({
    title: 'Peringatan Web App di sini',
    text: 'Periksa Web App',
    url: '<https://appkey.id/>',
  })
    .then(() => console.log('Berhasil berbagi'))
    .catch((error) => console.log('Gagal berbagi', error));
}

Kode di atas merupakan contoh API untuk WEB  menggunakan vanilla JavaScript. Satu hal penting yang perlu diperhatikan adalah Anda hanya dapat menjalankan tindakan ini dengan onclick event:

} catch (error) {
        console.log(`Oops! Saya tidak bisa membagikan karena: ${error}`);
      }
    } else {
      // fallback code
      console.log(
        " Web Share saat ini tidak didukung di browser ini. Harap berikan panggilan balik "
      );
    }
  };
  return (
    <button onClick={handleSharing}>
      <span>{label}</span>
    </button>
  );
}

Cuplikan kode di atas adalah contoh WEB API dasar menggunakan dengan React untuk mengimplementasikan opsi berbagi di aplikasi Anda. Anda dapat melihat demo ini di CodeSandbox. Saat ini Web Share tidak didukung oleh browser desktop Chrome, tetapi berfungsi di browser Android.

<template>
  <div id="app">
    <div v-if="webShareApiSupported" class="refer-wrapper">
      <p class="refer-text">
        Share your referal code:
        <span class="theCode">{{ referralCode }}</span> dengan teman dan hasilkan
        Ketika mereka sign up
      </p>
      <button @click="shareNow">Share</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      referralCode: "DNXZX",
    };
  },
  computed: {
    webShareApiSupported() {
      return navigator.share;
    },
  },
  methods: {
    shareNow() {
      navigator.share({
        title: "Kode Refferal",
        text: this.referralCode,
      });
    },
  },
};
</script>

Jika Anda bekerja dengan Vue.Js contoh kode di atas akan menampilkan implementasi dasar dari Web Share API.

2. Contact Picker API

Kebanyakan aplikasi seluler cenderung meminta akses ke kontak atau buku telepon Anda. API ini merupakan fungsi mobile lain yang juga tersedia di web. Katakanlah Anda menerapkan fitur pengisian ulang airtime untuk aplikasi web fintech. Anda ingin pengguna memilih kontak atau beberapa kontak.

Contact Picker API dapat diimplementasikan menggunakan navigator.contacts. Ia menerima dua argumen: properti, yang merupakan array berisi properti yang ingin Anda akses, dan opsi: Clipboard API.

const props = ['nama', 'telepon',];
const opts = { multiple: true };

async function getContacts() {
  try {
      const contacts = await navigator.contacts.select(props, opts);
      handleResults(contacts);
  } catch (ex) {
      // Tangani eror di sini.
  }
}

Jika Anda bekerja dengan React, Anda dapat mengimplementasikan fitur Contact Picker seperti di bawah ini:

export default function Contact({ label }) {
  const properties = ["nama", "telepon"];
  const options = { multiple: true };

  const handleGetContacts = () => {
    try {
      const contacts = navigator.contacts.select(properties, options);
      return contacts;
    } catch (ex) {
      console.log(ex);
    }
  };
  return (
    <>
      <button onClick={handleGetContacts}>
        <span>{label}</span>
      </button>
    </>
  );
}

Jika Anda bekerja dengan Vue maka contoh WEB API akan tampil seperti ini:

<template>
  <div id="app">
    <div v-if="contactApiSupported">
      <div class="contact-wrapper">
        <h4>Select Contacts</h4>
        <button @click="pilihKontak">Select Contact</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    contactApiSupported() {
      return "Kontak" in navigator && "ManajerKontak" in window;
    },
  },
  methods: {
    pickContact() {
      const properties = ["nama", "telepon"];
      const options = { multiple: true };
      try {
        const contacts = navigator.contacts.select(properties, options);
        return contacts;
      } catch (ex) {
        console.log(ex);
      }
    },
  },
};
</script>

Namun perlu diingat bahwa Contoh WEB API ini hanya bekerja dalam browser seluler.

3. Clipboard API

Operasi clipboard seperti copy, cut, dan paste adalah beberapa fitur paling umum di aplikasi seluler. Clipboard API memungkinkan pengguna web untuk mengakses clipboard sistem dan melakukan operasi clipboard dasar.

Sebelumnya, Anda dapat berinteraksi dengan clipboard sistem menggunakan DOM document.execCommand; beberapa perpustakaan masih menggunakan metode ini. Namun, Clipboard API menyediakan akses untuk membaca dan menulis konten clipboard secara langsung.

Perhatikan kerjanya dengan JavaScript. Membaca dari Clipboard:

navigator.clipboard.readText().then(clipText =>
  document.getElementById("outbox").innerText = clipText);

Menulis ke Clipboard:

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(function() {
    /* clipboard berhasil disetel */
  }, function() {
    /* penulisan clipboard gagal */
  });
}

Bagi Anda yang merupakan developer Vue, Anda bisa implementasikan Salinan teks dengan API seperti ini:

<template>
  <div id="app">
    <p>Salin ini:</p>
    <input v-model="code" />
    <button v-if="supportCBApi" @click="copyMessage">Salin</button>
    <div v-if="pesan">{{ pesan }}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "",
      code: "Makan tiga kali sehari",
      supportCBApi: false,
    };
  },
  created() {
    if (navigator.clipboard) {
      this.supportCBApi = true;
    }
  },
  methods: {
    copyMessage() {
      navigator.clipboard
        .writeText(this.code)
        .then(() => {
          console.log("Teks ada di papan klip.");
          this.message = " Kode disalin ke papan klip.";
        })
        .catch((err) => console.error(err));
    },
  },
};
</script>

4. Web Speech

Sebagian besar aplikasi seluler saat ini menggabungkan fitur pengenalan suara dan teks ke ucapan untuk meningkatkan aksesibilitas dan pengalaman pengguna. Web Speech API menghadirkan fungsionalitas ini ke browser. Pada artikel ini, kita hanya akan membahas antarmuka SpeechRecognition.

Speech Recognition dapat diakses menggunakan  interface SpeechRecognition, dan menggunakan sistem pengenalan suara default perangkat:

const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; 
const recognition = new SpeechRecognition(); //new SpeechRecognition object
recognition.continuous = false; 
recognition.lang = 'id-IND';
recognition.interimResults = false; 

recognition.onstart = function() {
    console.log("Bicara pada mikrofon");
};

recognition.onspeechend = function() {
    // ketika pengguna selesai bicara
    recognition.stop();
}

// Ini berjalan ketika layanan pengenalan suara mengembalikan hasil
recognition.onresult = function(event) {
    var transcript = event.results[0][0].transcript;
    var confidence = event.results[0][0].confidence;
};

// mulai pengenalan
recognition.start();

Pertama, kami membuat objek pengenalan suara dengan menetapkan SpeechRecognition baru. Objek SpeechRecognition memiliki beberapa properti seperti:

• continuous: Mendengarkan satu hasil (kata atau frasa) saat pengenalan suara dimulai. Jika disetel ke true, layanan SpeechRecognition terus mendengarkan kecuali Anda menghentikannya
• lang: Preferensi bahasa pengguna
• interimResults: Mengembalikan hasil sementara di samping hasil akhir jika disetel ke true

Selain itu, agar layanan pengenalan ucapan kami berfungsi, kami perlu menyediakan panggilan balik untuk acara seperti onstart, onspeechend, dan onresult.

• onstart: Saat pengguna memicu peristiwa ini, layanan pengenalan suara dimulai
• onspeechend: Ini menghentikan layanan pengenalan suara agar tidak berjalan
• onresult: Hasil yang berhasil diterima

5. Notification API

Web Notification API sering disamakan dengan Web Push API, tetapi ketahuilah bahwa keduanya berbeda. Tujuan Notification API adalah untuk menampilkan informasi kepada pengguna sementara Push API memungkinkan service worker untuk menangani pesan push dari server bahkan saat perangkat tidak aktif.

Saat ini Notification API banyal digunakan oleh blog dan aplikasi web untuk memberi tahu pengguna ketika ada perubahan atau pembaruan pada suatu layanan. Satu kasus penggunaan umum untuk API ini adalah ketika aplikasi Anda adalah PWA (aplikasi web progresif) dan Anda memerlukan pengguna untuk menyegarkan browser untuk mendapatkan pembaruan baru untuk aplikasi.

Untuk membuat notifikasi, JavaScript memiliki Notification Constructor:

const message = 'Refresh untuk mendapatkan fitur baru';
var notification = new Notification('Menyimpan aplikasi PWA', { body: text });

Anda dapat mengimplementasikan API ini dengan framework web yang diinginkan.

Itulah 5 WEB API yang berguna untuk menambah fungsionalitas pada website Anda. Tentunya masih banyak lagi ada API yang bisa Anda eksplor untuk berbagai kebutuhan Anda. Ingin mendapat informasi terbaru soal pengembangan WEB ataupun Aplikasi? Kunjungi situs WEB APP di https://appkey.id/ atau download aplikasinya di Google Play Store. Gratis!