Ngobrolin Proyek Fugu - Ngobrolin WEB ep23

1:48Bisa, apa, yang kalau weight block gitu ya.

1:53GPS, sensor punya ya, apa pun sensor device.

1:59Betul, USB, terus bisa ngeprint dll.

2:03Nah, ternyata dengan salah satunya dengan inisiasi project Fugu ini,

2:09web itu bisa loh kesana gitu.

2:12Nah, apa aja dan gimana kita akan bahas malam hari ini.

2:16Dan salah satunya apa, inisiasi yang dilakukan oleh Google

2:21untuk membuat web ini lebih, apa ya, lebih...

2:24Lebih terasa natif.

2:27Mempunyai kapabilitas mendekati atau bahkan menyamai natif.

2:32Menyamai natif. Nah, itu...

2:35Namun bukan menyamai natif mobile, maksudnya ya.

2:39Artinya natif ke, bukan mobile app ya.

2:43Kemampuannya bisa, kan gini, web itu kan satu layer di atas operating system kan.

2:51Satu layer di atas operating system.

2:53Sedangkan kalau mobile app itu, dia nempelnya di operating systemnya.

2:57Sedangkan web itu masih ada browser,

3:01lalu web page-nya kan.

3:04Nah, artinya dengan Fugu ini, kita itu bisa mengakses lebih banyak kapabilitas

3:10yang dimiliki oleh mobile device ataupun desktop device.

3:14Itu sih maksudnya, jadi lebih mendekatkan ke operating system.

3:19Mengakses low level features.

3:23Kalau contoh konkretnya, ya mungkin mengakses kamera, ya kan.

3:27Kamera kan, apa, kamera itu ya di hape mungkin ada kamera, di macOS ada kamera,

3:34gimana nyalain kamera videonya, itu kan harus bisa mengakses ke layer

3:39yang lebih bawah lagi, atau sensor, atau apa-apa.

3:44- Banyak, mulai dari kamera, NFC, Bluetooth. - NFC kan termasuk sensornya.

3:51Maksudnya Bluetooth. Input-output.

3:54Nah, terus bahkan hal sesimpel kayak share.

3:58Kalau kita mau nge-share ya kan, itu tampilannya kan di Android punya sendiri,

4:03di macOS ada sendiri, dan sebagainya.

4:08Ini mungkin kayak mengisi gap yang dulu diisi oleh phone gap.

4:19Kordova, phone gap, itu mereka bisa mengakses beberapa API native kan.

4:26- Kamera, GPS. - Betul, betul.

4:30- Dan itu layernya dibikin sama mereka sendiri. - Iya, sama platform yang non-wet kan.

4:35Sama parti, sama pihak perusahaan, perusahaan teknologi.

4:43Intinya bukan non-browser ya, jadi mereka bikin sendiri, mereka buka sendiri API-nya.

4:48- Betul, betul, betul. - Dan abis itu dibundle menjadi sebuah aplikasi,

4:53baik itu aplika ataupun iOS ya.

4:56Padahal sebenarnya di belakang layar adalah dia HTML, CSS, JavaScript,

5:01ditambah HTML, CSS, JavaScript-nya bisa mengakses API mobile, device kan.

5:08- Betul, betul, betul. Nah, ada banyak nih Project Fugu ini.

5:15- Project Fugu, oke. Kita mulai... - Wow, bahkan tulis di kolom komentar.

5:23- Iya, kalau untuk yang live, khusus teman-teman yang nonton live itu punya privilege untuk langsung nanya.

5:29Tapi kalau teman-teman yang nontonnya rekaman nanti atau besok atau kapanpun,

5:35ya bisa tanyanya ke bit.ly/ngoblinweb ya.

5:39Oke, kita bahas dulu tentang satu artikel pertama yaitu Project Fugu itu apa.

5:44Tadi kita udah sempat bahas cukup banyak juga ya tentang...

5:47- Jadi Project Fugu itu kan sebetulnya nickname ya, kayak cuma nama biar catchy aja.

5:53Nama aslinya itu kan, web capabilities project, nama resminya.

5:59Yang diperkenalkan di Google.

6:01- Tapi pada perkembangannya, pihak yang terlibat kan bukan cuma Google aja,

6:08tapi ya semua yang berkaitan sama ekosistem pengguna Chromium.

6:14Jadi itu tuh, ada tuh, Microsoft, Intel.

6:17Kalau nggak salah Samsung juga terlibat sama ada lagi apa sih itu yang konsultansi.

6:25Punya semua yang berkaitan dengan ekosistem Chromium.

6:31- Oke. Intel kenapa involved ya? Saya penasaran ya.

6:37- Dia kan device itunya dipakai di HP-HP Android kali ya.

6:42- Prosesornya ya.

6:45- Intel kan nggak cuma bikin prosesor, banyak silikon-silikon lainnya.

6:50- Grafik atau semacamnya.

6:52- Oh iya, GPU-nya juga ya.

6:55- Perang, perang, perang.

6:57Dan ini sebenarnya adalah seperti web API

7:05yang belum dipulis. Benar nggak sih? Kayak eksperimental gitu.

7:09Nanti ketika udah nature, dalam tanda kutip, "Wah ini udah bisa nih diadopsi untuk browser yang lain,

7:15baru di-suggest untuk menjadi web API."

7:20Sebetulnya statusnya, prosesnya, nanti kan ada di link lainnya.

7:26Ya, kalau perkara eksperimental atau nggak, Fugu pun, API Fugu,

7:31ada beberapa step atau tahap yang dilalui dari yang masih paling eksperimental

7:38sampai yang udah mature, yang ibaratnya siap diadopsi vendor lain

7:45kalau memang vendor lain mau. Jadi macam-macam tahapannya.

7:50- Tujulannya ini ya, salah satunya ya.

7:54Jadi aplikasi web itu bisa melakukan apapun yang dilakukan oleh native app gitu ya, pengennya.

8:01- Tapi jangan lupa itu bawahnya core tenets of the web tetap mempertimbangkan security,

8:07keamanan, kebenaran, dan privacy.

8:11- Nah, ini berkaitan sama kenapa nickname-nya Fugu. Jadi ini nyambungnya ke situ sih ya.

8:16- Kenapa Fugu? - Yang jawab yang udah nyoba makan Fugu.

8:21- Fugu itu kalau ngeliat ini ya, Fugu itu ikan, ikan buntel.

8:29- Ya, ikan buntel bener. Powerfish. - Ikan buntel tapi yang dari Jepang.

8:35Kalau temen-temen nonton Finding Nemo itu ada satu ikan yang seperti normal,

8:43tapi dia stres, dia di bulet gitu.

8:46- Itu tadi yang image yang foto gue kirim dia di WhatsApp itu.

8:53- Oh ya, lupa ya. Nggak diambil ya.

8:56- Itu kan ikan buntel Jepang ya, kalau disiapkan, itu beracun, racunnya mematikan

9:04sebagian punya banyak bagian yang beracun, tapi kalau di persiapannya bener,

9:10itu konon katanya enak banget. Nah, nggak tahu, yang pernah makan disini cuma fun.

9:15- Bisa aja, bisa aja. Jadi kayak, apa ya rasanya, dia kayak daging ikan,

9:23lebih kenyal daripada daging ikan biasa. - Salmon.

9:26- Nggak, karena dia dagingnya putih, kalau salmon kan dagingnya orange tuh.

9:31Kalau bisa dibilang nggak sekenyal cumi-cumi, jadi putih kayak cumi-cumi,

9:40tapi tidak sekenyal cumi-cumi. Kan kalau cumi-cumi alot ya,

9:44anggap aja cumi-cumi sangat muda, yang dikunyah itu masih ada kekenyalan dikit,

9:50tapi bisa enak, tetapi rasanya relatif kehambar, kayak nggak ada rasa.

9:58Kalau mau makannya pakai saus. - Oke, nggak se-hype itu ya.

10:03- Iya, cuma teksturnya aja. Cuma nggak ada bau amisnya.

10:07- Oh, oke. Cuma mungkin dalam bahasa Indonesia kali ya, jadi B aja,

10:13mungkin bagi perspektif orang Jepang, itu mungkin enak banget.

10:16Apa, mitosnya itu konon enak banget. - Atau jangan-jangan kalau dimasak

10:21ala Indonesia mungkin lebih enak dengan bumbu-bumbu sepah-sepah Indonesia.

10:24- Iya, itu mah ikan yang biasa aja, kalau dimasak baladu,

10:30ikan kris sama kering tempe itu nggak usah ikan eksotis.

10:34Cuma intinya itu adalah ikan yang berbahaya. Bahaya kalau menyiapkannya salah,

10:42tapi kalau misalnya disiapkan dengan hati-hati, itu bisa jadi enak banget menurut orang Jepang.

10:48Jadi nyambungnya sama API. Ini kan powerful banget,

10:53bisa membuka, bisa unlock kemampuan yang wow banget lah, wow banget,

10:57tapi disiapkannya harus dengan hati-hati, karena bisa kalau-kalau sembarangan.

11:03- Security, trust, and privacy. - Iya, contoh-contoh sederhananya

11:08kalau misalkan apa, mungkin sekarang udah masuk ke web ya, apa file system.

11:13Kita bisa membaca dan menulis file yang ada di PC atau di device kita.

11:21Nah, kalau itu security-nya tidak dijaga, ya bisa bahaya.

11:24Dia bisa buka semua folder kita, sebuah aplikasi web yang kita buka, misalkan

