Firebase com Android: armazene imagens com o Cloud Storage

Instalando o Cloud Storage no App Android - Apresentação

Eu sou o Alex Felipe, instrutor da Alura e vou apresentar para você o curso de Android com Cloud Storage. Para esse curso, eu vou assumir que você já tenha alguns pré-requisitos para conseguirmos evoluir e aproveitar mais o conteúdo do Firebase Cloud Storage.

Por exemplo, eu já vou assumir que você sabe o que é o Firebase, como criar um projeto no Firebase e também configurar um aplicativo no Android. Também vou assumir que você sabe integrar o Firebase com o APP Android, como o caso de adicionar SDKs, bibliotecas e assim por diante.

Por fim, nós também vamos trabalhar com tasks do Firebase, vou assumir que você conhece isso também e como criar um banco de dados do Firestore.

Temos cursos sobre esses assuntos, especificamente, e você não precisa fazer todo o curso para poder pegar essas informações. Caso você não queira fazer todos os cursos com esses conteúdos, basta ver esses tópicos que mencionei, eles serão o suficiente para você acompanhar o curso sem nenhum problema.

Agora que eu passei os pré-requisitos, nosso próximo passo é conhecer o que vamos desenvolver durante o curso e depois falar a respeito das técnicas que utilizaremos.

Para esse curso, usarei como exemplo um aplicativo chamado de Alura Square, que tem o objetivo de fazer avaliações de lugares. Nesse aplicativo, temos uma lista de postagens que indicam lugares, por exemplo, o Rio de Janeiro com uma nota de cinco estrelas, um comentário escrito "Muito bom!" e uma imagem do Cristo Redentor. Em seguida, temos São Paulo, com nota de cinco estrelas, um comentário "Show!" e uma imagem da cidade.

No aplicativo, além de mostrar esse conteúdo, também conseguiremos fazer esse conteúdo, isto é, conseguiremos postar lugares. Temos um formulário que já virá pronto para você, vamos fornecer esse projeto para você não precisar se preocupar.

Dessa forma, adicionaremos imagens da galeria do nosso dispositivo e falaremos a respeito do lugar que colocamos. Por exemplo, eu posso colocar uma imagem é de Paris e escrever o nome do lugar “Paris”. Depois, vou comentar "Lugar maravilhoso" e darei uma nota de cinco estrelas. Vou salvar e o aplicativo conseguirá salvar, ele mostrará essa técnica que chamamos de placeholder e nos disponibilizará o post.

Da mesma maneira, conseguiremos editar. Se você quer colocar outra imagem, por exemplo, uma fotografia de Londres, você pode colocar também. Pode editar e o aplicativo será capaz de fazer esse processo.

No geral, ele conseguirá lidar com esse conteúdo do usuário (que são as imagens), utilizando o serviço do Firebase, o Cloud Storage. Trata-se de um CRUD completo, no qual conseguiremos também remover as postagens. Esse comportamento de CRUD, nós vamos fazer.

O grande foco não é apenas o produto, é também a parte técnica, que veremos a seguir. Isso está relacionado, justamente, a saber e entender o que é o Cloud Storage. Vamos checar na documentação o que ele é, por que utilizá-lo, como ele funciona e os principais destaques.

Vamos aprender a lidar com o nosso projeto do Firebase no console para entender o que é o bucket, como as imagens são salvas. No caso, não está aparecendo a minha imagem, mas, se voltamos em Files, ele mostra as imagens que foram salvas. Vamos também trabalhar com essa parte do Cloud Storage, vamos entender como funciona para entregar o aplicativo daquela maneira como vimos.

O nosso objetivo, de uma maneira macro, é justamente integrar todo esse serviço que estamos estudando com a arquitetura do Android. Isso envolve navigation, viewModel, repository. Agora também estamos trabalhando com coroutines, estudaremos bastante sobre isso. E aquelas técnicas como o placeholder, que eu mostrei rapidamente no aplicativo para você.

Estudaremos como evitar alguns problemas e até mesmo algumas rotinas que, às vezes, não são tão claras e, quando trabalharmos mais com aplicativo, notaremos que é necessário, principalmente para esse tipo de contexto, quando estamos trabalhando com imagens, arquivos no nosso usuário.

