Category: frameworks

No desenvolvimento web, a demanda por APIs flexíveis nunca foi tão alta. Entre no GraphQL, uma linguagem de consulta para APIs que fornece uma abordagem revolucionária em comparação às APIs RESTful tradicionais.

Este artigo se aprofunda na importância do GraphQL, particularmente quando implementado no Django, lançando luz sobre seu impacto transformador no desenvolvimento de APIs.

Compreendendo o propósito do GraphQL:

Em sua essência, o GraphQL aborda alguns desafios comuns enfrentados com APIs RESTful. Em uma abordagem RESTful típica, vários endpoints são frequentemente necessários para buscar dados específicos, levando a uma busca excessiva ou insuficiente de informações.

O GraphQL, por outro lado, permite que os clientes solicitem precisamente os dados de que precisam em uma única consulta. Isso reduz significativamente a quantidade de dados transferidos pela rede, otimizando o desempenho e minimizando o uso de recursos.

GraphQL em Django: Uma dupla dinâmica:

Quando combinado com Django, um framework web Python de alto nível, o GraphQL desbloqueia uma dupla dinâmica para desenvolvedores.

O Django, conhecido por sua simplicidade e confiabilidade, integra-se perfeitamente com o GraphQL para fornecer uma solução de API robusta e eficiente.

A integração GraphQL-Django capacita os desenvolvedores a definir um esquema que espelha precisamente seus modelos de dados, permitindo que os clientes solicitem dados com precisão inigualável.

Vantagens do Graphql Sobre APIs RESTful:

1. Eficiência: GraphQL minimiza a busca excessiva e insuficiente de dados, aumentando a eficiência na recuperação de dados.
2. Flexibilidade: Clientes podem solicitar campos específicos, relacionamentos aninhados ou dados relacionados, oferecendo flexibilidade incomparável.
3. Redução de idas e voltas: A capacidade do GraphQL de recuperar todos os dados necessários em uma única solicitação reduz o número de idas e voltas ao servidor.
4. Simplicidade de versionamento: Diferentemente do REST, onde o versionamento pode levar a endpoints complexos, o GraphQL simplifica o processo, permitindo transições mais suaves e compatibilidade com versões anteriores.

Implementando Graphql no Django

A implementação do GraphQL no Django envolve a integração de uma biblioteca GraphQL, como o Graphene-Django. Esta biblioteca traduz perfeitamente os modelos Django em um esquema GraphQL, facilitando um processo de adoção direto.

Os desenvolvedores podem então definir consultas e mutações para adaptar precisamente a API às necessidades de seus aplicativos.

Em um aplicativo django pronto, instale o graphene-django:

pip install graphene-django

Após instalar o pacote graphene-django, precisamos adicionar o pacote instalado nos aplicativos instalados na pasta settings.py do projeto:

# settings.py

. . .

INSTALLED_APPS = [
    ...
    "django.contrib.staticfiles", # <---- Required for GraphiQL
    "graphene_django"
]

Uma vez que instalamos o pacote e adicionamos o pacote graphene_django, é necessário criar um esquema para um modelo. Digamos que este modelo é usado para armazenar novos livros para um aplicativo:

# models.py

from django.db import models

# Create your models here.
class Book(models.Model):
    GENRE_CHOICES = [
        ('Fiction', 'Fiction'),
        ('Non-Fiction', 'Non-Fiction'),
        ('Science Fiction', 'Science Fiction'),
        ('Mystery', 'Mystery'),
        ('Fantasy', 'Fantasy'),
    ]
    title = models.CharField(max_length=120)
    author = models.ForeignKey("auth.User", on_delete=models.CASCADE)
    genre = models.CharField(max_length=20, choices=GENRE_CHOICES)
    description = models.TextField()

Portanto, usaremos esse modelo para criar um novo esquema e exibir os dados conforme necessário.

No graphql_app também criaremos uma nova pasta chamada api/ onde serão armazenados os arquivos query.py e types.py:

# types.py

from django.contrib.auth.models  import User
from graphene_django import DjangoObjectType
from graphql_app.models import Book

class BookType(DjangoObjectType):
    class Meta:
        model = Book
        fields = "__all__"

class UserType(DjangoObjectType):
    class Meta:
        model = User
        fields = "__all__"

No types.py é usado o DjangoObejctType para gerar os modelos Book types baseados em modelos django.

Em outras palavras, ele gera automaticamente tipos GraphQL baseados nos campos do modelo que é usado na próxima etapa:

# query.py

import graphene
from django.contrib.auth.models import User

from graphql_app.models import Book
from graphql_app.api.types import BookType, UserType

class Query(graphene.ObjectType):
    all_books = graphene.List(BookType)
    all_users = graphene.List(UserType)
    book_by_title = graphene.Field(BookType, title=graphene.String(required=True))

    def resolve_all_books(root, info):
        return Book.objects.all()

    def resolve_all_users(root, info):
        return User.objects.all()
    
    def resolve_book_by_title(root, info, title):
        try:
            return Book.objects.get(title=title)
        except Book.DoesNotExist:
            return None
    
schema = graphene.Schema(query=Query)

Explicação

No arquivo query.py são definidas todas as consultas necessárias para a aplicação. Já que temos livros e usuários.

No entanto, para começar a implementação, é necessário explicar o que significa a classe Query. No GraphQL, a classe Query serve como ponto de entrada para buscar dados do servidor.

Ela define a estrutura das consultas que os clientes podem executar para recuperar dados usando o graphene.ObjectType.

A classe Query é uma parte fundamental de um esquema GraphQL e conterá campos que representam diferentes tipos de consultas que um cliente pode fazer.

Portanto, na classe Query temos três consultas: all_books, all_users e book_by_title. Todas elas são definidas pelos tipos que criamos antes. Como o BookType e o UserType que exibirão os dados corretamente, quando buscarmos os dados do esquema graphql.

Além disso, essas consultas precisam ter seus próprios “resolvedores”, a consulta raiz do Django que é usada para recuperar corretamente os dados no grapqhql na sequência.

Então, se a consulta for chamada all_books, ela deverá ser resolve_all_books()…

Definindo o esquema graphql em settings.py:

Como já definimos todos os tipos e consultas, criando o esquema, é hora de definir o esquema no settings.py.

