Neste artigo a proposta é criar um setup básico de um projeto Django já integrado com o Bootstrap que vai ser aí a base para tudo o que é projeto. Então, vamos lá:
Criando o projeto Django
Primeiro vamos criar um diretório:
~: $ mkdir projeto
~: $ cd projeto/
E então, preparar nosso ambiente Python:
~/projeto: $ python3 -m venv venv
~/projeto: $ source venv/bin/activate
(venv) ~/projeto: $ pip install Django
Acabamos de criar um ambiente virtual Python chamado venv
onde serão instaladas todas as dependências de nosso projeto. Em seguida o ativamos (nosso prompt ganha um prefixo (venv)
que indica que o ambiente virtual está ativo) e instalamos o Django.
Com o Django instalado, vamos criar nosso projeto:
(venv) ~/projeto: $ mkdir src
(venv) ~/projeto: $ cd src/
(venv) ~/projeto/src: $ django-admin startproject core .
Explicando a criação do projeto até aqui:
- Criamos um diretório para o projeto e dentro dele o ambiente virtual python, que gerou um diretório
venv
. Depois criamos outro diretório, osrc
; - Nesse diretório
src
criamos o projeto Django usando o comandodjango-admin startproject
seguido do nome do projeto, nesse casocore
, e de um ponto, que indica o diretório atual como aquele onde será feita a instalação.
Agora, criaremos mais dois diretórios:
(venv) ~/projeto/src: $ mkdir static templates
Em static
colocaremos os arquivos do bootstrap e em templates
nossos templates HTML.
Uma coisa que gosto de fazer também é já iniciar um repositório Git desde o início:
(venv) ~/projeto/src: $ git init
(venv) ~/projeto/src: $ touch .gitignore
Aqui nesse link temos um .gitignore
padrão para projetos Python, que vai nos atender perfeitamente. Assim não vamos enviar pro repositório git arquivos e diretórios desnecessários ou sensíveis.
Vamos também criar um arquivo com as dependências do nosso projeto, o requirements.txt (o "package.json" do Django, pra quem é do universo Javascript). Mas aqui faremos um pouco diferente, criaremos um diretório requirements
e nele um arquivo local.txt
.
(venv) ~/projeto/src: $ mkdir requirements
(venv) ~/projeto/src: $ touch requirements/local.txt
(venv) ~/projeto/src: $ pip freeze > requirements/local.txt
Já executamos o pip freeze e redirecionamos a saída para o arquivo local.txt recém criado. Sempre que instalarmos novas dependências, devemos executar essa instrução novamente.
Feito tudo isso, a estrutura de nosso projeto está assim:
/projeto/
|-- src/
| |-- core/
| | `-- __init__.py
| | `-- settings.py
| | `-- urls.py
| | `-- wsgi.py
| |-- requirements/
| | `-- local.txt
| |-- static/
| |-- templates/
| `-- manage.py
|-- venv/
Até aqui fizemos o setup inicial do Django, então já podemos subir o serviço. Antes, aplicaremos as migrações (são as migrações das aplicações que já vem por padrão com o Django, como admin, auth, entre outras):
(venv) ~/projeto/src: $ python manage.py migrate
(venv) ~/projeto/src: $ python manage.py runserver
Uma telinha padrão do Django deverá aparecer no seu navegador em http://127.0.0.1:8000
, significa que tudo correu bem.
Integrando com Bootstrap e Font Awesome
Agora, vamos inserir o Bootstrap e o Font Awesome no nosso projeto.
Bootstrap
Na página de Downloads no site oficial getbootstrap.com, vamos escolher o "código compilado, pronto para uso", é a primeira opção na página.
Após descompactar o pacote zip veremos os diretórios css
e js
. Então, vamos movê-los para nosso diretório /projeto/src/static/
. Perfeito. Já estamos quase prontos para usar as classes bootstrap em nossos HTMLs, mas vamos primeiro fazer uma limpeza nesses diretórios. O pacote que baixamos traz vários arquivos .css e .js, mas nós precisaremos apenas dos seguintes:
/static/
|-- css/
| `-- bootstrap.min.css
| `-- bootstrap.min.css.map
|-- js/
| `-- bootstrap.min.js
| `-- bootstrap.min.js.map
Font Awesome
Com o Bootstrap em nosso projeto, já estamos prontos para desenvolver nossas aplicações e deixá-las com um visual decente (principalmente pra quem é mais de backend, como eu). Mas já que estamos aqui, vamos aproveitar e integrar também o Font Awesome, que aí não vai ter mais desculpa pra não fazer uma página bonitinha.
Na página oficial do projeto vamos fazer o download dos arquivos do plano gratuito deles, o que já nos dá uma base enorme e, acredito eu, suficiente de ícones.
Descompactado o pacote, vamos selecionar apenas o diretório webfonts
e o css
e movê-los para o diretório static
, mas para não confundir com os arquivos do Bootstrap, criaremos um subdiretório antes, chamado fa (de font awesome). Ah, também não precisaremos de todos aqueles arquivos dentro de fa/css
, basta deixar o all.min.css
. Já do webfonts/
não removeremos nada.
O diretório static
está assim agora:
/static/
|-- css/
| `-- bootstrap.min.css
| `-- bootstrap.min.css.map
|-- js/
| `-- bootstrap.min.js
| `-- bootstrap.min.js.map
|-- fa/
| |-- css/
| | `-- all.min.css
|-- |-- webfonts/
| | `-- todos_os_arquivos_originais
Lembrando aqui que essa estrutura de diretórios é a que eu gosto de usar, mas vocês podem optar por outra, podem nomear de forma diferente, desde que façam os apontamentos corretos nos arquivos abaixo, tudo funcionará!
Integrando ao Django
Agora que já estamos com todos os arquivos estáticos necessários em seus devidos diretórios, vamos fazer a integração de fato.
Editaremos o arquivo /projeto/src/core/settings.py
, adicionando a referência para nosso diretório static
.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Aproveitaremos pra editar outra linha do arquivo settings.py
, indicando nosso diretório de templates, que vamos trabalhar em seguida:
# -- código acima --
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join((BASE_DIR), 'templates/')],
# -- código abaixo --
Pronto, com os diretórios referenciados no arquivo settings.py
, vamos agora criar nossos templates: arquivos HTML que intercalaremos com código Python, através da linguagem de templates Jinja.
Views e urls
Já estamos na reta final de nosso projeto, onde criaremos um template index.html já utilizando as classes Bootstrap e os ícones Font Awesome. Porém, antes vamos realizar um importante passo que é criar a lógica que fará tudo isso funcionar.
No Django, nós mapeamos todas as URLs que nosso sistema "oferece" no arquivo urls.py
. Criaremos então uma URL na raiz que, ao ser acessada, chamará uma view, que é uma função dentro do arquivo views.py
, que por sua vez tratará a requisição (ele é que faz a computação de fato: requisições ao banco de dados ou outros serviços, escrita em disco, etc) e renderizará uma resposta ao usuário. No nosso caso, a função index apenas renderizará o template index.html.
Arquivo urls.py
:
from django.contrib import admin
from django.urls import path
from .views import index
urlpatterns = [
path('admin/', admin.site.urls),
path('', index),
]
Criaremos o arquivo views.py
:
from django.shortcuts import render
def index(request):
return render(request, 'index.html', {})
Pra tudo funcionar, só falta criar o template index.html
Templates
Reta final do projeto, vamos criar o template 'index.html', já utilizando a sintaxe do Jinja pra carregar os arquivos estáticos:
No início do arquivo carregaremos os arquivos estáticos:
{% load static %}
Na seção head do nosso arquivo HTML, referenciaremos os arquivos correspondentes ao código css e js:
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
Agora estamos prontos para escrever código HTML usando as classes do Bootstrap e do Font Awesome para criar o visual de nossa aplicação.
No repositório do projeto no GitHub (link no final do artigo) vocês podem pegar o index.html
completo já com alguns componentes Bootstrap. A página deverá ficar assim:
A estrutura de diretórios final ficou assim:
/projeto/
|-- src/
| |-- core/
| | `-- __init__.py
| | `-- settings.py
| | `-- urls.py
| | `-- views.py
| | `-- wsgi.py
| |-- requirements/
| | `-- local.txt
| |-- static/
| | |-- css/
| | | `-- bootstrap.min.css
| | | `-- bootstrap.min.css.map
| | |-- js/
| | | `-- bootstrap.min.js
| | | `-- bootstrap.min.js.map
| | |-- fa/
| | | |-- css/
| | | | `-- all.min.css
| | |-- |-- webfonts/
| | | | `-- todos_os_arquivos_originais
| |-- templates/
| | `-- index.html
| `-- manage.py
|-- venv/
Repositório do projeto:
thalesbruno / django_bootstrap
A Django setup project with bootstrap and font-awesome integrated
Django project with Bootstrap and font-awesome
Usage
Create a project directory and install a python virtual environment inside it
mkdir project && cd project
python3 -m venv venv
source venv/bin/activate
Create a source dir and clone the repository
mkdir src && cd src
git clone https://github.com/thalesbruno/django_bootstrap .
Install the dependencies
pip install -r requirements/local.txt
Run the migrations and start the server!
python manage.py migrate
python manage.py runserver
Yay! App running in http://127.0.0.1:8000
:)
É isso! Até a próxima ;)
Top comments (3)
Muito obrigado, consegui estruturar aqui uma aplicação seguindo o tutorial.
Poderia por gentileza me esclarecer uma dúvida?
Estou tentando usar o models.py porém ao rodar o makemigrations ele sempre retorna "No changes detected" mesmo eu tendo alterado o arquivo com novas classes. Teria algum caminho específico onde eu deva colocar o models.py? Atualmente esse arquivo está na pasta "src>core".
Show. Obrigado
:)