11:28ulului.com gitu kan, terus kita hapus. - Dikopi dulu semua, diambil, terus dihapus.

11:34- RMS gitu kan, ya udah, nangis lah. - RMRF.

11:38- Mending kalau cuma dihapus, kalau di-lock pakai, bukan, di-lock pakai apa itu,

11:44di-encrypt, terus di buat apa, kalau mau buka, bayar pakai bitcoin dulu contohnya.

11:51- Oh iya, atau ya, kita bisa begini, dan miner, juga bisa melakukan apa lah ya,

11:57kalau udah, kita bisa taruh file di sebuah device orang gitu.

12:02Nah, itu kan sangat berbahaya, makanya ini si Fugue ini juga dibikin juga

12:09dengan sangat hati-hati, jangan sampai merusak privacy, trust, dan security.

12:14Ya, karena entry level web itu sangat cep, pertama untuk kemudahan di akses orang,

12:22tinggal mengunjungi situs atau dapat link dari mana, tinggal buka, itu langsung bisa

12:27mengakses device. Sedangkan kalau aplikasi, ada proses step-nya kan, dia harus download,

12:34habis download, terus kemudian install, berarti yang dia lakukan itu dengan secara sengaja.

12:40- Ya, udah gitu kan ada ininya, ada, ini boleh nggak, akses kontak, boleh nggak,

12:45boleh nggak, ya walaupun kita accept-accept aja ya.

12:48- Ya, anggap aja, anggap aja bukan mobile app ya, anggap aja kayak installable

12:54atau executable yang ada di operating system, kita download, terus kita klik 2x dulu kan,

13:02kita klik 2x, terus muncul install, itu secara sadar. Sedangkan kalau di web,

13:08kita tinggal buka web, halomannya, dan semua kapabilitas itu bisa langsung diakses,

13:15bisa diakses oleh situs dengan seijin kita tentunya. Nah, makanya perlu dibuat hati-hati itu,

13:22karena entry level web itu lebih mudah ke banyak orang ketimbang aplikasi.

13:29- Ya, tinggal share link di WhatsApp atau di grup-grup, begitu diklik, langsung masuk ke

13:34web yang berbahaya gitu kan, itu gampang sekali. - Seandainya tidak, makanya perlu dibuat

13:40hati-hati kan, security, trust, dan privacy. - Ya, ngomongin Fugu, kalau Irwan pernah nyobain

13:47Fugu di Jepang, di Indonesia juga ada yang mirip. - Oh, ya di Makassar ya.

13:53- Ya, dari jauhnya, ikan buntel juga. - Nah, itu bukan ikan buntel sebenarnya,

13:59jadi kulitnya itu keras banget. Kalo saya bilang waktu makan ini ini ikan hati peluru

14:06di tembak-tembus. - Oh, jadi peracun juga nggak?

14:10Maksud saya ada bagian yang peracun juga nggak? - Nggak ada. Kulitnya itu tebal banget,

14:15keras gitu. Jadi makannya pun hanya bisa diginiin, karena nggak bisa difilih,

14:21nggak bisa diapain, ya cuma dibongkar kerasnya, terus diambil, terus digoreng, udah.

14:25Tapi enak sekali. Berbeda dengan ikan yang tadi Irwan makan biasa aja.

14:31- Itu ada fotonya kalau mau dibuka. - Oke, kita lihat ya. Jadi sebenarnya

14:41si proyek Fugu ini adalah perpanjangan tangan dari web capabilities yang inisiasi oleh

14:49Microsoft dan Intel. Pujudannya adalah mendekatkan kemampuan web agar bisa mendekati

14:56native lah. Kita nggak bisa bilang kalau bakal menyayangi, tapi mungkin mendekati setidaknya

15:00kita udah bisa bikin aplikasi-aplikasi trend dengan API-API yang jauh lebih trend

15:07daripada beberapa tahun yang lalu. - Dan ini juga semacam menandai itu sih

15:12pergeseran. Jadi kalau dulu banget kan, di awalnya 90-an tuh web itu dibikin untuk

15:19dokumen ya, untuk dokumen yang saling terhubung. Nama dokumen ya bayangan kita kan,

15:25text, image, ya udah itu aja. Cuma kalau lamaan, ya link untuk saling menghubungkan

15:34dokumen atau image itu. Kan itu limited banget ya. Kita bayanginnya mungkin dokumen itu

15:39kayak Microsoft Word lah ya, yang familiar semua-semua orang. Microsoft Word dokumen

15:44atau semacamnya. Nah lama-lama kan di tahun mulai, ya satu dekade terakhir ini

15:52bergeser banget, kebutuhannya mulai geser, penggunaannya bergeser, web itu udah mulai

15:59apa ya, Epsi kayak aplikasi. Nah untuk salah satu penanda pergeseran itu ya

16:06ada project web capability alias project hugu ini. - Jadi sekarang itu web itu

16:15biasanya punya dua fungsi ya. Website atau halaman web yang isinya informasi

16:24hanya dalam bentuk text, image, link jadi, atau dokumen ya, dan ada aplikasi web.

16:32Aplikasi web ini ya itu yang teman-teman akses setahari-hari. Ada Gmail misalkan,

16:38ada Spotify memutar lagu, memutar video, YouTube, gitu ya. Itu kan semua aplikasi web,

16:46bukan lagi website gitu. Mungkin definisinya mungkin agak kemur juga, tapi kan

16:52kalau website itu asumsinya adalah ya sederhana lah, lepas lah gitu ya. Mungkin ada form,

16:57ada informasi. - Dokumen itu tadi. - Dokumen tadi kan. - Biasanya website itu

17:02blog atau company profile kalau bahasa sininya. - Company profile, marketing page lah ya.

17:08- Marketing page. - Marketing atau landing. - Yes. Nah ketika kita misalkan

17:14katakan lah blog kan, depannya kan artikel kan. Cuman ada title, ada sub title,

17:19ada date, ada informasi-informasi lain, ada body, ada di dalamnya macem-macem,

17:24ada paragraf, ada misalkan ada image juga, ada video, ada audio dan lain-lain.

17:30Pada saat kita mau bikin itu dokumen, kita bisa masuk ke admin. Nah adminnya itu

17:35ya bisa dibilang sebagai aplikasi web. Bisa jadi ya kayak gitu lah kira-kira.

17:40Mungkin sedikit apa ilustrasi itu. - Ilustrasi web itu, ilustrasinya

17:44lebih gampang. CMS itu aplikasi web. Forum itu aplikasi web. Terus kemudian

17:51e-learning itu aplikasi web, e-commerce itu aplikasi web. - Chat app juga kalau ada

17:57yang bisa diakses dari web gitu ya. Nah itu juga aplikasi. - Aplikasi web.

18:01- Yes. Nah apa aja sih produk Fugu? Nah di sini ada seluruh website dari Chrome

18:10yang baru ya kayaknya, lumayan baru. - Baru banget, baru banget ini baru diumumin.

18:15- Baru diumumkan ya. Jadi namanya Fugu Showcase. Nah Fugu Showcase ini adalah daftar

18:22aplikasi atau tools-tools yang menggunakan Fugu sebagai API-nya. - API-nya Project Fugu.

18:29- Iya. - Jadi kenapa Showcase ini? Jadi beberapa API yang latest itu,

18:36itu origin trial ya. Jadi hanya bisa digunakan kalau diijinkan. Gimana ya maksudnya?

18:45Bisa digunakan. - Harus apply. Harus apply spesifikasi untuk menggunakan API tersebut.

18:51- Betul. Nah jadi beberapa situs ini makanya ada beberapa API hanya bisa digunakan

18:57oleh situs-situs tertentu saja. - Tapi ya, maksudnya itu terbuka untuk umum.

19:03Jadi kalau teman-teman emang punya website yang atau web app yang kegunaannya,

19:08wah cocok nih buat kebutuhanku. Itu bisa apply, kalau udah di-proof, ya udah bisa langsung pake.

19:17- Dan itu ada filter by category ya. Misalkan teman-teman yang kira apa ya? Contact Picker.

19:22Oh, ternyata sekarang bisa Contact Picker ya, walaupun tidak di semua OS kan.

19:26- Tinder. Ternyata ada web app-nya ya. - Tinder itu bukan hanya aplikasi, ada app-nya.

19:35- Coba Mas Richard coba daftar, Gih. Kita sama-sama coba Mas Richard.

19:40- Catfishing. Bukan catfishing, tapi pufferfishing. Cuma ini showcase ini berguna banget ya buat

19:50idir mungkin kita cari inspirasi. Kalau kita cuma lihat daftar API kan, yang ini apa sih?

19:56- Ini buat apa sih gunanya gimana? - Namanya debut atau code labs atau tutorial.

20:01Pastikan kasusnya yang simple, MVP yang mendemonstrasikan fokus ke cara kerjanya.

20:09Cuma kadang kan nggak menarik atau mungkin nggak relevan. Nah, kalau kita pengen contoh yang real world,

20:14ya udah kita cari di showcase itu. Mungkin bisa juga dipake buat ngebujuk tim lead kita misalnya

20:23atau stakeholder lainnya. Ini loh, bisa bikin kayak gini loh.

20:26- Bisa bikin ini loh, video editor loh. Ada yang udah pakai Captut, tulisannya Captut.

20:34- Captcut. - Captcut.

20:38- Ini saya pakai, tapi yang aplikasinya ya, bukan yang web-nya.

