Advertisement
  1. Code
  2. Ionic 2

Viết Ứng dụng Ionic 2 Đầu tiên Của bạn: Ứng dụng Chia sẻ Ảnh

by
Read Time:15 minsLanguages:

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 gồm hai phần này, bạn đang học cách tạo ứng dụng Ionic 2 đầu tiên của mình. Bây giờ bạn đã thiết lập xong môi trường phát triển và tìm hiểu về quy trình phát triển trong Ionic 2, đã đến lúc bắt tay vào viết code cho ứng dụng.

Nếu bạn vẫn chưa, thì hãy theo dõi bài viết đầu tiên để thiết lập môi trường phát triển và khởi động dự án của bạn.

Phần thứ hai sẽ khái quát những vấn đề mà bạn cần phải biết khi đề cập đến công việc viết code cho ứng dụng trong Ionic 2. Bạn sẽ học cách tạo các trang cho ứng dụng, cách lấy dữ liệu đầu vào từ người dùng và cách sử dụng plugin để truy cập các chức năng gốc. Một khi bạn đã hoàn thành, bạn sẽ chạy ứng dụng trong một thiết bị hoặc emulator. Nhưng trước khi bạn làm được điều đó, hãy dành một ít thời gian để nói về những gì bạn sẽ tạo ra.

Những gì bạn sẽ tạo ra

Trong hướng dẫn này, bạn sẽ tạo ra một ứng dụng chia sẻ hình ảnh. Quy trình cơ bản sẽ như sau:

  1. Người dùng mở ứng dụng và đăng nhập. Họ sẽ được chuyển đến trang để chọn hình ảnh cho việc chia sẻ.
  2. Người dùng nhấp vào nút Pick Image. Màn hình chọn hình ảnh sẽ hiện lên, và người dùng chọn một hình ảnh. Sau đó, hình ảnh đó sẽ được xem trước.
  3. Người dùng nhập phụ đề và nhấp vào nút Share Image để chuyển hình ảnh tới ứng dụng Instagram.

Bài này sẽ chỉ hướng dẫn cho bạn cách chạy ứng dụng trên một thiết bị Android, nhưng Cordova (framework dùng để chạy Ionic) là đa nền tảng. Ionic 2 có các theme được tích hợp sẵn cho Android, iOS và Windows, vì vậy bạn cũng dễ dàng tạo một phiên bản ứng dụng của mình cho các thiết bị đó.

Ứng dụng sẽ giống như sau:

Completed photo sharing appCompleted photo sharing appCompleted photo sharing app

Thiết lập Dự án

Nếu bạn đã theo dõi hướng dẫn trước đó thì bạn đã có được môi trường phát triển Ionic 2 và bộ khung của dự án. Chúng ta đã sử dụng các lệnh trong Ionic 2 CLI sau để tạo ra cây thư mục của dự án và chuẩn bị triển khai cho Android:

Chúng ta cũng đã cài đặt một vài plugin hữu ích:

Viết code cho Trang chủ

Trong phần còn lại của hướng dẫn này, bạn sẽ chủ yếu làm việc bên trong thư mục src, vì vậy hãy giả định rằng thư mục src là thư mục gốc mỗi khi bạn nhìn thấy một đường dẫn tập tin. (Nếu bạn muốn xem lại các đường dẫn được tạo ra bởi template khởi đầu của Ionic, hãy đọc hướng dẫn trước đó.)

Bên trong thư mục src có bốn thư mục:

  • app: đây là nơi định nghĩa code toàn cục của ứng dụng. Nếu bạn cần phải chạy code cụ thể khi ứng dụng khởi động, hoặc bạn muốn cập nhật CSS toàn cục, thì đây chính là nơi.
  • assets: đây là nơi mà các tập tin như hình ảnh được sử dụng như là nội dung cho ứng dụng.
  • pages: đây là nơi chứa code cho từng trang riêng lẻ. Mỗi trang đều có thư mục riêng và bên trong mỗi thư mục có ba tập tin định nghĩa nên template (HTML), phong cách (CSS) và script (TypeScript) cho trang.
  • themes: đây là nơi bạn sẽ thực hiện nếu bạn muốn thay đổi theme mặc định của Ionic 2.

Template cho Trang chủ

Mặc định, template khởi đầu blank của Ionic đã có sẵn một trang chủ. Vì vậy, tất cả những gì bạn phải làm là chỉnh sửa nó để hiển thị nội dung mà bạn muốn. Mở tập tin pages/home/home.html và xóa nội dung hiện tại của nó. Thêm các code sau vào bên trên trang:

Đoạn code ở trên là code mẫu cho header của ứng dụng. Thành phần <ion-navbar>  đóng vai trò như một thanh công cụ điều hướng. Nó sẽ tự động hiển thị một nút back bất cứ khi nào bạn điều hướng khỏi trang mặc định. <ion-title> thiết lập tiêu đề của nav bar.

Tiếp theo là nội dung thật sự của trang. Bạn có thể định nghĩa nó bên trong thành phần <ion-content>. Mặc định padding có thể được áp dụng bằng cách chỉ định tùy chọn padding. Bên trong container đó, tạo một danh sách mới chứa các trường nhập liệu để nhập tên người dùng và mật khẩu. Tạo một danh sách để chứa các trường chỉnh sửa là một cách làm tiêu chuẩn trong Ionic—nó cho phép bạn xếp chồng từng trường một cách gọn gàng. Bên dưới danh sách là nút để đăng nhập.

Hãy dành một ít thời gian để xem code cho việc nhập văn bản và nhấp vào một nút. Trong Ionic, bạn có thể định nghĩa một trường nhập văn bản bằng thành phần <ion-input>. Để ràng buộc trường văn bản vào một thuộc tính class được định nghĩa trong script của trang, bạn sử dụng [(ngModel)]. Sau đó giá trị được gán cho nó là tên của thuộc tính class.

Để thiết lập ràng buộc dữ liệu hai chiều, bạn có thể thiết lập [value] giống với thuộc tính được sử dụng cho [(ngModel)]. Điều này cho phép bạn cập nhật giá trị của trường văn bản bằng cách thay đổi giá trị của model từ script của trang. Sau đó, bạn sẽ thấy cách định nghĩa một thuộc tính class bên trong script của trang.

Để định nghĩa các nút, hãy sử dụng phần tử button tiêu chuẩn trong HTML. Nếu bạn đang tự hỏi tại sao nó không phải là <ion-button>, thì đó là vì lý do khả năng truy cập. Button là một thành phần giao diện quan trọng, vì vậy nhóm Ionic đã quyết định gắn bó với button tiêu chuẩn của HTML để giúp chúng có khả năng truy cập. ion-button được thêm vào để cung cấp tính năng bổ sung.

Ionic 2 buttonsIonic 2 buttonsIonic 2 buttons

Để thêm trình xử lý sự kiện nhấp chuột, bạn sử dụng chỉ thị (click), với một giá trị xác định hàm (được định nghĩa trong script của trang) để thực thi khi sự kiện nhấp chuột xảy ra.

Script cho Trang chủ

Mở tập tin pages/home/home.ts, xóa tất cả các nội dung của nó và thêm các code sau:

Chia nhỏ đoạn code ở trên, đầu tiên chúng ta import các lớp thành phần Angular có chứa tất cả các chỉ thị Ionic đã được tạo ra bên trong

Tiếp theo, chúng ta import các controller cho thanh điều hướng và cảnh báo từ gói ionic-angular. Đây là nơi mà tất cả các controller Ionic được thêm vào.

Sau đó, chúng ta sẽ import PickerPage. Bạn sẽ tạo ra nó sau, vì vậy bây giờ cứ để nguyên nó là dòng chú thích. Hãy nhớ bỏ chú thích sau khi bạn đã sẵn sàng để nạp nó.

Sau lệnh import, hãy sử dụng @Component để chỉnh định template HTML sẽ được sử dụng bởi script:

Bây giờ chúng ta có thể định nghĩa lớp cho script trang chủ của chúng ta. Chúng ta sẽ cần xuất lớp này để nó có thể được import từ các tập tin khác trong ứng dụng.

Hãy làm cho NavControllerAlertController hiện hữu trong toàn bộ lớp bằng cách định nghĩa chúng như là các tham số trong hàm xây dựng. Điều này cho phép bạn sử dụng this.navCtrl, ví dụ, khi bạn muốn sử dụng NavController để chuyển hướng đến một trang khác.

Bây giờ chúng ta đã sẵn sàng để định nghĩa các thuộc tính của controller mà có thể được tham chiếu từ template. Các thuộc tính này sẽ chứa giá trị hiện tại của trường nhập văn bản cho tên người dùng và mật khẩu:

Để giữ cho mọi thứ đơn giản, chúng ta sẽ sử dụng giá trị được lưu sẵn cho tên người dùng và mật khẩu. Nhưng đối với ứng dụng trong thế giới thật, bạn chắc là sẽ phải gửi một yêu cầu đến máy chủ để xác thực người dùng.

Bên trong hàm login(), hãy tạo ra một cảnh báo khi người dùng nhập vào tên người dùng hoặc mật khẩu không chính xác:

Nếu thông tin đăng nhập không chính xác, hãy hiển thị cảnh báo:

Ionic 2 alertsIonic 2 alertsIonic 2 alerts

