Bên cạnh Machine Learning/Deep Learning, Flutter là một trong những chủ đề chính của sự kiện Google I/O Extended Hanoi 2018.
Đăng ký sự kiện tại đây nhé: https://ioextended.org/register?ref=flutter_intro
Chúng tôi mong muốn mang đến 1 series về Flutter từ cái nhìn của những lập trình viên đã sử dụng Angular, React, Vue, React Native trong sản phẩm của mình. Bài hôm nay chúng ta sẽ khởi động ứng dụng mặc định của Flutter.
Flutter là một mobile SDK của Google dùng để tạo lập trình giao diện native trên iOS cũng như Android. Cộng đồng công nghệ thế giới không ngừng theo đuổi phát triển các framework để xây dựng ứng dụng cross-platform trong thời gian dài với những điểm sáng không thể bỏ qua như PhoneGap, Cordova, Xamarin,... và cái tên đình đám nhất gần đây đó là React Native. Việc tương đồng giữa Flutter và React/React Native có thể cảm nhận thấy ngay từ lần đầu tiên bạn trải nghiệm.
Cái tôi cảm thấy có lợi nhất khi dùng Flutter đó là Material Design được tích hợp sẵn trong SDK. Cá c bạn từng lập trình React/React-Native và sử dụng bộ Material UI xây dựng cho React sẽ gặp khó khăn trong việc nhất định cũng như animation không thể “hoành tráng” như framework đến từ cha đẻ của Material Design.
Nhưng liệu Google chỉ trang bị duy nhất sức mạnh này cho Framework của mình? Tôi nghĩ là không. Sẽ có những pattern học hỏi và nâng cấp từ những framework khác nhau, đảo qua tôi có thể thấy rõ nhất Observer, sử dụng cơ chế subcribe và unsubcribe vào store data. Một bài viết hay về Observer ở đây, bạn có thể tự implement pattern này hoàn toàn bằng vanilla Javascript:
Trong bài viết này tôi chưa đi sâu vào Architect của Framework này vã sẽ để dành vào phần sau.
Nào “Get your hands dirty”
1. Truy cập trang chủ Flutter
Trang chủ Flutter
“Fast Development” ở đây đó chính là Hot Reload đã quá quen thuộc khoảng 2-3 năm gần đây, vì thế chưa thể làm cho tôi ấn tượng. Cái chúng ta sẽ tập trung xuyên suốt series là 2 tính năng còn lại: “Expressive and Flexible UI” và “Native Performance”.
2. Tải Flutter và setup biến môi trường
Tải Flutter và setup biến môi trường
3. Kiểm tra môi trường hiện tại với Flutter Doctor
Tôi khá thích phần này, Google cung cấp 1 API flutter doctor để bạn có thể kiểm tra môi trường hiện tại của mình, các thư viện bạn còn thiếu để tương thích với Flutter và cả dòng lệnh bạn sử dụng để cài đặt chúng.
Kiểm tra môi trường với Flutter Doctor
Dựa vào hướng dẫn này, tôi đã cài đặt đầy đủ những phần mình còn thiếu.
Khi tất cả các dấu tích hiện lên là bạn hoàn toàn có thể tự tin để tạo ứng dụng Flutter đầu tiên của mình.
4. Tạo ứng dụng đầu tiên
Sử dụng lệnh flutter create myapp để tạo ứng dụng của mình. Câu lệnh quá quen thuộc nếu bạn đã dùng boilder-plate của React.
Giờ chúng ta đã có Hybrid Code chạy cross platform trên cả iOS và Android. Đâu đó tôi đã thấy Dart. Ngôn ngữ Dart được chúng tôi chia sẻ cách đây 4 năm tới cộng đồng nhưng đã dần đi vào quên lãng. Tìm hiểu thêm về Dart tại đây:
5. Chạy Hot Reload
Khi sử dụng flutter run bạn sẽ nhìn thấy ngay hot reload hoạt động ở cổng 8100.
6. Tản mạn source code
setState() - Hàm kinh điển với lập trình viên React, nổi tiếng là hàm asynchronous làm đau đầu không biết bao nhiêu lập trình viên newbie React nay một lần nữa lại xuất hiện cùng Flutter. Chúng ta không thấy object state trong constructor nhưng chúng ta thấy instance variable cụ thể là _counter trong trường hợp này và hiển nhiên cơ chế render/build component của Flutter sẽ có những thứ khác biệt với React.
Để chạy được code Dart, chúng ta cần thêm một plugin có tên “Flutter” cho Android Studio và kiểm tra console hết lỗi.
Cài đặt Plugin Flutter cho Android Studio
Android Studio Console
Chạy Flutter trên máy ảo Android.
Màn hình ứng dụng
Vậy là chúng ta đã có ứng dụng Flutter đầu tiên - ứng dụng tăng điểm quen thuộc. Cảm quan ban đầu của tôi về Flutter đó là dễ cài đặt, docs rõ ràng, nhiều hàm quen thuộc. Bạn thì sao? Chúng ta sẽ cùng nhau đi sâu hơn về công nghệ này trong thời gian tới. Nếu bạn cũng làm được giống tôi, vui lòng chia sẻ bài viết này đến mọi người nhé. 
Bá Ngọc
IT Team Leader - Google I/O Extended Hanoi 2018.
Nhận xét
Đăng nhận xét