Django: setup básico com Bootstrap
Tags: django, python
Published: 2019-10-15 00:10:55

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:

```bash
~: $ mkdir projeto
~: $ cd projeto/
```

E então, preparar nosso ambiente Python:

```bash
~/projeto: $ python3 -m venv venv
~/projeto: $ source venv/bin/activate
(venv) ~/projeto: $ pip install Django
```

Acabamos de criar um [ambiente virtual](https://realpython.com/python-virtual-environments-a-primer/) 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:

```bash
(venv) ~/projeto: $ mkdir src
(venv) ~/projeto: $ cd src/
(venv) ~/projeto/src: $ django-admin startproject core .
```

Explicando a criação do projeto até aqui:

1. 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, o `src`;
2. Nesse diretório `src` criamos o projeto Django usando o comando `django-admin startproject` seguido do nome do projeto, nesse caso `core`, e de um ponto, que indica o diretório atual como aquele onde será feita a instalação. 

Agora, criaremos mais dois diretórios:

```bash
(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:

```bash
(venv) ~/projeto/src: $ git init
(venv) ~/projeto/src: $ touch .gitignore

```

Aqui nesse [link](https://github.com/github/gitignore/blob/master/Python.gitignore
) 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`.

```bash
(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](https://pip.pypa.io/en/stable/reference/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):

```bash
(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](https://getbootstrap.com/docs/4.3/getting-started/download/) 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](https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself) 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`.

```python
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:

```python
# -- 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](https://jinja.palletsprojects.com/en/2.10.x/).


## 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`:

```python
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`:

```python
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:

```html
<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:

![Django + Bootstrap generic page](https://thepracticaldev.s3.amazonaws.com/i/fuo71kza50tuce68nhnv.png)

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:

{% github thalesbruno/django_bootstrap %}

É isso! Até a próxima ;)