使用即時重載進行快速應用程式開發

到目前為止，我們已經了解開發一個可在任何地方運作的跨平台應用程式是多麼容易。開發體驗非常快速，但如果我告訴您有方法可以更快呢？

我們可以使用 Ionic CLI 的即時重載功能來提高我們在建置 Ionic 應用程式時的生產力。當啟用時，即時重載會在偵測到應用程式中的變更時重新載入瀏覽器和/或 WebView。

即時重載

還記得 ionic serve 嗎？那就是即時重載在瀏覽器中運作，讓我們可以快速迭代。

我們也可以在 iOS 和 Android 裝置上進行開發時使用它。這在編寫與原生外掛程式互動的程式碼時特別有用。由於我們需要在裝置上執行原生外掛程式碼才能驗證它是否運作，因此擁有一種可以快速編寫程式碼、建置和部署程式碼，然後測試它的方法對於保持我們的開發速度至關重要。

讓我們使用即時重載來實作照片刪除，這是我們照片庫功能中缺失的部分。選擇您偏好的平台（iOS 或 Android），並將裝置連接到您的電腦。接下來，根據您選擇的平台，在終端機中執行任一命令

$ ionic cap run ios -l --external

$ ionic cap run android -l --external

即時重載伺服器將會啟動，如果尚未開啟，則會開啟選擇的原生 IDE。在 IDE 中，按一下「播放」按鈕，將應用程式啟動到您的裝置上。

刪除照片

在即時重載執行且應用程式在您的裝置上開啟的情況下，讓我們實作照片刪除功能。開啟 Tab2Page.vue，然後匯入 actionSheetController。我們將顯示一個 IonActionSheet，其中包含刪除照片的選項

import {
  actionSheetController,
  IonPage,
  IonHeader,
  IonFab,
  IonFabButton,
  IonIcon,
  IonToolbar,
  IonTitle,
  IonContent,
  IonImg,
  IonGrid,
  IonRow,
  IonCol,
} from '@ionic/vue';
// other imports

接下來，參考 deletePhoto 函數，我們稍後將建立它

const { photos, takePhoto, deletePhoto } = usePhotoGallery();

當使用者點擊/輕觸圖片時，我們將顯示動作表。將點擊處理常式新增至 <ion-img> 元素

<ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>

接下來，在 script setup 中，呼叫 create 函數以開啟一個對話方塊，其中包含刪除選取的照片或取消（關閉）對話方塊的選項

const showActionSheet = async (photo: UserPhoto) => {
  const actionSheet = await actionSheetController.create({
    header: 'Photos',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: trash,
        handler: () => {
          deletePhoto(photo);
        },
      },
      {
        text: 'Cancel',
        icon: close,
        role: 'cancel',
        handler: () => {
          // Nothing to do, action sheet is automatically closed
        },
      },
    ],
  });
  await actionSheet.present();
};

接下來，我們需要在 usePhotoGallery 函數中實作 deletePhoto 方法。開啟檔案，然後新增

const deletePhoto = async (photo: UserPhoto) => {
  // Remove this photo from the Photos reference data array
  photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);

  // delete photo file from filesystem
  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
  await Filesystem.deleteFile({
    path: filename,
    directory: Directory.Data,
  });
};

首先從 photos 陣列中移除選取的照片，然後使用 Filesystem API 刪除照片檔案。

請記住，從 photos 陣列中移除照片會自動觸發我們的 cachePhotos 函數

const cachePhotos = () => {
  Preferences.set({
    key: PHOTO_STORAGE,
    value: JSON.stringify(photos.value),
  });
};

watch(photos, cachePhotos);

最後，傳回 deletePhoto 函數

return {
  photos,
  takePhoto,
  deletePhoto,
};

儲存此檔案，然後再次輕觸照片並選擇「刪除」選項。這次，照片將被刪除！使用即時重載實作的速度快得多。💪

在本教學的最後一部分中，我們將逐步介紹用於建置和部署應用程式到使用者裝置的 Appflow 產品的基礎知識。