Ngobrolin RedwoodJS - Ngobrolin WEB
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://ksana.in/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
0:14Halo-halo-halo selamat malam semuanya selamat berjumpa lagi bersama ngobrolin gue malam hari ini.
0:25Gimana? Nggak sesuai clue seperti biasa.
0:31Biasanya ada yang itu ada yang ikutan halo-halo juga kan terus tiba-tiba dia nya belum muncul nih.
0:37Terima kuat-kuatnya lagi kurang lengkap.
0:40Iya biasa bertiga sekarang masih berdua mungkin sebentar lagi nyusul.
0:43Mungkin nanti muncul.
0:45Iya selamat datang di acara yang selalu ditunggu-tunggu setiap hari selasam malam jam 8.
0:50Yaitu ngobrolin. Ngobrolin web.
0:55Malam hari ini kita mau ngomongin apa ya.
0:58Emang yakin ditunggu emang nggak ada yang tunggu.
1:01Oh ada dong tuh ada komennya tuh.
1:03Oh iya.
1:04Itu daily spirit halo ada Triad Moko ada Maulana kita tinggal menunggu satu orang lagi.
1:16Dan temen-temen yang lain ya yang dikomentar.
1:21Sebentar saya mesej dulu.
1:24Oke ada Bahyu juga halo semuanya.
1:28Nah malam hari ini kita mau ngobrolin salah satu framework yang minggu lalu sempat dibocorin sama Eka ternyata salah satu framework.
1:37Ini topik impulsif ya. Ini topik ini episode paling impulsif yang pernah ada.
1:43Kenapa? Kenapa?
1:45Ya itu kan ide nya gara-gara kita lagi bahas apa yang lain kan minggu lalu.
1:50Yang bahas reput terus gue yang kaya deh rel reput padahal bukan.
1:55Oh gara-gara itu ada yang komen lagi nyobain reput kan.
1:59Iya ada yang komen.
2:01Iya ada yang komen.
2:02Cuma sebenarnya ini sebenarnya bukan tentang itu.
2:04Iya.
2:05Gak tau hubungannya ada.
2:06Ayo siapa yang malam ini hadir boleh ngaku.
2:10Terima kasih loh ide nya.
2:12Halo Audi.
Lihat transkrip lengkap
2:15Nah terus tadi siang yaudah kita yang kaya ngobrolin reput aja.
2:19Terus karena kayaknya seru gitu ya.
2:23Saya udah ngikutin reput udah cukup lama sebenarnya tapi mau nyoba belum ada kesempatan.
2:28Dan ada keunikan sendirian si reput ini yang menyebabkan kita agak susah mengadaptasi framework ini ke pekerjaan.
2:38Karena biasanya pekerjaan kan udah ada.
2:40Yang pertama biasanya pekerjaannya melanjutkan.
2:43Jadi udah ada framework sebelumnya.
2:45Terus yang kedua.
2:46Apa itu namanya ada istilahnya gak sih kalau yang project apa kita mulai dari awal Greenfield ya.
2:52Eh.
2:53Green itu merek susu.
2:55Eh bentar ada istilahnya mirip-mirip kayak gitu.
2:58Iya iya iya.
2:59Green apa ya?
3:00Green apa Green.
3:02Green Spring.
3:03Eh Greenfield betul.
3:05Oh bener.
3:06Kenapa sih?
3:07Bener tuh coba buka ini buka ini.
3:11Kayaknya ada yang aneh.
3:14Kerasanya aneh ya gak saya aneh.
3:16Cuma ada green-greennya bener kan.
3:18Iya greennya bener.
3:19Coba coba.
3:20Lihat belakangnya itu.
3:22Greenfield project adalah project yang dimulai dari awal ya.
3:28Itu kan.
3:29Oh istilahnya dari real estate.
3:32Oh ngerti ngerti.
3:33Mulai baru ya.
3:34Mulai dari awal gitu ya.
3:35Bukan melanjutkan.
3:36Berarti maksudnya beneran masih tanah kosong, masih kebun lah.
3:39Masih kebun.
3:40Baru di bikin jadi jalan, dikasih pundasi jadi rumah.
3:45Iya.
3:46Nah hubungannya sama Redwood tadi yaitu sulit buat.
3:50Apa ini didesain buat Greenfield project ya.
3:53Iya.
3:54Apa?
3:55Sementara di tempat kerja kita seberapa sering sih kita beneran apa?
3:59Harus bikin sesuatu dari awal.
4:01Itu yang pertama.
4:02Terus kedua halangan lainnya.
4:05Ya jujur mau kita ini kita yang bikin acara ini dan yang nonton acara ini kan.
4:13Apa?
4:14Emang aktif banget memiliki trend terbaru lah ibaratnya di dunia web ya.
4:19Tapi kalau ditanya ke orang di luaran random lah terutama di Indonesia.
4:24Berapa banyak yang tahu Redwood sih.
4:27Betul.
4:28Nah jadi maksudnya kalau misalnya.
4:30Kecuali apa?
4:31Kecuali kalau teman kita juga.
4:33Iya.
4:34Ya selingkungan.
4:36Kebetulan.
4:37Apa ya?
4:38Suka juga sama Redwood atau pengambil keputusannya misalkan VP Engineering atau CTO.
4:47Itu memutuskan ayo kita pakai Redwood.
4:50Nah itu mungkin bisa.
4:51Tapi kalau dari kitanya sendiri ya belum tentu.
4:54Sama kayak kalau misalnya gue kerja di tempat yang tergolong kecil.
5:00Anggota timnya sedikit.
5:02Dan ada kondisi bahwa kalau misalnya bikin suatu project.
5:08Ada kemungkinan suatu saat mungkin harus bisa.
5:11Maksudnya harus cukup versatile untuk di hand over ke pihak eksternal lah.
5:16Freelancer atau siapa lah.
5:18Atau kadang misalnya ada project yang berpartner.
5:21Ada mitra, mitra lain yang mereka juga punya programmer in house.
5:26Itu harus punya cukup versatile kayak gitu.
5:29Jadi kayak emang ada kesepakatan kalau buat kerjaan jangan aneh-aneh.
5:34Sudah create-create.
5:35Yang umum ya.
5:36Next.js.
5:37Atau bahkan ya sebisa mungkin kalau cuma kalau bisa client side malah rata-rata pada nggak apa-apa sih.
5:45Mau literally index HTML terus ngetik JavaScript randila.
5:50Malah kalau emang cuma satu dua halaman.
5:53Misalnya cuma buat capture atau buat apa.
5:56Jadi kayak ada kesepakatan bersama nggak boleh pakai stack yang aneh-aneh.
6:04Nggak tahu mungkin teman-teman punya constraint kayak gitu juga atau nggak.
6:08Cuma mungkin itu cukup umum juga ya.
6:11Jarang sih ada framework baru terus di adaptasi langsung masuk ke kantor ya.
6:16Biasanya itu kita mulainya dari project pribadi.
6:19Bikin blog gitu kan.
6:21Atau bikin produk iseng-iseng gitu kan.
6:23Atau produk serius juga bisa.
6:25Begitu nanti di projectnya udah kita udah lumayan familiar.
6:32Mungkin kita bisa introduce ke teman-teman kantor.
6:35Ya kita propose aja.
6:37Saya ketemu nih misalkan framework ini bisa bikin kita lebih produktif 10x misalkan.
6:42Iming-imingnya 10x developer.
6:46Dibuktikan dengan apa gitu kan.
6:48Bisa aja kan pengambil keputusan di kantor yang berusaha dengan teknologi.
6:53Coba bikin, kebetulan ada project baru yang mulai dari awal.
6:58Silakan bikin pakai Redwood misalkan atau framework lain.
7:02Ya kalau berhasil ya di adaptasi.
7:04Memang agak panjang prosesnya, nggak bisa langsung kan.
7:06Tapi dimulai dari kita yang tertarik belajar, yang ngulik gitu kan.
7:11Yang coba-coba.
7:13Nah, jadi apa itu Redwood.js?
7:17Redwood.js adalah meta framework.
7:21Kita biasanya nyebutnya meta framework ya.
7:24Framework di atas framework.
7:26Padahal React nggak mau disebut framework.
7:28React maunya menganggap mereka UI library.
7:31Udah terserah lah.
7:33Intinya si Redwood ini framework yang menggunakan teknologi-teknologi itu tuh.
7:39Zoom in, zoom in.
7:41Oh zoom in.
7:43Biar besar.
7:45Nah, ada React, ada GraphQL, Prisma TypeScript.
7:51Lengkap kan, jazz, storybook.
7:53Jadi mungkin pembeda mereka dari framework lainnya sejenis.
7:58Itu beneran udah lengkap ya.
8:00Kayak Next.js pun nggak selengkap ini kan.
8:03Nggak selengkap ini, betul.
8:05Belum ada ORM, iya kan.
8:07Untuk apa?
8:09Service, api backend. Si Next.js kan nggak punya opini sama sekali kan.
8:15Terserah kita, urusan kita.
8:17Oke, testing.
8:19Untuk UI workbench lah.
8:21Kayak design system gitu.
8:23Ya, Next.js nggak urusin.
8:25Sementara kalau Redwood tuh kayak semua udah dicemplungin.
8:29Nah, sebenernya yang menarik itu tuh scroll ke atas deh.
8:33Paling atas.
8:35Nah.
8:37Fokus on building your startup.
8:39Tadi mungkin pas kita ngobrolin di awal tuh kayak ada yang miss dikit.
8:43Karena kita mikirnya.
8:45Misalnya cuma dari sudut pandang kita kerja di...
8:48Maksudnya di kantor atau tempat kerja lah pokoknya.
8:52Cuma ini tuh keliatannya emang niche-nya tuh orang yang...
8:57Misalnya kita individu punya ide bikin startup.
9:01Yang masih beneran tahap awal banget.
9:03Yang belum ada birokrasi.
9:06Maksudnya belum.
9:07Kalaupun ada tim ya, misalnya mungkin cuma 1-2 orang lah.
9:10Solo atau ada satu temen kita.
9:13Nah, itu kan gedaknya lebih bebas ya.
9:15Oh, temen kita yang ini bukan?
9:17Oh ya.
9:19Sorry.
9:21Saya ketahan di jalan.
9:25Tadi pulang macet banget.
9:27Tidak, pulang macet banget.
9:29Keren ketahan kerjaan.
9:31Terus buru-buru pulang.
9:33Pantes.
9:34Kan kalau nyetir, nggak boleh.
9:36Cetan kan.
9:38Ya, jadi santai rumah cepat-cepetan.
9:40Jangan.
9:42Maaf, maaf, maaf.
9:44Santai, santai.
9:45Kita udah sempat ngomong ya.
9:47Salah satu target marketnya si Redwood adalah...
9:54Orang-orang yang...
9:56Ya, itu side project tadi ya.
9:58Side project, project kita sendiri.
10:00Kita nggak minta approval boss kita atau siapa ya.
10:03Kita emang pengen ini.
10:05Kita pengen bikin usaha, iseng-iseng, siapa tahu bisa berhasil.
10:09Side project, project-projek iseng, hobi, atau mau coba-coba.
10:14Atau yang lebih serius kan.
10:16Kayak indy-hacker ya.
10:19Orang, individu satu orang atau dua.
10:23Ya, pokoknya tim kecil lah ya.
10:25Dari satu sampai tiga orang mungkin.
10:27Bikin satu produk yang spesifik ke niche tertentu.
10:31Apakah itu software as a service atau yang lain gitu kan.
10:35Bisa pakai salah satu target marketnya si Redwood ini.
10:42Karena dia udah lengkap banget.
10:43Untuk hackathon.
10:44Untuk hackathon mungkin jadi kayak satu malam.
10:47Jadi cuma kerjain 24 jam jadi sesuatu gitu.
10:51Jadi kita nggak perlu mikir.
10:53Harus bikin A, B, C, T segala macam.
10:57Biasa pakai udah jazz, install jazz.
11:01Jazznya nggak bisa baca type script, install babel.
11:05Terus TS confignya lain.
11:07Bikin TS config baru.
11:09Itu tuh paling meraka banget.
11:11Di sini udah ada ORM-nya.
11:14Connect ke GraphQL juga.
11:16Semuanya udah di set up.
11:18Bahkan sampai storybook yang terkenal dengan set up-nya yang jelimet.
11:22Susah, susah.
11:23Susah ya, udah ngalamin kan.
11:26Jadi sebenernya tinggal, berarti kalau kayak hackathon.
11:30Bikin idlenya.
11:31Fokus bikin produk.
11:32Langsung aja fokus bikin bisnis modelnya aja.
11:36Bises proses.
11:38Bikin prosesnya, terus bikin data modelnya.
11:44Terus kalau yang seneng round-end ya bikin aja dulu UI-nya.
11:47Nggak usah mikir data dulu kan.
11:49Bikin aja di storybook.
11:50Pastiin semua aksesibel, blablabla.
11:53Terus abis itu yang pure function-nya bikin satu persatu.
11:56Sambil di tes.
11:58Abis itu apa, connectin data.
12:00Abis itu sambung-sambungin.
12:02Itu tutorial-nya.
12:05Video, kalau temen-temen nanti abis nonton ini, acara ini.
12:09Kalau tertarik ya, buka tutorial-nya.
12:11Ada videonya YouTube.
12:12Dan videonya ini adalah salah satu auternya.
12:15Yang ikutan bikin ya salah satu timnya.
12:17Dan dia ini lucu.
12:19Jadi videonya... / Oh mereka tiap bikin video itu lucu semua sih.
12:23Iya lucu-lucu.
12:24Jadi ada kayak dia pakai apa ini ceritanya bajak laut.
12:28Bukan bajak laut ya, pelaut lah gitu ya.
12:30Bukan detektif, eh enggak ya.
12:32Orang kaya. / Orang kaya. / Bisa kayak bangsawan-bangsawan gitu.
12:34Bangsawan Inggris jam dulu. / Iya pokoknya lucu lah gitu.
12:37Maksudnya ada temanya dan ya enggak standar screencast lah gitu ya.
12:43Nggak standar screencast.
12:44Jadi menarik sekali ini.
12:46Nah kelihatannya mereka juga...
12:49Maksudnya tim Redwood ini punya pengalaman yang lumayan banyak di dunia start-up kali ya.
12:55Kan si salah satu pendirinya tuh yang bikin GitHub tuh.
12:59Ya. / Apa?
13:01Ya terus dijual.
13:02Ya kan maksudnya dia udah sukses.
13:04Jadi mungkin dari marketing-nya pun mereka kepikiran.
13:09Maksudnya mikir mempresentasikan produk mereka kayak gimana.
13:15Iya, salah satu founder-nya yang bikin GitHub.
13:19Ya salah satu founder GitHub.
13:22Terus abis itu dia exit.
13:24Dia bikin ini.
13:26Si Redwood ini. / Ini sebenarnya project hobby.
13:29Makanya berurus. / Iya.
13:31Udah gitu kan dia exit tuh.
13:33Duitnya banyak kan.
13:35Dia jadi angel investor gitu.
13:39Nih, jadi ada program yang mereka buat secara berkala namanya build competition.
13:46Kalau dulu kalau gak salah namanya incubator.
13:49Jadi kalau temen-temen punya ide start-up atau ide produk lah.
13:52Jangan startup ya terlalu berat ya.
13:54Ide produk mau bikin-bikin sesuatu gitu kan.
13:56Bisa ikut.
13:58Nanti ada hadiah. / Yang tahun ini udah tutup tapinya.
14:01Ya cuma maksudnya tahun depan bakal ada lagi.
14:04Jadi bisa registrasi ini online kok. Registrasi terus ada heketonnya nih.
14:10Dari jam berapa sampai jam berapa.
14:12Tanggal berapa sampai tanggal berapa.
14:14Terus submit.
14:16Abis itu dia presentasikan.
14:18Kalau berhasil bisa dapat uang tuh.
14:205 juta dolar, 2 juta dolar, 1 juta dolar.
14:245 ribu.
14:265 ribu dolar.
14:285 ribu. / Maaf.
14:305 ribu lumayan itu.
14:325 ribu gede.
14:3470 juta ya.
14:36Tapi harus pakai Redwood pastinya.
14:39Biasanya boleh 3 orang.
14:41Sekarang sampai 3 orang.
14:43Ini bener-bener heketon beneran.
14:45Jadi kalau ada temen-temen yang tertarik bisa ikutan.
14:50Ada beberapa portfolio mereka disini tuh.
14:53Apa sih contohnya yang cukup-cukup?
14:56Belum dikenal sih, belum dikenal.
14:58Tapi ini apa tapi?
15:00Ini kan namanya Startup.
15:02Itu tape itu tuh screen.
15:05Kayak screenshot, screencast.
15:08Kirain itu testing library namanya tape juga ada.
15:12Hah, ada? / Ada, tape CS.
15:16Nah sama ini kayaknya si mas Tom itu.
15:21Dia tuh concern sama lingkungan.
15:24Dia tuh punya topik-topik environment.
15:27Jadi kayaknya di luar yang tadi tuh heketon atau apalah.
15:29Inkubator tahunan.
15:31Jadi dia punya duit.
15:35Duitnya dia, literally duitnya dia.
15:37Dia mau invest ke sekian startup atau produk.
15:41Yang emang punya misi membantu masalah lingkungan hidup.
15:46Kayak misalnya apalah.
15:48Kayak sampah buat daur gulang atau apa.
15:51Yang emang punya ada potensi punya real world impact.
15:56Tapi kan harusnya sebagai yang bikin aplikasi ini,
15:59ya kalau belum banyak duitnya kan belum bisa berbuat banyak ya.
16:03Nah sama kalau dia anggap potensi yang lama dia,
16:06itu kayaknya secara rutin lah setiap tahun atau setiap portal atau setiap apa.
16:11Dia emang bagi-bagi duit aja.
16:14Ke produk yang dia anggap memenuhi kriteria.
16:19Dan ya pakai redwood juga.
16:22Ini mungkin temen-temen mikir, wah ini gak ada yang dikenal.
16:27Ini kan yang tadi timnya satu sampai tiga orang.
16:31Indie hacker gitu ya.
16:33Ya bikin proyek-proyek yang sederhana.
16:36Yang mau mecahkan masalah tertentu gak buat semua orang.
16:41Dan bukan startup yang model unicorn gitu-gitu.
16:46Belum nyampe sih kesana.
16:48Yang snapchat lucu deh, bukan deh.
16:50Maksudnya ide apa, ide nya simpel.
16:53Simpel banget tapi ya bisa dibikin produk.
16:56Buat mempopulate isi data, isi database.
17:01Oh ini kayak veker.js bukan?
17:04Iya tapi kalau veker.js kan masih objek doang.
17:08Nah kalau ini.
17:09Udah langsung ya ada dam datanya ya.
17:12Lucu banget lagi ilustrasinya.
17:15Kok ini ya, bisa ya mereka mikir-mikir kayak gini ya.
17:19Kok kepikiran gitu ya, dijadiin produk ya.
17:22Apa aja dijadiin produk ya?
17:24Luar biasa ya.
17:26Lucu-lucu ya.
17:35Use case nya gimana? Coba lihat.
17:37Coba use case nya.
17:39Itu tadi scroll ke bawah coba.
17:42Oh itu ada link nya ya?
17:44Use cases di atas.
17:46Yang paling atas.
17:49Yang paling atas, use case.
17:51Oh yes, ini.
17:55Oh itu.
17:57Ya mau sukses atau engga, engga tau.
18:06Yang penting usahakan dulu.
18:08Tapi ini kan bikin website nya ini doang kan ya.
18:13Kalau tools nya kayaknya bukan pake redwood deh.
18:17Kan tadi ada login sama sign up.
18:21Mungkin buat dashboard.
18:23Ya dashboard kali ya.
18:25Gatau belum coba sih.
18:29Pricing.
18:330 dolar, oh abis itu kan ini.
18:42Nah kalau temen-temen penasaran gitu ya.
18:44Kayak gimana sih orang-orang demo nya.
18:46Ini ada di channel youtube nya itu.
18:49Ada demo day nya.
18:51Jadi kita bisa lihat.
18:53Produk yang dibikin pakai redwood.
18:56Kemudian dipresentasikan.
18:59Kalau lihat video gini tuh.
19:01Gue sering gitu juga sih.
19:02Kayak malah engga merhatiin isi produk nya.
19:05Merhatiin cara mereka presentasi apa aja.
19:08Maksudnya dengan waktu, itu kan cuma 5 menit tuh.
19:12Atau cuma beberapa menit lah.
19:13Maksudnya waktunya kan terbatas ya.
19:15Terbatas.
19:16Malah ada yang cuma 3 menitan.
19:18Kita kan apa ya, engga semua.
19:20Cuma rata-rata developer kan sulit komunikasi dengan baik.
19:25Buat orang diluar circle kita.
19:28Coba kita present product mungkin semua ditunjukin.
19:32Gimana caranya di ringkas dalam 3-5 menit biar bisa nampilin apa yang penting.
19:40Nah itu tuh seru banget sih.
19:42Seru ngeliat contoh gimana sih developer lain ngelakuin hal itu.
19:49Nah ini ada snaplet nih.
19:50Nanti nonton aja.
19:51Kalau penasaran bentuknya kayak gimana.
19:53Pasti didemoin kan cara pakai nya kan.
19:56Oke, sekarang kita balik lagi kesini ya.
19:59Nah, sekarang kita udah pitch deck nih.
20:04Udah kasih tau ke temen-temen yang coba pake apa.
20:07Kita kayak jualan ya.
20:09Iya makanya udah kayak devrelnya redwood.
20:11Padahal kita belum ada yang pernah pake redwood di product run.
20:15Gue juga kemarin sembarang ngomong favorit.
20:19Favorit tuh maksudnya dalam arti ngeliatin dari jauh lah.
20:23Cuma bisa memandang.
20:25Gak bisa pakai beneran di production kan.
20:29Lihatin dari jauh kan makin lama makin penasaran.
20:32Gak sempet banget.
20:33Ya episode ini disponsori oleh Redwood Jazz.
20:37Semoga beneran tercapai.
20:41Oke, nah sekarang langsung aja kalau gitu.
20:44Coba demoin deh.
20:46Coba deh tutorialnya aja.
20:48Tutorialnya kan seru tuh.
20:49Tutorialnya ini salah satu tutorial yang sangat bagus.
20:54Menarik sih.
20:55Menarik.
20:56Intuitif.
20:57Dan benar-benar well crafted ya istilahnya apa ya.
20:59Benar-benar dipikirin.
21:00Ya kayak dipikirin banget lah.
21:01Ada tujuannya, iya.
21:02Karena ada beberapa yang pernah.
21:04Pasusannya.
21:05Kenapa?
21:06Pasusannya Redwood pake Redwood Jazz juga kayaknya.
21:08Ya iyalah.
21:10Ternyata dibuka ada apa underscore underscore next.
21:13Oh ini, ini apa namanya?
21:17Dokumentasinya ya.
21:19Dokumentasinya jangan-jangan pakai dokusaurus.
21:22Itu apa dokusaurus yang kita bahas kemarin, enggak?
21:25Kita bisa lihat enggak, ini dokusaurus bener.
21:28Oh iya dokusaurus.
21:29Oh iya kan underscore underscore dokusaurus.
21:32Kalau dokumentasi sih udah umum sih ya.
21:36Eh kapan-kapan kita bahas itu yuk, documentation sites.
21:39Boleh.
21:40Live code, live code.
21:41Ayo live code.
21:42Siapa yang live code?
21:43Eka.
21:44Ya gue deh.
21:45Karena penasaran daripada ngeliatin dari jauh doang.
21:47Iya.
21:48Baik.
21:49Tutorial ini menarik sekali karena ada chapter-chapternya kayak buku.
21:53Dan di sini kita belajar bikin standar lah ya, bikin blog ya.
21:56Tapi bener-bener dipikirin gitu.
21:58Mulai dari awal sampai CSS-nya udah disiapin.
22:01Kalau misalkan kita nggak mau pakai CSS-nya dia, kita bisa bikin sendiri.
22:05Tapi dari dia udah disiapin jadi hasilnya bagus.
22:08Dan apa ya, ini kan si Redwood ini kan sebetulnya overwhelming banget.
22:14Kalau apa, ya maksudnya ini kan meta framework yang beneran segala ada ya.
22:19Apa?
22:20Dari testing, storybook segala macem.
22:24Coba kalau misalnya mereka mempresentasiinnya kurang baik.
22:29Pasti orang kayak pusing duluan kan.
22:31Anjir, ribet banget.
22:32Apaan sih nih, males.
22:33Kan pasti kayak gitu tuh.
22:34Tapi mereka apa?
22:36Ya menurut gue ini salah satu contoh yang bagus ya.
22:40Dalam hal dokumentasi dan ini kayaknya sih kayak udah diluar scope.
22:46Bahkan diluar scope kode.
22:49Kalau kode kan ya udah sebetulnya kan ini semua open source.
22:52Kasar-kasarannya mah, gampangnya maksudnya.
22:54Ya lu baca aja source code-nya dikira-kira sendiri.
22:57Atau lihat contoh website yang udah pakai Redwood.
23:01Cuma kan ini mengkomunikasikan gimana caranya pakai dengan cara yang se-friendly mungkin.
23:07Nah itu tuh kayak harus punya insight.
23:10Punya cara mikir yang lebih luas dari sekadar teknis kode.
23:16Betul.
23:17Ya mungkin karena ada latar belakang dari apa?
23:20Foundernya yang sudah bikin cara yang berhasil.
23:23Jadi mereka sangat memikirkan ini ya.
23:26Apa?
23:27Keberlangsungan si produk ini mereka jualannya bukan cuma fitur dan performance.
23:33Tapi lebih ke produk secara umumnya.
23:36Ini loh kayak hal sekecil ini situs dokumentasinya kan besar ya banyak.
23:41Karena maksudnya fiturnya banyak ya otomatis dokumentasinya banyak.
23:46Organized, how these dogs are organized aja dijelasin.
23:50Kayak oh ada ini, ada ini, ada ini.
23:53Terus bahkan urutannya juga nggak sembarangan loh.
23:57Kayak se-oh.
23:59Kirain ya cuma ya udah enak aja dilihatnya urutannya gitu.
24:04Ternyata enggak, urutannya pun udah dipikirin.
24:07Pertama kita ngikutin tutorial.
24:09Habis itu kita mungkin liat kalau tutorial jelas ya.
24:14Tadi ada ini di format pakai bab chapter keskripsi deh.
24:19Nah terus reference berdasarkan topic atau tema.
24:23Kita pengen tahu accessibility bisa langsung klik.
24:26Itu urut sesuai object loh itu reference-nya.
24:30Biar gampang kalau non-scrolling.
24:34Terus kalau how to isinya apa nih?
24:38How to isinya adalah oh kalau how to apa?
24:42Common use case kali ya, common user story.
24:45Developer story bukan user story.
24:49Well we expect you.
24:52Developer experience-nya bagus nih framework-nya.
24:57Nah kalau tutorial harus diikuti penuh.
25:02Maksudnya ekspektasinya kita ngikutin penuh.
25:05Tapi kalau misalnya reference dan how to ya nggak bisa dibaca satu persatu juga.
25:10Cuma misalnya tiba-tiba kita perlu, kita pengen tahu tentang router ya buka aja router.
25:16Dan seterusnya.
25:19Code sandbox apa sih yang bisa code container yang langsung di browser?
25:27Nah kita quick start aja nih 18 year.
25:31Ada nggak ya?
25:33Coba aja pakai stack bridge atau code sandbox bisa nggak sih ada container-nya?
25:40Ada kayaknya.
25:41Bentar caranya gimana nih?
25:44Biar bisa itu ya, moding bareng gitu ya?
25:46Bisa rame-rame.
25:49Ada nggak stack bridge? Kayaknya nggak ada deh.
25:52Stack bridge, redwood.
25:59Belum ada, adanya quick wassar, webcontainer, remix.
26:02Ah udah, hear dulu aja.
26:05Coba, bentar ngobrolin redwood.
26:10Ada pakai warp ya?
26:13Iya dong teamwork.
26:17Yoi.
26:19Eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh, eh.
26:29Salah lagi namanya.
26:32Redwood, time script.
26:34Iya.
26:39Nah, ini tuh sebenernya redwood yang menarik itu command line-nya lengkap.
26:55Oke.
26:57Lu kayaknya pernah punya contekannya tapi lupa di mana.
27:00Do you wanna? No.
27:03Apa nih? Dia nyuruh apa?
27:05Do you want to run your install? Yes.
27:08Di Trepo.
27:10Dipost aja ke git, nanti buka di Codespace.
27:13Bisa bareng-bareng nggak bisa ya? Nggak bisa, nggak bisa.
27:16Nggak bisa, bisa kolaborasi.
27:18Eh, bisa nggak sih? Invite ya?
27:22Bisa.
27:24Lama.
27:25Itu aja, apa, di VS Code, di share, apa, share apa namanya, live share ya.
27:31Oh iya, itunya live share ya.
27:33Nah, mending gitu.
27:35Biar berat.
27:38Laptopnya.
27:41Cuma streaming.
27:43Cuma streaming lagi.
27:45Gobrolin, redwood.
27:50Gedein dong, gedein dong, di zoom, di zoom.
27:53Terminalnya.
27:55Terminal cuma sebentar ya, nggak apa-apa, nggak usah, nggak usah.
28:00Nggak apa-apa, biar kelihatan juga, nanti kan ada domen-domennya.
28:06Banyak soalnya.
28:08Banyak, art, artik union, internet gue jelek.
28:14Hei, lupa.
28:17Hei, awas ya, aku close.
28:20Postgres ya?
28:22Databis, defaultnya postgres ya?
28:24Bisa pakai SQLite, kayaknya kalau buat tutorial, SQLite deh kalau nggak salah.
28:29Tapi settingnya dimana?
28:33Kirain langsung dari CLI nggak ya?
28:35Kira-kira ada deh, somewhere, nanti kita lihat.
28:39Nah, iya ampun, ini beneran keskripsi, coba ada kata pengantarnya.
28:44Oh iya, for what?
28:47Ini tutorialnya ada kata pengantar.
28:49In this tutorial, we're gonna build a block engine.
28:52Cuma, maksudnya sampai ada disclaimer-nya gitu, walaupun tutorialnya buat bikin block.
28:59Tapi dalam penyataannya ya, Redwood bukan untuk kurang cocok untuk bikin block.
29:06Block, kurang cocok ya? Kenapa?
29:10Terlalu sederhana.
29:14Iya kan, block articles can be stored in a CMS.
29:22Ya udah, nggak usah serumit, nggak usah can roll authentication.
29:27Bikin block, ngapain pakai GraphQL segala ya?
29:31Iya, makanya.
29:33Saya pernah mengalami gara-gara Gatsby.
29:37Gatsby.
29:39Capeh-capeh.
29:41Mau ngeditnya, mau ubah-ubahnya, ribet, ya.
29:45Jadi deh, balik lagi, rewrite lagi.
29:49Tapi jadi belajar sih.
29:51Oh iya, pasti.
29:53Ya, kenapa sih?
29:55Makanya pakai PNPM.
29:57Loh, disuruhnya Yarn, kita nge-team.
30:00Oh Yarn ya, dia tim Yarn ya.
30:03Makanya pakai Boon.
30:06Oh iya.
30:09Nih, call-outs.
30:11You'll find some call-outs throughout the text to draw your attention.
30:15Ada tiga macem tip, caution, danger.
30:20Ada info.
30:23Ya, oke lanjut.
30:26Ya ampun.
30:28Masih lagi.
30:29Masa selama ini, nggak mungkin deh.
30:31Hello Brolin Redwood.
30:39Yarn install.
30:42Coba sambil kita lihat-lihat ya, isinya apa.
30:49Blah-blah, ini yang penting.
30:51ENV, standar lah ya.
30:53This file should not be checked.
30:56NVMRC apa, NVMRC?
30:58Versi note yang dibutuhkan?
31:00Apa?
31:01Oh nggak, bukan.
31:02LTS.
31:03Oh iya, yang LTS doang ya.
31:07Ada konfigurasinya, GraphQL.
31:09Dia udah pakai DB.
31:12Data base-nya gimana nih?
31:14SQLite local kayaknya tadi, ada deh.
31:17SQLite, ya SQLite local tuh.
31:19SQLite.
31:20SQLite.
31:21Default-nya itu ya, SQLite ya berarti ya.
31:26Itu error?
31:30Running install.
31:33Tadi kenapa error?
31:35Nggak bisa pakai singkatan "i" ya kalau yarn kayaknya.
31:39Oh iya ya.
31:44Tapi maksudnya pesan error-nya nggak gitu sih.
31:46Tapi begitu di jalanin yarn install muncul ini.
31:49Tadi kan nggak muncul ini kan?
31:50Nggak.
31:51Ya, suka aneh.
31:54Harusnya kan pesan error-nya, ini bukan npm.
31:57Jangan singkat-singkat.
32:01Yang minimal kan apa command not found atau apa?
32:04Ya command not found ya.
32:06Coba lihat package toh Jason-nya apa aja sih.
32:08Packagenya apa aja sih?
32:10Dependency-nya.
32:11Package Jason.
32:14Dibungkus, udah dibungkus kayaknya.
32:16Iya, ini, ya ini.
32:20Dia punya IS lane sendiri.
32:24Prisma itu apa sih?
32:25Oh Prisma itu.
32:27ORM.
32:28ORM database yang itu banget lah, JavaScript banget.
32:34TypeScript banget.
32:37Yang TypeScript banget.
32:39Ah, nggak suka.
32:40Nggak suka.
32:42Nggak suka apa?
32:43Nggak suka single code.
32:44Oh, single code.
32:45Team double code.
32:54Welcome to my tool.
32:55Kan dia opinionated.
32:57Opinionated.
32:58Iya kan opinionated.
33:00Opini boleh write sesuai ke selera.
33:06Yang TypeScript help.
33:09Prisma in the database.
33:11TypeScript wouldn't be a full-stack framework without a database.
33:15Oh, dia pakai Fastify ya.
33:19Mana sih?
33:23Nggak, lagi ngecek NPM.
33:26Ini ada config-graphql, udah dikasih.
33:32Config.js, udah deh.
33:34Kalau nggak perlu ngeliatin beginian, bagus lah, syukurlah.
33:38Ya.
33:41Apalagi struktur folder-nya gimana?
33:44Oh, nanti ada penulisannya ya.
33:46Hadusnya nanti ya.
33:48Ini tommelnya, kok ada tommel lagi sih?
33:51Ada yaml, ada tommel, banyak banget.
33:53Nah, tommel itu bahasa bikinannya sih, mas Tom itu juga yang bikin.
33:58Makanya namanya tommel.
33:59Iya.
34:00Maksudnya ada pakai yaml, itu LC yaml, ada.
34:08Kenapa nggak tommel semua gitu ya?
34:10Ya, gitu loh maksudnya.
34:12Ya, gimana lagi?
34:14Obvious Minimal Injits.
34:16Karena dia yang bikin ini, apa config-nya nggak pakai yaml?
34:25Wah, ini dia sangat idealisme sekali ya.
34:32Lagi bikin apa sih ini, Darwin NPL.
34:38Jangan-jangan itunya, apa namanya, SAS.
34:42Yarm-nya SAS.
34:44SAS?
34:46Iya itu.
34:48Lagi ngobil, ya.
34:50React Hot Toast.
34:55Coba.
34:57Bentar.
34:59Wah, ini 30 menit sendiri nih.
35:01Wah, ketauan.
35:03Eka lagi di cold and brew, lantai satu.
35:06Iya.
35:08Lambat ini, jan-jan gara-gara ketauan lagi live stream, jan-jan di troto.
35:13Jangan-jangan ini provider-nya rumah indie.
35:21Eka pindah koneksi itu.
35:23Provider-nya rumah indie.
35:25Eka-nya mati.
35:27Eka-nya mati.
35:29Koneksinya maksudnya.
35:31Dia pindah koneksi.
35:33Pindah koneksi, nge-freeze dulu.
35:35Nah, jangan-jangan ini provider-nya rumah indie, kita bisa pake NPM registry.
35:44Masa sih?
35:46Iya.
35:47Masa?
35:48Di block.
35:49Apa?
35:50Atau di trotal, gak tahu sekarang ya.
35:52Apa?
35:54Coba, coba.
35:55Ada yang pemakai rumah indie, coba bisa kasih opini.
35:59Katanya gitu.
36:00Entah ada di trotal atau di block ya.
36:02Udah lah, harusnya rumah indie provider-nya itu tadi apa yang kita bahas di awal?
36:06Indie Hacker.
36:08Nah, kita sambil baca ini aja lah.
36:10Yang lama banget pusing.
36:12What is Redwood?
36:14Nah, ini dia definisinya.
36:16Preact Framework with lots of pre-installed packages and configuration.
36:22Nah, bla-bla-bla.
36:25Nah, ini nih kan terakhir nyoba tutorialnya tahun lalu itu masih versi 4 atau 5 gitu.
36:34Nah, itu tuh belum pake fit.
36:37Belum ada fitnya.
36:38Kalau gak salah mulai versi 6, udah say goodbye to webpack pake fit.
36:44Bla-bla-bla.
36:47Oh, sekarang udah react server component ya?
36:52Udah.
36:54Udah ada sih sebenarnya.
36:57More on those later.
37:00More on those later, okay.
37:02Getting data from the backend should be simple, bla-bla-bla.
37:07Create convention.
37:09Redwood app actually 2 apps, a frontend and a backend.
37:14Jadi ada 2 ya, ada 2 app ya.
37:17Redwood ini setara, dia meta framework ya?
37:25Setara Next.
37:27Iya.
37:29Tapi malah lebih preskriptif, malah lebih mirip old school framework gak sih?
37:35Kayak Laravel, Ruby on Rails.
37:37Ya, yang full stack.
37:39Kalau Next itu kan masih cukup minimal ya.
37:42Frontend, ada backend, udah gitu kan.
37:44Gak ada RM.
37:47Masih terlalu banyak kebebasan ya.
37:50Kayak apa? Masih terlalu banyak yang kita harus mikir dan ngerancang sendiri.
37:56Kalau ini nih, ini kan apa?
37:59Actually 2 apps, udah kita dikasih frontend sama backend.
38:04Technically Monorepo.
38:07Nah ini API, jadi masing-masing ternyata ada package JSON-nya sendiri.
38:12Menarik ya.
38:14Ini API nih.
38:17Oke, sama GraphQL Server.
38:22Kan ini web, ini frontend.
38:26Nah ini coba punya 2 monitor, enak ya.
38:32Jadi tergoda beli monitor ini.
38:34Tuh, kata Audi, kemarin Google Doc sama Versa kena blockir. Iya tuh, heboh tuh ya.
38:42Aneh-aneh aja yang di blockir.
38:46Another JSON, kita lagi window shopping.
38:53Lihat-lihat framework baru.
38:56Nah ini nih yang API, dia punya package JSON sendiri.
39:00Benar sih, tutorialnya itu tadi yang paling atas ini.
39:05Yang paling atas ini kayak cuma meregister aja.
39:09Package JSON-nya ini, API dengan web.
39:13Nah terus ini API, dependencies-nya ini.
39:17Kalau ini yang frontend-nya web.
39:20Bisa ditiru nih ya, arsitekturnya ya.
39:24Ya semua ini bisa ditiru, cuma ini kan kelebihan kita nggak usah mikir...
39:30Konfigurasinya.
39:32Kayaknya udah selesai deh tuh.
39:35Coba lihat terminalnya.
39:37Kan selesai kan?
39:39Selesai.
39:41Di throttle tadi.
39:43Di throttle dari cafe-nya kayaknya.
39:45Biar nggak semua orang streaming.
39:48Enggak, banyak yang itu, banyak indie hacker di situ, banyak pake npm install.
39:54Di throttle.
39:56Wow.
39:58Generating Pisma Client, oke.
40:02Wih.
40:04Tadah, cepet ya pake pip.
40:08Cepet.
40:10Wait, grafika endpoint-nya di 8.9.1.1.
40:14Oh bisa buka back-end-nya database-nya ya?
40:16Back-end-nya ya, 8.9.1.
40:188.9.10 sama 8.9.11.
40:22Nice, oke.
40:24Apa?
40:26Kamu bisa forwarded port lu.
40:28Bisa loh.
40:30Dari PS Code.
40:32Gimana caranya?
40:34Comment-nya apa?
40:36Comment P, forward a port.
40:40Coba klik.
40:42Forward a port.
40:468.9.10 berarti ya?
40:508.9.10, iya.
40:52Ya.
40:54Olah.
40:56Nanti tunnel dulu dia ke...
40:58Ke punya-nya si...
41:00Ya, lewat GitHub dan Microsoft.
41:04Udah.
41:06Asik juga ini.
41:08Ya.
41:10Sekalian kayak acara yang C.
41:12Siapa tau kalian mau...
41:14Jadi buat temen-temen misalnya...
41:16Lagi bikin sesuatu akses.
41:18Lalu gitu.
41:20Itu klik aja itu.
41:22Klik aja itu yang tanda...
41:24Copy.
41:26Siapa tau kalian punya klien...
41:28Mau ngedemo-in tapi ngedemo-in...
41:30Pakai komputer lokal.
41:32Kayak NG Rock lah gitu ya kira-kira ya.
41:34Tapi sudah bawa-annya si...
41:36Sudah bawa-annya si...
41:38Duh, belum.
41:40Kok pakai user-nya Microsoft?
41:42Ya, dia harus ini...
41:44Apa namanya?
41:46Oh, bisa dibikin.
41:48Bentar, Eka bisa...
41:50Eka bisa ke sini.
41:52Eka...
41:54Itu ke screen-nya Eka yang...
41:56Forwarded port.
41:58Klik karena itu visibility kan private.
42:00Bikin jadi public.
42:02Port visibility public.
42:04Dah, continue.
42:08Allow dulu.
42:10Sudah, nah baru...
42:12Kunjungin lagi tadi link yang tadi.
42:14Klik aja tadi forwarded port yang link ya.
42:16Tadaa.
42:18Wow, sudah bisa dibuka.
42:20Iya, continue.
42:22Dan...
42:24Sudah kelihatan.
42:26Tadah.
42:28Welcome to forwarded port.
42:30Ayo, silahkan.
42:32Wow!
42:34Asik.
42:36Asik deh.
42:38Yang mau DDoS.
42:40Yang gak ada komanya begini bang.
42:42Gimana cara DDoS-nya?
42:44Dah, bikin, bikin, bikin.
42:50Ayo.
42:52Terlalu.
42:54Reaction decision.
42:56Custom declarative.
42:58Nah, ini salah spelling nih.
43:00Nanti submit PR.
43:02Yes.
43:06Sudah lewat.
43:08Gak apa-apa.
43:10Lumayan.
43:12Ini routing-nya.
43:14Temburu swag.
43:16Temburu swag.
43:18Routes.
43:20Oh gitu.
43:22Ini kan.
43:24Home page.
43:26Jadi home page.
43:28Oh, coba kita lihat note found-nya kayak gimana.
43:36Oh.
43:38Eh.
43:40Pre-render.
43:42If you have content on that page.
43:44Ya.
43:46Oh, bisa.
43:48Kalau kita perlu static, bisa nih.
43:50Sudah ada pre-render.
43:52Kalau perlu.
43:54Ini.
43:56Reboot version of SSG.
43:58Kalau mungkin kayak home.
44:00Eh, static saja.
44:02Eh, static saja.
44:04Ini private buat login ya.
44:06Buat login ya.
44:08Buat protected route.
44:10Private itu ya protected.
44:12Wow.
44:14You can also use your own.
44:16Include integration to many
44:18popular third-party out-house.
44:20As well the option.
44:22The home page is accessible.
44:26Tuh, maluannya
44:30pake DevTunnel juga.
44:32Sekarang pake DevTunnel.
44:34DevTunnel ini punya yang Microsoft berarti ya.
44:36Iya, tadi kan itunya.
44:38Microsoft.
44:40Sudah bawaan.
44:42Ada extension dari PS Code.
44:44Tapi itu udah kayak core.
44:46Bawaannya, otomatis
44:48terinstall.
44:50Apollo Client, jadi GraphQL.
44:52Di front-end pake Apollo Client.
44:54Terus ada hooks-nya.
44:56But if you could have
44:58a component.
45:00Oh, Cratebook punya
45:02konsep sendiri namanya
45:04cell.
45:06Cell, bukan cell yang
45:08di Dragon Ball.
45:10Cells.
45:12A cell is still
45:14just a react component.
45:16It just
45:18happens to follow
45:20a couple convention. Jadi ini
45:22sebenarnya komponen biasa. Cuma mereka
45:24punya kayak standar convention
45:26tertentu.
45:28Namanya doang, nama.
45:30Ada export.
45:32File can optionally export.
45:36You can probably guess
45:38what those are for. Nah, ini nih
45:40yang bener-bener Redwood tuh kayak
45:42apa. Udah disiapin
45:44semuanya ya. Ini kan sebenarnya kita bisa bikin sendiri.
45:46Maksudnya kalo cuman nge-export function
45:48mah kayaknya semua orang yang udah bisa react banget ngerti.
45:50Cuma dia udah bikin
45:52standar yang tinggal diikutin aja.
45:54Query, success, loading,
45:56failure, empty. Kayaknya keterlaluan
45:58kalo gak, gak paham ini
46:00buat apa ya. Maksudnya apa ya.
46:02Tapi itu seni sendiri loh. Maksudnya kita
46:06kalo kita yang bikin, kita gak ada panduan
46:08gini, mungkin kita pake istilahnya belibet lah.
46:10Maksudnya kurang, gak sejelas
46:12ini. Tapi mereka
46:14tuh kayaknya ngedesign
46:16demikian rupa yang sampe
46:18relatif,
46:20gampang, mudah dipake dan
46:22mudah dimengerti.
46:24Tapi ini tuh kayak penjelasannya ya.
46:26Ah, langsung, pengen yang langsung loading lah.
46:28Langsung aja langsung.
46:30Captor 2, Captor 2. Eh, Captor 3
46:32kalo gak salah.
46:34Installation kan udah, lah kan udah
46:36install kan.
46:38Itu, Redwood file structure aja.
46:40Redwood file structure.
46:42Udah nih, udah semua.
46:44Nah, ini kan
46:46udah muncul kayak gini nih.
46:48Ada tipsnya, oke.
46:54Oh, kenapa 8, 9, 10 tuh karena
46:56supaya gampang dilihat.
46:58Iya, itu tadi 8, 9, 10.
47:00API-nya 8, 9, 11.
47:02Karena habis 10, 11.
47:04Ya.
47:06Postgre kan 5, 4, 3, 2.
47:085, 4, 3, 2.
47:10Ya, mundur.
47:12Type script.
47:14DB ada scheme-nya.
47:16Gak tau, gak paham.
47:183, 3, 0, 6.
47:203, 3, 0, 6.
47:22Hari main workplace itu ya.
47:24Naval. Type script.
47:26Schema.
47:28Wah, iya.
47:32Udah ada.
47:34Tuduh.
47:36Tetabisnya udah ada default ininya apa?
47:38Tuduh. Oh, bukan.
47:40Usar ya? Usar?
47:42Belum ada. Belum ada.
47:44Oh, belum ada. Ini contohnya.
47:46Please remove the following example.
47:48Ya, ini cuma biar
47:50ada bayangan aja bentuknya kayak gimana.
47:52Ada sheet-nya juga
47:54kalau mau tambahin data.
47:56Terus apa lagi?
47:58SRC.
48:00Component layout pages.
48:02Standard lah ya.
48:04Standard ya.
48:06Tadi kita udah lihat.
48:08Inredwood.
48:10Ini.
48:12Oke.
48:14Kita kan mau bikin block nih.
48:16Pakai mark.
48:18Ini untuk markdown ya.
48:20Cuma ini lucu deh.
48:22Dia kan lagi ngejelasin.
48:24Ini kan mono repo.
48:26Ada 2 bagian.
48:28Kalau istilahnya yarn,
48:30yarn workspaces.
48:32Kalau bahasanya reboot,
48:34mereka menyebutnya sites.
48:36Jadi ada 2 sites ya. Web dan API.
48:38Terus,
48:40kalau misalnya kita mau install, caranya gimana?
48:42Nah, ini.
48:44Ya, standard lah.
48:46Kalau pakean workspaces pasti
48:48udah tau kan.
48:50Oh, makanya dia pake yarn.
48:52Karena dia mono repo.
48:54Terus lucu gitu.
48:56Ada warningnya jangan dijalani.
48:58Ini contoh doang.
49:00Oke.
49:02Nah, terus ada.
49:04Karena yarn workspaces.
49:06Contoh cara install.
49:08Sesuatu dependensi.
49:10Nah, terus
49:12kalau utility yang dipake
49:14kedua nya, scripts.
49:16Mana ada nggak ya?
49:18Oh, nice.
49:20Ada sheet buat masukin data.
49:22Data dummy.
49:24Ya, terus kita
49:28kalau punya utility apapun
49:30yang dipake kedua
49:32package, kedua
49:34site, bisa kita taruh di scripts.
49:36Directory.
49:38Ada 4 directory
49:40di API.
49:42Rafke nanya, Microsoft SQL
49:44berapa? Gatau.
49:46Tanya sama anak dotnet.
49:48Directives.
49:54Functions. GraphQL.
49:56Saya pake soket.
49:58Oh iya, gak pake gitu ya.
50:00Eh, gak pake port ya.
50:02Untungnya belum pernah pake.
50:04Required out. Nah, ini apa?
50:08Nanti kita...
50:10Oke, next dulu.
50:12Services itu apa?
50:14Services buat itu ya?
50:16Apa namanya?
50:18Ya, service.
50:20Business logic.
50:22Business model.
50:24Business logic.
50:26Ngecek kalau user
50:28level 1.
50:30Dikasih privilege apa aja.
50:32Bahkan ini kan belum ada isinya.
50:34Karena ini kan cuma kayak template starter.
50:36Tapi udah dikasih folder-nya.
50:38Ya, kayaknya dibutuhkan dari belakang banget.
50:40Web Directory.
50:48Lanjut.
50:50Itu buat front-end-nya.
50:52Lanjut.
50:54Public. Contains. Asset.
50:56Asset. Standard ya.
50:58S-R-C, component layout.
51:00Standard ya, udah pada tau ya.
51:02Component layout, pages.
51:04App ini entry point-nya ya.
51:06Semacam entry point buat
51:08aplikasi rate app-nya.
51:10Terus dia masuk ke provider.
51:14Apollo provider
51:16sama router.
51:18Ya kan?
51:20Dari routes
51:22baru masuk ke halaman.
51:24Our first...
51:28Entry? Entry ini apa?
51:30Entry point yang
51:32render app.
51:34Ini yang render app.
51:36Ini yang render app.
51:38Oh, yang biasanya main ya.
51:40Main.tsx gitu ya biasanya ya.
51:42Oke, oke.
51:44Terus...
51:46Kayaknya kalau di Next.js, ini namanya
51:48app.tsx ya gitu.
51:50Coba our first page aja langsung.
51:52Ya. Oh, ini ada
51:54generator-nya ya?
51:56Iya, semua generator base.
51:58Oh.
52:02Kita meng-generate
52:04page yang namanya home.
52:06Yang berarti...
52:08Laravel.
52:10Jenggo.
52:12Artisan.
52:14Yes.
52:16Apa yang dibikin?
52:20Nguju aja sih.
52:22Masa semuanya.
52:24Generating page files suksesfully.
52:26Right?
52:28Ini.
52:30Oh, home page.
52:32Oke.
52:34Jadi namanya home page.
52:36Mana sambil dibuka.
52:38Di web, web, web.
52:40Sarsi, pages,
52:42home page.
52:44Ada storage-nya.
52:46Ada test-nya.
52:48Ada home page-nya dulu.
52:50Ada.
52:52Home page.
52:56Coba lihat test.
52:58Pake apa dia test-nya?
53:00React library nggak?
53:02Jazz.
53:04Testing library. Oh, jazz ya.
53:06Bukan. Tapi nggak pake testing library.
53:08Kayaknya nggak nih.
53:10Nggak ada di dependency.
53:12Punya sendiri?
53:14Punya sendiri?
53:16Gak. Eh, iya...
53:18Miss itu kan runner kan?
53:20Wih, udah berubah nih.
53:22Mungkin dibandel di dia.
53:24Udah berubah. Mana-mana? Belum lihat.
53:26Di halaman.
53:28Langsung berubah ya.
53:30Nggak, nggak direfresh dari tadi.
53:32Pas di...
53:34Autoreal load kan, V.
53:36Secepat cahaya.
53:38Ya.
53:40Ya, kirain di lokal host doang.
53:42Ini kan, oh ya, port forwarding ya.
53:44Langsung dia ya. Bisa dia...
53:46Ya kan, re-forward. Apapun yang di port ini.
53:48Dia ter-upload.
53:50Storybook.
53:52Storybook jalan gimana ya?
53:54Satu, dua, tiga.
53:56Kayaknya harus jalanin...
53:58Jalanin ini deh.
54:00Kalau storybooknya...
54:02Sudah harus...
54:04Ada portnya sendiri.
54:06Nanti coba... Pasti ada babnya sendiri sih.
54:08Nanti sabar.
54:10Chapter 5 tuh.
54:12Coba-coba.
54:14Cukup aja.
54:16Klik aja.
54:18Oh, ya udah sesimple itu ya.
54:20Coba ya.
54:22Bener.
54:24Testingnya dependensi kepada...
54:26React testing library.
54:28Punyanya cancidot.
54:30Makanya ada render tadi.
54:32Bener, bener, bener.
54:34Sudah dicek. Lanjut, lanjut, lanjut.
54:36Ini apa nih?
54:38Storybook, storybook.
54:40Oh, storybooknya jalanin.
54:42Oh, langsung di jalanin ya.
54:44Enak sekali ya. Kita susah payah loh.
54:46Konfigurasi.
54:50Ada yang CSS-nya nggak keload lah.
54:54Perlu geset uploader sendiri.
54:56Ada yang typescriptnya nggak kebaca.
54:58Nah, sambil nunggu storybook install.
55:00Kita lanjut tutorial yang tadi ya.
55:02Oh, kita tambahin juga...
55:06Ke apa?
55:08Routes ini.
55:10Nah, jadi apa?
55:12Oh, yang tadi, yang di generate tadi ya.
55:14Iya.
55:16Ya, otomatis nggak override.
55:18Itu...
55:20Keren, keren, keren.
55:22Ada homepage, otomatis.
55:24Oh, iya ya.
55:26Masa?
55:28Otomatis.
55:30Kita nggak mengimport homepage ini dari mana?
55:32Nah, diimpor...
55:34Magic.
55:36Magic.
55:38Ini kalau nggak dibaca, ini bingung sendiri nih.
55:40Iya.
55:42Bisa bikin anak...
55:44Apa namanya?
55:46Anak yang belajar
55:48framework.
55:50Jadi bingung, ini kemana?
55:52Kalau nggak, ini bahaya sih.
55:54Sudah biasa pake redwood,
55:56pindah ke framework lain, bingung.
55:58Nggak diimpor.
56:00Oh, tapi mungkin banget tuh, misalnya pindah ke...
56:02Next.js kan mirip ya.
56:04Maksudnya itu juga
56:06abstraction kan, meta framework, abstraction.
56:08Mungkin kalau orang yang nggak biasa
56:10pikir, oh iya, paling udah diimportin,
56:12paling udah diurusin sama Next.
56:14Ya, paling nggak kan error kan
56:16udah tahu, oh ini nggak diimport, berarti harus manual.
56:18Gitu kan.
56:20Kalau alikannya baru...
56:22Ini nggak di garis...
56:24Itu kan dia pernah ISL-in sendiri ya tadi.
56:26Nggak, nggak error.
56:28Gak apa-apa.
56:30Tanda ke JSL.
56:32Si VS Code-nya nggak
56:36otomatis importnya.
56:38VS Code-nya nggak otomatis import.
56:40Biasanya kan kalau belum diimport, dia bisa
56:42nawarin mau otomatis import nggak.
56:44Ini nggak ada ya.
56:46Dia paham, dia ngerti.
56:48Tenang si Redwood.
56:50Redwood-nya, maksudnya dibalik
56:52layar nih.
56:54Dia auto-generate types
56:56includes.
56:58Jadi setiap kita jalanin, kita bikin
57:00ini nih tadi di generator.
57:02Ya, ditambahin lagi ya
57:04lagi ini ya.
57:06Coba lah kita eksperimen gitu.
57:08Eh bentar, si storybook-nya udah
57:107, 9, 10.
57:12Oh, ada ini ya.
57:16Ada scaffold-nya juga.
57:18Back-end dan front-end.
57:20Sesimple ini sih.
57:22Udah gini doang.
57:24Mantap.
57:26Nah bentar, kita cek lagi nih.
57:28Misalnya tadi, apa sih?
57:30Buat generate
57:32page tadi, apa tuh?
57:34Ya, add.
57:36Enter way, generate
57:38page.
57:40Eka.
57:42Gini ya.
57:44Tadi katanya bisa crude, coba bikin
57:46crude, back-end, front-end.
57:48Bentar, sabar.
57:50Route dulu, pengen nyoba.
57:52Wah.
57:54Kita cek.
57:56Canggih ya.
57:58Tadah.
58:00Wah.
58:02Nah, sekarang kita cek
58:06tadi, routes.
58:08Tadah.
58:10Terus type definition-nya.
58:12Muncul juga.
58:14Nah.
58:16Masih banget.
58:18Oh, ya
58:20dimatiin.
58:22Airway storybook.
58:24Nikmat sekali ya.
58:28So simple itu ya.
58:32Sampai apa? Type definition-nya
58:34juga udah ditulisin ya.
58:36Wah, ini Redwood
58:38memanjakan sekali.
58:40Begitu dia
58:42hire, suruh ngertiin next.js.
58:44Ramek dia.
58:46"Sial, harus nambahin ini."
58:48Lah, makanya kan
58:50ada disclaimer-nya si
58:52Redwood buat orang
58:54yang pengen bikin produk.
58:56Perkara unity kerja bingung
58:58sendiri, bukan urusan
59:00buat Redwood.
59:02Ya, kita lanjut ke tutorial.
59:04Berarti udah aman ya.
59:06Ini.
59:08Routes-nya juga tadi kita udah
59:10lihat. Yang penting
59:12route-nya ada
59:14part-nya ini.
59:16Simple styles.
59:18Nah, dia udah scoping
59:20siapa?
59:22Dia udah nyampein ini.
59:24Dan CSS style-nya kita bisa
59:26nulis, jadi gausah
59:28ribet-ribet kayak gimana.
59:30Gausah pake CSS module ya.
59:32Gausah pake CSS module ya.
59:34Nah, pake CSS module
59:36atau nggak, nggak tahu. Kayaknya nggak deh.
59:38Kayaknya loh. Web.
59:40Jangan-jangan sebenarnya
59:42pake CSS module tapi import-nya
59:44disembunyikan.
59:46Jangan-jangan dia urusin ini under the hood juga.
59:48Sama nggak tahu
59:50dimana. Mungkin ini tutorial cuman
59:52pake CSS biasa ya.
59:54Tapi sebetulnya, kalau nggak salah, install
59:56nailwind juga cuma satu komen doang.
59:58Oh, oke.
1:00:00Mari kita cek.
1:00:02Coba ya.
1:00:04Oh, ini udah.
1:00:08Ini udah. Bagus ya.
1:00:10Coba deh.
1:00:12Framework Glide.
1:00:14Framework Glide.
1:00:16Comic Sans
1:00:18MS.
1:00:20Weee!
1:00:22Si Comic Sans.
1:00:26Comic Sans.
1:00:28Green.
1:00:30Ah, bikin ini.
1:00:32Geocities.
1:00:34Rebecca.
1:00:40Nah.
1:00:46Oke. Kita lanjut.
1:00:48Second page link.
1:00:50About.
1:00:52Oke. Udah lah ya.
1:00:54Ini bisa lewatin aja nih.
1:00:56Nggak, kan biar bisa
1:00:58billing. Biar bisa billing.
1:01:00Tadi kan udah bikin
1:01:02EKA kan? Oh, iya.
1:01:04Maksudnya billingnya kayak EKA page nggak enak.
1:01:06Ya, biar bisa kok pasti.
1:01:10Home page TSX.
1:01:12Oh, iya, iya.
1:01:14Ini meta text-nya juga
1:01:18udah dikasih component sendiri.
1:01:20Oh, ini ya react helmet ya?
1:01:22Helmet.
1:01:24Helmet.
1:01:26Helmet kan bahasa Inggrisnya.
1:01:28Redwood loves
1:01:30function components.
1:01:32Oke.
1:01:34Oh, ini.
1:01:36Linknya.
1:01:38Dia juga punya router sendiri.
1:01:40Pasti.
1:01:42Wah, linknya harus pakai
1:01:44linknya dia ya.
1:01:46Itu dikirimakan jadi apa?
1:01:48Yang mau pakai ahref biasa,
1:01:50boleh aja. Tapi kan kita jadi
1:01:52nggak bisa pakai fitur-fiturnya dia.
1:01:54Ini routing library ini dia pakai apa?
1:01:58Router apa?
1:02:00Kayaknya dia hand roll sendiri deh.
1:02:02Redwood.
1:02:04Router.
1:02:08Nah, coba.
1:02:16Jadi penasaran.
1:02:18Like a page.
1:02:20Ini gimana?
1:02:22Autocomplete nggak?
1:02:24Wee.
1:02:26Kan sudah ada type-nya tadi.
1:02:28Iya, udah ada type ya.
1:02:30Oh,
1:02:32link2-nya nggak pakai
1:02:34string ya.
1:02:36Coba ya kita.
1:02:38Mantap, mantap, mantap.
1:02:40Kita lihat.
1:02:42Wee.
1:02:44Ah, ahref biasa.
1:02:46Ih, link biasa.
1:02:48Coba kita please.
1:02:50Gak ada isinya.
1:02:54Gak ada isinya?
1:02:56Kok nggak muncul?
1:02:58Tapi buat muncul?
1:03:00Ini bisa.
1:03:02Eka harusnya tadi hahaha.
1:03:04Iya.
1:03:06Iya.
1:03:08Kenapa ya? Ada yang salah.
1:03:10Itu ada error nggak?
1:03:12Errornya banyak, 10.
1:03:16Error apa ini?
1:03:18Kayaknya extension.
1:03:20Enggak, kosong.
1:03:24Oh, cuma emang nggak keluar. Kenapa ya?
1:03:26Ti heart reload pun nggak muncul.
1:03:30Eh, bisa.
1:03:34Itu bisa?
1:03:36Loh.
1:03:38Ada yang...
1:03:40Ya, dipikir nanti.
1:03:44Kita lanjut tutorialnya.
1:03:46Back home.
1:03:52So,
1:03:54oh, about page change.
1:03:56Iya, ini about.
1:03:58Supaya bisa
1:04:00forward dan back.
1:04:02Setelah kita data.
1:04:04Nah.
1:04:06Nah, ini roads-nya home.
1:04:08Ke home.
1:04:14Nice.
1:04:16Iya, ini intinya.
1:04:20Soft navigation itu apaan sih?
1:04:22Soft navigation-nya dia.
1:04:24Hah?
1:04:28Ya, maksudnya apa?
1:04:30Client-side navigation kayaknya deh.
1:04:32Di-hijack.
1:04:34Jadi, event kan ada, apa, netif.
1:04:36Maksudnya, ada dot-in-gap API kan. Event on-navigate.
1:04:38Atau apalah semacamnya.
1:04:40Pokoknya yang, kalau kita nge-click
1:04:42men-anchor, akan ada yang fire.
1:04:44Nah, routing library kan
1:04:46semacam nge-hijack itu.
1:04:48Keliatannya sekarang tuh.
1:04:50A-hard-nya sendiri gimana?
1:04:52Kalau A-hard-nya sendiri, dia bakal
1:04:54nge-hijack nggak?
1:04:56Kayaknya hard reload deh, cobainya.
1:04:58Eh, bentar.
1:05:00Di ini aja, di...
1:05:04Nggak, ga usah dibandingin aja.
1:05:06Oh, ya. Terserah deh.
1:05:08About page
1:05:10page.
1:05:12Ini ya?
1:05:20Refresh.
1:05:22Refresh, refresh.
1:05:24Request response, kalau yang itu
1:05:26client. Kecuali kalau JavaScript-nya
1:05:28dimatiin kali.
1:05:30Ada interrupt ya?
1:05:32Interrupt, ya.
1:05:34Ketik-hijack event.
1:05:36Ya, hijack.
1:05:38Nah,
1:05:40as a world-class developer,
1:05:42you probably saw that.
1:05:44Copy pasted header and gasped in
1:05:46discuss. Yang lucu, tutorialnya
1:05:48tuh kayak semi-bercanda gitu.
1:05:50Maksudnya tetap serius, tetap helpful.
1:05:52Maksudnya technical details-nya tetap
1:05:54lengkap, tapi dia kadang bercanda.
1:05:56Tapi kalau bercanda terus so asik, itu kan nyebelin juga.
1:05:58Jadi, dia apa?
1:06:00Ngelucunya ya dikit-dikit lah.
1:06:02That's why Red Hood has
1:06:04ada, kan tadi kita udah
1:06:06generator page ya.
1:06:08Generator page, routing,
1:06:10sekarang layout.
1:06:12Oke.
1:06:16Blah, blah, blah.
1:06:18Blah, blah, blah. Okay.
1:06:20Nah, yang dicari.
1:06:22Ini buat layout.
1:06:24Okay. Layout.
1:06:26Tadi belum pakai
1:06:28layout berarti ya?
1:06:30Belum.
1:06:32Apa yang terjadi?
1:06:34Yang
1:06:36terjadi adalah
1:06:38folder-nya udah.
1:06:40Cuma ada ini. Oh, udah. Block layout-nya.
1:06:42Blok layout-nya.
1:06:44Terus header-nya.
1:06:46Header-nya dipindahin ke...
1:06:48Lengkap semua. Jadi, apa?
1:06:54Ini meng-encourage
1:06:56ngajep kita biar
1:06:58best practices. Perkara kita
1:07:00ngikutin atau enggak, kan ya.
1:07:02Yang kasus ya.
1:07:04Yang test-nya ijo semua, sih.
1:07:06Yang test ijo semua, ya.
1:07:08Nanti aja.
1:07:10Nah, kan cuma yang penting
1:07:12ini doang. Standard-nya.
1:07:14Mutidanya udah di-setup.
1:07:16Jadi, kita tinggal tulis kan.
1:07:18Tinggal tulis tes kesini aja.
1:07:20Di-setup, dipermudah, udah tinggal buka, tinggal
1:07:22masukin, tinggal bikin...
1:07:24Kalau muti-didi enak, nih.
1:07:26Jadi, tinggal buka
1:07:28test-nya, terus kita expect apa.
1:07:30Alamannya ada H1,
1:07:32ada paragraph, dan lain-lain.
1:07:34Udah, tinggal tulis tes-nya.
1:07:36Link-nya,
1:07:38terus, ya.
1:07:40Block layout,
1:07:42main children.
1:07:44Oh, ini buat
1:07:46layout, oke.
1:07:48Jadi, nanti ada navigation-nya di atas, ya.
1:07:50Yang lain, dihapus.
1:07:52Yang lain, dihapus.
1:07:56Dihapusnya. About page.
1:07:58Nah, ini nge-wrap-nya
1:08:00dimana?
1:08:02Cut the header.
1:08:04Oh.
1:08:06Oh, ya, ya, ya.
1:08:08Cuma disuruh.
1:08:10Ya, header-nya dihapus.
1:08:12Yang lainnya udah otomatis.
1:08:14Jadi, children dia.
1:08:16Ya.
1:08:18Semua yang di-wrap pake
1:08:20main, akan di-range bagi children.
1:08:22Ya.
1:08:24In block layout,
1:08:26children is where
1:08:28the magic happens.
1:08:30To actually render.
1:08:32Block layout.
1:08:34Set.
1:08:36Unlike pages, we do...
1:08:38Nah, kalau layout, harus kita import.
1:08:40Import, ya.
1:08:42Coba kita lihat.
1:08:44Oh, itunya nge-define-nya
1:08:46di halaman routes, ya.
1:08:48Kita import.
1:08:56Ya.
1:08:58Block layout.
1:09:02Pake set, wrap, block layout.
1:09:04Oh, ada set-nya.
1:09:06Ya.
1:09:12Oh.
1:09:14Wah, lucu.
1:09:16Set ini buat apa?
1:09:18Ya, itu buat nge-wrap pake layout.
1:09:20Oh.
1:09:26Source.
1:09:28Notice the import statement.
1:09:30Bahkan aliasing-nya aja udah dibikinin, loh.
1:09:32Kita gak usah pake relative path yang kayak gini.
1:09:36Ya, ya, ya.
1:09:38Kita tulis aja source.
1:09:40Ya, boleh.
1:09:42Oh, wow.
1:09:44Why are things named
1:09:46the way they are?
1:09:48Kan, penamaannya juga
1:09:52udah dipikirin.
1:09:54Apa?
1:09:56Pages.
1:09:58Udah ada di dalam directory namanya
1:10:00pages, tapi tetap ada nama
1:10:02page-nya. Layout.
1:10:04Jadi kayak homepage, about page,
1:10:06ada kan di dalam directory
1:10:08pages. Layout juga
1:10:10udah berada
1:10:12di dalam directory layouts,
1:10:14tapi isinya tetap block layout.
1:10:16Ya, namanya block layout.
1:10:18Nah, itu tuh udah dipikirin.
1:10:22Di default sama kalau misalnya
1:10:24Kita mengingungkan antara block page
1:10:26atau block layout. Kita gak bingung lagi
1:10:28ganti namanya.
1:10:30Dan kalau misalnya
1:10:32kita mau navigasi
1:10:34gini juga lebih
1:10:36gampang dilihat.
1:10:38Okay. Nah.
1:10:40Header.
1:10:42Block layout tadi udah kan?
1:10:46Ya, ditambahin.
1:10:48Pake dirapin aja.
1:10:50Okay.
1:10:52Ininya gak usah.
1:10:56Sudah.
1:11:00Oh, gitu.
1:11:06Refresh maksudnya.
1:11:10Wow.
1:11:20Like.
1:11:22Oh, ya.
1:11:24Gak percaya gitu kalau
1:11:26belum di...
1:11:28Tadi udah ketemu page layout
1:11:32throughout. Sekarang kita ketemu
1:11:34sini tadi.
1:11:36Apa? Sales.
1:11:38Oh, belum. Database. Nah, asik.
1:11:40Create database
1:11:42schema.
1:11:44Nah, ini kayak becandanya
1:11:48juga becanda tipis-tipis lah.
1:11:50Gak terlalu so asik. Cuma sebenarnya lucu.
1:11:52Ini yang bikin
1:11:56tim khusus ini ya. Gak kayak
1:11:58framework yang isinya
1:12:00berapa orang ini.
1:12:02Ini udah jadi kayak perusahaan ya.
1:12:04Perusahaan yang is like...
1:12:06Ya, tapi mereka...
1:12:08Kayak ada tim UX writer
1:12:10gitu.
1:12:12Kayak ada tim UX writer yang
1:12:14bener-bener ngulis ya copywriternya nih.
1:12:16Itu udah dipikirin.
1:12:18Oh, tapi kita...
1:12:20Atau
1:12:22kalau pun developer, tapi ya kayak
1:12:24di edit, ada
1:12:26konsultannya lah.
1:12:28Yang ngulis draftnya
1:12:30developer, abis itu di...
1:12:32Iya.
1:12:34Oh, ini kita bikin pause ya untuk
1:12:36database ya.
1:12:38Ini mas standar Prisma ini.
1:12:40Kalau temen belum pernah
1:12:42pake, ini dia
1:12:44framework agnostic kok bisa dipake sama
1:12:46Next.js atau apapunlah.
1:12:48Remix, Next.js,
1:12:50Astro.
1:12:52Ini dia langsung koannya ke database ya
1:12:54berarti ya.
1:12:56Ada migrationnya juga.
1:13:00Oh, jadi kalau
1:13:06ada perubahan di...
1:13:08Di schema, ada perubahan
1:13:10di schema, kita harus jalanin migrate-nya.
1:13:14Buat ngel-write lagi.
1:13:16Ada database-nya
1:13:18disesuaikan dengan
1:13:20schema ya?
1:13:22Ya.
1:13:24Okay.
1:13:26Create migration, create course.
1:13:28Oh.
1:13:30Without the course, of course.
1:13:32It's just...
1:13:36You'll see
1:13:38a...
1:13:40Subdilatory under API DB migration.
1:13:42Ada migration SQL-nya.
1:13:44Oh, ini SQL-nya ya.
1:13:46Ini, ini yang baru saya...
1:13:48Enak sekali.
1:13:50Ini SQL kan.
1:13:52Kita gak, misalnya kursinya ORM kan
1:13:54biar kita gak usah nulis SQL sendiri.
1:13:56Sebenernya migrate
1:13:58comment itu ini ya, dia jalanin ini kan
1:14:00sebenernya kan ya? Iya.
1:14:02Under the hood dia ngejalanin ini.
1:14:04Jadi kalau misalnya
1:14:06kita punya di local udah selesai
1:14:08dan mau di...
1:14:10Di deploy kita...
1:14:12Migrate dulu.
1:14:14Kita migrate juga, jadi sekali
1:14:16bisa tetap sing.
1:14:18Database-nya. Database schema-nya.
1:14:20Nah, ini salah satu fitur
1:14:22favorit terutama sebagai
1:14:24developer yang
1:14:26gak terlalu, ya gue pikir...
1:14:28Eh, HP Maya admin.
1:14:30Prisma studio.
1:14:32Prisma provides a tool called
1:14:36studio.
1:14:38Buat
1:14:40ini ya, ngedit database ya.
1:14:42Oke.
1:14:56Udah, ya belum ada isinya.
1:14:58Disuruh isi data kali?
1:15:02Belum.
1:15:04Belum.
1:15:06You'll see an empty database table.
1:15:08Let's have our app
1:15:10start putting some post in there.
1:15:12Oh, ini scaffold ya. Ini berarti
1:15:14back and front end dibikin ini ya.
1:15:16Ini cerutnya nih.
1:15:18Cerutnya, cerut. Iya.
1:15:20Ta-da-da.
1:15:22Action some post.
1:15:24Dia tuh punya generator
1:15:26untuk apa aja coba tadi.
1:15:28Apa? Page, play out.
1:15:30Page, play out.
1:15:32Now, pasti ada.
1:15:36Ya, route kan, pas kita bikin
1:15:38page, routingnya kan udah
1:15:40dibikinin juga.
1:15:42Page, play out, sekarang, scaffold,
1:15:44post.
1:15:46Tapi apa, G itu apa ya?
1:15:48Generate. Generate.
1:15:50Dari Ruby on Rails
1:15:52biasanya.
1:15:54Jadi bisa, Rails generate,
1:15:56bisa Rails G.
1:15:58Cuma G doang.
1:16:00Shortcut.
1:16:02Successfully
1:16:04route. Jadi
1:16:06dengan kita ngejalanin
1:16:08satu command ini,
1:16:10dia bikin
1:16:12filenya, edit,
1:16:14edit post cell,
1:16:16post, post cell,
1:16:18post form,
1:16:20posts, pakai S berarti ini kan list ya,
1:16:22list of post index.
1:16:24Post cell,
1:16:26new post, post SDL,
1:16:28buset, service post,
1:16:30post scenarios,
1:16:32apaan, place files,
1:16:34CSS, dao.
1:16:36Nah, kita liat
1:16:38ini fungsinya
1:16:40apa.
1:16:42Eh, apa tadi?
1:16:44Post ya.
1:16:46Wow.
1:16:52Itu. Sebenernya ada.
1:16:54Where to load?
1:16:56Mana?
1:16:58Coba ya buka
1:17:00di lokal dulu.
1:17:02Wow, kalau di lokal,
1:17:08lucu. New post, new post.
1:17:10New post. No post yet.
1:17:12Create one, new post.
1:17:14Ntar, kita coba
1:17:16new post.
1:17:18Error, database-nya apa?
1:17:20Kok ada flash error-nya ya?
1:17:22Eh, lho.
1:17:30Kita pakai Lorem Ipsum dulu.
1:17:32Kok bisa?
1:17:34Berhasil.
1:17:36Hei.
1:17:48Hei.
1:17:50Udah script-nya jadi.
1:17:54Coba yang show, show tadi ada.
1:17:56Itu ada apa?
1:17:58Show.
1:18:00Udah jadi. Oh, untuk ininya.
1:18:02Udah jadi.
1:18:04Kalau di
1:18:10PHP yang setara bikin itu
1:18:12yi framework
1:18:14yi framework.
1:18:16Ya, sudah ada cerutnya segala macem
1:18:18generator. Generator juga?
1:18:20Makanya generator juga ya? Jadi kalau
1:18:22bikin kayak business process,
1:18:24itu tidak bikin skema-nya, bikin
1:18:26generator-nya langsung kayak
1:18:28tampilan untuk
1:18:30CRUD-nya segala macem
1:18:32udah selesai.
1:18:34Laravel juga gitu kan?
1:18:38Laravel lebih
1:18:40lebih
1:18:42dinamis kan? Lebih kita bisa
1:18:44mu-customize seperti apa untuk generator?
1:18:46Kalau Laravel, kayaknya
1:18:48kan belum ada. UI-nya belum ada.
1:18:50Oh, UI-nya belum ada ya.
1:18:52Lagian nggak bisa.
1:18:54Lagian masih generate.
1:18:56Maksudnya bikin model bisa,
1:18:58model controller
1:19:00heal bisa. Cuma maksudnya nggak
1:19:02beneran dikasih sampai jadi beneran
1:19:04kayak gini sih.
1:19:06Dia kan full stack untuk back-end kan.
1:19:08Gak ada front-end ya.
1:19:10Maksudnya ya kita bikin
1:19:12blade file-nya kosong gitu ya
1:19:14kita bikin sendiri. Kalau ini kan beneran
1:19:16back-end front-end dikasih
1:19:18semua. Kalau yi juga ada
1:19:20front-end-nya juga.
1:19:22Ada front-end-nya. Sudah langsung jadi.
1:19:24Oh, nice.
1:19:26Ada yang masukin ya?
1:19:30Iya kan, sekarang kan
1:19:32belum di protect.
1:19:34Coba tadi liat.
1:19:36Coba diauthenticate.
1:19:38Ya, gimana? Cukup demonya untuk malam ini?
1:19:46Demonya cukup kali ya.
1:19:48Oke, cukup kali ya.
1:19:50Hosen satu lalaman ini.
1:19:52Nanggung, satu lalaman ini.
1:19:54Nanggung. Oke, lanjut.
1:19:56Filament tuh, katanya ada
1:19:58filament THP. Wah, saya bertahu
1:20:00filament. Eh, nggak, apa?
1:20:02Testing-nya aja ya.
1:20:04Testing, testing, testing.
1:20:06Atau storybook lah, nanggung tadi udah
1:20:08bikin. Oh, filament itu
1:20:10admin ya admin. Jadi
1:20:12ada tambahan ya, harus diinstall
1:20:14tambahannya. Kalau ini kan langsung ya semua ya.
1:20:18Ian, tes lah.
1:20:20Iya, kita ikutin dulu. Kan
1:20:24passing semua ini.
1:20:26Ya pasti. Skill issue
1:20:28nggak bisa pernah enter to 2P.
1:20:30Part 2, wah
1:20:32banyak yang minta nambah nih ya.
1:20:34Part 2.
1:20:36Boleh, boleh. Ditampung ide-nya ya.
1:20:40Solusi, solusi.
1:20:42Test passing semua.
1:20:4429.
1:20:46Wah, iya.
1:20:48Ya, harus ditulis ya.
1:20:52Apa? Test case-nya nggak bisa otomatis
1:20:54ya. Pakai copilot
1:20:56kalau mau.
1:20:58Our first test. Coba ya.
1:21:00Ini sudah ngapain?
1:21:02Enggak tahu ini.
1:21:04Nanti kasih. We've got a
1:21:06great document all about
1:21:08testing. Ya, nanti.
1:21:14Tests testing.
1:21:16Males banget.
1:21:18Iya, ini udah kelihatan kan
1:21:20React testing library kan ada screen, ada render.
1:21:22Oh ya, ini
1:21:26render, screen.
1:21:28Dia bikin package-nya
1:21:30sendiri, jadi kita nggak usah jepang
1:21:32install-install satu per satu.
1:21:34Tapi dependence-nya tadi udah ngeliat.
1:21:36Ya, memang React testing library sih.
1:21:38Benar.
1:21:40Oke.
1:21:44Oke.
1:21:46Render yang atas dia
1:21:48push-nya.
1:21:50Oh, ada mock.
1:21:54Artikel ini.
1:21:56Tadi bukannya post ya?
1:21:58Kok jadi artikel?
1:22:00Ya, kita kan, kita ngeloncatin.
1:22:02Kita loncatin, kita loncatin.
1:22:04Kita ngetes yang post dulu
1:22:06aja, test.
1:22:08Kalau post ini yang backend.
1:22:12Oh, ini service-nya.
1:22:14Ya, backend, backend.
1:22:16Om page-nya aja yang ditest.
1:22:18Check ada header sama check ada
1:22:20navigasi.
1:22:22Describe renders.
1:22:26Empty.
1:22:30It.
1:22:32Content.
1:22:36Aset tool.
1:22:40Back.
1:22:42To, to content ya?
1:22:44To content apa sih?
1:22:46Kayaknya, kayaknya
1:22:50bukan gini deh, emang ya?
1:22:52Bukan gini, bukan.
1:22:54Judulnya, isi text-nya, isi
1:22:56text-nya, khas satunya apa?
1:22:58Home.
1:23:02Oh, kan nah.
1:23:06Kalau nggak, itu role.
1:23:08Ya.
1:23:10Is a text like.
1:23:12Ya.
1:23:14Kalau nggak, harus pake itu kan, pake role.
1:23:16Role header, text-nya
1:23:18khas satunya, eh, text-nya ini.
1:23:20This is something, something.
1:23:22Nah, ini.
1:23:24To content, khas satunya.
1:23:26Kita suruh AI aja.
1:23:32Test to
1:23:34check by
1:23:36role.
1:23:38To check apa ya?
1:23:40Khas satunya
1:23:42should content.
1:23:44Kita tunggu.
1:23:48Wah, ada yang lupa
1:23:50hari ini hari Selasa.
1:23:52Wah, gimana ya?
1:23:54Gawar biasa.
1:23:56Get by text ya, get by text.
1:23:58Expect.
1:24:02Expect
1:24:04khas satu to be in document.
1:24:06Get by text.
1:24:08Get by text, bentar. Ya, get by text, benar.
1:24:10Atau, get by
1:24:12role.
1:24:14Nggak ada role-nya.
1:24:16Oh iya, kita nggak bikin ya. Header nggak masuk
1:24:18khas satu ya?
1:24:20Test lagi.
1:24:24Kita tunggu dulu, testing atau nggak.
1:24:26Yes, yes, yes.
1:24:28Semangat, yes. Fail.
1:24:30Fail.
1:24:32Batuk-batuk, yes.
1:24:34Bentar, expect-nya tuh dihapus tadi.
1:24:40Oh, diatas emang dihapus ya, oke.
1:24:42Gak bisa dapat role main.
1:24:44Oh, kok main sih?
1:24:48Header, header.
1:24:50Header level 1.
1:24:54Header, bukan?
1:24:56Roll-nya heading.
1:24:58Header, header. Heading apa header lah.
1:25:00Yang salah satu.
1:25:02Nah, tuh berhasil nggak error-nya.
1:25:04Enggak, error. Ya, kita coba aja
1:25:06satu persatu.
1:25:08Udah pernafal sih.
1:25:10Oh iya, get by element-nya.
1:25:12Get by element.
1:25:18Setelah pakai free test, yes,
1:25:22berasa lambat ya.
1:25:24Bentar.
1:25:26React, testing, library.
1:25:28Get as a tool.
1:25:30By role, tapi...
1:25:36Roll-nya apa?
1:25:38Heading, heading level 1.
1:25:40Bukan?
1:25:42Oh, iya, iya, iya.
1:25:44Tadi tuh karena nggak
1:25:48pake, nggak pake object.
1:25:50Ini ya?
1:25:52Komah, level titik 2.1.
1:25:54Nah.
1:25:56Wow.
1:25:58Oke, kita tunggu.
1:26:00Kalau gagal lagi...
1:26:10Kok masih fail?
1:26:12Yang fail-nya apa?
1:26:14Content...
1:26:18Oh jangan-jangan dia nggak...
1:26:20Render-nya udah.
1:26:22Read in.
1:26:24Oh iya, belum dirender.
1:26:26Render-nya mana?
1:26:32Nah, ini
1:26:34harusnya di sini ya?
1:26:36Render-nya di...
1:26:38Render-nya ditampung ke variable nggak?
1:26:44Gimana sih?
1:26:46Kayaknya screen sama dengan...
1:26:48Get by text, kan?
1:26:54Read in itu apa?
1:26:56Ini kayaknya AI-nya tadi ngarang deh.
1:27:00Read in itu apa?
1:27:02Gak tahu, bentar.
1:27:06Kita tanya ini.
1:27:08Gak ada.
1:27:12Di React Testing Library-nya ini,
1:27:14kalau mau cari.
1:27:16Itu aja langsung, render-nya.
1:27:18Jadi, expect-nya itu hilangin.
1:27:22Render-nya langsung udah.
1:27:24Render-nya langsung udah.
1:27:26Terus bawah.
1:27:30Coba.
1:27:32Tuh kan, pasing kan?
1:27:50Live terus sampe berhasil.
1:27:52Karena penasaran.
1:27:56Wah, ini juga seru sih.
1:28:00Ini padahal kita cuma, apa ya?
1:28:02Kita tadi baru sampe...
1:28:04Berapa sih? Baru sampe ini kan ya?
1:28:062.
1:28:082 dan ini masih halaman pertama, kan?
1:28:10Kita...
1:28:12Itu aja udah lumayan banget ya.
1:28:14Kebayang nggak sih kalau, apa?
1:28:16Hackathon tuh,
1:28:18ini helpful banget kan?
1:28:20Kayak dalam 5 menit, 10 menit udah dapet krewt.
1:28:22Ntar, stop sharing dulu.
1:28:26Nah, jadi kesimpulannya,
1:28:28ya tadi kita udah sempet bahas ya.
1:28:30Sayangnya nggak semua tempat mau experiment,
1:28:32kebaru. Betul.
1:28:34Dan emang bukan di desain buat itu juga sih.
1:28:36Maksudnya kayaknya mereka sadar diri juga.
1:28:38Nggak mungkin se-extreme itu.
1:28:40Terutama kalau kita di tempat kerja yang established ya.
1:28:42Tiba-tiba diganti,
1:28:44diganti semua dengan framework yang
1:28:46opinionated ini.
1:28:48Ini lebih sekel, kita
1:28:50inside project, kita punya ide,
1:28:52kita pengen apa?
1:28:54Ngewujudin ide kita dengan cepet lah.
1:28:56Betul.
1:28:58Jadi, ya memang
1:29:00bukan target marketnya, bukan tujuan mereka
1:29:02bikin, dan mereka juga nggak mau, kayaknya
1:29:04nggak mau berkompetisi dengan next
1:29:06dan temen-temen, gitu kan?
1:29:08Mereka punya niche sendiri.
1:29:10Dan yang menariknya itu,
1:29:12mereka encourage kita untuk bikin sesuatu
1:29:14dan bisa difunding juga
1:29:16kalau kita mau ikutan, gitu.
1:29:18Jadi, ini sesuatu yang menarik,
1:29:20tapi juga harus apa ya?
1:29:22Ini boleh
1:29:24dipakai, tapi harus ingat bahwa
1:29:26ada komponen-komponennya, seperti tadi ada jazz,
1:29:28ada prisma,
1:29:30ada grafial, dan lain-lain.
1:29:32Yang kalau error, kita harus
1:29:34deep dive ke dalamnya. Oh, ternyata
1:29:36si testingnya ternyata
1:29:38pakai React Testing Library.
1:29:40Kalau error tadi kan kita bingung. Mau cari redwood,
1:29:42error testing belum tentu dapat, kan?
1:29:44Karena redwood itu nggak wrapping doang.
1:29:46Itu kan memudahkan kita
1:29:48biar nggak usah install segamber
1:29:50yang satu persatu, mengkonfigurasi
1:29:52satu-satu. Terus ini sih
1:29:54kayak segampang-gampangnya,
1:29:56seenak apapun tadi,
1:29:58kan ini bukan pengganti fundamental.
1:30:00Kayak misalnya, apalah, kalau dari
1:30:02front-end, misalnya
1:30:04event, atau
1:30:06event handling, atau apalah, sincronus-asincronus,
1:30:08kita harus tetap paham.
1:30:10Karena ini kan nggak ngegantiin itu.
1:30:12Soal database, misalnya Prisma, ya minimal
1:30:14kita harus tahu cara
1:30:16apa, cara kerja migrasi.
1:30:18Misalnya kalau misalnya kita nggak ngerti
1:30:20konsepnya, kita ngeganti
1:30:22apa, file tadi, file skema-nya,
1:30:24terus kita bingung nungguin
1:30:26kok datanya nggak berubah ya?
1:30:28Kayak nggak di-migrate, nggak mungkin berubah.
1:30:30Terus kayak testing tadi,
1:30:32apa, yang
1:30:34apa, kan komponennya tetap harus
1:30:36di-render. Maksudnya kita tetap harus punya
1:30:38jangan itu, walaupun kagok ya,
1:30:40misalnya apa, nggak terlalu inget,
1:30:42nggak hafal syntax-nya, nggak
1:30:44hafal metode-metode-nya tadi
1:30:46harus nyontek dokumentasi
1:30:48React Testing Library dulu, ya nggak masalah.
1:30:50Tapi kan kita harus paham. Minimal kita
1:30:52tahu. Ya, kita tahu
1:30:54carinya gimana. Testing itu merendah komponen itu,
1:30:56terus kita cari, kita
1:30:58cari apa yang mau target,
1:31:00apa yang mau dicocokin,
1:31:02dimatching. Kalau tadi kan juga simple,
1:31:04H1 harus ada content string,
1:31:06sekian-sekian-sekian, baru passing.
1:31:08Nah, itu tetap harus kita pelajarin
1:31:10di luar Redwood.
1:31:12Oke, kalau begitu.
1:31:14Intinya, tetap harus butuh
1:31:16fundamental sebelum bisa pakai
1:31:18Redwood sih, menurut saya.
1:31:20Iya,
1:31:22dan tidak. Karena, kayaknya ya,
1:31:24si Redwood ini kan targetnya
1:31:26builder ya,
1:31:28indie hacker dan lain-lain. Mereka mungkin
1:31:30belum begitu paham dengan fundamental,
1:31:32yang penting cepat jadi, gitu.
1:31:34Jadi, banyak dia otomatis.
1:31:36Sambil dibenerin. Sambil dibenerin di tengah-tengah.
1:31:38Tahu pakai storybook,
1:31:40tahu pakai react testing library,
1:31:42tahu pakai
1:31:44react.
1:31:46Ya, itu minimal sih.
1:31:48Minimal banget.
1:31:50Atau malah jadi belajar,
1:31:52sambil belajar, ya, maksudnya.
1:31:54Karena penasaran.
1:31:56Betul, betul, betul.
1:31:58Oke, ada lagi mungkin? Terakhir?
1:32:00Menutup?
1:32:02Iya, sih. Seru juga ya.
1:32:04Teru ya, ternyata ya.
1:32:06Oke, kalau gitu.
1:32:08Para penonton bikin sesuatu yang keren
1:32:10to submit ke Redwood.
1:32:12Oh, udah tutup, udah tutup.
1:32:14Tahun depan, tahun depan.
1:32:16Kita belajar-belajar dulu, belajar bikin dulu.
1:32:18Bikin aja dulu dari sekarang.
1:32:20Nanti, apa?
1:32:22Kasih tau ke kita minggu depan.
1:32:24Oh, saya buat ini nih. Nanti kita cek.
1:32:26Iya, kalau bikin open-source,
1:32:28kita undang
1:32:30kita bisa kolaborasi sama-sama.
1:32:32Buat showcase.
1:32:34Kalau gak ada yang mau disampaikan lagi,
1:32:36terima kasih buat semuanya.
1:32:38Kita udahan dulu. Udah satu setengah jam kita
1:32:40melihat Eka ngoding
1:32:42dan bingung.
1:32:44Tapi luar biasa ya. Maksudnya
1:32:46ini opsi yang
1:32:48bisa lah.
1:32:50Kalau misalkan kita timnya sendiri,
1:32:52itu kan gak mau repot-repot untuk
1:32:54konfigurasi, bisa.
1:32:56Dan ini speed sih, kecepatan dan
1:32:58kepraktisan.
1:33:00Itu kemululannya.
1:33:02Kalau diringkas, cepet dan
1:33:04praktis.
1:33:06Cuman,
1:33:08kita belum cek ke arah
1:33:10performance dan lain-lain ya.
1:33:12Kita belum tahu
1:33:14gimana.
1:33:16Tapi udah kebayang sih.
1:33:18Kayaknya gak terlalu berbeda jauh
1:33:20sama yang lain ya.
1:33:22Tergantung aplikasinya juga.
1:33:24Kita ketemu lagi minggu depan dengan
1:33:26aplikasi yang berbeda.
1:33:28Selamat malam. Sampai jumpa minggu depan.
1:33:30Bye bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
19 Mei 2026
Alat Desain AI - Ngobrolin WEB
🕸️ Selasa malam waktunya #ngobrolinweb Semenjak era AI, developer yang tadinya punya desiign skill issue mendadak bis...
12 Mei 2026
Bedah Web - Ngobrolin WEB
Berhubung banyak yang submit, malam ini kita akan kembali membedah beberapa situs. Penasaran gimana pendapat para pakar ...
5 Mei 2026
Zona Waktu - Ngobrolin WEB
Salah satu topik yang sebagian besar dari kita banyak tergocek nih. Pernah tergocek dengan urusan timezone, dan daylight...