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.

)

Vinicius Zilli Pavei

Written by

Programmer 10y | Ionic Meetup Florianópolis | Partner Solvus Aplicativos

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade