The warm-up needs no API key. You enter a monthly saving, a number of years and an expected yearly return; it shows the final amount and a growth chart. You build it in app.py: this is the start of the one project you grow all afternoon.
4.1 The framework: Plan → Implement → Test → Repeat
Every feature you build today, in this module and the next two, goes round the same four steps:
Plan Ask
Describe what you want using the three parts from 3.3; read the plan Copilot gives back and correct it
Done when The plan has only what you asked for
Implement Agent
Tell Agent to build exactly that plan, and in which file
Done when Agent says it is finished and you click Keep
Test (your browser)
Run the app, try it, and check one number by hand
Done when Every check in “What to look for” passes
Repeat Ask, then Agent
Pick one small improvement and go round again
Done when You are happy with this feature
Planning in Ask mode is cheap: a plan is easy to change, code is not. And the loop stays small on purpose: one feature at a time, so when something goes wrong, you know which change caused it.
4.2 Plan
First, understand the tool. Do it open a New Chat in Ask mode and send:
I’ve never written code. In plain words, explain what Streamlit is and how a Python file becomes a web page I can open in my browser. Use one everyday analogy. Tell me what command starts the app and what address I open. Keep it under 150 words and don’t write any code yet.
the command streamlit run; the address localhost:8501; the page updating each time you change an input.
Now plan the calculator. A planning prompt reads like a brief to a colleague: the purpose, then the three parts of the app, then the limits, then what you want back. Do it in the same chat, send:
I want to build a simple Investment Goal Calculator as a Streamlit app. Purpose: help someone see how a monthly saving grows over time. Frontend: a title; three inputs (monthly saving in rupiah, number of years, expected yearly return in percent); one big result showing the final amount; a line chart of the total year by year. Clean and simple, one column, rupiah shown like Rp 1.000.000. Backend: the money is added at the end of each month and grows every month. Data: only what I type in; no internet data yet. Limits: put everything in app.py; only use packages already in requirements.txt; don’t touch sectors.py. Your task: tell me your plan in short steps and which Streamlit pieces you would use for each part. Don’t write any code yet, I’m still planning.
steps that name pieces such as st.number_input, st.metric and st.line_chart; only app.py. If the plan adds something you did not ask for, say so now, for example: “Leave out the inflation input.”
4.3 Implement
Do it switch the same chat to Agent mode, so it still sees the plan, and send:
Build the calculator exactly as in the plan above. Write it in app.py and don’t change any other file. When you’re done, tell me the command to run it.
inputs and a chart in app.py; the command streamlit run app.py in the reply; no other file changed. Read the summary, then click Keep.
4.4 Test
Do it in the terminal, run streamlit run app.py. Your browser opens http://localhost:8501; if not, Ctrl-click (Cmd-click on a Mac) the link in the terminal.
| Action | How |
|---|---|
| Start the app | streamlit run app.py in the terminal |
| See the app | Open http://localhost:8501 |
| Stop the app | Click in the terminal and press Ctrl+C |
| See a change | After Agent changes the file, click Rerun at the top right of the page |
Now check what comes back. A page that looks good can still calculate wrongly, so test with numbers you can work out yourself:
- Rp 1.000.000 a month for 10 years at 0% return must give exactly Rp 120.000.000, because 1 million × 12 months × 10 years.
- At 6% it should be about Rp 163.9 million. If you see about Rp 162.5 million, Copilot turned the yearly rate into a monthly one another way; ask it which it used.
If the 0% case is wrong, the formula is wrong, however good the page looks. Paste what you typed and what you saw into the chat and ask Agent to fix it.
4.5 Repeat
Go round the loop once more with one small improvement. Do it in Ask mode, send:
I want two small changes to my calculator in #app.py: show the final amount with dots between thousands and no decimals, like Rp 163.879.347, and add a small grey line under the result that says “A simple estimate, not financial advice.” What would you change? Don’t write code yet.
Typing #app.py attaches the file to your message, so Copilot reads the latest version. If the plan touches only those two things, switch to Agent and send: Make exactly those two changes. Change nothing else. Click Keep, then Rerun.
the 6% result now reads Rp 163.879.347; the grey line is there; the 0% check from 4.4 still gives Rp 120.000.000. Testing again after every change is the habit.
4.6 Your turn: make it your own
Now run the whole loop by yourself on the calculator you just built. Choose one tweak, from the ideas below or your own:
| Kind of tweak | Ideas |
|---|---|
| Add a feature | Show the total you put in next to the final amount, and the difference as “growth”; add a starting amount for money you already have; add a goal amount and say whether you reach it |
| Add styling | A one-line introduction under the title; the inputs in the sidebar; the results in two columns side by side; a different colour for the chart |
| Tweak an existing feature | Allow up to 40 years; start the expected return at 8%; show the chart month by month instead of year by year; show the result in millions, like Rp 163.9 juta |
Do it
start a New Chat in Ask mode and attach the file with #app.py. Say which part of the app changes (frontend, backend or data, as in 3.3) and what must stay the same, and end with “Tell me the plan. Don’t write code yet.” For example:
#app.py I want to add a starting amount: money I already have on day one, which grows at the same return. Put the input above the monthly saving, starting at Rp 0. Everything else stays the same. Tell me the plan. Don’t write code yet.
switch to Agent and send: Make exactly that change. Change only app.py. Click Keep, then Rerun.
check that your tweak does what you asked, then run the 0% check from 4.4 again. If your tweak changes the maths on purpose, work out one new case by hand first: with a starting amount of Rp 10.000.000, the 0% case must give Rp 130.000.000.
a second small tweak, if time allows.
only the part you named has changed; the other numbers are the same as before.
If a tweak breaks the app and two fix attempts do not help, click Undo. Your tweak stays in the project: in the next module you connect this same calculator to real market data.