Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Tạo một ứng dụng Quản lý Tác vụ bằng Ionic: Phần 1

by
Difficulty:BeginnerLength:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong loạt bài hướng dẫn này, bạn sẽ tìm hiểu cách tạo một ứng dụng di động bằng cách sử dụng framework Ionic. Ionic sử dụng Angular để viết các thành phần và tạo ra ứng dụng di động.

Trong suốt loạt bài hướng dẫn này, bạn sẽ tạo ra một ứng dụng di động quản lý tác vụ đơn giản sử dụng framework Ionic.

Theo như tài liệu hướng dẫn chính thức:

Ionic là SDK phát triển ứng dụng di động mã nguồn mở, miễn phí và tuyệt vời để phát triển các ứng dụng web gốc và hiện đại một cách dễ dàng.

Bắt đầu

Hãy bắt đầu bằng cách cài đặt Ionic bằng Node Package Manager (npm). Trước khi cài đặt Ionic, hãy đảm bảo bạn đã cài đặt Node.js trên hệ thống của mình.

Một khi Ionic đã được cài đặt, hãy tạo một dự án rỗng mới bằng cách sử dụng lệnh sau:

Bạn sẽ có thể thử nghiệm ứng dụng Ionic trong trình duyệt cho đến khi hoàn tất. Sau khi hoàn tất, bạn sẽ chạy thử ứng dụng trên một thiết bị Android.

Nhập lệnh sau để chạy ứng dụng từ trình duyệt.

Trỏ trình duyệt của bạn đến http://localhost:8100/ và bạn sẽ thấy dự án Ionic đang chạy.

IONIC Blank Template Project

Cấu trúc dự án sẽ trông như thế này:

IONIC Project Structure

Bên trong dự án Ionic, bạn có một thư mục có tên là src/app. Bên trong thư mục app, bạn sẽ tìm thấy một tập tin có tên là app.module.ts nơi mà mô-đun gốc AppModule được định nghĩa.

Trong tập tin app.module.ts bên trong phần imports, bạn có thể thấy rằng thành phần gốc đã được định nghĩa bằng code sau:

MyApp đã được import từ app.component, nơi nó thiết lập rootPageHomePage, hiện ra khi ứng dụng được nạp.

Tạo thành phần Danh sách Tác vụ

Hãy tạo view để liệt kê các tác vụ được thêm vào. Bên trong thư mục src/pages, tạo một thư mục khác cho thành phần danh sách được gọi là list.

Bên trong thư mục list, tạo một tập tin có tên list.component.html, đây sẽ là template của thành phần. Thêm code sau đây vào tập tin list.component.html:

Như đã thấy trong đoạn code ở trên, bạn sử dụng các thẻ Ionic cụ thể để tạo ra các phần tử. Bạn có thể tham khảo tài liệu hướng dẫn chính thức của Ionic để tìm hiểu danh sách các API thành phần Ionic mà bạn có thể sử dụng khi tạo template của mình.

Để kiểm soát template được tạo ra ở trên, bạn sẽ cần một lớp controller. Hãy tạo một tập tin có tên là list.component.ts và định nghĩa lớp ListPage. Nó sẽ trông giống như sau:

Bạn định nghĩa thành phần danh sách tác vụ bằng cách sử dụng decorator @Component. Bên trong @Component, bạn định nghĩa selector bằng cách sử dụng khoá selector và template bằng khóa templateUrl cho thành phần.

Ứng dụng cần biết rằng thành phần đã tạo ra ở trên tồn tại và do đó bạn cần phải import nó vào trong mô đun gốc.

Import lớp ListPage bên trong tập tin src/app/app.module.ts và bao gồm nó trong danh sách declarationsentryComponents. Tập tin app.module.ts đã sửa đổi trông giống như sau:

Khi ứng dụng được nạp, bạn muốn thành phần List mới được tạo ra hiển thị thay vì HomePage. Vì vậy, hãy sửa đổi rootPage được định nghĩa bên trong tập tin app.component.ts.

Như đã thấy trong đoạn code ở trên, bạn đã import ListPage bên trong tập tin app.component.ts và thay đổi rootPage thành ListPage thay vì HomePage.

Lưu các thay đổi ở trên và khởi động máy chủ Ionic bằng lệnh sau:

Bạn sẽ thấy ứng dụng di động đang chạy tại http://localhost:8100/.

Ionic App With List Component

Tạo thành phần Thêm Tác vụ

Từ màn hình hiển thị danh sách, bạn sẽ thêm một liên kết để thêm các phần tử vào danh sách. Hãy đặt một biểu tượng thêm ở bên phải của màn hình. Bên trong tập tin list.component.html, thêm code sau đây để thêm biểu tượng dấu cộng.

Tập tin list.component.html đã sửa đổi sẽ giống như sau:

Lưu các thay đổi ở trên và khởi động lại máy chủ, và bạn sẽ thấy biểu tượng dấu cộng hiển thị trên màn hình.

Task Manager List With Add Icon

Khi người dùng nhấp vào biểu tượng dấu cộng, bạn cần hiển thị màn hình để thêm các tác vụ mới. Vì vậy, hãy tạo một thành phần khác được gọi là thành phần Add .

Tạo một thư mục có tên là add bên trong thư mục pages. Bên trong thư mục add, tạo một tập tin có tên là add.component.html và thêm vào code sau đây:

Đoạn code trên hiển thị màn hình để thêm một tác vụ mới.

Bạn cần hiển thị màn hình ở trên khi người dùng nhấp vào biểu tượng dấu cộng trên màn hình hiển thị danh sách. Như vậy, bạn sẽ được hiển thị nó như là một cửa sổ popup.

Tạo một tập tin có tên là add.component.ts và thêm vào đó code sau đây:

Như đã nhìn thấy trong đoạn code ở trên, bạn vừa tạo ra thành phần Add bằng cách chỉ định selectortemplateUrl.

Đăng ký thành phần bằng cách import nó vào tập tin app.module.ts bên trong thư mục src/app. Tập tin app.module.ts đã sửa đổi sẽ trông như sau:

Để hiển thị thành phần AddPage trong một cửa sổ popup, bạn cần phải import ModalController được cung cấp bởi ionic-angular. Import ModalController trong list.component.ts.

Tạo một phương thức gọi là presentAddModal và tạo một modal bằng cách sử dụng ModalController. Tập tin list.component.ts sẽ trông giống như thế này:

Đăng ký sự kiện nhấp vào nút Add trong list.component.html.

Lưu các thay đổi ở trên và khởi động lại máy chủ Ionic. Nhấp vào biểu tượng Add trong trang hiển thị danh sách và bạn sẽ có trang thêm tác vụ.

Task Manager App - Add Task

Đối với nút back trên màn hình thêm tác vụ, bạn cần thêm một phương thức dismiss trên nút bấm trong tập tin add.component.ts.

Import mô-đun ViewController và gọi phương thức dismiss để quay lại màn hình hiển thị danh sách. Nó sẽ trông như sau:

Tóm tắt

Trong bài hướng dẫn này, bạn đã tìm hiểu về cách tạo một ứng dụng di động sử dụng framework Ionic, là framework sử dụng Angular. Bạn đã tạo ra view cho ứng dụng quản lý tác vụ. Bạn đã tạo ra thành phần Add và List.

Trong phần tiếp theo của loạt bài hướng dẫn này, bạn sẽ cài đặt chức năng cho ứng dụng quản lý tác vụ để thêm và liệt kê các tác vụ.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Hãy cho chúng tôi biết những đề xuất của bạn trong phần bình luận bên dưới nhé.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.