20:42Ternyata ini dah udah si web-nya. Ini buatan dari Biden, TikTok kalau nggak salah.

20:50Jadi kita bisa edit video. - Dan gratis ya, nice.

20:56- Ada satu video yang paling saya suka, yang buat saya menganggap ini adalah auto caption.

21:02Jadi kita bisa generate subtitle, ada bahasa Indonesia-nya juga.

21:07- Tapi bagus. - Beneran, jadi misalkan video,

21:12kemarin kan saya coba kan video, ngomongnya itu nyampur. Misalkan project.js masuk ke program ini,

21:19masuk ke folder ini, DPM install, terus ini adalah project.js. Itu terbaca, bener-bener tepat ya.

21:26Subtitlenya, itu keren banget. - Wow, oke.

21:31- Itu keren banget. Dan ternyata ini di web-nya juga dulu kap, gitu ya.

21:36Dan ada apa? Kayak sticker yang lagi trending, gitu ya.

21:41Kalau teman-teman yang selalu buka tiktok atau saya selalu dianggapin.

21:45Dan API apa aja yang dipakai, di sini ada tulisan, gitu. Ada clipboard, ada case storage,

21:52ada device memory, dan system access. - Coba tau, itu clipboard, bisa nggak access clipboard aja,

21:57itu artinya web bisa nggak access clipboard yang kita loh.

22:01- Clipboard yang DOS. - Dari sistem device kita masing-masing.

22:06- Betul. Jadi, bisa kita copy dari misalnya dari, anggap aja bukan dari web ya,

22:16bukan dari sesama browser. Jadi dari aplikasi lain kita copy. - Kita nge-tip dinopet atau aplikasi lain.

22:23- Terus kita paste-nya di web. Nah, itulah maksudnya asing.

22:28- Iya. Yang paling berasa itu kalau teman-teman ikutin, misalkan ada yang pakai Figma nih.

22:34Jaman dulu, mungkin sebelum dia menggunakan asing clipboard, itu kalau kita mau copy paste image,

22:43nggak bisa. Kalau sekarang, misalkan dari explorer atau dari finder gitu, kita copy image,

22:50control-c gitu image-nya, terus kita masuk ke Figma, kita control-paste. - Kita paste misalnya,

22:54kita punya Photoshop atau aplikasi lain, kita bisa. - Atau Photoshop atau apapun, gitu. Itu bisa.

22:59Kalau dulu nggak bisa. - Yang bahkan bukan di browser.

23:02Yang paling kerasa enak itu kalau bikin Google slide. Kalau jaman dulu, kalau mau masukin image,

23:13saya harus upload dulu ke drive atau ke mana, baru bisa di-attach ya. Kalau sekarang, drag-and-drop

23:19udah bisa. Drag-and-drop aja udah bisa, dia langsung otomatis. Meskipun drag-nya itu dari

23:27lokal folder ya, dari lokal folder, saya drop ke Google slide, dia otomatis upload.

23:35- Hmm. - Aduh, perbedaannya.

23:40- Oke, ini banyak sekali ya. Ada apa lagi yang menarik-menarik?

23:45- Coba yang... nggak bisa kayaknya, karena... - Kalau di laptop ya, nggak bisa.

23:54Ada yang bisa main game di sini. - Kalau itu, file system access?

24:01- File system access. Tadi udah ini. - Oh, tuh.

24:07- Yang tadi. - Snipe player. Bisa ya, berarti.

24:10- Bisa. Yang tadi juga si Capcut. Capcut bisa, tail-draw bisa, escale-draw bisa.

24:19- Github.dev bisa tuh. Wow. - Github.dev ini apa?

24:24- Nggak tahu, makanya. - Itu buat buka repubita.

24:30- Facebook ya? Facebook di browser, di cloud. - Iya, dan bahkan bisa install extension

24:40dan sebagainya. - Pasot Github-nya Mas Liza apa tuh?

24:43- Coba-coba ya. Ingat lho. Fugu itu adalah security trust and privacy.

24:54Tolong dihormati ya. - Password-nya 1-8.

24:57- Password-nya enter aja. - Password-nya pesan dulu.

25:03- Pesan dulu. - Dari coffee. Selamat malam Audi.

25:13- Selamat malam. - Nah, apa nih?

25:19Jadi, jadi ngeblank kan gara-gara tadi.

25:28- Oke. Ini kan showcase-nya nih. Jadi kalau temen-temen pengen tahu,

25:34langsung ke showcase, pengen lihat ada aplikasi apa aja dibangun dengan menggunakan showcase.

25:40- API, project Fugu. Ada banyak banget soalnya API-nya.

25:47- Ini bisa di, yang paling popular ada yang temen-temen tahu ada nggak ya?

25:54- Figma, tadi ada Figma. - Figma, ada banyak lah ini.

26:01- Nah, kalau pengen tahu ada apa aja, apa, Fugu API, dan statunya sudah sampai mana,

26:08ada tracker. Nah, Fugu ini tracker, web. Contohnya, web Bluetooth API ini ternyata dari Fugu ya.

26:17- Itu udah ship, udah lama. - Udah ya. Nah, kalau kita lihat itu kan list-nya di kelompokan

26:25jadi beberapa kategori berdasarkan status-nya yang tadi kita udah bahas sekilas ya.

26:31Yang paling atas itu status-nya udah ship. Nah, terus kalau misalnya slide lagi sedikit ke bawah.

26:38- Oke, sebentar. Nah, ini. - Context API. - Trial. - Ada tadi developer Trial.

26:48Nah, itu ada detail-nya juga kalau mau tahu keterangan apa sih maksudnya status-status itu.

26:55- Bisa diklik ya. - Nah, biar flag ini berarti kita harus,

27:02kita harus ke setting Chromium atau browser, kemudian kita nyalakan fitur, misalkan sensor

27:11atau notification atau semuanya ini ya. Gitu ya. - Terus ada yang started. - Baru mulai.

27:21- Nah, kalau started itu yang experimental murni yang masih itu API-nya bisa tiba-tiba berubah.

27:29Maksudnya bisa berubah sewaktu-waktu kalau kita pakai itu ya ekspektasinya kita ngasih feedback

27:35karena yang nggak nyaman atau bermasalah. - Bisa jadi tinggalkan juga kalau nggak ada banyak.

27:42- Gak ada yang pakai. - Ada detection. Ini kayak start-up ya.

27:49Banyak ide ini masukin ke sini gitu. Banyaknya pakai ini. - Coba buka itunya deh, apa?

27:57- Mereka di definisi status-statusnya, ke atas dikit. Nah, details. Nah, itu tuh jadi paling atas,

28:06paling atas dulu. - Behind the flag. - Atasnya lagi. - Oh, ini, iya. - Atasnya lagi, paling atas.

28:16Paling atas kan stable tuh, berarti itu udah launching, beneran launching, ada di semua browser

28:22yang Chromium-based. Dari Google Chrome, Edge, Brave dan lain-lain. Terus tadi origin trial kan kita

28:30udah bahas juga ya, sekilas. Nah, itu bisa apply. - Apply untuk menggunakan kita harus apply. - Di domain kita.

28:39- Di domain kita. - Jadi kita sebagai pemilik situs, pemilik web app yang mau menggunakan kita yang daftar,

28:48tapi user kita nggak perlu ngapa-ngapain. Jadi, maksudnya user yang menggunakan feature kita,

28:54kalau udah prove, ya udah, bisa langsung pakai. Nah, bawahnya lagi tuh flag. Kalau flag itu user-nya yang

29:02harus mengaktifkan feature itu. Jadi, nggak bisa tiba-tiba langsung pakai. - Ini developer trial,

29:10karena harus masuk ke Chrome flag, cari feature itu, diaktifkan. - Jadi, ya kayak buat internal lah,

29:18mungkin kita punya QA, buat QA kita sendiri, atau mungkin kita pengen, kita bikin library atau semacamnya

29:27yang konsumennya adalah developer juga. Jadi, kita nyuruh, kita nyuruh user kita yang mana mereka sebenarnya

29:34developer juga buat ngaktifkan feature itu, misalnya. Ya udah, di situ, started sama consideration.

29:43- Sama ada consideration. Ini backlog. - Iya. - Ohnya makin ke bawah, makin experimental, makin aneh-aneh.

29:52- Jadi, hanya suggestion itu, apa, yang ide aja ya. Oh, ini kayaknya bagus. - Iya, ide aja.

29:57- Abis itu nanti dia suka. - Tapi harus, ide-nya juga harus, ini sih kan ada showcase-nya juga kan.

30:02- Oh iya. Harus-harus proposal, kan? - Iya, proposal. - Jadi, theoretically, teorinya mah kalau kita punya

30:09ide apapun, kita bisa suggest juga. Cuma ya belum tentu di... - Tentu, diterima. - Habis disugest, kita harus follow-up,

30:19terus kayak ikut, harus kejar. - Terus habis itu, habis itu yang developer siapa? - Ya, kalau dianggap,

30:30kalau dianggap itu fiturnya menarik, ya berarti kan nanti akan ada timnya yang akan di-assign untuk itu.

30:38- Iya, iya, iya, iya. Oke. Next-nya, kita ngomongin apa lagi nih? Ini udah? Perlu dihubungi ini udah ya.

30:49- Showcase. - Terus ini adalah tipset. Tipset ini adalah untuk... - Apa lagi? - Nah, itu sebetulnya yang tadi sih.

30:59- Terus prosesnya. - Proses. Anyone can suggest. Kemudian ditulis, apa, dalam tulisannya. - Terus menulis detail,