# settings.py

GRAPHENE = {
    "SCHEMA": "graphql_app.api.schema.schema"
}

O exemplo acima explica o caminho onde a variável schema fica.

Então o caminho para a arquivo schema.py deve parecer desta maneira:

“<nome_do_app>.<sub_pasta>.<nome_do_arquivo>.schema”.

Em outras palavras, ele deve apontar para onde o schema com todas as consultas está.

Resultado

Indo para o caminho da url você terá o seguinte resultado:

Também podemos usar o Postman para testar o esquema graphql:

Conclusão:

Em um cenário digital onde eficiência e flexibilidade são primordiais, o GraphQL surge como um divisor de águas no desenvolvimento de APIs.

Quando harmoniosamente integrado ao Django, essa dupla eleva a experiência de desenvolvimento, oferecendo uma solução concisa, poderosa e personalizável para criar APIs que atendem às demandas de aplicativos modernos.

À medida que a comunidade de desenvolvimento continua a adotar o GraphQL, seu potencial para remodelar a forma como interagimos com APIs se torna cada vez mais evidente, apontando para um futuro onde precisão e desempenho definem o padrão.

Se você está começando no Django, com certeza deve estar querendo aprender como iniciar um novo projeto. E por que não dizer, qual é a forma correta de iniciar um projeto no Django?

Sendo assim, neste tutorial, vou te explicar de forma simples quais são os passos necessários para configurar um novo projeto Django, do início ao fim.

Se você está começando na programação, não se preocupe. Talvez você se perca aqui ou ali no processo de configuração, mas, repetindo os passos que vou te mostrar, verá que não é tão difícil assim.

Tecnologias necessarias para criar o projeto

Para iniciar a configuração do projeto sera necessario as seguintes tecnologias para você iniciar a configuração do projeto usando django.

1. Ter o python instalado na sua maquina.
2. Ter um IDE como o VSCode ou Pycharm para facilitar a configuração do projeto.

Certifique-se de que o Python esteja instalado na sua máquina. Agora, não é necessário usar especificamente o VSCode ou o PyCharm para configurar o projeto. Esses são os IDEs mais utilizados para essa configuração, mas fique à vontade para usar qualquer IDE de sua preferência.

Iniciando a configuração

Antes de iniciar o projeto, a primeira coisa que eu indicaria você fazer é checar se o python realmente esta instalado na sua maquina.

Com isso, abra o terminal do seu sistema operacional, como o bash do linux ou o powershel do windows e adicione a palavra “python” na mesma:

O Windows PowerShell
Copyright (C) Microsoft Corporation. Todos os direitos reservados.

Instale o PowerShell mais recente para obter novos recursos e aprimoramentos! https://aka.ms/PSWindows

