Arief's Blog

Full Stack Development with AI

Daftar Isi

Pendahuluan

Pada 21 Oktober 2025, saya mendapatkan kesempatan untuk mengisi workshop “Full-Stack Development with AI” di Institut Teknologi dan Bisnis PalComTech. Blog post ini adalah dokumentasi dari materi yang saya sampaikan dan juga merupakan sebuah living document, dimana saya akan mengupdate konten materinya secara berkala.

Apa itu Full Stack Development?

Full stack development adalah pengembangan aplikasi yang mencakup semua stacks, dari frontend (UI/UX), backend (server), hingga database. Seorang full stack developer harus memahami:

Full Stack Development Layers Image source

More reading

Vibe Coding

Vibe Coding adalah sebuah istilah yang setahun terakhir viral setelah dipopulerkan oleh Andrej Karpathy, mantan karyawan OpenAI yang saat ini bekerja di Tesla.

Vibe Coding merujuk pada kegiatan pengembangan software yang dibantu oleh AI, dimana kita “berbicara” dengan chatbot/LLM tentang apa yang ingin kita buat, dan AI-lah yang akan menuliskan kode programnya. Selanjutnya, kita tidak perlu mereview atau membaca kode yang ditulis oleh AI, melainkan kita cukup menjalankan kode tersebut dan melihat hasilnya. Bisa dibilang, Vibe Coding membuat kita untuk tidak terlalu peduli dengan “how” (proses) tapi “what” (hasil).

Beberapa tools yang populer untuk Vibe Coding:

More reading

Preparation

Mempersiapkan IDE dan AI Assistant

Untuk workshop ini, saya menggunakan Visual Studio Code sebagai editor kode dan GitHub Copilot sebagai AI assistant. Kenapa memilih kedua ini? Karena:

  1. Mereka memiliki tutorial yang lumayan lengkap. Teman-teman bisa mengikuti tutorial setup VS Code dan GitHub Copilot di:
  2. Visual Studio Code gratis dan open source, sedangkan GitHub Copilot juga memberikan plan gratis.

Teman-teman juga diperbolehkan menggunakan tools lainnya yang sudah familiar karena apa yang dipelajari di workshop ini bisa diterapkan di tools lainnya.

Beberapa tools populer lainnya:

  1. Cursor
  2. Trae
  3. Windsurf
  4. Claude Code
  5. ChatGPT Codex

Mempersiapkan Laravel

Pada workshop ini, kita akan menggunakan Laravel versi 12.x yang telah mendukung fitur Starter Kits. Kamu mungkin perlu mengupgrade Laravel, tergantung bagaimana kamu menginstal Laravel:

Setelah upgrade, pastikan kamu membuka sesi terminal baru. Setelah itu, kamu bisa verifikasi instalasi dengan menjalankan perintah:

laravel --version

Pastikan outputnya adalah Laravel Installer 5.12.0 atau lebih baru.

Initialize Project Laravel dengan React Starter Kit

Langkah pertama adalah membuat project Laravel baru dengan React Starter Kit:

laravel new chat-app

Sesuai namanya, pada workshop ini kita akan membuat sebuah web app untuk chatting yang memungkinkan pengguna:

  1. Membuat akun dan login
  2. Mengirim dan menerima pesan secara real-time kepada pengguna terdaftar lainnya

Setelah itu, pilih React, Laravel’s built-in authentication, dan Pest.

laravel new chat-app

Selanjutnya, pilih Yes jika ditanya untuk menjalankan npm install dan npm run build.

Selamat, kamu sudah membuat project Laravel baru dengan React Starter Kit!

Sekarang kita akan masuk ke direktori project dan menjalankan aplikasi kita:

cd chat-app
composer run dev

composer run dev

Jangan lupa untuk membuka folder chat-app di VS Code.

open folder in VS Code Tampilan chat-app folder di VS Code

Full-Stack Laravel Development with AI

Instructions

Instructions adalah fitur yang memungkinkan kita untuk memberikan instruksi spesifik dan terperinci kepada AI agent dalan melakukan tugas tertentu.

Ada beberapa cara untuk mengkonfigurasi Instructions di VS Code, yang bisa kamu baca di sini. Pada workshop ini, kita akan menggunakan beberapa instruction files sekaligus.

Pertama, pada Chat View di VS Code, klik ikon gerigi dan pilih Instructions:

new instruction file

Setelah itu pilih Workspace untuk lokasi file instruction nya nanti. Dan berikan namanya, misal: laravel-best-practices.

Selanjutnya, kita attach file instruction baru di atas ke Chat dan berikan instruksi kepada AI agent:

Update this instruction for Laravel best practices and performance.

File laravel-best-practices.instructions.md di folder .github/instructions akan diupdate oleh AI agent. Kita bisa mereviewnya atau langsung klik tombol Keep untuk menyimpan.

update instruction file

Untuk contoh-contoh instructions lainnya, kamu bisa lihat di repositori awesome-copilot.

Prompt Engineering

Prompt engineering atau prompt crafting adalah suatu teknik untuk membuat AI agent lebih memahami apa yang ingin kita lakukan. Teknik ini selain dapat digunakan pada AI agent pada umumnya (seperti ChatGPT, Gemini, dll) juga bisa diimplementasikan pada AI agent untuk software development.

Tim VS Code juga telah menuliskan sebuah guide untuk prompt engineering, yang bisa kamu baca di sini.

