Bài 01: Developing(Angular)

 

bắt đầu với app ionic cực kỳ đơn giản với lệnh ionic start và cli sẽ xử lý phần còn lại.
Ionic CLI sẽ hiển thị lời nhắc yêu cầu tên của dự án mới và mẫu nào sẽ sử dụng. Các chi tiết này có thể được cung cấp dưới dạng đối số lệnh:

$ ionic start myApp tabs

Đây, myApplà tên của dự án, tabslà mẫu khởi động và là loại dự án angular.
tabskhông phải là mẫu dự án duy nhất có sẵn. Giữa tất cả các loại dự án, có sẵn ba mẫu:
tabs: Bố cục dựa trên tab
sidemenu: Một bố cục dựa trên menu phụ
blank: Một dự án trống với một trang duy nhất
Xem tất cả các mẫu có sẵn bằng lệnh sau:

$ ionic start --list

Chạy cục bộ trong trình duyệt web

Một trong những tính năng mạnh mẽ nhất của Ionic là phần lớn quá trình phát triển ứng dụng của bạn có thể diễn ra ngay trong trình duyệt trên máy tính để bàn của bạn. Với quyền truy cập đầy đủ vào các công cụ phát triển web truyền thống (công cụ dành cho nhà phát triển Chrome / Safari / Firefox), bạn có thể viết mã sau đó kiểm tra / gỡ lỗi nhanh chóng mà không cần phải biên dịch lại hoặc triển khai tới trình mô phỏng hoặc thiết bị.

Để làm như vậy, hãy chạy ionic servetừ dòng lệnh trong thư mục của dự án:

$ khởi đầu ion

ng chạy ứng dụng: serve --host = 0.0.0.0 --port = 8100 INFO ] Máy 

