起步：使用 Dart 開發 Web 應用

下面的步驟將指引你使用 Dart 開發 web 應用。如果你想編寫 跨平臺 應用，請 嘗試 Flutter。

開始旅程？你將先在瀏覽器中嘗試 Dart，無需下載。之後你將會安裝 Dart 並建立一個小型 web 應用。

1. 在 DartPad 中開發 web 程式

透過 DartPad，你不需要下載任何東西即可嘗試 Dart 程式語言和 API。

例如，下面這個內嵌的 DartPad 可以讓你嘗試待辦列表產生器的程式碼。點選 Run 執行程式；輸出介面顯示在程式碼的右側。嘗試編輯原始碼，比如在 pets 列表中新增「horses」。

{$ begin main.dart $}
import 'dart:html';

Iterable<String> thingsTodo() sync* {
  const actions = ['Walk', 'Wash', 'Feed'];
  const pets = ['cats', 'dogs'];

  for (final action in actions) {
    for (final pet in pets) {
      if (pet != 'cats' || action == 'Feed') {
        yield '$action the $pet';
      }
    }
  }
}

void addTodoItem(String item) {
  final listElement = LIElement()..text = item;
  todoList.children.add(listElement);
}

final UListElement todoList = querySelector('#todolist') as UListElement;

void main() {
  thingsTodo().forEach(addTodoItem);
}

{$ end main.dart $}
{$ begin index.html $}
<h2>A Simple To-Do List</h2>

<p>Things to do:</p>

<ul id="todolist">
</ul>
{$ end index.html $}

更多資訊：

• DartPad 文件

• Dart 語言概覽

• Dart 函式庫概覽

• 簡明 Dart web 開發指南

2. 安裝 Dart

Once you’re ready to move beyond DartPad and develop real apps, you need an SDK. You can either download the Dart SDK directly (as described below) or download the Flutter SDK, which includes the full Dart SDK.

• Windows
• Linux
• Mac

  C:\> choco install dart-sdk

  $ brew tap dart-lang/dart
  $ brew install dart

3. 獲取 CLI 工具或者 IDE（或兩者都有）

如果你想使用命令列，請安裝 webdev：

$ dart pub global activate webdev

儘管使用 IDE 是可選的，但我們強烈建議使用 IDE。有關可用的 IDE 列表，請檢視 編輯器和偵錯程式的概覽。

4. 建立一個 web 應用

透過在命令列輸入以下命令，建立一個 web 應用：

$ dart create -t web quickstart

透過已經整合 Dart 的 IDE 同樣可以建立一個 web 應用，使用名為 Bare-bones Web App 的模版建立一個專案。

5. 執行應用

要從命令列執行應用程式，可以使用 webdev 建構和執行應用程式：

$ cd quickstart
$ webdev serve

或者從 IDE 執行應用程式。

使用 Chrome 瀏覽器存取應用程式的 URL 即可檢視你的應用程式。比如，localhost:8080。

無論使用 IDE 還是命令列， webdev serve 建構和執行你的程式都是透過 Dart 開發編譯器 dartdevc。第一次建構和執行應用程式時，啟動速度很慢。之後的建構會很快，因為資源會被快取在磁碟並且使用增量建構。

一旦應用程式編譯完成，瀏覽器會顯示「Your Dart app is running.」

6. 新增自訂程式碼

讓我們自訂剛才建立的應用。

1. 從 DartPad 將 thingsTodo() 函式複製到 web/main.dart 檔案中。

2. 新增 newLI() 函式（如下所示）。它接收 String 型別的引數並建立一個新的 LIElement。

   Iterable<String> thingsTodo() sync* { ... }
   
   LIElement newLI(String itemText) => LIElement()..text = itemText;
   
   void main() { ... }

3. 在 main() 函式中，初始化 output 元素透過 thingsTodo()：

   Iterable<String> thingsTodo() sync* { ... }
   
   LIElement newLI(String itemText) => LIElement()..text = itemText;
   
   void main() {
     querySelector('#output')?.children.addAll(thingsTodo().map(newLI));
   }

4. 儲存你的修改。

5. webdev 工具會自動重新建構你的應用程式。在瀏覽器重新整理應用。現在你簡易的 Dart 程式已經有了一個待辦列表！如下圖所示：
   

6. 你可以選擇美化一下應用的樣式透過編輯 web/styles.css，然後重新載入應用程式來檢查你的改動。

   #output {
     padding: 20px;
     text-align: left;
   }

7. 使用 Dart 開發者工具檢查應用

使用 Dart 開發者工具設定斷點，檢視值和型別，逐行執行你的 Dart 程式碼。有關設定細節和示範，請檢視 除錯 Dart Web 應用。

接下來做什麼？

檢索這些資源：

• Tutorials and codelabs for Dart
  • Tutorials
  • Codelabs
• Dart language, libraries, and conventions
  • Language tour
  • Library tour
  • Effective Dart
• Tools & libraries
  • Dart SDK
  • Dart tools
  • IDEs
  • Web libraries and packages

如果你在這一步無法繼續進行，可以從 社群和幫助 中查詢幫助。