# Walkthrough Learn abap2UI5 by building something. The **Walkthrough** grows a small invoice app from a single message box into a complete application, one concept per step: the app class and its lifecycle, views written in ABAP, events, data binding, lists, tables, a selection screen and popups — and then takes the finished app out of the playground: to production in Step 11, and under unit tests in Step 12. Each building step (1–10) is a **complete, runnable class** — the whole app as it stands at that point, not a fragment. Press the Run button under the code to start it in the browser, or copy the class into your system and launch it like any abap2UI5 app (see the [Quickstart](/get_started/quickstart)). No step depends on anything outside its own code, so you can also jump straight to the step you are interested in. ## Preview  This is the app after the last building step — a few hundred lines of ABAP, no frontend project, no OData service. ## Steps - **[Step 1: The App Class](/tutorials/walkthrough/step-1)** — the smallest possible app: one class, one method, one message. - **[Step 2: A First View](/tutorials/walkthrough/step-2)** — render a UI5 view built entirely in ABAP. - **[Step 3: Events](/tutorials/walkthrough/step-3)** — a button, a press event, and the lifecycle behind them. - **[Step 4: Data Binding](/tutorials/walkthrough/step-4)** — an input field whose value reaches the server by itself. - **[Step 5: List Binding](/tutorials/walkthrough/step-5)** — show an internal table as a UI5 list. - **[Step 6: Row Events](/tutorials/walkthrough/step-6)** — react to a click on a row, and know which row it was. - **[Step 7: Popups](/tutorials/walkthrough/step-7)** — edit a row in a dialog. - **[Step 8: Selection Screen](/tutorials/walkthrough/step-8)** — a form above the list, and reading the data it asks for. - **[Step 9: Tables](/tutorials/walkthrough/step-9)** — swap the list for a real table with columns, cells and row actions. - **[Step 10: App Structure](/tutorials/walkthrough/step-10)** — refactor into the structure real apps use. - **[Step 11: From Playground to Production](/tutorials/walkthrough/step-11)** — real data, the transport order, authorization, and the URL users start from. - **[Step 12: Unit Tests](/tutorials/walkthrough/step-12)** — test the app class like any ABAP class; no UI5 runtime involved. ## What You Should Know No prior abap2UI5 or UI5 experience is needed — the tutorial introduces every concept as it appears. Basic ABAP (classes, methods, internal tables) is assumed, and [Hello World](/get_started/hello_world) is the one page worth reading first: it starts the smallest possible app in your own system, which is where this tutorial picks up. The Run button works without any installation at all, so you can also simply begin at [Step 1](/tutorials/walkthrough/step-1). Keep the [Cheat Sheet](/cookbook/cheat_sheet) open while you work through the steps — it is every recurring construct on one page, from binding syntax to the popup calls. ## After the Tutorial The [Cookbook](/cookbook/view/definition) covers each topic again as a reference chapter, and three catalogs of complete, tested apps continue from there: - [Learn](https://abap2ui5.github.io/playground/samples/?src=learn) — one app per pattern, along a guided learning path - [Controls](https://abap2ui5.github.io/playground/samples/?src=controls) — UI5 demo kit samples rebuilt as abap2UI5 apps, searchable by control - [Stack](https://abap2ui5.github.io/playground/samples/?src=stack) — integration samples per technology, from RAP to WebSocket All three are sources of the one [sample catalog](https://abap2ui5.github.io/playground/samples/), so a search covers every one of them at once.