31:09explainer. Jadi kita ngusulin, nggak bisa cuma minta-minta feature aja, kita mesti bikin explainer, terus kira-kira

31:17API-nya, bentuknya seperti ini. - Terus habis itu didiskusikan, kalau ada feedback, mungkin dokumennya bisa ditulis apa,

31:27ditulis ulang, direvisi, gitu ya, kayak ini ya, kayak ngaduin bidul skripsi, kan? Habis itu baru dokumennya

31:37dimasukkan, di-issue ke technical architect group, architect group dari Waiting J. Kemudian kalau udah berhasil di-review,

31:49- Deformal specification-nya. - Deformal specification-nya. Jadi yang sering kita bahas ya, ini kan feature-feature ini bukan proprietary,

31:58nggak ada yang punya. Maksudnya, ini bukan punya Google, walaupun yang di-develop oleh Google atau Samsung atau Microsoft,

32:08API ini bukan milik Google yang dipatenkan atau proprietary. Implementasinya, iya, yang di Google Chrome misalnya ya

32:20punyanya Google, yang di Microsoft Edge punyanya Edge. Tapi kalau di web, apapun itu berdasarkan spesifikasi,

32:29spesifikasinya itu ya, nanti kalau udah masuk tahap terakhir, stable, bisa diadopsi siapapun, nggak harus bayar,

32:38nggak harus minta izin atau apapun. Jadi ini yang diketahui di tahap ini, ini bahkan nggak coding sama sekali,

32:46belum coding sama sekali baru spesifikasinya. - Ya, dan spesifikasi ini disiapkan untuk bisa bergeran di semua platform

32:55atau di semua browser ya, bahannya Chromium ya. Karena ada hubungan juga sama W3C. Gimana, gimana?

33:03- Pada saat yang sama ya, developer yang ngerjain Chromium ya sambil bikin juga, bikin implementasinya.

33:10- Oke, kemudian dari sana udah direview berhasil masuk ke implementasi, proses implementasinya,

33:19kalau udah mulai didemol atau udah berapa pasien gitu ya, bisa di-launch itu melalui flight nita.

33:27- Oh, kok ilang? - Iya, kayak internet masih bisa mulai lambat.

33:37- Masih audionya ada, screenshotnya ada. - Oke, lanjut, lanjut, lanjut.

33:43- Yang penting masih bisa ngomong sama screenshot lah. - Masih bisa ngomong, iya, oke lah.

33:52API-nya berhasil dikomentasi kita bisa pake developer tadi ya, yang kita sebutin developer itu,

34:02aksesnya di setting ya, kalau misalkan kita pake Chromium, ya Chromium.2.0/flex. Tapi kalau misalkan Brave, misalkan dia jadinya Brave.2.0/flex.

34:15Edge juga sama, gitu. Nah, di situ nanti ada fitur-fitur yang sesuai, yang dingin kan.

34:23Setelah itu masuk ke Stabil, Stabil ini masuk ke Original.

34:33- Lanjut, lanjut, lanjut, dijelaskan. - Kalau udah ada token, ya itu tadi.

34:41Tadi kayaknya kita udah bahas ya soalnya di yang sebelumnya. Kalau misalnya sudah, jadi dapet token,

34:48kalau misalnya website itu atau aplikasi itu pakai token tersebut, ya di semua user, otomatis bisa langsung dipake.

34:57Nah, tahap selanjutnya, shape Stable.

35:04- Itu berarti udah di atas di semua ya? - Di browser-browser Chromium.

35:13- Di Chromium-based browser. - Nah, proses dia untuk, katakanlah,

35:19"Oh, ini bagus nih, terus kita mau minta push ke browser lain, ada nggak sih di sini?"

35:25- Bukan, sebenarnya bukan nge-push ya, jadi browser lain itu memilih, kan sudah jadikan standar.

35:33Kalau memang, apa, kan sudah berjalan dan adopsinya ternyata di user yang di Chromium itu banyak,

35:41dan intresnya banyak untuk menggunakan itu, contohnya Bluetooth API, contohnya ya.

35:47Nah, browser lain mulai-mulai, "Oh, ternyata sudah ada standar Bluetooth API." Mereka mulai mengadopsinya, seperti itu.

35:57- Nah, ini kelebihannya. - Bisa jadi nggak sih beberapa API yang ada di sini itu

36:05jadi interop, bisa juga kali ya? Yang kayak... - Klub! Masih bisa hilang.

36:11- Iya, tapi skrencernya tetap... - Untuk skrencernya malas sih kali.

36:16- Bisa juga berarti ya dari Fugu API ini masuk juga ke interopability yang di project interop itu?

36:24Bisa juga kali ya? - Bisa aja, cuma kan sebetulnya tujuannya beda.

36:31- Bisa aja. - Bisa aja, cuma kalau Fugu ini kan tujuannya itu tadi

36:35bikin feature-feature web yang mendekati kemampuan atau kapabilitas native.

36:40Sedangkan kalau interop itu tujuan utamanya memastikan semua antar browser

36:47bisa bekerja dengan konsisten, dengan streamline, developer bisa pakai dengan nyaman.

36:53Cuma kita lihat juga skopnya ini sebenarnya agak beda kalau interop itu kelebihannya dia adalah skopnya paling luas

37:02karena didukung semua vendor dari Chromium sampai Mozilla, sampai Apple dengan Safari WebKit

37:10itu udah kerja sama semua. Sedangkan kalau Fugu ini kan project Fugu skopnya sedikit lebih sempit Chromium

37:18bukan cuma Google, cuma ya kan Google, Microsoft, Samsung, Intel. Jadi skopnya lebih sempit.

37:25Nah, kadang tuh concernnya sebenarnya orang-orang yang pengen pakai API project Fugu ini kan

37:30gimana ya punya feature tapi cuma bisa dipakai di Chromium.

37:36- Oh, Chromium. Itu gimana ya? - Chromium-based.

37:40Nah, sebetulnya itu kalau menurut aku ya antara justified dan nggak justified sih.

37:47Maksudnya emang kenyataannya kan sekarang ini sebagian besar API project Fugu ya emang cuma Chromium-based.

37:55Jadi nggak jalan di Firefox maupun Safari.

38:00Tapi di sisi lain itu kan bullet point terakhir tuh sebetulnya menjelaskan bahwa ini kan standar spesifikasi

38:10jadi bukan milik, bukan punya siapapun spesifikasi itu kalau misalnya banyak yang suka, banyak yang pakai,

38:19dianggap menarik, ya nggak tertutup kemungkinan Firefox atau Safari atau misalnya nanti ada vendor lain

38:27bisa mengadopsi itu. Tadi udah ada contohnya dua, async clipboard sama web share.

38:35- Oh iya, web share sudah diadopsi sama browser lain ya Firefox dan Safari.

38:41- Jadi bukan nggak mungkin, bukan mustahil bisa suatu saat API-API itu bisa jalan di Firefox dan Safari juga, walaupun sedikit.

38:51Cuma mungkin ini kelebihan dibanding browser world jaman dulu.

38:56Jaman dulu banget kan konon Netscape Navigator sama Internet Explorer itu perang ya.

39:02Cuma kalau perang yang versi jaman dulu itu perangnya rada nggak enak karena mereka semua bikinnya proprietary, beneran.

39:10Misalnya untuk feature yang sama nih, apa, clipboard.

39:15Si Netscape Navigator bikin sendiri, beneran rahasia punya sendiri, Internet Explorer bikin sendiri.

39:23API-nya lain, beneran jadi harus ngoding dua kali, pusing nggak tuh.

39:28- Betul, betul, betul. - Nah gimana kalau sekarang browser-nya banyak,

39:32browser ada lima, nggak mungkin kita bikin developer bikin lima kali.

39:37Nah untungnya sekarang udah, walaupun kalau mungkin persaingan atau apa ya masih ada ya.

39:44Cuma kalau dari segi teknis API-nya bakal sama karena berbasis standar si spesifikasi itu tadi.

39:53Jadi minimal nggak sesuruh jaman dulu lah.

39:58- Terus bagaimana kalau cara teman-teman bisa mulai kalau pengen adopsi project Fugu?

40:05- Ya itu balik ke, mungkin balik ke tracker dulu ya, tracker atau showcase.

40:10Pertama kan kita masih milih dulu nih mana yang sesuai sama kebutuhan.

40:15- Itu tuh ada di link yang terakhir tuh Mas Dizah, di Boost Your Blah Blah Blah, paling kanan.

40:22- Iya nah. - Nah tuh ada codelab-nya juga kalau pengen coba-joba.

40:27- Mas Dizah udah mulai duluan tuh. - Apa tuh?

40:30- Udah selesai malu tuh. - Udah selesai tuh, nah.

40:34Jadi teman-teman bisa kesini nanti developers.google.com/learn/pathways/fugu-apis.

40:46Mulai aja, jadi ambil codelab-nya ada 8 aktivitas disini dan bisa coba-coba nih.

40:56Bisa coba-coba SMS OTP, bisa tab App Mode di PWA, bisa akses hardware seperti Bluetooth, NFC.

41:06Eh nggak tahu apa aja sih yang di codelab ini, gue belum coba yang akses hardware.

41:10Dan coba scroll lagi ke bawah, bisa connect ke Uncommon Higher Input Device.

41:18- HID itu apa sih? Higher Input Device? - HID? Itu yang apa sih? Elektronik analog kan?

