Komponen Pembentuk Ekosistem: API + Ekstensi Platform

Everything should be made as simple as possible, but not simpler. — Albert Einstein.

Saat ini, platform dan API kian marak diperbincangkan. Banyak perusahaan dan startup serupa berlomba-lomba membuat platform dan API. Buku-buku dan artikel pun tak luput membahas tentang hal ini.

Satu hal yang dapat dipelajari publik dari “rahasia tersembunyi” Apple dan Microsoft untuk menjangkau ratusan juta pengguna global hanya dalam skala dekade adalah platform dan API. Para konglomerat digital abad ke-21 seperti Airbnb, Alibaba, Amazon, Facebook, Google, Tencent, dan Uber bisa scale up dalam sekejap, kurang dari 20 tahun, melayani miliaran pengguna, karena mereka membangun platform dan API. Singkatnya, mereka membangun ekosistem di atas produk, di mana produk mereka hadir sebeagai platform yang menawarkan API.

API adalah blok pembentuk yang paling dasar untuk menyediakan akses ke platform dengan fleksibilitas tinggi. Namun, hal ini tidak membuatnya menjadi lebih mudah atau cepat dalam membangun aplikasi, terutama dalam ekstensi platform.

Praktik paling umum dan lumrah adalah menyediakan exstensi platform. Ekstensi platform adalah plug-in atau add-ons yang bisa memperluas fungsi platform dengan beberapa cara. Ekstensi memiliki level yang lebih tinggi dan lebih mudah digunakan daripada API. Secara analogi tentang ekstensi dan bahasa komputer: API adalah bahasa teknis sementara ekstensi adalah bahasa komputer tingkat tinggi.

Ekstensi platform meningkatkan produktivitas rekayasa perangkat lunak dan mempercepat pembuatan aplikasi khusus untuk pelanggan, mitra dan pengembangan internal. Selain itu, teknisi software yang kurang berpengalaman pun bisa menerapkannya karena ramah pengembang dan dirancang mudah untuk diprogram.

Sebuah survei mengenai bagaimana merancang ekstensi platform terbagi menjadi 3 kategori:

1. Web App Extension

2. Native Mobile App Extension

3. Bot: Chatting App Extension

Artikel kali ini akan membahas lebih tentang poin pertama, Web Ap Extension. Poin kedua dan ketiga akan dibahas dalam artikel selanjutnya.

Web App Extension

Beberapa orang seringkali berfikir bahwa aplikasi seluler native akan mengalahkan aplikasi web dalam hal popularitas. Namun, itu semua tergantung waktu dan persyaratan aplikasi. Faktanya, popularitas aplikasi web tetap menanjak.

Sementara teknologi web seperti HTML5, CSS dan JavaScript semakin cepat, website menunjukkan pertumbuhan pesat karena adopsi perangkat seluler seperti ponsel cerdas dan tablet memanfaatkan hardware yang lebih kuat dan jumlah memori yang lebih besar — berkat berlakunya hukum Moore dalam 50 tahun terakhir — dengan harga terjangkau bagi konsumen.

Seiring kemajuan teknologi selular aplikasi web — contohnya, Google Progressive Web Apps, Angular, Accelerated Mobile Page, yang menggabungkan keunggulan pengembangan & kecepatan penyebaran web (relatif terhadap aplikasi seluler native), kenyamanan (tanpa harus memasang dan memperbarui aplikasi), dan pengalaman pengguna seluler yang native dan aman di web.

Terdapat lebih dari miliaran aplikasi web di dunia dan masih akan bertambah. Beberapa yang populer adalah sebagai berikut:

1. Facebook App

2. Google Chrome Extension

3. Firefox’s Web Extension

4. Google Docs

Facebook App

Untuk dapat merancang Aplikasi Facebook, anda harus memenuhi beberapa ketentuan:

• Akun Facebook

• Akun Pengembang Facebook