PS C:\Users\User> Python
Python 3.10.11 (tags/v3.10.11:7d4cc5a, Apr  5 2023, 00:38:17) [MSC v.1929 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>

Caso ao adicionar a palavra chave “python” os valores acima aparecer ja podemos iniciar a configuração.

Iniciando o projeto

Ja no seu terminal, use o comando “mkdir” que significa (make a directory) para criar uma nova pasta onde você mais preferir adicionando o nome da pasta onde ficara o projeto django:

PS C:\Users\User\desktop\software_projects> mkdir projeto_de_configuração


    Diretório: C:\Users\User\desktop\software_projects


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        26/06/2024     02:08                projeto_de_configuração

No caso acima eu coloquei o nome da pasta como “projeto_de_configuração”. Ao criar a pasta, entre na mesma usando o comando “cd <nome_da_pasta_que_voce_colocou>”:

PS C:\Users\User\desktop\software_projects> cd projeto_de_configuração
PS C:\Users\User\desktop\software_projects\projeto_de_configuração> 

Se você seguiu os passos corretamente, verá que, no terminal, o nome da pasta aparecerá, indicando que você está dentro da pasta correta.

Muito bem! Já que estamos na pasta, podemos abri-la usando o comando code . para abrir o projeto no VSCode (caso você tenha o VSCode instalado, claro).

Se você instalou o VSCode, basta digitar o comando code . no terminal (estando dentro da pasta), e ela será aberta automaticamente no VSCode.

Você pode usar esta postagem para configurar o seu VScode com este comando

Ao abrir o VSCode, você verá o editor completamente vazio (sem os quadrados e números, inicialmente).

Para verificar se você está realmente dentro do projeto, o nome dele aparecerá em diferentes partes do VSCode. Por exemplo, no quadrado número 1, você verá a representação do que está dentro da pasta “projeto_de_configuração”.

No quadrado número 2, será exibido o espaço onde faremos a edição do código selecionado no quadrado número 1. E, finalmente, o quadrado número 3 representa o terminal, que utilizaremos para adicionar os comandos necessários para instalar o Django dentro da pasta que criamos anteriormente.

Criando o ambiente virtual para o projeto

Antes de adicionar os comandos para criar o projeto Django, será necessário criarmos um ambiente virtual.

Você deve estar se perguntando: o que é um ambiente virtual no Python?

Basicamente, um ambiente virtual permite criar um ambiente Python isolado, separado do Python principal instalado na sua máquina.

Por exemplo, ao instalar o Python na sua máquina, ele estará “limpo”, sem nenhuma biblioteca adicional. Com isso, você poderá utilizá-lo para criar outros ambientes sem causar nenhum efeito colateral no sistema ou em outros projetos.

No exemplo acima, eu tento explicar como isso funciona. O circulo vermelho representa o python padrão que voce tem instalado na sua maquina (sem nenhuma instalação).

E logo ao lado, um novo ambiente virtual onde iremos sem medo, instalar o que quizermos pois não ira interferir no ambiente padrão do python que ja esta instalado na sua maquina.

Com isso, va em frente e coloque o comando que estara listado abaixo. Só não se esqueça de ter certeza que voce esta dentro do diretorio (pasta) que voce criou 😉.

Sendo assim, adicione o comando python3 -m venv venv no terminal do VSCode e voce vera uma nova pasta chamada “venv” dentro da pasta do projeto.

Em um exemplo pratico, voce literalmente fez uma copia do python para dentro do seu projeto para poder usa-lo da forma que voce quizer.

Agora, ja que você criou a pasta do ambiente virtual com o comando adicionado acima, e hora de ativa-lo para ter um ambiente virtual ativado no nosso projeto.

Vá em frente e adicione o comando a seguir no terminal para ativar o ambiente virtual:

PS C:\Users\User\Desktop\software_projects\projeto_de_configuração> python3 -m venv venv
PS C:\Users\User\Desktop\software_projects\projeto_de_configuração> venv/Scripts/activate
(venv) PS C:\Users\User\Desktop\software_projects\projeto_de_configuração> 

Muito bem, o comando para ativar o ambiente virtual no seu diretorio e venv/scripts/activate.

Com isso estamos prontos para instalar o django dentro deste novo ambiente virtual.

Instalando o django no ambiente virtual do projeto

Antes de instalar o Django no nosso ambiente virtual, você precisa entender o que gerencia a instalação de pacotes dentro de um ambiente virtual: o pip.

Pip é a abreviação de “Preferred Installer Program”, que em português significa “programa de instalação preferido”. Ele é usado como um comando de linha para instalar novos pacotes dentro do ambiente Python.

Em resumo, um pacote Python pode ser desde um pequeno pedaço de código reutilizável até um framework completo, como o Django.

Para instalar um programa, este é o comando que você precisará usar:

pip install <NOME_DO_PACOTE>

Bom, agora que você entendeu como se cria um ambiente virtual isolado, como ativa-lo em um diretorio e sabe qual o comando para se instalar um novo pacote, esse e o momento para instalarmos o django usando o pip.

pip install django

Em seguida, va em frente e adicione o mesmo comando no seu ambiente virtual e veja o processo de instalação.

Checando a instalação do pacote no nosso ambiente virtual

Ja que seguimos com a instalação do django no nosso ambiente virtual esse e o momento de checagem, e saber se o django foi instalado corretamente.

Com isso, existem inicialmente duas maneiras de se saber se o mesmo foi instalado corretamente.

1. Usando o comando pip list
2. Checando dentro da pasta Lib/ do ambiente virtual

Checando com o comando pip list

Para checar se os pacotes que voce instalou adicione o comando pip list no terminal onde o ambiente virtual foi instalado.

Se tudo saiu bem, você pode ver todos os pacotes que foram instalados com a instalação do django.

Checando dentro da pasta Lib/ do ambiente virtual

Agora, a segunda maneira seria entrar dentro da pasta do ambiente virtual, e logo em seguida ir para a pasta Lib/:

Se o django foi instalado corretamente você o verá dentro da pasta venv/Lib/.

Iniciando um projeto django

Agora que entendemos a criação de um ambiente virtual e como o pip funciona como linha de comando, além da instalação do Django no nosso ambiente virtual, este é o momento de iniciarmos a instalação do Django no diretório que criamos para o nosso projeto.

Uma vez que instalamos o Django no ambiente virtual, temos à disposição uma ferramenta de linha de comando chamada django-admin, assim como o pip.

Com essa ferramenta, podemos executar vários comandos no nosso projeto. No entanto, iremos abordá-los em mais detalhes em outras postagens, ok?! 😉

Mas, caso queira saber quais são os subcomandos do django-admin, basta adicionar o seguinte comando:

django-admin help

Criando o projeto

Vamos la, no terminal do IDE do ambiente virtual adicione o comando a seguir para criar os diretórios do projeto django.

django-admin startproject blog .

Adicionando o comando django-admin, você pode seguir o segundo comando para iniciar um projeto (core/núcleo do projeto). Logo em seguida o nome que será dado pelo django ao projeto, e o “.” que significa que ele não será criado com uma sub-pasta.

Va em frente e rode o comando acima.

Caso você conseguiu usar o comando corretamente no terminal, você terá uma pasta do projeto chamada blog/ e um arquivo chamado manage.py.

Instalando um app para o nosso projeto django

Muito bem, você ja fez a maioria da configuração do projeto. Porém é preciso adicionar mais uma parte da configuração, o “app” que será necessario para adicionar a logica de negóscio. Como a criação de modelos, views, templates, urls e até uma API Restful se for o caso.

Mas antes de eu te mostrar o comando no qual criará a aplicação, entenda que, como disse antes, voce tera que adicionar um nome para esta aplicação. Com isso, pense bem qual será o dominio que essa aplicação terá.

Nesse caso, como exemplo, eu irei adicionar o nome/dominio “postagens”. Entao vamos la, iremos adicionar o comando de criação de uma nova aplicação:

Como vocês viram acima, perceberam que eu usei o seguinte comando:

 python manage.py startapp postagens

E não usei o comando django-admin <nome do comando> mas sim o comando python manage.py <nome do comando>.

Isso é por que o python manage.py tem a mesma funcionalidade que o django-admin que no caso seria o poder de gerenciar o projeto django que você está trabalhando. Porem o django-admin e usado para criar o arquivo manage.py (que significa: gerenciar) e também tem acesso ao projeto a nível global.

Conectando a nova aplicação ao projeto django

Com o projeto e a aplicação criados, é hora de conecta-los. Nesse caso, todas as aplicações criadas seram conectadas no projeto no arquivo setttings.py.

Então, abra o projeto, nesse caso se chama “blog/” e vá até o arquivo settings.py. Neste arquivo, va até a variavel de tipo lista com nome INSTALLED_APPS, e adicione o nome da aplicação que voce criou no final da lista (como string).

Exemplo:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'postagens', # <-------------- AQUI
]

De uma forma bem simplificada, ao adicionar o nome exato da aplicação que você criou com o comando “startapp” você tem que adiciona-lo desta maneira em settings.py do projeto. Caso contrario o django não sabera que a aplicação existe.

Conclusão

Seguindo todos os passos adicionados nesta postagens, você ficará craque ao criar novas aplicações. É bem provavel que você esteja achando o Django bem difícil de entender, eu concordo. Porém, olhe isso com bons olhos.

O Django e difícil, porém raramente você precisará fazer as coisas diferente, principalmente o setup do projeto. Isso que você aprendeu é um padrão para 80% dos projetos locais que voce ira criar.

Essa e a parte boa deste framework, ele e pragmatico. E quando voce aprende a trabalhar com ele, o fóco sempre será em construir a lógica de negócio e pouco em configurações.

