Halo teman-teman, masih bersama saya di Kodawit Bahri. Pada kali ini saya akan memperkenalkan sebuah platform yang sangat menarik untuk kalian yang ingin membuat aplikasi video call dengan cepat dan mudah. Yaitu nama platformnya adalah Zegoclute.
Nah, dengan Zegoclute ini kita dapat memanfaatkan UIKit yang siap pakai untuk membangun aplikasi video call dengan menggunakan kode yang sangat minimal. Zegoclute menawarkan UIKit yang memungkinkan kita membangun aplikasi video call dengan cepat dan efisien. UIKit ini dirancang untuk mempermudah pengembangan dalam membuat aplikasi dengan berbagai fitur penting seperti kualitas video yang tinggi, stabilitas yang sangat baik, serta memudahkan integrasi ke platform-platform lain. Nah, fitur-fitur ini dirancang untuk mempercepat proses pengembangan aplikasi tanpa harus menulis banyak kode dari awal. Jadi kita bisa fokus pada hal yang lebih penting seperti user experience nah sebelum kita memulai membangun aplikasi kita bisa mendapatkan 10 ribu menit gratis hanya dengan mendaftar di zico cloud nah caranya seperti apa?
kita langsung saja saya akan coba disini kita perlu sign up kita isi saja first name nya saya tulis disini kode bahri terus saya isi indonesia setelah itu saya kasih kode with bahri nah, itu kita get code nanti kita akan dikirimi kode sebelumnya please click the number greater than the reference value oke, oke, next oke Nah kita buka emailnya, dia akan kirim ke email teman-teman. Oke sudah masuk, nah ini kita copy. Lalu saya copykan di sebelah sini, terus passwordnya saya akan pakai, saya just dari Google. Oke kita centang, start your free trial. Nah setelah itu kita akan masuk ke dashboardnya.
Oke, nah disini kita diminta untuk mengisi, kita isi aja kalau saya kasih aja namanya Kodewit Bahri. Company-nya kodewitbahri.com, gitu aja. Title-nya Founder, Industrinya Education, gitu ya. Terus phone number-nya, saya isi aja Indonesia 620. Oke, kita continue. Nah, kita dapat nih, dapat free trial 10.000 menit.
Seperti itu yang bisa kita pakai untuk menjelajahi semua fitur-fiturnya Zico Cloud. Habis itu kita go to dashboard. Oke, nah, jika sudah terbentuk seperti ini, kita buat dulu projectnya. Create your first project.
Nah, di sini dia mempunyai banyak jenis project. Ada video call, ada... video conference, live streaming, live audio room, in-app chat, dan macam-macam.
Jadi teman-teman bisa mencoba berbagai macam servisnya CJGoclub secara gratis. Sesuai dengan kebutuhan ada live shoppingnya juga, ada one-on-one tutoring, ada telehat, dan macam-macam. Nah, di sini saya akan mempraktekan bagaimana cara membuat video call dengan cepat. Jadi saya akan pilih untuk projectnya, yaitu video... call ya voice and video call oke setelah itu kita next guys saya kasih nama feed call gitu oke nah disini embedded interactive scenario with kurang dari 10 line ya dibilangnya ya nanti kita akan pilih yang Flutter karena disini nanti saya akan mempraktekan menggunakan framework Flutter gitu oke kita sudah terus langsung disini start with UIKit gitu oke Nah setelah itu nanti dia akan membuatkan projectnya dulu.
Jadi kita tunggu dulu prosesnya sampai selesai. Oke, nah jika sudah selesai akan tabelan seperti ini. Nah, kita tunggu aja. Nah, dia akan masuk ke Build Your App. Nah, di sini dia bisa untuk web, untuk iOS, Android, ada Flutter, ada React Native.
Nah, di sini saya akan menggunakan for Flutter gitu. Nah, setelah itu di sini ada beberapa tutorial gitu. Oke save the save integration kita coba save aja disini Nah oke setelah itu nanti di sini kita sudah dikasih ada app ID sama app sign ini nanti yang akan kita gunakan untuk membuat aplikasi menggunakan Flutter gitu Nah disini saya coba go to admin console ini admin console seperti ini jadi kita punya produk apa di sini yang kita buat gitu kan terus ada build information nya juga ada guide juga gitu dokumentasinya juga gitu dan berbagai fitur yang dia sediakan gitu nah kita coba untuk membuat aplikasi video call nya kita masuk ke tutorialnya dia si Jigokul sudah menyediakan tutorial untuk kita menggunakan UI kit dalam membuat aplikasi video call dengan dengan cepat gitu Nah di sini dia jelaskan apa itu the video call you e-kit gitu kan keuntungannya apa gitu dan lain-lain kita langsung aja ke bagian quick start jadi kita langsung buat aja dan dia juga nyediain video tutorialnya nah disini pertama saya akan buat dulu projectnya menggunakan Visual Studio Code saya buka dulu Visual Studio Code saya terus saya buat Project baru. Oke, saya ke sini.
Ini saya akan besarin. Saya buat project baru. Flutter new project. Oke, terus saya kasih namanya. Saya taruh di development.
Oke, lalu saya kasih namanya. Flutter Zegopitcall gitu ya. App.
Oke. Nah, ini akan saya taruh di sebelah sini ya. Nanti biar ke kanan ke kiri. Nah setelah itu kita perlu untuk menambahkan Zygo UIKit Prebuilt Call ya untuk library-nya Jadi kita buka terminalnya seperti ini Terus kita paste di sini Oke terus kita enter nanti dia akan menambahkan package-nya Di sebelah sini teman-teman Jadi akan ada package baru Nah ini Zygo UIKit Prebuilt Call ya Udah nah setelah itu dia akan coba download dulu Untuk library yang dia butuhkan gitu kita tunggu saja nah sambil nunggu setelah itu kita diminta untuk nih kita sudah buat ya tadi ya goto zio code admin terus kita ambil app id dan app sign nya gitu nah untuk itu app id app sign nya saya akan buatkan satu kelas disini untuk config nya saya kasih nama disini config.dat lalu saya kasih kelas kelas config terus saya buat saya buat StaticToneStringFID sama disini dia butuh up-sign static up-sign seperti ini Oke ini coba besarin dikit nah segini ya Oke nah saya akan kopikan untuk app ID dan appsend nya kita ambil dari sini ke sini terus nanti ada appsend sama nah disini saya copy saya taruh di bagian sini oke sama Hai FID FID seperti ini saya copy juga disini Hai baik FID sama asin udah siap saya kita tinggal buat callpages nya ya temen-temen ini udah selesai untuk import Zico cloud package nya kita kembali ke sini sekarang oke nah kita perlu bikin namanya callpages ya saya akan buat callpages stateless bisa stateful juga boleh Nah, disini saya akan buat call page. callpage.dat seperti ini, terus stf.
STL aja, stateless, gak apa-apa Kita kasih call page seperti ini Nah disini saya akan Melempar nanti datanya Itu di, saya akan buat halaman Depannya, halaman loginnya nanti kayak Dia harus isi Call ID-nya sama username-nya Jadi disini saya akan pakai Final string username Sama final String call ID Nah setelah itu saya generate constructornya gitu, diperbaiki di sebelah sini. Oke ini sudah ada call id ya seperti itu nah kita tinggal return untuk widget buildnya gitu, kita ke widget buildnya ini, nah ini returnnya kita ganti dengan zgooqloat gitu ceritanya, nah disini kita tinggal import, oke nah yourappid ini saya pakai config tadi titik konflik titik FID nah dia butuh int ternyata nah FID nya ini saya tadi isi dengan string ya temen-temen ya Nah ini bisa di to string aja yaitu kejar atasnya akan ganti aja di sini int oke lalu disini config.appsync oke, nah untuk user id nya saya menggunakan username username.replace jadi kalau ada spasinya akan saya hilangkan spasinya nah kalau untuk username nya yang asli dia pakai username yang sesuai jadi username apa adanya Nah, call id-nya saya pakai call id yang dikirim dari halaman login nanti. Nah, seperti ini sudah selesai untuk membuat call page-nya. Nah, terus saya akan buat halaman login-nya di sini.
login-page.dart seperti ini. Saya pakai str stateful login-page. Nah, terus di sini saya kasih scaffold. kasih abar abar title nah disini kasih login call gitu ya Ziko cloud gitu oke nah bodynya nah ini bodynya saya akan menggunakan listview aja oke nah disini dibuatin ada pertama nanti saya isi enter your username and call id to start call terus ada untuk username nya terus masukkan username nya nah disini saya akan buatkan untuk final text editing controller untuk username nya gitu username controller sama call id controller Nah, di sini saya akan kasih controller username controller.
Nah, seperti ini. Sama di sini, call id-nya juga kita kasih controller-nya. Controller, call id controller. Oke, nah, lalu di bagian sini.
Oke, nah. lalu ketika di klik nanti ibaratnya di klik call nya disini saya akan langsung pakai navigator.push saya akan pakai push konteks ini material page root disini kita kasih konteks lalu kita kasih seperti ini kita tutup disini lalu disini kita return ke call page gitu nah ini call page nya kita Import. Nah, username-nya kita masukkan. Sama call ID-nya kita masukkan.
Jadi, dia langsung ke call page nanti. Jadi, perlu masukin call ID sama username-nya. Nah, kita coba sekarang lihat hasilnya seperti apa.
Di mainnya ini untuk homepagenya saya akan hapus sampai bawah. Lalu di sini saya akan ganti dengan login page. Oke, seperti ini. Lalu kita bisa running emulatornya.
Nah, di sini saya akan... Running emulatornya saya pakai pixel 4. Oke, nah terus running pertama dia akan banyak hal, jadi kita runningnya coba pakai terminal dulu dengan cara flutter run main v. Seperti ini, kita coba lihat hasilnya. Oke, saya taruh di sebelah sini.
Oke kita pilih yang dua ya sdk2 nanti satunya lagi saya akan pakai handphone saya temen-temen Nah dia lagi download beberapa library yang dibutuhkan gitu Hai jadi kita hanya fokus tadi kita hanya fokus buat kolpetsnya yang beberapa baris ini akan terus sama login page gitu enaknya seperti penaslah itu nanti kita akan melakukan konfigurasi kita lihat dulu hasil dari login page dulu Nah, sambil menunggu proses download library nya selesai kita lanjutkan untuk konfigurasinya jadi setelah ini nih konfigurasi project untuk Android pertama di gradle nya seperti ini kita perlu menambahkan min eh sebelumnya kita tambahkan dulu untuk di bagian build gradle kita buka dulu ya di bagian Android di App Build Gradle, di bagian App Build Gradle di dependensinya ini dia perlu jdk8 ini kita coba kasih kita copy aja ini sudah ada harusnya ya nah terus min SDK nya 21 oke kita ganti di sini 21 oh ini di build sebelum src oke nah lalu min 21 lalu untuk compel versenya di 33 kita ikutin dulu aja compel versenya di 33 itu ada di compel nya compel SDK nya oke kita ganti 33 Nah setelah itu di di Android nah ini ya dia kita Nah itu untuk yang versi Flutter 2 3.24 itu ada di setting Gradle di bagian sini berarti ini kita kasih 1 8 ini ada yang mintanya 8.0 ya kasih 8.0 ini oke lalu untuk Gradle nya dia 7.4 kita cek dulu Gradle nya di bagian Gradle urat, oke, 76 ya, di atasnya, lalu kita modify permissionnya, ini ada permissionnya kita taruh di bagian src di main di android manifest, kita taruh di atasnya application, oke, setelah itu kita tambahkan untuk ini, application, Hai hantarnya dimana ini kita copy nah letaknya ada di kita buat dulu namanya proguatrol siaran proguatrol siang di src di up src di up di sini ya dia ada di dalam app ya Nah kita tulis prograderoll.pro oke prograderollsrename pro guad rules pro terus kita paste di sini yang tadi setelah itu ini kita copy di bagian buildgradle eh sorry ini ditaruh di app ya app nah disini app di build gradle ini kita tambahkan ini nah dia ada di dalam rilisnya seperti dia ada di sini teman-teman di bawahnya absen ini oke seperti ini prograt retro Oke, nah ini sudah tinggal kita testing ya. Baik, sekarang kita coba untuk testing. Nah, di sini saya menggunakan satu emulator dan satu lagi itu handphone saya.
Jadi nanti ada kamera asli dari handphone saya. Ini mirroring dari handphone saya. Ini emulator gitu. Oke, pertama kita running dulu di emulator. Ini, emulator ini.
Oke, kita running dulu satu, sama satu lagi saya akan running di handphone saya. Nah, ini handphone saya, saya running. Oke, kita tunggu sampai selesai. ini sudah jalan emulator pertama dan ini untuk yang di handphone saya nah cara penggunaannya simpel sekali jadi pertama kita masukkan dulu username yang akan nanti dipakai untuk call nah username contoh disini saya pakai bahari Hai nah seperti ini yang pertama di emulator ini saya akan pakai nama Bahri Bahri Nah kalau ini nanti ini akan kita samakan kalau dia sama dia akan ada di satu call gitu ceritanya coba ID nya sekasih 123456 gitu ya terus kita start hai hai Oke dia akan otomatis meminta akses record picture dan video dan kita kasih akses Terus audio juga oke nah ini sudah masuk tinggal nunggu lawan bicaranya gitu Nah ini untuk ini saya running lagi tadi kayaknya sempat keputus kabelnya untuk yang handphone saya kasih nama flutter gitu flutter kalau id nya 1 2 3 4 5 6 ketika saya masuk nanti akan ada di 1 nah ini Hai nah lihat temen-temen nah ini sudah masuk ya ini saya pakai handphone yang sini melaton Hai yang disini ini sudah kelihatan juga ada namanya ini bari sama faktor bahan hai hai Hai itu gitu teman-teman untuk testingnya begitu mudah kita membuat aplikasi video call menggunakan jgroupplot teman-teman bisa cobain nanti source code nya juga akan saya share ke temen-temen silahkan sign up dan mendapatkan 10.000 menit untuk testing selama satu bulan jadi untuk integrasinya sangat langit dah step-by-step sudah jelas untuk meninggal praktik seperti itu Oke terima kasih teman-teman telah menonton video ini Selamat mencoba selamat berkarya