Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Là một nhà phát triển khôn ngoan, bạn có thể thận trọng trong việc tạo ra các ứng dụng lai phụ thuộc vào các API gốc của Android. Một vài năm trước đây, tôi cũng đã, vì Android có quá nhiều phiên bản cụ thể và thiết bị cụ thể không giống nhau. Tuy nhiên, ngày nay chúng ta có thể tin tưởng các framework phát triển ứng dụng lai xử lý hầu hết những vấn đề đó. Ionic 2, xây dựng dựa trên Apache Cordova, là một trong những framework như vậy.
Ionic 2 có các wrapper cho một số plugin Cordova phổ biến cho phép bạn dễ dàng tận dụng tài các nguyên gốc của Android, chẳng hạn như camera, cảm biến, và hệ thống tập tin. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng các wrapper đó cùng với các thành phần UI của Ionic 2 để tạo ra một ứng dụng camera đơn giản.
Yêu cầu
Để làm theo, bạn sẽ cần:
- phiên bản Android SDK mới nhất
- Node.js v6.7.0 hoặc cao hơn
- một thiết bị hoặc emulator chạy Android 4.4 hoặc cao hơn
- một kiến thức cơ bản về TypeScript và Angular 2
1. Cài đặt Cordova và Ionic
Cả Ionic và Cordova có sẵn như là các mô-đun NPM, do đó, cách dễ nhất để cài đặt chúng là sử dụng lệnh npm. Dưới đây là cách bạn có thể cài đặt cả hai trên toàn cục:
npm install -g cordova ionic
Sau khi việc cài đặt đã xong, gõ những thứ sau đây để đảm bảo rằng giao diện dòng lệnh của Ionic hoặc ngắn gọn là CLI, được cấu hình đúng.
ionic info | grep "Version"
Đầu ra của lệnh trên sẽ giống như thế này:
Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Node Version: v6.7.0
2. Tạo một dự án mới
CLI của Ionic giúp dễ dàng để bạn có thể tạo mới các dự án Ionic 2 với tất cả các tập tin cấu hình cần thiết và code mẫu. Nó cũng cung cấp một số template khởi đầu để bạn lựa chọn. Bây giờ, hãy cho phép chúng tôi đơn giản là tạo ra một dự án sử dụng template khởi đầu blank.
ionic start MyCameraApp blank --v2 --id com.tutsplus.mycameraapp
Tại thời điểm này, bạn sẽ có một thư mục mới được gọi là MyCameraApp. Trong phần còn lại của hướng dẫn này, chúng ta sẽ làm việc bên trong thư mục này.
cd MyCameraApp
3. Cấu hình dự án
Mặc định, một dự án Ionic 2 không cấu hình để nhắm vào bất kỳ nền tảng điện thoại di động nào. Dưới đây là cách bạn thêm hỗ trợ cho Android:
ionic platform add android
Bạn cũng tự trỏ Ionic 2 đến vị trí mà bạn đã cài đặt Android SDK. Nếu bạn đang sử dụng Mac hoặc Linux, dùng lệnh export để làm điều đó.
export ANDROID_HOME=~/Android/Sdk/
4. Cài đặt các Plugin Ionic
Ứng dụng camera của chúng ta cần truy cập vào camera và tập tin hệ thống của thiết bị, cả hai đều là các nguồn tài nguyên gốc. Nếu bạn đã quen thuộc với Cordova, bạn có thể thấy được ứng dụng lai thường tương tác với các nguồn tài nguyên thông qua các plugin. Mặc dù bạn có thể sử dụng một plugin Cordova trực tiếp trong một dự án Ionic 2, nhưng dễ dàng hơn khi sử dụng wrapper gốc của Ionic 2.
Để truy cập vào camera, chúng ta sẽ sử dụng plugin cordova-plugin-camera-preview. Nó cho phép chúng ta không chỉ chụp ảnh, mà còn có thể áp dụng một số bộ lọc hình ảnh vào chúng. Dưới đây là cách bạn có thể thêm nó vào dự án của bạn:
ionic plugin add cordova-plugin-camera-preview
Chúng ta sẽ, tất nhiên, cần phải lưu những hình ảnh mà chúng ta đã chụp trên bộ nhớ lưu trữ ngoài, chẳng hạn như thẻ SD. Để làm như vậy, chúng ta sẽ sử dụng plugin cordova-plugin-file.
ionic plugin add cordova-plugin-file
Cuối cùng, để hỗ trợ các thiết bị Android chạy API level 23 hoặc cao hơn, chúng ta cần plugin cordova.plugins.diagnostic.
ionic plugin add cordova.plugins.diagnostic
5. Xác định Layout
Giao diện người dùng ứng dụng của chúng ta sẽ bao gồm các thành phần sau:
- một cửa sổ camera preview
- một floating action button để chụp ảnh
- một floating action button để áp dụng các bộ lọc hình ảnh
Chúng ta sẽ lập trình để tạo ra camera preview ở bước sau. Bây giờ, hãy tạo một layout HTML chỉ có chứa hai floating action button.
Vì ứng dụng blank của chúng ta đã có một trang, nên chúng ta sẽ sử dụng nó thay vì tạo ra một cái mới. Để sửa đổi layout của nó, hãy mở src/pages/home/home.html. Xoá hết nội dung của nó và thêm thẻ <ion-content> vào nó.
<ion-content padding> </ion-content>
Để tạo floating action button, bạn có thể tạo ra một nút HTML bình thường và thêm thuộc tính ion-fab vào nó. Ngoài ra, bằng cách gói thẻ <button> bên trong một thẻ <ion-fab>, bạn có thể định vị trí của nó.
Nút floating action button thường có một biểu tượng. Bằng cách sử dụng các thẻ <ion-icon>, bạn có thể thêm bất kỳ Ionicon vào nó.
Theo đó, thêm những thứ sau đây vào tập tin layout:
<ion-fab right top>
<button ion-fab color="secondary" (click)="changeEffect()">
<ion-icon name="md-color-wand"></ion-icon>
</button>
</ion-fab>
<ion-fab right bottom>
<button ion-fab color="primary" (click)="takePicture()">
<ion-icon name="md-camera"></ion-icon>
</button>
</ion-fab>
Như bạn có thể thấy trong code ở trên, chúng ta đã thêm xử lý sự kiện click vào cả hai nút. Chúng ta sẽ định nghĩa chúng sau.
6. Yêu cầu quyền
Trên các thiết bị chạy Android API level 23 hoặc cao hơn, bạn phải yêu cầu người dùng cấp quyền truy cập vào camera và tập tin hệ thống một cách rõ ràng trong lúc chạy. Để làm như vậy trong ứng dụng lai của bạn, bạn có thể sử dụng các phương thức có sẵn trong wrapper gốc Diagnostic của Ionic.
Bắt đầu bằng cách mở src/pages/home/home.ts và nhập Diagnostic.
import { Diagnostic } from 'ionic-native';
Bên trong hàm xây dựng của lớp HomePage, gọi phương thức checkPermissions(). Ngoài ra, thêm một đối tượng ToastController vào lớp bằng cách sử dụng dependency injection. Chúng ta sẽ sử dụng nó để hiển thị toast của Ionic 2, gần như giống hệt với snackbar của Android gốc.
Sau khi thực hiện những thay đổi trên, code của bạn sẽ giống như thế này:
constructor(public navCtrl: NavController,
public toastCtrl: ToastController) {
this.checkPermissions();
}
checkPermissions() {
// More code goes here
}
Bên trong phương thức checkPermissions(), sử dụng phương thức isCameraAuthorized() của lớp Diagnostic để kiểm tra xem ứng dụng đã có quyền truy cập vào camera và hệ thống tập tin hay chưa. Bởi vì phương thức trả về một đối tượng Promise, nên bạn phải sử dụng một callback để xử lý kết quả của nó.
Nếu ứng dụng không có quyền như yêu cầu, bạn có thể sử dụng phương thức requestCameraAuthorization() để yêu cầu chúng.
Nếu người dùng cấp quyền truy cập, hoặc nếu ứng dụng của chúng ta đã có chúng, chúng ta có thể khởi tạo camera view bên trong initializePreview(), một phương thức mà chúng ta sẽ tạo trong bước tiếp theo. Nếu không, hãy đơn giản chỉ hiển thị một toast có chứa một thông báo lỗi bằng cách sử dụng các phương thức create() và present() của các lớp ToastController.
Theo đó, thêm code sau đây vào trong phương thức checkPermissions():
Diagnostic.isCameraAuthorized().then((authorized) => {
if(authorized)
this.initializePreview();
else {
Diagnostic.requestCameraAuthorization().then((status) => {
if(status == Diagnostic.permissionStatus.GRANTED)
this.initializePreview();
else {
// Permissions not granted
// Therefore, create and present toast
this.toastCtrl.create(
{
message: "Cannot access camera",
position: "bottom",
duration: 5000
}
).present();
}
});
}
});
Đây là hộp thoại cấp quyền camera trên thiết bị chạy Android Marshmallow:
7. Tạo Camera Preview
Wrapper CameraPreview của Ionic Native cho phép bạn hiển thị một camera preview bên trong ứng dụng lai của bạn. Tuy nhiên, vì preview sử dụng một Android fragment thay vì một phần tử HTML, nên thêm nó vào trang của chúng ta là khá phức tạp.
Trước khi bạn bắt đầu, đảm bảo rằng bạn import CameraPreview và CameraPreviewRect.
import { CameraPreview, CameraPreviewRect } from 'ionic-native';
Sử dụng một đối tượng CameraPreviewRect, bạn có thể xác định vị trí và kích thước của camera preview. Bây giờ, chúng ta hãy làm cho nó lấp đầy màn hình của điện thoại.
initializePreview() {
// Make the width and height of the preview equal
// to the width and height of the app's window
let previewRect: CameraPreviewRect = {
x: 0,
y: 0,
width: window.innerWidth,
height: window.innerHeight
};
// More code goes here
}
Tại thời điểm này, chúng ta có tất cả mọi thứ mà chúng ta cần để bắt đầu camera preview. Do đó, hãy gọi phương thức startCamera() của lớp CameraPreview và truyền đối tượng CameraPreviewRect vào nó. Bạn phải, tất nhiên, chỉ định camera mà bạn muốn sử dụng. Trong hướng dẫn này, chúng ta sẽ chỉ sử dụng camera phía sau.
// Start preview
CameraPreview.startCamera(
previewRect,
'rear',
false,
false,
true,
1
);
Camera preview sẽ được đặt bên dưới trang HTML của chúng ta, và sẽ không được hiển thị trừ khi chúng ta làm cho nền của ứng dụng của chúng ta trở nên trong suốt. Cách dễ nhất để làm như vậy là thêm quy tắc CSS bên trong tập tin src/app/app.scss.
ion-app, ion-content {
background-color: transparent !important;
}
8. Chụp ảnh
Trong khi xác định layout của trang, chúng ta đã thêm một handler click vào button mà người dùng sẽ nhấn để chụp ảnh. Bây giờ hãy định nghĩa handler.
Chụp ảnh với wrapper CameraPreview của Ionic Native thì đơn giản như gọi phương thức takePicture() và xác định độ phân giải hình ảnh mong muốn. Bây giờ, hãy sử dụng 320 x 320 như là kích thước hình ảnh tối đa của chúng ta.
takePicture() {
CameraPreview.takePicture({maxWidth: 320, maxHeight: 320});
}
Cần lưu ý rằng xác định độ phân giải lớn có thể dẫn đến lỗi chiếm dụng bộ nhớ.
9. Áp dụng các Hiệu ứng hình ảnh
Wrapper CameraPreview cho phép bạn dễ dàng áp dụng một số các hiệu ứng hình ảnh phổ biến, thường được gọi là bộ lọc hình ảnh, cho các hình ảnh của bạn theo thời gian thực. Chúng ta đã đã thêm một handler click vào button mà người dùng sẽ bấm để áp dụng hiệu ứng hình ảnh. Vì vậy, tất cả những gì chúng ta cần làm là định nghĩa nó.
Để giữ cho code của chúng ta đơn giản, mỗi khi người dùng nhấn button, hãy chọn một hiệu ứng ngẫu nhiên từ một loạt các hiệu ứng, và áp dụng nó. Bạn có thể sử dụng hàm JavaScript Math.random() để chọn một hiệu ứng ngẫu nhiên và phương thức setColorEffect() của lớp CameraPreview để áp dụng nó.
changeEffect() {
// Create an array with 5 effects
let effects: any = ['none', 'negative','mono', 'aqua', 'sepia'];
let randomEffect: string = effects[Math.floor(
Math.random() * effects.length)];
CameraPreview.setColorEffect(randomEffect);
}
Bạn có thể chạy ứng dụng ngay bây giờ và nhấp vào FAB nhiều lần để xem hiệu ứng hình ảnh khác nhau được áp dụng cho cửa sổ camera preview.
10. Di chuyển hình ảnh đến bộ nhớ bên ngoài
Ứng dụng của chúng ta lưu tất cả các hình ảnh chụp được bên trong thư mục lưu trữ của ứng dụng, nó là một thư mục dữ liệu riêng tư. Nếu bạn muốn lưu trữ những hình ảnh trên phương tiện lưu trữ bên ngoài, từ đó làm cho chúng sẵn có cho các ứng dụng thư viện ảnh bên thứ ba, bạn phải tự di chuyển chúng. Để làm như vậy, bạn có thể sử dụng wrapper File của Ionic Native.
Như mọi khi, import wrapper trước khi sử dụng nó. Ngoài ra, định nghĩa cordova như là một biến toàn cục khởi tạo bên ngoài. Nó cung cấp các hằng số cho phép bạn dễ dàng tham chiếu đến tất cả các thư mục thường xuyên sử dụng của hệ thống tập tin Android.
import { File } from 'ionic-native';
declare var cordova: any; // global variable for paths
Chúng ta nên di chuyển hình ảnh vào thư mục lưu trữ bên ngoài ngay khi chúng được chụp. Vì vậy, hãy đăng ký phương thức setOnPictureTakenHandler() của lớp CameraPreview. Phương thức này trả về một mảng chứa các đường dẫn tuyệt đối của hình ảnh và hình ảnh thu nhỏ của nó. Bây giờ, chúng ta sẽ chỉ di chuyển hình ảnh.
Theo đó, thêm code sau vào cuối của phương thức initializePreview():
CameraPreview.setOnPictureTakenHandler().subscribe((result) => {
this.moveFileToExternalStorage(result[0]); // Move picture only
});
Bên trong phương thức moveFileToExternalStorage(), chúng ta có thể sử dụng phương thức moveFile() của lớp File để thật sự di chuyển hình ảnh. Phương thức moveFile() nhận thư mục nguồn và đích và tên tập tin như là các đối số của nó.
Để xác định đường dẫn thư mục lưu trữ bên ngoài của ứng dụng, sử dụng hằng cordova.file.externalApplicationStorageDirectory. Tương tự, để xác định đường dẫn thư mục lưu trữ riêng của ứng dụng, sử dụng hằng cordova.file.applicationStorageDirectory.
Ngoài ra, để trích xuất tên của hình ảnh từ đường dẫn tuyệt đối của nó, bạn có thể chỉ cần sử dụng các phương thức JavaScript split() và pop(). Tôi đề nghị bạn đồng thời hiển thị một Toast sau khi hoạt động di chuyển hoàn tất.
moveFileToExternalStorage(fileName: string) {
// Determine paths
let externalStoragePath: string =
cordova.file.externalApplicationStorageDirectory;
let currentPath: string =
cordova.file.applicationStorageDirectory + "files/";
// Extract filename
fileName = fileName.split("/").pop();
// Move the file
File.moveFile(currentPath, fileName,
externalStoragePath, fileName).then(_ => {
this.toastCtrl.create(
{
message: "Saved one photo",
position: "bottom",
duration: 2000
}
).present();
});
}
Ứng dụng camera của chúng ta bây giờ đã hoàn tất. Bạn có thể xem các hình ảnh bằng cách sử dụng bất kỳ ứng dụng thư viện ảnh mà bạn có trên điện thoại của bạn.
Tóm tắt
Trong hướng dẫn này, bạn đã học được cách sử dụng Ionic 2 và các wrapper plugin có sẵn trong Ionic Native để tạo ra một ứng dụng lai có thể chụp ảnh, áp dụng hiệu ứng hình ảnh cho chúng, và lưu trữ chúng trên phương tiện lưu trữ bên ngoài. Mặc dù chúng ta chỉ tập trung trên nền tảng Android trong ngày hôm nay, nhưng bạn có thể yên tâm rằng ứng dụng của chúng ta cũng sẽ làm việc, với những thay đổi tối thiểu, trên các thiết bị iOS.
Để tìm hiểu thêm về Ionic 2, bạn có thể tham khảo tài liệu rộng lớn của nó. Hãy kiểm tra các khóa học về Ionic 2 ở đây trên Envato Tuts+!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