41:27- Elektronik yang lawas? - Oh bukan, HID Device itu Human Interface Device.

41:36- Itu apa? - Itu apa sih? Yang kayak...

41:40Nah, dibuka aja, dibuka aja padunya.

41:43- Contohnya apa nih? - Joystick.

41:47- Oh bukan, mouse. - PS2.

41:50- Mouse, mouse, mouse. - Mouse, mouse, mouse, mouse, mouse.

41:55Gamepad, touch screen, terus balik lagi ke Bus.

42:01Terus lanjut lagi bisa baca dari serial port, kalau memang main IoT ya.

42:06Terus kemudian akses USB dan streams.

42:11Streams itu untuk itu ya, apa? Kayak video audio tapi yang versi mentahnya ya buat diolah lagi.

42:18- Yang buat live streaming? - Live streaming bisa, atau editing misalnya, video editing-nya kayak si CapCut tadi itu.

42:32Contohnya ada... Projek-projek Fugu ini menarik ya.

42:40Banyak hal-hal yang lucu-lucu, yang unik-unik juga. Kayak Text Detection API, Image Recognition API itu sudah ada.

42:47- Jadi nggak perlu punya... - Itu Fugu bukan sih? Text Detection?

42:52- WAPI itu WAPI. - WAPI itu Fugu.

43:00- Masih masuk Fugu ya? - Fugu, masih masuk Fugu.

43:04Itu ada link-nya tuh, saya kasih Chrome Status.

43:09So, siap. Shared Screen lagi.

43:17- Jadi Text Detection ini bisa buka yang punya Mas Kinlan. - Paul Kinlan. Kayaknya akar banget nih sama...

43:28Jadi dia bisa baca text yang ada di image itu ya.

43:34Dan ini nggak pakai kayak bikin itu, apa namanya?

43:42- OCR? - Ya, dia OCR tapi bawaan dari browser langsung pakai kapabilitas WAPI.

43:49- Ini bagian dari Shape Detection ya sebetulnya? - Betul, Shape Detection.

43:54Jadi bisa Face Detection, Shape Detection API.

43:59Nah, turun sedikit, ada JavaScript code-nya, cara aksesnya itu bisa as simple as that gitu.

44:07Jadi kayak ngambil datanya dari mana? Dari video, terus kemudian Capture, Image Capture.

44:16Dan kemudian langsung pakai API-nya, Text Detector.

44:20Ini JavaScript banget ya. Maksudnya kita pakai high-level language, yaitu JavaScript, gimana browser-nya kerja ya.

44:30Maksudnya browser nerusin lagi ke sistem, apalah itu sistem yang di device kita kan? OCR.

44:39OCR yang dipakai di device kita. Yang mungkin pakai bahasa C++ atau apalah.

44:45Nah, ini browser itu ada di layer yang ini.

44:50OS-nya ada di layer bawah, baik itu Android, Windows, Mac OS, iOS, dan OS-OS yang lain.

44:56Kita dari API tinggal ngetik JavaScript yang enak dan sintaksnya friendly sama kita.

45:04Cuman PR-nya itu adalah kita butuh tahu ini. Kita butuh tahu ini, kita butuh tahu ini.

45:11Dan terakhir masih ada tuh speech synthesizer. Jadi setelah ditemukan, yang nomor 4 di step 4.

45:19Setelah ditemukan, dibounding boxes-nya baru di speech synthesizer. Jadi sudah dapet.

45:24Di baca?

45:25Iya, sudah dapet. Terus di kasih suaranya gitu.

45:31Jadi dari gambar, dari majalah atau surat kabar, difoto, terus dibacain.

45:41Bayangin aja kalau misalnya teman-teman punya ide-nya begini ya, web-nya buat translate.

45:49Misalnya akses kamera, langsung arahin ke, misalnya lagi ke Jepang, mau makan ikan fugu.

45:58Tapi pengen tahu urusannya apa gitu. Terus bisa diarahkan, terus kemudian dari text detector,

46:06di-connect ke Google Translate API, langsung bisa dibacakan apa sih value dari yang tulisan itu.

46:16Itu contohnya.

46:18Seperti Google Lens lah. Ibaratnya kita mau bikin web yang semacam Google Lensnya bisa.

46:24Oke, ada banyak yang komen ya. Ada yang bilang keren, terima kasih.

46:36Pemuda panca Indra, ada yang... Kriteria cowoknya gimana? Eka itu penyanyi cowok yang sudah menguasai 5 ugu API.

46:59Origin trail.

47:06Aduh, halo. Naika, ada damar nih itu. Excited banget mau hitung-hiturnya, tapi biasanya apply API-nya susah.

47:13Jadi lebih suka pakai wrapper yang udah indones saat browser ada support. Oh, ini apa namanya?

47:20Tapi emang tujuannya gitu juga kan. Yang penting, feature-nya ada dulu di browser.

47:26Cuma prakteknya misalnya kita pakai React, kita pakai Sweat. Pasti ada lah biasanya yang udah bikin.

47:32Kayak kalau contohnya yang udah feature yang udah matang, async clipboard, misalnya async atau web share,

47:38itu pasti udah banyak. Pasti udah ada yang bikin wrapper misalnya buat React atau semacamnya.

47:44Bisa buat juga kan. Bikin wrapper-nya aja buat bantuin teman-teman yang lain.

47:56Ya, lumayan tuh buat opportunity bikin-bikin project lucu-lucu ya. Buat open source juga, ambil belajar.

48:03Ada Sabeh hadir. Terima kasih sudah hadir. Terus ini juga pertanyaannya, apakah Funggu sama dengan PWA?

48:14Ada kayaannya? Soalnya yang saya tarat dia dari tujuan sama-sama melakukasi native.

48:19Sebenarnya benar ada hubungannya memang.

48:23Hubungannya adalah PWA itu kan kita, aplikasi yang kita buat, itu bisa kita gambarkan sebagai PWA.

48:34Sejangan kalau Funggu itu nama salah satu project yang itu bikin R&D lah ya tadi pas off-screen,

48:43Ivan bilang R&D. Research and development bikin API-API-nya, feature-feature-nya yang kira-kira bisa dipakai

48:52di PWA kita, di aplikasi kita.

48:55Kalau dilihat di tracker-nya, ada beberapa yang kata gue dia masuk ke PWA.

49:00Coba buka itu dong, tab web apps itu apa sih? Gue penasaran.

49:06Ya bisa buka dari tab.

49:11Jadi itu cuma untuk PWA yang udah di-install. Jadi kita harus install sebagai PWA.

49:18Cuma kan kalau misalnya kita buka di Chrome biasa nih, kita bisa buka open in new tab.

49:24Nah kalau misalnya sebelumnya di PWA kan nggak bisa tuh, cuma satu window aja. Sekarang bisa.

49:31Oke. Wow, oke, oke, oke.

49:35Terus emang ada beberapa kapabilitas yang terlalu powerful kalau dipakai di sebarang halaman web biasa.

49:46Nah kalau PWA itu kan satu layer lagi. Kayak user dengan sadar meng-install PWA itu.

49:53Nah waktu udah dijalani sebagai PWA, ada kayak feature-feature tambahan.

49:59Itu URL Handler misalnya kita mau buka gambar nih.

50:03Kita ada PWA yang semacam misalnya aplikasi image editor.

50:08Nah itu kita bisa buka file image dengan aplikasi kita.

50:13User kita maksudnya bisa buka file image mereka by default menggunakan aplikasi kita itu.

50:20Nah itu kan make sense-nya kalau udah di-install ya.

50:23Iya.

50:27Ini kan PWA. PWA ini apa ya? Logonya mirip-mirip lagi ya.

50:31Isolated Web App. Apa itu? Ga tau, belum pernah coba.

50:34Isolated Web App. Apa tuh?

50:37Nah boleh tuh, besok-besok bahas biar kita kepaksa kumpul.

50:43Isolated Web App.

50:47Kita aja baru tau nih.

50:49Kita baru tau nih.

50:51Extension of existing work on PWA installation and web packaging that provide stronger protection against server compromise.

51:02Jadi keamanannya lebih tinggi.

51:06Package into web bundles.

51:09Jadi sebenarnya kayak executable tapi web. Ga tau yang gue tangkap gitu.

51:17Masih specification. Masih in development.

51:21Oh inget ga sih yang dulu pernah di CDS ada web bundle pernah dibahas?

51:31Iya tau. Sama portal juga kan kalau ga salah.

51:34Sama apa?

51:35Portal.

51:36Oh iya portal.

51:38Bareng-bareng kan?

51:39Iya web bundle sama portal. Apa itu ada hubungannya ya?

51:43Kayaknya.

51:45Kalau ngeliatin ini sih iya. Soalnya ada web packaging, terus ada web bundles.

51:53Nunggu CDS selanjutnya nih pengen tau.

51:56Jadi kayaknya ya. Kayaknya kita bisa punya executable kayak RxE atau kalau di Mac OS tuh RxPT gitu ya.

52:06Tapi itu sebenarnya browser. Jadi kayak elektron ya.

52:14Pengganti elektron yang lebih ringan ya.

52:16Ya kalau web bundle sih begitulah. Kayak download HTML jaman dulu tetapi yang sudah tinggal bisa di off-line.

52:28Jadi kembali ke pertanyaannya, PWA itu ada tujuan untuk supaya bisa di install.

52:36Jadi PWA itu kan ada beberapa comment ya. Yang pertama ada web manifest, application manifest, yang ada icon, ada judul dari aplikasinya,

