Ei Maung eimg

Why Software Factories Fail

Part 1: the harness is not enough

မှတ်ချက် — ကျွန်တော် HumanLayer ဆိုတဲ့ company တစ်ခု တည်ထောင်ထားတယ်။ Human/agent collaboration tools တည်ဆောက်နေတာဆိုတော့ အောက်မှာ ပြောမယ့် အရာတွေမှာ bias နည်းနည်း ပါနိုင်တယ်။ ဒါပေမယ့် ဒီအကြောင်းအရာက အသုံးဝင်မယ်လို့ မျှော်လင့်တယ်။ အနည်းဆုံး စိတ်ဝင်စားစရာတော့ ဖြစ်မယ်ထင်တယ်။ — Dex

ငါတို့အားလုံး loops ကြမယ်

AI Agent နှင့် Web UI တည်ဆောက်ခြင်း

ပြီးခဲ့တဲ့ သင်ခန်းစာမှာ TypeScript, Vercel AI SDK နဲ့ OpenRouter တို့ကို အသုံးပြုပြီး AI agent တစ်ခုကို တည်ဆောက်ခဲ့ကြပါတယ်။

ကျွန်တော်တို့ရဲ့ Agent က -

Language model ခေါ်ယူခြင်း
Tool များအသုံးပြုခြင်း
Agent Loop လုပ်ဆောင်ခြင်း
Memory ယာယီသိမ်းဆည်းခြင်း

AI Agent တည်ဆောက်ခြင်း - Tutorial

ဒီ သင်ခန်းစာမှာ TypeScript၊ Vercel AI SDK နဲ့ OpenRouter တို့ကို အသုံးပြုပြီး AI Agent တစ်ခုကို အတူတူ တည်ဆောက်ကြည့်ကြပါမယ်။

၁။ ရည်ရွယ်ချက်

သင်ခန်းစာ ပြီးဆုံးသွားတဲ့အခါ -

Language model ခေါ်ယူခြင်း၊
Agent Tool ဖန်တီးခြင်း၊

Functional Programming - လိုတိုရှင်း

Programming ကို လေ့လာကြသူအများစုဟာ Procedural Programming (သို့မဟုတ်) Object-Oriented Programming (OOP) ရေးနည်းတွေနဲ့ စတင်လေ့လာခဲ့ကြတာ များပါတယ်။ System Level Language အများစုဟာ Procedural Language တွေဖြစ်ကြပါတယ်။ C, Go, Rust, Zig စသည်ဖြင့်။ Application Level Language အများစုကတော့ OOP Language တွေများပါတယ်။ Java, C#, Python, Ruby, PHP, JavaScript စသည်ဖြင့်။

Functional Programming ကိုတော့ လေ့လာသူတွေ ထိတွေ့မှုနည်းကြပါတယ်။ ဒါပေမယ့် ကနေ့ခေတ်မှာ Functional Programming ဟာ အလွန်အရေးပါတဲ့ ရေးနည်းတစ်ခုဖြစ်နေသလို စောစောက ပြောခဲ့တဲ့ Language အများစုကလည်း Functional Programming ရေးနည်းကို အပြည့်မရပေမယ့် နည်းနည်းတော့ Support လုပ်ကြပါတယ်။

Functional Programming ရေးနည်းကိုပဲ အဓိကထားတဲ့ Language တွေလည်း ရှိကြပါတယ်။ Lisp, Haskell, Erlang, Elixir, Scala, F# စသည်ဖြင့်။

ကနေ့ခေတ်မှာ Functional Programming ရဲ့ အခန်းကဏ္ဍဟာ တစ်နေ့တစ်ခြား ပိုအရေးပါလာတဲ့အတွက် မူလက Procedural Language တွေ OOP Language တွေနဲ့ လေ့လာခဲ့ကြသူတွေဟာ Functional Programming ကိုလည်း အသုံးချနိုင်ဖို့ လိုအပ်လာကြပါတယ်။

TypeScript - လိုတိုရှင်း

JavaScript ဟာ Dynamic Type Language တစ်ခုပါ။ Data Type တွေကို Language က လိုသလို အလိုအလျှောက် ပြောင်းလဲအလုပ်လုပ်ပေးတဲ့အတွက် ရေးသားသူက Type ကိစ္စ သိပ်ခေါင်းစားနေစရာမလိုဘဲ ရေးစရာရှိတဲ့ကုဒ်တွေကို ခပ်မြန်မြန် ရေးသွားလို့ရပါတယ်။

let value;        // undefined
value = "Alice";  // string
value = 42;       // number
value = true;     // boolean

Livewire Tutorial with Volt

Laravel ကို ဘယ် Front-end နည်းပညာနဲ့မဆို တွဲဖက်အသုံးပြုလို့ရပါတယ်။ အဲ့ဒီလို တွဲဖက်အသုံးပြုလို့ရတဲ့ နည်းပညာတွေထဲက Livewire အကြောင်းကို တစ်ခါထဲ လက်တွေ့လိုက်လုပ်ကြည့်လို့ရမယ့် Tutorial ပုံစံနဲ့ ပြီးခဲ့တဲ့ ပိုစ့်မှာ ဖော်ပြခဲ့ပြီးဖြစ်ပါတယ်။

အဲ့ဒီ Tutorial မှာ Class Component တွေကို အသုံးပြု ဖော်ပြခဲ့ပြီး ဒီတစ်ခါတော့၊ ပုံစံတူ Tutorial ကိုပဲ အသစ်ထွက်ထားတဲ့ Livewire 3 မှာပါတဲ့ Functional Component တွေနဲ့ အနည်းငယ်ပြင်ဆင်ပြီး ထပ်မံဖော်ပြလိုက်ပါတယ်။

Project Setup

စမ်းသပ်ကြည့်နိုင်ဖို့အတွက် ပထမဆုံး Laravel ပရောဂျက် အသစ်တစ်ခုကို အခုလို တည်ဆောက်ယူလိုက်ပါ။

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Todo</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/all.min.css">
	</head>

	const pipeline = [
	{
	$match: { type: 'post' },
	},
	{
	$match: {
	owner: { $in: ['1', '2', '3'] }
	},
	},
	{

	/* createAppSlice.js **/
	// import { asyncThunkCreator, buildCreateSlice } from "@reduxjs/toolkit";

	// export const createAppSlice = buildCreateSlice({
	// creators: { asyncThunk: asyncThunkCreator },
	// });

	/* mySlice.js */
	import { createAppSlice } from "./createAppSlice";

	/* mySlice.js */
	import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

	export const asyncMethod = createAsyncThunk("action/id", async () => {
	// fetch and return data
	// will become action payload
	});

	export const mySlice = createSlice({
	name: "name",