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.