Como criar aplicativos da Web compatíveis com dispositivos móveis usando Django Framework - Parte 3
“Este artigo foi revisado e atualizado com a versão mais recente do Django – maio de 2016 ”
Na Parte 1 desta série você aprendeu como instalar e configurar o Django em um ambiente virtual e criou o esqueleto do seu primeiro projeto.
Então, na Parte 2, criamos uma aplicação e um modelo para objetos Post, que posteriormente migramos para o banco de dados. Por fim, mostramos como integrar seu aplicativo recém-criado à interface de usuário de administração do Django.
Estes artigos fazem parte da série Django:
Instalando e configurando Django Web Framework com ambientes virtuais – Parte 1
Revisando os fundamentos do Python e criando sua primeira aplicação Web com Django – Parte 2
Neste guia final discutiremos como acessar o aplicativo usando a UI e como torná-lo compatível com dispositivos móveis para todos os tipos de dispositivos. Dito isto, vamos começar.
Criando objetos através da interface de administração do Django
Para criar objetos do tipo Post (lembre-se que é o modelo que definimos na Parte 2 desta série), usaremos a interface de administração do Django.
Certifique-se de que o servidor web integrado do Django esteja rodando na porta 8000 (ou outra de sua escolha) executando o seguinte comando no diretório externo myfirstdjangoproject:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Agora abra seu navegador e aponte para http://ip-address:8000/admin, faça logon usando as credenciais que você configurou no artigo anterior e comece a escrever uma postagem (que, novamente, criará um objeto do tipo Post e inserirá os dados associados no banco de dados subjacente):
Repita o processo 2 ou 3 vezes:
Depois de criarmos algumas postagens, vamos ver o que precisamos fazer para exibi-las usando nosso navegador.
Nossa visão inicial
Nossa primeira view (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) será responsável por filtrar todos os objetos Post e retornar aqueles onde o valor de whenPublished é menor ou igual à data e hora atuais (whenPublished__lte=timezone.now()) ordenado por whenPublished decrescente, o que é o mesmo que dizer “ mais recente primeiro“.
Esses objetos são salvos em uma variável convenientemente chamada de posts, e são retornados (identificados como allposts) para serem incorporados ao HTML, como veremos na próxima seção:
from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
return render(request, 'myblog/posts.html', {'allposts': posts})
Finalmente, o sublinhado duplo em whenPublished__lte acima é usado para separar um campo de banco de dados (whenPublished) de um filtro ou operação (lte=less que ou igual).
Depois de definirmos nossa visualização inicial, vamos trabalhar no modelo associado.
Criar modelo para nosso primeiro projeto
Seguindo as diretrizes e caminhos fornecidos na seção anterior, armazenaremos nosso modelo inicial dentro de meublog/templates/meublog. Isso significa que você precisará criar um diretório chamado templates e um subdiretório chamado myblog:
cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog
Chamaremos o modelo posts.html e inseriremos o seguinte código nele. Você notará que estamos adicionando referências on-line às fontes jQuery, Bootstrap, FontAwesome e Google.
Além disso, colocamos o código Python entre chaves dentro do HTML. Observe que para cada objeto do tipo Post mostraremos seu título, sua data de publicação e autor e, finalmente, seu texto. Por fim, em vermelho você verá que fazemos uma referência aos objetos retornados via myblog/views.py:
Ok, aqui está o arquivo posts.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<style>
.title {
font-family: 'Indie Flower', serif;
font-size: 30px;
color: #1E90FF;
}
h1 {
font-family: 'Pacifico', serif;
font-size: 45px;
color: #1E90FF;
}
</style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
<div>
<div class="title">{{ post.title }}</div>
<strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
<p>{{ post.text|linebreaks }}</p>
</div>
{% endfor %}
</div>
</body>
</html>
No modelo acima, o filtro de quebras de linha é usado para substituir quebras de linha em texto simples pelo equivalente HTML correspondente (
A seguir, precisamos configurar um mapeamento entre URLs em nossa aplicação e as visualizações correspondentes que retornam os dados. Para isso, crie um arquivo chamado urls.py dentro de myblog com o seguinte conteúdo:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.posts, name='posts'),
]
O r'^$' merece um pouco mais de explicação. O r inicial instrui o Django a tratar a string entre aspas simples como uma expressão regular.
Em particular, r'^$' representa uma string vazia de modo que quando apontamos nosso navegador para http://ip-address:8000 (e nada mais), o os dados retornados pela variável posts dentro de views.py (consulte a seção anterior) serão apresentados em nossa página inicial:
Por último, mas não menos importante, incluiremos o arquivo urls.py do nosso aplicativo de blog (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) no urls.py do nosso projeto principal (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'', include('myblog.urls')),
]
Então vamos iniciar o servidor web:
cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000
Agora devemos poder ver as listas de postagens que criamos anteriormente:
Graças ao Bootstrap, você ainda pode ter uma excelente visualização em um dispositivo menor:
Resumindo
Vamos agora revisar os conceitos que abordamos neste artigo e ao longo desta série:
1. Cada modelo define um objeto e mapeia para uma tabela de banco de dados, cujos campos, por sua vez, são mapeados para as propriedades desse objeto. Por outro lado, um template define a interface do usuário onde os dados retornados pela visualização serão exibidos.
Digamos que queremos modificar nosso modelo adicionando um campo chamado summary ao objeto Post, onde armazenaremos uma breve descrição opcional de cada postagem. Vamos adicionar a seguinte linha em myblog/models.py:
summary = models.CharField(max_length=350, blank=True, null=True)
Conforme aprendemos no artigo anterior, precisamos migrar as alterações para o banco de dados:
python manage.py makemigrations myblog
python manage.py migrate myblog
Em seguida, use a interface administrativa para editar as postagens e adicionar um breve resumo a cada postagem. Por fim, substitua a seguinte linha no modelo (posts.html):
<p>{{ post.text|linebreaks }}</p>
com
<p>{{ post.summary }}</p>
Atualize a página inicial para ver as alterações:
2. Uma função view recebe uma solicitação HTTP e retorna uma resposta HTTP. Neste artigo, def posts(request) em views.py faz uma chamada ao banco de dados subjacente para recuperar todas as postagens. Se quisermos recuperar todas as postagens com a palavra ansible no título, devemos substituir.
posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
com
posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')
Ao separar a interface do usuário da lógica da aplicação em aplicações web, o Django facilita as tarefas de manutenção e escalonamento de aplicações.
3. Se você seguiu as instruções fornecidas nesta série, a estrutura do seu projeto deverá ser a seguinte:
myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│ ├── admin.py
│ ├── admin.pyc
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ ├── 0001_initial.pyc
│ │ ├── __init__.py
│ │ └── __init__.pyc
│ ├── models.py
│ ├── models.pyc
│ ├── templates
│ │ └── myblog
│ │ └── posts.html
│ ├── tests.py
│ ├── urls.py
│ ├── urls.pyc
│ ├── views.py
│ └── views.pyc
└── myfirstdjangoproject
├── __init__.py
├── __init__.pyc
├── settings.py
├── settings.pyc
├── urls.py
├── urls.pyc
├── wsgi.py
└── wsgi.pyc
Caso a lista acima não seja exibida corretamente em seu navegador, aqui está uma captura de tela da saída do seguinte comando:
tree myfirstdjangoenv/myfirstdjangoproject
Resumo
Embora todos esses conceitos possam parecer um pouco intimidantes no início, posso garantir que Django vale bem a pena todos os esforços necessários para se familiarizar com ele
Espero que o exemplo que usamos nesta série para apresentar esta excelente estrutura da web o motive a aprender mais. Se sim, a documentação oficial do Django (que é constantemente atualizada) é o melhor lugar para começar.
Posso garantir que há muito mais no Django do que podemos abordar adequadamente em uma série de artigos, então sinta-se à vontade para explorá-lo e aprender fazendo!
Sinta-se à vontade para nos enviar uma mensagem com dúvidas ou sugestões usando o formulário abaixo.