Kelas pembuka gratis: kenalan dengan Product Engineer, AI di dunia kerja, dan menyiapkan alat ngoding
Kenalan dengan peran Product Engineer dan cara AI dipakai di dunia kerja, lalu siapkan tools yang kamu butuhkan.
Dulu, satu fitur di aplikasi dikerjakan banyak orang. Product manager menulis apa yang dibutuhkan. Designer menggambar tampilannya. Engineer membangunnya. Analyst membaca datanya. Sekarang AI ikut mengerjakan tugas kecil di setiap tahap. Karena itu, makin banyak tim yang meminta satu orang memegang satu fitur dari awal sampai akhir. Orang seperti itu disebut Product Engineer, dan kelas ini langkah pertamamu ke sana.
Kelas pembuka ini gratis dan terbuka untuk siapa saja. Belum pernah ngoding sama sekali? Nggak apa-apa, kita mulai dari nol.
Pertama, kamu kenalan dengan Product Engineer, yaitu engineer yang memegang satu fitur dari awal sampai akhir. Kamu juga melihat kenapa AI membuat beberapa peran di tim produk jadi menyatu. Lalu kita bahas kenapa dasar coding tetap harus kamu kuasai sendiri, walaupun AI sudah pintar.
Setelah itu, kamu kenalan dengan Mentory Circle: jalur belajarnya, cara naik level, dan cara memakai dashboard. Di bagian terakhir, mentor menemanimu memasang VS Code dan membuka halaman web pertamamu di browser.
Di akhir Level 1 (Web Foundations), kamu punya landing page portfolio, yaitu halaman perkenalan dirimu, yang sudah live di internet. Tampilannya rapi di HP dan gampang ditemukan orang lewat Google.
Yang Kamu Pelajari
- Menjelaskan apa itu Product Engineer, dan bedanya dengan fullstack developer
- Menyebutkan untung dan risiko AI buat orang yang baru belajar coding
- Menjelaskan jalur Mentory Circle: 3 tahap, 10 level, dan asesmen (ujian naik level) di akhir tiap level
- Bikin akun, masuk dashboard, dan menemukan kelas pembuka
- Memasang VS Code, lalu membuat
index.htmlpertamamu dan membukanya di browser
Yang dihasilkan
VS Code yang siap pakai dan halaman pertamamu
Langkah demi Langkah
Orientasi
- 1
Langkah 1
Kenapa sekarang satu orang bisa pegang banyak peran
Dulu, satu fitur bisa dikerjakan empat orang, dan masing-masing harus nunggu giliran. Sekarang AI bisa membantu menulis draf kode, membuat mockup (gambar kasar tampilan aplikasi), dan merangkum data. Tugas kecil di tiap peran jadi lebih cepat. Akibatnya, banyak tim mulai meminta satu orang memegang dua peran sekaligus.
Ada tiga gabungan yang paling sering muncul. Software engineer yang juga berpikir seperti product manager disebut Product Engineer. Designer yang juga bisa membangun tampilan web (frontend developer) disebut Design Engineer. Software engineer yang juga paham machine learning disebut AI Engineer. Tren gabungan peran ini juga mulai kelihatan di perusahaan teknologi terkemuka seperti OpenAI, Anthropic, dan Apple. Mereka mulai membuka posisi Product Engineer, yaitu orang yang nggak cuma jago coding, tapi juga paham AI dan bisa membangun produk dari awal sampai siap digunakan (end-to-end product). Mulai dari memahami masalah dan kebutuhan user, mencari solusi yang tepat, sampai mengembangkan produk yang benar-benar bisa dipakai.
Karena itu, di Mentory Circle kita fokus ke peran yang pertama, Product Engineer.
Coba langsung · Peran yang bergabung Coding selalu aktif. Pilih satu keahlian lain yang dipegang orang yang sama.
Codingselalu aktifCodingPeran intiSoftware Engineer
Membangun dan merawat kode sesuai kebutuhan yang sudah ditulis orang lain.
Ini peran inti semua gabungan di sebelah. Pilih keahlian kedua dan lihat peran apa yang muncul.
Yang tetap harus kamu kuasai sendiri: dasar coding, cara berpikir untuk memecah masalah, dan kemampuan menilai hasil kerja AI.const me = { skills: ["code"], role: "Software Engineer", };Coba sekarang: Di demo, pilih Product sense, lalu ganti ke Design. Peran apa yang muncul?
- 2
Langkah 2
Jadi, Product Engineer itu siapa?
Product Engineer adalah engineer yang memegang satu fitur dari awal sampai akhir. Dia mencari tahu masalah user, membangun solusinya, merilisnya, lalu membaca data untuk memperbaikinya. Ini berbeda dengan "product engineer" di pabrik, yang merancang barang fisik.
Lalu apa bedanya dengan fullstack developer? Fullstack developer menjelaskan bagian kode yang kamu tulis: frontend (bagian yang dilihat user) dan backend (bagian yang bekerja di server). Product Engineer menjelaskan tanggung jawabmu: apakah fitur itu benar-benar menyelesaikan masalah. Product Engineer biasanya juga fullstack. Bedanya, dia dinilai dari hasilnya, bukan cuma dari kode yang jalan.
Coba sekarang: Pikirkan satu aplikasi yang kamu pakai tiap hari. Masalah apa yang diselesaikan salah satu fiturnya? Data apa yang bisa menunjukkan fitur itu berhasil?
- 3
Langkah 3
AI boleh bantu, asal kamu tetap paham
AI memang membantu. Kerjaan yang berulang jadi lebih cepat, konsep yang susah bisa ditanyakan kapan saja, dan AI bisa jadi teman diskusi waktu kamu buntu.
Tapi ada risikonya juga, dan datanya cukup jelas. Di survei Stack Overflow 2025, 84% developer memakai AI, tapi cuma 33% yang percaya hasilnya. Artinya, AI sering dipakai, tapi jarang dipercaya begitu saja. Di studi Anthropic 2026, pemula yang menyerahkan penulisan kode ke AI mendapat nilai paling rendah, terutama saat debugging, yaitu mencari dan memperbaiki kesalahan kode. Artinya, kalau semuanya diserahkan ke AI, kemampuanmu sendiri nggak tumbuh.
Karena itu, aturannya di Mentory Circle begini. Di Tahap 1 kamu belajar tanpa AI. Di Tahap 2 AI boleh dipakai. Di Tahap 3 AI wajib dipakai. Dengan dasar yang kuat, kamu bisa menilai jawaban AI, bukan cuma menyalinnya.
- 4
Langkah 4
Cara belajar di Mentory Circle
Mentory Circle punya 3 tahap dan 10 level. Tahap Initiate membangun fondasi web dan JavaScript. Tahap Builder membangun produk utuh, dari database sampai Next.js. Tahap Product Architect melatih cara berpikir produk, product engineering, dan memakai AI di dalam produk. Jadi, jalur ini berakhir di peran yang tadi kamu kenal.
Setiap level ditutup dengan asesmen, yaitu ujian untuk naik level. Kamu naik level karena lulus, bukan karena hadir. Kalau belum lulus, kamu mengulang level itu. Kamu juga boleh mundur satu level tanpa bayar (ada syarat dan ketentuannya).
- 5
Langkah 5
Hasil Level 1: portfolio yang bisa ditemukan di Google
Di Level 1 (Web Foundations), kamu mulai dari file desain di Figma dan berakhir dengan landing page portfolio yang live. Kamu belajar HTML, CSS, dan cara membuat layout yang rapi di HP.
Bagian terakhirnya adalah SEO (search engine optimization), yaitu cara membuat halaman gampang dibaca Google. Di hari 9 kamu menulis tiga hal: title (judul halaman), meta description (ringkasan singkat halaman), dan og:image (gambar pratinjau). Hasilnya, halamanmu tampil rapi di hasil pencarian Google, dan juga waktu link-nya dibagikan di WhatsApp.
Coba langsung · Meta tag dan link preview Hasil Googleyourname.dev
Nama Kamu · Frontend Developer
Portfolio frontend developer: landing page dan web app yang cepat, rapi, dan bisa dipakai semua orang. Lihat proyek terbaru dan hubungi saya.
Link dibagikan di WhatsAppog:image 1200×630Nama Kamu · Frontend Developer
Portfolio frontend developer: landing page dan web app yang cepat, rapi, dan bisa dipakai semua orang. Lihat proyek terbaru dan hubungi saya.
yourname.dev
https://yourname.dev
title: 30/60 karakter, aman, tampil utuh.
description: 141/155 karakter, aman.
og:image ada, jadi WhatsApp menampilkan kartu besar dengan gambar.<head> <title>Nama Kamu · Frontend Developer</title> <meta name="description" content="Portfolio frontend developer: landing page dan web app yang cepat, rapi, dan bisa dipakai semua orang. Lihat proyek terbaru dan hubungi saya."> <meta property="og:title" content="Nama Kamu · Frontend Developer"> <meta property="og:description" content="Portfolio frontend developer: landing page dan web app yang cepat, rapi, dan bisa dipakai semua orang. Lihat proyek terbaru dan hubungi saya."> <meta property="og:image" content="https://yourname.dev/og.png"> </head>
Coba sekarang: Hapus isi title di demo, lalu lihat hasil Google-nya. Setelah itu, tulis title untuk portfolio kamu sendiri.
- 6
Langkah 6
Bikin akun dan masuk dashboard
Dashboard adalah tempat materi, link kelas live, rekaman, dan progres belajarmu. Begini cara masuk pertama kali:
1. Buka mentorycircle.com, klik Daftar Sekarang, lalu isi nama, email, dan nomor WhatsApp.
2. Klik Masuk dan ketik email yang sama.
3. Buka email kamu dan cari kode 6 digit. Kalau nggak ada, cek folder Spam.
4. Masukkan kodenya, buat password, lalu klik Simpan & Masuk.
5. Di halaman Ringkasan, kelas pembuka dan tombol Masuk Meeting sudah muncul.
Coba langsung · Masuk ke dashboard Klik tiap langkah, atau pakai tombol Lanjut. Kotak kuning di kanan menunjukkan apa yang kamu klik.
mentorycircle.com/idMentory CircleMasukDaftar SekarangNamaNama KamuEmailyou@example.comNomor WhatsApp0812xxxxxxx1/6 Di halaman depan, klik Daftar Sekarang. Isi nama, email, dan nomor WhatsApp. Akun kamu langsung dibuat.
Tanda berhasil: muncul pesan pendaftaran berhasil.Coba sekarang: Ikuti lima langkah di atas sekarang, sampai kamu melihat kelas pembuka di halaman Ringkasan.
- 7
Langkah 7
Pasang VS Code, lalu buka halaman pertamamu
VS Code adalah aplikasi tempat kamu menulis kode. Download gratis di code.visualstudio.com, lalu pasang seperti aplikasi biasa.
1. Buat folder baru bernama
portfolio. Buka folder itu lewat menu File, lalu Open Folder.2. Buat file baru bernama
index.html, lalu salin contoh kode di bawah.3. Simpan dengan Ctrl + S (Cmd + S di Mac).
4. Klik kanan
index.htmldi File Explorer, pilih Open with, lalu pilih Chrome atau Edge.Coba sekarang: Ganti teks di dalam
<h1>dengan namamu, simpan, lalu refresh browser. Judulnya ikut berubah?
Contoh Lengkap
Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halo, aku Nama Kamu</title>
</head>
<body>
<h1>Halo, aku Nama Kamu</h1>
<p>Aku sedang belajar bikin web dari nol.</p>
</body>
</html>Challenge Hari Ini
Challenge Hari Ini
Tiga tingkat: Quick Check, Code Challenge, lalu Boss Challenge. Kerjakan berurutan.
Kamu sedang melihat materi terbuka. Quiz-nya bisa dicoba, tapi progresnya nggak tersimpan. Daftar untuk menyimpan progres.
01
Quick Check
Kasus dari kerjaan sehari-hari. Salah itu wajar, baca penjelasannya lalu coba lagi.
Soal 1 dari 5
Lowongan kerja
Dicari: orang yang ngobrol dengan user untuk menemukan masalah, membangun fiturnya sampai rilis, lalu membaca data pemakaian untuk memperbaikinya.
Peran apa yang paling cocok dengan lowongan ini?
02
Boss Challenge
Opsional, tanpa hint
Selesaikan tingkat sebelumnya dulu.
Bug Hunt
Kesalahan yang Sering Terjadi
Kesalahan yang paling sering muncul. Tebak dulu kenapa salah, baru buka kartunya.
Login ditolak dengan pesan "Email ini belum terdaftar"Lihat penyebabnya
- Kenapa
- Email yang kamu ketik beda dengan email waktu Daftar. Bisa karena salah satu huruf, atau kamu memakai email lain.
- Cara benerin
- Ketik email yang sama persis dengan waktu Daftar. Kalau masih gagal, tanya admin lewat WhatsApp.
Kode dari AI jalan, tapi kamu nggak bisa menjelaskan isinyaLihat penyebabnya
- Kenapa
- Kode yang jalan sekali belum tentu benar. Kalau kamu nggak paham isinya, kamu juga nggak bisa memperbaikinya waktu rusak.
- Cara benerin
- Di Tahap 1, tulis kodenya sendiri. Nanti waktu AI sudah boleh dipakai, baca setiap barisnya. Lalu coba dengan isian yang aneh, misalnya kolom kosong, sebelum kamu pakai.
Browser menampilkan kode HTML-nya, bukan halamannyaLihat penyebabnya
- Kenapa
- File-nya tersimpan sebagai
index.html.txt. Windows sering menyembunyikan ekstensi, yaitu akhiran nama file seperti.txt. Jadi namanya kelihatan sudah benar. - Cara benerin
- Simpan ulang dari VS Code dengan nama
index.html. Lalu nyalakan "File name extensions" di File Explorer, supaya akhiran nama file selalu kelihatan.
Sudah mengubah kode, tapi halaman di browser nggak berubahLihat penyebabnya
- Kenapa
- Perubahannya belum disimpan, atau browser masih menampilkan versi lama.
- Cara benerin
- Simpan dulu dengan Ctrl + S (Cmd + S di Mac). Kalau ada titik putih di tab VS Code, artinya file belum tersimpan. Setelah itu, refresh browser.
Klik dua kali index.html malah terbuka di VS Code atau NotepadLihat penyebabnya
- Kenapa
- Laptopmu diatur untuk membuka file
.htmldengan aplikasi teks, bukan dengan browser. - Cara benerin
- Klik kanan file-nya, pilih Open with, lalu pilih Chrome atau Edge. Bisa juga dengan menyeret file-nya ke jendela browser.
Selanjutnya
Selanjutnya
Siap untuk Hari 2? Cek dulu
- Perangkat: laptop atau PC dengan Windows atau macOS. HP dan tablet belum cukup untuk ngoding.
- Perangkat: Chrome atau Edge versi terbaru. Di hari 2 kita memakai panel Accessibility di DevTools, yaitu alat pemeriksa halaman yang ada di browser.
- Perangkat: VS Code sudah terpasang, dan
index.htmlpertamamu sudah bisa dibuka di browser. - Akun: akun Vercel gratis (vercel.com) sudah dibuat. Mulai hari 3, tugasmu dikirim lewat Vercel Drop.
- Persiapan: kamu tahu cara menyalakan screen reader, yaitu aplikasi yang membacakan isi layar. Di Windows namanya Narrator (Ctrl + Win + Enter). Di Mac namanya VoiceOver (Cmd + F5).
- Pembayaran: kalau kamu memutuskan lanjut, bayar Level 1 di halaman Ringkasan (Transfer, Unggah Bukti, Kami Cek). Hari 2 terbuka setelah pembayaranmu dicek.
- Kelas live: aplikasi Zoom sudah terpasang. Mulai hari 2, link Zoom ada di dashboard (tombol Masuk Meeting), bukan di email.
- Kelas live: earphone dan koneksi internet yang stabil.
Pertanyaan Seputar Kelas Gratis
Apakah kelas pembuka Mentory Circle benar-benar gratis?
Ya. Kelas pembuka tiap level gratis dan tanpa komitmen. Kamu baru bayar kalau memutuskan lanjut: mulai Rp300.000 per level, plus commitment fee Rp500.000 sekali di awal.
Harus bisa coding dulu sebelum ikut?
Nggak. Kelas ini dibuat untuk yang mulai dari nol. Yang kamu butuhkan cuma laptop, koneksi internet, dan email yang aktif.
Kelasnya di mana dan kapan?
Online lewat Zoom. Setelah daftar, jadwalnya ada di email selamat datang, dan link Zoom-nya kami kirim lewat email sehari sebelum kelas mulai.
Ikut Kelas Ini Bareng Mentor
Materinya sudah kamu lihat. Di kelas live, mentor menemani kamu dari pertanyaan pertama sampai halaman web pertamamu terbuka di browser.
Gratis, tanpa komitmen. Lihat dulu, baru putuskan.
Gabung Kelas Gratis