• Facebook AppId untuk Website dalam tautan URL (seperti http://localhost:8888/ pada mesin lokal, barangkali anda ingin menggunakan local host seperti ngrok)

• Server web lokal yang berfungsi (seperti http://localhost:8888/)

Berikut adalah contoh kode untuk merancang Aplikasi Facebook (index.html)

Sumber
• Facebook for developers: Register and Configure an App
• FB Hello World

Ekstensi Google Chrome

Google Chrome Extension adalah ekstensi browser yang mampu memodifikasi browser Google Chrome vanilla. Ekstensi ini dapat ditulis menggunakan teknologi web seperti HTML, Javacript dan CSS. Ekstensi Google Chrome dapat diunduh melalui Chrome Web Store (dulunya Google Chrome Extension Gallery).

Bagaimana merancang Ekstensi Chrome

Pengembang dapat membuat ekstensi baru untuk Chrome dengan teknologi inti dari pengembangan web: HTML, CSS dan JavaScript.
Berikut adalah langkah-langkah membuat ekstensi:

1. Buat folder baru (ekstensi)
2. Tambahkan file gambar sebagai ikon ekstensi
3. Buat file extension.html
4. Buat file extension.js
5. Buat file manifest.json Berikut adalah contoh ekstensi untuk memunculkan pesan Hello World dan mengubah warna latar dari tab aktif.

extension.html

extension.js

manifest.json

Manifes ini tidak lebih dari file metadata dalam format JSON yang berisi properti seperti nama ekstensi, deskripsi, nomor versi dan sebagainya. Pada level yang tinggi, itu akan digunakan untuk menyatakan fungsi ekstensi pada Chrome, dan izin apa yang diperlukan untuk memanfaatkan ekstensi tersebut.

Bagaimana Menjalankan Ekstensi

Berikut adalah step dalam menjalankan ekstensi atau direktori untuk uji coba:

Kunjungi chrome://extensions di browser anda (atau buka menu Chrome dengan meng-klik ikon di sebelah kanan Omnibox (tab alamat). Ikon menu berbentuk tiga garis horizontal. Lalu pilih More Tools (next) Extension.
Pastikan kotak pilihan Developer mode sebelah pojok kanan atas sudah ditandai.
Klik Load unpacked extension… untuk memunculkan dialog pemilihan file.
Arahkan pada direktori dimana anda menempatkan file ekstensi, lalu pilih sembari meng-klik tombol OK.
Ekstensi ini akan muncul di sebelah pojok kanan atas Chrome browser
Kunjungi https://www.google.com/
Klik pada ekstensi Chrome yang baru saja dibuat dan Anda akan menyaksikan warna latar yang berbeda.

Sebagai alternatif, Anda dapat menarik dan meletakkan direktori tempat anda menyimpan file ekstensi di chrome://extensions pada browser untuk menjalankannya. Jika file ekstensi valid, akan dimuat dan aktif segera! Jika invalid, pesan kesalahan akan muncul di bagian atas halaman. Perbaiki kesalahan dan coba lagi.

Sumber

Firefox WebExtension

WebExtension adalah sistem lintas browser untuk mengembangkan add-on browser. Dalam fungsi yang lebih luas, sistem ini kompatibel dengan API ekstensi yang didukung Google Chrome dan Opera. Berdasarkan pengumuman, sejak akhir 2017, bersamaan dengan rilisnya Firefox 57, Firefox telah pindah secara eksklusif ke WebExtension dan akan berhenti memuat jenis ekstensi lainnya di desktop. Hal ini berarti bahwa add-on yang tidak di konversi ke WebExtension pada saat itu tidak akan tersedia lagi terlepas apakah sudah terpasang di Firefox atau terdapat dalam penyimpanan add-oon Mozilla.

Membuat sebuah WebExtension

Berikut adalah langkah-langkah untuk membuat WebExtension sederhana dan memodifikasi DOM dengan menambahkan paragraf “Hello World” dan menghiasi laman web dengan garis merah.
• Siapkan direktori dengan struktur berikut:
• manifest.json
• manifest_version, name, dan version adalah mutlak. Hal ini memuat metadata dasar untuk add-on.
• description opsional dan tertera di Add-on Manager.
• content_scripts mengatakan pada Firefox untuk memuat skrip ke dalam laman Web yang URL nya cocok dengan pola spesifik. Pada contoh di atas, kami menyuruh Firefox untuk memuat skrip bertajuk “hello world.js” menjadi laman HTTP atau HTTPS.
• helloworld.js

Bagaimana Memuat WebExtension
1. Ketik dan kunjungi about:debugging di bilah alamat Firefox
2. Klik Load Temporary Add-on dan pilih file apa saja pada direktori add-on Anda. Add on akan segera terpasang dan diam sampai Anda me-restart Firefox.
3. Coba kunjungi laman apa saja yang bermula dengan http:// atau https://

Sumber
• Firefox will only support WebExtensions by the end of 2017
• What are WebExtensions
• Your first WebExtension
• Testing and Publishing a Simple WebExtension

Google Docs

Add-on

Ekstensi untuk Google Docs disebut Add-on, yang menyediakan cara untuk memperluas fungsi Google Docs. Bahasa utamanya adalah JavaScript tetapi kita dapat menambahkan file HTML. Selain itu, Google juga menyediakan beberapa layanan bawaan untuk berinteraksi dengan endpoint REST API menggunakan pustaka JavaScript khusus yang disediakan Google. Melalui contoh ini, kami akan menambahkan add-on URL shortener (menggunakan URL shortener API dari Google). Tujuannya adalah dengan mudah mempersingkat URL saat kami mengedit dokumen Google Docs tanpa harus berganti jendela.
Step:
• Buat dokumen Google Docs baru (dengan mengunjungi https://docs.google.com/) • Pilih menu Tools > Script editor
• Kita perlu menyalakan layanan url shortener oleh Google. Pilih menu Resources > Advanced Google services…
• Dari daftar, carilah URL Shortener API, nyalakan dengan meng-klik tombol
• Kita juga perlu menyalakan layanan Google Developers Console. Tautan ke konsol disediakan di bawah daftar. Setelah itu, cari URL Shortener untuk API. Pada laman selanjutnya, nyalakan dengan meng-klik tombol ENABLE.
• Kembali ke jendela script editor, jika tidak ada file berjudul code.gs, buat terlebih dahulu lalu ketik kode di bawah ini.
• Buat file HTML baru dengan memilih menu File > New > HTML file. Beri nama file Sidebar dan ketik kode di bawah ini.

• Simpan kedua file

• Klik pada judul proyek, ubah namanya menjadi URL Shortener

Sekarang kita bisa mencoba script dengan mengikuti step berikut:

• Kembali pada laman dokumen dan muat kembali laman tersebut. Jendela script editor akan tertutup secara otomatis

• Setelah beberapa saat, sub-menu URL Shortener akan muncul di bawah Add-ons menu. Klik Add-ons > URL Shortener > Start

• Kotak dialog akan muncul dan memberi tahu Anda bahwa skrip tersebut memerlukan otorisasi. Klik Lanjutkan. Kotak dialog kedua kemudian akan meminta otorisasi untuk layanan Google tertentu. Baca pemberitahuan dengan saksama, lalu klik Izinkan

• Sidebar akan muncul. Untuk mengujinya, ketik URL ke teks input atas. Kemudian klik tombol Shorten. URL yang dipersingkat akan muncul pada bilah masukan teks bagian bawah.

• Di bawah ini adalah screenshot untuk hasil akhir. Sidebar di sisi kanan sesuai dengan HTML file yang dibuat sebelumnya.

Kesimpulan

Contoh di atas menunjukkan setiap platform mengekspos fungsionalitas mereka-memperluas antarmuka sesuai dengan kasus penggunaannya yang unik. Namun, antarmuka ini mengarah ke tujuan yang sama: memberikan fleksibilitas kepada pengguna untuk menambahkan kasus penggunaan baru atau memperbaiki kasus penggunaan saat ini. Kemampuan platform tumbuh secara linier seiring jumlah pengembangnya. Pada akhirnya tujuan membangun ekosistem tercapai.

Sumber
• Quickstart: Add-on for Google Docs

–
Disclosure: Artikel tamu ini ditulis oleh GDP Labs (Danny Christanto, Darwin Gautalius, Felix Kurniawan, Hermes Vincentius Gani, Karol Danutama, On Lee, Ricky Yudianto, Timotius Kevin Levandi, Timotius Nugroho Chandra, Wendy Fu, Wilyanto Salim) dan diterjemahkan oleh Kristin Siagian. Sebelumnya telah dimuat di Medium Diterjemahkan, disunting, dan dipublikasi ulang atas izin penulis aslinya.

Komponen Pembentuk Ekosistem: API + Ekstensi Platform

Web App Extension

Facebook App