Nếu tên người dùng và mật khẩu được nhập vào bởi người dùng khớp với các giá trị được lưu sẵn, hãy sử dụng NavController để đẩy Trang Chọn hình ảnh vào ngăn xếp điều hướng. Bất kể trang nào bạn đẩy vào ngăn xếp điều hướng sẽ trở thành trang hiện tại, trong khi xoá một trang sẽ điều hướng đến trang trước đó. Đây là cách điều hướng trong Ionic 2.

Trang Chọn hình ảnh

Tiếp theo, bạn cần tạo trang chọn hình ảnh. Như bạn đã biết, cách làm tiêu chuẩn là tạo một thư mục riêng cho mỗi trang và mỗi thư mục sẽ có ba tập tin trong đó. Rất may, Ionic CLI còn đi kèm với một lệnh cho phép chúng ta tạo các trang mới:

Lệnh này sử dụng lệnh generate, sẽ tạo thư mục của trang với ba tập tin bên trong. Trên hết, mỗi tập tin đã đi kèm với một số code mẫu mà bạn có thể bắt đầu.

Template cho Trang Chọn hình ảnh

Sau khi điều đó đã được thực hiện xong, hãy mở tập tin pages/picker/picker.html và thay thế code mẫu bằng:

Không có code nào thật sự lạ lẫm cả, ngoại trừ chỉ thị hidden và việc sử dụng thành phần <ion-card>.

Chỉ thị hidden cho phép bạn ẩn một phần tử dựa trên một giá trị cụ thể được định nghĩa bên trong script cho trang của bạn. Vì vậy, nếu has_picked_imagetrue, chỉ sau đó div này sẽ được hiển thị.

Thành phần <ion-card> được sử dụng để tạo ra các thẻ. Thẻ là một cách tuyệt vời để hiển thị hình ảnh trong ứng dụng.

Ionic 2 card imagesIonic 2 card imagesIonic 2 card images

Phong cách cho Trang Chọn hình ảnh

Mở tập tin pages/picker/picker.scss và thêm các code sau:

Script cho Trang Chọn hình ảnh

Mở tập tin pages/picker/picker.ts và thêm các code sau:

Tôi sẽ phân chia code này nhỏ hơn một chút. Đầu tiên chúng ta import các plugin mà bạn đã cài đặt trước đó. Lưu ý rằng các plugin này đều được cài đặt trong cùng một gói (ionic-native). Việc này thật sự hay, bởi vì thay vì phải import tất cả các plugin riêng trong từng dòng riêng của nó, thì bạn có thể thực hiện nó trong một dòng duy nhất.

Tiếp theo chúng ta khai báo các thuộc tính lớp:

Khi nút Pick Image được nhấp vào, hãy xác định các tuỳ chọn cho image picker. Các tùy chọn này khá rõ ràng, nhưng tôi đã thêm một số chú thích để làm rõ những gì mà từng dòng code này thực hiện.

Chỉ định chiều rộng width và chiều cao height không nhất thiết có nghĩa là hình ảnh xuất ra sẽ sử dụng chiều cao và chiều rộng chính xác đó. Ý nghĩa của nó là Ionic sẽ sử dụng các kích thước đó như là chiều rộng hoặc chiều cao tối đa sao cho tỷ lệ khung hình vẫn được duy trì.

Chúng ta đang sử dụng URI dữ liệu như là kiểu đầu ra vì plugin Instagram chỉ chấp nhận các URI dữ liệu. Điều này có nghĩa là bạn phải điều chỉnh chiều rộng, chiều cao và chất lượng tối thiểu vì các URI dữ liệu có thể rất dài nếu chất lượng cao—toàn bộ hình ảnh được mã hoá trong một chuỗi URI! Điều này có thể làm cho ứng dụng bị crash, do đó, tốt nhất là giữ cho chất lượng thấp hơn và hình ảnh nhỏ hơn khi làm việc với các URI dữ liệu.

Tiếp theo, sử dụng plugin Image Picker để bật màn hình chọn hình ảnh. Vì chúng ta chỉ cho phép chọn một hình ảnh duy nhất, nên chúng ta có thể chỉ cần truy cập vào hình ảnh đầu tiên trong mảng kết quả. Chúng ta cũng phải thêm tiền tố cho các URI dữ liệu vào phía trước.

Cuối cùng, khi nút Share Image được nhấp, phương thức share được cung cấp bởi plugin Instagram sẽ bật màn hình chia sẻ trong ứng dụng Instagram. Nó sẽ bao gồm hình ảnh đã được điền sẵn.

Mặc dù vậy, phụ đề sẽ không được sao chép. Ứng dụng Instagram vô hiệu hóa phụ đề được điền trước và vì vậy trường phụ đề sẽ trống khi ứng dụng Instagram được mở. Một giải pháp là, plugin Instagram sẽ sao chép chú thích vào bộ nhớ tạm. Điều này có nghĩa là người dùng có thể chỉ cần dán nó vào trường văn bản phụ đề trong ứng dụng Instagram.