Django é um framework full-stack que permite aos desenvolvedores criar novas aplicações rapidamente usando seus padrões MVT/MVC.

Portanto, este post irá exemplificar como você pode criar uma aplicação de blog utilizando Django e todas as suas funcionalidades, permitindo entender como model, view e controller funcionam em conjunto com templates.

O que voce ira aprender nesta postagem:

• Como criar um ambiente virtual python.
• Instalação do Django no ambiente virtual.
• Inicio de um projeto Django.
• Criação de um Model.
• Views para exibir os dados.
• URLs, templates e muito mais…

Você precisara das seguintes ferramentas instaladas no seu computador para seguir este tutorial:

• Python3 e Pip3
• Um IDE como o VSCode

Iniciando o projeto com django

Para iniciar este projeto Django você precisará abrir seu IDE e adicionar uma pasta vazia a ele. Chamei essa pasta de blog-project, mas você pode nomeá-la como desejar.

Depois de adicionar o projeto ao seu IDE, certifique-se de que o terminal esteja no diretório correto para iniciar o projeto. Já que precisamos adicionar o código dentro dele pelo terminal usando pip.

1 – Preparando o ambiente virtual do projeto django

$ python3 -m venv venv

Assim que este comando criar a pasta venv você precisara adicionar novamente o seguinte comando para ativar o ambiente virtual (venv).

Unix OS: Linux ou MacOS:

$ source venv/bin/activate

Windows OS:

venv\Script\activate

Se você executou a abordagem e seguiu corretamente, seu diretório de caminho terá o nome do ambiente virtual no início dele. Por exemplo, se o diretório do caminho for nome do caminho-para-projeto/blog-project $, ele será alterado para (venv) nome-do-computador/projeto-blog $.

2 – Instalando o framework Django no ambiente virtual

Agora que você tem o ambiente pronto, você precisa instalar o framework Django nele. Em seu terminal adicione o seguinte comando:

$ pip install django

Feito isso, o django será instalado, e você só precisa criar o blog-project dentro do diretório raiz.

3 – Criando projeto principal no Django

Agora que toda a configuração inicial está feita, vamos iniciar o projeto. Você precisará adicionar o seguinte comando para criar o projeto no diretório principal:

$ django-admin startproject blog_project

Assim que você adicionar o seguinte comando ao seu terminal, uma pasta chamada blog_project será adicionada ao seu diretório com outra pasta blog_project como o controlador do Django e o arquivo manage.py.

Portanto, se você seguiu todos os passos explicados até agora, seu diretório deverá ficar assim:

blog-project/ 
 |
 |__blog_project/
 |   |
 |   |__blog_project/
 |   |     |___ __init__.py
 |   |     |____settings.py
 |   |     |____urls.py
 |   |     |____wsgy.py
 |   | 
 |   |__manage.py   
 |
 |__venv/

4 – Iniciando seu projeto

Agora que todas as configurações principais já foram feitas, você pode iniciar seu projeto. Vá para a pasta blog_project/root com o comando:

$ cd blog_project

Apenas um ponto aqui: Para quem é iniciante, certifique-se de ter três pastas diferentes: a pasta raiz chamada blog-project/, a pasta raiz do projeto django chamada também de blog_project/ e a pasta controllers dentro da pasta raiz django que também é chamada blog_project/. O comando acima irá direcioná-lo para a próxima pasta, a raiz do django blog_project/.

Portanto, uma vez dentro da pasta raiz do projeto Django, (a mesma que contém o arquivo manager.py), você pode executar o comando para iniciar seu projeto Django com o seguinte comando:

$ python manage.py runserver

Com o seguinte comando seu projeto será iniciado e no terminal ele irá rodar e mostrar qual porta o projeto está rodando:

(venv) computer-name/blog_project $ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly 
until you apply the migrations for app(s): admin, auth, contenttypes, 
sessions.
Run 'python manage.py migrate' to apply them.
February 07, 2021 - 17:52:22
Django version 3.1.6, using settings 'blog_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

No meu caso o endereço é https://127.0.0.1:8000. Clique nele ou copie e cole em seu navegador para ver o resultado:

Se tudo correr bem você poderá ver a imagem acima no endereço fornecido pelo terminal.

5 – Criando um novo app para o seu projeto django

Agora é hora de criar seu primeiro aplicativo para o seu projeto Django. Mas antes de adicionar o comando para criar o aplicativo, você precisa abrir um novo terminal para executar o projeto, já que o último terminal está sendo usado para executar o aplicativo.

Portanto, abra um novo terminal no IDE, ative novamente o ambiente virtual no diretório raiz e mude o diretório para a raiz do Django, que é uma pasta à frente.

Então, após ativar seu ambiente virtual e alterar o diretório novamente em seu segundo terminal, adicione o seguinte comando para criar o app:

$ python manage.py startapp blog

Agora que você criou o diretorio/pasta chamada blog o seu diretório deve parecer desta maneira:

blog-project/ # <---------- primeiro diretorio criado manualmente
 |   
 |___blog_project/ # <----- diretorio criado pelo comando django-admin startapp ...
 |   | 
 |   |__blog_project/ # <----- diretorio criado pelo comando django-admin startapp ...
 |   |    |__ __init__.py
 |   |    |__settings.py
 |   |    |__urls.py
 |   |    |__wsgy.py
 |   |
 |   |
 |   |___blog/ # <------ diretorio criado agóra
 |   |   |
 |   |   |__migrations/
 |   |   |___ __init__.py
 |   |   |___admin.py
 |   |   |___apps.py
 |   |   |___models.py
 |   |   |___views.py
 |   |
 |   |__manage.py
 |
 |__venv/

Agora, você precisa adicionar o aplicativo blog criado recentemente nas configurações do projeto. Portanto, em blog_project/settings.py adicione o blog na configuração INSTALLED_APP:

INSTALLED_APPS = [
  'django.contrib.admin',
  'Django.contrib.auth',
  'django.contrib.contenttypes', 
  'django.contrib.sessions', 
  'Django.contrib.messages',
  'Django.contrib.staticfiles',
  'blog', # <------ Novo
 ]

Adicionando o app blog no INSTALLED_APPS o django irá reconhecer o aplicativo que iremos trabalhar.

6 – Migrando as tabelas padrão do django

Antes de entrarmos no código, precisamos criar um superusuário para o projeto.

O superusuário tem a capacidade de gerenciar modelos na parte administrativa do site.

Muito bem, vamos criá-lo, no seu terminal adicione o seguinte comando:

$ python manage.py createsuperuser

Porém ao rodar este comando você receberá uma menssagem de error:

You have 18 unapplied migration(s). Your project may not work properly 
until you apply the migrations for app(s): admin, auth, contenttypes, 
sessions.

Run 'python manage.py migrate' to apply them.

Que traduzido diz:

Você tem 18 migrações não aplicadas. O seu projeto talvez não ira funcionar perfeitamente ate você aplicar as migrações para os apps: admin, auth, contenttypes, session.

Rode o comando python manage.py migrate para aplica-as.

Então vamos la, vamos fazer isso. Se você ler a mensagem, ela diz para executar um comando, que é:

$ python manage.py migrate

Deixei essa questão acima para você entender como é desenvolver uma aplicação.

Às vezes será normal receber alguns erros como esse para dizer o que não está certo. Portanto, fique sempre de olho no terminal para ver o que o Django e o python dirão se houver algo errado.

Ok, vamos voltar à criação do superusuário.

Então, após corrigir o problema de migração, adicione novamente o comando de criação de superusuário em seu terminal, logo em seguida adicione um nome para ele, eu usei o nome admin mas você pode escolher o que quiser. Você tambem terá que adicionar o seu e-mail e senha duas vezes.

NOTA: Se for a primeira vez que você cria um projeto Django, entenda que a senha não aparecerá no terminal. Basta adicioná-lo e pressionar Enter. <—————–

Agora que você já criou o superusuário, acesse o site /admin para fazer o login. Portanto, você só precisa adicionar /admin na frente da url do projeto e ele o redirecionará para a página de login.

http://127.0.0.1:8000/admin/

Depois de ser redirecionado, você verá a página de login:

Em seguida, faça login usando o nome de usuário e senha que você criou anteriormente e você será redirecionado para o site de administração.

Muito bem, agora você tem acesso a pagina de administrador como superusuário e pode fazer futuras edições em seus futuros modelos.

7 – Enviando nossa primeira mensagem para o frontend

Ótimo, agora você verá parte da funcionalidade do que o Django é capaz. Enviaremos uma mensagem de “hello world” para o frontend. Então, assim você terá uma ideia de como o Django funciona com a arquitetura MVC (model, view, controller).

No seu aplicativo blog, acesse o arquivo views.py e adicione o seguinte código:

blog/views.py

from django.shortcuts import render 
from django.http import HttpResponse 

# Create your views here. 
def index(request): #<------ Novo
    return HttpResponse('hello world')

A área destacada é o novo código que você deve adicionar ao arquivo views.py. Agora que você adicionou este código em seu blog/views.py, você deve dizer ao Django onde esta resposta deve aparecer. Portanto, vá para blog_project/urls.py e adicione o caminho da visualização que você criou em blog/views.py.

blog_project/urls.py:

from django.contrib import admin
from django.urls import path 
from blog.views import index #<------ Novo

urlpatterns = [ 
  path('', index, name='index'), #<------ Novo
  path('admin/', admin.site.urls)
]

Nesta seção, você precisará importar a função index que criou em blog/views.py e adicioná-la ao caminho como o nome index. Você também pode ver que há uma string vazia no início do caminho. Isso significa que a função e a página serão executadas como o URL principal.

Agora, depois de configurar views.py e urls.py, vá para a url principal: http://127.0.0.1:8000/ e atualize a página. Se você fez tudo certo, deverá ver um texto “hello world” no canto superior direito da tela.

NOTA: Se você encontrou algum erro, verifique o código acima e tente encontrar algum erro de ortografia, caso tenha esquecido de importar a função index para o urls.py. Além disso, verifique a última mensagem na parte inferior da mensagem de erro em seu terminal. Lá você verá o que há de errado. Se não houver erro, vamos para a próxima parte.

8 – Criando o seu primeiro model no seu projeto django

Agora é hora de você criar seu primeiro model para esta aplicação. No aplicativo blog, acesse models.py e adicione o seguinte código.

blog/modelos.py:

from django.db import models 

# Create your models here.
class Article(models.Model): 
    title = models.CharField(max_length=100) 
    body = models.TextField() 
    date = models.DateTimeField(auto_now_add=True) 
    thumb = models.ImageField(blank=True)
  
    def __str__(self): 
        return self.title

O código acima é um comando para criar uma tabela chamada Article (Artigo) no django sqlite, com title (título), body (corpo), date (data), thub (imagem) e a função __str__ para exibir o título do blog na página de administração. Olhando atentamente para esta classe, você verá que cada um desses campos possui métodos diferentes.

Por exemplo:

• Para o title (título) você verá um método Charfield() com comprimento de 100 caracteres. Este método permitirá adicionar caracteres simples (string), como títulos, nomes ou frases.
• O body (corpo) possui um método diferente chamado TextField(). Como o próprio nome já diz, ele serve para armazenar maiores quantidades de caracteres, como textos.
• A variável de date (data) é atribuída ao método DateTimeField(). Este método armazena a data e hora em que um novo objeto é criado.
• Para o thumb (imagem), o método utilizado é ImageField(). Este campo é criado para armazenar uma imagem do objeto.

NOTA: Para o método ImageField(), você precisará instalar o Pillow para manipular as imagens adicionadas ao criar o objeto.

8.1 – Instalando o pacote Pillow para gerenciar imagens no django

Ao salvar o arquivo models.py com o qual você criou o modelo Article, você receberá um erro (caso a aplicação esteja rodando):

Terminal:

ERRORS: 
blog.Article.thumb: (fields.E210) Cannot use ImageField because Pillow is not 
installed.
HINT: Get Pillow at https://pypi.org/project/Pillow/ or run 
command "python -m pip install Pillow".

Portanto, seguindo a dica da mensagem acima, você precisará instalar o Pillow para poder adicionar imagens aos seus artigos. Adicione o seguinte código em seu terminal:

$ pip install Pillow

Depois de instalá-lo, você precisará configurar o settings.py para apontar (programar o caminho no django) onde as imagens serão colocadas quando você adicioná-lo no formulário do artigo.

8.2 – Configurando o caminho das imagens

No arquivo settings.py adicione o código a seguir:

blog_project/settings.py:

# No topo do arquivo.
Import os

...

# No final do arquivo.

# caminho onde devera inserir os arquivos de imagem.
MEDIA_URL = '/media/' 

# especificando o arquivo.
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Após essa configuração ser feita, você precisa registrar o artigo modelo em sua página de administração.

8.3 – Registrando o modelo no site de administrador

Vá até a pasta do seu blog e no arquivo admin.py adicione o seguinte código para cadastrar o modelo Article:

blog/admin.py

from django.contrib import admin
from .models import Article #<------ Nova linha

# Register your models here. 
admin.site.register(Article) #<------ Nova linha

Você precisará importar o modelo Article do arquivo .models e registrá-lo na página de administração.

8.4 – Criando o seu primeiro artigo na aplicação blog

Agora que você já criou o modelo Article, cadastra-lo na página de administração, vá para a página de administração e verá uma nova seção adicionada à página de administração chamada Articles:

Clique no link Articles e na próxima página, no canto superior direito clique no botão ADD ARTICLE +  para adicionar uma nova postagem no blog:

Adicione um título, um corpo de texto, uma imagem e salve. Você verá que o artigo com o nome Hello World foi adicionado ao seu banco de dados e uma nova pasta chamada media foi adicionada ao seu diretório blog_project/ como blog_project/media com a imagem que você escolheu para o seu artigo.

Como você adicionou uma nova pasta, seu diretório deve ficar assim:

blog-project/ 
 |   
 |___blog_project/
 |   | 
 |   |__blog_project/
 |   |    |__ __init__.py
 |   |    |__settings.py
 |   |    |__urls.py
 |   |    |__wsgy.py
 |   |
 |   |
 |   |___blog/
 |   |   |
 |   |   |__migrations/
 |   |   |___ __init__.py
 |   |   |___admin.py
 |   |   |___apps.py
 |   |   |___models.py
 |   |   |___views.py
 |   |
 |   |___media/ #<------- new
 |   |     |__imgexp.png
 |   |
 |   |__manage.py
 |__venv/

9- Adicionando templates e pastas estáticas para criar o frontend

Neste ponto estamos prontos para iniciar nossa parte de frontend. Crie uma nova pasta chamada templates em seu diretório raiz. Vá para /blog-project/blog_project/ e adicione o seguinte comando:

$ mkdir templates

Assim a pasta de templates será criada, agora você precisa informar ao Django onde a pasta de templates está localizada.

Vá para settings.py e adicione o nome ‘templates’ no código do array TEMPLATES:

blog_project/settings.py

TEMPLATES = [
    {
        "DIRS": ["templates"],
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages"
            ],
        },
    },
]

Você também precisará criar uma pasta estática para adicionar arquivos estáticos, como css, javascript e imagens estáticas. Você precisará seguir quase a mesma abordagem que fez para criar a pasta de modelos. Além disso, a pasta estática será colocada no mesmo local que a dos modelos. Portanto, em seu terminal adicione o seguinte comando:

$ mkdir static

Assim, sua pasta estática (static) será criada no diretório raiz do projeto. O mesmo que os modelos. Então, agora, assim como na pasta de templates você precisará dizer ao Django que você tem uma pasta estática:

Vá para settings.py e na parte inferior do arquivo adicione o seguinte código:

blog_project/settings.py:

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

Agora que você criou a pasta estática e a configurou seguindo o código acima você está pronto para ir para a próxima etapa, que é adicionar o frontend deste projeto.

NOTA: Ótimo, você está pronto para iniciar a parte frontend deste tutorial. Se tudo estiver funcionando corretamente, perfeito. Agora é a etapa em que você precisa criar os arquivos HTML e CSS onde o código será adicionado. Então, desta parte até o final vou pedir toda a atenção de você. Porque, se você perder um pequeno passo ou detalhe, poderá enfrentar alguns erros.

10- Adicionando arquivos HTML e CSS nos templates e pastas estáticas

Nesta parte você exibirá o frontend deste projeto. A partir da próxima parte começaremos a buscar dados do modelo Article que você criou na parte 8 deste tutorial e exibiremos no frontend.

10.1 – Adicionando o HTML com tags de template integradas ao Django

Os modelos e pastas estáticas que você adicionou agora serão usados ​​para ter o arquivo base.html. O arquivo no qual será usado para armazenar todas as outras páginas que serão criadas.

• Dentro da pasta de templates crie um novo arquivo chamado base.html.
• Adicione o seguinte código dentro do base.html:

modelos/base.html:

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Blog Project</title>
  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <!-- Custom styles from static folder -->
  <link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar fixed-top navbar-expand-lg navbar-default fixed-top shadow shadow-inset">
    <div class="container">
      <a class="navbar-brand" href="">Blog Project</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  <header>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <!-- Slide One - Set the background image for this slide in the line below -->
        <div class="carousel-item active" style="background-image: url('https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_1280.jpg')">
          <div class="carousel-caption d-none d-md-block">
            <h3>Title</h3>
            <p>This is a description for your blog.</p>
          </div>
        </div>
  </header>
  <!-- Page Content -->
  <div class="container">
    {% block content %}

  {% endblock content %}
    </div>
  <!-- /.container -->
  <!-- Footer -->
  <footer class="py-5 shadow-xs shadow-inset">
    <div class="container">
      <p class="m-0 text-center ">Copyright © Your Website 2021</p>
    </div>
    <!-- /.container -->
  </footer>
  <!-- Bootstrap core JavaScript -->
  <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

• Agora que você adicionou o código em base.html salve-o e vamos nos preparar para exibir esta página no frontend.
• Para adicionar o código css, crie uma nova pasta chamada css dentro da pasta static e dentro da pasta css crie um arquivo css chamado style.css. O caminho para este arquivo deve ser assim:

static/css/style.css

Agora que você adicionou style.css, adicione o seguinte estilo neste arquivo:

body {
    padding-top: 56px;
  }
  
.carousel-item {
    height: 65vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
.portfolio-item {
    margin-bottom: 30px;
  }

After the creation the templates and css folders as well as the style.css file, your working directory should look like this:

blog-project/ 
 |  
 |   
 |___blog_project/
 |   | 
 |   |__blog_project/
 |   |    |__ __init__.py
 |   |    |__settings.py
 |   |    |__urls.py
 |   |    |__wsgy.py
 |   |
 |   |
 |   |___blog/
 |   |   |
 |   |   |__migrations/
 |   |   |___ __init__.py
 |   |   |___admin.py
 |   |   |___apps.py
 |   |   |___models.py
 |   |   |___views.py
 |   |
 |   |___media/
 |   |     |__imgexp.png
 |   |
 |   |___static/ #<------ NEW
 |   |     |__css/
 |   |         |__style.css
 |   |
 |   |___templates/  #<------ NEW
 |   |     |__base.html
 |   |
 |   |__manage.py
 |
 |__venv/

Note: make sure you have added the files within the right folders.

10.2 Explaining template tags

Antes de prosseguirmos, você deve ter visto algumas tags incomuns no arquivo base.html. Eles são usados para finalidades diferentes. Por exemplo, a tag de modelo {% load static %}.

Trata-se simplesmente de carregar os arquivos que são colocados em uma pasta estática (static). No código HTML acima, em você pode localizar um href=”{% static ‘css/style.css’ %} dentro de um link. Sem a tag de modelo {% load static %} na parte superior, seus arquivos estaticos não serão carregados.

Outras tags de modelo colocadas no meio do arquivo base.html são {% block content %} {% endblock content %}. Essas duas tags de template, como o nome diz, servem para estender outros templates dentro deste bloco html. Abordaremos mais sobre eles antecipadamente neste tutorial.

Se você é novo no Django, você deve estar se perguntando: o que essas tags de template fazem? A resposta é: eles são usados para trazer diferentes funcionalidades aos templates html. Como loops, condicionais, funcionalidades personalizadas de carregamento, inclusão de outras partes de HTML, como barras de navegação ou rodapés e etc.

Você pode ver mais sobre tags de modelo Django aqui.

11. Showing the template on frontend.

Agora que você já adicionou o template base.html nos templates e criou a pasta css e o arquivo style.css, é hora de mostrar o resultado no frontend.

No seu views.py você precisa alterar a função de índice para o seguinte código:

blog/views.py:

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'base.html')

O atalho render() solicitará o template base.html e retornará a resposta ao navegador com base na URL. Portanto, se você se lembra da parte 7, adicionamos a função de índice ao caminho raiz. Em outras palavras, você só precisará salvar o views.py e recarregar a página na url http://127.0.0.1:8000/ para ver o resultado do template no frontend.

Então, se você fez tudo certo, o resultado deve ser assim:

12. Mostrando postagens do blog no frontend

Fantástico, que bom que ficou até aqui. Esta é uma das partes mais difíceis do tutorial. Portanto, para as próximas partes, recomendo que você preste atenção redobrada aos pequenos detalhes para não enfrentar nenhum erro.

12–1. Crie uma nova pasta de modelos no aplicativo de blog

Vá para o aplicativo blog e crie uma nova pasta chamada templates e adicione um modelo chamado posts.html. Por enquanto estará vazio.

12–2. Atualize a função de index() para reconhecer o modelo de postagens e adicionar os artigos lá

Na sua função index() você pode ver que ela está renderizando o modelo base.html. Mude para posts.html. Depois disso, você precisa importar o modelo Article para o seu views.py e atribuí-lo como articles. Além disso, você precisa criar um dicionário com o nome articles para que o modelo de postagens reconheça as postagens que são adicionadas a este modelo.

blog/views.py:

from django.shortcuts import render
# import Article model 
from .models import Article #<------ NOVO

# Create your views here.

def index(request): 
# adicionar artigos
articles = Article.objects.all() #<------ NOVO
return render(request, 'posts.html', {'articles':articles}) #<------ CODIGO NOVO

12–3. Exibindo as postagens no frontend

Agora é a hora de você encontrar os primeiros posts aparecendo no frontend do seu projeto. Então, se você já adicionou um artigo no formulário Artigos da página de administração, vá até lá e adicione alguns com imagens. Caso contrário, eles não serão exibidos quando esta etapa for implementada.

Sendo assim, adicione este código ao modelo posts.html que você criou na etapa 12–1:

blog/templates/posts.html:

{% extends 'base.html' %}
{% load static %}
{% block content %}

<br><br>
<h2>Portfolio Heading</h2>

<div class="row">
  {% for article in articles %}
   <div class="col-lg-4 col-sm-6 portfolio-item">
     <div class="card h-100">
       <a href="#"><img class="card-img-top" src="{{article.thumb.url}}" alt=""></a>
       <div class="card-body">
         <h4 class="card-title">
           <a href="#">{{article.title}}</a>
         </h4>
         <p class="card-text">{{article.body|slice:50}}</p>
       </div>
     </div>
   </div>
  <br><br>
  {% endfor %}
</div>
{% endblock content %}

Você percebeu que não há nenhuma função executando o modelo base.html, mas ele está sendo executado mesmo assim? Na verdade, ele está sendo renderizado porque o modelo posts.html o está estendendo. Portanto, ele pode ser usado para carregar todos os outros modelos, se desejar.

Você também percebeu que neste momento o código HTML está dentro das tags {% block content %} {% endblock content %}, e não como no base.html? Agora você pode entender como esses modelos funcionam. Um é usado para estender enquanto o modelo base será usado para exibir os outros modelos.

12–4. Explicando o loop “for” na template

O loop for exibirá todas as postagens do artigo adicionadas a ele no template usando a tag django loop. Você se lembrou da variável articles e do dicionário que você adicionou na função index? A variável articles será adicionada ao dicionário em views.py e o dicionário será carregado no modelo posts.html como artigos. Portanto, se você já possui um bom conhecimento de HTML poderá entender que todos os campos do template de artigos foram exibidos nos lugares ou elementos certos.

O article.body no elemento <p>, article.title no elemento <a>(sem href por enquanto) e o article.thum.url dentro do <img src=””>. No entanto, você pode perceber que a imagem não apareceu embora esteja implementada.

NOTA: O |slice:50 dentro do article.body não deve exibir todo o conteúdo do blog em um cartão. Apenas para mostrar parte do corpo nele. Esteja ciente também de que o href será adicionado posteriormente para vincular à funcionalidade de detalhes da postagem e ao URL.

12–5. Corrigindo a imagem que não aparece na template posts.html

Para corrigir esse problema, você precisará adicionar o seguinte código ao seu urls.py.

blog_projects/url.py:

from django.contrib import admin 
from django.urls import path 
from blog.views import index 

# import for display image
from django.conf import settings #<------ NOVO
from django.conf.urls.static import static #<------ NOVO

urlpatterns = [ 
    path('admin/', admin.site.urls),
    path('', index, name='index'),
]

if settings.DEBUG: #<------ NOVO
    urlpatterns += static(settings.STATIC_URL, 
    document_root=settings.STATIC_URL) 
    urlpatterns += static(settings.MEDIA_URL, 
    document_root=settings.MEDIA_ROOT)

Você precisará importar configurações e estática de conf.url e iterar os urlpatterns com STATIC_URL, MEDIA_URL e MEDIA_ROOT das configurações. Se você tiver alguma dúvida você pode conferir a documentação do Django aqui para saber mais sobre essas configurações.

Após isso, atualize a página do seu navegador onde o aplicativo é exibido e verifique se as postagens aparecem. Se sim, você verá a tela assim:

13. Criando a página de detalhes do post

Esta é a última parte do nosso tutorial. Nesta seção você aprenderá como exibir a página de detalhes de cada postagem do blog individualmente clicando em um dos cartões que representam cada postagem.

13–1. crie a função post_detail

Em blog/views.py você precisará criar uma função chamada post_detail() e criar uma variável chamada detalhes atribuída a um método chamado get_object_or_404(ModelName, id=id).

A funcionalidade deste método funciona de forma que por exemplo quando você clica em um cartão ele irá até o ModelName que está atribuído e buscará o id do item e retornando o objeto. Se você quiser entender mais como funciona o método get_object_or_404 você pode dar uma olhada na documentação aqui.

Então, a função post_detail() ficará assim:

blog/views.py

from django.shortcuts import render, get_object_or_404 #<------ NOVO IMPORT
# import Article model
from .models import Article

# Create your views here.
def index(request):
    # add article.
    articles = Article.objects.all()
    return render(request, 'posts.html', {'articles':articles})

def post_detail(request, id): #<------ NOVO
    # mostrar a pagina de detalhe.
    details = get_object_or_404(Article, id=id)
    return render(request, 'details.html', {'details':details})

NOTA: Para a função post_detail, você também precisará adicionar id como parâmetro para que a função retorne o resultado que é criar uma página de detalhes para cada postagem do blog. Além disso, você precisará adicionar um novo modelo html chamadodetails.html que será criado posteriormente e exibirá a variável de detalhes em um dicionário para ser reconhecida no modelo. Se ficou um pouco complicado para você, dê uma boa olhada nesta função e siga cada passo para você entender. :)

13–2. adicione o URL post-details e importe a função post_detail()

Nesta parte você precisará criar um novo caminho de URL. Em seguida, acesse blog_project/urls.py e adicione o seguinte código destacado:

blog_project/urls.py:

from django.contrib import admin
from django.urls import path
from blog.views import index, post_detail #<------ NOVO IMPORT

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index, name='index'),
    path('post-detail/<int:id>/', post_detail, name='postDetail') #<------ NOVO
]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, 
    document_root=settings.STATIC_URL) 
    urlpatterns += static(settings.MEDIA_URL, 
    document_root=settings.MEDIA_ROOT)

Nesta parte você precisará importar a função post_detail() que você criou em blog/views.py pois ela precisará de uma funcionalidade para ser usada na nova url que você irá criar. Agora, crie este novo caminho de URL chamado post-detail e adicione ao novo padrão de URL, pois int é o formato do id (inteiro).

13–3. Adicionando o href para acionar a função post_detail() e explicação

Antes de ir para a explicação de como url e post_detail() funcionam juntos, vá para posts.html e adicione o seguinte código em cada href:

href="{% url 'postDetail' id=article.id %}"

Este código permitirá que o Django acione a função post_detail quando você clicar em um dos cartões do modelo posts.html. Enviando você para a páginadetails.html.

Aqui você pode ver o que acontece quando você clica em um cartão postal:

• O detalhe da postagem visto acima vai para a url e verifica qual é o padrão da url e também qual função o trata;
• Então, depois de ver que post_detail é a função que trata a url, ela obtém o id do objeto no banco de dados e o retorna no template.
• Você recebe a resposta no navegador com a postagem exata em que clicou.

13–4. crie o modelodetails.html

Vá para o modelo details.html vazio e adicione o código a seguir. Se você ainda não o criou, acesse blog/templates e adicione o seguinte código dentro dele.

blog/modelos/

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Page Heading/Breadcrumbs -->
<div class="row">
    <div class="col-lg-8 mx-auto">
       <h1 class="mt-4 mb-3">{{details.title}}</h1>
         <ol class="breadcrumb">
           <li class="breadcrumb-item active">Post Detail</li>
         </ol>
    </div>
</div>
 <div class="row">
   <!-- Post Content Column -->
   <div class="col-lg-8 mx-auto">
     <!-- Preview Image -->
     <img class="img-fluid rounded" src="{{details.thumb.url}}" alt="">
     <hr>
     <p>Posted on {{details.date}}</p>
     <hr>
     <p class="lead">{{details.body}}</p>
     </div>
  </div>
  {% endblock content %}

A ideia do código acima é semelhante à do modelo posts.html. No entanto, neste modelo você não tem o loop for. Em vez disso, na função post_detail() você obterá título, thumb, corpo e data.

Portanto, se você adicionou o código corretamente, ao clicar em um dos cartões do modelo posts.html no navegador você obterá esta página:

Muito bem, você terminou este tutorial usando Django. Você pode usar este código para implementar mais recursos como autenticação de usuário, adicionar categorias diferentes ou até mesmo criar um cms. Use sua imaginação e o que você aprendeu neste tutorial para fazer outras aplicações com Django. Obrigado por ficar até aqui e se você tiver algum comentário deixe um comentário abaixo e eu responderei sua pergunta.

Caso você queira aprender um pouco mais sobre os beneficios deste framework da uma olhada neste artigo.