[Programing] Bắt đầu lập trình với Dart 2

Cách đây 4 năm mình đã từng code thử Dart, và thực sự thấy nó chẳng có gì nổi trội, nên quyết định từ bỏ và ko học. Một thời gian bẵng đi, sau sự kiện Google I/O diễn ra vào tháng 6 năm 2018, khi Google chính thức release bản beta#3 của Flutter thì Dart đã quay trở lại và ăn hại gấp đôi Thời thế thay đổi, mà dù ngôn ngữ chỉ là công cụ nhưng không học thì không biết nên quyết định đầu tư thời gian học Dart với hi vọng một ngày không xa sẽ build được app cho Android/iOS trên Flutter.

Trong bài viết này mình note lại những điều quan trọng từ lúc cài đặt môi trường tới lúc bắt tay vào code những dòng Dart-lang đầu tiên .

Chuẩn bị

Mình đang sử dụng Macbook nên sẽ chỉ mô tả cách cài đặt trên Mac, nếu bạn dùng Linux hoặc Windows thì chịu khó tìm cách cài đặt tương ứng trên OS đó nhé.

Install IDE: IntelliJ IDEA Community. Sau khi cài đặt, các bạn mở IntelliJ IDEA > Configure > Preferences > Plugins và cài thêm Dart & Flutter vào nhé.
Install Dart SDK: Làm theo các bước sau để sử dụng Dart phiên bản 2 (Vì còn trong giai đoạn dev, nên nếu chỉ cài đặt theo cách thông thường sẽ cài phiên bản 1 - stable)

Important: The Dart 2 SDK is available from the dev channel only.
```
  $ brew tap dart-lang/dart
  $ brew install dart
  $ brew upgrade dart --devel --force
  $ brew switch dart 2.0.0-dev.65.0
```
Install Flutter SDK: (Nếu bạn không code Flutter thì có thể bỏ qua)
- Tải phiên bản SDK mới nhất tại SDK Archive
- Giải nén vào thư mục xyz nào đó trên máy bạn. (Dùng lệnh unzip hoặc thao tác trực tiếp bằng tay ). Ví dụ ở đây mình giải nén vào thư mục Mobile:
```
  $ pwd
  /Users/euclid/Data/Mobile
  $ ls -la
  total 16
  drwxr-xr-x   4 euclid  staff   136 Jun 27 09:54 .
  drwxr-xr-x@ 13 euclid  staff   442 Jun 27 09:54 ..
  -rw-r--r--@  1 euclid  staff  6148 Jun 27 09:54 .DS_Store
  drwxr-xr-x@ 25 euclid  staff   850 Jun 19 09:31 flutter
```
- Thêm flutter vào system path. Mình dùng “Oh My ZSH!” nên sẽ sử file .zshrc, nếu các bạn không dùng thì sửa file .bashrc.
```
  $ vim ~/.zshrc
```
```
  export FLUTTER=/Volumes/MACOS/Users/euclid/Data/Mobile/flutter/bin
  export PATH=$FLUTTER:$PATH
```
- Khởi động lại Terminal và kiểm tra thông tin:
```
  $ flutter doctor
```
Platform setup: (Nếu bạn không code Flutter thì có thể bỏ qua)
- Android Setup
  1. Nếu bạn đã cài Android Studio, thì rất có thể bạn sẽ không phải làm bước này.
  2. Nếu Intellij IDEA không tự nhận Android SDK thì bạn phải tự cấu hình SDK theo các bước trong ảnh như sau: Ở 2 bước trên, chúng ta hiện thư mục Library trên máy lên, do SDK mặc định cài bởi Android Studio sẽ ở thư mục /Users/<name>/Library/Android/sdk. Tiếp đó ta sẽ cấu hình SDK như sau:
  3. Sau khi cấu hình xong SDK các bạn vào AVD Manager và tạo Virtual Device nhằm debug trên máy ảo Android nhé
  4. Nếu sau khi cài đặt mà không có [Flutter Device Selection] như hình bên dưới trong các Flutter Project: Thì có thể phải update lại SDK & Khởi động lại máy tính
    sdkmanager --update
    Xem thêm giải pháp tại [1] [2].