52:48ada description, meta data lain. Terus ada service worker-nya harus ada.

52:56Salah satu lagi.

52:58Ada API ya?

53:00Harus cepet.

53:01Berantara kalau fugunya itu adalah API yang bisa membuat aplikasi PWA dengan fungnya yang lebih beragam.

53:11Tambah kaya. Punya feature-feature yang kaya.

53:13Cuma sebenarnya kalau API fugu ini mah bebas diadopsinya ketenggan juga boleh.

53:19Maksudnya kita cuma punya, kita cuma perlu pakai satu atau dua API, nggak masalah kita bisa pakai walaupun aplikasi kita

53:27bukan atau belum berstatus PWA secara lengkap.

53:31Tapi yang non-negotiable, yang harus tetap harus di-serve lewat HTTPS, harus secure, harus ada TLS apa, security-nya.

53:41Jadi walaupun kita misalnya belum punya manifest atau apa tadi semua syarat tadi nggak masalah, tapi ini semua nggak akan jalan kalau nggak di HTTPS.

53:53Tidak di HTTPS, harus security ya syarat dari ininya ya.

53:59Oke.

54:01Nah ini, tab web-tab itu ke-feature keep alive supaya tab-tabnya tetap?

54:07Enggak ya? Bukan ya?

54:09Tau juga, belum pernah coba.

54:11Ya multiple tabs aja sih.

54:13Ya multiple tabs.

54:15Multiple tabs ya.

54:17Jadi di dalam aplikasi PWA, itu kan biasanya nggak ada tab kan.

54:22Nah, ada tab web-n-nya, jadi kalau kita udah install, kita bisa control-t atau command-t.

54:30Nah, terus kalau behavior state sih ya sama aja kayak kalau kita buka di browser Chrome biasa.

54:37Iya.

54:40Jadi emang bisa dipakai buat itu juga.

54:43Belum ada contohnya lagi, belum ada contoh.

54:46Ntar coba.

54:48Ada lah paling coba buka di showcase deh.

54:51Showcase? Oh iya bener juga ya, kita punya showcase ya.

54:55Tab web-tab.

54:57Itu fungsinya.

54:59Ini, tab application mode bukan ya?

55:02Bisa jadi.

55:04Atau di sini ya, harus di-

55:06Bukan, di Slack API.

55:08Nggak ada, belum ada.

55:10Oh belum.

55:12Mungkin itu kan ada.

55:13Tab, ada tab application mode?

55:15Tab application mode.

55:16Ada tuh?

55:17Iya, kalau tab application mode ada.

55:19Tapi harus di-install dulu.

55:22Hmm, bener juga.

55:25Ini status-nya udah sampai mana dia?

55:27Origin trial.

55:29Origin trial.

55:31Behind flex.

55:33Behind flex.

55:34Flag atau origin trial?

55:36Oh, behind flag.

55:38Oh, behind flag.

55:40Salah banget.

55:41Belum, nggak kan belum origin trial.

55:44Iya.

55:49Fugu, kok kaya aritmetik versi browser.

55:53Kenapa, kenapa?

55:55Tadi ada contoh, offline wikipedia reader.

56:00Contoh tadi apa?

56:02PWA yang pakai feature tab application mode.

56:05Itu kan sebenarnya ide-nya simple ya, se-simple.

56:08Ngambil dokumen-dokumen wikipedia.

56:11Mungkin misalnya teman-teman miskin paket data ya.

56:17Miskin pulsa, apa?

56:20Kalau lagi di wifi, entah di kampus atau di mana tempat makan.

56:25Download dulu semua, terus di rumah bisa buka semua.

56:29Dan namanya kita browsing wikipedia ya, kan.

56:32Mungkin kita bakal butuh buka macem-macem link.

56:36Itu kan multiple tabs, helpful banget, membantu banget.

56:39Biasanya kalau teman-teman pengen bisa jadi punya novel online, bisa di download semua.

56:48Novel online.

56:50Siapa tahu, atau comic online.

56:52Nggak, nggak, ini dokumen-dokumen online semua kan.

56:57Kalau ada versi offline-nya, ya udah, kita download dulu aja.

57:01Terus misalkan kita lagi di pesawat atau di mana, kita tinggal...

57:04Itu gunanya web bundle kan sebenarnya.

57:08Sebenarnya.

57:10Ternyata PWA biasa juga yang penting, pertama online dulu.

57:13Kan abis itu udah ke-download semua.

57:16Emang ya?

57:18Tergantung, tergantung.

57:20Ya, kita bikin download.

57:22Tergantung seberapa banyak mau dikirim.

57:25Iya, seberapa banyak.

57:27Kalau dokumentasi kan lumayan banyak kan link-nya kan.

57:30Kalau kita langsung download semua, bahaya juga itu.

57:34Buat kelangsungan usaha kita.

57:40Ini tadi saya mau...

57:44Kayak react native.

57:46Kayak react native, mungkin, iya.

57:48Yang tadi kita sebutkan seperti...

57:50OneGear atau CordowWire.

57:55Yang hybrid, sebenarnya dia adalah teknologi web.

58:01Cuma dibikinin.

58:03Tergantung untuk mengakses API-API yang ada di...

58:08Baik itu di device, mobile, ataupun di desktop.

58:13Kalau react native kan lebih fokusnya ke mobile app, ke Android dan iOS kan.

58:19Walaupun ada react native untuk desktop juga ada.

58:22Cuma saya nggak tahu seberapa banyak API di desktop yang...

58:27Disediakan oleh react native desktop.

58:30Karena yang paling terkenal, ya, untuk bikin aplikasi mobile.

58:35Nah, ini mungkin dari Damar.

58:42Ini Damar mendanggapi yang...

58:47Downloadan.

58:49Oh, downloadan.

58:51Kalau ini content...

58:53Itu pakai background sync.

59:00Jadi background sync itu...

59:03Kalau di mobile...

59:05Udah install PWA-nya.

59:08Terus kemudian pagi-pagi dia...

59:12Misalnya situs berita ya.

59:14Dia bisa tetap jalan di off-line...

59:18Sorry, di background secara periodik untuk ngambil konten.

59:23Ternyata kalau begitu udah dibuka...

59:26Waktu user yang ngebuka aplikasinya...

59:29Content kita sudah yang terbaru.

59:32Dan bisa, karena kita tahu udah ada konten terbaru...

59:37Kita bisa gini notifikasi juga.

59:39Ada berita baru nih, silahkan baca contohnya.

59:45Atau yang paling simple sih, sebenarnya pakai service worker nih.

59:49Kita pakai yang strategi SWR kan.

59:52Stay Well, Revalidate.

59:54Jadi pertama di-serve aja dulu.

59:56Udah punya semua aset yang lama.

59:58Sambil nge-check lagi.

1:00:00Kalau ternyata ada yang baru...

1:00:01Ya udah, tinggal kirim mesej kan.

1:00:03Biar user me-reload.

1:00:06Itu untuk casing strategi.

1:00:10Sedangkan yang saya ceritain tadi tuh kontennya yang update.

1:00:15Fetching.

1:00:16Ya, fetching konten baru.

1:00:19Kayak kalau casing strategi kan bisa jadi untuk...

1:00:23Lebih banyak digunakan untuk aset.

1:00:26Kalau CSS-nya yang baru...

1:00:28Jadi makanya should please reload kan contohnya.

1:00:32Oke.

1:00:34Nah kalau API-API yang teman-teman ikutin, apa aja sih?

1:00:40Ada yang ternyata nggak nunggun banget nih.

1:00:42Wah ini kayaknya bicar nih.

1:00:44Webshare.

1:00:46Webshare lah yang paling...

1:00:48Itu API sejuta umat share sama clickboard.

1:00:52Share.

1:00:54Ini belum kita bahas kan, webshare kan?

1:00:56Iya.

1:00:58Webshare API ya?

1:01:04Ini kayaknya versinya ada macem-macem yang di fugu tracker ya.

1:01:11Iya, webshare ini adalah...

1:01:14Mungkin ada yang bisa menjelaskan?

1:01:16Ya buat share.

1:01:20Ya tapi kayak widget.

1:01:28Tapi tanpa plugin.

1:01:29Kalau dulu kita harus install plugin ad-query atau react atau apa.

1:01:34Biasanya kan kalau kita...

1:01:36Kalau kita nge-share itu...

1:01:40Coba tuh buka artikelnya aja.

1:01:42Oh iya betul.

1:01:44Webshare.

1:01:46Yang paling enaknya karena dia native.

1:01:50Webshare itu bisa kita share ke aplikasi lain yang ada di mobile.

1:01:54Ini yang kita install.

1:01:56Ini kapabilitasnya si OS yang dipakai.

1:02:00Itu pure semua UI-nya.

1:02:03Bukan UI bikinannya query lagi.

1:02:05Tapi beneran punya sistem kita sendiri.

1:02:08Misalnya kita pakai Android.

1:02:10Yaudah itu fiturnya aplikasi-aplikasi yang sering kita pakai.

1:02:14Akan bisa langsung kirim ke printer.

1:02:18Bisa ke telegram, ke mana aja.

1:02:22Wow, seru sekali.

1:02:24Ini cara pakainya?

1:02:28Tinggal begitu doang.

1:02:29Navigator.share, beres.

1:02:33Ada title, ada address, ada URL, udah gitu ya.

1:02:36Tapi jangan lupa itu cek dulu.

1:02:38Jika nggak ada, kita lazy load.