Esse vai ser o nosso objetivo no curso. Eu espero que você esteja animado e eu conto com a sua presença.

Instalando o Cloud Storage no App Android - Cloud Storage

Como primeiro passo, vamos entender os principais motivos para considerar o uso do cloud storage em um aplicativo Android. Vamos acessar a página da documentação, na "Introdução", que terá informações para concluirmos por que essa ferramenta faz sentido.

Logo de início, já percebemos que a primeira mensagem que é dita do Cloud storage é que conseguimos armazenar e exibir o conteúdo do nosso usuário. Isso significa que conseguimos armazenar e exibir fotos, vídeos, áudios e arquivos de uma maneira geral que são os conteúdos do nosso usuário, tudo isso dentro do nosso aplicativo.

Perceba que esse tipo de solução será uma solução para lidar com arquivos do nosso usuário. Agora, você pode está se perguntando por que vamos considerar essa ferramenta, sendo que também conseguimos fazer isso de um dispositivo do nosso usuário. O principal fator é justamente por essa ideia de cloud, essa ideia de manter um armazenamento em nuvem. O próprio nome já é isso, armazenamento em nuvem.

Com o cloud storage, a grande vantagem é evitarmos os problemas que temos ao manter as coisas diretamente no aplicativo do nosso usuário, como formatar, desinstalar o aplicativo, perder o celular, tudo isso fica suscetível, quando mantemos apenas no dispositivo do usuário.

Com o cloud storage, se essas coisas acontecerem, temos a possibilidade de manter essas informações disponíveis para o nosso usuário, caso ele obtenha um novo celular, caso ele reinstale o aplicativo e assim por diante. Esse é o principal motivo pelo qual vamos considerar essa ferramenta durante o curso.

Claro, tem outros pontos importantes para conhecermos nossa ferramenta, até mesmo para você avaliar se será uma ferramenta importante para você ou não. São esses os pontos que vamos fazer a respeito agora.

Como vimos, armazenamos esses arquivos, porém temos alguns destaques, como essa parte de “objetos poderosos”, que é justamente a ideia de armazenarmos arquivos tanto pequenos como grandes, que o cloud storage dará conta.

Na documentação, é dito que conseguimos fazer isso de uma maneira simples e econômica, porque tudo foi criado para escalar com o Google. Toda essa plataforma que temos por trás para trabalhar com o Firebase Cloud Storage já foi preparada para conseguirmos mandar diversos arquivos, para conseguirmos fazer diversos downloads e assim por diante. É uma ferramenta bastante interessante, porque é online e também tem esse tipo de característica.

Novamente, é uma garantia da Google. Se você quer ter esse tipo de garantia, meio que vai ser uma confiança com a empresa. Esse é um ponto bastante importante de você também considerar. Outro ponto que podemos ver é que conseguimos fazer tanto upload como download dos arquivos, independentemete da qualidade de rede e também aplicando a segurança que temos da Google.

Quando falamos da independência da qualidade de rede, é justamente nas situações que a rede começa a apresentar problemas. Se é uma rede mais lenta, uma rede que apresentou uma falha, o cloud storage promete trabalhar e funcionar bem nesse tipo de situação.

Para simular o tipo de comportamento que é prometido: se você está enviando o arquivo e, de repente, você perde aquela rede que estava mandando esse arquivo, quando voltar, ele ainda mantém no mesmo estado anterior. Eu estou passando essa informação porque não será um dos tópicos que vamos explorar durante o curso, o nosso objetivo é fazer a primeira introdução, a primeira integração com o aplicativo Android.

Por isso, eu já estou destacando e deixando claro para você ter esse tipo de informação e se, de repente, é algo do seu interesse, você pode explorar a documentação e explorar as possibilidades que o cloud storage promete entregar.

Na parte de segurança, é pelo fato que conseguimos restringir o envio e downloads de arquivos, a partir da integração com o Firebase Authentication. Se você quer restringir, será a partir do Firebase Authentication que você terá esse tipo de restrição ou controle de acesso.