- iOS Setup
  1. Cài đặt Xcode 9.0 hoặc bản mới hơn (web download hoặc Mac App Store)
  2. Cấu hình lại Xcode command-line tools:
    $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    Có thể đổi lại đường dẫn tới Xcode trên máy bạn cho phù hợp. Confirm lại hoạt động ta chạy câu lệnh sau:
    $ sudo xcodebuild -license
  3. Cấu hình iOS simulator:
    $ open -a Simulator
    Hardware > Device và Window > Scale.
  4. Deploy to iOS devices
    - Cài đặt Homebrew.
    - Chạy các câu lệnh sau:
      $ brew update $ brew install --HEAD libimobiledevice $ brew install ideviceinstaller ios-deploy cocoapods $ pod setup
      Trong quá trình cài libimobiledevice nếu bạn gặp lỗi:
      ./configure: line 15993: syntax error near unexpected token \`libusbmuxd,' ./configure: line 15993: `PKG_CHECK_MODULES(libusbmuxd, libusbmuxd >= $LIBUSBMUXD_VERSION)'
      Hãy chạy các lệnh sau:
      $ sudo chmod 777 /usr/local/share/aclocal $ brew install pkg-config $ brew link pkg-config
      rồi tiếp tục cài lại xem sao nhé Cài đặt pod mất cỡ ~ 500mb nên hãy check lại dung lượng ổ SSD trước nhé. Máy mình chỉ có 128Gb thôi

Install Webdev

$ pub global activate webdev

Thêm pub executables vào system path:

  $ vim ~/.zshrc

export PUB=/Volumes/MACOS/Users/euclid/.pub-cache/bin
export PATH=$PUB:$PATH

Angular Dart project

Nếu bạn muốn bắt tay tạo ứng dụng web với AngularDart thì hãy làm các bước sau.

Mở IntelliJ IDEA lên và bắt đầu tạo 1 project mới sử dụng Dart thôi > Create New Project

Khởi động web server trên Terminal

$ cd <path_to_angular_dart_project>

$ webdev serve
[INFO] Setting up file watchers completed, took 54ms
[INFO] Waiting for all file watchers to be ready completed, took 338ms
[INFO] Reading cached asset graph completed, took 1.0s
[INFO] Checking for updates since last build completed, took 847ms
[WARNING] No actions completed for 17.4s, waiting on:
  - build_modules|modules on package:test/$lib$
  - build_modules|modules on package:test/bootstrap/browser.dart
  - angular on package:angular_test/src/frontend.dart
  - angular on package:angular_test/angular_test.dart
  - build_modules|modules on package:angular_test/$lib$
  .. and 5 more

[INFO] Running build completed, took 2m 26s
[INFO] Caching finalized dependency graph completed, took 561ms
[INFO] Succeeded after 2m 27s with 2230 outputs (6459 actions)
Serving `web` on http://localhost:8080
Serving `test` on http://localhost:8081

Hoặc right-click vào HTML file và chọn Open in Browser Nếu có lỗi

/usr/local/opt/dart/libexec/bin/pub global run webdev serve web:50858
webdev could not run for this project.
No pubspec.lock file found, please run "pub get" first.
Dart Dev Server terminated

Hãy chạy lệnh $ pub get (Hoặc right-click vào pubspec.yaml và chọn Pub: Get Dependencies). Sau đó Open in Browser lại file index.html và chờ Dart Dev Server chạy xong trên cửa sổ Log.

Truy cập địa chỉ http://localhost:8080 để xem kết quả:

DONE !

Note: Từ Dart 1.x đến Dart 2 mọi thứ đã thay đổi:

Dart 1.x	Dart 2
Dartium, content shell	Chrome and dartdevc
`pub build`	`webdev build`
`pub serve`	`webdev serve`
`pub run angular_test`	`pub run build_runner test -- -p chrome`. See: Running tests
pub transformers	build package transformers. See: Transforming code

Console dart project

Để bắt đầu học Dart, mình khuyên các bạn nên tạo Command-line application, vừa nhẹ nhàng lại tăng mức độ tập trung vào ngôn ngữ hơn. Chỉ cần chú ý khi tạo Project nhớ lại kiểu dự án là được:

Learn dart 2

Nếu bạn đã có kiến thức về lập trình thì việc học Dart 2 không hề khó. Dart và Java theo mình chắc phải giống nhau tới 99,99% mất tuy nhiên 0,01% đó cũng rất nhiều thức cần học.

Đọc bài viết này nếu bạn muốn có cái nhìn toàn cảnh về Dart 2 nhé.

Cùi Bắp

[Programing] Bắt đầu lập trình với Dart 2

Chuyên mục

Tags

Chuẩn bị

Angular Dart project

Console dart project

Learn dart 2

References