Halo teman-teman semua kembali lagi di channel wpu bersama saya Sandika gali dan di video kali ini saya mau kasih tahu sesuatu yang seru nih ya sesuatu yang menarik banget yaitu mengenai kode editor terbaru punyanya Google teman-teman ya yang namanya Project idx teman-teman sudahah tahu belum ya jadi project idx ini adalah kode editor rilisannya Google yang sebetulnya udah rilis dan bisa dipakai beberapa waktu yang lalu ya mungkin sebulan atau 2 bulan yang lalu rasanya tapi baru bisa dipakai oleh sebagian orang karena yang mau pakai itu harus join waitlist-nya dulu nah kebetulan beberapa minggu yang lalu tuh saya sudah join waitlist-nya dan saya sudah mencicipi sedikit fitur dari kode editor ini nah dan saya juga sebetarnya udah mau bikin videonya itu Minggu lalu Ya tapi saya pikir kayaknya di minggu ini Google bakalan ngerilis di Google io deh ternyata benar ya Jadi tadi malam kita sudah sama-sama menyaksikan Google io di mana Google itu ngerilis atau ngasih tahu teknologi-teknologi terbaru apa aja miliknya Google dan salah satunya adalah project idx ini yang sudah bisa dipakai oleh kita semua walaupun Mas versi beta at Google we are fully in our Gemini era today All Of Our two billion user products use Gemini Gemini 1.5 Pro is available today in workspace Labs let's see how this comes to life with Google workspace people are always searching their emails and Gmail we are working to make it much more powerful with Gemini now we can ask Gemini to summarize all recent emails from the school maybe you were traveling this week and you couldn't make the PTA meeting the recording of the meeting is an hour long or take a quiz all of this Shows The important progress we have made as we take a Bold and responsible approach to making Ai helpful for everyone to everyone here in shline and the millions more watching around the world here to the possibilities ahead and creating them together thank you [Tepuk tangan] Nah itu dia tadi ya Seru banget rilisannya Dan saya yakin teman-teman yang belum pernah pakai juga penasaran mengenai project idx ini sekilas mengenai Project idx ya jadi dia Ini adalah sebuah kode editor atau lengkapnya disebut dengan ide ya integrated development environment jadi enggak cuman kode editor dia adalah sebuah aplikasi yang di dalamnya bisa membuat aplikasi menjalankan dan juga melakukan deployment pada aplikasi kita dan kerennya ini tuh web teman-teman jadi aplikasinya berjalan di web browser enggak perlu diinstal di komputer teman-teman masing-masing dan karena dia ide kita juga enggak perlu nge-set up server kita enggak perlu nge-set up lagi development environment sehingga aplikasi kita setelah dicoding itu bisa langsung di-preview bahkan langsung dideploy seperti layaknya kita membuat aplikasi di local environment di laptop atau di komputer kita jadi enaknya ini teman-teman enggak perlu memakai mesin atau laptop yang high end yang teman-teman butuhkan adalah koneksi internet yang kencang dan stabil aja karena semua pemrosesannya dilakukan kan di dalam servernya Google atau di dalam Cloud dan enaknya lagi di Ide ini kita sudah bisa menggunakan template yang dikasih oleh idx-nya banyak banget ya Jadi kita kalau mau set up aplikasi menggunakan Framework ya contohnya kalau mau bikin web itu kita mau bikin pakai angular react viewjs bahkan larfel itu enggak perlu kita melakukan setup-nya manual seperti biasa kita download package-nya kita instal di terminal enggak perlu sudah ada boiler plate atau template-nya yang bisa langsung kita gunakan Nah pasti kalian penasaran kan nah tapi sebelum kita masuk ke pembahasan videonya Saya mau ucapin Terima kasih dulu kepada sponsor kita pada video kali ini yaitu hostinger sekalian saya mau kasih informasi buat teman-teman yang lagi cari-cari Paket hosting murah dan lengkap untuk nyimpan Project atau portfolio kalian jadi hostinger ini adalah sebuah perusahaan penyedia layanan hosting yang menyediakan berbagai macam pilihan paket hosting dengan harga yang terjangkau tapi fiturnya lengkap mulai dari web hosting Cloud hosting sampai dengan vps hosting saat ini hostinger lagi ngadain diskon spesial khusus buat kalian para penonton channelnya wpu yaitu hosting website paket bisnis include domain dan juga vps hosting dengan durasi 1 sampai 2 tahun dengan harga mulai dari Rp150.000 sampai Rp700.000 aja di mana harga normalnya itu bisa di 700.000 sampai dengan Rp4 juta yuk langsung aja kunjungi website-nya di link berikut ini atau teman-teman bisa Klik aja link di description di bawah ya kalian pastiin kliknya lewat link ini karena harga Promonya itu hanya berlaku kalau kalian klik linknya Oke ini Ini contohnya kita pilih produk vps hosting lalu kalian pilih paket vps kvm4 durasi 1 tahun lalu pilih negaranya Malaysia atau Jepang atau Korea Scroll ke bawah lalu pilih menu punya kupon dan kalian masukin kode kuponnya wpuh HST Setelah itu kita Isi form di link berikut ini nah lalu kalian cek aja Apakah tagihan yang di web itu sudah sesuai dengan angka yang tertera di form kalau belum berarti ada step yang belum selesai silakan kalian cek lagi terus pastiin juga kalian melakukan pembayaran ke nomor rekening yang sudah disediakan di ppt-nya ya jika sudah mengisi form dan mengikuti step by step hosting promo dengan tempat hosting kalian akan diaktivasi 3 sampai 5 hari kerja setelah proses pengisian form dan juga pembayaran nanti akan ada email pembayaran telah berhasil yang dikirim oleh hostinger kalau proses aktivasinya sudah selesai jadi kalian jangan kaget kalau di akun kalian produk yang diorder itu belum muncul karena produk akan muncul setelah proses aktivasi selesai dan email pemb bayaran diterima oke ya teman-teman ya jadi sekali lagi buat kalian yang lagi cari-cari hosting untuk menyimpan website atau web app kalian jangan ragu untuk memilih hostinger sebagai penyedia layanannya karena selain cepat ya karena servernya ada di seluruh dunia terus juga aman karena sudah dilengkapi dengan fitur keamanan yang canggih juga menawarkan fitur migrasi gratis dari hosting lama kalian ke hostinger jadi yuk segera klaim Promonya sekarang dan lakukan pembayaran ke nomor rekening yang sudah disediakan selama persediaan masih ada dan sebelum harga Promonya naik atau kembali normal cek semua Link yang ada di deskripsi video ini untuk informasi lebih lanjut Oke jadi tanpa berlama-lama lagi langsung aja kita buka website-nya teman-teman Oke jadi website yang akan kita kunjungi itu namanya idx.dev teman-teman nanti teman-teman diarahkan ke landing page miliknya si project idx ini kita baca dulu ya landing page-nya Seperti apa sebelum nanti kita masuk ke dalam kode editornya nah ini kita dikasih lihat ada Hero elemennya ya wah ini ada animasi-animasinya gitu terus di belakangnya Ini juga ada animasi patternnya ini gerak ke atas ini menurut saya web set-nya cukup keren sih kalau kita Scroll ke bawah kita lihat Welcome to project idx ini teman-teman bisa langsung get started sebelumnya ini tulisannya join waitlist jadi yang mau nyicipin itu nunggu dulu gitu saya kebetulan kemarin nunggunya sekitar satu atau du mingguan lah kalian sekarang bisa langsung pakai nih tapi nanti kita coba baca-baca dulu ya Nah ini katanya get to work quickly wherever you are ya karena kita ngodingnya di browser cukup buka browser terus masuk ke url-nya aja tampilannya seperti ini ya kalau teman-teman familiar mirip banget dengan vs Code ya Jadi yang biasa pakai vs Code harusnya enggak ada masalah Terus kalau kita Scroll dia sudah terintegrasi dengan Gemini atau jemini jadi ada ai-nya langsung di dalamnya nanti kita lihat ya seberapa Sakti ini Ai di dalamnya enggak perlu kitainal apa-apa lagi ya kan kalau di vs Code kita kalau mau nginstal Ai itu harus lewat extension atau ada konfigurasi yang harus dilakukan kalau ini enggak usah geminnya sudah terintegrasi ke dalam kode editornya Terus kalau kita Scroll ke bawah nah ini tadi ya kita bisa lihat banyak template untuk langsung nge-set up Project kita mau bikin pakai nextjs langsung semja klik membikin pakai flut bisa juga ya dan masih banyak lagi nanti kita lihat satu-satu terus kalau kita Scroll lagi buat mobile juga bisa ya kan tadi ada flut ada cotlin juga kita tinggal pilih aja nanti ui-nya atau tampilannya kita langsung bisa lihat versi web-nya sama versi mobile-nya tuh Ya silakan buat yang langsung mau coba klik aja get started tapi kalau teman-teman lihat di sebelah kiri mau lihat berita-beritanya ada di bagian blog di sini ya nih kalau ada fitur baru atau ada tutorial cara pakai pasti ada di blognya terus ada dokumentasi ya Yang nanti juga akan kita coba buka ya nih ya kita buka dulu aja deh sip Kayaknya udah enggak sabar Langsung aja kita coba ya teman-teman boleh klik get started atau explore idx klik get started aja nanti di sini harusnya teman-teman diminta login nah ini Kebetulan saya loginnya pakai akun yang salah saya ganti dulu ya Oke ini saya sudah masuk Jadi teman-teman silakan login menggunakan account Gmail teman-teman masing-masing nah terus kalau misalkan udah pakai ini saya dikasih badge ya Jadi kalau teman-teman punya Google developer profile Saran saya ambil badge-nya tinggal klik aja see your profile ya Nah kalau sudah masuk ke sini teman-teman bisa Arahkan ke profile atau kalau udah langsung tampil profil-nya enggak masalah nah ini adalah badges- badges yang sudahah saya miliki ya nanti kita dapat ini nih Project idx user jadi buat kalian pengumpul badge nah boleh nih ambil aja batge-nya supaya ada di profile kalian Oke balik lagi Nah tadi kalau misalkan teman-teman merasa kok mirip banget sama vs Code Ya karena memang ini tuh kode editornya diambil dari Open source-nya vs Code yang namanya code OSS Jadi kalau vs Code itu itu kan aplikasi close source punyanya Microsoft nah dia juga ngeluarin yang Open source-nya namanya kode OSS nah Project idx itu adalah modifikasi dari Project open source itu ya Nah sekarang gimana kalau kita nyobain salah satu dulu lah Ya gimana kalau kita bikin aplikasi salah satu dari templates ini gimana kalau kita cari clik all templates nih ada banyak ya Ada bikin web ada macam-macam ya Bisa pakai angular nextjs Astro react atau html biasa atau yang lain nih atau Kalian mau backend nah di backend juga ada macam-macam ada go ada flash ada node Express ada Rus ada laravel dan ada jengo nah gimana kalau kita coba bikin aplikasi larfel teman-teman ya kalau mau yang lain juga silakan Ya tapi saya mau coba larfel Caranya tinggal klik aja di sini terus kita diminta kasih nama aplikasi kita misalkan kita kasih nama wpu laravel aja gitu ya wpu spasi laravel udah gini aja L ya wpu larfel terus kita klik create sudah tinggal ditunggu aja set up environmentnya tuh nanti ada setting up workspace initializing environment building environment dan finalizing jadi karena dibangun di cloudnya punyanya Google Ya udah kita tinggal tunggu aja semuanya disetupin oke nah lihat nih kita udah masuk tapi ini belum selesai teman-teman kita udah bisa lihat ada kode halaman utamanya halaman rmi-nya terus lihat di sebelah kanan ada tampilan website kita tuh lihat ini keren banget ya jadi nah ini bukaninstal di laptop atau komputer saya ini udah jalan di servernya Google bahkan ada tampilannya enggak perlu jalanin xmpp enggak perlu jalanin laragon enggak perlu jalanin herd udah aman ya Dan ini sebelah kiri kode editornya juga udah nampilin folder kita Keren kan Nah ini kalau kita lihat ui-nya benar-benar Mirip ya Jadi ada sebelah kiri ada Explorer ada search ada source control ini kalau kalian mau deploy ke github bisa langsung jadi nanti Pak gimana kalau misalnya yang udah kita coding di web ini mau saya ambil ke komputer nah ini kita tinggal upload dulu ke github nanti dari github-nya kita cloning aja komputer kita selesai terus ada Run and debug sama extensions ya Sama kita bisa nginstal extension extensions yang ada di marketplace ya Sekali lagi kalau biasa pakai vs Code ini enak banget dan ada satu lagi yang beda dengan vs Code yaitu ini khusus Project idx nah ini kalian bisa langsung hosting di firebase kalian bisa langsung deploy di Cloud Run mau tambahin Gemini api misalnya aplikasi larfel Kalian mau ditambahin geminii ya bikin aplikasi Ai langsung aja add geminii api mau ditambahin Google Maps ini langsung ada jadi semua layanan Google terintegrasi ke sini Biasanya kita kan masuk website-nya ke dokumentasinya lihat copy ke kode kita jalanin gitu kalau ini enggak langsung terintegrasi kita coba ya kita coba dulu misalnya menampilkan halaman baru deh kita kasih rute baru ya teman-teman tahu caranya kita ke routes kita ke web terus kita bikin rute baru kita get kita ke about dan lihat udah ada code completion-nya Jadi tinggal kita tab aja Oke jadi Sudah terintegrasi Gemi dalamnya jadi kode kita udah langsung dibantuin ya Enak banget ya udah tinggal kita bikin view-nya tuh langsung dibikinin sisanya ini saya gak mau bikin kontak sama home ya biarin aja saya mau bikin ini aja tinggal kita bikin view-nya kalian ke mana Ke bagian resources ke views bikin file baru kita kasih nama apa about.blade.php dah di dalamnya tinggal kita kasih misalnya mau kasih judul H1 gitu atau lihat nih pencet ctrol I untuk nanya Gemini bikin sesuatu ya udah kita conttrol I aja create a heading section gitu langsung dibikinin ya About Us tuh sudah ya sekarang kalau kita coba ke web-nya kita tulis about ada tuh Mantap banget ya Nah kalau misalnya nih kalian lagi belajar sebuah Framework atau teknologi terus pengin tahu ini tuh fungsinya buat apa nih saya enggak tahu ini maksud dari root get ini apa ya udah tinggal Blok aja Klik Kanan ada Gemini di sini tuh ada tulisan explain selected code tinggal ditanya nanti dikasih tahu sama gim Mininya Nah pertama pasti kita dikasih dulu Prom ya untuk Apakah mau mengintegrasikan Gemini ke aplikasi kita kalau kita klik continue langsung gemininya jawab tuh kode ini gunanya adalah untuk bla bla bla tuh Tulis misalnya di sini ya Create new route for contact page gitu Saya minta dibikinin rute baru untuk kontak tuh jadi ada rutenya ada apa nih view-nya bahkan kita dikasih controller ini kalau mau dipakai gimana jangan dicopy paste kelamaan ya klik aja ini ada tombol Insert code klik nah ini ada Insert code Nah ini teman-teman tinggal taruh kursornya di sini terus Insert code ya walaupun ini php-nya ke bawah Ya nah tapi setidaknya kontaknya udah beres tuh Ini kenapa error karena kita ggak punya view kontaknya ada di sini view kontaknya Gimana caranya oh katanya harus bikin halaman namanya kact Blade Oh berarti tinggal kita ikutin aja bikin baru kontak Blade PHP kita taruh sini terus kita masukin kode ini dahah tinggal kita hapus ini kita benerin dikit ya sekarang kita lihat kalau kita ke halaman kontak Walaupun memang belum rapi tapi setidaknya html-nya Udah dibikinin nanti kalau mau dirapiin tinggal tanya lagi aja kalau saya mau pakai tailwiin misalnya tampilannya ubah pokoknya intinya Saya mau kasih tahu ini adalah salah satu kemudahan menggunakan Project idx ketika kita mau pakai template Nah sekarang gimana kalau kita mau simpel aja deh ggak usah pakai Lara file kita bikin pakai html biasa aja kita c lagi ya sekarang kita close dulu ya kita ke close editor ke file terus close editor ini enggak usah khawatir udah udah ke-save teman-teman jadi sebenarnya ini bisa diclose aja enggak masalah close karena kalau ini kita refresh ya nih di halaman utamanya tadi membuka tab baru Nah aplikasi kita udah ada cuman memang kita dikasih terbatas Kita cuman boleh dikasih lma workspaces jadi enggak banyak ini cocok banget kalau kalian masih belajar atau cocok banget kalau kalian mau ngajarin orang ya ini kalau saya pakai di kelas ketika ngajar saya enggak butuh bawa bahan ajar ya enggak perlu bawa laptop bahkan semuanya udah ada di sini enggak perlu instalinal kode editor saya tinggal butuh komputer dan internet langsung bisa mendemokan sesuatu gitu coba kita bikin yang baru ya kita bikin Si all templates kita simple html aja L atau jangan bikin baru gimana kalau kita ngambil dari github nah coba kita buka github dulu ya Saya mau ambil Project portfolio tailwin saya deh nih Ya saya punya portfolio tailwin Gimana kalau ini kita copy masuk ke reponnya terus kita copy Nah sekarang Nah dari sini kita kembali ke dashboard ke utamanya Nah di sini ada import e repo ya kita klik aja masukin repo kita ini enggak usah diceklis karena aplikasi kita bukan aplikasi flut ya karena setting-nya kayaknya untuk flut itu beda kalau kita klik import kita tinggal tunggu aja nanti aplikasi kita di-set up kan Nah kita udah masuk editornya kita tunggu finalisasinya nah ini sudah ini kalau diminta mau generate konfigurasi idx enggak ya kita Yes aja ya kita rebuild ya n nanti akan dibuatkan folder idx ini kita Biarkan aja ya nah ini sudah beres kalau kita close Nah jadi aplikasinya sudah diambil dari github kita kita tinggal ngoding aja teman-teman enak banget ya jadi bisa kita bikin sendiri terus di-upload ke github bisa sebaliknya kita punya di github taruh di sini kalau udah beres tinggal kita push lagi ke github taruh di sini ini contohnya misalkan kita udah set up terus kita syn Oke kita allow terus kita continue aja Open nah ini Tinggal diaktivasi aja nanti kalau sudah beres semua setup-nya kita lihat ke github kita kalau kita refresh Nah udah ada tuh komit kita yang baru ya setup environment idx Mantap ya keren jadi dari github bisa kita ambil dari Project yang kita bikin di idx kita bisa upload ke github dan yang kerennya lagi nih Kita coba lagi ya satu lagi kita bikin satu lagi aplikasinya ya ini kita balikin lagi ke halaman utamanya misalnya kita sekarang mau bikin aplikasi sederhana aja kita bikin yang html Nih kita bikin html wpu simple app gitu ya saya mau bikin tulisan Hello word aja enggak aneh-aneh nah ini udah tampil ya kita dikasih tulisan H1 kita dikasih button udah kita buttonnya Kita hapus aja ceritanya enggak perlu javascript dan button Saya mau edit style-nya aja misalnya saya mau kasih di sini bodyinya kita bikin font Family Har G ya terus kita kasih H1 color salmon gitu dah kalau udah beres kita refresh udah aman ya l kita kasih background color ya background color light blue nah udah cerit saya punya website sesimpel ini aja terus kita pengen orang lain lihat website kita Nah ini Lihat di sebelah kanan ini ada share preview Link langsung teman-teman jadi kalau saya klik kita bisa copy preview url ini saya klik ini udah kecopy nih saya tinggal kasih ke orang lain ini website-nya tuh ada jadi website ini udah bisa dibuka oleh orang lain kita ngodingnya di web kan orang lain enggak bisa lihat ini ya enggak bisa lihat isi dari kodenya karena ini kan kita harus login dulu Tapi kalau pengin lihat website-nya ini udah dijadiin Walaupun memang panjang seperti ini tapi enggak apa-apa ini pun udah bisa diakses ya jadi menurut saya ini sangat keren banget ya tadi udah di dalamnya juga udah ada ai-nya yang bisa kita pakai dan kita bisa ngasih link preview-nya langsung nah kalau misalkan teman-teman mau deploy tadi ada caranya tinggal ke bagian Project idx terus pilih aja mau deploynya pakai cara apa sekarang dikasihnya kita bisa lewat firebase bisa lewat Cloud Run sekarang diplownnya bisa lewat firebase atau lewat Cloud Run ya teman-teman ya Sekali lagi teman-teman butuh Cara pakainya Seperti apa tadi ya kita sudah dikasih dokumentasinya ni ya saya buka jadi dokumentasinya nya ada di developers.google.com/idx terus di sini ada tulisannya read the docs j teman-teman lihat aja L di deskripsi saya taruh link ini supaya teman-teman bisa baca juga Gimana cara mulainya customisasi idx Kalian terus juga mau nge-preview aplikasinya gimana dan yang penting adalah bagaimana cara ng-deploy-nya ini tadi ya pakai firebase atau pakai Cloud Run kalau misalkan mau ngobrol-ngobrol dengan developer lain yang pakai idx ada juga forumnya ini forumnya ya community.idx.dev Nah jadi kalian bisa diskusi dengan para pengguna idx yang lain kalau misalkan bingung Cara pakainya atau mau lihat tips and trick orang lain pakainya gimana ada di sini juga ya Jadi silakan dikunjungi teman-teman Oke jadi itu dia preview singkat ya Menurut saya belum terlalu mendalam mengenai Project idx kode editor keren punyanya Google gimana Menurut kalian cukup OK lah ya buat kita coba mumpung masih Gratisan teman-teman ya mumpung belum bayar diulik-ulik aja dicoba-coba dicicipin siapa tahu nanti jadi tertarik untuk menggunakan ke depannya boleh teman-teman share juga pengalaman menggunakan project idx ini di kolom komentar di bawah biar teman-teman yang lain juga ikut tertarik pakai kode editor ini apakah cukup untuk menggantikan vs Code atau kita masih tetap butuh vs Code untuk nging kita sehari-hari boleh juga share di kolom komentar di bawah ya jadi sekali lagi itu aja untuk video kali ini teman-teman mudah-mudahan bermanfaat semua Link yang penting tadi Udah saya simpan di deskripsi di bawah silakan dikunjungin aja kalau misalkan teman-teman butuh penggunaan idx yang lebih kompleks lagi boleh tulis juga di kolom komentar nanti kita coba sama-sama Ulik supaya kita bisa coba juga Oke jadi sekali lagi itu aja terima kasih ter kasih teman-teman sudah menyaksikan sampai ketemu lagi di episode berikutnya saya S gagali pamit dan seperti biasa jangan lupa titik kom [Musik] [Musik]