Esses são os principais pontos que temos nessa ferramenta e até mesmo é dito. No final do segundo parágrafo, a partir desse SDK, conseguimos mandar imagens, áudio, vídeos e outros conteúdos gerados pelo usuário. Durante o curso, o nosso foco será apenas em imagens. Se o seu interesse é em áudios ou vídeos, você pode também consultar a documentação e ver como é possível fazer isso.

No final, vemos que, para considerar o uso de visualizações desses arquivos de uma maneira mais administrativa, teremos acesso a esse Google Cloud Storage, que seria a ferramenta online que vai manter esses arquivos para nós. Se você tem esse interesse, você também pode acessá-la pela documentação, porque vai ser uma das coisas que não vamos explorar durante o curso também.

Agora, para concluir, vamos falar dos principais pontos e um pouco como funciona. Basicamente, os principais pontos seriam: operações confiáveis, segurança potente e a alta escalabilidade.

Quando falamos das operações confiáveis, é justamente aquela característica de mandar uns arquivos e receber esses arquivos independentemente da qualidade de rede. Essa é a questão da operação confiável, quando estamos utilizando o Cloud storage, é esse tipo de comportamento que se espera nesse tipo de característica, que são as operações confiáveis.

Na segurança potente, é justamente porque conseguimos fazer aquele controle utilizando o Firebase Authentication. Na alta escalabilidade, é justamente na situação na qual conseguimos armazenar e fazer o download dos arquivos, independentemente da escala, até mesmo a escala é de exabyte, conseguimos fazer isso.

Claro, tem alguns pontos que são muito importantes você considerar, porque se checarmos os preços, trata-se de uma ferramenta paga. Ela é paga, se a utilizarmos com mais frequência do que é o tempo gratuito. Na página de "Preços" no menu superior, temos uma tabela explicativa, com uma coluna referente ao uso gratuito. Mas os valores podem mudar, a depender do momento.

Atualmente, no momento em que estou gravando, temos armazenamento de 5 GB, download diários de 1 GB, 20 mil de operações de upload, 50 mil de operações de download. Se você estiver nessa faixa, nesse range tudo bem, você pode utilizar a ferramenta gratuita que não haverá nenhum problema.

Como notamos novamente, ele fala sobre essa escala exabyte e, a partir do momento em que você está considerando isso, você está também utilizando um plano pago. Tome bastante cuidado para que você não acredite apenas que será uma solução gratuita, independente do que você fizer. Dependendo do que você for trabalhar com ela, você terá que consultar o serviço em questões pagas. É um fator importante.

Agora que vimos os três principais recursos, é muito importante entendermos como funciona. O funcionamento é muito simples, é como se estivéssemos utilizando outros SDKs do Firebase. Vamos ter um SDK do Firebase Cloud Storage que vai permitir acessar os principais comportamentos de download, upload e assim por diante. Tudo isso utilizando o aplicativo Android apenas.

Não tem nenhum tipo de necessidade de um servidor externo, alguma configuração de backend e nem nada, é tudo direto do aplicativo Android ou, se você estivesse utilizando outros clientes, essa é a ideia do aplicativo cliente.

Agora que conhecemos essas informações do cloud storage, a seguir, vamos trabalhar no nosso projeto para termos a primeira introdução do projeto e, logo a seguir, já façamos as primeiras configurações para integrar o nosso aplicativo com o cloud storage.

Instalando o Cloud Storage no App Android - App Android

Agora que entendemos os motivos para utilizar o cloud storage no aplicativo Android, o nosso próximo passo é conhecer o aplicativo Android que iremos utilizar no curso.

Vouu vou acessar o Android Studio e, dentro dele, vamos ter acesso a esse aplicativo que é chamado de AluraSquare. Basicamente, o objetivo desse aplicativo é que nos permitir colocar avaliações de lugar, para falar se um lugar foi bacana ou não foi e assim por diante.

Agora, vamos explorar as funcionalidades desse aplicativo, ver como funciona o CRUD, porque ele já tem o CRUD dessas avaliações: inserção, adição, remoção e a listagem. E, a seguir, vamos ver um pouco mais da estrutura que foi utilizada nesse aplicativo, o AluraSquare.

Vamos começar com as funcionalidades. Quando você executar no seu computador, aparecerá uma tela inicial no dispositivo que você utilizar. Essa tela inicial tem o texto falando que não tem nenhum tipo de avaliação, porque essa tela é a lista das avaliações e, quando não tem nada, ele nos mostra esse feedback.

