00:00:00Jutaan pengembang telah membangun di cloud front-end Vercel selama lebih dari satu dekade.
00:00:04Kita semua telah menggunakan Vercel untuk menerapkan segalanya, mulai dari proyek pribadi hingga perangkat lunak perusahaan.
00:00:10Dan saat Anda membangun agen dan fitur AI untuk mengurangi hambatan bagi pengguna atau tim Anda,
00:00:15hal terakhir yang Anda inginkan adalah sesuatu yang rumit untuk dikelola dalam tahap produksi.
00:00:21Infrastruktur mandiri Vercel membuat DevOps semudah penerapan.
00:00:25Anda menghasilkan kode dan membangun agen, lalu Vercel secara mandiri mengoptimalkan performa skala global,
00:00:31menyediakan komputasi, mengatur alur kerja AI, bahkan menyelidiki anomali.
00:00:38Semua itu tanpa memerlukan konfigurasi apa pun.
00:00:40Sekarang, izinkan saya menunjukkan maksud saya melalui sebuah simulasi cepat.
00:00:43Mari kita ambil tantangan untuk memigrasikan aplikasi web yang sudah ada.
00:00:46Ini adalah aplikasi demo platform perekrutan untuk perusahaan kopi menengah yang memiliki tempat penyangraian dan kafe.
00:00:53Ini aplikasi sederhana dengan front-end, database untuk menyimpan lamaran kerja dan resume,
00:00:58serta layanan back-end yang merangkum surat lamaran untuk peninjauan aplikasi yang lebih cepat.
00:01:03Saat ini aplikasi berada di penyedia hosting kuno—saya tidak akan menyebutkan yang mana—
00:01:07tapi kita pasti ingin memodernisasinya, jadi mari kita lakukan itu.
00:01:10Kita akan bermigrasi ke Vercel, yang akan mempercepat pengembangan fitur, penerapan, dan kolaborasi.
00:01:17Sekarang mari kita impor aplikasi ini ke Vercel.
00:01:19Saya akan mulai dengan back-end, yang merupakan layanan Python FastAPI dasar.
00:01:24Saya akan mulai dengan mengeklik "Add New".
00:01:26Saya sudah menghubungkan akun Git saya dan saya bisa melihat repositori saya ada di sini.
00:01:31Saya akan mengeklik "Import" pada repositori API.
00:01:33Proses impor ini dapat dikonfigurasi sepenuhnya, termasuk konfigurasi build dan output,
00:01:38tetapi Vercel mendukung FastAPI dan kerangka kerja back-end lainnya secara langsung.
00:01:44Jadi saya cukup mengeklik "Deploy" dan itu akan langsung berjalan.
00:01:46Dan dalam hitungan detik, layanan back-end Python saya sudah diterapkan dan berjalan di Vercel.
00:01:52Sekarang Vercel secara otomatis menghasilkan URL untuk proyek ini.
00:01:55Saya akan menyalinnya agar bisa saya tambahkan sebagai variabel lingkungan untuk aplikasi berikutnya.
00:02:01Saya akan menambahkan proyek baru lagi, mengeklik "Import" pada aplikasi selanjutnya,
00:02:05dan saya akan mengimpor variabel lingkungan saya untuk aplikasi ini agar dapat terhubung dengan Supabase.
00:02:11Bagus, sekarang aplikasi saya bisa terhubung ke Supabase, dan untuk variabel FastAPI,
00:02:15saya akan menambahkan URL yang baru saja saya salin, lalu menerapkan aplikasinya.
00:02:20Vercel sedang membangun dan menerapkan proyek tersebut,
00:02:23dan ini akan berjalan di infrastruktur yang sama yang menggerakkan jutaan situs web dan aplikasi.
00:02:27Kini 126 titik kehadiran global Vercel secara otomatis menempatkan konten di dekat pengguna,
00:02:33yang berarti aksesnya akan selalu sangat cepat.
00:02:37Dan di sini kita bisa melihat bahwa aplikasi telah berhasil diterapkan.
00:02:40Mari kita lihat hasilnya.
00:02:42Saya bisa melihat daftar pekerjaan, dan di dasbor saya bisa melihat back-end dengan fitur ringkasan Python kami.
00:02:49Setelah ini masuk ke tahap produksi, saya akan bisa memantau seluruh aplikasi.
00:02:53Tapi untuk sekarang, saya akan beralih ke proyek lain di mana kita bisa melihat beberapa data langsung.
00:02:57Saya bisa mendapatkan gambaran lengkap dengan analitik web, wawasan kecepatan, log, dan dasbor observabilitas yang dapat dikueri.
00:03:04Sebagai contoh, inilah analitik untuk situs web kami, skills.sh, tempat orang mencari keahlian agen.
00:03:11Saya bisa menemukan informasi lalu lintas dan rujukan mendetail, termasuk situs perujuk.
00:03:15Jika saya mengeklik di sini pada "Speed Insights", ini menunjukkan Core Web Vitals.
00:03:19Dengan cara ini saya dapat mendiagnosis dan memperbaiki masalah kecepatan atau beban apa pun.
00:03:23Dan jika saya mengeklik observabilitas, saya mendapatkan dasbor yang memungkinkan saya menjelajahi dan mengueri diagnostik apa pun dari aplikasi saya,
00:03:29mulai dari log hingga fungsi, permintaan edge, hingga transfer data.
00:03:34Baiklah, sekarang saya ingin membuat fitur peringkasan menjadi lebih berguna bagi manajer perekrutan.
00:03:38Saat ini, FastAPI hanya merangkum surat lamaran dengan pustaka Python.
00:03:43Tapi kita bisa membangun agen sederhana untuk menganalisis surat lamaran sekaligus resume PDF,
00:03:48membandingkannya dengan deskripsi pekerjaan, membuat evaluasi awal kandidat,
00:03:52dan membuat draf email untuk dikirim oleh manajer perekrutan.
00:03:56Saya sudah mengkloning repositorinya secara lokal, jadi saya akan masuk ke direktori dan menginstal alat yang saya butuhkan.
00:04:01Sekarang saya akan menggunakan Vercel CLI untuk menghubungkan proyek lokal saya ke Vercel.
00:04:06CLI memudahkan saya untuk mengontrol platform Vercel langsung dari command line saya.
00:04:11Saya akan mulai dengan "Vercel link".
00:04:14Ya, saya akan menautkan proyek lokal ini.
00:04:16Ini akan menjadi organisasi demo Vercel dan proyek pekerjaan kedai kopi.
00:04:21Sudah ditemukan.
00:04:22Dan kita akan menarik variabel lingkungannya.
00:04:24Selesai.
00:04:25Saya juga bisa menjalankan aplikasi secara lokal dengan "Vercel dev", yang mereplikasi lingkungan penerapan Vercel secara lokal.
00:04:31Mari kita coba, "Vercel dev".
00:04:34Jalankan server, mari kita langsung mengujinya.
00:04:37Dan berhasil.
00:04:38Cukup keren.
00:04:40Sekarang mari kita instal alat AI yang kita perlukan untuk membangun agen tersebut.
00:04:43Vercel memberi saya semua alat AI yang saya butuhkan untuk membangun fitur dan agen.
00:04:47Pertama, saya perlu mengintegrasikan model AI yang sebenarnya untuk peringkasan.
00:04:51Saya bisa menggunakan ratusan model berbeda melalui gerbang AI Vercel,
00:04:55dan menjalankan "Vercel dev" memberi saya akses otomatis dengan token OIDC, ini sangat keren.
00:05:00Selanjutnya, saya akan menginstal SDK AI, yang memberi saya set lengkap primitif AI untuk hal-hal seperti meringkas teks.
00:05:07Mari kita jalankan "PMPM install AI".
00:05:12Bagus.
00:05:13Setelah itu, saya akan menginstal kit pengembangan alur kerja, yang akan mengatur secara tahan lama setiap langkah yang diambil agen.
00:05:21Jika aplikasi saya menghasilkan kode, saya juga bisa menggunakan sandbox Vercel untuk menjalankannya dengan aman.
00:05:26Tapi karena ini adalah agen peringkasan sederhana, saya tidak membutuhkan sandbox untuk itu.
00:05:31Terakhir, front-end-nya menggunakan Next.js.
00:05:34Jadi saya akan menambahkan keahlian praktik terbaik React ke proyek saya untuk memastikan front-end bersih dan cepat.
00:05:40Saya akan menggunakan skills.sh.
00:05:43Buka di sini, cari praktik terbaik React.
00:05:47Saya akan menyalin perintah untuk menginstalnya.
00:05:50Dan selesai.
00:05:53Pastikan untuk menginstalnya untuk "clog code" dan beberapa hal lainnya.
00:05:56Secara global, saya suka versi SimLink, dan sudah terinstal.
00:06:01Sekarang mari kita bangun agennya.
00:06:02Ini cukup sederhana, jadi saya hanya akan memberikan perintah ke "clog code".
00:06:06Ini adalah perintah awal saya.
00:06:08Ini menginstruksikan "clog code" untuk membangun agen guna meringkas surat lamaran dan resume PDF,
00:06:12menggabungkan ringkasan dan membandingkannya dengan deskripsi pekerjaan, memberikan rekomendasi awal, dan membuat email tindak lanjut.
00:06:20Tentu saja, saya menghabiskan waktu dengan "clog" untuk menyempurnakan ini menjadi perintah sekali jadi,
00:06:25yang akan saya tempel sekarang ke dalam "clog code" dan membiarkannya bekerja.
00:06:29Melalui keajaiban demo video, mari kita asumsikan saya sudah menyelesaikan perintah "clog" tersebut,
00:06:35yang tentu saja sudah saya lakukan, dan saya akan membuka direktori lain dengan output tersebut.
00:06:39Baiklah, mari kita terapkan.
00:06:41Saya akan melakukan commit perubahan dan mem-push branch yang sedang saya kerjakan.
00:06:47Sekarang infrastruktur mandiri Vercel akan secara otomatis mengenali beban kerja AI
00:06:51dan menyediakan infrastruktur untuk tugas komputasi tersebut.
00:06:55Dan penetapan harga komputasi aktif di sini sangat bagus.
00:06:57Saya hanya akan dikenakan biaya untuk komputasi yang sebenarnya, bukan waktu tunggu saat kita menunggu respons API model.
00:07:03Sekarang saya bisa melihat aplikasinya, mari masuk ke dasbor dan periksa fitur baru tersebut dan lihat lamarannya.
00:07:10Dan kenyataannya, kita sudah mendapatkan teks penolakan untuk lamaran ini dan draf email penolakan yang dihasilkan.
00:07:17Bagian terbaik tentang lingkungan pratinjau adalah siapa pun di tim saya dapat memberikan komentar pada bagian mana pun dari aplikasi.
00:07:24Saya akan melakukannya sekarang, dan saya hanya akan meminta Eric untuk menambahkan tombol.
00:07:31Keren, dan itu hanyalah salah satu fitur dari toolbar Vercel.
00:07:34Anda bisa menguji flag, menjalankan audit aksesibilitas, menjalankan pelacakan, dan banyak lagi.
00:07:38Lingkungan pratinjau ini berjalan di infrastruktur yang sama dengan produksi,
00:07:42jadi apa yang saya uji di sini adalah persis seperti apa yang akan dilihat pengguna akhir saya di tahap prod.
00:07:46Oke, kita sudah menambahkan agen ke aplikasi, tapi saya ingin anggota tim lainnya juga bisa melakukan iterasi pada UI.
00:07:52V0 memudahkan orang lain untuk mengerjakan proyek di lingkungan pengembangan berbasis web,
00:07:57namun tetap menjaga semuanya terkontrol versi dan aman melalui alur kerja Git.
00:08:01Ini benar-benar keren.
00:08:03Saya akan mengimpor proyek GitHub, memilih branch utama sebagai basis, dan V0 akan menyiapkan proyeknya.
00:08:13Dan seperti yang Anda lihat, variabel lingkungan saya juga ikut terimpor.
00:08:19Sekarang, dalam waktu kurang dari satu menit, aplikasi saya sudah berjalan di V0.
00:08:23Karena ini adalah proyek yang sudah ada, V0 membuat sandbox untuk menjalankan kodenya.
00:08:28Ini adalah primitif sandbox yang sama yang bisa kita gunakan di Vercel untuk membuat lingkungan yang terisolasi.
00:08:33Dan jika saya mengeklik Git, Anda bisa melihat bahwa V0 telah secara otomatis membuat branch baru untuk saya kerjakan.
00:08:39Saya ingin sedikit menyesuaikan desain halaman pekerjaan.
00:08:42Mungkin terdengar gila, tapi mari kita buat kartu pekerjaannya memenuhi lebar halaman.
00:08:50V0 mengerjakannya, dan, yah, saya kurang suka pilihan desain saya itu, tapi mari kita lihat apa pendapat tim desain.
00:08:57Saya bisa mengirim percakapan V0 ini ke tim saya agar mereka bisa terus beriterasi,
00:09:00atau saya bisa membuka PR dan membagikan lingkungan pratinjau untuk kolaborasi.
00:09:06Setelah saya menerapkan aplikasi saya dan disajikan dalam skala global, Vercel memastikan aplikasinya aman secara default.
00:09:13Infrastruktur mandiri yang sama yang menjalankan aplikasi saya juga melindunginya di bagian edge.
00:09:18Ini adalah tampilan firewall untuk situs Next.js kami.
00:09:20Situs ini menerima banyak lalu lintas, dan tidak semuanya berniat baik.
00:09:24Firewall aplikasi web Vercel secara otomatis memeriksa dan memfilter permintaan berbahaya di edge sebelum mencapai aplikasi Anda.
00:09:33Bot ID secara diam-diam membedakan pengguna nyata dari lalu lintas otomatis, memblokir bot penyalahguna tanpa menambah hambatan seperti CAPTCHA.
00:09:40Jaringan edge global Vercel secara otomatis mendeteksi dan memitigasi serangan skala besar, menjaga aplikasi tetap responsif di bawah beban.
00:09:49Segala sesuatu yang baru saja Anda lihat—migrasi, alur kerja AI, kolaborasi, keamanan—berjalan di satu platform tanpa konfigurasi infrastruktur.
00:09:59Itulah yang dimaksud dengan "self-driving".
00:10:01Platform ini menyingkirkan hambatan teknis agar Anda bisa fokus pada pengiriman produk.
00:10:05Kami sudah menangani 11 juta proyek dan terus bertambah.
00:10:08Berikutnya adalah proyek Anda.