chủ phát triển đang chạy! Địa phương: Bên ngoài: [ > [

Vui lòng nhập tên đầy đủ của ứng dụng của bạn. Bạn có thể thay đổi 

bất cứ lúc nào. Để bỏ qua lời nhắc này vào lần tiếp theo,tên nguồn 

cung cấp , đối số đầu tiên để bắt đầu ion .

? Tên dự án:] Cửa sổ trình duyệt được mở thành Mọi ứng dụng tuyệt 

vời đều cần một cái tên! 😍

Ionic CLI sẽ hiển thị lời nhắc yêu cầu tên của dự án mới và mẫu nào sẽ sử dụng. Các chi tiết này có thể được cung cấp dưới dạng đối số lệnh:ionic serveđang chạy, tiếp tục phát triển ứng dụng của bạn. Khi bạn lưu các thay đổi, ứng dụng sẽ tải lại với những thay đổi đó được áp dụng.

Các mẫu này cung cấp một điểm khởi đầu tuyệt vời cho bất kỳ ứng dụng nào và bao gồm tất cả các phương pháp hay nhất để tạo thang cơ sở mã.Platform Detection Khi bạn đã sẵn sàng thử nghiệm trên một thiết bị thực, hãy xem tại đây iOS và Android.

Tải xuống các công cụ cần thiết

Tải xuống và cài đặt ngay những thứ này để đảm bảo trải nghiệm phát triển Ionic tối ưu:
Node.js để tương tác với hệ sinh thái Ionic. Tải xuống phiên bản LTS tại đây .
Một trình soạn thảo mã để ... viết mã! Chúng tôi là người hâm mộ của Visual Studio Code .

Giao diện / thiết bị đầu cuối dòng lệnh (CLI) :

Người dùng Windows : để có trải nghiệm Ionic tốt nhất, chúng tôi khuyên bạn nên sử dụng dòng lệnh tích hợp sẵn (cmd) hoặc Powershell CLI, chạy ở chế độ Quản trị viên.
Người dùng Mac / Linux , hầu như mọi thiết bị đầu cuối đều hoạt động.
Cài đặt ionic tooling
Chạy lệnh sau trong dòng lệnh để cài đặt Ionic CLI ( ionic), native-runđược sử dụng để chạy các tệp nhị phân gốc trên thiết bị và trình mô phỏng / trình giả lập, và cordova-resđược sử dụng để tạo biểu tượng ứng dụng gốc và màn hình giật gân:
Để mở một thiết bị đầu cuối trong Visual Studio Code, hãy đi tới Thiết bị đầu cuối -> Thiết bị đầu cuối mới.

$ npm install -g @ionic/cli native-run cordova-res

Tạo ứng dụng

Tiếp theo, tạo ứng dụng Ionic Angular sử dụng mẫu khởi động "Tab" và thêm Tụ điện cho chức năng gốc:

$ ionic start photo-gallery tabs --type=angular --capacitor

Dự án khởi động này hoàn chỉnh với ba trang được tạo sẵn và các phương pháp hay nhất để phát triển Ionic. Với các khối xây dựng chung đã có sẵn, chúng tôi có thể thêm nhiều tính năng hơn một cách dễ dàng!
Tiếp theo, thay đổi vào thư mục ứng dụng:

$ cd photo-gallery

PWA Element

Một số plugin, bao gồm API Camera, cung cấp giao diện người dùng và chức năng dựa trên web thông qua Thư viện Ionic PWA Element .

Đó là một phần phụ thuộc riêng biệt, vì vậy hãy cài đặt nó tiếp theo:

$ npm install @ionic/pwa-elements

Tiếp theo, nhập @ionic/pwa-elements bằng cách chỉnh sửa src/main.ts.

import { defineCustomElements } from '@ionic/pwa-elements/loader';

 

// Call the element loader after the platform has been bootstrapped

defineCustomElements(window);Đã sao chépĐó là nó! Bây giờ đến phần thú vị - chúng ta hãy xem ứng dụng hoạt động.

Chạy Ứng Dụng

Chạy lệnh này tiếp theo:

$ ionic serve

Và  Ứng dụng Ionic của bạn hiện đang chạy trong trình duyệt web. Hầu hết ứng dụng của bạn có thể được xây dựng và thử nghiệm ngay trong trình duyệt, giúp tăng tốc độ phát triển và thử nghiệm lên đáng kể.

Thư Viện Ảnh

Có ba tab. Nhấp vào tab Tab2. Đó là một canvas trống, hay còn gọi là vị trí hoàn hảo để biến thành Thư viện ảnh. Ionic CLI có tính năng Tải lại trực tiếp, vì vậy khi bạn thực hiện các thay đổi và lưu chúng, ứng dụng được cập nhật ngay lập tức!

Mở thư mục ứng dụng thư viện ảnh trong trình chỉnh sửa mã bạn chọn, sau đó điều hướng đến /src/app/tab2/tab2.page.html. Chúng tôi thấy:

<ion-header>

 <ion-toolbar>

    <ion-title>Tab 2</ion-title>

 </ion-toolbar>

</ion-header>

 

<ion-content>

 <ion-header collapse="condense">

    <ion-toolbar>

      <ion-title size="large">Tab 2</ion-title>

    </ion-toolbar>

 </ion-header>

</ion-content>

ion-header đại diện cho điều hướng và thanh công cụ trên cùng, với "Tab 2" làm tiêu đề. Đổi tên cả hai ion-titlephần tử thành:

<ion-title>Photo Gallery</ion-title>

Chúng tôi đưa các khía cạnh trực quan của ứng dụng vào <ion-content>. Trong trường hợp này, đó là nơi chúng tôi sẽ thêm một nút để mở máy ảnh của thiết bị cũng như hiển thị hình ảnh do máy ảnh chụp. Bắt đầu bằng cách thêm  (FAB) vào cuối trang và đặt hình ảnh máy ảnh làm biểu tượng.

Sao chépĐã sao chépTiếp theo, mở src/app/tabs/tabs.page.html. Thay đổi nhãn thành “Ảnh” và tên biểu tượng thành “hình ảnh”:

<ion-content>

<ion-fab vertical="bottom" horizontal="center" slot="fixed">

 

    <ion-fab-button>

      <ion-icon name="camera"></ion-icon>

    </ion-fab-button>

 </ion-fab>

</ion-content>

Lưu tất cả các thay đổi để xem chúng được áp dụng tự động trong trình duyệt. Đó chỉ là sự khởi đầu của tất cả những điều thú vị mà chúng ta có thể làm với Ionic. Tiếp theo, triển khai chức năng chụp ảnh bằng máy ảnh trên web, sau đó xây dựng nó cho iOS và Android.
 Tiếp theo, mở src/app/tabs/tabs.page.html. Thay đổi nhãn thành “Ảnh” và tên biểu tượng thành “hình ảnh”:

<ion-tab-button tab="tab2">

  <ion-icon name="images"></ion-icon>

  <ion-label>Photos</ion-label>

</ion-tab-button>

Lưu tất cả các thay đổi để xem chúng được áp dụng tự động trong trình duyệt. Đó chỉ là sự khởi đầu của tất cả những điều thú vị mà chúng ta có thể làm với Ionic. Tiếp theo, triển khai chức năng chụp ảnh bằng máy ảnh trên web, sau đó xây dựng nó cho iOS và Android.

Dịch  Vụ ảnh

Tất cả logic của tụ điện (Sử dụng máy ảnh và các tính năng gốc khác) sẽ được gói gọn trong một lớp dịch vụ. Tạo PhotoServicebằng ionic generatelệnh:

$ ionic g service services/photo

Mở services/photo.service.tstệp mới và thêm logic sẽ cung cấp chức năng máy ảnh. Đầu tiên, nhập các phần phụ thuộc của Tụ điện và nhận tham chiếu đến các plugin Máy ảnh, Hệ thống tệp và Bộ nhớ:

import { Plugins, CameraResultType, Capacitor, FilesystemDirectory,

  CameraPhoto, CameraSource } from '@capacitor/core';

const { Camera, Filesystem, Storage } = Plugins;

Tiếp theo, xác định một phương thức lớp mới, phương thức addNewToGallerynày sẽ chứa logic cốt lõi để chụp ảnh thiết bị và lưu nó vào hệ thống tệp. Hãy bắt đầu bằng cách mở camera của thiết bị:

public async addNewToGallery() {

  // Take a photo

  const capturedPhoto = await Camera.getPhoto({

    resultType: CameraResultType.Uri,

    source: CameraSource.Camera,

    quality: 100

  });

}

Lưu ý điều kỳ diệu ở đây: không có mã dành riêng cho nền tảng (web, iOS hoặc Android)! Plugin Capacitor Camera sẽ tóm tắt điều đó cho chúng tôi, chỉ để lại một lệnh gọi phương thức - Camera.getPhoto()- sẽ mở máy ảnh của thiết bị và cho phép chúng tôi chụp ảnh.
Tiếp theo, mở tab2.page.tsvà nhập lớp PhotoService và thêm một phương thức gọi addNewToGalleryphương thức trên servce đã nhập:

import { PhotoService } from '../services/photo.service';

 

constructor(public photoService: PhotoService) { }

 

addPhotoToGallery() {

  this.photoService.addNewToGallery();

}

Sau đó, mở tab2.page.htmlvà gọi addPhotoToGallery()hàm khi FAB được khai thác / nhấp vào:

<ion-content>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">

    <ion-fab-button (click)="addPhotoToGallery()">

      <ion-icon name="camera"></ion-icon>

    </ion-fab-button>

  </ion-fab>

</ion-content>

Lưu tệp và nếu nó chưa chạy, hãy khởi động lại máy chủ phát triển trong trình duyệt của bạn bằng cách chạy ionic serve. Trên tab Thư viện ảnh, nhấp vào nút Máy ảnh. Nếu máy tính của bạn có bất kỳ loại webcam nào, một cửa sổ phương thức sẽ xuất hiện. Chụp ảnh tự sướng!
Sau khi chụp ảnh, nó sẽ biến mất ngay lập tức. Chúng tôi cần hiển thị nó trong ứng dụng của mình và lưu nó để truy cập trong tương lai.

Hiển thị ảnh

Bên ngoài PhotoServiceđịnh nghĩa lớp (ở cuối tệp), hãy tạo một giao diện mới Photo, để giữ siêu dữ liệu ảnh của chúng tôi:

export interface Photo {

  filepath: string;

  webviewPath: string;

}

Quay lại đầu tệp, xác định một mảng Ảnh, mảng này sẽ chứa tham chiếu đến từng ảnh được chụp bằng Máy ảnh.

export class PhotoService {

  public photos: Photo[] = [];

 

  // other code

}

Trong addNewToGallerychức năng này, hãy thêm ảnh mới chụp vào đầu mảng Ảnh.

const capturedPhoto = await Camera.getPhoto({

  resultType: CameraResultType.Uri,

  source: CameraSource.Camera,

  quality: 100

});

this.photos.unshift({

  filepath: "soon...",

  webviewPath: capturedPhoto.webPath

});

}