Ao clicar no floating action button no canto direito inferior, conseguimos acessar um formulário que será o primeiro comportamento que teremos disponível para adicionar as nossas avaliações. Vou adicionar uma avaliação de teste para vermos como funciona.

O nome do local será “teste”, vou selecionar 4 estrelas de 5 (que representam a nota desse local). No campo em que me pergunta "O que achou?", vamos escrever a mensagem “teste”, porque hoje a minha criatividade está muito boa.

No canto direito superior, vou clicar no ícone de envio e já percebemos que ele consegue salvar a informação para nós. Veja que é o uso é bastante simples, a ideia não é deixar complexo e sim ter algo bem simples e objetivo para trabalharmos com o que precisamos que vai ser a integração do cloud storage.

Só para você ter mais informações a respeito do que aconteceu por debaixo dos panos, basicamente, eu utilizei o firestore do Firebase para poder armazenar esse dado. Eu vou mostrar para você, dentro do console do aplicativo que eu criei para o AluraSquare, o dado que foi salvo. Eu fui em "Regras" e voltei para "Dados" e ele mostra a informação do nosso post, ele está representado na coleção de post.

Se você quiser consultar essas informações ao configurar o Firebase com aplicativos do pacote que terá no exercício de preparação de ambiente, você pode vir no firestore para você verificar essa informação.

Um ponto que é muito importante considerar: dado que você vai fazer a sua configuração também, você vai precisar adicionar o arquivo do Google services que é aquele JSON que você pega no projeto do Firebase. Ele não estará disponível de início, você tem que colocar o do seu projeto. No meu caso, já está porque eu já tinha feito esse setup inicial.

Além de inserção, conseguimos fazer também edição. Vou colocar “teste 123” e cinco estrelas. Vamos ver que a edição ocorre, se voltamos, também acontece a edição. Fazemos mais uma adição, “outra avalição”, colocando dois e meio e aqui “outra mensagem da avaliação” nós também vamos adicionar outra postagem. Se olhamos essa outra postagem, também foi adicionada, tudo isso utilizando o firestore.

Se você até agora não trabalhou com o firestore e nem estudou, fique à vontade em manter o curso sem nenhum problema. O objetivo de ter utilizado o firestore era para não ter necessidade de usar uma API, ficar vinculado a uma API para fazer essa solução. Eu já usei todas as ferramentas do Firebase para evitar essa integração a outra ferramenta externa, porque não tem necessidade. Se você tiver interesse, temos um curso de firestore que mostra como é possível trabalhar com essa ferramenta.

Por fim, além de editar e fazer a inserção, conseguimos clicar nessa “lixeira” que permite a remoção, colocando um dialog, perguntando se você quer remover ou não. Se você coloca “não”, ele não faz nada; mas, se você coloca “sim”, ele remove. Remove tanto no aplicativo como também no firestore. A estrutura básica em relação a funcionalidade, features são essas.

Agora o nosso próximo passo é conhecer como está a estrutura do aplicativo em relação a como foi feita a arquitetura, quais foram as bibliotecas que utilizamos, a estrutura e assim por diante. Vamos começar.

Podemos começar justamente no aspecto de Android pelo nosso navigation, usamos também o navigation para fazer a configuração de tela. Temos o nosso nav.graph.xml para fazer o gráfico de navegação que já mostra exatamente a lista e o formulário.

É essa a configuração que temos para fazer essas interações das telas. Se vocês também não conhecem o navigation, não é uma coisa que você precisa se preocupar, porque não vamos trabalhar com essa parte de navegação, porque já está pronta. Mas caso tenha interesse também, temos curso na plataforma falando a respeito de navigation.

Além dessa parte do navigation, se pegamos os pacotes, notamos que logo de cara temos esse DI que representa a injeção de dependência, dependency injection, e estamos utilizando aqui o Koin, que é uma ferramenta que permite fazer a injeção de dependências aqui no Kotlin, sendo mais específico, no Android.

Toda a configuração para criar um view model, repositório e assim por diante, foi feita aqui com o Koin. Você também pode fazer outras configurações, fique à vontade.

