From 6ce34653d17b3f32905d234b51faece49a35865b Mon Sep 17 00:00:00 2001 From: jcesarmobile Date: Thu, 18 Aug 2022 19:03:00 +0200 Subject: [PATCH] docs(your-first-app): Replace Storage plugin with Preferences --- docs/angular/your-first-app.md | 4 ++-- docs/angular/your-first-app/2-taking-photos.md | 2 +- .../angular/your-first-app/4-loading-photos.md | 10 +++++----- docs/angular/your-first-app/5-adding-mobile.md | 2 +- docs/angular/your-first-app/7-live-reload.md | 4 ++-- docs/react/your-first-app.md | 4 ++-- docs/react/your-first-app/2-taking-photos.md | 2 +- docs/react/your-first-app/4-loading-photos.md | 18 +++++++++--------- docs/react/your-first-app/5-adding-mobile.md | 8 ++++---- docs/react/your-first-app/7-live-reload.md | 4 ++-- docs/vue/your-first-app.md | 4 ++-- docs/vue/your-first-app/2-taking-photos.md | 2 +- docs/vue/your-first-app/4-loading-photos.md | 18 +++++++++--------- docs/vue/your-first-app/5-adding-mobile.md | 6 +++--- docs/vue/your-first-app/7-live-reload.md | 2 +- .../version-v5/angular/your-first-app.md | 4 ++-- .../angular/your-first-app/2-taking-photos.md | 2 +- .../angular/your-first-app/4-loading-photos.md | 10 +++++----- .../angular/your-first-app/5-adding-mobile.md | 2 +- .../angular/your-first-app/7-live-reload.md | 4 ++-- .../version-v5/react/your-first-app.md | 4 ++-- .../react/your-first-app/2-taking-photos.md | 2 +- .../react/your-first-app/4-loading-photos.md | 16 ++++++++-------- .../react/your-first-app/5-adding-mobile.md | 8 ++++---- .../react/your-first-app/7-live-reload.md | 4 ++-- .../version-v5/vue/your-first-app.md | 4 ++-- .../vue/your-first-app/2-taking-photos.md | 2 +- .../vue/your-first-app/4-loading-photos.md | 18 +++++++++--------- .../vue/your-first-app/5-adding-mobile.md | 8 ++++---- .../vue/your-first-app/7-live-reload.md | 2 +- 30 files changed, 90 insertions(+), 90 deletions(-) diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index 753dbefb5a5..5cb290f4c1c 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -36,7 +36,7 @@ Highlights include: - One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs. Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng). @@ -88,7 +88,7 @@ cd photo-gallery Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: ```shell -npm install @capacitor/camera @capacitor/storage @capacitor/filesystem +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ``` ### PWA Elements diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md index 33064cd1140..eab0e8d1b02 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.md @@ -26,7 +26,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi ```tsx import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; -import { Storage } from '@capacitor/storage'; +import { Preferences } from '@capacitor/preferences'; ``` Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera: diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md index 15aa6ec926a..3c34b84f546 100644 --- a/docs/angular/your-first-app/4-loading-photos.md +++ b/docs/angular/your-first-app/4-loading-photos.md @@ -6,9 +6,9 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store. -## Storage API +## Preferences API Begin by defining a constant variable that will act as the key for the store: @@ -21,10 +21,10 @@ export class PhotoService { } ``` -Next, at the end of the `addNewToGallery` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. +Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. ```tsx -Storage.set({ +Preferences.set({ key: this.PHOTO_STORAGE, value: JSON.stringify(this.photos), }); @@ -35,7 +35,7 @@ With the photo array data saved, create a function called `loadSaved()` that can ```tsx public async loadSaved() { // Retrieve cached photo array data - const photoList = await Storage.get({ key: this.PHOTO_STORAGE }); + const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); this.photos = JSON.parse(photoList.value) || []; // more to come... diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md index 913d4d582e6..72ef3429132 100644 --- a/docs/angular/your-first-app/5-adding-mobile.md +++ b/docs/angular/your-first-app/5-adding-mobile.md @@ -93,7 +93,7 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea ```tsx public async loadSaved() { // Retrieve cached photo array data - const photoList = await Storage.get({ key: this.PHOTO_STORAGE }); + const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); this.photos = JSON.parse(photoList.value) || []; // Easiest way to detect when running on the web: diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md index c560be55767..26fe3b4fbf0 100644 --- a/docs/angular/your-first-app/7-live-reload.md +++ b/docs/angular/your-first-app/7-live-reload.md @@ -91,7 +91,7 @@ public async deletePicture(photo: UserPhoto, position: number) { this.photos.splice(position, 1); // Update photos array cache by overwriting the existing photo array - Storage.set({ + Preferences.set({ key: this.PHOTO_STORAGE, value: JSON.stringify(this.photos) }); @@ -107,7 +107,7 @@ public async deletePicture(photo: UserPhoto, position: number) { } ``` -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. +The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences 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. 💪 diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.md index 47fce5914fe..8364e516080 100644 --- a/docs/react/your-first-app.md +++ b/docs/react/your-first-app.md @@ -32,7 +32,7 @@ Highlights include: - One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs. Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-react). @@ -84,7 +84,7 @@ cd photo-gallery Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: ```shell -npm install @capacitor/camera @capacitor/storage @capacitor/filesystem +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ``` ### PWA Elements diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md index a7fd6cb61ab..c2d65fa5c1d 100644 --- a/docs/react/your-first-app/2-taking-photos.md +++ b/docs/react/your-first-app/2-taking-photos.md @@ -29,7 +29,7 @@ import { isPlatform } from '@ionic/react'; import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; -import { Storage } from '@capacitor/storage'; +import { Preferences } from '@capacitor/preferences'; import { Capacitor } from '@capacitor/core'; ``` diff --git a/docs/react/your-first-app/4-loading-photos.md b/docs/react/your-first-app/4-loading-photos.md index 76acfce106a..7911d592b6d 100644 --- a/docs/react/your-first-app/4-loading-photos.md +++ b/docs/react/your-first-app/4-loading-photos.md @@ -7,15 +7,15 @@ sidebar_label: Loading Photos Loading Photos from the Filesystem Using A Key-Value Store We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store. -## Storage API +## Preferences API Begin by defining a constant variable that will act as the key for the store before the `usePhotoGallery` function definition in `src/hooks/usePhotoGallery.ts`: @@ -26,10 +26,10 @@ export function usePhotoGallery() {} Then, use the `Storage` class to get access to the get and set methods for reading and writing to device storage: -At the end of the `takePhoto` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. +At the end of the `takePhoto` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. ```tsx -Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); +Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); ``` With the photo array data saved, we will create a method that will retrieve the data when the hook loads. We will do so by using React's `useEffect` hook. Insert this above the `takePhoto` declaration. Here is the code, and we will break it down: @@ -37,10 +37,10 @@ With the photo array data saved, we will create a method that will retrieve the ```tsx useEffect(() => { const loadSaved = async () => { - const { value } = await Storage.get({ key: PHOTO_STORAGE }); - const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[]; + const { value } = await Preferences.get({ key: PHOTO_STORAGE }); + const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[]; - for (let photo of photosInStorage) { + for (let photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -48,7 +48,7 @@ useEffect(() => { // Web platform only: Load the photo as base64 data photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } - setPhotos(photosInStorage); + setPhotos(photosInPreferences); }; loadSaved(); }, []); diff --git a/docs/react/your-first-app/5-adding-mobile.md b/docs/react/your-first-app/5-adding-mobile.md index ec65d87524f..eef40b7a333 100644 --- a/docs/react/your-first-app/5-adding-mobile.md +++ b/docs/react/your-first-app/5-adding-mobile.md @@ -52,12 +52,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire ```tsx const loadSaved = async () => { - const { value } = await Storage.get({ key: PHOTO_STORAGE }); + const { value } = await Preferences.get({ key: PHOTO_STORAGE }); - const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[]; + const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[]; // If running on the web... if (!isPlatform('hybrid')) { - for (let photo of photosInStorage) { + for (let photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -66,7 +66,7 @@ const loadSaved = async () => { photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } } - setPhotos(photosInStorage); + setPhotos(photosInPreferences); }; ``` diff --git a/docs/react/your-first-app/7-live-reload.md b/docs/react/your-first-app/7-live-reload.md index 86fe0affc71..2d37c4efdba 100644 --- a/docs/react/your-first-app/7-live-reload.md +++ b/docs/react/your-first-app/7-live-reload.md @@ -91,7 +91,7 @@ const deletePhoto = async (photo: UserPhoto) => { const newPhotos = photos.filter((p) => p.filepath !== photo.filepath); // Update photos array cache by overwriting the existing photo array - Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); + Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); // delete photo file from filesystem const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1); @@ -103,7 +103,7 @@ const deletePhoto = async (photo: UserPhoto) => { }; ``` -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. +The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API. Make sure to return the `deletePhoto` function so it is as a part of the hook API that we expose: diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md index ff03a79ef5b..31362bf23bb 100644 --- a/docs/vue/your-first-app.md +++ b/docs/vue/your-first-app.md @@ -32,7 +32,7 @@ Highlights include: - One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs. Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-vue). @@ -84,7 +84,7 @@ cd photo-gallery Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: ```shell -npm install @capacitor/camera @capacitor/storage @capacitor/filesystem +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ``` ### PWA Elements diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md index e0632873305..38bafe39a59 100644 --- a/docs/vue/your-first-app/2-taking-photos.md +++ b/docs/vue/your-first-app/2-taking-photos.md @@ -20,7 +20,7 @@ We will start by importing the various utilities we will use from Vue core and C import { ref, onMounted, watch } from 'vue'; import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; -import { Storage } from '@capacitor/storage'; +import { Preferences } from '@capacitor/preferences'; ``` Next, create a function named usePhotoGallery: diff --git a/docs/vue/your-first-app/4-loading-photos.md b/docs/vue/your-first-app/4-loading-photos.md index 4a2df79fa5a..b0157de7654 100644 --- a/docs/vue/your-first-app/4-loading-photos.md +++ b/docs/vue/your-first-app/4-loading-photos.md @@ -6,9 +6,9 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store. -## Storage API +## Preferences API Begin by defining a constant variable that will act as the key for the store at the top of the `usePhotoGallery` function in `src/composables/usePhotoGallery.ts`: @@ -16,11 +16,11 @@ Begin by defining a constant variable that will act as the key for the store at const PHOTO_STORAGE = 'photos'; ``` -Next, add a `cachePhotos` function that saves the Photos array as JSON to file storage: +Next, add a `cachePhotos` function that saves the Photos array as JSON to preferences: ```tsx const cachePhotos = () => { - Storage.set({ + Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(photos.value), }); @@ -33,14 +33,14 @@ Next, use the Vue [watch function](https://v3.vuejs.org/guide/composition-api-in watch(photos, cachePhotos); ``` -Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Storage, then each photo's data into base64 format: +Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Preferences, then each photo's data into base64 format: ```tsx const loadSaved = async () => { - const photoList = await Storage.get({ key: PHOTO_STORAGE }); - const photosInStorage = photoList.value ? JSON.parse(photoList.value) : []; + const photoList = await Preferences.get({ key: PHOTO_STORAGE }); + const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : []; - for (const photo of photosInStorage) { + for (const photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -48,7 +48,7 @@ const loadSaved = async () => { photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } - photos.value = photosInStorage; + photos.value = photosInPreferences; }; ``` diff --git a/docs/vue/your-first-app/5-adding-mobile.md b/docs/vue/your-first-app/5-adding-mobile.md index 39a37a424e7..28c60aa6bf3 100644 --- a/docs/vue/your-first-app/5-adding-mobile.md +++ b/docs/vue/your-first-app/5-adding-mobile.md @@ -58,11 +58,11 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire ```tsx const loadSaved = async () => { const photoList = await Storage.get({ key: PHOTO_STORAGE }); - const photosInStorage = photoList.value ? JSON.parse(photoList.value) : []; + const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : []; // If running on the web... if (!isPlatform('hybrid')) { - for (const photo of photosInStorage) { + for (const photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -72,7 +72,7 @@ const loadSaved = async () => { } } - photos.value = photosInStorage; + photos.value = photosInPreferences; }; ``` diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.md index 4010e1fcfff..a76c6e6622e 100644 --- a/docs/vue/your-first-app/7-live-reload.md +++ b/docs/vue/your-first-app/7-live-reload.md @@ -125,7 +125,7 @@ Remember that removing the photo from the `photos` array triggers the `cachePhot ```tsx const cachePhotos = () => { - Storage.set({ + Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(photos.value), }); diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.md index bee8e745cc4..08e208422b7 100644 --- a/versioned_docs/version-v5/angular/your-first-app.md +++ b/versioned_docs/version-v5/angular/your-first-app.md @@ -29,7 +29,7 @@ Highlights include: - One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs. Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng). @@ -81,7 +81,7 @@ cd photo-gallery Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: ```shell -npm install @capacitor/camera @capacitor/storage @capacitor/filesystem +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ``` ### PWA Elements diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md index 5153a2051f8..febc4de66d3 100644 --- a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md +++ b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md @@ -19,7 +19,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi ```tsx import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; -import { Storage } from '@capacitor/storage'; +import { Preferences } from '@capacitor/preferences'; ``` Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera: diff --git a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md index 15aa6ec926a..3c34b84f546 100644 --- a/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md +++ b/versioned_docs/version-v5/angular/your-first-app/4-loading-photos.md @@ -6,9 +6,9 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store. -## Storage API +## Preferences API Begin by defining a constant variable that will act as the key for the store: @@ -21,10 +21,10 @@ export class PhotoService { } ``` -Next, at the end of the `addNewToGallery` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. +Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. ```tsx -Storage.set({ +Preferences.set({ key: this.PHOTO_STORAGE, value: JSON.stringify(this.photos), }); @@ -35,7 +35,7 @@ With the photo array data saved, create a function called `loadSaved()` that can ```tsx public async loadSaved() { // Retrieve cached photo array data - const photoList = await Storage.get({ key: this.PHOTO_STORAGE }); + const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); this.photos = JSON.parse(photoList.value) || []; // more to come... diff --git a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md index 913d4d582e6..72ef3429132 100644 --- a/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md +++ b/versioned_docs/version-v5/angular/your-first-app/5-adding-mobile.md @@ -93,7 +93,7 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea ```tsx public async loadSaved() { // Retrieve cached photo array data - const photoList = await Storage.get({ key: this.PHOTO_STORAGE }); + const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); this.photos = JSON.parse(photoList.value) || []; // Easiest way to detect when running on the web: diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md index 52de878c339..9aad9835c23 100644 --- a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md +++ b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md @@ -85,7 +85,7 @@ public async deletePicture(photo: UserPhoto, position: number) { this.photos.splice(position, 1); // Update photos array cache by overwriting the existing photo array - Storage.set({ + Preferences.set({ key: this.PHOTO_STORAGE, value: JSON.stringify(this.photos) }); @@ -101,7 +101,7 @@ public async deletePicture(photo: UserPhoto, position: number) { } ``` -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. +The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences 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. 💪 diff --git a/versioned_docs/version-v5/react/your-first-app.md b/versioned_docs/version-v5/react/your-first-app.md index 63a11b97543..da7a5f7ccf6 100644 --- a/versioned_docs/version-v5/react/your-first-app.md +++ b/versioned_docs/version-v5/react/your-first-app.md @@ -27,7 +27,7 @@ Highlights include: - One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs. Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-react). @@ -79,7 +79,7 @@ cd photo-gallery Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: ```shell -npm install @capacitor/camera @capacitor/storage @capacitor/filesystem +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ``` ### PWA Elements diff --git a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md index 33dcb20ad6e..4abf6bc2051 100644 --- a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md +++ b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md @@ -22,7 +22,7 @@ import { isPlatform } from '@ionic/react'; import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; -import { Storage } from '@capacitor/storage'; +import { Preferences } from '@capacitor/preferences'; import { Capacitor } from '@capacitor/core'; ``` diff --git a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md index 35dcd63a38a..00454621eb9 100644 --- a/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md +++ b/versioned_docs/version-v5/react/your-first-app/4-loading-photos.md @@ -6,9 +6,9 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store. -## Storage API +## Preferences API Begin by defining a constant variable that will act as the key for the store before the `usePhotoGallery` function definition in `src/hooks/usePhotoGallery.ts`: @@ -19,10 +19,10 @@ export function usePhotoGallery() {} Then, use the `Storage` class to get access to the get and set methods for reading and writing to device storage: -At the end of the `takePhoto` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. +At the end of the `takePhoto` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. ```tsx -Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); +Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); ``` With the photo array data saved, we will create a method that will retrieve the data when the hook loads. We will do so by using React's `useEffect` hook. Insert this above the `takePhoto` declaration. Here is the code, and we will break it down: @@ -30,10 +30,10 @@ With the photo array data saved, we will create a method that will retrieve the ```tsx useEffect(() => { const loadSaved = async () => { - const { value } = await Storage.get({ key: PHOTO_STORAGE }); - const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[]; + const { value } = await Preferences.get({ key: PHOTO_STORAGE }); + const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[]; - for (let photo of photosInStorage) { + for (let photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -41,7 +41,7 @@ useEffect(() => { // Web platform only: Load the photo as base64 data photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } - setPhotos(photosInStorage); + setPhotos(photosInPreferences); }; loadSaved(); }, []); diff --git a/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md index ec65d87524f..eef40b7a333 100644 --- a/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md +++ b/versioned_docs/version-v5/react/your-first-app/5-adding-mobile.md @@ -52,12 +52,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire ```tsx const loadSaved = async () => { - const { value } = await Storage.get({ key: PHOTO_STORAGE }); + const { value } = await Preferences.get({ key: PHOTO_STORAGE }); - const photosInStorage = (value ? JSON.parse(value) : []) as UserPhoto[]; + const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[]; // If running on the web... if (!isPlatform('hybrid')) { - for (let photo of photosInStorage) { + for (let photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -66,7 +66,7 @@ const loadSaved = async () => { photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } } - setPhotos(photosInStorage); + setPhotos(photosInPreferences); }; ``` diff --git a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md index 1c1de115784..45dcf768053 100644 --- a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md +++ b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md @@ -91,7 +91,7 @@ const deletePhoto = async (photo: UserPhoto) => { const newPhotos = photos.filter((p) => p.filepath !== photo.filepath); // Update photos array cache by overwriting the existing photo array - Storage.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); + Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) }); // delete photo file from filesystem const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1); @@ -103,7 +103,7 @@ const deletePhoto = async (photo: UserPhoto) => { }; ``` -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. +The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API. Make sure to return the `deletePhoto` function so it is as a part of the hook API that we expose: diff --git a/versioned_docs/version-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.md index ab54638476d..db73be1f0cf 100644 --- a/versioned_docs/version-v5/vue/your-first-app.md +++ b/versioned_docs/version-v5/vue/your-first-app.md @@ -25,7 +25,7 @@ Highlights include: - One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Preferences](https://capacitor.ionicframework.com/docs/apis/preferences) APIs. Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-vue). @@ -77,7 +77,7 @@ cd photo-gallery Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: ```shell -npm install @capacitor/camera @capacitor/storage @capacitor/filesystem +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ``` ### PWA Elements diff --git a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md index e0632873305..38bafe39a59 100644 --- a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md +++ b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md @@ -20,7 +20,7 @@ We will start by importing the various utilities we will use from Vue core and C import { ref, onMounted, watch } from 'vue'; import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; -import { Storage } from '@capacitor/storage'; +import { Preferences } from '@capacitor/preferences'; ``` Next, create a function named usePhotoGallery: diff --git a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md index 4a2df79fa5a..b0157de7654 100644 --- a/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md +++ b/versioned_docs/version-v5/vue/your-first-app/4-loading-photos.md @@ -6,9 +6,9 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences) to store our array of Photos in a key-value store. -## Storage API +## Preferences API Begin by defining a constant variable that will act as the key for the store at the top of the `usePhotoGallery` function in `src/composables/usePhotoGallery.ts`: @@ -16,11 +16,11 @@ Begin by defining a constant variable that will act as the key for the store at const PHOTO_STORAGE = 'photos'; ``` -Next, add a `cachePhotos` function that saves the Photos array as JSON to file storage: +Next, add a `cachePhotos` function that saves the Photos array as JSON to preferences: ```tsx const cachePhotos = () => { - Storage.set({ + Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(photos.value), }); @@ -33,14 +33,14 @@ Next, use the Vue [watch function](https://v3.vuejs.org/guide/composition-api-in watch(photos, cachePhotos); ``` -Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Storage, then each photo's data into base64 format: +Now that the photo array data is saved, create a function to retrieve the data when Tab2 loads. First, retrieve photo data from Preferences, then each photo's data into base64 format: ```tsx const loadSaved = async () => { - const photoList = await Storage.get({ key: PHOTO_STORAGE }); - const photosInStorage = photoList.value ? JSON.parse(photoList.value) : []; + const photoList = await Preferences.get({ key: PHOTO_STORAGE }); + const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : []; - for (const photo of photosInStorage) { + for (const photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -48,7 +48,7 @@ const loadSaved = async () => { photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } - photos.value = photosInStorage; + photos.value = photosInPreferences; }; ``` diff --git a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md index 39a37a424e7..728e1ffb83c 100644 --- a/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md +++ b/versioned_docs/version-v5/vue/your-first-app/5-adding-mobile.md @@ -57,12 +57,12 @@ Next, add a new bit of logic in the `loadSaved` function. On mobile, we can dire ```tsx const loadSaved = async () => { - const photoList = await Storage.get({ key: PHOTO_STORAGE }); - const photosInStorage = photoList.value ? JSON.parse(photoList.value) : []; + const photoList = await Preferences.get({ key: PHOTO_STORAGE }); + const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : []; // If running on the web... if (!isPlatform('hybrid')) { - for (const photo of photosInStorage) { + for (const photo of photosInPreferences) { const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -72,7 +72,7 @@ const loadSaved = async () => { } } - photos.value = photosInStorage; + photos.value = photosInPreferences; }; ``` diff --git a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md index 0d64028f047..2764b126bc8 100644 --- a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md +++ b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md @@ -125,7 +125,7 @@ Remember that removing the photo from the `photos` array triggers the `cachePhot ```tsx const cachePhotos = () => { - Storage.set({ + Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(photos.value), });