# Ma première application

Source : https://docs.berkios.online/galerie/ma-premiere-application/ · Section : Galerie · Documentation officielle BERKIOS (https://docs.berkios.online)


Une fenêtre, un titre, un bouton : votre première application décrite en BERKIOS CODE.

Télécharger l'exemple : https://github.com/berkiosbuinu-server/examples/releases/latest/download/04-ma-premiere-application.zip

**Type :** BERKIOS Code · **Niveau :** débutant · **Fichiers :** `main.bk`, `main.berkios.json`

## Ce que vous allez apprendre

- Décrire une interface dans un fichier texte `.bk`.
- Voir le résultat dans le navigateur avec l'aperçu.
- Ouvrir votre application dans le Studio.

## Avant de commencer

L'outil `berkios` doit être installé et réglé sur le français :

```bash
berkios --lg --fr
```

## Étape 1 : récupérer ou créer le fichier

Soit vous téléchargez l'exemple, soit vous créez le fichier de départ vous-même :

```bash
berkios nouveau main.bk
```

## Étape 2 : le code

```text
langue français

application "Ma première application"
  version 1.0
  type interface
  édition pro

interface Accueil
  étiquette titre "Bonjour"
    taille du texte 26
    gras
  bouton valider "Cliquer ici"
    quand on clique : afficher "Bravo !"
```

## Étape 3 : vérifier

```bash
berkios valider main.bk
```

```text
OK — main.bk est valide (0 avertissement(s)).
```

Si vous faites une faute (un mot mal écrit, une ligne mal décalée), le compilateur vous indique la ligne.

## Étape 4 : voir l'application

```bash
berkios apercu main.bk
```

L'application s'ouvre dans votre navigateur. Cliquez sur **Cliquer ici** : le message « Bravo ! » apparaît. Modifiez le fichier et enregistrez : la page se recharge toute seule.

## Étape 5 : l'ouvrir dans le Studio

```bash
berkios compiler main.bk -o main.berkios.json
```

Dans le Studio : **Fichier → Importer**, puis choisissez `main.berkios.json`. Vous pouvez maintenant déplacer les composants avec la souris : le texte et le dessin sont deux façons de décrire la même application.

## Le code expliqué

| Ligne | Rôle |
|---|---|
| `langue français` | La langue des mots-clés du fichier. Un fichier = une langue. |
| `application "Ma première application"` | Nom de l'application, suivi de ses réglages (`version`, `type`, `édition`). |
| `interface Accueil` | Un écran, qui s'appelle `Accueil`. |
| `étiquette titre "Bonjour"` | Un texte. `titre` est son identifiant, `"Bonjour"` son contenu. |
| `taille du texte 26` / `gras` | Mise en forme du composant au-dessus (lignes décalées d'un cran). |
| `bouton valider "Cliquer ici"` | Un bouton. |
| `quand on clique : afficher "Bravo !"` | Ce qui se passe au clic. |

## À vous de jouer

Ajoutez un champ de saisie et un second bouton qui vide le formulaire :

```text
langue français

application "Ma première application"
  version 1.0
  type interface
  édition pro

interface Accueil
  étiquette titre "Bonjour"
    taille du texte 26
    gras
  champ nom "Votre prénom"
  bouton valider "Cliquer ici"
    quand on clique : afficher "Bravo !"
  bouton effacer "Effacer"
    quand on clique : vider le formulaire
```

Vérifiez avec `berkios valider`, puis relancez l'aperçu.

## Pour aller plus loin

- Exemple suivant : [Gestion de stock](https://docs.berkios.online/galerie/gestion-de-stock/)
- Leçon : [Votre premier fichier .bk](https://docs.berkios.online/code/premier-fichier/)