Além disso, temos as extensions, que vai ter exclusivamente uma única função para o snackbar, porque quando removemos temos o snackbar mostrando para nós. Posso mostrar novamente para vermos, ele vai remover, "post foi removido". Estou reutilizando essa função para todo mundo que tenha uma view, por isso, eu criei essa extension.

A seguir, temos o modelo que representa o nosso post, as informações que o nosso post tem. Temos a parte do repositório que vai ter todo o código aqui para poder comunicar-se com o firestore e, logo mais para frente, com o cloud storage. Em seguida, temos essa parte de UI, que vai ter a configuração do fragments, vai ter a configuração do recycler view, que é o que estamos utilizando também.

Por fim, os views models para colocar a lógica de cada uma das telas. No caso, estou utilizando o conceito que utilizei lá no curso de navigation que é essa parte do EstadoAppViewModel para poder determinar se uma tela vai ter um componente ou não. Como é o caso da lista que não tem um App bar, mas na parte de formulário já tem. Ele foi utilizado justamente para fazer essa configuração global, como já vimos nesse curso.

A seguir, também temos a nossa activity que é utilizada justamente para ser o ponto central do aplicativo e determinar onde vai acessar as telas. Quais os pontos principais que eu quero destacar, além da apllication que faz a configuração inicial do Koin?

Os principais estão relacionados ao repositório, porque nesse repositório eu usei uma técnica um pouco diferente da que eu venho utilizando durante os cursos. É uma técnica que está sendo bastante comum no dia a dia da galera que desenvolve para Android, que é a utilização de coroutines quando fazemos alguma chamada externa ou alguma chamada que tende a demorar.

É diferente, porque nos outros cursos ou eu fazia a criação do LiveData ou até mesmo eu utilizava o KTX para criar um LiveData para nós dentro coroutines. Neste caso, basicamente, eu já usei diretamente a suspend function e, dado que estou utilizando a suspend function, significa que quem utilizar o repositório, ele que vai criar lá a coroutine e vai consumir esses métodos.

Essa é uma das diferenças que temos: que agora estamos utilizando suspend function e os views models que, consequentemente, comunicam-se com os repositórios, estão criando lá as suas coroutines estão fazendo esse trabalho de estruturar coroutines.

Também, além de suspend function, estou utilizando esse callbackFlow porque vai ser uma técnica que vai permitir transformar chamadas que são em callback, como é o caso dessas tasks do Google, em coroutines. Porque, nesse add SnapshottListener, pelo menos até o momento em que eu estava fazendo implementação, ele não tem uma integração com coroutines, assim como os outros comportamentos têm.

Na linha 30 do repositóprio, temos esse await, isso acontece porque também adicionei um módulo. Veja que nesse add SnapshottListener, na linha 32, pelo menos no momento em que eu estava implementando, não tinha e para fazer isso possível eu tive que utilizar esse callbackFlow. Ele foi utilizado justamente por isso e aí ele permite com que nos comuniquemos como se fosse uma coroutine. Vamos ter acesso a esse callbackFlow e podemos nos comunicar como se fosse uma chamada de uma suspend function que ele nos disponibiliza.

Basicamente, ele vai fazer chamadas do nosso listener cada vez que usarmos esse offer, se fazemos esse offer ele faz uma comunicação devolvendo um valor, nesse primeiro é se tem um erro e nesse outro é quando tem um sucesso, tem um valor disponível para nós.

Tanto que até estou utilizando esse resultado, que é uma classe que eu criei justamente para ter dois tipos de respostas das coroutines, o resultado “sucesso” é para quando for sucesso e o “erro” é para quando der algum problema. Sim, eu utilizei também essa técnica.

Era basicamente isso que eu queria passar para vocês em relação à questão do nosso repositório. Só para poder deixar um pouco mais claro, no nosso formulário post view model, temos uma possível representação dessa implementação. Em "buscaPorId" que está utilizando também o callbackFlow, temos acesso a esse asLiveData, ele transforma toda aquela estrutura que vimos que vai ter a ideia de coroutines em LiveData para nós, não precisamos fazer essa conversão para poder se comunicar com os nossos LivecycleOwner.

