Ứng dụng của Dart bao gồm tạo ra các ứng dụng phía Server, các ứng dựng chạy trên nền Web phía Client, các ứng dụng di động với Flutter.

Đối với ứng dụng Web (từ đây hiểu là ứng dụng chạy trên Browser), thực chất là code viết bằng Dart sẽ được chuyển thành JavaScript và thi hành code JS đó (Mặc dù trình duyệt Chrome của Google có thể chạy trực tiếp Dart, nhưng tốt nhất không đi theo hướng này mà chúng ta sẽ luôn biên dịch Dart thành JS).

Khi tạo ứng dụng Web nếu muốn phát triển dựa trên framework Angular thì sẽ tích hợp thư viện AngularDart, phần này sẽ nói khi đã nắm được cơ bản về Dart Web

Dự án mới, môi trường phát triển ứng dụng Web bằng Dart

Bạn vẫn có thể dùng Visual Studio Code với các thiết lập như đã nói ở Cài đặt SDK Dart, để phát triển ứng dụng Web

Từ VS Code, tạo một dự án (thư mục) mới tên là FirstWebApp, tạo thư mục web làm nơi lưu file dart, html của ứng dụng và cũng chính là thư mục lưu các thành phần tĩnh khác (hình ảnh, css ...). Trước tiên, trong thư mục này hãy tạo 2 file main.dartindex.html

Ở thư mục gốc của dự án tạo file pubspec.yaml có nội dung như sau:

name: FirstWebApp
description: Đây là ứng dụng biên dịch từ Dart

dependencies:
  build_runner: ^1.7.0           # (cần lấy bản mới tại) https://pub.dev/packages/build_runner#-installing-tab-
  build_test: ^0.10.2            # https://pub.dev/packages/build_test#-installing-tab-
  build_web_compilers: ^0.4.0    # https://pub.dev/packages/build_web_compilers#-installing-tab-

Sau đó từ dòng lệnh terminate (đang ở thư mục dự án) gõ lệnh pub get để tải và cài đặt các gói trên vào thư viện Dart.

Cài đặt webdev

webdev là một gói của Dart (quản lý bởi pub), công cụ này cùng với các công cụ đã có khi cài SDK như dart2js ... giúp chúng ta các việc: tạo ra một webdev server (từ thư mục web ở trên), giám sát sự thay đổi các file trong thư mục web, mỗi khi thay đổi tự động dịch ra code.

Gõ lệnh sau để cài webdev

pub global activate webdev

Chú ý sau khi hoàn tất có thông báo nơi chứa file webdev, có thể bạn phải thêm thư mục dẫn đến file này vào biến môi trường PATH của hệ điều hành bạn đang dùng để bất kỳ đâu gõ lệnh webdev đều được.

Giờ để biến thư mục web của dự án thành webserver, và mỗi khi mã thay đổi công cụ Dart sẽ biên dịch dart thành JS, từ terminate ở thư mục dự án gõ

webdev serve --release web:8080

Trong đó web là thư mục code, 8080 cổng webserver, bạn thích cổng khác cũng được. --release để biên dịch sang JS.

Sau khi gõ lệnh đó xong, thì mọi thay đổi các file dart trong web sẽ tự động biên dịch, kết quả lưu ở .dart_tool/build/generated/web

Đồng thời lúc này từ trình duyệt sẽ kiểm tra được ứng dụng bằng địa chỉ http://localhost:8080/

Những dòng code đầu tiên

Lập trình ứng dụng Web thì bạn phải biết về HTML, CSS, JavaScript trước!

Mở file web/index và cập nhật nội dụng HTML như sau:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Ứng dụng đầu tiên</title>
    <script defer src="main.dart.js"></script>
  </head>
  <body>
    <p id="idxinchao"></p>
  </body>
</html>

Lưu lại, rồi kiểm tra lại ở http://localhost:8080/, tiêu đề trang cho biết đã load index.html thành công.

webapp

Vì trong thư mục web có file main.dart, mỗi khi biên dịch nó chuyển thành main.dart.js nên trong HTML cần load file này, đây chính là ứng dụng của chúng ta.

Giờ mở file main.dart ra, hãy thêm những dòng code sau:

//Nạp thư viện để tương tác với HTML
import 'dart:html';

void main() {
  //Lấy phần tử có id = idxinchao
  var xinchao =  querySelector('#idxinchao');

  //Khi load trang thiết lập dòng chữ
  xinchao.text = 'Xin chào ! Đây là ứng dụng Web Dart đầu tiên';

  //Bấm vào dòn chữ thì viết ra log
  xinchao.addEventListener('click', (e) => print('Bấm vào dòng chữ'));

}

Lưu lại, VS sẽ biên dịch lại main.dart.js, giờ load lại trang sẽ thấy

webapp

Khi bạn bấm vào dòng cữ, thì ở logcat cũng sẽ thấy dòng chữ bấm vào dòng chữ

Như vậy bạn đã thực hiện viết được ứng dụng Web đầu tiên bằng Dart, đã biên dịch thành JS để có thể chạy trên bất kỳ trình duyệt nào. Dù đơn giản, nhưng từ ví dụ này sẽ là cơ sở cho những tìm hiểu phức tạp hơn.

Đăng ký theo dõi ủng hộ kênh