DEV Community

Cover image for Integração do Cloudinary ao seu projeto Django gratuitamente
Augusto Domingos
Augusto Domingos

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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"),
)
Enter fullscreen mode Exit fullscreen mode

Passo 3:

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

from cloudinary.models import CloudinaryField
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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":

dashboard do cloudinary

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

gerar uma api key

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
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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:

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

Top comments (0)