Integração do Cloudinary ao seu projeto Django gratuitamente

No tutorial passado, você aprendeu a hospedar um site Django de maneira gratuita no Vercel. Mas o que acontece se o seu site precisar fazer upload de arquivos, como fotos ou vídeos? Normalmente, você teria um diretório de mídia no seu projeto para armazenar e renderizar esses arquivos, pois não é uma boa prática armazenar fotos ou vídeos diretamente no banco de dados.

No entanto, a Vercel não permite escrita na plataforma. Como resolver isso? É aí que entra o Cloudinary, um serviço de upload de imagens e vídeos com um plano gratuito oferecendo 25 GB de storage, ideal para o seu projeto que necessita de armazenamento de mídias.

Neste tutorial, você aprenderá a integrar o Cloudinary ao seu projeto Django, aproveitando a SDK que esta plataforma oferece para Python.

Implementando Cloudinary no seu projeto Django

Para seguir com esse tutorial, basta ter um projeto Django funcionando, seja ele já hospedado na Vercel ou não, pois o método é o mesmo.

Passo 1:

A primeira coisa é instalar a SDK do Cloudinary no seu ambiente de desenvolvimento usando:

pip install cloudinary

Dica: Se for na Vercel, basta adicionar cloudinary no requirements.txt do seu projeto e fazer o build (redeploy) novamente. Caso esteja controlando versões com o Git, o commit dessa alteração já vai automaticamente buildar na plataforma Vercel e estará instalando a biblioteca usando o nosso script bash que criamos anteriormente.

Passo 2:

No seu settings.py, importe o cloudinary e adicione a seguinte configuração:

import cloudinary
import cloudinary.uploader
import cloudinary.api

cloudinary.config(
  cloud_name = os.getenv("CLOUD_NAME"),
  api_key = os.getenv("CLOUD_API_KEY"),
  api_secret = os.getenv("CLOUD_SECRET_KEY"),
)

Passo 3:

No seu models.py faça o seguinte import:

from cloudinary.models import CloudinaryField

E no campo de imagem em qualquer modelo seu que faz upload de imagens, use o CloudinaryField além de models.ImageField (padrão do Django), veja o exemplo de um modelo Post:

# models.py

class Post(models.Model):
    title = models.CharField(max_length=100)
    description = models.CharField(max_length=250)
    image = CloudinaryField("image") # nesta linha

    def __str__(self):
        return self.title

Passo 4:

Agora você vai configurar váriaveis de ambiente que chamaste no segundo passo.
Para isso, crie um arquivo .env no diretório raíz do seu projeto com as seguintes variáveis:

CLOUD_NAME=seu cloud_name
CLOUD_API_KEY=sua api_key
CLOUD_SECRET_KEY=sua secret_key

Dica: Se estiver usando a Vercel, você pode adicionar variáveis de ambiente diretamente nas configurações do projeto na dashboard da plataforma. Além de criar um arquivo .env localmente, acesse a dashboard da Vercel e adicione as variáveis com os respectivos valores no seu projeto.

Falando em valores, você precisará pegar eles na sua conta do Cloudinary, para isso, acesse o site oficial, e crie uma conta se não tiver uma.
Tendo acesso à Dashboard da sua conta, clique em "Go to API Key":

Na próxima tela, clique em "Generate API KEY" para obter suas chaves de acesso:

Com isso, você terá os valores necessários para preencher seu arquivo .env: CLOUD_NAME, CLOUD_API_KEY e CLOUD_SECRET_KEY.

Neste tutorial, estamos usando o os.getenv para acessar as váriaveis, e para funcionar, precisamos da biblioteca python-dotenv. Então, caso não tenha essa biblioteca no seu ambiente, faça a instalação com:

pip install python-dotenv

E no princípio do settings.py do seu projeto, faça a importação dela para permitir o uso:

# settings.py

import os
from dotenv import load_dotenv
load_dotenv()

Tudo pronto! Você configurou o Cloudinary no seu projeto, permitindo o upload e host de imagens diretamente na plataforma. Parabéns por ter concluído!
Agora, para exibir essas imagens no seu projeto, você pode configurar suas views e templates para renderizar as URLs das imagens em suas páginas.

Links Utéis:

• Projeto usado para configuração de Cloudinary nesse tutorial: https://github.com/AghastyGD/django-cloudinary-demo.git - Inclusive, neste repositório adicionei views e templates de exemplo para demonstrar uma imagem hospedada no Cloudinary. Você pode usá-lo como referência.

• Documentação do Cloudinary para uso com Python: https://cloudinary.com/documentation/django_integration - Recomendo a leitura, pois oferece diversas funcionalidades adicionais, como compressão de imagens, transformações e muito mais.

Se precisar de mais ajuda ou tiver dúvidas, deixe um comentário. Te vejo na próxima vez 👋.