Ionic 2 — приложение, похожее на инстаграм (Ionic 2 RC2)

Сегодня я покажу вам, как создать простое приложение, похожее на Instagram, с помощью Ionic 2.

Мы продолжим с последнего скринкаста, где я показал вам как начать работу с Ionic 2. Вы можете получить полный исходный код здесь.

Мы будем использовать плагин камеры в нашем приложении, поэтому нам нужно добавить плагин для Ionic 2.

плагин ionic add cordova-plugin-camera

Хорошо, когда это будет сделано, мы создадим новый класс машинописного текста photo.ts (в папке Pages) с двумя свойствами (src и likes). Src будет типом строки (формат фотографий base64), а лайки будут числом. Теперь пришло время создать конструктор, который присваивает src и лайки нашим свойствам.

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

Во-вторых, давайте перейдем к файлу hello-ionic.ts, переименуем его в home.ts, импортируем класс Photo в домашний компонент и создадим массив Photo с несколькими образцами фотографий.

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

Теперь давайте перейдем к файлу hello-ionic.html, переименуем его в home.html и приступим к разработке нашего приложения. Во-первых, мы просто удаляем все внутри тега ion-content.

Наши фотографии будут размещены в карточке, и мы можем просмотреть массив фотографий с помощью ngFor. Мы добавляем свойство src к [src] тега img, а также создаем две кнопки, одну для удаления фотографии и одну для того, чтобы понравиться фотографии.

<ion-card *ngFor="let photo of photos">    
   <ion-card-content>
      <img [src]="photo.src" />
      <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>    
   </ion-card-content>  
</ion-card>

Теперь наш дизайн завершен, давайте просмотрим его в браузере с помощью команды ionic serve. Нам нужно добавить функциональности в наше приложение. Во-первых, мы создадим обработчики кликов для кнопок. Добавим обработчик кликов для функции «takePhoto()».

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

Также давайте добавим обработчики кликов deletePhoto(photo) и likePhoto(photo) к двум оставшимся кнопкам. Мы передаем фотообъект в функцию, которую мы получили от 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>

Теперь давайте перейдем к home.ts и напишем эти обработчики кликов. Во-первых, мы создадим функцию takePhoto(). Для этого нам нужно будет импортировать плагин Camera из ionic-native (мы установили этот плагин ранее).

import { Camera } from 'ionic-native';

Теперь давайте добавим функцию.

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); }); }

Здесь мы вызываем функцию getPicture класса Camera и указываем с ее помощью некоторые параметры. Мы указываем, что тип назначения — это URL-адрес данных (строковая форма base64), ширина и высота фотографии. В обратном вызове .then мы создаем новый экземпляр класса Photo и добавляем к нему строковое изображение base64 в качестве src и 0 в качестве количества лайков. Мы помещаем этот экземпляр в наш массив фотографий. В случае ошибки мы просто выводим ее в консоль.

Следующей функцией будет удаление фото.

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

Здесь мы просто берем индекс переданной фотографии и объединяем массив.

Последняя функция — поставить лайк фото.

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

Здесь мы просто берем фотообъект и увеличиваем его свойство лайков.

Вы можете видеть, что за несколько простых шагов у нас есть забавное гибридное мобильное приложение, похожее на Instagram. Мы можем делать или удалять фотографии, а также ставить лайки, нажимая на лайк или кликая по самой картинке.

Последнее, что нужно будет использовать, это настроить ионную загрузку. Это позволяет нам быстро протестировать наше приложение на мобильном устройстве. Нам просто нужно установить Ionic View из игрового магазина и зарегистрировать учетную запись Ionic.

Затем мы просто вводим ionic upload в интерфейсе командной строки, и новое приложение будет отображаться в нашем приложении Ionic View на мобильном устройстве. Когда мы загружаем новую версию, мы просто синхронизируем приложение с последней версией в Ionic View. Давайте протестируем наше приложение на мобильном устройстве. Давайте сначала удалим изображения-заполнители и сделаем новую фотографию. Мы можем удалить его или поставить лайк.

В следующий раз мы сделаем наши фотографии постоянными с помощью Firebase.

Ionic 2 — приложение, похожее на инстаграм (Ionic 2 RC2)

Вопросы по теме