# इंस्टॉलेशन

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

तीन कमांड आपको एक खाली फ़ोल्डर से चलती हुई Flutter ऐप तक ले जाते हैं, जिसमें रूटिंग, नेटवर्किंग, थीम और कोड जेनरेशन पहले से सेट होते हैं।

<div class="ny-doc-strip">
<span class="ny-doc-strip-label">शुरू करने से पहले</span>
<span class="ny-doc-strip-item">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="/hi/docs/7.x/requirements">पूरी आवश्यकताएँ →</a>
</div>

## इंस्टॉल

इन कमांड को क्रम से चलाएँ। हर कमांड को दोबारा चलाना सुरक्षित है।

<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 को ग्लोबली इंस्टॉल करें</h3>

यह आपके सिस्टम पर Nylo CLI टूल को ग्लोबली इंस्टॉल करता है।

``` 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">एक नया प्रोजेक्ट बनाएँ</h3>

यह कमांड Nylo टेम्पलेट को क्लोन करता है, प्रोजेक्ट को आपके ऐप नाम के साथ कॉन्फ़िगर करता है, और स्वचालित रूप से सभी डिपेंडेंसीज़ इंस्टॉल करता है।

``` 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 एलियास सेटअप करें</h3>

यह आपके प्रोजेक्ट के लिए `metro` कमांड को कॉन्फ़िगर करता है, जिससे आप पूर्ण `dart run` सिंटैक्स के बिना Metro CLI कमांड उपयोग कर सकते हैं।

``` 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>आपको क्या मिलता है</span>
</div>
<div class="ny-doc-panel-body">
<div class="ny-doc-panel-grid">
<div class="ny-doc-panel-item">पूर्व-कॉन्फ़िगर्ड रूटिंग और नेविगेशन</div>
<div class="ny-doc-panel-item">API सर्विस बॉयलरप्लेट</div>
<div class="ny-doc-panel-item">थीम और लोकलाइज़ेशन सेटअप</div>
<div class="ny-doc-panel-item">कोड जेनरेशन के लिए Metro CLI</div>
</div>
</div>
</div>


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

## प्रोजेक्ट चलाना

Nylo प्रोजेक्ट किसी भी मानक Flutter ऐप की तरह चलते हैं।

<div class="ny-doc-tabs" x-data="{ tab: '\u091f\u0930\u094d\u092e\u093f\u0928\u0932' }">
<div class="ny-doc-tabbar" role="tablist">
<button type="button" role="tab" class="ny-doc-tab" @click="tab = '\u091f\u0930\u094d\u092e\u093f\u0928\u0932'" :class="tab === '\u091f\u0930\u094d\u092e\u093f\u0928\u0932' ? 'is-active' : ''" :aria-selected="tab === '\u091f\u0930\u094d\u092e\u093f\u0928\u0932'">टर्मिनल</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 === '\u091f\u0930\u094d\u092e\u093f\u0928\u0932'" x-cloak>

``` bash
flutter run
```

यदि बिल्ड सफल होता है, तो ऐप Nylo की डिफ़ॉल्ट लैंडिंग स्क्रीन प्रदर्शित करेगा।

</div>

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

प्रोजेक्ट फ़ोल्डर खोलें, टारगेट सेलेक्टर से डिवाइस चुनें, फिर **Run** दबाएँ।

<a href="https://docs.flutter.dev/tools/android-studio#running-and-debugging" target="_BLANK">Flutter दस्तावेज़: चलाना और डिबगिंग ↗</a>

</div>

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

प्रोजेक्ट फ़ोल्डर खोलें, फिर कमांड पैलेट से **Debug: Start Without Debugging** चलाएँ।

<a href="https://docs.flutter.dev/tools/vs-code#run-app-without-breakpoints" target="_BLANK">Flutter दस्तावेज़: बिना ब्रेकपॉइंट के चलाएँ ↗</a>

</div>

</div>


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

## Metro CLI

Metro आपके लिए प्रोजेक्ट फ़ाइलें जेनरेट करता है। मेनू देखने के लिए इसे बिना आर्ग्युमेंट चलाएँ, या सीधे कोई कमांड चलाएँ।

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

### कमांड रेफरेंस

हर कमांड एक नाम लेता है, जैसे `metro make:page settings_page`

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">विजेट कमांड</div>
<div class="ny-doc-command">
<code>metro make:page</code>
<span>नया पेज बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateful_widget</code>
<span>स्टेटफुल विजेट बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:stateless_widget</code>
<span>स्टेटलेस विजेट बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:state_managed_widget</code>
<span>स्टेट-मैनेज्ड विजेट बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:navigation_hub</code>
<span>नेविगेशन हब (बॉटम नेव) बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:journey_widget</code>
<span>नेविगेशन हब के लिए जर्नी विजेट बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:bottom_sheet_modal</code>
<span>बॉटम शीट मोडल बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:button</code>
<span>कस्टम बटन विजेट बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:form</code>
<span>वैलिडेशन के साथ फ़ॉर्म बनाएँ</span>
</div>
</div>

<div class="ny-doc-commands">
<div class="ny-doc-commands-head">हेल्पर कमांड</div>
<div class="ny-doc-command">
<code>metro make:model</code>
<span>मॉडल क्लास बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:provider</code>
<span>प्रोवाइडर बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:api_service</code>
<span>API सर्विस बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:controller</code>
<span>कंट्रोलर बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:event</code>
<span>इवेंट बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:route_guard</code>
<span>रूट गार्ड बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:config</code>
<span>कॉन्फ़िग फ़ाइल बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:interceptor</code>
<span>नेटवर्क इंटरसेप्टर बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:command</code>
<span>कस्टम Metro कमांड बनाएँ</span>
</div>
<div class="ny-doc-command">
<code>metro make:env</code>
<span>.env से एनवायरनमेंट कॉन्फ़िग जेनरेट करें</span>
</div>
</div>

### उदाहरण उपयोग

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