# Installation

<div id="install"></div>

Drei Befehle führen Sie von einem leeren Ordner zu einer laufenden Flutter-App, in der Routing, Networking, Themes und Codegenerierung bereits eingerichtet sind.

<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Bevor Sie beginnen</span>
<span class="ny-doc-strip-item">Flutter SDK installiert</span>
<span class="ny-doc-strip-dot"></span>
<span class="ny-doc-strip-item">Dart 3</span>
<span class="ny-doc-strip-dot"></span>
<a href="/de/docs/7.x/requirements">Alle Voraussetzungen →</a>
</div>

## Installieren

Führen Sie diese Befehle der Reihe nach aus. Jeder kann sicher erneut ausgeführt werden.

<div class="ny-doc-steps">
<div class="ny-doc-step">
<span class="ny-doc-step-num">1</span>
<h3 class="ny-doc-step-title">Nylo CLI global installieren</h3>

Stellt den Befehl `nylo` auf Ihrem System bereit.

``` bash
dart pub global activate nylo_installer
```

</div>

<div class="ny-doc-step">
<span class="ny-doc-step-num">2</span>
<h3 class="ny-doc-step-title">Ein neues Projekt erstellen</h3>

Dieser Befehl klont das Nylo-Template, konfiguriert das Projekt mit Ihrem App-Namen und installiert automatisch alle Abhängigkeiten.

``` bash
nylo new my_app
```

</div>

<div class="ny-doc-step">
<span class="ny-doc-step-num">3</span>
<h3 class="ny-doc-step-title">Metro-Alias einrichten</h3>

Dies konfiguriert den `metro`-Befehl für Ihr Projekt, sodass Sie Metro CLI-Befehle ohne die vollständige `dart run`-Syntax verwenden können.

``` bash
cd my_app
nylo init
```

Starten Sie anschließend Ihr Terminal neu, oder führen Sie den `source`-Befehl aus, den `nylo init` ausgibt.

</div>
</div>

<div class="ny-doc-panel">
<div class="ny-doc-panel-head">
<img src="https://nylo.dev/images/nylo_logo.png" alt="" class="ny-mark h-[16px]">
<span>Das erhalten Sie</span>
</div>
<div class="ny-doc-panel-body">
<div class="ny-doc-panel-grid">
<div class="ny-doc-panel-item">Vorkonfiguriertes Routing und Navigation</div>
<div class="ny-doc-panel-item">API-Service-Boilerplate</div>
<div class="ny-doc-panel-item">Theme- und Lokalisierungseinrichtung</div>
<div class="ny-doc-panel-item">Metro CLI für Code-Generierung</div>
</div>
</div>
</div>


<div id="running-the-project"></div>

## Projekt ausführen

Nylo-Projekte laufen wie jede Standard-Flutter-App.

<div class="ny-doc-tabs" x-data="{ tab: 'Terminal' }">
<div class="ny-doc-tabbar" role="tablist">
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'Terminal'" :class="tab === 'Terminal' ? 'is-active' : ''" :aria-selected="tab === 'Terminal'">Terminal</button>
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'Android Studio'" :class="tab === 'Android Studio' ? 'is-active' : ''" :aria-selected="tab === 'Android Studio'">Android Studio</button>
<button type="button" role="tab" class="ny-doc-tab" @click="tab = 'VS Code'" :class="tab === 'VS Code' ? 'is-active' : ''" :aria-selected="tab === 'VS Code'">VS Code</button>
</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'Terminal'" x-cloak>

``` bash
flutter run
```

Wenn der Build erfolgreich ist, zeigt die App den Standard-Startbildschirm von Nylo an.

</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'Android Studio'" x-cloak>

Öffnen Sie den Projektordner, wählen Sie im Zielgerät-Selektor ein Gerät aus und klicken Sie dann auf **Run**.

<a href="https://docs.flutter.dev/tools/android-studio#running-and-debugging" target="_BLANK">Flutter-Dokumentation: Ausführen und Debuggen ↗</a>