Tiếp theo, di chuyển đến tab2.page.htmlđể chúng tôi có thể hiển thị hình ảnh trên màn hình. Thêm Lưới để mỗi ảnh sẽ hiển thị đẹp khi ảnh được thêm vào thư viện và lặp lại từng ảnh trong PhotoServicesmảng Ảnh của, thêm một thành phần Ảnh ( <ion-img>) cho mỗi ảnh. Trỏ src(nguồn) vào đường dẫn của ảnh:

<ion-content>

  <ion-grid>

    <ion-row>

    <ion-col size="6"

      *ngFor="let photo of photoService.photos; index as position">

        <ion-img [src]="photo.webviewPath"></ion-img>

    </ion-col>

    </ion-row>

  </ion-grid>

 

  <!-- ion-fab markup  -->

</ion-content>

Lưu tất cả các tệp. Trong trình duyệt web, nhấp vào nút Máy ảnh và chụp một ảnh khác. Lần này, ảnh được hiển thị trong Thư viện ảnh!
Tiếp theo, chúng tôi sẽ bổ sung hỗ trợ lưu ảnh vào hệ thống tệp để chúng có thể được truy xuất và hiển thị trong ứng dụng của chúng tôi sau này.

Lưu ảnh vào hệ thống tệp

Giờ đây, chúng tôi có thể chụp nhiều ảnh và hiển thị chúng trong thư viện ảnh trên tab thứ hai của ứng dụng. Tuy nhiên, những bức ảnh này hiện không được lưu trữ vĩnh viễn, vì vậy khi ứng dụng đóng lại, chúng sẽ bị xóa.

