Ngobrolin Proyek Fugu
Ringkasan Episode
Bantu KoreksiProyek Fugu adalah nama panggilan yang lebih catchy untuk web capabilities project — upaya menutup jarak antara apa yang bisa dilakukan aplikasi native dan apa yang bisa dilakukan web. Dulu web hanya bisa menampilkan dokumen, sementara perangkat punya kamera, sensor, Bluetooth, NFC, USB, dan akses berkas. Peran itu sempat diisi oleh pustaka pembungkus dari pihak ketiga yang menyediakan jembatannya sendiri; sekarang kemampuan itu digarap langsung di lapisan browsernya. Nama ikan buntal Jepang itu dipilih bukan tanpa alasan: ikannya beracun dan bisa mematikan kalau disiapkan sembarangan, tapi konon lezat kalau disiapkan dengan hati-hati. Begitu pula API-nya. Yang membuatnya perlu ekstra hati-hati adalah betapa rendahnya ambang masuk web: sebuah aplikasi cukup dibuka lewat tautan, tanpa langkah sadar mengunduh dan memasang seperti aplikasi biasa. Maka akses berkas, papan klip, dan perangkat keras harus dijaga ketat agar tidak jadi jalan bagi penyalahgunaan. Setiap API melewati tahapan yang jelas dan bisa dilacak terbuka: dari sekadar usulan, ke percobaan yang harus diaktifkan sendiri oleh pengguna lewat flag, ke origin trial yang didaftarkan pemilik situs sehingga pengunjungnya tidak perlu melakukan apa-apa, sampai akhirnya stabil. Ada pula galeri contoh aplikasi nyata yang memakainya — berguna bukan hanya untuk belajar, tapi juga untuk meyakinkan tim bahwa hal seperti ini memang bisa dibangun di web. Kekhawatiran bahwa semua ini hanya jalan di satu keluarga browser diakui wajar, tapi karena bentuknya spesifikasi terbuka, adopsi oleh vendor lain sudah terjadi pada beberapa API.
Poin-poin Utama
- •Fugu adalah nama panggilan dari web capabilities project: menutup jarak antara kemampuan aplikasi native dan web, mulai dari kamera, Bluetooth, NFC, USB, sampai akses berkas
- •Namanya diambil dari ikan buntal yang beracun kalau disiapkan sembarangan tapi lezat kalau hati-hati — persis seperti API yang powerful tapi rawan disalahgunakan
- •Ambang masuk web sangat rendah karena cukup dibuka lewat tautan, tanpa langkah sadar mengunduh dan memasang seperti aplikasi biasa — itulah alasan keamanannya harus lebih ketat
- •Tahapannya berjenjang dan terbuka: usulan, percobaan lewat flag yang harus diaktifkan pengguna sendiri, origin trial yang didaftarkan pemilik situs, lalu stabil
- •Origin trial berarti pemilik situs yang mendaftar dan pengunjungnya tidak perlu melakukan apa-apa, sedangkan flag berarti penggunanya sendiri yang harus mengaktifkan
- •Galeri contoh aplikasi nyata berguna bukan hanya untuk belajar tapi juga untuk meyakinkan tim bahwa hal seperti itu benar-benar bisa dibangun di web
- •Kekhawatiran bahwa semuanya hanya jalan di satu keluarga browser wajar, tapi karena bentuknya spesifikasi terbuka, beberapa API sudah diadopsi vendor lain
Halo, selamat malam semuanya.
Selamat malam.
Ketemu lagi di Halis Tasa Malam.
Waktunya apa?
Ngobrolin web.
Gue masih ada anak.
Sekolahan.
Bapak-bapak, ibu-ibu, waktunya apa?
Waktunya ngobrolin web.
Iya, ketemu lagi kita.
Masih dengan format bertiga.
Masih ada Irfan, ada Eka, dan ada saya, Riza.
Malam hari ini kita kembali berbicara tentang web.
Ya, minggu lain kita udah berbicara.
Memacaranya ngobrolin web.
Ngobrolin web ya, nggak boleh ngobrolin lain ya.
Tapi ngobrolin platform lain sedikit ya.
Biasanya kan kalau membahas antara mana yang lebih bagus nih.
Kita bikin mobile apps dulu atau web dulu kan.
Itu nggak habisnya perangnya dalam tentara kutip ya.
Pasti akan selalu ada pergembatan,
wah bagusan mobile, wah bagusan web gitu kan.
Begitu juga sebaliknya.
Nah, topik yang malam ini akan kita bahas adalah tentang project Fugu.
Yang tujuannya adalah untuk mengisi gap ya.
Kan kalau web itu biasanya,
kalau dulu kan dikenal sebagai ya kapabilitasnya gitu aja.
Karena bagus banget web untuk buat jokumen nih.
Betul, kalau mobile itu bisa pake gyroscope lah,
bisa bikin kompas lah, bisa misalkan apa lagi ya.
Lihat transkrip lengkap (1098 segmen lagi)
Bisa, apa, yang kalau weight block gitu ya.
GPS, sensor punya ya, apa pun sensor device.
Betul, USB, terus bisa ngeprint dll.
Nah, ternyata dengan salah satunya dengan inisiasi project Fugu ini,
web itu bisa loh kesana gitu.
Nah, apa aja dan gimana kita akan bahas malam hari ini.
Dan salah satunya apa, inisiasi yang dilakukan oleh Google
untuk membuat web ini lebih, apa ya, lebih...
Lebih terasa natif.
Mempunyai kapabilitas mendekati atau bahkan menyamai natif.
Menyamai natif. Nah, itu...
Namun bukan menyamai natif mobile, maksudnya ya.
Artinya natif ke, bukan mobile app ya.
Kemampuannya bisa, kan gini, web itu kan satu layer di atas operating system kan.
Satu layer di atas operating system.
Sedangkan kalau mobile app itu, dia nempelnya di operating systemnya.
Sedangkan web itu masih ada browser,
lalu web page-nya kan.
Nah, artinya dengan Fugu ini, kita itu bisa mengakses lebih banyak kapabilitas
yang dimiliki oleh mobile device ataupun desktop device.
Itu sih maksudnya, jadi lebih mendekatkan ke operating system.
Mengakses low level features.
Kalau contoh konkretnya, ya mungkin mengakses kamera, ya kan.
Kamera kan, apa, kamera itu ya di hape mungkin ada kamera, di macOS ada kamera,
gimana nyalain kamera videonya, itu kan harus bisa mengakses ke layer
yang lebih bawah lagi, atau sensor, atau apa-apa.
- Banyak, mulai dari kamera, NFC, Bluetooth. - NFC kan termasuk sensornya.
Maksudnya Bluetooth. Input-output.
Nah, terus bahkan hal sesimpel kayak share.
Kalau kita mau nge-share ya kan, itu tampilannya kan di Android punya sendiri,
di macOS ada sendiri, dan sebagainya.
Ini mungkin kayak mengisi gap yang dulu diisi oleh phone gap.
Kordova, phone gap, itu mereka bisa mengakses beberapa API native kan.
- Kamera, GPS. - Betul, betul.
- Dan itu layernya dibikin sama mereka sendiri. - Iya, sama platform yang non-wet kan.
Sama parti, sama pihak perusahaan, perusahaan teknologi.
Intinya bukan non-browser ya, jadi mereka bikin sendiri, mereka buka sendiri API-nya.
- Betul, betul, betul. - Dan abis itu dibundle menjadi sebuah aplikasi,
baik itu aplika ataupun iOS ya.
Padahal sebenarnya di belakang layar adalah dia HTML, CSS, JavaScript,
ditambah HTML, CSS, JavaScript-nya bisa mengakses API mobile, device kan.
- Betul, betul, betul. Nah, ada banyak nih Project Fugu ini.
- Project Fugu, oke. Kita mulai... - Wow, bahkan tulis di kolom komentar.
- Iya, kalau untuk yang live, khusus teman-teman yang nonton live itu punya privilege untuk langsung nanya.
Tapi kalau teman-teman yang nontonnya rekaman nanti atau besok atau kapanpun,
ya bisa tanyanya ke bit.ly/ngoblinweb ya.
Oke, kita bahas dulu tentang satu artikel pertama yaitu Project Fugu itu apa.
Tadi kita udah sempat bahas cukup banyak juga ya tentang...
- Jadi Project Fugu itu kan sebetulnya nickname ya, kayak cuma nama biar catchy aja.
Nama aslinya itu kan, web capabilities project, nama resminya.
Yang diperkenalkan di Google.
- Tapi pada perkembangannya, pihak yang terlibat kan bukan cuma Google aja,
tapi ya semua yang berkaitan sama ekosistem pengguna Chromium.
Jadi itu tuh, ada tuh, Microsoft, Intel.
Kalau nggak salah Samsung juga terlibat sama ada lagi apa sih itu yang konsultansi.
Punya semua yang berkaitan dengan ekosistem Chromium.
- Oke. Intel kenapa involved ya? Saya penasaran ya.
- Dia kan device itunya dipakai di HP-HP Android kali ya.
- Prosesornya ya.
- Intel kan nggak cuma bikin prosesor, banyak silikon-silikon lainnya.
- Grafik atau semacamnya.
- Oh iya, GPU-nya juga ya.
- Perang, perang, perang.
Dan ini sebenarnya adalah seperti web API
yang belum dipulis. Benar nggak sih? Kayak eksperimental gitu.
Nanti ketika udah nature, dalam tanda kutip, "Wah ini udah bisa nih diadopsi untuk browser yang lain,
baru di-suggest untuk menjadi web API."
Sebetulnya statusnya, prosesnya, nanti kan ada di link lainnya.
Ya, kalau perkara eksperimental atau nggak, Fugu pun, API Fugu,
ada beberapa step atau tahap yang dilalui dari yang masih paling eksperimental
sampai yang udah mature, yang ibaratnya siap diadopsi vendor lain
kalau memang vendor lain mau. Jadi macam-macam tahapannya.
- Tujulannya ini ya, salah satunya ya.
Jadi aplikasi web itu bisa melakukan apapun yang dilakukan oleh native app gitu ya, pengennya.
- Tapi jangan lupa itu bawahnya core tenets of the web tetap mempertimbangkan security,
keamanan, kebenaran, dan privacy.
- Nah, ini berkaitan sama kenapa nickname-nya Fugu. Jadi ini nyambungnya ke situ sih ya.
- Kenapa Fugu? - Yang jawab yang udah nyoba makan Fugu.
- Fugu itu kalau ngeliat ini ya, Fugu itu ikan, ikan buntel.
- Ya, ikan buntel bener. Powerfish. - Ikan buntel tapi yang dari Jepang.
Kalau temen-temen nonton Finding Nemo itu ada satu ikan yang seperti normal,
tapi dia stres, dia di bulet gitu.
- Itu tadi yang image yang foto gue kirim dia di WhatsApp itu.
- Oh ya, lupa ya. Nggak diambil ya.
- Itu kan ikan buntel Jepang ya, kalau disiapkan, itu beracun, racunnya mematikan
sebagian punya banyak bagian yang beracun, tapi kalau di persiapannya bener,
itu konon katanya enak banget. Nah, nggak tahu, yang pernah makan disini cuma fun.
- Bisa aja, bisa aja. Jadi kayak, apa ya rasanya, dia kayak daging ikan,
lebih kenyal daripada daging ikan biasa. - Salmon.
- Nggak, karena dia dagingnya putih, kalau salmon kan dagingnya orange tuh.
Kalau bisa dibilang nggak sekenyal cumi-cumi, jadi putih kayak cumi-cumi,
tapi tidak sekenyal cumi-cumi. Kan kalau cumi-cumi alot ya,
anggap aja cumi-cumi sangat muda, yang dikunyah itu masih ada kekenyalan dikit,
tapi bisa enak, tetapi rasanya relatif kehambar, kayak nggak ada rasa.
Kalau mau makannya pakai saus. - Oke, nggak se-hype itu ya.
- Iya, cuma teksturnya aja. Cuma nggak ada bau amisnya.
- Oh, oke. Cuma mungkin dalam bahasa Indonesia kali ya, jadi B aja,
mungkin bagi perspektif orang Jepang, itu mungkin enak banget.
Apa, mitosnya itu konon enak banget. - Atau jangan-jangan kalau dimasak
ala Indonesia mungkin lebih enak dengan bumbu-bumbu sepah-sepah Indonesia.
- Iya, itu mah ikan yang biasa aja, kalau dimasak baladu,
ikan kris sama kering tempe itu nggak usah ikan eksotis.
Cuma intinya itu adalah ikan yang berbahaya. Bahaya kalau menyiapkannya salah,
tapi kalau misalnya disiapkan dengan hati-hati, itu bisa jadi enak banget menurut orang Jepang.
Jadi nyambungnya sama API. Ini kan powerful banget,
bisa membuka, bisa unlock kemampuan yang wow banget lah, wow banget,
tapi disiapkannya harus dengan hati-hati, karena bisa kalau-kalau sembarangan.
- Security, trust, and privacy. - Iya, contoh-contoh sederhananya
kalau misalkan apa, mungkin sekarang udah masuk ke web ya, apa file system.
Kita bisa membaca dan menulis file yang ada di PC atau di device kita.
Nah, kalau itu security-nya tidak dijaga, ya bisa bahaya.
Dia bisa buka semua folder kita, sebuah aplikasi web yang kita buka, misalkan
ulului.com gitu kan, terus kita hapus. - Dikopi dulu semua, diambil, terus dihapus.
- RMS gitu kan, ya udah, nangis lah. - RMRF.
- Mending kalau cuma dihapus, kalau di-lock pakai, bukan, di-lock pakai apa itu,
di-encrypt, terus di buat apa, kalau mau buka, bayar pakai bitcoin dulu contohnya.
- Oh iya, atau ya, kita bisa begini, dan miner, juga bisa melakukan apa lah ya,
kalau udah, kita bisa taruh file di sebuah device orang gitu.
Nah, itu kan sangat berbahaya, makanya ini si Fugue ini juga dibikin juga
dengan sangat hati-hati, jangan sampai merusak privacy, trust, dan security.
Ya, karena entry level web itu sangat cep, pertama untuk kemudahan di akses orang,
tinggal mengunjungi situs atau dapat link dari mana, tinggal buka, itu langsung bisa
mengakses device. Sedangkan kalau aplikasi, ada proses step-nya kan, dia harus download,
habis download, terus kemudian install, berarti yang dia lakukan itu dengan secara sengaja.
- Ya, udah gitu kan ada ininya, ada, ini boleh nggak, akses kontak, boleh nggak,
boleh nggak, ya walaupun kita accept-accept aja ya.
- Ya, anggap aja, anggap aja bukan mobile app ya, anggap aja kayak installable
atau executable yang ada di operating system, kita download, terus kita klik 2x dulu kan,
kita klik 2x, terus muncul install, itu secara sadar. Sedangkan kalau di web,
kita tinggal buka web, halomannya, dan semua kapabilitas itu bisa langsung diakses,
bisa diakses oleh situs dengan seijin kita tentunya. Nah, makanya perlu dibuat hati-hati itu,
karena entry level web itu lebih mudah ke banyak orang ketimbang aplikasi.
- Ya, tinggal share link di WhatsApp atau di grup-grup, begitu diklik, langsung masuk ke
web yang berbahaya gitu kan, itu gampang sekali. - Seandainya tidak, makanya perlu dibuat
hati-hati kan, security, trust, dan privacy. - Ya, ngomongin Fugu, kalau Irwan pernah nyobain
Fugu di Jepang, di Indonesia juga ada yang mirip. - Oh, ya di Makassar ya.
- Ya, dari jauhnya, ikan buntel juga. - Nah, itu bukan ikan buntel sebenarnya,
jadi kulitnya itu keras banget. Kalo saya bilang waktu makan ini ini ikan hati peluru
di tembak-tembus. - Oh, jadi peracun juga nggak?
Maksud saya ada bagian yang peracun juga nggak? - Nggak ada. Kulitnya itu tebal banget,
keras gitu. Jadi makannya pun hanya bisa diginiin, karena nggak bisa difilih,
nggak bisa diapain, ya cuma dibongkar kerasnya, terus diambil, terus digoreng, udah.
Tapi enak sekali. Berbeda dengan ikan yang tadi Irwan makan biasa aja.
- Itu ada fotonya kalau mau dibuka. - Oke, kita lihat ya. Jadi sebenarnya
si proyek Fugu ini adalah perpanjangan tangan dari web capabilities yang inisiasi oleh
Microsoft dan Intel. Pujudannya adalah mendekatkan kemampuan web agar bisa mendekati
native lah. Kita nggak bisa bilang kalau bakal menyayangi, tapi mungkin mendekati setidaknya
kita udah bisa bikin aplikasi-aplikasi trend dengan API-API yang jauh lebih trend
daripada beberapa tahun yang lalu. - Dan ini juga semacam menandai itu sih
pergeseran. Jadi kalau dulu banget kan, di awalnya 90-an tuh web itu dibikin untuk
dokumen ya, untuk dokumen yang saling terhubung. Nama dokumen ya bayangan kita kan,
text, image, ya udah itu aja. Cuma kalau lamaan, ya link untuk saling menghubungkan
dokumen atau image itu. Kan itu limited banget ya. Kita bayanginnya mungkin dokumen itu
kayak Microsoft Word lah ya, yang familiar semua-semua orang. Microsoft Word dokumen
atau semacamnya. Nah lama-lama kan di tahun mulai, ya satu dekade terakhir ini
bergeser banget, kebutuhannya mulai geser, penggunaannya bergeser, web itu udah mulai
apa ya, Epsi kayak aplikasi. Nah untuk salah satu penanda pergeseran itu ya
ada project web capability alias project hugu ini. - Jadi sekarang itu web itu
biasanya punya dua fungsi ya. Website atau halaman web yang isinya informasi
hanya dalam bentuk text, image, link jadi, atau dokumen ya, dan ada aplikasi web.
Aplikasi web ini ya itu yang teman-teman akses setahari-hari. Ada Gmail misalkan,
ada Spotify memutar lagu, memutar video, YouTube, gitu ya. Itu kan semua aplikasi web,
bukan lagi website gitu. Mungkin definisinya mungkin agak kemur juga, tapi kan
kalau website itu asumsinya adalah ya sederhana lah, lepas lah gitu ya. Mungkin ada form,
ada informasi. - Dokumen itu tadi. - Dokumen tadi kan. - Biasanya website itu
blog atau company profile kalau bahasa sininya. - Company profile, marketing page lah ya.
- Marketing page. - Marketing atau landing. - Yes. Nah ketika kita misalkan
katakan lah blog kan, depannya kan artikel kan. Cuman ada title, ada sub title,
ada date, ada informasi-informasi lain, ada body, ada di dalamnya macem-macem,
ada paragraf, ada misalkan ada image juga, ada video, ada audio dan lain-lain.
Pada saat kita mau bikin itu dokumen, kita bisa masuk ke admin. Nah adminnya itu
ya bisa dibilang sebagai aplikasi web. Bisa jadi ya kayak gitu lah kira-kira.
Mungkin sedikit apa ilustrasi itu. - Ilustrasi web itu, ilustrasinya
lebih gampang. CMS itu aplikasi web. Forum itu aplikasi web. Terus kemudian
e-learning itu aplikasi web, e-commerce itu aplikasi web. - Chat app juga kalau ada
yang bisa diakses dari web gitu ya. Nah itu juga aplikasi. - Aplikasi web.
- Yes. Nah apa aja sih produk Fugu? Nah di sini ada seluruh website dari Chrome
yang baru ya kayaknya, lumayan baru. - Baru banget, baru banget ini baru diumumin.
- Baru diumumkan ya. Jadi namanya Fugu Showcase. Nah Fugu Showcase ini adalah daftar
aplikasi atau tools-tools yang menggunakan Fugu sebagai API-nya. - API-nya Project Fugu.
- Iya. - Jadi kenapa Showcase ini? Jadi beberapa API yang latest itu,
itu origin trial ya. Jadi hanya bisa digunakan kalau diijinkan. Gimana ya maksudnya?
Bisa digunakan. - Harus apply. Harus apply spesifikasi untuk menggunakan API tersebut.
- Betul. Nah jadi beberapa situs ini makanya ada beberapa API hanya bisa digunakan
oleh situs-situs tertentu saja. - Tapi ya, maksudnya itu terbuka untuk umum.
Jadi kalau teman-teman emang punya website yang atau web app yang kegunaannya,
wah cocok nih buat kebutuhanku. Itu bisa apply, kalau udah di-proof, ya udah bisa langsung pake.
- Dan itu ada filter by category ya. Misalkan teman-teman yang kira apa ya? Contact Picker.
Oh, ternyata sekarang bisa Contact Picker ya, walaupun tidak di semua OS kan.
- Tinder. Ternyata ada web app-nya ya. - Tinder itu bukan hanya aplikasi, ada app-nya.
- Coba Mas Richard coba daftar, Gih. Kita sama-sama coba Mas Richard.
- Catfishing. Bukan catfishing, tapi pufferfishing. Cuma ini showcase ini berguna banget ya buat
idir mungkin kita cari inspirasi. Kalau kita cuma lihat daftar API kan, yang ini apa sih?
- Ini buat apa sih gunanya gimana? - Namanya debut atau code labs atau tutorial.
Pastikan kasusnya yang simple, MVP yang mendemonstrasikan fokus ke cara kerjanya.
Cuma kadang kan nggak menarik atau mungkin nggak relevan. Nah, kalau kita pengen contoh yang real world,
ya udah kita cari di showcase itu. Mungkin bisa juga dipake buat ngebujuk tim lead kita misalnya
atau stakeholder lainnya. Ini loh, bisa bikin kayak gini loh.
- Bisa bikin ini loh, video editor loh. Ada yang udah pakai Captut, tulisannya Captut.
- Captcut. - Captcut.
- Ini saya pakai, tapi yang aplikasinya ya, bukan yang web-nya.
Ternyata ini dah udah si web-nya. Ini buatan dari Biden, TikTok kalau nggak salah.
Jadi kita bisa edit video. - Dan gratis ya, nice.
- Ada satu video yang paling saya suka, yang buat saya menganggap ini adalah auto caption.
Jadi kita bisa generate subtitle, ada bahasa Indonesia-nya juga.
- Tapi bagus. - Beneran, jadi misalkan video,
kemarin kan saya coba kan video, ngomongnya itu nyampur. Misalkan project.js masuk ke program ini,
masuk ke folder ini, DPM install, terus ini adalah project.js. Itu terbaca, bener-bener tepat ya.
Subtitlenya, itu keren banget. - Wow, oke.
- Itu keren banget. Dan ternyata ini di web-nya juga dulu kap, gitu ya.
Dan ada apa? Kayak sticker yang lagi trending, gitu ya.
Kalau teman-teman yang selalu buka tiktok atau saya selalu dianggapin.
Dan API apa aja yang dipakai, di sini ada tulisan, gitu. Ada clipboard, ada case storage,
ada device memory, dan system access. - Coba tau, itu clipboard, bisa nggak access clipboard aja,
itu artinya web bisa nggak access clipboard yang kita loh.
- Clipboard yang DOS. - Dari sistem device kita masing-masing.
- Betul. Jadi, bisa kita copy dari misalnya dari, anggap aja bukan dari web ya,
bukan dari sesama browser. Jadi dari aplikasi lain kita copy. - Kita nge-tip dinopet atau aplikasi lain.
- Terus kita paste-nya di web. Nah, itulah maksudnya asing.
- Iya. Yang paling berasa itu kalau teman-teman ikutin, misalkan ada yang pakai Figma nih.
Jaman dulu, mungkin sebelum dia menggunakan asing clipboard, itu kalau kita mau copy paste image,
nggak bisa. Kalau sekarang, misalkan dari explorer atau dari finder gitu, kita copy image,
control-c gitu image-nya, terus kita masuk ke Figma, kita control-paste. - Kita paste misalnya,
kita punya Photoshop atau aplikasi lain, kita bisa. - Atau Photoshop atau apapun, gitu. Itu bisa.
Kalau dulu nggak bisa. - Yang bahkan bukan di browser.
Yang paling kerasa enak itu kalau bikin Google slide. Kalau jaman dulu, kalau mau masukin image,
saya harus upload dulu ke drive atau ke mana, baru bisa di-attach ya. Kalau sekarang, drag-and-drop
udah bisa. Drag-and-drop aja udah bisa, dia langsung otomatis. Meskipun drag-nya itu dari
lokal folder ya, dari lokal folder, saya drop ke Google slide, dia otomatis upload.
- Hmm. - Aduh, perbedaannya.
- Oke, ini banyak sekali ya. Ada apa lagi yang menarik-menarik?
- Coba yang... nggak bisa kayaknya, karena... - Kalau di laptop ya, nggak bisa.
Ada yang bisa main game di sini. - Kalau itu, file system access?
- File system access. Tadi udah ini. - Oh, tuh.
- Yang tadi. - Snipe player. Bisa ya, berarti.
- Bisa. Yang tadi juga si Capcut. Capcut bisa, tail-draw bisa, escale-draw bisa.
- Github.dev bisa tuh. Wow. - Github.dev ini apa?
- Nggak tahu, makanya. - Itu buat buka repubita.
- Facebook ya? Facebook di browser, di cloud. - Iya, dan bahkan bisa install extension
dan sebagainya. - Pasot Github-nya Mas Liza apa tuh?
- Coba-coba ya. Ingat lho. Fugu itu adalah security trust and privacy.
Tolong dihormati ya. - Password-nya 1-8.
- Password-nya enter aja. - Password-nya pesan dulu.
- Pesan dulu. - Dari coffee. Selamat malam Audi.
- Selamat malam. - Nah, apa nih?
Jadi, jadi ngeblank kan gara-gara tadi.
- Oke. Ini kan showcase-nya nih. Jadi kalau temen-temen pengen tahu,
langsung ke showcase, pengen lihat ada aplikasi apa aja dibangun dengan menggunakan showcase.
- API, project Fugu. Ada banyak banget soalnya API-nya.
- Ini bisa di, yang paling popular ada yang temen-temen tahu ada nggak ya?
- Figma, tadi ada Figma. - Figma, ada banyak lah ini.
- Nah, kalau pengen tahu ada apa aja, apa, Fugu API, dan statunya sudah sampai mana,
ada tracker. Nah, Fugu ini tracker, web. Contohnya, web Bluetooth API ini ternyata dari Fugu ya.
- Itu udah ship, udah lama. - Udah ya. Nah, kalau kita lihat itu kan list-nya di kelompokan
jadi beberapa kategori berdasarkan status-nya yang tadi kita udah bahas sekilas ya.
Yang paling atas itu status-nya udah ship. Nah, terus kalau misalnya slide lagi sedikit ke bawah.
- Oke, sebentar. Nah, ini. - Context API. - Trial. - Ada tadi developer Trial.
Nah, itu ada detail-nya juga kalau mau tahu keterangan apa sih maksudnya status-status itu.
- Bisa diklik ya. - Nah, biar flag ini berarti kita harus,
kita harus ke setting Chromium atau browser, kemudian kita nyalakan fitur, misalkan sensor
atau notification atau semuanya ini ya. Gitu ya. - Terus ada yang started. - Baru mulai.
- Nah, kalau started itu yang experimental murni yang masih itu API-nya bisa tiba-tiba berubah.
Maksudnya bisa berubah sewaktu-waktu kalau kita pakai itu ya ekspektasinya kita ngasih feedback
karena yang nggak nyaman atau bermasalah. - Bisa jadi tinggalkan juga kalau nggak ada banyak.
- Gak ada yang pakai. - Ada detection. Ini kayak start-up ya.
Banyak ide ini masukin ke sini gitu. Banyaknya pakai ini. - Coba buka itunya deh, apa?
- Mereka di definisi status-statusnya, ke atas dikit. Nah, details. Nah, itu tuh jadi paling atas,
paling atas dulu. - Behind the flag. - Atasnya lagi. - Oh, ini, iya. - Atasnya lagi, paling atas.
Paling atas kan stable tuh, berarti itu udah launching, beneran launching, ada di semua browser
yang Chromium-based. Dari Google Chrome, Edge, Brave dan lain-lain. Terus tadi origin trial kan kita
udah bahas juga ya, sekilas. Nah, itu bisa apply. - Apply untuk menggunakan kita harus apply. - Di domain kita.
- Di domain kita. - Jadi kita sebagai pemilik situs, pemilik web app yang mau menggunakan kita yang daftar,
tapi user kita nggak perlu ngapa-ngapain. Jadi, maksudnya user yang menggunakan feature kita,
kalau udah prove, ya udah, bisa langsung pakai. Nah, bawahnya lagi tuh flag. Kalau flag itu user-nya yang
harus mengaktifkan feature itu. Jadi, nggak bisa tiba-tiba langsung pakai. - Ini developer trial,
karena harus masuk ke Chrome flag, cari feature itu, diaktifkan. - Jadi, ya kayak buat internal lah,
mungkin kita punya QA, buat QA kita sendiri, atau mungkin kita pengen, kita bikin library atau semacamnya
yang konsumennya adalah developer juga. Jadi, kita nyuruh, kita nyuruh user kita yang mana mereka sebenarnya
developer juga buat ngaktifkan feature itu, misalnya. Ya udah, di situ, started sama consideration.
- Sama ada consideration. Ini backlog. - Iya. - Ohnya makin ke bawah, makin experimental, makin aneh-aneh.
- Jadi, hanya suggestion itu, apa, yang ide aja ya. Oh, ini kayaknya bagus. - Iya, ide aja.
- Abis itu nanti dia suka. - Tapi harus, ide-nya juga harus, ini sih kan ada showcase-nya juga kan.
- Oh iya. Harus-harus proposal, kan? - Iya, proposal. - Jadi, theoretically, teorinya mah kalau kita punya
ide apapun, kita bisa suggest juga. Cuma ya belum tentu di... - Tentu, diterima. - Habis disugest, kita harus follow-up,
terus kayak ikut, harus kejar. - Terus habis itu, habis itu yang developer siapa? - Ya, kalau dianggap,
kalau dianggap itu fiturnya menarik, ya berarti kan nanti akan ada timnya yang akan di-assign untuk itu.
- Iya, iya, iya, iya. Oke. Next-nya, kita ngomongin apa lagi nih? Ini udah? Perlu dihubungi ini udah ya.
- Showcase. - Terus ini adalah tipset. Tipset ini adalah untuk... - Apa lagi? - Nah, itu sebetulnya yang tadi sih.
- Terus prosesnya. - Proses. Anyone can suggest. Kemudian ditulis, apa, dalam tulisannya. - Terus menulis detail,
explainer. Jadi kita ngusulin, nggak bisa cuma minta-minta feature aja, kita mesti bikin explainer, terus kira-kira
API-nya, bentuknya seperti ini. - Terus habis itu didiskusikan, kalau ada feedback, mungkin dokumennya bisa ditulis apa,
ditulis ulang, direvisi, gitu ya, kayak ini ya, kayak ngaduin bidul skripsi, kan? Habis itu baru dokumennya
dimasukkan, di-issue ke technical architect group, architect group dari Waiting J. Kemudian kalau udah berhasil di-review,
- Deformal specification-nya. - Deformal specification-nya. Jadi yang sering kita bahas ya, ini kan feature-feature ini bukan proprietary,
nggak ada yang punya. Maksudnya, ini bukan punya Google, walaupun yang di-develop oleh Google atau Samsung atau Microsoft,
API ini bukan milik Google yang dipatenkan atau proprietary. Implementasinya, iya, yang di Google Chrome misalnya ya
punyanya Google, yang di Microsoft Edge punyanya Edge. Tapi kalau di web, apapun itu berdasarkan spesifikasi,
spesifikasinya itu ya, nanti kalau udah masuk tahap terakhir, stable, bisa diadopsi siapapun, nggak harus bayar,
nggak harus minta izin atau apapun. Jadi ini yang diketahui di tahap ini, ini bahkan nggak coding sama sekali,
belum coding sama sekali baru spesifikasinya. - Ya, dan spesifikasi ini disiapkan untuk bisa bergeran di semua platform
atau di semua browser ya, bahannya Chromium ya. Karena ada hubungan juga sama W3C. Gimana, gimana?
- Pada saat yang sama ya, developer yang ngerjain Chromium ya sambil bikin juga, bikin implementasinya.
- Oke, kemudian dari sana udah direview berhasil masuk ke implementasi, proses implementasinya,
kalau udah mulai didemol atau udah berapa pasien gitu ya, bisa di-launch itu melalui flight nita.
- Oh, kok ilang? - Iya, kayak internet masih bisa mulai lambat.
- Masih audionya ada, screenshotnya ada. - Oke, lanjut, lanjut, lanjut.
- Yang penting masih bisa ngomong sama screenshot lah. - Masih bisa ngomong, iya, oke lah.
API-nya berhasil dikomentasi kita bisa pake developer tadi ya, yang kita sebutin developer itu,
aksesnya di setting ya, kalau misalkan kita pake Chromium, ya Chromium.2.0/flex. Tapi kalau misalkan Brave, misalkan dia jadinya Brave.2.0/flex.
Edge juga sama, gitu. Nah, di situ nanti ada fitur-fitur yang sesuai, yang dingin kan.
Setelah itu masuk ke Stabil, Stabil ini masuk ke Original.
- Lanjut, lanjut, lanjut, dijelaskan. - Kalau udah ada token, ya itu tadi.
Tadi kayaknya kita udah bahas ya soalnya di yang sebelumnya. Kalau misalnya sudah, jadi dapet token,
kalau misalnya website itu atau aplikasi itu pakai token tersebut, ya di semua user, otomatis bisa langsung dipake.
Nah, tahap selanjutnya, shape Stable.
- Itu berarti udah di atas di semua ya? - Di browser-browser Chromium.
- Di Chromium-based browser. - Nah, proses dia untuk, katakanlah,
"Oh, ini bagus nih, terus kita mau minta push ke browser lain, ada nggak sih di sini?"
- Bukan, sebenarnya bukan nge-push ya, jadi browser lain itu memilih, kan sudah jadikan standar.
Kalau memang, apa, kan sudah berjalan dan adopsinya ternyata di user yang di Chromium itu banyak,
dan intresnya banyak untuk menggunakan itu, contohnya Bluetooth API, contohnya ya.
Nah, browser lain mulai-mulai, "Oh, ternyata sudah ada standar Bluetooth API." Mereka mulai mengadopsinya, seperti itu.
- Nah, ini kelebihannya. - Bisa jadi nggak sih beberapa API yang ada di sini itu
jadi interop, bisa juga kali ya? Yang kayak... - Klub! Masih bisa hilang.
- Iya, tapi skrencernya tetap... - Untuk skrencernya malas sih kali.
- Bisa juga berarti ya dari Fugu API ini masuk juga ke interopability yang di project interop itu?
Bisa juga kali ya? - Bisa aja, cuma kan sebetulnya tujuannya beda.
- Bisa aja. - Bisa aja, cuma kalau Fugu ini kan tujuannya itu tadi
bikin feature-feature web yang mendekati kemampuan atau kapabilitas native.
Sedangkan kalau interop itu tujuan utamanya memastikan semua antar browser
bisa bekerja dengan konsisten, dengan streamline, developer bisa pakai dengan nyaman.
Cuma kita lihat juga skopnya ini sebenarnya agak beda kalau interop itu kelebihannya dia adalah skopnya paling luas
karena didukung semua vendor dari Chromium sampai Mozilla, sampai Apple dengan Safari WebKit
itu udah kerja sama semua. Sedangkan kalau Fugu ini kan project Fugu skopnya sedikit lebih sempit Chromium
bukan cuma Google, cuma ya kan Google, Microsoft, Samsung, Intel. Jadi skopnya lebih sempit.
Nah, kadang tuh concernnya sebenarnya orang-orang yang pengen pakai API project Fugu ini kan
gimana ya punya feature tapi cuma bisa dipakai di Chromium.
- Oh, Chromium. Itu gimana ya? - Chromium-based.
Nah, sebetulnya itu kalau menurut aku ya antara justified dan nggak justified sih.
Maksudnya emang kenyataannya kan sekarang ini sebagian besar API project Fugu ya emang cuma Chromium-based.
Jadi nggak jalan di Firefox maupun Safari.
Tapi di sisi lain itu kan bullet point terakhir tuh sebetulnya menjelaskan bahwa ini kan standar spesifikasi
jadi bukan milik, bukan punya siapapun spesifikasi itu kalau misalnya banyak yang suka, banyak yang pakai,
dianggap menarik, ya nggak tertutup kemungkinan Firefox atau Safari atau misalnya nanti ada vendor lain
bisa mengadopsi itu. Tadi udah ada contohnya dua, async clipboard sama web share.
- Oh iya, web share sudah diadopsi sama browser lain ya Firefox dan Safari.
- Jadi bukan nggak mungkin, bukan mustahil bisa suatu saat API-API itu bisa jalan di Firefox dan Safari juga, walaupun sedikit.
Cuma mungkin ini kelebihan dibanding browser world jaman dulu.
Jaman dulu banget kan konon Netscape Navigator sama Internet Explorer itu perang ya.
Cuma kalau perang yang versi jaman dulu itu perangnya rada nggak enak karena mereka semua bikinnya proprietary, beneran.
Misalnya untuk feature yang sama nih, apa, clipboard.
Si Netscape Navigator bikin sendiri, beneran rahasia punya sendiri, Internet Explorer bikin sendiri.
API-nya lain, beneran jadi harus ngoding dua kali, pusing nggak tuh.
- Betul, betul, betul. - Nah gimana kalau sekarang browser-nya banyak,
browser ada lima, nggak mungkin kita bikin developer bikin lima kali.
Nah untungnya sekarang udah, walaupun kalau mungkin persaingan atau apa ya masih ada ya.
Cuma kalau dari segi teknis API-nya bakal sama karena berbasis standar si spesifikasi itu tadi.
Jadi minimal nggak sesuruh jaman dulu lah.
- Terus bagaimana kalau cara teman-teman bisa mulai kalau pengen adopsi project Fugu?
- Ya itu balik ke, mungkin balik ke tracker dulu ya, tracker atau showcase.
Pertama kan kita masih milih dulu nih mana yang sesuai sama kebutuhan.
- Itu tuh ada di link yang terakhir tuh Mas Dizah, di Boost Your Blah Blah Blah, paling kanan.
- Iya nah. - Nah tuh ada codelab-nya juga kalau pengen coba-joba.
- Mas Dizah udah mulai duluan tuh. - Apa tuh?
- Udah selesai malu tuh. - Udah selesai tuh, nah.
Jadi teman-teman bisa kesini nanti developers.google.com/learn/pathways/fugu-apis.
Mulai aja, jadi ambil codelab-nya ada 8 aktivitas disini dan bisa coba-coba nih.
Bisa coba-coba SMS OTP, bisa tab App Mode di PWA, bisa akses hardware seperti Bluetooth, NFC.
Eh nggak tahu apa aja sih yang di codelab ini, gue belum coba yang akses hardware.
Dan coba scroll lagi ke bawah, bisa connect ke Uncommon Higher Input Device.
- HID itu apa sih? Higher Input Device? - HID? Itu yang apa sih? Elektronik analog kan?
- Elektronik yang lawas? - Oh bukan, HID Device itu Human Interface Device.
- Itu apa? - Itu apa sih? Yang kayak...
Nah, dibuka aja, dibuka aja padunya.
- Contohnya apa nih? - Joystick.
- Oh bukan, mouse. - PS2.
- Mouse, mouse, mouse. - Mouse, mouse, mouse, mouse, mouse.
Gamepad, touch screen, terus balik lagi ke Bus.
Terus lanjut lagi bisa baca dari serial port, kalau memang main IoT ya.
Terus kemudian akses USB dan streams.
Streams itu untuk itu ya, apa? Kayak video audio tapi yang versi mentahnya ya buat diolah lagi.
- Yang buat live streaming? - Live streaming bisa, atau editing misalnya, video editing-nya kayak si CapCut tadi itu.
Contohnya ada... Projek-projek Fugu ini menarik ya.
Banyak hal-hal yang lucu-lucu, yang unik-unik juga. Kayak Text Detection API, Image Recognition API itu sudah ada.
- Jadi nggak perlu punya... - Itu Fugu bukan sih? Text Detection?
- WAPI itu WAPI. - WAPI itu Fugu.
- Masih masuk Fugu ya? - Fugu, masih masuk Fugu.
Itu ada link-nya tuh, saya kasih Chrome Status.
So, siap. Shared Screen lagi.
- Jadi Text Detection ini bisa buka yang punya Mas Kinlan. - Paul Kinlan. Kayaknya akar banget nih sama...
Jadi dia bisa baca text yang ada di image itu ya.
Dan ini nggak pakai kayak bikin itu, apa namanya?
- OCR? - Ya, dia OCR tapi bawaan dari browser langsung pakai kapabilitas WAPI.
- Ini bagian dari Shape Detection ya sebetulnya? - Betul, Shape Detection.
Jadi bisa Face Detection, Shape Detection API.
Nah, turun sedikit, ada JavaScript code-nya, cara aksesnya itu bisa as simple as that gitu.
Jadi kayak ngambil datanya dari mana? Dari video, terus kemudian Capture, Image Capture.
Dan kemudian langsung pakai API-nya, Text Detector.
Ini JavaScript banget ya. Maksudnya kita pakai high-level language, yaitu JavaScript, gimana browser-nya kerja ya.
Maksudnya browser nerusin lagi ke sistem, apalah itu sistem yang di device kita kan? OCR.
OCR yang dipakai di device kita. Yang mungkin pakai bahasa C++ atau apalah.
Nah, ini browser itu ada di layer yang ini.
OS-nya ada di layer bawah, baik itu Android, Windows, Mac OS, iOS, dan OS-OS yang lain.
Kita dari API tinggal ngetik JavaScript yang enak dan sintaksnya friendly sama kita.
Cuman PR-nya itu adalah kita butuh tahu ini. Kita butuh tahu ini, kita butuh tahu ini.
Dan terakhir masih ada tuh speech synthesizer. Jadi setelah ditemukan, yang nomor 4 di step 4.
Setelah ditemukan, dibounding boxes-nya baru di speech synthesizer. Jadi sudah dapet.
Di baca?
Iya, sudah dapet. Terus di kasih suaranya gitu.
Jadi dari gambar, dari majalah atau surat kabar, difoto, terus dibacain.
Bayangin aja kalau misalnya teman-teman punya ide-nya begini ya, web-nya buat translate.
Misalnya akses kamera, langsung arahin ke, misalnya lagi ke Jepang, mau makan ikan fugu.
Tapi pengen tahu urusannya apa gitu. Terus bisa diarahkan, terus kemudian dari text detector,
di-connect ke Google Translate API, langsung bisa dibacakan apa sih value dari yang tulisan itu.
Itu contohnya.
Seperti Google Lens lah. Ibaratnya kita mau bikin web yang semacam Google Lensnya bisa.
Oke, ada banyak yang komen ya. Ada yang bilang keren, terima kasih.
Pemuda panca Indra, ada yang... Kriteria cowoknya gimana? Eka itu penyanyi cowok yang sudah menguasai 5 ugu API.
Origin trail.
Aduh, halo. Naika, ada damar nih itu. Excited banget mau hitung-hiturnya, tapi biasanya apply API-nya susah.
Jadi lebih suka pakai wrapper yang udah indones saat browser ada support. Oh, ini apa namanya?
Tapi emang tujuannya gitu juga kan. Yang penting, feature-nya ada dulu di browser.
Cuma prakteknya misalnya kita pakai React, kita pakai Sweat. Pasti ada lah biasanya yang udah bikin.
Kayak kalau contohnya yang udah feature yang udah matang, async clipboard, misalnya async atau web share,
itu pasti udah banyak. Pasti udah ada yang bikin wrapper misalnya buat React atau semacamnya.
Bisa buat juga kan. Bikin wrapper-nya aja buat bantuin teman-teman yang lain.
Ya, lumayan tuh buat opportunity bikin-bikin project lucu-lucu ya. Buat open source juga, ambil belajar.
Ada Sabeh hadir. Terima kasih sudah hadir. Terus ini juga pertanyaannya, apakah Funggu sama dengan PWA?
Ada kayaannya? Soalnya yang saya tarat dia dari tujuan sama-sama melakukasi native.
Sebenarnya benar ada hubungannya memang.
Hubungannya adalah PWA itu kan kita, aplikasi yang kita buat, itu bisa kita gambarkan sebagai PWA.
Sejangan kalau Funggu itu nama salah satu project yang itu bikin R&D lah ya tadi pas off-screen,
Ivan bilang R&D. Research and development bikin API-API-nya, feature-feature-nya yang kira-kira bisa dipakai
di PWA kita, di aplikasi kita.
Kalau dilihat di tracker-nya, ada beberapa yang kata gue dia masuk ke PWA.
Coba buka itu dong, tab web apps itu apa sih? Gue penasaran.
Ya bisa buka dari tab.
Jadi itu cuma untuk PWA yang udah di-install. Jadi kita harus install sebagai PWA.
Cuma kan kalau misalnya kita buka di Chrome biasa nih, kita bisa buka open in new tab.
Nah kalau misalnya sebelumnya di PWA kan nggak bisa tuh, cuma satu window aja. Sekarang bisa.
Oke. Wow, oke, oke, oke.
Terus emang ada beberapa kapabilitas yang terlalu powerful kalau dipakai di sebarang halaman web biasa.
Nah kalau PWA itu kan satu layer lagi. Kayak user dengan sadar meng-install PWA itu.
Nah waktu udah dijalani sebagai PWA, ada kayak feature-feature tambahan.
Itu URL Handler misalnya kita mau buka gambar nih.
Kita ada PWA yang semacam misalnya aplikasi image editor.
Nah itu kita bisa buka file image dengan aplikasi kita.
User kita maksudnya bisa buka file image mereka by default menggunakan aplikasi kita itu.
Nah itu kan make sense-nya kalau udah di-install ya.
Iya.
Ini kan PWA. PWA ini apa ya? Logonya mirip-mirip lagi ya.
Isolated Web App. Apa itu? Ga tau, belum pernah coba.
Isolated Web App. Apa tuh?
Nah boleh tuh, besok-besok bahas biar kita kepaksa kumpul.
Isolated Web App.
Kita aja baru tau nih.
Kita baru tau nih.
Extension of existing work on PWA installation and web packaging that provide stronger protection against server compromise.
Jadi keamanannya lebih tinggi.
Package into web bundles.
Jadi sebenarnya kayak executable tapi web. Ga tau yang gue tangkap gitu.
Masih specification. Masih in development.
Oh inget ga sih yang dulu pernah di CDS ada web bundle pernah dibahas?
Iya tau. Sama portal juga kan kalau ga salah.
Sama apa?
Portal.
Oh iya portal.
Bareng-bareng kan?
Iya web bundle sama portal. Apa itu ada hubungannya ya?
Kayaknya.
Kalau ngeliatin ini sih iya. Soalnya ada web packaging, terus ada web bundles.
Nunggu CDS selanjutnya nih pengen tau.
Jadi kayaknya ya. Kayaknya kita bisa punya executable kayak RxE atau kalau di Mac OS tuh RxPT gitu ya.
Tapi itu sebenarnya browser. Jadi kayak elektron ya.
Pengganti elektron yang lebih ringan ya.
Ya kalau web bundle sih begitulah. Kayak download HTML jaman dulu tetapi yang sudah tinggal bisa di off-line.
Jadi kembali ke pertanyaannya, PWA itu ada tujuan untuk supaya bisa di install.
Jadi PWA itu kan ada beberapa comment ya. Yang pertama ada web manifest, application manifest, yang ada icon, ada judul dari aplikasinya,
ada description, meta data lain. Terus ada service worker-nya harus ada.
Salah satu lagi.
Ada API ya?
Harus cepet.
Berantara kalau fugunya itu adalah API yang bisa membuat aplikasi PWA dengan fungnya yang lebih beragam.
Tambah kaya. Punya feature-feature yang kaya.
Cuma sebenarnya kalau API fugu ini mah bebas diadopsinya ketenggan juga boleh.
Maksudnya kita cuma punya, kita cuma perlu pakai satu atau dua API, nggak masalah kita bisa pakai walaupun aplikasi kita
bukan atau belum berstatus PWA secara lengkap.
Tapi yang non-negotiable, yang harus tetap harus di-serve lewat HTTPS, harus secure, harus ada TLS apa, security-nya.
Jadi walaupun kita misalnya belum punya manifest atau apa tadi semua syarat tadi nggak masalah, tapi ini semua nggak akan jalan kalau nggak di HTTPS.
Tidak di HTTPS, harus security ya syarat dari ininya ya.
Oke.
Nah ini, tab web-tab itu ke-feature keep alive supaya tab-tabnya tetap?
Enggak ya? Bukan ya?
Tau juga, belum pernah coba.
Ya multiple tabs aja sih.
Ya multiple tabs.
Multiple tabs ya.
Jadi di dalam aplikasi PWA, itu kan biasanya nggak ada tab kan.
Nah, ada tab web-n-nya, jadi kalau kita udah install, kita bisa control-t atau command-t.
Nah, terus kalau behavior state sih ya sama aja kayak kalau kita buka di browser Chrome biasa.
Iya.
Jadi emang bisa dipakai buat itu juga.
Belum ada contohnya lagi, belum ada contoh.
Ntar coba.
Ada lah paling coba buka di showcase deh.
Showcase? Oh iya bener juga ya, kita punya showcase ya.
Tab web-tab.
Itu fungsinya.
Ini, tab application mode bukan ya?
Bisa jadi.
Atau di sini ya, harus di-
Bukan, di Slack API.
Nggak ada, belum ada.
Oh belum.
Mungkin itu kan ada.
Tab, ada tab application mode?
Tab application mode.
Ada tuh?
Iya, kalau tab application mode ada.
Tapi harus di-install dulu.
Hmm, bener juga.
Ini status-nya udah sampai mana dia?
Origin trial.
Origin trial.
Behind flex.
Behind flex.
Flag atau origin trial?
Oh, behind flag.
Oh, behind flag.
Salah banget.
Belum, nggak kan belum origin trial.
Iya.
Fugu, kok kaya aritmetik versi browser.
Kenapa, kenapa?
Tadi ada contoh, offline wikipedia reader.
Contoh tadi apa?
PWA yang pakai feature tab application mode.
Itu kan sebenarnya ide-nya simple ya, se-simple.
Ngambil dokumen-dokumen wikipedia.
Mungkin misalnya teman-teman miskin paket data ya.
Miskin pulsa, apa?
Kalau lagi di wifi, entah di kampus atau di mana tempat makan.
Download dulu semua, terus di rumah bisa buka semua.
Dan namanya kita browsing wikipedia ya, kan.
Mungkin kita bakal butuh buka macem-macem link.
Itu kan multiple tabs, helpful banget, membantu banget.
Biasanya kalau teman-teman pengen bisa jadi punya novel online, bisa di download semua.
Novel online.
Siapa tahu, atau comic online.
Nggak, nggak, ini dokumen-dokumen online semua kan.
Kalau ada versi offline-nya, ya udah, kita download dulu aja.
Terus misalkan kita lagi di pesawat atau di mana, kita tinggal...
Itu gunanya web bundle kan sebenarnya.
Sebenarnya.
Ternyata PWA biasa juga yang penting, pertama online dulu.
Kan abis itu udah ke-download semua.
Emang ya?
Tergantung, tergantung.
Ya, kita bikin download.
Tergantung seberapa banyak mau dikirim.
Iya, seberapa banyak.
Kalau dokumentasi kan lumayan banyak kan link-nya kan.
Kalau kita langsung download semua, bahaya juga itu.
Buat kelangsungan usaha kita.
Ini tadi saya mau...
Kayak react native.
Kayak react native, mungkin, iya.
Yang tadi kita sebutkan seperti...
OneGear atau CordowWire.
Yang hybrid, sebenarnya dia adalah teknologi web.
Cuma dibikinin.
Tergantung untuk mengakses API-API yang ada di...
Baik itu di device, mobile, ataupun di desktop.
Kalau react native kan lebih fokusnya ke mobile app, ke Android dan iOS kan.
Walaupun ada react native untuk desktop juga ada.
Cuma saya nggak tahu seberapa banyak API di desktop yang...
Disediakan oleh react native desktop.
Karena yang paling terkenal, ya, untuk bikin aplikasi mobile.
Nah, ini mungkin dari Damar.
Ini Damar mendanggapi yang...
Downloadan.
Oh, downloadan.
Kalau ini content...
Itu pakai background sync.
Jadi background sync itu...
Kalau di mobile...
Udah install PWA-nya.
Terus kemudian pagi-pagi dia...
Misalnya situs berita ya.
Dia bisa tetap jalan di off-line...
Sorry, di background secara periodik untuk ngambil konten.
Ternyata kalau begitu udah dibuka...
Waktu user yang ngebuka aplikasinya...
Content kita sudah yang terbaru.
Dan bisa, karena kita tahu udah ada konten terbaru...
Kita bisa gini notifikasi juga.
Ada berita baru nih, silahkan baca contohnya.
Atau yang paling simple sih, sebenarnya pakai service worker nih.
Kita pakai yang strategi SWR kan.
Stay Well, Revalidate.
Jadi pertama di-serve aja dulu.
Udah punya semua aset yang lama.
Sambil nge-check lagi.
Kalau ternyata ada yang baru...
Ya udah, tinggal kirim mesej kan.
Biar user me-reload.
Itu untuk casing strategi.
Sedangkan yang saya ceritain tadi tuh kontennya yang update.
Fetching.
Ya, fetching konten baru.
Kayak kalau casing strategi kan bisa jadi untuk...
Lebih banyak digunakan untuk aset.
Kalau CSS-nya yang baru...
Jadi makanya should please reload kan contohnya.
Oke.
Nah kalau API-API yang teman-teman ikutin, apa aja sih?
Ada yang ternyata nggak nunggun banget nih.
Wah ini kayaknya bicar nih.
Webshare.
Webshare lah yang paling...
Itu API sejuta umat share sama clickboard.
Share.
Ini belum kita bahas kan, webshare kan?
Iya.
Webshare API ya?
Ini kayaknya versinya ada macem-macem yang di fugu tracker ya.
Iya, webshare ini adalah...
Mungkin ada yang bisa menjelaskan?
Ya buat share.
Ya tapi kayak widget.
Tapi tanpa plugin.
Kalau dulu kita harus install plugin ad-query atau react atau apa.
Biasanya kan kalau kita...
Kalau kita nge-share itu...
Coba tuh buka artikelnya aja.
Oh iya betul.
Webshare.
Yang paling enaknya karena dia native.
Webshare itu bisa kita share ke aplikasi lain yang ada di mobile.
Ini yang kita install.
Ini kapabilitasnya si OS yang dipakai.
Itu pure semua UI-nya.
Bukan UI bikinannya query lagi.
Tapi beneran punya sistem kita sendiri.
Misalnya kita pakai Android.
Yaudah itu fiturnya aplikasi-aplikasi yang sering kita pakai.
Akan bisa langsung kirim ke printer.
Bisa ke telegram, ke mana aja.
Wow, seru sekali.
Ini cara pakainya?
Tinggal begitu doang.
Navigator.share, beres.
Ada title, ada address, ada URL, udah gitu ya.
Tapi jangan lupa itu cek dulu.
Jika nggak ada, kita lazy load.
Ya itu library yang sebelumnya.
Library pihak ketiga atau bikin sendiri ya terserah.
Ingat, webshare di desktop tidak ada.
Iya.
Anya bisa di mobile.
Di mobile.
Tapi tadi ada yang buat.
Udah ada yang buat desktop?
Belum.
Belum.
Bisa di webshare di desktop.
Baru sampai?
Baru sampai, udah ship.
Tapi di mana?
Apa itu janyan Chromebooks?
Mac OS.
Menarik.
Ayo, webshare di desktop.
Gue nggak tahu.
Tapi navigator.share nggak bisa di desktop.
Coba aja.
Coba buka devtools.
Navigator.share.
Belum, nggak ada.
Share in navigator.
Bols, belum bisa.
Navigator.share.
Ada window ini.
Oh, bisa.
Bisa.
Itu apa sih?
Itu browser apa?
Windows.
Oh, oke juga ya.
Coba copy paste.
Coba copy paste tadi.
Navigator.share muncul.
Senangnya tuh udah muncul.
Harapan palsu.
Mac OS belum bisa.
Muncul, muncul.
Tapi kok nggak muncul?
Kan promised, await.
Screennya beda.
Share yang full.
Share screen.
Share yang ini.
Kita...
Nih, cuma ya.
Lagi ya.
Tuh, klekan nggak?
Oh, ini pakenya Windows.
Windows.
Oh.
OS belum ada.
Coba liat tuh.
Eh, tapi disitunya ada.
Linux.
Gak ada tuh.
Mac OS ada nih.
Belum bisa ini.
Lo.
Lo.
Lo.
Oh.
Silahkan coba di device masing-masing ya.
Ada yang punya Linux.
Mungkin bisa coba, baru coba.
Kalo dilaporkan.
Kita kurang update nih.
Nah, ini cocoknya sambil ngeliat
"How Fugu is my browser"
tuh. Dibuka tuh, cocok tuh.
Sambil ngecek browser kita.
Seberapa Fugunya.
Apa ini?
Seberapa Fugu, browser kita gitu ya?
Seberapa bahayanya, lo.
Bukan ya. Seberapa...
70%.
70% Fugu.
Fugu.
Windows ND10.
Wah, ini udah ada nih.
Aselerometer ada. Itu home screen ada.
Hah? Gila.
Baru tau di laptop ada aselerometer.
Itu kan yang buat apa?
Sensor gerakan kan.
Biasanya di gaming gitu.
Iya.
Itu home screen jelas.
Wah, lengkap juga ini.
Desktopnya.
Nah, ini gak ada.
Ambient gak ada ambient.
Ambient light mendeteksi
apa, diselitar kita ya. Terang atau enggak.
Ya, kontak ticker juga kayaknya
agak susah ya. Soalnya, belum ada.
Di desktop itu
belum ada, kecuali di Mac OS ya.
Ada aplikasi kontek
yang netikoan si
OS-nya.
Dan emang keliatannya belum terlalu
itu sih
masih agak polemik
soal
kemampuan mengakses kontek list itu kan
sensitif banget ya.
Wah, bahaya nih. Pinjol-pinjol bisa ini nih.
Udah coba.
Pinjol.
Di Mac OS gak bisa.
Webshare.
Gak bisa ya?
Gak bisa, gak bisa.
Kurang canggih.
Kurang canggih.
Cuma intinya kalau pengen liat
kemampuan browser kita
buat support Fugu API
ini UI-nya user-friendly banget ya.
Ini.
Sama satu lagi tadi
ada
coba dari Discover itu yang
link Discover
yang barusan
yang di sebelah tab ini.
Di sebelah tab ini ada Discover.
Ini kan
turun. Ini how.
Jadi topiknya how Fugu is my browser
yang link tadi.
Sama how Fugu is the site.
Coba how Fugu is
the web. How Fugu is my web gitu.
This one.
Jadi ada click
how Fugu is the web itu.
Itu ada apa namanya?
Ada extension.
Chrome extension ya.
Jadi kalau misalnya di install kita bisa tahu
situasi yang kita kunjungi itu gunakan
Fugu API yang aja.
Oke, oke, oke.
Contohin tadi Excalibro
itu 9
Fugu API.
Di tab yang sebelumnya.
Ini ada di sini.
Oh iya.
Yang bikin juga
Mas ini kok.
Mas Thomas.
Mas Thomas ngeliat,
ngeliat, ngeliat, ajar gitu loh.
Hei.
Hei.
Mas Thomas ngomongin
apa nih orang-orang.
Dia punya
pake Radar API kali.
Kalau ada yang ngomongin Fugu, dia ikutan.
Fugu. Langsung ya.
Kayak itu, mas siapa yang Xstate itu?
Kalau nyebut state machine
dia mojol.
Yang bikin Xstate.
Oh iya, kayak ini juga
kayak Mas Danang. Kalau nyebut GDI
dia muncul. Oh, dia muncul.
Sudahlah, yang ini bentar lagi dia muncul.
Ini baru 8 loh.
3, 4, 5, 6, 7, 8.
Oh, belum update nih berarti ya.
Web share. Belum update, terakhir 9 kan?
Iya, terakhir 9.
Pasing clipboard. Ya, kita bisa copy paste juga.
File handling,
system, web share target,
web share target file.
Jadi, web share target file ini,
file excalidraw-nya,
extension excalidraw
itu bisa di share dulu.
Diklaratif link capturing-nya apa?
Gak tau ya.
Link capturing.
Itu kayak
kayaknya itu ya, open in.
Oh, open in excalidraw gitu ya.
Misalnya kita ada file excalidraw.
Karena open with ya.
Open with excalidraw.
Terus baliknya ya, 4.
Oke, oke.
Inilah gunanya ngobrolin web.
Gua gak tau lagi
berapa banyak web API.
Excalidraw ini 9 ya.
Ada di sini padahal ya.
Eh, ini kan sudah 5.
Ada pendelesan yang gak ada.
Tapi
kalau misalnya insta extension-nya
itu ada ininya,
ada detail-detail setiap.
Link ke dokumentasinya ya?
Iya, detail ke setiap
API-nya.
Web share.
Cache storage.
Cache storage siap?
Caching ya?
Caching service worker gak?
Kayaknya sama dengan storage.
Cache storage API mungkin
yang kayak local storage.
Caching service worker.
Caching service worker beda lagi ya.
Kalaman ini.
Berbahaya.
Di macOS
bisa. Tapi
macOS sama Safari tampilannya beda.
Kayaknya gak nanti macOS.
Oh, jadi ini.
Jadi mereka implementasi diri.
Tadi pake macOS.
Pada gue udah coba Chrome Dev
yang Chrome Dev yang paling baru ya.
Chrome Dev sama macOS.
MacOS belum bisa sih ini.
Ini API sejuta umat
soalnya kayaknya setiap bikin website
hampir pasti ada feature share.
Cuma ini lumayan
buat performance juga sih.
Jadi kan nature-nya
atau karakter-nya ecosystem web
itu kan progressive
enhancement banget kan.
Jadi kalau emang feature-nya udah ada
built-in kayak C-share ini, ya udah
tinggal pake segampang itu. Gak usah ngapa-ngapain
lagi ibaratnya kita. Gak usah
nginstall. Maksudnya dari developer
gak usah nginstall library
third party atau bikin.
Dari sisi user gak harus
ngedownload
tambahan JavaScript
buat sharing.
Tapi selama misalnya
di macOS, Chrome, atau di
mana pun itu belum ada, ya udah apa boleh
buat harus ngedownload
library tambahan itu.
Tapi pelan-pelan kan
lama-lama ini
makin banyak di-support,
makin berkurang juga beban yang
harus di-download oleh si user
performance-nya. Lumayan tuh.
Kalau kita pake budget performance kan
ada jatah extra, kita bisa
nambah feature lain.
Makanya kalau misalnya
jangan ngebundle
misalnya contohnya
sharing itu ya, webshare itu,
jangan ngebundle share library
ke main bundle-nya
kita. Karena
usahakan di lazy load
atau di, apa, kalau di React
itu bisa di...
dynamic import.
Nah, itulah bahasanya.
Itu di native, maksudnya
itu di JavaScript browser juga
udah bisa sekarang contohnya.
Dynamic import.
Jadi, usahakan
sebanyak kan kayak, kalau pakai-pake
fitur-fitur tertentu yang sudah tahu ada
API-nya, tapi belum di-support,
jangan dibundle ke main bundle.
Supaya bisa dikecilin.
Oke.
Nah, ini tadi kita udah bahas ya
di awal ya. Ada yang nanya juga tadi
di depan.
Fugu itu berbeda dengan PWA
walaupun, ya, saling
berkaitan, ya. Ada ilisan, ya.
Nanti bisa di-replay aja
dari video kita. Itu kita bahas lumayan
dalam tadi. Ada dari
yang JS. Kemudian ada ini.
Si paling bajar perak.
Halo, halo.
Namanya oke-oke, ya. Ini tadi
yang apa? Seria bajar hitam, ya. Seria bajar hitam, tapi
udah jadi perak, ya.
Si paling bajar.
Mantap.
Oke. Ada lagi yang mau disampaikan?
Kita sudah satu game lewat
15 menit. Ya, 13 menit.
Baca itu dong. Ada-ada-ada
di...
Bit.ly apa? Sorry.
Di ini. Bit.ly/Gobernite
Ya, ada ya satu
pertanyaan atau apa gitu.
Oke. Boleh-boleh. Kita
cari skren dulu. Yang mana?
Yang gampang aja.
Yang jelasan. Teknologi Edge.
Bukan Microsoft Edge, kan. Maksudnya ya.
Bukan. Edge
Ser... Apa? Edge Computing?
Wah, ini mah satu episode sendiri.
Iya. Tak pernah bahas
sedikit-sedikit, kan ya. Edge Computing.
Pernah waktu bahas
CDN? Iya, pernah.
Ya, kurang lebih ya kayak CDN.
Tapi server.
Iya.
Ini juga kita udah bahas. Yang keamanannya
bukannya udah ya kemarin? Coba
udah. Udah-udah. Di episode kemarin.
Ya, episode kemarin.
Maklum Asktetikur.
Ya, ini belum. Ini belum.
Di goleng lagi ya.
Ya, bisa goleng. Kita cari
jadi ego.
Kalau testing ya,
urutannya dari awal ya.
Nah, kita pernah bahas
di episode
testing ya dulu.
Iya, pernah bahas testing.
Itu. WebAssembly udah pernah kan ya?
WebAssembly belum.
Pernah bahas sekilas
doang. Pernah. Maksudnya contohnya
Figma pakai Wasm.
Oke, oke.
Di episode awal.
Udah, yang lainnya belum ada yang baru lagi.
Nah, buat teman-teman yang
nonton acara ini,
nonton acara ini, tapi
ketinggalan
live-nya, ya.
Kalau ada pertanyaan, boleh langsung ke
bit.ly/mobrolinweb.
Nanti kita akan
bahas-bahasa lagi.
Dan, apa nih?
Kalau web, semakin hari, semakin
sedikit kirim badannya. Kalau game
deh, malah jadi 500GB.
Game berarti
ACEP kali ya. ACEP.
Ada sprite, audio,
video.
Ada minuman bersoda lainnya.
Ya, cuma sprite.
Sprite.
Ya.
Ya, udah. Kalau gitu,
kalau nggak ada yang mau
disampaikan nanti, kita tutup dulu
untuk
episode berapa nih?
23.
23.
23, lumayan ya.
23 itu sebenarnya 24 ya,
soalnya kita mulai dari ngomong.
Berarti satu episode lagi kita,
episode minggu depan, kita
jadi episode 25 dong.
Ada apa ya?
Kita tungguin aja.
Kita kurang lebih
sudah 25 minggu ya.
Sudah 25 minggu.
Udah setengah jalan.
Udah setengah tahun ya.
Udah 26. Setengah tahun itu 26.
Oh, 26.
Setengah tahun itu tumpungan.
Kita makan ikan fugu.
Makan ikan fugu.
Yang versi makasar aja.
Nah, berarti kita nunggu diundang ke makasar aja.
Oh iya, siap-siap.
Kodeh nih, kodeh. Jadi jemaah kasar.
Oke.
Walaupun kita sudah hampir 25
episode, ya kita tetap menunggu secara
kritik dan saran juga
topik-topik, ide topik,
buat diskusi juga.
Mengendahan
episode-episode kita
bermankan buat teman-teman
buat menambah pengetahuan dan juga buat membantu
kepercayaan sehari-harinya.
Untuk malam ini kita panggil dulu
buat yang mau follow-follow, saya di Twitter
@ezafami2, ada
Eka, Eka VGI,
dan Ivan Trich.com
Kita ketemu
lagi di minggu depan,
caloh. Sampai
bertemu, selamat jalan.
Bukan, bentar kan?
Kita baru ngomongin GDI.
Kalau ngomongin yang eksperisi itu,
dateng dia. Pasti ada aja.
Gak di Twitter, di YouTube,
gimana lagi.
Panas gue ngomongin.
Itu udah mau selesai.
Kita udah nge-closing nih, kan tadi
padahal itu gajar banget tuh
nge-closingnya, ulang lagi.
Selamat malam, selamat istirahat, kita ketemu lagi
minggu depan, terima kasih, bye.
Bye.
Terima kasih telah menonton.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
22 Agu 2023
Ngobrolin WASM
WebAssembly dibahas dengan mundur dulu ke kata assembly itu sendiri — istilah yang bisa terasa asing bagi siapa pun yang...
17 Nov 2022
Ngobrolin CSS
Episode ini berbenang merah CSS, dari sumber belajar sampai fitur yang baru saja tersedia. Dibuka dengan menjawab pertan...
15 Nov 2023
Ngobrolin RedwoodJS
Redwood dibahas sebagai contoh framework yang berani memilih ceruk yang sangat sempit. Kalau kebanyakan perkakas berusah...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .