<!-- https://abap2ui5.github.io/docs/tutorials/walkthrough/step-1 -->

# Step 1: The App Class

Every abap2UI5 app is one ABAP class implementing the interface
`z2ui5_if_app`. That interface has a single method, `main`, and the framework
calls it with one parameter: `client`, your only API. This is the smallest app
that can exist:

```abap
CLASS zcl_app_walkthrough DEFINITION PUBLIC.
  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS zcl_app_walkthrough IMPLEMENTATION.
  METHOD z2ui5_if_app~main.
    client->message_box_display( `Hello World` ).
  ENDMETHOD.
ENDCLASS.
```

Press **Run this example** under the code — the class starts right here in
the browser. To run it in your own system instead, copy it in, open the
abap2UI5 startup page (see the [Quickstart](/get_started/quickstart)), and
enter the class name.

## What Just Happened

- **No app project, no OData service, no frontend artifact.** The class *is*
  the app. abap2UI5 follows a thin-frontend model: the browser only renders,
  while all logic, state and data stay in ABAP on the server.
- **`main` runs on every roundtrip.** The framework calls it when the app
  starts and again after every user interaction. Right now every call shows
  the same message box; from [Step 3](/tutorials/walkthrough/step-3) on we
  will tell the calls apart.
- **`client` is the whole API.** Displaying views and messages, reacting to
  events, binding data — everything in this tutorial goes through this one
  object.

## The Interface

`z2ui5_if_app` is the whole contract between your class and the framework —
one method, one parameter:

```abap
INTERFACE z2ui5_if_app PUBLIC.
  METHODS main
    IMPORTING
      client TYPE REF TO z2ui5_if_client.
ENDINTERFACE.
```

(The real interface also declares a few attributes the framework manages for
you — you can ignore them.)


Next, we replace the message box with a real UI5 view.

<!-- samples:start (generated by scripts/link-samples.mjs — do not edit) -->

## Working Samples

Complete apps from the [sample catalog](https://abap2ui5.github.io/playground/samples/)
that use what this page describes. Each is a single class in [abap2UI5/samples](https://github.com/abap2UI5/samples)
unless its row names another of the three sample repositories — pull that repository with
[abapGit](https://abapgit.org) and start the class with `?app_start=<class>`.

| Sample | Class |
|---|---|
| Basics I — Hello World, the Smallest App | [`Z2UI5_CL_SMP_APP_493`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_493.clas.abap) |

<!-- samples:end -->