Module 6 · Produce real work
Making a prototype to test an idea
In short
A prototype is a cheap tool for answering one question about an idea. AI can build one in an afternoon. But a prototype is not a ready app: keep real data out and do not let people come to depend on it.
After this lesson you can
- Build a small prototype with AI to test an idea
- Tell a prototype you can show apart from an app ready for people to use
- Keep a prototype on sample data, not real data
Terms in this lesson
Understand
You have an idea: a simpler goods request form for warehouse staff, a training sign-up page, or a small spreadsheet that works out duty rosters. In the past, showing such an idea meant writing a long document or waiting for the IT team. Now AI can make you a prototype: a clickable page, a mock form or a small spreadsheet, often in an afternoon.
A good prototype starts from one question, not a feature list. For example: "Can warehouse staff fill in this form without explanation?" or "Does this sign-up sequence make sense to participants?". That question decides what needs to be built and, more importantly, what does not. To answer the first, you need a convincing form; you do not need data storage, user accounts or reports.
It works in stages like a long document. Ask for the simplest version first: one page, one file, with made-up sample data. Open it, try it yourself, then ask for changes one at a time ("move the submit button to the bottom", "add a carton unit option"). Then show it to three to five people who will use it, ask them to try without your explanation, and note where they get stuck. Those notes are the real output of the prototype, not the file.
One rule is not negotiable: a prototype uses sample data. Made-up names, codes and figures. A prototype is built fast and without proper safeguards; if real data goes in, it can end up stored somewhere unclear, sent to the model, or visible to anyone who opens the file.
A successful prototype often triggers the request: "Great, can we use it from Monday?". This is where many problems start. A prototype that looks finished is not necessarily ready for people. A ready app needs things you do not see on screen:
- Access and accounts: who may sign in, and who may see whose data.
- Storage and backup: where data is kept, how it is backed up, and whether it can be restored when broken.
- Security and data protection: secret keys are not baked into the code, and personal data is processed in line with the PDP Law.
- Testing and a real build: not just "it opens on my laptop", but built and tested the same way it will run in use.
- An owner: someone who fixes it when it breaks, six months from now.
So the answer is: a prototype is used to decide, then handed over to someone who can build it properly, or thrown away. If you want to learn to build apps all the way to ready-for-use, that is Level 3 of InfraLoka Academy.
The part most often skipped is testing with people. A prototype only you have tried proves only that you, its maker, know how to use it. Treat this test as a small evaluation: prepare the same two or three tasks for each person ("request five cartons of tape for the back warehouse"), then stay quiet and watch. Note where they stop, what they ask and what they click first. Then change your prompt or request to the AI based on those notes, not on your own taste. Two or three rounds like this are usually enough to know whether the idea is worth continuing, needs a new direction, or should stop.
Before
The prompt
Build a complete warehouse goods request app.
What came back
Here is the full app structure: login module, database, manager dashboard, e-mail notifications, monthly reports, finance system integration... [followed by hundreds of lines of code across many files that cannot be opened directly]
After
The prompt
I want to test one thing: whether warehouse staff can fill in a goods request form without explanation. I need a prototype, not a finished app. Shape: one HTML file I can open directly in a browser, with no server and no data saved anywhere. Form fields: item name (chosen from a list), quantity, unit (piece, carton, pallet), reason, submit button. Data: a made-up list of 10 items. Do not use real data. After submit, just show a summary of the entries on screen. Write the on-screen text in everyday Indonesian.
What came back
Here is one HTML file. Save it as form.html and open it in a browser. [one file with a five-field form, a list of 10 sample items such as "Cloth gloves" and "Brown packing tape", and a summary shown on screen after Submit is pressed] Note: no data is stored or sent. For real use, this form needs storage, accounts and input validation.
What changed
- The first request has no question, so the AI builds everything and nothing can be tried right away.
- What makes this request workable: the question, shape, fields, sample data and what must not happen are all named.
- The result can be shown to five staff tomorrow morning, and it honestly says what is missing.
Common mistake
- Mistake
- Letting a prototype go into real use with real data because "it already works".
- Why it hurts
- A prototype has no backup, access control or owner. Real data can be lost, seen by people without the right, or left on someone's laptop. Once people depend on it, switching it off is hard, and the fixes that belonged at the start become far more expensive.
- Do this instead
- Write on the prototype itself that it is a prototype with sample data. Once its question is answered, decide: hand it to a team that can build it properly, or throw it away.
Try
Sorting card
You have a form prototype that five staff tested successfully. Which is enough for a prototype, and which is still needed before real use?
Accounts and rules on who may see whose requests
Data storage with restorable backups
Made-up item data
A build and tests done the same way it will run in use
A clickable form
Notes on where testers got stuck
6 cards left
Take home
Prototype rules
- Start from one question, not a feature list
- Simplest shape first, one change at a time
- Only made-up sample data, never real data
- Tested by the people who will use it, without explanation
- Once answered: hand over to be built properly, or throw away
What went wrong for us
The database driver ended up in the browser
- Context
- While building a psychometric testing feature, a browser component needed one constant. It was imported from a server module that also opens database connections.
- What happened
- The type check passed and unit tests were green. Only the production build failed, because the database driver got pulled into the browser bundle.
- Impact
- The release was held until the build was clean. No user was affected because the build failed before shipping.
- Root cause
- One import line drags in a whole module and its dependencies. The type checker and unit tests do not know which code runs in the browser.
- What we did
- Shared constants moved to pure modules with no server dependencies, and the build was rerun until clean.
- The guard we keep now
- A test walks every import from browser components and fails when one reaches a server module. The real production build is the final gate before release.
The lessonFast checks are necessary, but only the real build proves the app can ship.
What it means for your workA prototype that runs on your laptop is not proven ready for people; it is ready only once built and tested the way it will really run.