Liên kết Mọi thứ lại với nhau

Bước cuối cùng là mở tập tin app/app.module.ts. Đây là mô-đun gốc của ứng dụng nơi bạn định nghĩa tất cả các trang và nhà cung cấp (chẳng hạn như trình xử lý lỗi Ionic mặc định) mà bạn sẽ sử dụng trong suốt ứng dụng.

Hãy đảm bảo tất cả các trang mà bạn đã tạo ra đều đã được định nghĩa, nếu không, bạn sẽ gặp phải một lỗi khi điều hướng đến một trang chưa được định nghĩa. Mặc định, HomePage đã được định nghĩa ở đây, vì vậy bạn chỉ cần thêm PickerPage. Chỉ cần import nó ở đầu của tập tin và sau đó thêm nó bên dưới mảng declarationsentryComponents. Lưu ý rằng MyApp không phải là một trang; nó là một thành phần đóng vai trò như là vỏ bọc rỗng cho các trang được nạp vào.

Nếu bạn mở tập tin app/app.components.ts, bạn sẽ thấy những thứ sau đây:

Đây là nơi bạn có thể định nghĩa trang gốc—trang mà người dùng sẽ nhìn thấy khi họ mở ứng dụng. Trong trường hợp này, HomePage là trang gốc. Điều này cũng phù hợp để thực thi code khởi tạo, vì code ở đây chỉ được thực thì một lần khi người dùng khởi chạy ứng dụng. Khi khởi tạo thứ gì đó (ví dụ, yêu cầu quyền bật Bluetooth), bạn sẽ luôn cần phải đợi cho đến khi sự kiện platform.ready() được kích hoạt. Chỉ khi sự kiện đó đã được chạy thì bạn có thể chắc chắn rằng các hàm gốc đã sẵn sàng để được gọi.

Chạy Ứng dụng

Bây giờ bạn đã sẵn sàng để chạy ứng dụng trên thiết bị di động hoặc emulator. Bạn có thể làm điều đó bằng cách thực thi lệnh sau:

Hãy đảm bảo rằng bạn có một thiết bị kết nối với máy tính của bạn hoặc bạn có một emulator đang chạy khi bạn thực thi lệnh trên. Nếu vẫn không hoạt động, hãy kiểm tra xem bạn đã bật gỡ lỗi USB trong thiết bị của mình hay chưa và chạy lệnh adb devices. Lệnh đó sẽ làm cho máy tính kết nối với thiết bị của bạn. Chỉ cần chấp nhận khi nhìn thấy dấu nhắc xác thực trên thiết bị của bạn.

Nếu bạn muốn có một tập tin APK để bạn có thể chia sẻ nó với bạn bè của mình, thì bạn có thể tạo ra một cái bằng cách thực thị lệnh sau đây:

Lệnh này sẽ tạo ra một tập tin android-debug.apk trong thư mục platforms/android/ build/outputs/apk.

Tóm tắt

Xong rồi! Trong hướng dẫn này, bạn đã tạo ra ứng dụng Ionic 2 đầu tiên của mình. Đó là một ứng dụng đơn giản, và thậm chí bạn có thể thấy rằng nó rất dễ dàng. Nhưng bạn đã học được cách thiết lập một môi trường để phát triển các ứng dụng Ionic 2 và bạn đã học được một số khái niệm cơ bản mà bạn có thể áp dụng khi phát triển các ứng dụng trong tương lai. Những kiến thức này bao gồm lấy giá trị hiện tại từ một trường nhập liệu, đáp ứng các sự kiện nhấp chuột, liên kết hình ảnh và sử dụng plugin để truy cập các chức năng gốc. Như vậy, bạn đã có thể nhẹ nhõm! Bạn đã làm tốt công việc cho đến lúc này.

Hãy xem qua một số hướng dẫn khác của chúng tôi về Ionic 2!

Nếu bạn muốn có một bài giới thiệu chuyên sâu và thực tế về framework Ionic 2, hãy thử qua khóa học của chúng tôi Làm quen với Ionic 2.

Trong khóa học này, Reggie Dawson sẽ giảng dạy cho bạn tất cả mọi thứ về framework Ionic và sẽ hướng dẫn cho bạn cách xây dựng một ứng dụng di động từ đầu đến cuối. Song song đó, bạn sẽ tìm hiểu về thư viện thành phần Ionic, về cách lập trình JavaScript kiểu tĩnh bằng TypeScript và về việc tích hợp một ứng dụng Ionic 2 với một API đa phương tiện.

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.