1:02:44Ya itu library yang sebelumnya.

1:02:46Library pihak ketiga atau bikin sendiri ya terserah.

1:02:50Ingat, webshare di desktop tidak ada.

1:02:54Iya.

1:02:55Anya bisa di mobile.

1:02:57Di mobile.

1:02:59Tapi tadi ada yang buat.

1:03:02Udah ada yang buat desktop?

1:03:04Belum.

1:03:06Belum.

1:03:08Bisa di webshare di desktop.

1:03:10Baru sampai?

1:03:12Baru sampai, udah ship.

1:03:14Tapi di mana?

1:03:16Apa itu janyan Chromebooks?

1:03:18Mac OS.

1:03:20Menarik.

1:03:22Ayo, webshare di desktop.

1:03:26Gue nggak tahu.

1:03:28Tapi navigator.share nggak bisa di desktop.

1:03:32Coba aja.

1:03:33Coba buka devtools.

1:03:36Navigator.share.

1:03:38Belum, nggak ada.

1:03:40Share in navigator.

1:03:42Bols, belum bisa.

1:03:45Navigator.share.

1:03:47Ada window ini.

1:03:50Oh, bisa.

1:03:52Bisa.

1:03:54Itu apa sih?

1:03:56Itu browser apa?

1:03:58Windows.

1:04:00Oh, oke juga ya.

1:04:03Coba copy paste.

1:04:05Coba copy paste tadi.

1:04:07Navigator.share muncul.

1:04:09Senangnya tuh udah muncul.

1:04:11Harapan palsu.

1:04:13Mac OS belum bisa.

1:04:15Muncul, muncul.

1:04:17Tapi kok nggak muncul?

1:04:19Kan promised, await.

1:04:21Screennya beda.

1:04:23Share yang full.

1:04:25Share screen.

1:04:27Share yang ini.

1:04:29Kita...

1:04:31Nih, cuma ya.

1:04:33Lagi ya.

1:04:35Tuh, klekan nggak?

1:04:37Oh, ini pakenya Windows.

1:04:39Windows.

1:04:41Oh.

1:04:43OS belum ada.

1:04:45Coba liat tuh.

1:04:47Eh, tapi disitunya ada.

1:04:49Linux.

1:04:51Gak ada tuh.

1:04:53Mac OS ada nih.

1:04:55Belum bisa ini.

1:04:57Lo.

1:04:59Lo.

1:05:01Lo.

1:05:03Oh.

1:05:05Silahkan coba di device masing-masing ya.

1:05:09Ada yang punya Linux.

1:05:11Mungkin bisa coba, baru coba.

1:05:13Kalo dilaporkan.

1:05:15Kita kurang update nih.

1:05:17Nah, ini cocoknya sambil ngeliat

1:05:19"How Fugu is my browser"

1:05:21tuh. Dibuka tuh, cocok tuh.

1:05:23Sambil ngecek browser kita.

1:05:25Seberapa Fugunya.

1:05:27Apa ini?

1:05:29Seberapa Fugu, browser kita gitu ya?

1:05:31Seberapa bahayanya, lo.

1:05:33Bukan ya. Seberapa...

1:05:3570%.

1:05:3770% Fugu.

1:05:39Fugu.

1:05:41Windows ND10.

1:05:43Wah, ini udah ada nih.

1:05:47Aselerometer ada. Itu home screen ada.

1:05:49Hah? Gila.

1:05:51Baru tau di laptop ada aselerometer.

1:05:53Itu kan yang buat apa?

1:05:55Sensor gerakan kan.

1:05:57Biasanya di gaming gitu.

1:05:59Iya.

1:06:01Itu home screen jelas.

1:06:03Wah, lengkap juga ini.

1:06:05Desktopnya.

1:06:07Nah, ini gak ada.

1:06:09Ambient gak ada ambient.

1:06:11Ambient light mendeteksi

1:06:13apa, diselitar kita ya. Terang atau enggak.

1:06:15Ya, kontak ticker juga kayaknya

1:06:17agak susah ya. Soalnya, belum ada.

1:06:19Di desktop itu

1:06:21belum ada, kecuali di Mac OS ya.

1:06:23Ada aplikasi kontek

1:06:25yang netikoan si

1:06:27OS-nya.

1:06:29Dan emang keliatannya belum terlalu

1:06:31itu sih

1:06:33masih agak polemik

1:06:35soal

1:06:37kemampuan mengakses kontek list itu kan

1:06:39sensitif banget ya.

1:06:41Wah, bahaya nih. Pinjol-pinjol bisa ini nih.

1:06:43Udah coba.

1:06:45Pinjol.

1:06:47Di Mac OS gak bisa.

1:06:49Webshare.

1:06:51Gak bisa ya?

1:06:53Gak bisa, gak bisa.

1:06:55Kurang canggih.

1:06:57Kurang canggih.

1:06:59Cuma intinya kalau pengen liat

1:07:01kemampuan browser kita

1:07:03buat support Fugu API

1:07:05ini UI-nya user-friendly banget ya.

1:07:07Ini.

1:07:09Sama satu lagi tadi

1:07:11ada

1:07:13coba dari Discover itu yang

1:07:15link Discover

1:07:17yang barusan

1:07:19yang di sebelah tab ini.

1:07:21Di sebelah tab ini ada Discover.

1:07:23Ini kan

1:07:25turun. Ini how.

1:07:27Jadi topiknya how Fugu is my browser

1:07:29yang link tadi.

1:07:31Sama how Fugu is the site.

1:07:33Coba how Fugu is

1:07:35the web. How Fugu is my web gitu.

1:07:37This one.

1:07:39Jadi ada click

1:07:41how Fugu is the web itu.

1:07:43Itu ada apa namanya?

1:07:45Ada extension.

1:07:47Chrome extension ya.

1:07:49Jadi kalau misalnya di install kita bisa tahu

1:07:51situasi yang kita kunjungi itu gunakan

1:07:53Fugu API yang aja.

1:07:55Oke, oke, oke.

1:07:57Contohin tadi Excalibro

1:07:59itu 9

1:08:01Fugu API.

1:08:03Di tab yang sebelumnya.

1:08:05Ini ada di sini.

1:08:07Oh iya.

1:08:09Yang bikin juga

1:08:11Mas ini kok.

1:08:13Mas Thomas.

1:08:15Mas Thomas ngeliat,

1:08:17ngeliat, ngeliat, ajar gitu loh.

1:08:19Hei.

1:08:21Hei.

1:08:23Mas Thomas ngomongin

1:08:25apa nih orang-orang.

1:08:27Dia punya

1:08:29pake Radar API kali.

1:08:31Kalau ada yang ngomongin Fugu, dia ikutan.

1:08:33Fugu. Langsung ya.

1:08:35Kayak itu, mas siapa yang Xstate itu?

1:08:37Kalau nyebut state machine

1:08:39dia mojol.

1:08:41Yang bikin Xstate.

1:08:43Oh iya, kayak ini juga

1:08:45kayak Mas Danang. Kalau nyebut GDI

1:08:47dia muncul. Oh, dia muncul.

1:08:51Sudahlah, yang ini bentar lagi dia muncul.

1:08:55Ini baru 8 loh.

1:08:573, 4, 5, 6, 7, 8.

1:08:59Oh, belum update nih berarti ya.

1:09:01Web share. Belum update, terakhir 9 kan?

1:09:03Iya, terakhir 9.

1:09:05Pasing clipboard. Ya, kita bisa copy paste juga.

1:09:07File handling,

1:09:09system, web share target,

1:09:11web share target file.

1:09:13Jadi, web share target file ini,

1:09:15file excalidraw-nya,

1:09:17extension excalidraw

1:09:19itu bisa di share dulu.

1:09:21Diklaratif link capturing-nya apa?

1:09:25Gak tau ya.

1:09:27Link capturing.

1:09:29Itu kayak

1:09:31kayaknya itu ya, open in.

1:09:33Oh, open in excalidraw gitu ya.

1:09:35Misalnya kita ada file excalidraw.

1:09:37Karena open with ya.

1:09:39Open with excalidraw.

1:09:43Terus baliknya ya, 4.

1:09:45Oke, oke.

1:09:49Inilah gunanya ngobrolin web.

1:09:51Gua gak tau lagi

1:09:53berapa banyak web API.

1:09:57Excalidraw ini 9 ya.

1:09:59Ada di sini padahal ya.

1:10:01Eh, ini kan sudah 5.

1:10:05Ada pendelesan yang gak ada.

1:10:07Tapi

1:10:09kalau misalnya insta extension-nya

1:10:11itu ada ininya,

1:10:13ada detail-detail setiap.

1:10:15Link ke dokumentasinya ya?

1:10:17Iya, detail ke setiap

1:10:19API-nya.

1:10:21Web share.

1:10:27Cache storage.

1:10:29Cache storage siap?

1:10:31Caching ya?

1:10:33Caching service worker gak?

1:10:35Kayaknya sama dengan storage.

1:10:37Cache storage API mungkin

1:10:41yang kayak local storage.

1:10:43Caching service worker.

1:10:45Caching service worker beda lagi ya.

1:10:55Kalaman ini.

1:10:57Berbahaya.

1:10:59Di macOS

1:11:01bisa. Tapi

1:11:03macOS sama Safari tampilannya beda.

1:11:05Kayaknya gak nanti macOS.

1:11:07Oh, jadi ini.

1:11:09Jadi mereka implementasi diri.

1:11:11Tadi pake macOS.

