|
1 | | -TODO |
| 1 | +# Build Your First Ionic App: Photo Gallery (Ionic Angular and Capacitor) |
| 2 | + |
| 3 | +Get started with Ionic by building a photo gallery app that runs on iOS, Android, and the web - with just one codebase. This is the complete project referenced in the ["Your First App: Angular" guide](https://ionicframework.com/docs/angular/your-first-app). Follow along to create a complete CRUD (create-read-update-delete) experience. |
| 4 | + |
| 5 | +Powered by [Ionic Angular](https://ionicframework.com/docs/angular/overview) (web app) and [Capacitor](https://capacitor.ionicframework.com) (native app runtime). |
| 6 | + |
| 7 | +## How It Works |
| 8 | + |
| 9 | +After the user navigates to Tab 2 (Photos), they can tap/click on the camera button to open up the device's camera. After taking or selecting a photo, it's stored permanently into the device's filesystem. When the user reopens the app at a later time, the photo images are loaded from the filesystem and displayed again in the gallery. The user can tap on a photo to be presented with the option to remove the photo. |
| 10 | + |
| 11 | +## Feature Overview |
| 12 | +* App framework: [Angular](https://angular.io) |
| 13 | +* UI components: [Ionic Framework](https://ionicframework.com/docs/components) |
| 14 | + * Camera button: [Floating Action Button (FAB)](https://ionicframework.com/docs/api/fab) |
| 15 | + * Photo Gallery display: [Grid](https://ionicframework.com/docs/api/grid) |
| 16 | + * Delete Photo dialog: [Action Sheet](https://ionicframework.com/docs/api/action-sheet) |
| 17 | +* Native runtime: [Capacitor](https://capacitor.ionicframework.com) |
| 18 | + * Taking photos: [Camera API](https://capacitor.ionicframework.com/docs/apis/camera) |
| 19 | + * Writing photo to the filesystem: [Filesystem API](https://capacitor.ionicframework.com/docs/apis/filesystem) |
| 20 | + * Storing photo gallery metadata: [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) |
| 21 | + |
| 22 | +## Project Structure |
| 23 | +* Tab2 (Photos) (`src/app/tab2/`): Photo Gallery UI and basic logic. |
| 24 | +* PhotoService (`src/app/services/photo.service.ts`): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Storage. |
| 25 | + |
| 26 | +## How to Run |
| 27 | + |
| 28 | +> Note: It's highly recommended to follow along with the [tutorial guide](https://ionicframework.com/docs/angular/your-first-app), which goes into more depth, but this is the fastest way to run the app. |
| 29 | +
|
| 30 | +0) Install Ionic if needed: `npm install -g ionic`. |
| 31 | +1) Clone this repository. |
| 32 | +2) In a terminal, change directory into the repo: `cd photo-gallery-capacitor-ng`. |
| 33 | +3) Install all packages: `npm install`. |
| 34 | +4) Run on the web: `ionic serve`. |
| 35 | +5) Run on iOS or Android: See [here](https://ionicframework.com/docs/building/running). |
0 commit comments