Di Google, widget adalah aplikasi HTML dan JavaScript yang dapat disematkan di halaman web dan aplikasi lain, termasuk Sites. Gadget ini menawarkan kemampuan untuk menyertakan konten eksternal dan dinamis dalam situs Anda, seperti aplikasi mini dan daftar berbasis database, yang digabungkan dengan teks dan gambar untuk memberikan pengalaman pengguna yang lancar.
Setiap halaman Sites adalah penampung gadget yang potensial. Selain itu, Sites menawarkan Data API yang dapat digunakan bersama gadget untuk membuat aplikasi canggih. Artinya, sebagai developer gadget, Anda dapat memanfaatkan Sites API klasik untuk membuat alat yang menarik bagi developer Web lain dan audiensnya, juga untuk penggunaan Anda sendiri.
Ketika Anda membuat gadget untuk Sites, gadget tersebut akan tersedia bagi jutaan pengguna aktif. Cukup kirimkan gadget Anda kepada kami, dan gadget akan muncul di mana pengguna dapat dengan mudah menjelajahi, mengonfigurasi, dan menambahkan gadget Anda ke Situs mereka.
Jadi sekarang Anda tahu {sites_name_short} adalah platform distribusi yang hebat untuk gadget Anda, apa yang Anda tunggu? Mulailah membuat gadget untuk Sites sekarang!
Ikhtisar gadget Sites
Secara umum, gadget adalah utilitas kecil yang menghasilkan atau menarik informasi eksternal ke halaman web. Dalam bentuknya yang paling sederhana, gadget adalah file .xml kecil yang mengambil informasi dan dapat menyediakannya di beberapa halaman web sekaligus. Di Sites, menyertakan hasil gadget dalam iframe yang bertindak sebagai saluran untuk informasi eksternal ini. Beberapa gadget tidak lebih dari itu, iframe yang meneruskan informasi dari situs web lain.
Gadget yang lebih canggih mengumpulkan konten dinamis dan menyediakan aplikasi interaktif di dalam halaman Sites Anda. Lihat Contoh gadget.
Gadget terdiri atas komponen berikut:
- File spesifikasi gadget - File .xml yang menggabungkan fungsi HTML dan JavaScript.
- Halaman Penampung - Halaman Web tempat gadget dimasukkan, dalam hal ini adalah Situs Google.
- Sumber data eksternal - Sumber data ini bersifat opsional dan mungkin berada di lokasi yang sama dengan file .xml, tetapi sering kali dipanggil oleh spesifikasi gadget melalui HTTP untuk memberikan hasilnya.
Gadget yang dibuat untuk Sites dapat digunakan oleh semua pelihat situs. Iklan ini cenderung interaktif, berfokus pada menarik konten dinamis, bukan presentasi, dan didesain untuk melengkapi konten situs.
Gadget kalender adalah contoh yang baik dari perbedaan ini. Gadget kalender yang dipersonalisasi di kemungkinan akan menampilkan kalender pengguna yang login secara default, sedangkan gadget kalender di Sites mungkin memungkinkan kolaborator memilih dari berbagai kalender spesifik per lokasi.
Gadget situs memungkinkan Anda menyajikan beberapa informasi dari sumber eksternal (misalnya, diagram langsung dari dasbor performa yang berbeda namun terkait) dalam satu halaman beserta teks penjelasan yang dipublikasikan langsung di Sites. Hal ini menyimpan real estate visual sekaligus mengumpulkan berbagai informasi mengenai topik yang sama dalam tampilan yang sama. Dengan gadget, Anda juga dapat menyertakan konten dinamis yang seharusnya dapat dicegah pemeriksaan keamanan Sites.
Peringatan: Gadget yang dibuat dengan API gadget lama dapat berfungsi di Sites, tetapi tidak didukung secara resmi. Gadget bawaan dan berbasis feed
juga tidak didukung. Oleh karena itu, Google menyarankan Anda membuat semua gadget Sites menggunakan
perangkat* saat ini. API. Lihat postingan ini untuk mendapatkan penjelasan:
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
Contoh gadget
Berikut adalah Include gadget yang sederhana namun populer yang fungsinya hanya menyediakan iframe untuk melewati konten web lain:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
description="Include another web page in your Google Site"
thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
height="800" width="600" author="Google">
<Require feature="dynamic-height"/>
</ModulePrefs>
<UserPref name="iframeURL" display_name="URL to content" required="true"/>
<UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
<EnumValue value="auto" display_value="Automatic"/>
<EnumValue value="no" display_value="No"/>
<EnumValue value="yes" display_value="Yes"/>
</UserPref>
<Content type="html" view="default,canvas">
<div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(doRender);
function doRender(){
// setup variables
var prefs = new gadgets.Prefs();
var iframeURL = prefs.getString('iframeURL');
var scroll = prefs.getString('scroll');
var height = 800;
var width = 600;
if (gadgets.window) {
var viewport = gadgets.window.getViewportDimensions();
if (viewport.width) {
var width = viewport.width;
}
if (viewport.height) {
var height = viewport.height;
}
}
var iframe = document.createElement('iframe');
iframe.setAttribute('width', width + 'px');
iframe.setAttribute('height', height + 'px');
iframe.setAttribute('frameborder','no');
if(scroll){
iframe.setAttribute('scrolling', scroll);
}
iframe.setAttribute('src', iframeURL);
// set the slideshow to the placeholder div
var dest = document.getElementById('dest');
dest.innerHTML = '';
dest.appendChild(iframe);
}
</script>
</Content>
</Module>
Lihat Memulai: gadget.* API untuk deskripsi lengkap tag gadget dan konten yang diharapkan.
Menghosting gadget Anda
Terlepas dari apa yang dilakukan gadget Anda, filenya harus berada di World Wide Web agar dapat ditemukan dan digunakan. Semua lokasi online yang dapat diakses melalui HTTP tanpa autentikasi akan dilakukan. Ingat, gadget Anda harus dipublikasikan di direktori publik agar dapat dipilih. Jika tidak, pengguna harus menyematkannya dengan langsung memasukkan URL-nya.
Berikut adalah opsi penginangan gadget Anda:
- App Engine - Mampu menyimpan semua file yang diperlukan oleh gadget Anda. Memang memerlukan beberapa penyiapan, yaitu pembuatan project dan upload file berikutnya. Tetapi, AI generatif akan dapat digunakan oleh sejumlah besar pengguna. Anda dapat membuat aplikasi untuk menyimpan semua gadget Anda dan aplikasi lain untuk menyajikan file statis, termasuk file app.yaml yang menyerupai:
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
Jika semua file gadget disimpan di direktori statis, Anda dapat mengedit file tersebut di direktori lokal dan men-deploy-nya ke App Engine setiap kali melakukan perubahan. Jika Anda memiliki file /static/widget.xml, URL-nya akan menjadi: http://<nama-aplikasi-Anda>.appspot.com/static/gadget.xml
- Lokasi online mana pun yang Anda pilih - Sepenuhnya di bawah kendali Anda, tetapi juga merupakan tanggung jawab penuh Anda. Periode nonaktif di server Anda dapat mengakibatkan pemadaman bagi pengguna gadget Anda.
Membuat gadget
Gadget hanyalah HTML dan (opsional) JavaScript, Flash, atau Silverlight yang digabungkan dalam XML. Panduan Developer Gadget memberikan semua detail yang diperlukan untuk membuat gadget Anda sendiri. Selain itu, template OpenSocial dapat digunakan untuk membuat aplikasi sosial di gadget dengan cepat.
Berikut adalah langkah-langkah pembuatan gadget untuk Sites:
- Tentukan di mana gadget Anda akan dihosting. Lihat bagian Menghosting gadget untuk mengetahui deskripsi opsi Anda.
- Buat file .xml baru yang akan berfungsi sebagai spesifikasi Anda menggunakan editor teks pilihan Anda.
- Tentukan jenis konten, baik HTML atau URL, dan tentukan dalam file gadget .xml, seperti:
<Content type="html">
Biasanya berupa HTML, yang mengasumsikan semua konten disediakan langsung di file .xml. Namun, jika Anda ingin menyediakan konten dalam file terpisah, gunakan jenis konten URL. Lihat Memilih Jenis Konten untuk deskripsi lengkap tentang perbedaannya. - Buat konten di file .xml gadget atau dalam file terpisah yang dipanggil oleh spesifikasi. Lihat bagian Melihat gadget contoh untuk mengetahui cara memeriksa gadget yang ada.
- Tentukan preferensi dasar untuk gadget yang dapat diubah oleh pengguna. Lihat Menentukan Preferensi Pengguna untuk mendapatkan petunjuk. Untuk memberikan konfigurasi lanjutan lainnya, lihat bagian Mengizinkan konfigurasi pengguna lanjutan.
- Tentukan preferensi modul yang hanya dapat diubah oleh pembuat gadget. Lihat Menentukan Preferensi Gadget untuk detail lainnya.
- Uji gadget. Lihat bagian Menguji gadget Anda untuk mendapatkan petunjuk.
Menyematkan gadget Anda
Gadget dapat disematkan di halaman Sites baik dengan memilihnya dari direktori gadget Sites (yang disinkronkan dengan direktori gadget Google) atau dengan menyertakan URL-nya secara langsung.
Untuk menyematkan gadget di Sites:
- Buka halaman Situs yang akan berisi gadget baru.
- Buka halaman yang akan diedit.
- Pilih Sisipkan > Gadget lainnya.
- Telusuri gadget, pilih dari kategori di sebelah kiri, atau klik Tambahkan gadget menurut URL dan tempel URL ke file .xml Anda. Lalu klik Tambahkan.
Tips: Metode Tambahkan gadget menurut URL yang sama ini dapat digunakan untuk menyematkan gadget dari Google dan di mana pun secara online. - Tentukan dimensi gadget, pilih dari setelan yang tersedia, lalu klik OK. Gadget tersebut akan ditambahkan ke halaman Anda.
- Simpan halaman untuk melihat dan menguji gadget Anda di situs tersebut.
Menguji gadget Anda
Setelah membuat gadget, Anda harus mengujinya secara menyeluruh sebelum menggunakannya dan mengizinkan orang lain untuk melakukan hal yang sama. Uji gadget Anda secara manual dengan membuat satu atau beberapa Google Sites uji coba dan menyematkan gadget Anda. Lihat bagian Menyematkan gadget Anda untuk langkah-langkah yang tepat. Fungsi dan tampilan gadget bergantung pada situs yang memuatnya. Oleh karena itu, cara terbaik untuk men-debug gadget Anda adalah dengan mengujinya dalam konteks Situs Google yang sebenarnya. Coba beralih di antara berbagai tema Sites untuk memastikan gadget Anda muncul dengan benar di setiap tema Sites.
Saat menguji gadget, Anda pasti akan menemukan bug dan perlu melakukan koreksi pada file .xml gadget. Sebaiknya nonaktifkan cache gadget saat Anda menyesuaikan XML. Jika tidak, perubahan Anda tidak akan muncul di halaman. Spesifikasi gadget akan di-cache kecuali Anda memberi tahu Situs untuk tidak melakukannya. Untuk mengabaikan cache selama pengembangan, tambahkan ini ke bagian akhir URL halaman Sites yang berisi gadget (bukan URL file .xml spesifikasi gadget):
?nocache=1
Sites menyediakan UI standar untuk menambahkan dan mengonfigurasi gadget. Saat ditambahkan, gadget akan menampilkan pratinjau dan menampilkan parameter UserPref yang dapat dikonfigurasi. Uji perbarui berbagai nilai konfigurasi dan
tambahkan gadget Anda ke situs uji coba. Pastikan gadget Anda berfungsi seperti yang diharapkan di
situs itu sendiri. Anda harus menguji bahwa
setiap UserPref yang telah ditetapkan dapat dikonfigurasi dengan benar oleh administrator situs.
Kemudian lihat bagian Mempersiapkan Publikasi untuk Memublikasikan Gadget Anda untuk pengujian lainnya.
Mengizinkan konfigurasi pengguna lanjutan
Semua gadget dapat menawarkan kemampuan untuk menyetel preferensi dasar pengguna, yang dilakukan melalui bagian UserPref file spesifikasi gadget. Hal ini biasanya memengaruhi dimensi, scrollbar, batas, judul, dan setelan khusus gadget, seperti yang terlihat dalam screenshot di sini:
Namun, ada banyak kasus di mana gadget mendapatkan manfaat dari preferensi yang lebih canggih daripada yang ditawarkan komponen UserPref standar. Preferensi sering kali perlu menyertakan fitur seperti logika bisnis kustom, validasi, atau pemilih. Antarmuka yang dihasilkan dari bagian UserPref gadget mendukung jumlah jenis data yang terbatas (string, enum, dll.), sehingga validasi input seperti URL atau tanggal tidak dapat dilakukan.
Lebih jauh lagi, dalam penampung seperti Google dengan penampil dan editor yang sama, pembuat gadget dapat memperluas konfigurasi sebagai bagian dari tampilan standar. Di Sites, pelihat tidak selalu menjadi editor, sehingga pembuat gadget tidak dapat menjamin bahwa pengguna yang melihat memiliki akses untuk memperbarui preferensi. Penampung sosial seperti Sites tidak dapat mengizinkan pengguna mengubah preferensi, hanya penulis.
Di Sites, antarmuka preferensi gadget dasar yang dihasilkan oleh UserPref dapat diganti dengan tampilan konfigurasi tempat banyak preferensi dan jenis data tambahan mungkin disediakan, seperti screenshot yang ditampilkan di sini:
Tampilan konfigurasi ditampilkan sebagai pengganti setelan UserPref pada waktu penyisipan atau waktu pengeditan dan memungkinkan Anda menetapkan preferensi pengguna dengan antarmuka kustom. Anda juga bisa memiliki elemen input kustom, seperti untuk memilih posisi di peta, bukan memasukkan koordinat peta.
Developer dapat menggunakan setprefs API standar untuk menyimpan preferensi dalam tampilan ini. Lihat Referensi XML Gadget dan bagian Menyimpan Status di Dasar-Dasar Developer untuk detail selengkapnya. Tampilan ini memungkinkan aplikasi penampung memberikan informasi konfigurasi tambahan dan ditetapkan dalam file spesifikasi gadget .xml mengikuti bagian UserPref dengan tag pembuka yang menyerupai:
<Content type="html" view="configuration" preferred_height="150">
Misalnya, gadget news.xml yang menyediakan tampilan konfigurasi di atas berisi bagian ini:
<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
.config-options {
margin: 10px;
}
.label {
font-weight: bold;
width: 35%;
vertical-align: top;
}
.gray {
color:#666666;
}
html {
font-family:arial,sans-serif;
font-size:0.81em;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5;
}
a:link, a:visited, a:active { text-decoration: none }
</style>
<img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
<table class="config-options">
<tr>
<td align="left" class="label">Size:</td>
<td align="left">
<select id="size" onchange="Update()">
<option selected="selected" value="300x250">Medium rectangle (300x250)</option>
<option value="728x90">Leaderboard (728x90)</option>
</select>
</td>
</tr>
<tr>
<td align="left" class="label">Select sections:</td>
<td align="left">
<table>
<tbody><tr>
<td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
<td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
<td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
<td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
<td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
<td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
<td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
</tr></tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="label">Or create one:</td>
<td align="left">
<input type="text" id="query" onchange="Update()"/>
<br/>
<span class="gray">Example: 2010 Olympics</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
<iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
style="border:0;margin:0;"
scrolling="no" allowtransparency="true"></iframe>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
function getSelectedTopics() {
var selected = [];
var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
for (var i = 0; i < topics.length; i++) {
if (document.getElementById('sec_' + topics[i]).checked) {
selected.push(topics[i]);
}
}
return selected.join(',');
}
function setSelectedTopics(selected) {
if (selected && selected.length >= 0) {
var topics = selected.split(',');
for (var i = 0; i < topics.length; i++) {
document.getElementById('sec_' + topics[i]).checked = true;
}
}
}
function Update() {
var topic = getSelectedTopics();
var query = document.getElementById('query').value;
var size = document.getElementById('size').value;
var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' +
'format=SIZE&element=true';
var iframe = document.getElementById('preview_ifr');
url = url.replace(/SIZE/, size);
if (topic.length > 0) {
url += '&topic=' + topic;
}
if (query.length > 0) {
url += '&q=' + encodeURIComponent(query);
}
iframe.src = url;
if (size == '728x90') {
iframe.style.width = '728px';
iframe.style.height = '90px'
} else {
iframe.style.width = '300px';
iframe.style.height = '250px';
}
prefs.set('size', size);
prefs.set('topic', topic);
prefs.set('query', query);
gadgets.window.adjustHeight();
}
function Initialize() {
var size = '__UP_size__';
if (size.length > 0) {
document.getElementById('size').value = size;
}
var query = '__UP_query__';
if (query.length > 0) {
document.getElementById('query').value = query;
}
setSelectedTopics('__UP_topic__');
Update();
}
gadgets.util.registerOnLoadHandler(Initialize);
</script>
</Content>
Anda dapat menemukan contoh ini dan gadget khusus Sites lainnya dengan tampilan konfigurasi di sini:
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml
Berikut praktik terbaik untuk gadget Sites
Pengguna Sites ingin terlihat bagus di web. Ikuti praktik terbaik ini agar gadget Anda menyatu sempurna dengan berbagai tema yang digunakan di Sites. Lihat Ringkasan Gadget untuk mengetahui detail cara membuat gadget. Selebihnya dari bagian ini menyajikan pedoman khusus untuk gadget Sites.
- Jangan memasukkan informasi sensitif dalam spesifikasi atau judul gadget karena gadget Anda dapat dilihat oleh publik. Misalnya, jangan menyertakan nama project internal.
- Untuk meminimalkan visibilitas gadget Anda, jangan kirimkan ke direktori gadget iGoogle atau layanan listingan publik lainnya. Sebagai gantinya, minta semua pengguna untuk menyertakannya hanya menurut URL. Selain itu, Anda boleh membuat gadget jenis URL (bukan jenis HTML biasa yang berisi semua konten) yang hanya memanggil file lain untuk kontennya. Dengan opsi pass-through ini, hanya URL file kedua yang akan ditampilkan. Lihat bagian Memilih Jenis Konten pada Dasar-Dasar Developer untuk mengetahui perbedaan antara gadget HTML dan URL dan bagian Gadget adalah Publik dalam Menulis Gadget Anda Sendiri untuk mengetahui cara lain menyamarkan gadget Anda.
- Yang terpenting, uji gadget Anda di sejumlah situs berbeda. Ubah warna latar belakang, warna teks, dan tampilan font situs agar gadget Anda menyatu dengan berbagai template.