1:11:13Pada gue udah coba Chrome Dev

1:11:15yang Chrome Dev yang paling baru ya.

1:11:17Chrome Dev sama macOS.

1:11:19MacOS belum bisa sih ini.

1:11:21Ini API sejuta umat

1:11:23soalnya kayaknya setiap bikin website

1:11:25hampir pasti ada feature share.

1:11:29Cuma ini lumayan

1:11:31buat performance juga sih.

1:11:33Jadi kan nature-nya

1:11:35atau karakter-nya ecosystem web

1:11:37itu kan progressive

1:11:39enhancement banget kan.

1:11:41Jadi kalau emang feature-nya udah ada

1:11:43built-in kayak C-share ini, ya udah

1:11:45tinggal pake segampang itu. Gak usah ngapa-ngapain

1:11:47lagi ibaratnya kita. Gak usah

1:11:49nginstall. Maksudnya dari developer

1:11:51gak usah nginstall library

1:11:53third party atau bikin.

1:11:55Dari sisi user gak harus

1:11:57ngedownload

1:11:59tambahan JavaScript

1:12:01buat sharing.

1:12:03Tapi selama misalnya

1:12:05di macOS, Chrome, atau di

1:12:07mana pun itu belum ada, ya udah apa boleh

1:12:09buat harus ngedownload

1:12:11library tambahan itu.

1:12:13Tapi pelan-pelan kan

1:12:15lama-lama ini

1:12:17makin banyak di-support,

1:12:19makin berkurang juga beban yang

1:12:21harus di-download oleh si user

1:12:23performance-nya. Lumayan tuh.

1:12:25Kalau kita pake budget performance kan

1:12:27ada jatah extra, kita bisa

1:12:29nambah feature lain.

1:12:31Makanya kalau misalnya

1:12:33jangan ngebundle

1:12:35misalnya contohnya

1:12:37sharing itu ya, webshare itu,

1:12:39jangan ngebundle share library

1:12:41ke main bundle-nya

1:12:43kita. Karena

1:12:45usahakan di lazy load

1:12:47atau di, apa, kalau di React

1:12:49itu bisa di...

1:12:51dynamic import.

1:12:53Nah, itulah bahasanya.

1:12:55Itu di native, maksudnya

1:12:57itu di JavaScript browser juga

1:12:59udah bisa sekarang contohnya.

1:13:01Dynamic import.

1:13:03Jadi, usahakan

1:13:05sebanyak kan kayak, kalau pakai-pake

1:13:07fitur-fitur tertentu yang sudah tahu ada

1:13:09API-nya, tapi belum di-support,

1:13:11jangan dibundle ke main bundle.

1:13:13Supaya bisa dikecilin.

1:13:15Oke.

1:13:17Nah, ini tadi kita udah bahas ya

1:13:19di awal ya. Ada yang nanya juga tadi

1:13:21di depan.

1:13:23Fugu itu berbeda dengan PWA

1:13:25walaupun, ya, saling

1:13:27berkaitan, ya. Ada ilisan, ya.

1:13:29Nanti bisa di-replay aja

1:13:31dari video kita. Itu kita bahas lumayan

1:13:33dalam tadi. Ada dari

1:13:35yang JS. Kemudian ada ini.

1:13:37Si paling bajar perak.

1:13:39Halo, halo.

1:13:41Namanya oke-oke, ya. Ini tadi

1:13:43yang apa? Seria bajar hitam, ya. Seria bajar hitam, tapi

1:13:45udah jadi perak, ya.

1:13:47Si paling bajar.

1:13:49Mantap.

1:13:51Oke. Ada lagi yang mau disampaikan?

1:13:53Kita sudah satu game lewat

1:13:5515 menit. Ya, 13 menit.

1:13:57Baca itu dong. Ada-ada-ada

1:13:59di...

1:14:01Bit.ly apa? Sorry.

1:14:03Di ini. Bit.ly/Gobernite

1:14:05Ya, ada ya satu

1:14:07pertanyaan atau apa gitu.

1:14:09Oke. Boleh-boleh. Kita

1:14:11cari skren dulu. Yang mana?

1:14:13Yang gampang aja.

1:14:15Yang jelasan. Teknologi Edge.

1:14:17Bukan Microsoft Edge, kan. Maksudnya ya.

1:14:19Bukan. Edge

1:14:21Ser... Apa? Edge Computing?

1:14:23Wah, ini mah satu episode sendiri.

1:14:25Iya. Tak pernah bahas

1:14:27sedikit-sedikit, kan ya. Edge Computing.

1:14:29Pernah waktu bahas

1:14:31CDN? Iya, pernah.

1:14:33Ya, kurang lebih ya kayak CDN.

1:14:35Tapi server.

1:14:37Iya.

1:14:39Ini juga kita udah bahas. Yang keamanannya

1:14:41bukannya udah ya kemarin? Coba

1:14:43udah. Udah-udah. Di episode kemarin.

1:14:45Ya, episode kemarin.

1:14:47Maklum Asktetikur.

1:14:49Ya, ini belum. Ini belum.

1:14:51Di goleng lagi ya.

1:14:53Ya, bisa goleng. Kita cari

1:14:55jadi ego.

1:14:57Kalau testing ya,

1:15:01urutannya dari awal ya.

1:15:03Nah, kita pernah bahas

1:15:05di episode

1:15:07testing ya dulu.

1:15:09Iya, pernah bahas testing.

1:15:11Itu. WebAssembly udah pernah kan ya?

1:15:13WebAssembly belum.

1:15:15Pernah bahas sekilas

1:15:17doang. Pernah. Maksudnya contohnya

1:15:19Figma pakai Wasm.

1:15:21Oke, oke.

1:15:23Di episode awal.

1:15:25Udah, yang lainnya belum ada yang baru lagi.

1:15:27Nah, buat teman-teman yang

1:15:29nonton acara ini,

1:15:31nonton acara ini, tapi

1:15:33ketinggalan

1:15:35live-nya, ya.

1:15:37Kalau ada pertanyaan, boleh langsung ke

1:15:39bit.ly/mobrolinweb.

1:15:41Nanti kita akan

1:15:43bahas-bahasa lagi.

1:15:45Dan, apa nih?

1:15:49Kalau web, semakin hari, semakin

1:15:51sedikit kirim badannya. Kalau game

1:15:53deh, malah jadi 500GB.

1:15:55Game berarti

1:15:57ACEP kali ya. ACEP.

1:15:59Ada sprite, audio,

1:16:01video.

1:16:03Ada minuman bersoda lainnya.

1:16:05Ya, cuma sprite.

1:16:07Sprite.

1:16:11Ya.

1:16:13Ya, udah. Kalau gitu,

1:16:15kalau nggak ada yang mau

1:16:17disampaikan nanti, kita tutup dulu

1:16:19untuk

1:16:21episode berapa nih?

1:16:2323.

1:16:2523.

1:16:2723, lumayan ya.

1:16:2923 itu sebenarnya 24 ya,

1:16:31soalnya kita mulai dari ngomong.

1:16:33Berarti satu episode lagi kita,

1:16:35episode minggu depan, kita

1:16:37jadi episode 25 dong.

1:16:39Ada apa ya?

1:16:41Kita tungguin aja.

1:16:43Kita kurang lebih

1:16:45sudah 25 minggu ya.

1:16:47Sudah 25 minggu.

1:16:49Udah setengah jalan.

1:16:51Udah setengah tahun ya.

1:16:53Udah 26. Setengah tahun itu 26.

1:16:55Oh, 26.

1:16:57Setengah tahun itu tumpungan.

1:16:59Kita makan ikan fugu.

1:17:03Makan ikan fugu.

1:17:05Yang versi makasar aja.

1:17:09Nah, berarti kita nunggu diundang ke makasar aja.

1:17:11Oh iya, siap-siap.

1:17:13Kodeh nih, kodeh. Jadi jemaah kasar.

1:17:15Oke.

1:17:19Walaupun kita sudah hampir 25

1:17:21episode, ya kita tetap menunggu secara

1:17:23kritik dan saran juga

1:17:25topik-topik, ide topik,

1:17:27buat diskusi juga.

1:17:29Mengendahan

1:17:31episode-episode kita

1:17:33bermankan buat teman-teman

1:17:35buat menambah pengetahuan dan juga buat membantu

1:17:37kepercayaan sehari-harinya.

1:17:39Untuk malam ini kita panggil dulu

1:17:41buat yang mau follow-follow, saya di Twitter

1:17:43@ezafami2, ada

1:17:45Eka, Eka VGI,

1:17:47dan Ivan Trich.com

1:17:49Kita ketemu

1:17:51lagi di minggu depan,

1:17:53caloh. Sampai

1:17:55bertemu, selamat jalan.

1:17:57Bukan, bentar kan?

1:17:59Kita baru ngomongin GDI.

1:18:01Kalau ngomongin yang eksperisi itu,

1:18:03dateng dia. Pasti ada aja.

1:18:05Gak di Twitter, di YouTube,

1:18:07gimana lagi.

1:18:09Panas gue ngomongin.

1:18:15Itu udah mau selesai.

1:18:17Kita udah nge-closing nih, kan tadi

1:18:19padahal itu gajar banget tuh

1:18:21nge-closingnya, ulang lagi.

1:18:23Selamat malam, selamat istirahat, kita ketemu lagi

1:18:29minggu depan, terima kasih, bye.

1:18:31Bye.

1:18:35Terima kasih telah menonton.