API Hệ thống tệp

May mắn thay, việc lưu chúng vào hệ thống tập tin chỉ mất một vài bước. Bắt đầu bằng cách tạo một phương thức lớp mới savePicture(), trong PhotoServicelớp ( src/app/services/photo.service.ts). Chúng tôi truyền vào cameraPhotođối tượng, đại diện cho ảnh thiết bị mới được chụp:

private async savePicture(cameraPhoto: CameraPhoto) { }

Chúng tôi có thể sử dụng phương pháp mới này ngay lập tức trong addNewToGallery():

public async addNewToGallery() {

  // Take a photo

  const capturedPhoto = await Camera.getPhoto({

    resultType: CameraResultType.Uri, // file-based data; provides best performance

    source: CameraSource.Camera, // automatically take a new photo with the camera

    quality: 100 // highest quality (0 to 100)

  });

 

  // Save the picture and add it to photo collection

  const savedImageFile = await this.savePicture(capturedPhoto);

  this.photos.unshift(savedImageFile);

}

Chúng tôi sẽ sử dụng API hệ thống tệp của tụ điện để lưu ảnh vào hệ thống tệp. Để bắt đầu, hãy chuyển đổi ảnh sang định dạng base64, sau đó cung cấp dữ liệu vào writeFilechức năng của Hệ thống tập tin . Như bạn sẽ nhớ lại, chúng tôi hiển thị từng ảnh trên màn hình bằng cách đặt đường dẫn nguồn của mỗi ảnh ( srcthuộc tính) vào thuộc tính tab2.page.htmlwebviewPath. Vì vậy, hãy thiết lập nó rồi trả về đối tượng Photo mới.

private async savePicture(cameraPhoto: CameraPhoto) {

  // Convert photo to base64 format, required by Filesystem API to save

  const base64Data = await this.readAsBase64(cameraPhoto);

 

  // Write the file to the data directory

  const fileName = new Date().getTime() + '.jpeg';

  const savedFile = await Filesystem.writeFile({

    path: fileName,

    data: base64Data,

    directory: FilesystemDirectory.Data

  });

 

  // Use webPath to display the new image instead of base64 since it's

  // already loaded into memory

  return {

    filepath: fileName,

    webviewPath: cameraPhoto.webPath

  };

}

readAsBase64()là một chức năng trợ giúp mà chúng tôi sẽ xác định tiếp theo. Sẽ rất hữu ích khi tổ chức thông qua một phương pháp riêng biệt vì nó yêu cầu một lượng nhỏ logic dành riêng cho nền tảng (web so với thiết bị di động) - hơn thế nữa một chút. Hiện tại, hãy triển khai logic để chạy trên web:

private async readAsBase64(cameraPhoto: CameraPhoto) {

  // Fetch the photo, read as a blob, then convert to base64 format

  const response = await fetch(cameraPhoto.webPath!);

  const blob = await response.blob();

 

  return await this.convertBlobToBase64(blob) as string; 

}

 

convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {

  const reader = new FileReader;

  reader.onerror = reject;

  reader.onload = () => {

      resolve(reader.result);

  };

  reader.readAsDataURL(blob);

});

Lấy ảnh máy ảnh ở định dạng base64 trên web có vẻ phức tạp hơn một chút so với trên thiết bị di động. Trên thực tế, chúng tôi chỉ đang sử dụng các API web tích hợp sẵn: fetch () như một cách đơn giản để đọc tệp sang định dạng blob, sau đó là readAsDataURL () của FileReader để chuyển đổi ảnh blob thành base64.
Bắt đầu! Mỗi khi một bức ảnh mới được chụp, ảnh sẽ tự động được lưu vào hệ thống tệp.
 

Tải ảnh từ hệ thống tệp

Storage API 

Chúng tôi đã triển khai tính năng chụp ảnh và lưu vào hệ thống tệp. Còn thiếu một chức năng cuối cùng: ảnh được lưu trữ trong hệ thống tệp, nhưng chúng tôi cần một cách để lưu con trỏ đến từng tệp để chúng có thể được hiển thị lại trong thư viện ảnh.

May mắn thay, điều này rất dễ dàng: chúng tôi sẽ tận dụng  tụ điện để lưu trữ mảng Ảnh của chúng tôi trong kho khóa-giá trị.

Bắt đầu bằng cách xác định một biến hằng số sẽ hoạt động như một khóa cho cửa hàng:

