You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/angular/your-first-app.md
+7-5Lines changed: 7 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,15 @@ sidebar_label: Build Your First App
4
4
---
5
5
6
6
<head>
7
-
<title>Build Your First Ionic Mobile App: Angular Development Tutorial</title>
7
+
<title>Build Your First Ionic Mobile App with Angular | Ionic Capacitor Camera</title>
8
8
<meta
9
9
name="description"
10
-
content="Ionic's single codebase builds for any platform using just HTML, CSS, & JavaScript. Develop your first mobile app with our step-by-step Angular tutorial."
10
+
content="This Angular tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with Angular."
11
11
/>
12
12
</head>
13
13
14
+
# Your First Ionic App: Angular
15
+
14
16
The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
15
17
16
18
Here’s the finished app running on all 3 platforms:
@@ -38,7 +40,7 @@ Highlights include:
38
40
- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
39
41
- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
40
42
41
-
Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
43
+
Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub.
42
44
43
45
## Download Required Tools
44
46
@@ -70,7 +72,7 @@ Consider setting up npm to operate globally without elevated permissions. See [R
70
72
71
73
## Create an App
72
74
73
-
Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality:
75
+
Next, create an Ionic Angular app that uses the "Tabs" starter template and adds Capacitor for native functionality:
Copy file name to clipboardExpand all lines: docs/angular/your-first-app/2-taking-photos.md
+9-6Lines changed: 9 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,15 @@ sidebar_label: Taking Photos
4
4
---
5
5
6
6
<head>
7
-
<title>Build Camera API for iOS, Android & Web | Ionic Capacitor Camera</title>
7
+
<title>Take Photos with Camera API for iOS, Android & Web with Angular | Ionic Capacitor Camera</title>
8
8
<meta
9
9
name="description"
10
10
content="Add the ability to take photos with your device's camera using the Ionic Capacitor Camera API for mobile iOS, Android, and the web. Learn how here."
11
11
/>
12
12
</head>
13
13
14
+
# Taking Photos with the Camera
15
+
14
16
Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
15
17
16
18
## Photo Service
@@ -21,7 +23,7 @@ All Capacitor logic (Camera usage and other native features) will be encapsulate
21
23
ionic g service services/photo.service
22
24
```
23
25
24
-
Open the new `services/photo.service.ts` file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the Camera, Filesystem, and Storage plugins:
26
+
Open the new `services/photo.service.ts` file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the `Camera`, `Filesystem`, and `Storage` plugins:
25
27
26
28
```ts
27
29
import { Injectable } from'@angular/core';
@@ -36,7 +38,7 @@ import { Preferences } from '@capacitor/preferences';
36
38
exportclassPhotoService {}
37
39
```
38
40
39
-
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:
41
+
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.
40
42
41
43
```ts
42
44
import { Injectable } from'@angular/core';
@@ -57,7 +59,7 @@ export class PhotoService {
57
59
}
58
60
```
59
61
60
-
Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos.
62
+
Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `getPhoto()` - that will open up the device's camera and allow us to take photos.
61
63
62
64
Next, in `tab2.page.ts`, import the `PhotoService` class and add a method to call its `addNewToGallery` method.
63
65
@@ -127,7 +129,7 @@ export class PhotoService {
127
129
// Same old code from before.
128
130
}
129
131
130
-
// CHANGE: Add the interface.
132
+
// CHANGE: Add the `UserPhoto` interface.
131
133
exportinterfaceUserPhoto {
132
134
filepath:string;
133
135
webviewPath?:string;
@@ -138,7 +140,7 @@ Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will
138
140
139
141
```ts
140
142
exportclassPhotoService {
141
-
// CHANGE: Add the photos array.
143
+
// CHANGE: Add the `photos` array.
142
144
public photos:UserPhoto[] = [];
143
145
144
146
publicasync addNewToGallery() {
@@ -152,6 +154,7 @@ Over in the `addNewToGallery` method, add the newly captured photo to the beginn
Copy file name to clipboardExpand all lines: docs/angular/your-first-app/3-saving-photos.md
+23-30Lines changed: 23 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,14 @@ title: Saving Photos to the Filesystem
3
3
sidebar_label: Saving Photos
4
4
---
5
5
6
+
<head>
7
+
<title>Saving Photos to the Filesystem with Angular | Ionic Capacitor Camera</title>
8
+
<meta
9
+
name="description"
10
+
content="We’re now able to take multiple photos and display them in a photo gallery. Learn how to save these photos to the filesystem using the Ionic Capacitor Filesystem API."
11
+
/>
12
+
</head>
13
+
6
14
# Saving Photos to the Filesystem
7
15
8
16
We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted.
@@ -23,7 +31,7 @@ import { Preferences } from '@capacitor/preferences';
23
31
exportclassPhotoService {
24
32
// Same old code from before.
25
33
26
-
// CHANGE: Add the `savePicture` method.
34
+
// CHANGE: Add the `savePicture()` method.
27
35
privateasync savePicture(photo:Photo) {
28
36
return {
29
37
filepath: 'soon...',
@@ -52,7 +60,7 @@ import { Preferences } from '@capacitor/preferences';
52
60
exportclassPhotoService {
53
61
public photos:UserPhoto[] = [];
54
62
55
-
// CHANGE: Update `addNewToGallery()` method.
63
+
// CHANGE: Update the `addNewToGallery()` method.
56
64
publicasync addNewToGallery() {
57
65
// Take a photo
58
66
const capturedPhoto =awaitCamera.getPhoto({
@@ -61,7 +69,7 @@ export class PhotoService {
61
69
quality: 100,
62
70
});
63
71
64
-
// CHANGE: Add `savedImageFile` to save the picture and add it to photo collection.
72
+
// CHANGE: Add `savedImageFile`.
65
73
// Save the picture and add it to photo collection
We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format using a helper method we'll define: `readAsBase64()`.
94
+
We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format.
87
95
88
96
Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object.
89
97
90
-
The `readAsBase64()` method is necessary because it isolates a small amount of platform-specific logic (more on that soon). For now, create two new helper methods, `readAsBase64()` and`convertBlobToBase64()`, to implement the necessary logic for running on the web.
98
+
For now, create a new helper method,`convertBlobToBase64()`, to implement the necessary logic for running on the web.
91
99
92
100
```ts
93
101
import { Injectable } from'@angular/core';
@@ -101,10 +109,12 @@ import { Preferences } from '@capacitor/preferences';
101
109
exportclassPhotoService {
102
110
// Same old code from before.
103
111
104
-
// CHANGE: Update the `savePicture` method.
112
+
// CHANGE: Update the `savePicture()` method.
105
113
privateasync savePicture(photo:Photo) {
106
-
// Convert photo to base64 format, required by Filesystem API to save
107
-
const base64Data =awaitthis.readAsBase64(photo);
114
+
// Fetch the photo, read as a blob, then convert to base64 format
Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, we’re just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReader’s [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64.
228
223
229
-
There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem.
230
-
231
-
Next up, we'll load and display our saved images.
224
+
There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem. Next up, we'll load and display our saved images.
Copy file name to clipboardExpand all lines: docs/angular/your-first-app/4-loading-photos.md
+21-19Lines changed: 21 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,6 +3,14 @@ title: Loading Photos from the Filesystem
3
3
sidebar_label: Loading Photos
4
4
---
5
5
6
+
<head>
7
+
<title>Loading Photos from the Filesystem with Angular | Ionic Capacitor Camera</title>
8
+
<meta
9
+
name="description"
10
+
content="We’ve implemented photo taking and saving to the filesystem, now learn how Ionic leverages Capacitor Preferences API for loading our photos in a key-value store."
11
+
/>
12
+
</head>
13
+
6
14
# Loading Photos from the Filesystem
7
15
8
16
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.
@@ -11,7 +19,7 @@ Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../.
11
19
12
20
## Preferences API
13
21
14
-
Open `photo.service.ts` and begin by defining a new property in the `PhotoService` class that will act as the key for the store:
22
+
Open `photo.service.ts` and begin by defining a new property in the `PhotoService` class that will act as the key for the store.
15
23
16
24
```ts
17
25
exportclassPhotoService {
@@ -24,7 +32,7 @@ export class PhotoService {
24
32
}
25
33
```
26
34
27
-
Next, at the end of the `addNewToGallery` method, 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.
35
+
Next, at the end of the `addNewToGallery()` method, 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.
28
36
29
37
```ts
30
38
publicasyncaddNewToGallery() {
@@ -56,8 +64,8 @@ export class PhotoService {
56
64
// CHANGE: Add the method to load the photo data.
57
65
publicasync loadSaved() {
58
66
// Retrieve cached photo array data
59
-
const { value } =awaitPreferences.get({ key: this.PHOTO_STORAGE });
0 commit comments