</div>

<div class="ny-doc-tabpanel" role="tabpanel" x-show="tab === 'VS Code'" x-cloak>

Öffnen Sie den Projektordner und führen Sie dann **Debug: Start Without Debugging** über die Befehlspalette aus.

<a href="https://docs.flutter.dev/tools/vs-code#run-app-without-breakpoints" target="_BLANK">Flutter-Dokumentation: Ohne Haltepunkte ausführen ↗</a>

</div>

</div>


<div id="metro-cli"></div>

## Metro CLI

Metro generiert Projektdateien für Sie. Starten Sie es ohne Argumente, um das Menü anzuzeigen, oder rufen Sie direkt einen Befehl auf.

``` plaintext
$ metro

Metro - Nylo's Companion to Build Flutter apps by Anthony Gordon

Usage:
    command [options] [arguments]

Options
    -h

All commands:

[Widget Commands]
  make:page
  make:stateful_widget
  make:stateless_widget
  make:state_managed_widget
  make:navigation_hub
  make:journey_widget
  make:bottom_sheet_modal
  make:button
  make:form

[Helper Commands]
  make:model
  make:provider
  make:api_service
  make:controller
  make:event
  make:route_guard
  make:config
  make:interceptor
  make:command
  make:env
```

### Befehlsreferenz

Jeder Befehl erwartet einen Namen, z. B. `metro make:page settings_page`

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Widget-Befehle</div>
<div class="ny-doc-command">
<code>metro make:page</code>
<span>Neue Seite erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateful_widget</code>
<span>Stateful Widget erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateless_widget</code>
<span>Stateless Widget erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:state_managed_widget</code>
<span>State-Managed Widget erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:navigation_hub</code>
<span>Navigation Hub erstellen (untere Navigation)</span>
</div>
<div class="ny-doc-command">
<code>metro make:journey_widget</code>
<span>Journey Widget für Navigation Hub erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:bottom_sheet_modal</code>
<span>Bottom Sheet Modal erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:button</code>
<span>Benutzerdefinierten Button-Widget erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:form</code>
<span>Formular mit Validierung erstellen</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Hilfsbefehle</div>
<div class="ny-doc-command">
<code>metro make:model</code>
<span>Model-Klasse erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:provider</code>
<span>Provider erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:api_service</code>
<span>API-Service erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:controller</code>
<span>Controller erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:event</code>
<span>Event erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:route_guard</code>
<span>Route Guard erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:config</code>
<span>Konfigurationsdatei erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:interceptor</code>
<span>Netzwerk-Interceptor erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:command</code>
<span>Benutzerdefinierten Metro-Befehl erstellen</span>
</div>
<div class="ny-doc-command">
<code>metro make:env</code>
<span>Umgebungskonfiguration aus .env generieren</span>
</div>
</div>

### Beispielverwendung

``` bash
# Create a new page
metro make:page settings_page

# Create a model
metro make:model User

# Create an API service
metro make:api_service user_api_service
```


<div id="nylo-cli"></div>

## Nylo CLI

<!-- uncertain: strip label "Requires" has no established translation in this locale -->
<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Voraussetzung</span>
<span class="ny-doc-strip-item">nylo_installer 1.8.0+</span>
<span class="ny-doc-strip-dot"></span>
<a href="#nylo-self-update">CLI aktualisieren →</a>
</div>

