Chrome Dev Editor - Công cụ soạn thảo mã nguồn

Chrome Dev Editor (trước đây được biết đến với tên Spark) là một công cụ xây dựng và phát triển ứng dụng trên nền tảng Chrome như sử dụng ngôn ngữ Dart hoặc JavaScript - bao gồm ứng dụng Chrome và ứng dụng web.

Giao diện trình soạn thảo Chrome Dev Editor

Trong khi có rất nhiều trình duyệt để lựa chọn thì Google Chrome vẫn là trình duyệt được nhiều người yêu thích bởi sự an toàn, tốc độ và đặc biệt là các tiện ích mở rộng rất phong phú và đa dạng mà Google mang đến cho người dùng.

Không chỉ những người dùng thông thường có thể tiếp cận kho tiện ích phong phú của Chrome, từ game cho tới các công cụ hỗ trợ đồ họa..., giờ đây Chrome còn mang tới một công cụ dành riêng cho những nhà lập trình và phát triển ứng dụng. Là một công cụ soạn mã nguồn, bên cạnh việc hỗ trợ viết ứng dụng với ngôn ngữ JavaScript hoặc Dart, Chrome Dev Editor còn hỗ trợ các mẫu Polymer giúp người dùng bắt đầu xây dựng giao diện người dùng UI. Tiện ích này cũng tích hợp với khả năng hỗ trợ Git, Pub và Bower.

Tính năng chính của công cụ soạn thảo mã nguồn Chrome Dev Editor

• Xây dựng ứng dụng Chrome và ứng dụng web.
• Sử dụng ngôn ngữ JavaScript và Dart.
• Hỗ trợ các mẫu Polymer.
• Hỗ trợ Git, Pub và Bower.
• Khả năng xem trước với ngôn ngữ đánh dấu Markdown.

Trình soạn thảo

Công cụ soạn thảo mã nguồn Chrome Dev Editor mang đến cho người dùng số lượng mẫu khá đa dạng, bao gồm các ứng dụng web được xây dựng trên ngôn ngữ Dart hoặc JavaScript và ứng dụng Chrome. Được hỗ trợ bởi trình soạn thảo Ace, Chrome Dev Editor cho phép người dùng trải nghiệm các tính năng của một trình soạn thảo với khả năng highlight cú pháp trên ngôn ngữ ưa dùng của mình, code folding (khả năng ẩn hay hiển thị một phần văn bản khi viết code), tự động lùi đầu dòng và nhiều tính năng khác.

Thông báo lỗi cú pháp trong trình soạn thảo

Hỗ trợ Dart

Đây là tính năng nổi bật nhất của Chrome Dev Editor vì không chỉ soạn thảo với Dart, công cụ này còn có thể biên dịch (compile) Dart thậm chí ngay trên Chrome. Các lỗi cú pháp được chỉ ra phía bên phải trình soạn thảo giúp người dùng dễ dàng gỡ lỗi (debug) và một thanh sidebar sẽ nhanh chóng điều hướng tới tập tin Dart. Khi đang mở một dự án làm việc với Dart trên trình duyệt thì việc tải lại trang sẽ khiến quá trình tái biên dịch diễn ra ngay tức thì.

Chạy Dart trong trình soạn thảo Chrome Dev Editor

Phải thừa nhận rằng việc biên dịch một tập tin Dart khá chậm (trên ARM Samsung Chromebook đời đầu) nhưng khả năng viết và chạy mã Dart trên Chrome đã là một tính năng quá tuyệt vời. Với Core i3, i5 hay i7, việc biên dịch chậm sẽ không còn diễn ra nữa.

Hỗ trợ Git

Chrome Dev Editor cũng có tính năng hỗ trợ Git - một điều khá thiết yếu với người dùng Chrome khi mong muốn quá trình code trở nên dễ quản lý hơn. Git là một hệ thống quản lý phiên bản phân tán, giúp máy tính lưu trữ nhiều phiên bản khác nhau của một mã nguồn được nhân bản (clone) từ một kho chứa mã nguồn. Những thay đổi trong mã nguồn sẽ được ủy thác (commit) và đưa lên máy chủ.

Tính năng hỗ trợ Git của Chrome Dev Editor

Việc clone, đổi nhánh, commit và push đều sẽ được hỗ trợ. Các tập tin thay đổi sẽ được đánh dấu màu xanh trên thẻ tab để giúp người dùng dễ dàng nhìn ra các thay đổi đó.

Khả năng xem trước

Trình soạn thảo mã nguồn Chrome Dev Editor cũng hỗ trợ khả năng xem trước Markdown với việc cài đặt hay cập nhật gói Bower, triển khai trực tiếp tới thiết bị Android và xuất lên Chrome Web Store khi nhà lập trình tạo ứng dụng Chrome.

Triển khai sang thiết bị Android

Hướng dẫn tạo ứng dụng với Chrome Dev Editor

Bước 1:

Sau khi chọn thêm tiện ích soạn thảo mã nguồn Chrome Dev Editor vào Chrome, bạn mở trình duyệt Chrome lên và chọn biểu tượng Show Apps. Hoặc một cách khác là trên màn hình máy tính, bạn chọn Select Chrome App Launcher từ thanh taskbar. Ngoài ra, tự gõ lệnh Chrome chrome://apps/ cũng sẽ đưa bạn tới những ứng dụng đã được cài đặt trên Chrome.

Tìm ứng dụng trong kho ứng dụng của Chrome

Bước 2:

Bước tiếp theo hãy chọn Chrome Dev Editor trên danh sách ứng dụng và một cửa sổ mới sẽ hiện ra.

Thanh Menu chính của Chrome Dev Editor

Hãy chọn tạo dự án mới bằng cách click chọn New Project trong danh sách Menu chính nằm bên góc trái. Một cách nhanh hơn là người dùng có thể click chọn biểu tượng dấu cộng màu đỏ nằm ở góc dưới bên trái giao diện.

Chọn tạo một dự án mới với Chrome Dev Editor

Sau đó hãy điền tên cho dự án mới này cũng như chọn một trong các kiểu dự án có sẵn và nhấp chọn Create.

Tên và loại ứng dụng sẽ tạo với Chrome Dev Editor

Bước 3:

Tạo một tập tin index.html và thêm mark-up sau vào tập tin đó.

download.com.vn