https://github.com/distante/ionic-content-security-policy-problem-example
https://github.com/distante/ionic-content-security-policy-problem-example
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/distante/ionic-content-security-policy-problem-example
- Owner: distante
- Created: 2020-07-31T13:58:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-31T14:07:52.000Z (almost 6 years ago)
- Last Synced: 2025-02-12T11:39:24.301Z (over 1 year ago)
- Language: TypeScript
- Size: 655 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Build Your First Ionic App: Photo Gallery (Ionic Angular and Capacitor)
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.
Powered by [Ionic Angular](https://ionicframework.com/docs/angular/overview) (web app) and [Capacitor](https://capacitor.ionicframework.com) (native app runtime).
## How It Works
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.
## Feature Overview
* App framework: [Angular](https://angular.io)
* UI components: [Ionic Framework](https://ionicframework.com/docs/components)
* Camera button: [Floating Action Button (FAB)](https://ionicframework.com/docs/api/fab)
* Photo Gallery display: [Grid](https://ionicframework.com/docs/api/grid)
* Delete Photo dialog: [Action Sheet](https://ionicframework.com/docs/api/action-sheet)
* Native runtime: [Capacitor](https://capacitor.ionicframework.com)
* Taking photos: [Camera API](https://capacitor.ionicframework.com/docs/apis/camera)
* Writing photo to the filesystem: [Filesystem API](https://capacitor.ionicframework.com/docs/apis/filesystem)
* Storing photo gallery metadata: [Storage API](https://capacitor.ionicframework.com/docs/apis/storage)
## Project Structure
* Tab2 (Photos) (`src/app/tab2/`): Photo Gallery UI and basic logic.
* PhotoService (`src/app/services/photo.service.ts`): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Storage.
## How to Run
> 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.
0) Install Ionic if needed: `npm install -g @ionic/cli`.
1) Clone this repository.
2) In a terminal, change directory into the repo: `cd photo-gallery-capacitor-ng`.
3) Install all packages: `npm install`.
4) Run on the web: `ionic serve`.
5) Run on iOS or Android: See [here](https://ionicframework.com/docs/building/running).