Skip to content

Commit 14f6c04

Browse files
committed
Add readme
1 parent d8b4eab commit 14f6c04

1 file changed

Lines changed: 35 additions & 1 deletion

File tree

README.md

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,35 @@
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

Comments
 (0)