export class PhotoService {

  public photos: Photo[] = [];

  private PHOTO_STORAGE: string = "photos";

 

  // other code

}

Tiếp theo, ở cuối addNewToGalleryhàm, hãy thêm lệnh gọi đến Storage.set()để lưu mảng Ảnh. Bằng cách thêm nó vào đây, mảng Ảnh được lưu trữ mỗi khi chụp ảnh mới. Bằng cách này, không thành vấn đề khi người dùng ứng dụng đóng hoặc chuyển sang một ứng dụng khác - tất cả dữ liệu ảnh đều được lưu.

Storage.set({

  key: this.PHOTO_STORAGE,

  value: JSON.stringify(this.photos)

});

Với dữ liệu mảng ảnh đã được lưu, hãy tạo một hàm được gọi là loadSaved()có thể truy xuất dữ liệu đó. Chúng tôi sử dụng cùng một khóa để truy xuất mảng ảnh ở định dạng JSON, sau đó phân tích cú pháp nó thành một mảng:

public async loadSaved() {

  // Retrieve cached photo array data

  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });

  this.photos = JSON.parse(photoList.value) || [];

 

  // more to come...

}                                

Trên thiết bị di động (sắp tới!), Chúng tôi có thể đặt trực tiếp nguồn thẻ hình ảnh - <img src="x" />- cho mỗi tệp ảnh trên Hệ thống tệp, hiển thị chúng tự động. Tuy nhiên, trên web, chúng ta phải đọc từng hình ảnh từ Hệ thống tập tin ở định dạng base64, sử dụng thuộc tính mới base64trên Photođối tượng. Điều này là do API hệ thống tệp sử dụng IndexedDB bên dưới. Dưới đây là mã bạn cần thêm vào loadSaved()chức năng bạn vừa thêm:

// Display the photo by reading into base64 format