É uma função bem interessante que temos disponível para nós. Além disso, quando buscamos, por exemplo, esse "salva" lá do repositório com a suspend function podemos criar o LiveData como eu tinha feito em algum outro curso, usei esse LiveData lá no repositório. Aqui estou utilizando no viewModel porque ele que vai ficar responsável por fazer essa criação para nós e mudar para a nossa tela, seja fragment or activity, tudo isso dentro do escopo de viewModel.

Se aqui acontece alguma coisa que o viewModel não está mais disponível, ele vai cancelar para nós essas chamadas, que é a parte mais interessante em usar essa solução, esse escopo do viewModel.

De uma maneira bem clara, de uma maneira bem objetiva, essas são as coisas novas que eu adicionei em relação a código para você não ficar perdido. Se você tiver interesse, fique à vontade para entrar em contato conosco, eu posso também deixar alguns conteúdos, algumas referências para você entender um pouco mais como funciona.

O comportamento é muito similar ao que já vimos, por isso que não é algo que vai te impedir de fazer o curso se você não souber. É mais para poder introduzir para você.

Agora para finalizar, eu vou acessar o build.gralde para vermos as dependências que estamos utilizando logo de cara.

Além dessas dependências que são comuns que vemos que é KTX e assim por diante, também vamos utilizar o navigation, estamos utilizando esse firestore o Analytics do firebase e também temos o KTX dos livedata com lifecycle, do runtime com lifecycle, viewmodel com lifecycle, justamente para ter acesso aquelas chamadas que vimos ali de coroutines.

É aquele LiveData que está no nosso viewModel, é esse escopo do viewModel. Tudo isso é porque estamos usando aquelas bibliotecas. Voltando no nosso build.gradle, estamos acessando o coil que é uma biblioteca para fazer o uso de imagens dentro do Android. Se queremos fazer download de alguma URL ela vai facilitar isso para nós. Vamos utilizar durante o curso, por isso eu já deixei disponível.

Nós também temos esse coroutines play services que significa que podemos utilizar coroutines com as tasks do firebase. Novamente, pegando o post de postare, vemos que acessamos o await que é uma coroutine, uma suspend function justamente porque estamos utilizando aquela biblioteca que vimos no play services. Se, de repente, você criar um projeto seu e não tiver acessível, é porque está faltando essa biblioteca.

Agora, para finalizar, nós também utilizamos a dependência viewBinding, que é uma nova técnica na qual conseguimos buscar as views de um determinado arquivo de layout. Estamos fazendo isso porque recentemente, não tão recente assim, mas pode ser considerado recente, porque foi esse ano, a Google anunciou uma nova técnica para buscar essas views que é chamada de viewBinding.

A partir disso o synthetics, que era uma coisa comum, que utilizamos, ficou obsoleto. Agora não vamos mais utilizar synthetics, muito provavelmente se você criar um projeto não vai ter o synthetics também é o recomendado é utilizar o viewBinding.

Se pegamos aqui o nosso fragment, como é o caso do próprio formulário mesmo, estamos usando esse formulário PostBinding que é uma referência do viewBinding que ele representa o formulário post. Tudo isso é criado automaticamente ao utilizar o viewBinding e a partir dessa referência de binding aqui conseguimos acessar os componentes que desejamos.

Por exemplo, eu quero acessar o nosso post local que é justamente o local que vem do formulário do post, vamos usar o binding-formulariopostlocal porque estamos utilizando o viewBinding.

Essas são as informações que eu quero passar para você saber da parte técnica de funcionalidades, features para não ficar perdido porque se de repente você quer navegar no projeto, modificar, fazer alguma alteração que você desejar que é possível você pode fazer isso, fica um pouco mais fácil de você trabalhar com o projeto, mesmo que você tenha determinados conhecimentos aqui.

Agora que tivemos essa introdução, a seguir, já vamos começar a fazer a nossa primeira integração com o cloud storage.

Sobre o curso Firebase com Android: armazene imagens com o Cloud Storage

O curso Firebase com Android: armazene imagens com o Cloud Storage possui 167 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Instalando o Cloud Storage no App Android
• Criando posts com imagens
• Melhorando a experiência do usuário
• Alterando imagens do post
• Aplicando últimos ajustes no projeto