contato@pefsistemas.com.br +55 11 3280-0301

Suporte ao Firebase Sotorage no AngularFire2

Finalmente, na semana passada, o David East (o desenvolvedor por trás da AngularFire2) anunciou que eles estavam adicionando suporte ao Storage Firebase dentro do AngularFire2, o que significa que não teremos que manter a mistura no JS SDK e nossos aplicativos receberão um pacote menor 🙂

É mesmo possível? Você está adicionando um golpe extra ao seu aplicativo a partir do JS SDK? O código será fácil de manter no futuro?

Essas são algumas das perguntas que provavelmente estão preocupando você agora, vamos encarar isso, a última coisa que você quer é que, depois de todo seu trabalho árduo, você acabe com um pesadelo de código para manter.

Ou com um aplicativo tão inchado com todos os pacotes extras que seus usuários começam a sentir a lentidão.

Até agora, a única escolha que você teve foi importar todo o SDK de JavaScript para usar o armazenamento do Firebase (o que pode levá-lo a sentir que seu aplicativo está muito inchado).

Isso muda agora. A equipe AngularFire2 trabalhou sem parar ao adicionar todas as funcionalidades que precisamos para usar Armazenamento (e alguns truques legais, eu vou te mostrar mais tarde).

Como isso funciona?

NOTE: Como não é uma versão publica, talvez você precise instalar como angularfire2@next

O AngularFire2 quebra os recursos do Firebase em módulos separados. Isso reduz o tamanho do pacote, incluindo apenas os recursos que seu aplicativo precisa.

Se você está planejando usar o armazenamento e nenhuma outra API do Firebase, você pode adicionar apenas esse pacote e esquecer o inchaço do resto dos pacotes que você não precisa.

Por exemplo, se você for até seu app.module.ts, você pode importar e inicializar AngularFire e Storage:

Dessa forma, você não precisa se preocupar em adicionar o pacote todo do banco ou do pacote de autenticação, você apenas carrega o que vai precisar.

Como eu uso?

Você acabou de ver como importá-lo para seu aplicativo, agora para usá-lo você tem duas maneiras de carregar os arquivos:

  1. Criar uma referência e usar os métodos .put() ou .putString().
  2. Usar o método .upload() que cria uma referência para você enquanto o upload é feito.

Um dos tipos de arquivos mais comuns que você enviará em um aplicativo móvel é uma imagem, então veremos como funciona o método .putString(). Você pode passar diretamente uma string base64.

A primeira coisa que você precisa é importá-lo para o seu componente:

Tudo o que você precisa importar é o AngularFireStorage, eu estou importando os outros dois porque eu gosto de configurações de tipo “mais forte”, mas não é necessário.

Depois de importar, está pronto para usar, crie uma função para carregar a imagem e passar os caracteres base64 como um parâmetro:

Dentro da função, crie uma referência ao Storage Firebase. Uma referência é o caminho onde você deseja que sua imagem seja salva.

Pense nisso como uma coleção de pastas e arquivos. Eu quero armazenar minha imagem em uma pasta chamada selfies e quero nomear minha imagem andre.png.

E por último, use o método .putString() nessa referência passando os metadados.

Você está passando a seqüência base64 (como imageURL), então você informa a Firebase que está enviando uma string base64 e, finalmente, você diz que é uma imagem do tipo png.

Isso criará uma pasta chamada selfies dentro de seu estrutura de armazenamento e dentro, salva o arquivo andre.png.

Comentários