Django: persistência de dados e Admin

Lidando com dados - Apresentação

Boas-vindas ao curso de Django: persistência de dados e admin! Me chamo Bruno Divino, faço parte do time de instrutores da Alura.

Bruno Divino é uma pessoa de pele clara e olhos verdes. Tem os cabelos castanhos curtos, usa bigode e cavanhaque. Veste uma camiseta preta, está sentado em uma cadeira preta e, ao fundo, há uma parede com a iluminação na cor azul com a inicial "A" do lado esquerdo e uma planta em um vaso branco, à direita.

Nesse curso, vamos avançar no projeto que iniciamos no curso anterior.

Para quem é o curso?

Para pessoas interessadas em ser uma pessoa desenvolvedora na comunidade Python. E também, que deseja aprender como podemos usar o Django para desenvolver uma aplicação web, assim como é feito no mercado de trabalho.

Pré-requisitos

• Orientação a objetos
• Curso de Django: templates e boas práticas

A orientação a objetos é o paradigma clássico da linguagem Python, essencial para entendermos conceitos importantes do projeto que estamos desenvolvendo. Desenvolveremos algo como os models de banco de dados, que usam a estrutura de classe para se comunicar.

Projeto

Endereço do site: http://127.0.0.1:8000

Avançaremos no desenvolvimento do site do Alura Space, e em "Navegue pela galeria", temos algumas imagens. Podemos acessar cada imagem clicando na desejada, seremos redirecionados para uma página com um menu do lado esquerdo: "Home", "Mais vistas", "Novas" e "Surpreenda-me", com a imagem centralizada na tela e seu respectivo nome, a legenda e uma breve descrição abaixo.

Endereço do instrutor para acessar ao site do Django Admin: 127.0.0.1:8000/admin/

Outra coisa interessante que vamos entender é a página do Django Admin. Sendo uma página de administração que o Django nos fornece, e aprenderemos a personalizá-la, como podemos usá-la ao nosso favor. E também, como podemos usar o CRUD que o Django nos fornece a partir do Django Admin.

Espero que essa apresentação tenha despertado o seu interesse para continuar esse projeto junto comigo.

Bons estudos!

Lidando com dados - Preparando ambiente

Vamos carregar o projeto que trabalhamos no curso anterior, o Alura Space. Faremos da mesma forma que uma pessoa desenvolvedora que está iniciando agora em um projeto que nunca foi baixado na máquina. Geralmente pegamos o projeto no GitHub.

Repositório no GitHub do projeto anterior

Usaremos o terminal para puxar o projeto do repositório no GitHub para uma pasta que criaremos. No repositório, primeiro, precisamos verificar se estamos na branch default (em português, "ramo padrão").

Para verificarmos isso, clicamos no botão referente às branches, no caso "aula_5" no canto superior esquerdo, abaixo do menu superior principal. Ao clicarmos, será expandido um pop-up e observe que do lado direito de "aula_5" temos informando que é o repositório "default".

Agora, selecionamos o botão verde "Code" do lado superior direito. Na aba "HTTPS", copiamos a URL do GitHub. Esse link nos aponta para esse repositório.

https://github.com/guilhermeonrails/alura_space.git

Após copiar, vamos até a área de trabalho do nosso computador e criaremos uma nova pasta nomeada "projetos", em que colocaremos todos os projetos de código. Clicando com o botão direito do mouse na pasta "projetos", escolhemos a opção "Abrir no terminal". Ou seja, abrimos o terminal dentro da pasta "projetos".

Usaremos o comando git (sendo o sistema de versionamento de código) e depois clone: git clone. Assim, ele fará um clone do projeto daquele repositório do GitHub. Após o git clone, teclamos "Ctrl + Shift + V", sendo o atalho para colarmos a URL que copiamos do GitHub.

git clone https://github.com/guilhermeonrails/alura_space.git

Em seguida, apertamos "Enter". Com isso, o projeto que copiamos a URL do GitHub será clonado para a pasta "projetos".

Podemos fechar o terminal. Na área de trabalho do computador, vamos clicar na pasta "projetos", onde teremos o arquivo "alura_space". Ao clicarmos na pasta "alura_space" temos as diversas pastas do projeto, como a ".git" e "galeria".

Entretanto, não trabalharemos com essas pastas no diretório, e sim usando o Visual Studio Code. Abrindo o VSCode, vamos selecionar, arrastar e soltar a pasta do "alura_space" para a IDE (Integrated Development Environment).

Será exibida uma mensagem perguntando se confiamos nos autores do arquivo da pasta que selecionamos. Basta clicar no botão "Sim, confio nos autores" que seremos redirecionados para o projeto no VS Code.

Do lado esquerdo, em "Explorador", observe que temos todas as pastas que desenvolvemos até o curso anterior. Precisamos setar o ambiente do ambiente virtual que utilizaremos.

No curso anterior, vimos que é interessante usarmos ambientes virtuais quando trabalhamos com projetos em Python. Agora, criaremos um ambiente virtual ("virtualenv ") para esse projeto do Django do Alura Space.

Abriremos um novo terminal pela IDE do VS Code. Para isso, selecionamos as reticências no menu superior ("…"), e escolhemos a opção "Terminal". Se preferirmos, podemos usar o atalho "Ctrl + Shift + aspas simples" para abrir um novo terminal.

Para criar uma virtualenv na pasta "alura_space", usamos o comando python -m virtualenv .venv, sendo ".venv" o nome do nosso ambiente virtual.

python -m virtualenv .venv

Ao teclarmos "Enter" para rodar o comando, será mostrado um pop-up informando que um novo ambiente foi criado. Podemos simplesmente fechar essa mensagem, ela não é importante para nós agora. O importante é que conseguimos gerar um novo ambiente. Analisando, observe que foi criada uma pasta chamada ".venv" na raiz do projeto.

Agora, precisamos ativar esse ambiente virtual. Para tal, podemos fechar o terminal e expandir a pasta ".venv" clicando nela.

Lembrando que no caso do instrutor o sistema operacional usado é o Windows e há uma diferença entre usar a virtual env no Windows, Linux e MacOs. Deixaremos um Para saber mais: Preparando o ambiente

Após isso, clicamos na pasta "Scripts" e depois em "Activate". Precisamos chegar na pasta "activate" para ativarmos o nosso ambiente virtual. Acessaremos novamente o terminal, e digitamos .venv\Scripts\activate , sendo "Scripts" o nome da pasta que vimos antes de chegarmos em "activate".

.venv\Scripts\activate

Ao teclarmos "Enter", obtemos:

(.venv) PS C:\Users\PCESTUDIO\Desktop\projetos\alura_space

Com isso, conseguimos ativar a nossa virtualenv. Observe que temos o "(.venv)" antes da pasta, isso significa que está ativado. A partir disso, vamos instalar todos os pacotes e módulos que tínhamos no projeto no curso anterior.

Os pacotes e módulos estão localizados no arquivo "requirements.txt".

requirements.txt:

asgiref==3.5.2
Django==4.1
python-dotenv==0.20.0
sqlparse==0.4.2

Usamos o Django, o python-dotenv, o sql parse e o asgiref. Para instalarmos todos de uma vez só, acessaremos o terminal do VSCode e rodamos pip install -r requirements.txt.

pip install -r requirements.txt

Ao teclarmos "Enter", o pip garante a instalação de todos os pacotes e módulos incluídos no arquivo "requirements.txt".

Temos o Django instalado! Com base nisso, iniciamos o projeto e vamos verificar se irá rodar com sucesso. No terminal, executamos o comando python manage.py runserver.

python manage.py runserver

Parte do retorno selecionada pelo instrutor:

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contentypes, sessions. Run 'python manage.py migrate' to apply them.

Ele nos informa que temos 18 migrações não aplicadas, aprenderemos sobre isso mais adiante. Logo após, informa que ele iniciou o server de desenvolvimento na porta 8000.

Starting development server at http://127.0.0.1:8000/

Com o cursor em "http://127.0.0.1:8000/" selecionamos a tecla "Ctrl" e clicamos (Ctrl + clique). Será aberta uma nova aba com o endereço "127.0.0.1:8000", sendo o projeto do Alura Space que desenvolvemos no curso anterior.

Estamos com tudo pronto para iniciarmos o curso atual. Agora, podemos avançar para deixar a nossa aplicação mais robusta, com várias funcionalidades, vamos adicionar alguns features ao longo do curso.

Te espero na próxima aula!

Lidando com dados - Nomes dinâmicos

Analisando a seção de fotografias no site da Alura Space, observe que todas as imagens e nomes são iguais. Iniciaremos ajustando isso!

Para isso, no VSCode, analisaremos a pasta "setup". O setup é a pasta do projeto, em que temos alguns arquivos, como o settings.py onde está localizado as principais configurações do site. Por exemplo, ao criamos uma nova app (aplicação), adicionamos no seguinte trecho de código:

settings.py:

// código omitido

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'galeria',
]

// código omitido

Há aplicações que já vieram inclusas, como o admin (que usaremos mais adiante). Descendo um pouco mais o código, temos várias outras configurações padrão importantes, como os templates. Também temos o arquivo "urls.py".

urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('galeria.urls')),
]

Nele, colocamos todas as URLs que apontam para alguma rota criada. Por exemplo, temos um path ("caminho") que nos leva para um arquivo chamado "urls" dentro da nossa galeria. Aprendemos que é uma boa prática gerar um arquivo "urls" dentro da nossa app.

Agora, vamos analisar o pacote "galeria", sendo o arquivo do app que temos no projeto. Clicando em "views.py", temos o segyinte código:

views.py:

from django.shortcuts import render

def index(request):
    return render(request, 'galeria/index.html')

def imagem(request):
    return render(request, 'galeria/imagem.html')

Nesse arquivo é onde inserimos toda lógica relacionada às rotas. Temos uma rota nomeada "index", a página principal do site que chama o "index.html" (onde estão as informações relacionadas a nossa página inicial, o html (estrutura) do site em si).

Já que estamos falando sobre o "index.html", vamos analisá-lo. Do lado esquerdo do VSCode, clicamos no pacote "templates/galeria", dentro da pasta "galeria" temos a pasta "partials" e os arquivos "base.html", "imagem.html" e "index.html".

Selecionando "index.html", temos todo código HTML que exibe a estrutura dos cartões. Já em "imagem.html" é outra página que criamos para mostrar uma imagem específica.

No site, vamos clicar no primeiro card em "Navegue pela galeria", seremos redirecionados para outra página. Faremos alguns ajustes! Primeiramente, há muitas imagens, o ideal é deixarmos somente uns dois cards. Podemos adicionar mais cards conforme a demanda ao longo do curso.

No VSCode, acessaremos o arquivo "index.html" para deixarmos somente dois cards. Observe que na linha 22 se inicia o <li class="card">, deixaremos esse e mais o seguinte card, os outros podemos remover, da linha 52 até 111 (</liv>).

Logo após, apertamos "Ctrl + S" para salvar. Porém, há uma configuração interessante para nós. No canto superior esquerdo do VSCode, clicamos em "Arquivo > Salvamento Automático", para não precisarmos ficar teclando "Ctrl + S" a cada alteração que fizermos.

Ao voltarmos para o site e atualizarmos a página, observamos que agora temos somente dois cards em "Navegue pela galeria". Deu certo!

Como conseguimos adicionar novas informações, como alterar o nome das imagens, por exemplo? Uma forma de fazer isso é adicionando uma estrutura de dados contendo informações relacionadas a cada card no arquivo views.py.

Após a primeira linha do arquivo, criaremos um dicionário nomeado "dados", colocamos um sinal de igual ("=") e abrimos e fechamos chaves ("{}").

views.py:

//código omitido

dados = {

}

//código omitido

Dentro de "dados", vamos adicionar dois itens. Adicionaremos o item 1:, e vamos atribuí-lo também a um dicionário, 1:{}. Faremos a mesma coisa para o item 2.

views.py:

//código omitido

dados = {
        1:{},
        2:{}
}

//código omitido

Adicionaremos dentro do primeiro dicionário um item "nome" (queremos o nome da imagem), depois escreveremos "Nebulosa de Carina", entre aspas duplas. Outro item que podemos adicionar dentro do dicionário é uma "legenda", em que temos "fonte", "fotógrafo" e "satélite".

views.py:

//código omitido

dados = {
        1:{"nome": "Nebulosa de Carina",
        "legenda": ""},
        2:{}
}

//código omitido

Por isso, dentro de "legenda" escrevemos a primeira referência (fonte) "webbtelescope.org", acrescentamos uma barra ("/") e informamos o fotográfo, barra de novo e o satélite.

views.py:

//código omitido

    dados = {
        1: {"nome":"Nebulosa de Carina",
            "legenda":"webbtelescope.org / NASA / James Webb"},
        2: {}
    }

//código omitido

Aplicamos a mesma lógica no item 2, usando como nome "Galáxia NGC 1079", como fonte "nasa.org", o fotógrafo sendo a "NASA" de novo e satélite como "Hubble".

views.py:

from django.shortcuts import render

    dados = {
        1: {"nome":"Nebulosa de Carina",
            "legenda":"webbtelescope.org / NASA / James Webb"},
        2: {"nome":"Galáxia NGC 1079",
            "legenda":"nasa.org / NASA / Hubble"}
    }

def index(request):
    return render(request, 'galeria/index.html')

def imagem(request):
    return render(request, 'galeria/imagem.html')

Assim, temos uma estrutura de dados com dois dicionários que contém algumas informações. Como passamos as informações desse dicionário lá para o nosso arquivo "index.html"? Ao usarmos o return render, ele nos permite o envio de algumas informações dentro de um dicionário.

Por isso, no retorno do def index acrescentamos uma vírgula e um dicionário, , {}. Dentro das chaves colocaremos "cards": dados, enviando os dados através desse comando.

views.py:

//código omitido

def index(request):
    return render(request, 'galeria/index.html', {"cards": dados})

//código omitido

Logo após, vamos copiar toda a estrutura de "dados" e colaremos antes do return do def index.

views.py:

from django.shortcuts import render

def index(request):

        dados = {
    1: {"nome":"Nebulosa de Carina",
        "legenda":"webbtelescope.org / NASA / James Webb"},
    2: {"nome":"Galáxia NGC 1079",
        "legenda":"nasa.org / NASA / Hubble"}
    }

    return render(request, 'galeria/index.html')

def imagem(request):
    return render(request, 'galeria/imagem.html')

Assim, montamos uma estrutura de dados para enviarmos. Porém, como receberemos essa estrutura de dados? Desejamos receber essas informações e exibir em cada card. Para isso, vamos ao arquivo "index.html".

Lembra que diminuímos o número de cards? Podemos melhorar isso adicionando uma estrutura de repetição. Como vimos, usamos chaves e porcentagem ("{%%}") para incluir código em Python, faremos a mesma abordagem para acrescentar uma estrutura de repetição for.

Removeremos o card que vai da linha 37 até a 51. Isso porque a partir de agora será necessário somente uma estrutura que se repetirá.

Antes do li de classe que sobrou, vamos abrir e fechar chaves e incluir duas porcentagens dentro, {%%}. Entre as porcentagens, colocamos for foto_id. O "foto_id" é porque na estrutura de "dados" do arquivo "views.py" temos um id para cada um dos dados.

Logo após adicionamos info, sendo a informação que temos. Isso dentro ("in") de cards (nome da chave do dicionário que estamos enviando), em seguida, pegamos os itens desse card, cards.items.

index.html:

<!--  código omitido -->

 {% for foto_id, info in cards.items %}
                            <li class="card">
                                <a href="{% url 'imagem' %}">

<!--  código omitido -->

Ao abrirmos um for, precisamos fechá-lo também. Quando estamos lidando com arquivos em Python não precisamos fazer isso, mas como estamos lidando com Python dentro do HTML, precisamos.

Para isso, vamos descer o código até o fechamento do </li>, na linha 36. Nela, apertamos "Enter" para irmos para a próxima linha, e fechamos o for, {% endfor %}.

index.html:

<!--  código omitido -->

</span>
                                    </div>
                                </div>
                            </li>
                                                        {% endfor %}
                        </ul>
                    </div>
                </section>
            </section>
        </main>
    </div>
{% endblock %}

Assim, temos um for que inspeciona a quantidade de itens que temos no dicionário. Temos a "info" do card chegando para nós. Porém, como chamamos o card? Precisamos incluí-lo em alguns aspectos.

O primeiro é o nome da foto que desejamos mudar. Para pegarmos o nome da foto e inseri-la em "card titulo", removemos "Nome da foto" e colocamos uma dupla abre e fecha chaves, {{}}. Dentro das chaves mais internas, escrevemos "info.nome". Faremos a mesma coisa na legenda, ao invés de "Fonte/fotógrafo/satélite" colocamos "info.legenda".

index.html:

<!--  código omitido -->

                                <span class="card__tag">Estrelas</span>
                                <div class="card__info">
                                    <p class="card__titulo">{{info.nome}}</p>
                                    <div class="card__texto">
                                        <p class="card__descricao">{{info.legenda}}</p>
                                        <span>

<!--  código omitido -->

Desse modo, capturamos o nome e a legenda de cada imagem. Recarregando a página do site, em "Navegue pela galeria", observe que temos dois nomes "Nebulosa de Carina" e "Galáxia NGC 1079", com suas respectivas legendas. Já sabemos inserir informações específicas.

Será que esse processo que fizemos é a melhor forma de inserir dados no site? Criando dicionários, indo no arquivo views.py o tempo todo e adicionando novos dados conforme acrescentamos fotos na galeria. A resposta é não, e na sequência vamos aprender uma forma muito melhor com o banco de dados.

Sobre o curso Django: persistência de dados e Admin

O curso Django: persistência de dados e Admin possui 161 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Python em Programação, ou leia nossos artigos de Programação.

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

• Lidando com dados
• Admin
• Avançando no admin
• Imagens e filtros
• Mecanismo de busca