Der Befehl `nylo` aus Schritt 1 kann mehr, als nur Projekte zu erstellen. Führen Sie ihn aus Ihrem Projektverzeichnis aus, um Builds zu bereinigen, iOS-Pods aufzufrischen, Tests auszuführen und Ihre Übersetzungen zu überprüfen.

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Projektbefehle</div>
<div class="ny-doc-command">
<code>nylo new</code>
<span>Ein neues Projekt erstellen</span>
</div>
<div class="ny-doc-command">
<code>nylo init</code>
<span>Den Metro-Alias in Ihrer Shell einrichten</span>
</div>
<div class="ny-doc-command">
<code>nylo clean</code>
<span>flutter clean und flutter pub get ausführen</span>
</div>
<div class="ny-doc-command">
<code>nylo ios:pod-refresh</code>
<span>Ihre iOS-Pods neu installieren</span>
</div>
<div class="ny-doc-command">
<code>nylo metro</code>
<span>Einen Metro-Befehl ohne den Alias ausführen</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Tests und Übersetzungen</div>
<div class="ny-doc-command">
<code>nylo test</code>
<span>Ihre Tests formatieren und ausführen</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:find-untranslated</code>
<span>Text finden, der nicht in .tr() eingeschlossen ist</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:check-missing-keys</code>
<span>Fehlende Schlüssel in Ihren Sprachdateien finden</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Die CLI selbst</div>
<div class="ny-doc-command">
<code>nylo self-update</code>
<span>nylo auf die neueste Version aktualisieren</span>
</div>
<div class="ny-doc-command">
<code>nylo --version</code>
<span>Die installierte Version anzeigen</span>
</div>
</div>

Befehle mit Optionen listen diese mit `-h` auf, zum Beispiel `nylo test -h`. Tests werden unter [Tests ausführen](/docs/7.x/testing#running-tests) behandelt, die `locale:`-Befehle unter [Übersetzungen prüfen](/docs/7.x/localization#auditing-translations).

<div id="nylo-clean"></div>

### Projekt bereinigen

`nylo clean` führt `flutter clean` und anschließend `flutter pub get` aus. Fügen Sie ein Plattform-Flag hinzu, wenn eine normale Bereinigung nicht ausreicht:

``` bash
# flutter clean, dann flutter pub get
nylo clean

# Entfernt zusätzlich ios/Pods, ios/.symlinks und ios/Podfile.lock und führt dann pod install --repo-update aus
nylo clean --ios

# Führt zusätzlich gradlew clean in android/ aus
nylo clean --android

# Beides zusammen
nylo clean --all
```

Wenn ein Projekt keinen Ordner `ios/` oder `android/` hat, wird diese Plattform mit einer Warnung übersprungen. `pod install` wird nur unter macOS ausgeführt.

<div id="nylo-ios-pod-refresh"></div>

### iOS-Pods auffrischen

Wenn CocoaPods nicht mehr synchron ist, löscht `nylo ios:pod-refresh` `ios/Pods`, `ios/.symlinks` und `ios/Podfile.lock` und führt dann `pod install --repo-update` im Ordner `ios/` aus:

``` bash
nylo ios:pod-refresh
```

Führen Sie ihn unter macOS im Stammverzeichnis Ihres Projekts aus. Im Gegensatz zu `nylo clean --ios` führt er weder `flutter clean` noch `flutter pub get` aus.

<div id="nylo-metro"></div>

### Metro ohne Alias ausführen

`nylo metro` übergibt alles, was danach folgt, an Metro (`dart run nylo_framework:main`). Verwenden Sie es, bevor Sie `nylo init` ausgeführt haben, oder unter Windows, wo `nylo init` den Alias `metro` nicht für Sie einrichten kann:

``` bash
nylo metro make:page settings_page
nylo metro make:model User
```

<div id="nylo-self-update"></div>

### CLI aktualisieren

``` bash
nylo self-update
```

Dies prüft pub.dev und installiert `nylo_installer` neu, falls eine neuere Version verfügbar ist. Nachdem ein Befehl abgeschlossen ist, teilt Ihnen `nylo` außerdem mit, wenn ein Update verfügbar ist. Es bleibt still, wenn die Ausgabe nicht an ein Terminal geht, sodass der Hinweis nie in CI-Logs oder weitergeleiteten Berichten landet.

Um zu sehen, welche Version Sie installiert haben:

``` bash
nylo --version
```