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

Đưa lệnh `nylo` vào 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
```

Sau đó, khởi động lại terminal của bạn, hoặc chạy lệnh `source` mà `nylo init` in ra.

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


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

## Nylo CLI

<!-- uncertain: label "Requires" has no established translation in this locale file's existing x-doc-strip usage -->
<div class="ny-doc-strip">
<span class="ny-doc-strip-label">Yêu cầu</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">Cập nhật CLI →</a>
</div>

Lệnh `nylo` ở bước 1 làm được nhiều hơn là chỉ tạo dự án. Chạy nó từ thư mục dự án của bạn để dọn dẹp bản build, làm mới iOS pods, chạy test, và kiểm tra bản dịch của bạn.

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Lệnh dự án</div>
<div class="ny-doc-command">
<code>nylo new</code>
<span>Tạo một dự án mới</span>
</div>
<div class="ny-doc-command">
<code>nylo init</code>
<span>Thiết lập alias metro trong shell của bạn</span>
</div>
<div class="ny-doc-command">
<code>nylo clean</code>
<span>Chạy flutter clean và flutter pub get</span>
</div>
<div class="ny-doc-command">
<code>nylo ios:pod-refresh</code>
<span>Cài đặt lại iOS pods của bạn</span>
</div>
<div class="ny-doc-command">
<code>nylo metro</code>
<span>Chạy một lệnh Metro không cần alias</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Kiểm thử và bản dịch</div>
<div class="ny-doc-command">
<code>nylo test</code>
<span>Định dạng và chạy test của bạn</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:find-untranslated</code>
<span>Tìm văn bản chưa được bọc trong .tr()</span>
</div>
<div class="ny-doc-command">
<code>nylo locale:check-missing-keys</code>
<span>Tìm khóa còn thiếu trong file ngôn ngữ của bạn</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">Bản thân CLI</div>
<div class="ny-doc-command">
<code>nylo self-update</code>
<span>Cập nhật nylo lên phiên bản mới nhất</span>
</div>
<div class="ny-doc-command">
<code>nylo --version</code>
<span>Hiển thị phiên bản đã cài đặt</span>
</div>
</div>

Các lệnh có tùy chọn sẽ liệt kê chúng bằng `-h`, ví dụ `nylo test -h`. Kiểm thử được trình bày trong [Chạy Test](/docs/7.x/testing#running-tests), và các lệnh `locale:` trong [Kiểm tra bản dịch](/docs/7.x/localization#auditing-translations).

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

### Dọn dẹp dự án

`nylo clean` chạy `flutter clean` rồi đến `flutter pub get`. Thêm cờ nền tảng khi việc dọn dẹp thông thường chưa đủ:

``` bash
# flutter clean, sau đó flutter pub get
nylo clean

# Đồng thời xóa ios/Pods, ios/.symlinks và ios/Podfile.lock, rồi chạy pod install --repo-update
nylo clean --ios

# Đồng thời chạy gradlew clean trong android/
nylo clean --android

# Cả hai điều trên
nylo clean --all
```

Nếu một dự án không có thư mục `ios/` hoặc `android/`, nền tảng đó sẽ bị bỏ qua kèm cảnh báo. `pod install` chỉ chạy trên macOS.

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

### Làm mới iOS pods

Khi CocoaPods bị lệch đồng bộ, `nylo ios:pod-refresh` sẽ xóa `ios/Pods`, `ios/.symlinks` và `ios/Podfile.lock`, sau đó chạy `pod install --repo-update` trong thư mục `ios/`:

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

Chạy lệnh này từ thư mục gốc dự án trên macOS. Khác với `nylo clean --ios`, nó không chạy `flutter clean` hay `flutter pub get`.

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

### Chạy Metro không cần alias

`nylo metro` chuyển mọi thứ phía sau nó đến Metro (`dart run nylo_framework:main`). Hãy dùng lệnh này trước khi bạn chạy `nylo init`, hoặc trên Windows, nơi `nylo init` không thể thêm alias `metro` giúp bạn:

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

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

### Cập nhật CLI

``` bash
nylo self-update
```

Lệnh này kiểm tra pub.dev và cài đặt lại `nylo_installer` nếu có phiên bản mới hơn. Sau khi một lệnh hoàn tất, `nylo` cũng cho bạn biết khi có bản cập nhật. Nó sẽ im lặng khi đầu ra không hướng đến terminal, vì vậy thông báo không bao giờ xuất hiện trong log CI hay báo cáo được pipe.

Để xem phiên bản bạn đã cài đặt:

``` bash
nylo --version
```