2020欧洲杯预赛最新积分榜

Search docs/

Rapid App Development with Live Reload

So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?

We can use the Ionic CLI’s Live Reload functionality2020欧洲杯预赛最新积分榜 to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.

Live Reload

Remember ionic serve2020欧洲杯预赛最新积分榜? That was Live Reload working in the browser, allowing us to iterate quickly.

2020欧洲杯预赛最新积分榜We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed.

Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:

$ ionic cap run ios -l --external

$ ionic cap run android -l --external

The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.

Deleting Photos

With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open tab2.page.html and add a new click handler to each <ion-img> element. When the app user taps on a photo in our gallery, we’ll display an Action Sheet2020欧洲杯预赛最新积分榜 dialog with the option to either delete the selected photo or cancel (close) the dialog.

<ion-col size="6" 
    *ngFor="let photo of photoService.photos; index as position">
  <ion-img src="{{ photo.base64 ? photo.base64 : photo.webviewPath }}" 
           (click)="showActionSheet(photo, position)"></ion-img>
</ion-col>

Over in tab2.page.ts2020欧洲杯预赛最新积分榜, import Action Sheet and add it to the constructor:

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

constructor(public photoService: PhotoService, 
            public actionSheetController: ActionSheetController) {}

Next, implement the showActionSheet() function. We add two options: Delete that calls PhotoService’s deletePicture() function (to be added next) and Cancel2020欧洲杯预赛最新积分榜, which when given the role of “cancel” will automatically close the action sheet:

public async showActionSheet(photo, position) {
  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();
}

Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping “Delete” doesn’t do anything yet, so head back into your code editor.

In src/app/services/photo.service.ts, add the deletePicture() function:

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
  });
}

The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.

Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪

What’s Next?

Congratulations! You built a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. There are many paths to follow from here. Try adding another Ionic UI component to the app, or more native functionality. The sky’s the limit.

Happy app building! 💙

Previous
Deploying Mobile
Next
Lifecycle