Awal tahun ini, kami mengumumkan ketersediaan umum smart chip pihak ketiga di Google Dokumen. Fitur baru ini memungkinkan Anda menambahkan, melihat, dan berinteraksi dengan informasi penting dari aplikasi pihak ketiga secara langsung di Google Dokumen. Beberapa mitra, seperti Asana, Atlassian, Figma, Loom, Miro, Tableau, dan Whimsical, telah membuat smart chip sehingga pengguna bisa mulai menyematkan konten dari aplikasi mereka secara langsung ke dalam Dokumen. Sourabh Choraria, Google Developer Expert untuk Google Workspace dan developer hobi, memublikasikan solusi smart chip pihak ketiga bernama “Link Previews”" ke Google Workspace Marketplace. Aplikasi ini menambahkan informasi ke Google Dokumen dari beberapa alat SaaS yang umum digunakan.
Dalam postingan blog ini, Anda akan mengetahui cara membuat smart chip Anda sendiri untuk Google Dokumen.
Smart chip pihak ketiga didukung oleh Google Workspace Add-ons dan bisa dipublikasikan ke Google Workspace Marketplace. Dari sana, admin atau pengguna dapat menginstal add-on dan akan muncul pada sidebar di sisi kanan Google Dokumen.
Google Workspace Add-on mendeteksi link layanan dan meminta pengguna Google Dokumen untuk melihat pratinjaunya. Ini berarti Anda bisa membuat smart chip untuk semua layanan yang memiliki URL yang dapat diakses publik. Anda dapat mengonfigurasi add-on untuk melihat pratinjau beberapa pola URL, seperti link untuk mendukung kasus, prospek penjualan, profil karyawan, dan lainnya. Konfigurasi ini dilakukan dalam file manifes add-on.
{
"timeZone": "America/Los_Angeles",
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"oauthScopes": [
"https://www.googleapis.com/auth/workspace.linkpreview",
"https://www.googleapis.com/auth/script.external_request"
],
"addOns": {
"common": {
"name": "Preview Books Add-on",
"logoUrl": "https://developers.google.com/workspace/add-ons/images/library-icon.png",
"layoutProperties": {
"primaryColor": "#dd4b39"
}
},
"docs": {
"linkPreviewTriggers": [
{
"runFunction": "bookLinkPreview",
"patterns": [
{
"hostPattern": "*.google.*",
"pathPrefix": "books"
},
{
"hostPattern": "*.google.*",
"pathPrefix": "books/edition"
}
],
"labelText": "Book",
"logoUrl": "https://developers.google.com/workspace/add-ons/images/book-icon.png",
"localizedLabelText": {
"es": "Libros"
}
}
]
}
}
}
File manifes memuat pola URL untuk Google Books API
Smart chip menampilkan ikon dan judul singkat atau deskripsi isi link. Ketika pengguna mengarahkan kursor ke chip, mereka akan melihat antarmuka kartu yang menampilkan pratinjau informasi selengkapnya tentang file atau link tersebut. Anda bisa menyesuaikan antarmuka kartu yang muncul ketika pengguna mengarahkan kursor ke smart chip. Untuk membuat antarmuka kartu, Anda menggunakan widget untuk menampilkan informasi tentang link. Anda juga dapat membuat tindakan sehingga pengguna bisa membuka link atau mengubah isinya. Untuk melihat daftar semua komponen yang didukung untuk kartu pratinjau, lihat dokumentasi developer.
function getBook(id) {
// Code to fetch the data from the Google Books API
}
function bookLinkPreview(event) {
if (event.docs.matchedUrl.url) {
// Through getBook(id) the relevant data is fetched and used to build the smart chip and card
const previewHeader = CardService.newCardHeader()
.setSubtitle('By ' + bookAuthors)
.setTitle(bookTitle);
const previewPages = CardService.newDecoratedText()
.setTopLabel('Page count')
.setText(bookPageCount);
const previewDescription = CardService.newDecoratedText()
.setTopLabel('About this book')
.setText(bookDescription).setWrapText(true);
const previewImage = CardService.newImage()
.setAltText('Image of book cover')
.setImageUrl(bookImage);
const buttonBook = CardService.newTextButton()
.setText('View book')
.setOpenLink(CardService.newOpenLink()
.setUrl(event.docs.matchedUrl.url));
const cardSectionBook = CardService.newCardSection()
.addWidget(previewImage)
.addWidget(previewPages)
.addWidget(CardService.newDivider())
.addWidget(previewDescription)
.addWidget(buttonBook);
return CardService.newCardBuilder()
.setHeader(previewHeader)
.addSection(cardSectionBook)
.build();
}
}
Ini adalah kode Apps Script untuk membuat smart chip.
Untuk panduan lengkap mengenai kode yang digunakan dalam postingan ini, silakan lihat tutorial contoh Melihat pratinjau link dari Google Buku dengan smart chip.
Saat membuat smart chip untuk melihat pratinjau link, Anda bisa memilih dua teknologi yang berbeda untuk membuat add-on: Google Apps Script atau runtime alternatif.
Apps script adalah platform pengembangan aplikasi cepat yang dibangun dalam Google Workspace. Faktor ini membuat Apps Script menjadi pilihan terbaik untuk membuat prototipe dan memvalidasi solusi smart chip Anda karena tidak memerlukan lingkungan pengembangan yang sudah ada sebelumnya. Namun, Apps Script tidak hanya berguna untuk pembuatan prototipe karena beberapa developer memilih untuk membuat Google Workspace Add-on bahkan memublikasikannya ke Google Workspace Marketplace agar dapat diinstal oleh pengguna.
Jika Anda ingin membuat smart chip dengan Apps Script, Anda bisa menonton video di bawah ini, di dalamnya Anda bisa mempelajari cara membuat smart chip untuk melihat pratinjau link di Google Dokumen dari A - Z. Ingin kode yang digunakan dalam tutorial video? Lihat halaman contoh Melihat pratinjau link dari Google Buku dengan smart chip.
Link to Youtube Video (visible only when JS is disabled)
Jika Anda lebih suka membuat Google Workspace Add-on menggunakan lingkungan pengembangan, bahasa pemrograman, hosting, paket, dan lainnya, maka runtime alternatif adalah pilihan yang tepat. Anda bisa memilih berbagai bahasa pemrograman seperti Node.js, Java, Python, dan banyak lagi. Hosting kode runtime add-on bisa di cloud atau infrastruktur lokal apa pun selama kode runtime dapat diekspos sebagai endpoint HTTP(S) publik. Anda dapat mempelajari lebih lanjut tentang cara membuat smart chip menggunakan runtime alternatif dari dokumentasi developer.
Anda bisa membagikan add-on Anda dengan pengguna lain melalui Google Workspace Marketplace. Misalnya, Anda ingin membuat solusi smart chip agar tersedia untuk tim Anda. Dalam kasus ini, Anda dapat memublikasikan add-on ke organisasi Google Workspace, yang juga dikenal sebagai aplikasi pribadi. Di sisi lain, jika Anda ingin membagikan add-on dengan siapa pun yang memiliki Akun Google, Anda bisa memublikasikannya sebagai aplikasi publik.
Untuk mengetahui selengkapnya tentang publikasi ke Google Workspace Marketplace, Anda bisa menonton video ini yang akan menjelaskan prosesnya kepada Anda.
Pelajari lebih lanjut tentang membuat smart chip untuk melihat pratinjau link di dokumentasi developer. Di sini Anda akan menemukan banyak informasi dan contoh kode yang dapat Anda gunakan sebagai dasar solusi Anda. Kami tidak sabar menantikan solusi smart chip yang akan Anda bangun.
