Week 9

AI-Assisted Development / Vibe Coding

Mobile Programming

Flutter | Prompt | Context | Verify | Refactor | Test

From fast prompting to accountable code

Learning Outcomes

After this session, students will be able to:

  1. Explain the AI-assisted workflow.
  2. Write effective prompts and context.
  3. Recognize hallucination and AI limits.
  4. Debug and refactor AI-generated code.
  5. Test AI-generated code.
  6. Document AI usage.

Why Vibe Coding Is Risky?

Without discipline, AI looks fast but fragile:

Feature in 5 minutes, bugs for 5 days
Dio called from widgets, leaking architecture
Hallucinated methods: missing from packages

Use an engineering flow:

clear prompt -> generate -> verify
-> test -> refactor -> explain

Goal: speed without losing quality control.

Mini Poll

Which prompt is the best?

A. make a cool search feature

B. Notes search: Riverpod + use case, empty state + test

C. please code fast

D. just copy from the internet

Mini Poll Discussion

What separates "AI-generated code" from "code you understand"?

Short answer: read each line, check real APIs, prove via tests.

Part 1

Responsible AI Workflow

What AI Does Well vs Not

Know the limits to know when to verify more.

  • Strong: boilerplate, common patterns, test drafts, docs.
  • Weak: new APIs, package versions, custom business logic.
  • Risky: auth tokens, SQL queries, security rules.
  • Always check: method names, params, imports, null safety.

AI guesses from old patterns. Your project uses current versions.

Flutter Code Hallucination

Three common patterns:

1. Fictional method: controller.searchFuzzy()
   -> check pub.dev / IDE autocomplete
2. Outdated package: v1 API while v3 exists
   -> check pubspec + CHANGELOG
3. Confident but wrong: case-sensitive filter
   -> prove with 1 small test

An AI claim is a hypothesis until test evidence exists.

Part 2

Prompt and Context Engineering

Effective Prompt Formula

One good prompt = 5 short slots filled.

Role:    senior Flutter dev
Context: feature-first, Riverpod, SQLite+Dio
Task:    1 small feature + clear limits
Limits:  keep architecture, max 80 lines
Output:  code + 3 test cases + how to test

A vague prompt produces vague code.

Bad vs Good Example

bad:  "make a cool notes search"
good: "title search + empty state,
  domain without SQLite, 1 widget test"

A good prompt is small, focused, testable.

Context Engineering

AI is only as smart as the context you give.

  • Include: folder structure, 1 contract file, versions.
  • Exclude: tokens, secrets, a 500-file repo.
  • Paste relevant snippets, not blurry screenshots.
  • State what must NOT change.

Good context finishes half the verification work.

Part 3

Verification, Debugging, Refactor

Verification Checklist

Run this for every AI-generated code:

  • [ ] Read every line, mark what you do not understand.
  • [ ] Check imports: is domain free of Flutter/Dio/SQLite?
  • [ ] Check APIs: does each method exist? (grep + autocomplete).
  • [ ] flutter analyze is clean, zero warnings.
  • [ ] At least 1 passing + 1 failing test.
  • [ ] Can you explain it without opening AI?

Debugging AI-Generated Code

Reproduce first, blame later:

1. Reproduce: steps + input that triggers bug
2. Isolate: move logic to pure use case
3. Red test: write failing test proving bug
4. Fix small, run tests + analyze
5. Record root cause in docs/ai-log.md

Do not re-prompt "fix it" without error evidence.

Refactor to Clean Architecture

AI code often piles logic into widgets.

widget -> notifier -> use case -> repository
  • Split functions over 40 lines.
  • domain/ without Flutter/Dio/SQLite.

Part 4

Documentation and Practice

AI Documentation Format

One feature = one note in docs/ai-log.md:

Feature: notes title search
Prompt: 3 lines + pasted context
Tests: analyze clean, 2 tests green
Decision: accept + move to use case

Without notes, AI usage cannot be assessed.

Lab: Notes Search

One small feature in 30 minutes:

1. Write short 5-slot prompt
2. Generate search + empty state
3. Verify: grep APIs + check imports
4. Add 1 widget + 1 unit test
5. Refactor filter into use case

Target: clean analyze + green tests.

AI Lab Challenge

Ask AI, then challenge it:

"Review search code as a senior dev.
Focus: correctness, architecture, tests.
3 findings + blocker/suggestion."

Prove 1 finding true. Reject 1 with reasons.

Common Errors and Fixes

Symptom Cause Fix
Missing method API hallucination Check pub.dev
Leaking import Weak context State limits
All tests red Oversized prompt Ask 1 feature + test
Cannot explain Blind acceptance Reread + refactor

Quick Quiz (1/2)

1. First step when AI code fails?

A. Re-prompt fix it
B. Reproduce + isolate + red test
C. Copy it elsewhere
D. Switch AI tools

Quick Quiz (2/2)

2. What makes a good prompt?

A. Long and vague
B. 1 small task + context + limits
C. No constraints
D. Ask 5 features at once

Quiz Answers

1 -> B

reproduce -> red test -> fix

2 -> B

small + context + limits -> testable

Deliverables

Repository

09-week-9-ai-assisted-development/
|-- docs/
|   |-- ai-log.md
|-- README.md
|-- screenshots/

Minimum README content:

  • AI feature + core prompt used
  • flutter analyze + flutter test results
  • feature screenshots + green tests
  • accept/reject table with reasons

Week 9 Rubric

Component Weight
Prompt + Context Engineering 25%
Verification + Debug Evidence 25%
Refactor + Green Tests 20%
AI-Log Documentation 15%
Presentation and Reflection 15%
Total 100%

Checklist Before Submit

Prompt

  • [ ] 1 small feature, context pasted
  • [ ] Architecture limits clearly stated
  • [ ] Output plus how-to-test requested

Evidence

  • [ ] flutter analyze clean + green tests
  • [ ] 1 AI finding proven true
  • [ ] 1 AI finding rejected with reasons

AI

  • [ ] Complete docs/ai-log.md
  • [ ] Able to explain without opening AI

Exit Ticket

Answer before class ends:

1. One AI hallucination you found?

2. Which prompt helped most, and why?

3. One refactor you made to AI code?

4. Your hardest accept/reject decision?

Key Takeaways

Speed

AI accelerates drafts, not decisions.

Quality

Verification + tests = your quality control.

Architecture

Tidy AI code into the correct layers.

AI

AI proposes code.
Developers decide.

Next Week

Week 10: AI Feature Integration

Stable AI feature (tested + documented)
   |
   v
Integrate LLM / OCR / STT into app
   |
   v
UX + privacy + fallback + cost

Goal

Add real AI features without leaking user data.

Build -> Verify -> Explain

The Mobile Learning Principle

          AI
            |
            v
         Generate
            |
            v
         Developer
            |
            v
           Verify
            |
            v
           Test
            |
            v
         Refactor
            |
            v
          Explain

Do not just be able to prompt.

Be a developer who can explain AI code.