Rangkuman dari guide tersebut (dan beberapa tips dari saya):

  1. Berikan context yang lengkap dan relevan — errornya apa, expected output apa
  2. Berikan contoh coding dan contoh input dan output yang diinginkan
  3. Buka file yang berkaitan, tutup yang tidak berkaitan dengan problem yang sedang dihadapi
  4. Berikan nama fungsi, class, variabel yang sesuai
  5. Berikan komentar singkat dan jelas
  6. Ulangi jika hasilnya tidak sesuai atau supoptimal
  7. Konsisten dan tetap jaga kualitas kode yang dihasilkan
  8. Try to keep it simple and specific
  9. Attach files atau folder ke dalam Chat

Sekarang, kita akan menggunakan teknik prompt engineering untuk mengubah tampilan depan (landing page) dari project kita.

Pertama, attach file resources/js/pages/welcome.tsx ke Chat View di VS Code. Setelah itu, berikan instruksi kepada AI agent untuk mengubah tampilan depan menjadi lebih menarik dan interaktif sesuai dengan project yang ingin kita buat, yaitu Chatting Web App:

This project is a chatting web app where user can register, login, and chat with each other in real-time. Please update the landing page (welcome.tsx) accordingly.

Bila hasilnya tidak sesuai dengan yang diinginkan, kamu bisa memberi tahu AI agent untuk mengulanginya dengan memberikan instruksi yang lebih spesifik atau hal yang ingin diubah. Misal, dari prompt di atas, saya mendapatkan landing page dengan image yang broken:

broken image

Saya bisa memberi tahu AI agent untuk mengulanginya dengan memberikan instruksi yang lebih spesifik atau hal yang ingin diubah. Misal, dari prompt di atas, saya mendapatkan landing page dengan image yang broken:

The image is broken. Please use this url instead: https://picsum.photos/335/376

fixed image

More reading:

Context Engineering

Level selanjutnya dari prompt engineering adalah context engineering, dimana kita akan mengkurasi informasi yang relevan dan bisa memperbaiki kualitas dan akurasi dari output yang dihasilkan oleh AI agent.

context engineering diagram Image source

Pada Visual Studio Code, Context Engineering bisa dicapai dengan menggunakan fitur instructions, implementation plans, coding guidelines, dan prompt engineering.

context engineering workflow Image source

Step 1: Curate project-wide context

Agar AI agent bisa memahami project kita dengan baik, kita perlu memberikan context yang relevan dan berkaitan dengan project kita. Dokumen seperti Product Requirements Document (PRD) dapat menjadi salah satu sumber context yang bagus. Bila kita sudah memiliki PRD, kita bisa attach file PRD ke dalam folder .github/instructions. Atau bila kita sudah memiliki kode program, kita bisa meminta AI agent untuk membantu kita membuat PRD berdasarkan project. Pada workshop ini, kita akan membuat PRD baru menggunakan approach yang mirip dengan bagian Instructions di atas.

Update this instruction file to be a product brief for a real-time chatting web application where registered and logged-in users can chat to each other. The app will use Laravel for backend and React and Inertia for frontend.

Your goal is to capture the business and functional requirements of the product and to provide solid context for others working on the product. You should include:

1. Project overview / description
2. Target audience
3. Primary benefits / features
4. High-level tech/architecture used

Keep the brief very concise and to the point just to give enough context to understand the bigger picture.

product brief

Step 2: Create implementation plan

Setelah kita memiliki context yang relevan, kita bisa meminta AI agent untuk membuat implementation plan untuk fitur baru atau bug fix tertentu.

Perlu diingat jika proses pembuatan implementation plan mungkin membutuhkan beberapa kali iterasi, untuk memastikan hasil yang lengkap dan akurat.

Untuk membuat implementation plan, harap ikuti tutorial ini: https://code.visualstudio.com/docs/copilot/guides/context-engineering-guide#_step-2-create-implementation-plan

Step 3: Generate implementation code

Setelah memiliki implementation plan atau todos list, kita bisa meminta AI untuk mengimplementasikan plannya.

implemention plan

My conversation with GitHub Copilot

Di bawah ini adalah beberapa chat yang saya kirimkan ke GitHub Copilot untuk membuat Chatting Web App. Ada beberapa chat yang tidak saya masukkan di sini, terutama yang berupa iterasi untuk bug fixing.

Add a list of registed users on the Sidebar of the app.
Next, if user click another registed user name on the sidebar, we should redirect to the dedicated url/page where they can start chatting with each other in the real time.
When I click the user name, it's still not navigating to the chat page. I think it's because we are using Inertia and we don't need react router dom here. Please refer to this: https://inertiajs.com/routing
Implement the messaging functionalities: sending, receiving, and displaying messages. The implementation should be end-to-end, from the UI-backend-DB. Use Laravel Reverb and Echo.

More reading:

Demo

Berikut demo aplikasi chatting web app yang saya buat:

Untuk repository project, bisa dilihat di sini: https://github.com/ariefrahmansyah/vibe-chat-app

Penutup

Blog post ini memberikan perkenalan tentang fondasi dan teknik untuk membangun full-stack application dengan AI, Laravel dan React. Untuk membuat aplikasi yang lebih kompleks dan production-ready, dibutuhkan beberapa teknik dan tools yang lebih lanjut seperti MCP Server.

Changelog

#ai #development #full-stack