Ionic 2 — Como fazer a função Story do Instagram

Uma função muito utilizada no Instagram é o Story (cópia do SnapChat) para enviar fotos e vídeos que permanecem por 24 horas no dispositivo. Hoje o objetivo é apresentar para vocês como desenvolver essa funcionalidade. Essa é a primeira parte da série de posts para desenvolver essa funcionalidade.

Desenvolvi essa funcionalidade para um starter que está publicado no Ionic Market chamado de InstaCopy que é uma cópia completa do Instagram feita em Ionic.

Essa aplicação irá funcionar apenas com um dispositivo físico (não funciona no emulador).

Vamos começar do básico, criar projeto chamado InstaStory e adicionar a plataforma Android.

$ ionic start InstaStory blank 
$ cd InstaStory
$ ionic cordova platform add android

Primeiro vamos adicionar uma nova página que será onde ficará a Câmera. Vamos gerar sem o módulo para ficar mais fácil de implementar.

$ ionic generate page StoryPhoto --no-module

Adicionar ao app.module.ts

declarations: [
  MyApp,
  HomePage,
  StoryPhotoPage
],

Criar um botão na home.html

<button ion-button="" full (click)="goToStory()">Go to Story</button>

E na home.ts

goToStory(){
  this.navCtrl.push(StoryPhotoPage)
}

Ok, tudo pronto para iniciarmos nossa nova tela. Primeiramente vamos adicionar o plugin que irá ser responsável por deixar a câmera aberta:

$ ionic cordova plugin add cordova-plugin-camera-preview
$ npm install --save @ionic-native/camera-preview

No app.module.ts:

providers: [
  StatusBar,
  SplashScreen,
  CameraPreview,
  {provide: ErrorHandler, useClass: IonicErrorHandler}
]

Vamos adicionar uma função chamada startCamera no arquivo story-photo.ts que será responsável por iniciar a câmera quando a tela abrir. Vamos também adicionar o Platform para buscar o tamanho da tela do celular para que a câmera seja aberta em fullscreen.

Antes de rodarmos precisamos colocar todo o nosso fundo do aplicativo como transparente para que a câmera consiga aparecer. Então modifique no seu app.scss

html, body, ion-app, ion-content, ion-page, .nav-decor {
  background-color: transparent !important;
}

Apague a navbar do story-photo.html do seu aplicativo.

Agora você pode rodar:

ionic cordova run android 

Certo, agora falta o principal, tirar fotos. Para isso vamos utilizar o fab-button que por ser relativo, funciona muito bem.

Vamos adicionar 4 botões, conforme imagem abaixo:

1 — Centro para tirar a foto

2 — Canto superior esquerdo para Configurações

3 — Canto superior direito para Voltar

4 — Canto inferior direito para trocar o modo da câmera de frontal para trazeira.

Vamos primeiro adicionar os fab buttons na nossa página. Utilizei as colores já presentes no template para facilitar.

Modifique seu story-photo.scss

Agora você pode rodar com ionic cordova run android e ver como está.

Agora vamos iniciar as funcionalidades:

Pronto, agora você já tem o base64 da foto.

Deixe um comentário se você quer a continuação desse post, onde ensino a como fazer desenhos em cima da imagem e adicionar ao feed.