# Installation

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

Ba lệnh sẽ đưa bạn từ một thư mục trống đến ứng dụng Flutter đang chạy, với định tuyến, mạng, theme và tạo mã đã được thiết lập sẵn.

<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Trước khi bắt đầu</span>
<span class="ny-doc-strip-item">Đã cài Flutter SDK</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="/vi/docs/7.x/requirements">Yêu cầu đầy đủ →</a>
</div>

## Cài đặt

Chạy các lệnh này theo thứ tự. Mỗi lệnh đều có thể chạy lại an toàn.

<div class="ny-doc-steps">
<div class="ny-doc-step">
<span class="ny-doc-step-num">1</span>
<h3 class="ny-doc-step-title">Cài đặt Nylo CLI toàn cục</h3>

Lệnh này cài đặt công cụ CLI Nylo trên toàn hệ thống của bạn.

``` 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">Tạo dự án mới</h3>

Lệnh này clone template Nylo, cấu hình dự án với tên ứng dụng của bạn, và cài đặt tất cả các phụ thuộc tự động.

``` 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">Thiết lập alias Metro</h3>

Điều này cấu hình lệnh `metro` cho dự án của bạn, cho phép bạn sử dụng các lệnh Metro CLI mà không cần cú pháp `dart run` đầy đủ.

``` bash
cd my_app
nylo init
```

</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>Những gì bạn nhận được</span>
</div>
<div class="ny-doc-panel-body">
<div class="ny-doc-panel-grid">
<div class="ny-doc-panel-item">Định tuyến và điều hướng được cấu hình sẵn</div>
<div class="ny-doc-panel-item">Boilerplate dịch vụ API</div>
<div class="ny-doc-panel-item">Thiết lập theme và bản địa hóa</div>
<div class="ny-doc-panel-item">Metro CLI để tạo mã</div>
</div>
</div>
</div>


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

## Chạy dự án

Các dự án Nylo chạy giống như bất kỳ ứng dụng Flutter tiêu chuẩn nào.

<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
```

Nếu build thành công, ứng dụng sẽ hiển thị màn hình mặc định của Nylo.

</div>

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

Mở thư mục dự án, chọn thiết bị từ bộ chọn đích, sau đó nhấn **Run**.

<a href="https://docs.flutter.dev/tools/android-studio#running-and-debugging" target="_BLANK">Tài liệu Flutter: chạy và gỡ lỗi ↗</a>

</div>

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

Mở thư mục dự án, sau đó chạy **Debug: Start Without Debugging** từ command palette.

<a href="https://docs.flutter.dev/tools/vs-code#run-app-without-breakpoints" target="_BLANK">Tài liệu Flutter: chạy không có breakpoint ↗</a>

</div>

</div>


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

## Metro CLI

Metro tạo các file dự án cho bạn. Chạy không có đối số để xem menu hoặc gọi trực tiếp một lệnh.

``` 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
```

### Tham chiếu lệnh

Mỗi lệnh nhận một tên, ví dụ `metro make:page settings_page`

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Lệnh widget</div>
<div class="ny-doc-command">
<code>metro make:page</code>
<span>Tạo một trang mới</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateful_widget</code>
<span>Tạo một stateful widget</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateless_widget</code>
<span>Tạo một stateless widget</span>
</div>
<div class="ny-doc-command">
<code>metro make:state_managed_widget</code>
<span>Tạo một widget quản lý trạng thái</span>
</div>
<div class="ny-doc-command">
<code>metro make:navigation_hub</code>
<span>Tạo một navigation hub (thanh điều hướng dưới)</span>
</div>
<div class="ny-doc-command">
<code>metro make:journey_widget</code>
<span>Tạo một journey widget cho navigation hub</span>
</div>
<div class="ny-doc-command">
<code>metro make:bottom_sheet_modal</code>
<span>Tạo một bottom sheet modal</span>
</div>
<div class="ny-doc-command">
<code>metro make:button</code>
<span>Tạo một widget nút tùy chỉnh</span>
</div>
<div class="ny-doc-command">
<code>metro make:form</code>
<span>Tạo một form có validation</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Lệnh trợ giúp</div>
<div class="ny-doc-command">
<code>metro make:model</code>
<span>Tạo một lớp model</span>
</div>
<div class="ny-doc-command">
<code>metro make:provider</code>
<span>Tạo một provider</span>
</div>
<div class="ny-doc-command">
<code>metro make:api_service</code>
<span>Tạo một dịch vụ API</span>
</div>
<div class="ny-doc-command">
<code>metro make:controller</code>
<span>Tạo một controller</span>
</div>
<div class="ny-doc-command">
<code>metro make:event</code>
<span>Tạo một event</span>
</div>
<div class="ny-doc-command">
<code>metro make:route_guard</code>
<span>Tạo một route guard</span>
</div>
<div class="ny-doc-command">
<code>metro make:config</code>
<span>Tạo một file cấu hình</span>
</div>
<div class="ny-doc-command">
<code>metro make:interceptor</code>
<span>Tạo một network interceptor</span>
</div>
<div class="ny-doc-command">
<code>metro make:command</code>
<span>Tạo một lệnh Metro tùy chỉnh</span>
</div>
<div class="ny-doc-command">
<code>metro make:env</code>
<span>Tạo cấu hình môi trường từ .env</span>
</div>
</div>

### Ví dụ sử dụng

``` bash
# Tạo một trang mới
metro make:page settings_page

# Tạo một model
metro make:model User

# Tạo một dịch vụ API
metro make:api_service user_api_service
```