Ionic 2 – instagram-like app (Ionic 2 – RC2)

 Today I will show you how to create a simple instagram-like application using Ionic 2. We will continue from the last screencast, where I showed you how to get started with Ionic 2. You can get the complete source code here.

We will use camera plugin in our application, so we need to add plugin for Ionic 2.

ionic plugin add cordova-plugin-camera

Ok, when this is done, we will create a new photo typescript class photo.ts (in the Pages folder) with two properties (src and likes). Src will be a type of string (base64 format of photos) and likes will be a number. Now it’s also the time to create a constructor, which assigns src and likes to our properties.

export class Photo {
   constructor(src: string, likes: number) {
      this.src = src;
      this.likes = likes;
   }
   src: string;
   likes: number;
}

Second, lets go to hello-ionic.ts file, rename it to home.ts and import the Photo class into home component and create an Photo array with some sample photos.

import { Photo } from './../photo';
photos: Photo[] = [new Photo("http://placehold.it/350x150", 5), new Photo("http://placehold.it/350x151", 6)];

Now let’s go to hello-ionic.html file, rename it to home.html and start designing our app.  First, we just delete everything inside of ion-content tag.

Our photos will be placed in an card view and we can loop through photos array with ngFor. We append the src property to the [src] of img tag and also create two buttons, one for deleting a photo and one for liking a photo.

<ion-card *ngFor="let photo of photos">
 <ion-card-content>
  <img [src]="photo.src" />
  <button ion-button block>
   <ion-icon name="heart"></ion-icon>
   <ion-badge item-right>{{photo.likes}}</ion-badge>
  </button>
  <button ion-button color="danger" block>
   <ion-icon name="trash"></ion-icon>
  </button>
 </ion-card-content>
</ion-card>

Now our design is complete, let’s preview it in the browser by ionic serve command. We need to add functionallity to our application. First, we will create click handlers for buttons. Let’s add click handler for function “takePhoto()”.

<button (click)="takePhoto()" ion-button outline block>Take a photo</button>

Also, let’s add click handlers deletePhoto(photo) and likePhoto(photo) to our two remaining buttons. We pass the photo object to the function, which we got it from ngFor.

<button (click)="likePhoto(photo)" ion-button block>
    <ion-icon name="heart"></ion-icon>
    <ion-badge item-right>{{photo.likes}}</ion-badge>
</button>

<button (click)="deletePhoto(photo)" ion-button color="danger" block>
    <ion-icon name="trash"></ion-icon>
</button>

Now, let’s go to home.ts and write these click handlers. First, we will create takePhoto() function.For this, we will need to import Camera plugin from ionic-native (we installed this plugin earlier).

import { Camera } from 'ionic-native';

Now, let’s add the function.

takePhoto() {
   Camera.getPicture({
      destinationType: Camera.DestinationType.DATA_URL,
      targetHeight: 500,
      targetWidth: 500,
      correctOrientation: true
   }).then((imageData) => {
      this.photos.push(new Photo("data:image/jpeg;base64," +                              imageData, 0));
   }, (err) => {
      console.log(err);
   });
}

Here, we call the getPicture function on the Camera class and we specify some options with it. We specify that the destination type is data url (base64 string form), width and height of the photo. In the .then callback, we create new Photo instance of class and add base64 string image as src and 0 as number of likes to it. We push this instance to our photos array. In the case of error, we just log it to the console.

The next function will be to delete a photo.

deletePhoto(photo) {
   this.photos.splice(this.photos.indexOf(photo), 1);
}

Here, we just take the index of passed in photo and splice the array.

The last function is to like a photo.

likePhoto(photo) {
   photo.likes++;
}

Here, we just take the photo object and increment the likes property of it.

You can see that in a few simple steps, we have a fun instagram-like hybrid mobile application. We can take or delete photos and also like them by pressing on the like or clicking on the picture itself.

The last thing for use will be to set up ionic upload. This lets us quickly test our application on mobile device. We just need to install Ionic View from play store and sign up for Ionic account.

Then we just type ionic upload in the CLI and the new app will be shown in our Ionic View application on mobile device. When we upload new version, we just sync the app to the latest version in Ionic View. Let’s test our app on a mobile device. Let’s first delete the placeholder images and take a new photo. We can delete it or like it.

Next time, we will make our photos persistent using Firebase.

Advertisements

5 thoughts on “Ionic 2 – instagram-like app (Ionic 2 – RC2)

  1. Nice presentation. I saw that you are using an android emulator that seems to be directly connected to a real phone. What is that tool? Genymotion? If so, how did you configure it to have that kind of access and how did you make it work to react so fast ? I think you are running on Win10, right? Thanks

    Like

    1. Thank you David. In this example I’m just mirroring my real phone to PC using Vysor application (you can install it as an extension for Google Chrome). Yes I’m running it on win10.

      Like

  2. Nice tutorial. An off topic quiestion Janez, Can you tell me if there is any way we can capture video just like the instagram or music.ly does? i.e. Capture Video Chunk on Button Press, then press again to capture another. I’d be more than grateful if you can dig into Ionic 2 / Cordova to see if this is possible since I’ve been unable to do that.
    Thanks

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s