Angular com Cloudinary
Quero dar uma visão geral Cloudinary, que é uma plataforma que hospeda e processa mídias digitais. As principais mídias são imagens e vídeos.
Quando digo que ele pode processar suas imagens e vídeos, não estou limitando a efeitos visuais, ele pode detectar texto (OCR), fazer algo tagueamento (existe essa palavra?), detectar celebrações como o natal, detectar rostos, auto moderação, e a lista de “Add-ons” vai crescendo com o tempo.
Abaixo, você pode ver uma imagem que demonstra como através de uma simples url, você manipula uma imagem retangular e a transforma em um avatar, esta url pode ser montada por você, ou pode utilizar uma das APIs disponíveis para fazer isto para você.
Há outras opções, você pode utilizar um componente feito para Angular para realizar a mesma manipulação de imagem acima.
Há várias opções para fazer o upload das suas imagens para esta plataforma. De uma olhada no endereço abaixo, que mostra as opções para realizar este trabalhado em um app Angular. É claro que você pode enviar a imagem para o back e a partir dai enviar para o Cloudinary.
Se você tentar utilizar o widget, apesar de funcionar, há uma limitação, você não consegue sobrescrever uma imagem ou remover do servidor do cloudinary depois de enviado. A documentação diz que se enviar uma imagem com o public_id igual de uma existente, ele não irá funcionar utilizando o widget.
Se você decidir utilizar qualquer forma de enviar suas fotos diretamente pelo navegador, saiba que só é possível enviar, excluir ou alterar não é. E você estará sujeito ao risco de alguém replicar sua configuração e começar a subir imagens na sua conta sem sua autorização.
Integrando Angular com o widget — um breve tutorial
Para integrar sua aplicação feita em Angular, inclua no seu index.html o script:
<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
E na seu componente, que irá abrir o widget utilize o código abaixo:import {Component, OnInit} from '@angular/core';
...
import {widgetCloudinary} from 'widget.cloudinary';//truque para enganar o compilador
declare var cloudinary: any;@Component({
selector: 'app-detalhe-grupo',
templateUrl: './detalhe-grupo.component.html',
styleUrls: ['./detalhe-grupo.component.css']
})
export class DetalheGrupoComponent implements OnInit {constructor() {
}openCloudinaryWidget() {
widgetCloudinary['cropping'] = ['custom'];
widgetCloudinary['tags'] = ['capa do grupo'];
widgetCloudinary['folder'] = 'capa_do_grupo';
widgetCloudinary['public_id'] = 'nomeDaImagemNoServidor;cloudinary.openUploadWidget(widgetCloudinary,
function (error, result) {
console.log('error ', error);
console.log('result ', result);
});
}}
widget.cloudinary.ts
export const widgetCloudinary = {
// https://cloudinary.com/documentation/upload_widget
cloud_name: 'seu_cloud_name_cadastrado_na_plataforma',
upload_preset: 'x7px2byr', //crie o seu preset, não é automático
multiple: false,
max_files: 1,
show_powered_by: false,
resource_type: 'image',
sources: ['local', 'url'],
text: {
'powered_by_cloudinary': 'Portal da inovação',
'sources.local.title': 'Meus arquivos',
'sources.local.drop_file': 'Arraste o arquivo aqui',
'sources.local.drop_files': 'Arraste os arquivos aqui',
'sources.local.drop_or': 'ou',
'sources.local.select_file': 'Selecione o Arquivo',
'sources.local.select_files': 'Arquivos',
'sources.url.title': 'Endereço Web',
'sources.url.note': 'Endereço publico da imagem',
'sources.url.upload': 'Upload',
'sources.url.error': 'Please type a valid HTTP URL.',
'sources.camera.title': 'Camera',
'sources.camera.note': 'Tenha certeza que seu navegador está habilitado para capturar fotos, posicione-se em frente a camera e capture a foto:',
'sources.camera.capture': 'Capture',
'progress.uploading': 'Uploading...',
'progress.upload_cropped': 'Upload',
'progress.processing': 'Processando...',
'progress.retry_upload': 'Tente novamente',
'progress.use_succeeded': 'OK',
'progress.failed_note': 'Some of your images failed uploading.'
}
};Utilizando as configurações do widget.cloudinary.ts você irá abrir o widget com o visual abaixo:
Ao escolher a imagem, você obterá uma resposta como esta:
Após o upload você poderá conferir se a imagem subiu para a plataforma olhando o Media Library, depois de logado na plataforma é claro ;P
Minha experiência ao recuperar a imagem utilizando a API em Java e a biblioteca em Angular
Para listar, recuperar, utilizar as transformações de imagens você tem o projeto oficial chamado: cloudinary_angular disponível. É claro que você precisará salvar o retorno do upload para conseguir recuperar a imagem, você pode tentar utilizar a biblioteca para Angular.
Devido a desatualização da documentação, em meus testes, preferi fazer a recuperação e manipulação da imagem via backend utilizando a API em Java de maneira a obter uma url e então exibir no front escrito em Angular. Não vou descrever a API em Java aqui, pro texto não ficar muito grande, se você tiver interesse me escreve que faço outro post destinado a isto.
Conclusão
É um serviço robusto, rápido, escalável, e particularmente, não conheço outro melhor no seu segmento. A manipulação de imagens é rápida e fácil de ser utilizada.
Porem……
Se você quer substituir uma imagem ou apagar uma existente, não utilize o widget, é necessário criar o seu backend pra isto.
A documentação do cloudinary é confusa, algumas coisas não funcionam como está na documentação, precisa de experimentação e as vezes olhar o fonte da api deles.
O suporte a integração com Angular é ruim, não consegui fazer funcionar com oque tem na documentação e o código de exemplo não roda 100%, a estratégia de versionamento da api é ruim por levar a versão do angular no nome do projeto.
A integração com Java e NodeJS funciona bem pode utilizar com tranquilidade.
Gostou? Quer saber mais sobre Angular? Conheça um dos meus cursos disponíveis….