for (let photo of this.photos{

  // Read each saved photo's data from the Filesystem

  const readFile = await Filesystem.readFile({

      path: photo.filepath,

      directory: FilesystemDirectory.Data

  });

 

  // Web platform only: Load the photo as base64 data

  photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;

}

Sau đó, gọi phương thức mới này vào tab2.page.tsđể khi người dùng lần đầu tiên điều hướng đến Tab 2 (Thư viện ảnh), tất cả ảnh sẽ được tải và hiển thị trên màn hình.

async ngOnInit() {

  await this.photoService.loadSaved();

}

Đó là nó! Chúng tôi đã xây dựng tính năng Thư viện ảnh hoàn chỉnh trong ứng dụng Ionic hoạt động trên web. Tiếp theo, chúng tôi sẽ chuyển đổi nó thành một ứng dụng di động cho iOS và Android!

 Adding Mobile

Import Platform API

Hãy bắt đầu với việc thực hiện một số thay đổi mã nhỏ - sau đó ứng dụng của chúng tôi sẽ "chỉ hoạt động" khi chúng tôi triển khai nó cho một thiết bị.
Nhập Platform API Ionic vào photo.service.ts, được sử dụng để truy xuất thông tin về thiết bị hiện tại. Trong trường hợp này, rất hữu ích để chọn mã nào sẽ thực thi dựa trên nền tảng mà ứng dụng đang chạy (web hoặc thiết bị di động):

import { Platform } from '@ionic/angular';

 

export class PhotoService {

  public photos: Photo[] = [];

  private PHOTO_STORAGE: string = "photos";

  private platform: Platform;

 

  constructor(platform: Platform) {

    this.platform = platform;

  }

 

  // other code

}

Platform-specific logic

Đầu tiên, chúng tôi sẽ cập nhật chức năng lưu ảnh để hỗ trợ thiết bị di động. Trong readAsBase64()chức năng, hãy kiểm tra xem ứng dụng đang chạy trên nền tảng nào. Nếu đó là "hỗn hợp" (Tụ điện hoặc Cordova, hai thời gian chạy riêng), thì hãy đọc tệp ảnh ở định dạng base64 bằng readFile()phương pháp Hệ thống tệp . Nếu không, hãy sử dụng logic tương tự như trước đây khi chạy ứng dụng trên web:

private async readAsBase64(cameraPhoto: CameraPhoto) {

  // "hybrid" will detect Cordova or Capacitor

  if (this.platform.is('hybrid')) {

    // Read the file into base64 format

    const file = await Filesystem.readFile({

      path: cameraPhoto.path

    });

 

    return file.data;

  }

  else {

    // Fetch the photo, read as a blob, then convert to base64 format

    const response = await fetch(cameraPhoto.webPath);

    const blob = await response.blob();

 

    return await this.convertBlobToBase64(blob) as string;

  }

}

Tiếp theo, cập nhật savePicture()phương thức. Khi chạy trên thiết bị di động, hãy đặt thành filepathkết quả của writeFile()thao tác - savedFile.uri. Khi thiết lập webviewPath, hãy sử dụng Capacitor.convertFileSrc()phương pháp đặc biệt.

// Save picture to file on device

private async savePicture(cameraPhoto: CameraPhoto) {

  // Convert photo to base64 format, required by Filesystem API to save

  const base64Data = await this.readAsBase64(cameraPhoto);

  // Write the file to the data directory

  const fileName = new Date().getTime() + '.jpeg';

  const savedFile = await Filesystem.writeFile({

    path: fileName,

    data: base64Data,

    directory: FilesystemDirectory.Data

  });

  if (this.platform.is('hybrid')) {

    // Display the new image by rewriting the 'file://' path to HTTP

    // Details: https://ionicframework.com/docs/building/webview#file-protocol

    return {

      filepath: savedFile.uri,

      webviewPath: Capacitor.convertFileSrc(savedFile.uri),

    };

  }

  else {

    // Use webPath to display the new image instead of base64 since it's

    // already loaded into memory

    return {

      filepath: fileName,

      webviewPath: cameraPhoto.webPath

    };

  }

}

Tiếp theo, quay lại loadSaved()chức năng mà chúng tôi đã triển khai cho web trước đó. Trên thiết bị di động, chúng tôi có thể đặt trực tiếp nguồn thẻ ảnh - <img src="x" />- cho mỗi tệp ảnh trên Hệ thống tệp, hiển thị chúng tự động. Do đó, chỉ có web yêu cầu đọc từng hình ảnh từ Hệ thống tập tin sang định dạng base64. Cập nhật chức năng này để thêm câu lệnh if xung quanh mã Hệ thống tệp:

public async loadSaved() {

  // Retrieve cached photo array data

  const photoList = await Storage.get({ key: this.PHOTO_STORAGE });

  this.photos = JSON.parse(photoList.value) || [];

 

  // Easiest way to detect when running on the web:

  // “when the platform is NOT hybrid, do this”

  if (!this.platform.is('hybrid')) {

    // Display the photo by reading into base64 format

    for (let photo of this.photos) {

      // Read each saved photo's data from the Filesystem

      const readFile = await Filesystem.readFile({

          path: photo.filepath,

          directory: FilesystemDirectory.Data

      });

 

      // Web platform only: Load the photo as base64 data

      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;

    }

  }

}

Thư viện ảnh của chúng tôi hiện bao gồm một cơ sở mã chạy trên web, Android và iOS. Tiếp theo, phần bạn đã chờ đợi - triển khai ứng dụng cho một thiết bị.
 

Capacitor Setup

Tụ điện là thời gian chạy ứng dụng chính thức của Ionic giúp dễ dàng triển khai các ứng dụng web cho các nền tảng gốc như iOS, Android, v.v. Nếu bạn đã sử dụng Cordova trong quá khứ, hãy xem xét đọc thêm về sự khác biệt .
Nếu bạn vẫn đang chạy ionic servetrong thiết bị đầu cuối, hãy hủy nó. Hoàn thành bản dựng mới của dự án Ionic của bạn, sửa bất kỳ lỗi nào mà nó báo cáo:

$ ionic build

Tiếp theo, tạo cả dự án iOS và Android:

$ ionic cap add ios

$ ionic cap add android

Cả hai thư mục android và ios ở thư mục gốc của dự án đều được tạo. Đây là những dự án gốc hoàn toàn độc lập nên được coi là một phần của ứng dụng Ionic của bạn (tức là, kiểm tra chúng trong kiểm soát nguồn, chỉnh sửa chúng bằng công cụ gốc của chúng, v.v.).
Mỗi khi bạn thực hiện một bản dựng (ví dụ ionic build) cập nhật thư mục web của mình (mặc định www:), bạn sẽ cần sao chép những thay đổi đó vào các dự án gốc của mình:

$ ionic cap copy

Lưu ý: Sau khi cập nhật phần gốc của mã (chẳng hạn như thêm một plugin mới), hãy sử dụng sync lệnh:

$ ionic cap sync

Chạy trên IOS

Các ứng dụng iOS của tụ điện được định cấu hình và quản lý thông qua Xcode (IDE iOS / Mac của Apple), với các phần phụ thuộc được quản lý bởi CocoaPods . Trước khi chạy ứng dụng này trên thiết bị iOS, cần hoàn thành một số bước.

Đầu tiên, hãy chạy openlệnh Capacitor , lệnh này sẽ mở dự án iOS gốc trong Xcode:

$ ionic cap open ios

Để một số plugin gốc hoạt động, các quyền của người dùng phải được định cấu hình. Trong ứng dụng thư viện ảnh của chúng tôi, điều này bao gồm plugin Máy ảnh: iOS tự động hiển thị hộp thoại phương thức sau lần đầu tiên Camera.getPhoto()được gọi, nhắc người dùng cho phép ứng dụng sử dụng Máy ảnh. Quyền thúc đẩy điều này được gắn nhãn “Quyền riêng tư - Sử dụng máy ảnh”. Để thiết lập nó, Info.plisttệp phải được sửa đổi. Để truy cập nó, hãy nhấp vào "Thông tin", sau đó mở rộng "Thuộc tính mục tiêu iOS tùy chỉnh".

Mỗi cài đặt trong Info.plistcó tên thông số cấp thấp và tên cấp cao. Theo mặc định, trình chỉnh sửa danh sách thuộc tính hiển thị tên cấp cao, nhưng thường hữu ích khi chuyển sang hiển thị tên thô, cấp thấp. Để thực hiện việc này, hãy nhấp chuột phải vào bất kỳ vị trí nào trong trình chỉnh sửa danh sách thuộc tính và chuyển đổi "Khóa / Giá trị thô".

Xác định vị trí NSCameraUsageDescriptionKhóa (nó sẽ tồn tại nếu bạn làm theo hướng dẫn này) và đặt Giá trị thành một thứ mô tả lý do tại sao ứng dụng cần sử dụng máy ảnh, chẳng hạn như "Để Chụp ảnh". Trường Giá trị được hiển thị cho người dùng ứng dụng khi lời nhắc cấp quyền mở ra.

Tiếp theo, nhấp vào AppBộ điều hướng dự án ở phía bên trái, sau đó trong Signing & Capabilitiesphần này, chọn Nhóm phát triển của bạn.

Với quyền tại chỗ và Nhóm phát triển được chọn, chúng tôi đã sẵn sàng dùng thử ứng dụng trên thiết bị thực! Kết nối thiết bị iOS với máy tính Mac của bạn, chọn nó ( App -> Matthew’s iPhoneđối với tôi), sau đó nhấp vào nút "Build" để xây dựng, cài đặt và khởi chạy ứng dụng trên thiết bị của bạn:

Khi nhấn vào nút Máy ảnh trên tab Thư viện ảnh, lời nhắc cấp quyền sẽ hiển thị. Nhấn OK, sau đó chụp ảnh bằng Máy ảnh. Sau đó, ảnh hiển thị trong ứng dụng!

Triển khai android

^{Các ứng dụng Android tụ điện được định cấu hình và quản lý thông qua Android Studio. Trước khi chạy ứng dụng này trên thiết bị Android, cần hoàn thành một số bước.}

^{Đầu tiên, hãy chạy openlệnh Capacitor , lệnh này sẽ mở dự án Android gốc trong Android Studio:}

$ ionic cap open android

^{Tương tự như iOS, chúng ta phải bật các quyền chính xác để sử dụng Camera. Định cấu hình những thứ này trong AndroidManifest.xmltệp. Android Studio có thể sẽ tự động mở tệp này, nhưng trong trường hợp không mở được, hãy định vị tệp đó bên dưới android/app/src/main/.}

^{Cuộn đến Permissionsphần và đảm bảo các mục này được bao gồm:}

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />Sao chépĐã sao chép

^{Lưu các tập tin. Với các quyền được áp dụng, chúng tôi đã sẵn sàng dùng thử ứng dụng trên một thiết bị thực! Kết nối thiết bị Android với máy tính của bạn. Trong Android Studio, nhấp vào nút "Chạy", chọn thiết bị Android được đính kèm, sau đó nhấp vào OK để xây dựng, cài đặt và khởi chạy ứng dụng trên thiết bị của bạn.}

Một lần nữa, khi nhấn vào nút Máy ảnh trên tab Thư viện ảnh, lời nhắc cấp quyền sẽ được hiển thị. Nhấn OK, sau đó chụp ảnh bằng Máy ảnh. Sau đó, ảnh sẽ xuất hiện trong ứng dụng.

^{Ứng dụng Thư viện ảnh của chúng tôi vừa được triển khai cho các thiết bị Android và iOS. 🎉}

^{Trong phần cuối cùng của hướng dẫn này, chúng tôi sẽ sử dụng chức năng Tải lại Trực tiếp của Ionic CLI để nhanh chóng thực hiện xóa ảnh - do đó hoàn thành tính năng Thư viện ảnh của chúng tôi.}

 ^{Deleting Photos}

Nếu bạn vẫn đang chạy ionic servetrong thiết bị đầu cuối, hãy hủy nó. Hoàn thành bản dựng mới của dự án Ionic của bạn, sửa bất kỳ lỗi nào mà nó báo cáo:
Tiếp theo, tạo cả dự án iOS và Android:
Cả hai thư mục android và ios ở thư mục gốc của dự án đều được tạo. Đây là những dự án gốc hoàn toàn độc lập nên được coi là một phần của ứng dụng Ionic của bạn (tức là, kiểm tra chúng trong kiểm soát nguồn, chỉnh sửa chúng bằng công cụ gốc của chúng, v.v.).

$ ionic cap run ios -l --external

$ ionic cap run android -l --external

Xóa ảnh

Đầu tiên, hãy chạy tab2.page.htmllệnh Capacitor , lệnh này sẽ mở dự án Android gốc trong Android Studio:<ion-img>thành phần. Khi người dùng ứng dụng chạm vào ảnh trong thư viện của chúng tôi, chúng tôi sẽ hiển thị hộp thoại hành động với tùy chọn xóa ảnh đã chọn hoặc hủy (đóng) hộp thoại.

<ion-col size="6"

    *ngFor="let photo of photoService.photos; index as position">

  <ion-img [src]="photo.webviewPath"

           (click)="showActionSheet(photo, position)"></ion-img>

</ion-col>

Tương tự như iOS, chúng ta phải bật các quyền chính xác để sử dụng Camera. Định cấu hình những thứ này trong tab2.page.tstệp. Android Studio có thể sẽ tự động mở tệp này, nhưng trong trường hợp không mở được, hãy định vị tệp đó bên dưới .

import { ActionSheetController } from '@ionic/angular';

 

constructor(public photoService: PhotoService,

            public actionSheetController: ActionSheetController) {}

Thêm vào Photo câu lệnh nhập.

import { Photo, PhotoService } from '../services/photo.service';

Cuộn đến showActionSheet()phần và đảm bảo các mục này được bao gồm:Deleteđiều đó gọi deletePicture()chức năng của PhotoService (sẽ được thêm vào tiếp theo) và Cancelkhi được giao vai trò “hủy bỏ” sẽ tự động đóng trang hành động:

public async showActionSheet(photo: Photo, position: number) {

  const actionSheet = await this.actionSheetController.create({

    header: 'Photos',

    buttons: [{

      text: 'Delete',

      role: 'destructive',

      icon: 'trash',

      handler: () => {

        this.photoService.deletePicture(photo, position);

      }

    }, {

      text: 'Cancel',

      icon: 'close',

      role: 'cancel',

      handler: () => {

        // Nothing to do, action sheet is automatically closed

        }

    }]

  });

  await actionSheet.present();

}

Lưu các tập tin. Với các quyền được áp dụng, chúng tôi đã sẵn sàng dùng thử ứng dụng trên một thiết bị thực! Kết nối thiết bị Android với máy tính của bạn. Trong Android Studio, nhấp vào nút "Chạy", chọn thiết bị Android được đính kèm, sau đó nhấp vào OK để xây dựng, cài đặt và khởi chạy ứng dụng trên thiết bị của bạn.
Trong src/app/services/photo.service.ts, thêm deletePicture()chức năng:

public async deletePicture(photo: Photo, position: number) {

  // Remove this photo from the Photos reference data array

  this.photos.splice(position, 1);

 

  // Update photos array cache by overwriting the existing photo array

  Storage.set({

    key: this.PHOTO_STORAGE,

    value: JSON.stringify(this.photos)

  });

 

  // delete photo file from filesystem

  const filename = photo.filepath

                      .substr(photo.filepath.lastIndexOf('/') + 1);

 

  await Filesystem.deleteFile({

    path: filename,

    directory: FilesystemDirectory.Data

  });

}

Một lần nữa, khi nhấn vào nút Máy ảnh trên tab Thư viện ảnh, lời nhắc cấp quyền sẽ được hiển thị. Nhấn OK, sau đó chụp ảnh bằng Máy ảnh. Sau đó, ảnh sẽ xuất hiện trong ứng dụng.
Lưu tệp này, sau đó nhấn lại vào ảnh và chọn tùy chọn “Xóa”. Lần này, bức ảnh đã bị xóa! Thực hiện nhanh hơn nhiều bằng cách sử dụng Tải lại trực tiếp. 💪

Capacitor setup

Ứng dụng Thư viện ảnh của chúng tôi vừa được triển khai cho các thiết bị Android và iOS. 🎉Thành phần giao diện người dùng ion cho ứng dụng hoặc nhiều chức năng gốc hơn . Bầu trời là giới hạn.
Trong phần cuối cùng của hướng dẫn này, chúng tôi sẽ sử dụng chức năng Tải lại Trực tiếp của Ionic CLI để nhanh chóng thực hiện xóa ảnh - do đó hoàn thành tính năng Thư viện ảnh của chúng tôi.