CREATING A DEDICATED PHOTO SERVICE

Ionic is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies. Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build/deploy as a native app. This means we need to install a few utilities to get developing. This is a simple tutorial which will provide you how we can create a photo storage application using the ionic. Here I am using cordova for developing ionic applications.  We have alot of steps to do. Ionic application is used for developing the hybrid mobile applications

Step 1 

Install Node and npm

First, we need to install node and npm

Step 2

Install CLI and Cordova

npm install -g ionic cordova

Step 3

Install ionic project

ionic start helloWorld

Step 4

From a terminal window, navigate to your Ionic project and run:

cd helloWorld

ionic serve

Step 5

ionic g provider PhotoProvider

Now it will create a provider named PhotoProvider class in a dedicated providers/photo folder

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

@Injectable()

export class PhotoProvider {

 constructor(public http: HttpClient) {

   console.log('Hello PhotoProvider Provider');

 }

}

Step 6

Within this class, add a Photo class. 

class Photo {

 data: any;

}

Step 7

Now, we will create a Photos array which will represent our array our photo gallery:

export class PhotoProvider {

 public photos: Photo[] = [];

 constructor() { }

}

Step 8

Now we will take our About.ts, import PhotoProvider:

import { PhotoProvider } from '../../providers/photo/photo';

Step 9

Add it to the Constructor:

constructor(private camera: Camera, 

public photoService: PhotoProvider) 
{  
}

Step 10

Next, move all code to the Camera plugin to the PhotoService class which includes the takePicture method, the Camera import, and the About page constructor.

Then, we need to convert currentImage variable references to the new photos array.

Start by adding the captured photo data into the photos array:

this.camera.getPicture(options).then((imageData) => {

     this.photos.unshift({

       data: 'data:image/jpeg;base64,' + imageData

     });

   }, (err) => {

    console.log("Camera issue: " + err);

   });

Step 11

In About.page.ts, remove the currentImage variable and the reference to Camera in the constructor,

leaving only PhotoService:

export class AboutPage {

 constructor(public navCtrl: NavController,

 public photoService: PhotoProvider) {  }

}

Step 12

Then in about.html

<ion-grid>

   <ion-row>

   <ion-col col-6 *ngFor="let photo of photoService.photos">

       <img [src]="photo.data" />

     </ion-col>

   </ion-row>

 </ion-grid>

Step 13

Here, we loop through each photo in the PhotoServices photos array, adding a new column for each.

Last, update the Fab button to call the PhotoProvider’s takePicture method:

<button ion-fab (click)="photoService.takePicture()">

Now our basic photo gallery started working.

But there is a problem in this, while we close the application all the pictures will be lost, so for that, we need to do the next steps

So let’s add the Ionic Storage plugin, as an easy way to store data. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.

The Storage plugin works perfectly for our base64 image data. To begin, add the SQLite plugin for native:

ionic cordova plugin add cordova-sqlite-storage

Step 15

Now, add the JavaScript library for the web:

npm install --save @ionic/storage

Step 16

And finally, import the Storage module and add it to the imports list in app.module.ts:

import { IonicStorageModule } from '@ionic/storage'; 

imports: [

   BrowserModule,

   IonicModule.forRoot(MyApp),

   IonicStorageModule.forRoot()

 ],

Step 17

Now ready to be used in our PhotoProvider class.

import { Storage } from '@ionic/storage';

Then add inside the constructor method

constructor(private camera: Camera, private storage: Storage) { }

Step 18

To add the capability to save photos, there are only a couple steps left. 

Update the takePicture() method to save the entire photos array after each photo is taken using the storage.set method:

this.camera.getPicture(options).then((imageData) => {

     this.photos.unshift({

       data: 'data:image/jpeg;base64,' + imageData

     });

     this.storage.set('photos', this.photos);

   }, (err) => {

    console.log("Camera issue: " + err);

   });

Step 19

We still need to load the saved photos when the app is first opened. 

This is simple enough - retrieve the “photos” key then assign its value to the photos array:

loadSaved() {

   this.storage.get('photos').then((photos) => {

     this.photos = photos || [];

   });

 }

Step 20

Now in the About page, call the loadSaved method

ngOnInit() {

   this.photoService.loadSaved();

}

So finally we completed, Photos are now saved to your device. Now everyone needs to try on it. Thank you