Django Lab

Uma apresentação hands-on de Django para o GDG Aracaju. O código da aplicação (e também da apresentação) está no Github: http://github.com/erickmendonca/gdg-django-lab

Transcript

1. DJANGO LAB GDG ARACAJU http://gdgaracaju.com.br/ Apresentação criada por / Erick Mendonça @erickmagnus Use as setas do teclado ou os controles no canto para navegar nos slides.
2. ERICK MENDONÇA +ErickMendonça erickmendonca.com.br erick@erickmendonca.com.br
3. E VOCÊS? Onde trabalham e/ou estudam? O que usam para desenvolver?
4. AGENDA Aplicações Web Introdução ao Django Ambiente de desenvolvimento Hello World, Django! Criando um projeto simples Aprimoramentos Publicação
5. APLICAÇÕES WEB "Aplicações web são legais" Multiplataforma Acessíveis em qualquer lugar Fácil distribuição Atualização instantânea Correção de bugs controlada
6. MAS O QUE PODE COMPLICAR?
7. COMPLICAÇÕES Concorrência Infraestrutura Manter a disponibilidade alta Custos de hospedagem Agilidade no desenvolvimento
8. MAS E QUEM PODERÁ NOS DEFENDER?
9. ALTERNATIVAS Platforms as a Service Google App Engine, Heroku Frameworks Flask, Django, Ruby on Rails Cloud Google Cloud Platform Amazon Web Services Páginas responsivas Bootstrap
10. INTRODUÇÃO AO DJANGO O framework Web para perfeccionistas com prazos. Django torna mais fácil criar melhores Web apps mais rápido e com menos código.
11. QUEM USA DJANGO?
12. BITBUCKET
13. PINTEREST
14. INSTAGRAM
15. EXTRA: DOJOPUZZLES
16. MAS O QUE É O DJANGO?
19. DJANGO É: Um framework Web Alta performance, elegante "Coisas fáceis deveriam ser fáceis, e as difíceis deveriam ser possíveis", Larry Wall, criador do Perl É apenas Python!
20. POR QUE DJANGO? ORM: Mapeamento Objeto Relacional Rotas Views Templates Forms Admin
21. VAMOS LÁ!
22. AMBIENTE DE DESENVOLVIMENTO Instale o Python, Django, Banco de dados...
23. NITROUS.IO Cadastrem-se!
24. Cliquem no botão: AMBIENTE PRONTO!
25. HELLO DJANGO Vá ao terminal: # E n t r a r n a p a s t a d o p r o j e t o : c d ~ / w o r k s p a c e / g d g - d j a n g o - l a b # g i t c h e c k o u t v - 1 # g i t c l e a n - f - d d j a n g o - a d m i n . p y s t a r t p r o j e c t g d g _ p i z z a Projeto criado :-)
26. ESTRUTURA BÁSICA DO PROJETO gdg_pizza manage.py gdg_pizza __init__.py settings.py urls.py wsgi.py
27. O QUE SÃO ESSAS PASTAS E ARQUIVOS? gdg_pizza: essa pasta exterior é o diretório raiz do projeto. Seu nome não importa ao Django. manage.py: utilitário de linha de comando que lhe permite interagir com seu projeto.
28. MAS E OS OUTROS? gdg_pizza: essa pasta interior é o pacote Python de seu projeto. __init__.py: apenas um arquivo vazio para que o Python considere a pasta como um pacote Python. settings.py: configurações de seu projeto Django. urls.py: declarações de URLs para esse projeto Django. wsgi.py: ponto de entrada para servidores web compatíveis com WSGI.
29. SERVIDOR DE DESENVOLVIMENTO Experimente executar no terminal: p y t h o n m a n a g e . p y r u n s e r v e r 0 . 0 . 0 . 0 : 8 0 8 0 Seu projeto Django já está rodando! Para acessá-lo no Nitrous: menu P r e v i e w - > P o r t 8 0 8 0
30. RUNSERVER V a l i d a t i n g m o d e l s . . . 0 e r r o r s f o u n d M a y 2 0 , 2 0 1 4 - 2 2 : 1 0 : 4 7 D j a n g o v e r s i o n 1 . 5 . 1 , u s i n g s e t t i n g s ' g d g _ p i z z a . s e t t i n g s ' D e v e l o p m e n t s e r v e r i s r u n n i n g a t h t t p : / / 1 2 7 . 0 . 0 . 1 : 8 0 8 0 / Q u i t t h e s e r v e r w i t h C O N T R O L - C .
31. SEU PRIMEIRO PROJETO DJANGO
32. RUNSERVER Você não precisa especificar a porta: por padrão é a 8000. Você não precisa especificar o IP: por padrão aceita apenas localhost! Não é necessário atualizar: alterações do código são recarregadas automaticamente. Não use em produção: servidor apenas para ambientes de desenvolvimento.
33. ADICIONANDO UMA PÁGINA SIMPLES (1) Edite o arquivo g d g _ p i z z a \ u r l s . p y para incluir: f r o m d j a n g o . c o n f . u r l s i m p o r t p a t t e r n s , i n c l u d e , u r l i m p o r t v i e w s u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . i n d e x , n a m e = ' i n d e x ' ) )
34. ADICIONANDO UMA PÁGINA SIMPLES (2) Adicione o arquivo g d g _ p i z z a \ v i e w s . p y com o código: f r o m d j a n g o . h t t p i m p o r t H t t p R e s p o n s e d e f i n d e x ( r e q u e s t ) : r e t u r n H t t p R e s p o n s e ( " H e l l o , w o r l d . Y o u ' r e a t t h e i n d e x . " )
35. HELLO WORLD!
36. REQUEST HANDLERS São os responsáveis por tratar as requisições HTTP. Podem retornar HttpResponse, do pacote: f r o m d j a n g o . h t t p i m p o r t H t t p R e s p o n s e E podem ser escritos da forma: d e f i n d e x ( r e q u e s t ) : r e t u r n H t t p R e s p o n s e ( " H e l l o , w o r l d . Y o u ' r e a t t h e i n d e x . " )
37. URL CONF , Tim Berners-Lee "Cool URIs don't change" URLs devem ser configuráveis URLs não precisam mudar: estabilidade
38. URL CONF A configuração das URLs em Django podem ser feitas usando expressões regulares: u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . i n d e x , n a m e = ' i n d e x ' )
39. URL PATTERNS u r l ( r ' ^ $ ' , v i e w s . i n d e x , n a m e = ' i n d e x ' ) u r l ( ) : método gerador da URL. r ' ^ $ ' : expressão regular para identificar a URL. v i e w s . i n d e x : método que tratará desse endereço. n a m e = ' i n d e x ' : nome da URL.
40. EXPRESSÕES REGULARES r : indica que a string não deve ter caracteres escapados. ^ : começo da string. $ : fim da string. Então, r ' ^ $ ' indentifica uma URL vazia!
41. WEB APP
42. CRIANDO UM APP Django diferencia projeto de app: Um projeto pode conter vários apps. Apps podem ser reutilizados em outros projetos. O que temos até agora é um projeto. Para criar um app: . / m a n a g e . p y s t a r t a p p c a r d a p i o
43. ESTRUTURA DE UM APP gdg_pizza (...) cardapio __init.py__ models.py tests.py views.py
44. E O QUE SÃO ESSES ARQUIVOS NOVOS? models.py: Modelos/entidades que representam os dados do app. tests.py: Testes do app. views.py: Views do app.
45. MODELS.PY f r o m d j a n g o . d b i m p o r t m o d e l s c l a s s P r o d u c t ( m o d e l s . M o d e l ) n a m e = m o d e l s . C h a r F i e l d ( m a x _ l e n g t h = 1 0 0 ) p r i c e = m o d e l s . D e c i m a l F i e l d ( m a x _ d i g i t s = 6 , d e c i m a l _ p l a c e s = 2 ) d e s c r i p t i o n = m o d e l s . T e x t F i e l d ( b l a n k = T r u e ) f e a t u r e d = m o d e l s . B o o l e a n F i e l d ( d e f a u l t = F a l s e , b l a n k = T r u e ) Ok, temos um modelo de produto. Nesse modelo, temos nome, preço, descrição e se ele é destaque ou não. Mas aonde vamos salvar os produtos?
46. CONFIGURANDO O BANCO DE DADOS Em sua máquina: Instale o banco de dados de sua preferência Edite o settings.py No Nitrous.IO: p a r t s i n s t a l l p o s t g r e s q l Ou vá no menu A u t o p a r t s - > M a n a g e P a c k a g e s .
47. DJANGO + POSTGRESQL Edite o arquivo s e t t i n g s . p y : ( . . . ) D A T A B A S E S = { ' d e f a u l t ' : { ' E N G I N E ' : ' d j a n g o . d b . b a c k e n d s . p o s t g r e s q l _ p s y c o p g 2 ' , ' N A M E ' : ' g d g _ p i z z a ' , ' H O S T ' : ' 0 . 0 . 0 . 0 ' , ' P O R T ' : ' ' , } } ( . . . ) Também existem os campos U S E R e P A S S W O R D que devem ser adicionados se necessário.
48. ADICIONANDO NOSSO APP AO PROJETO Edite o arquivo s e t t i n g s . p y : ( . . . ) I N S T A L L E D _ A P P S = ( # A p p s p a d r ã o d o D j a n g o ' d j a n g o . c o n t r i b . a u t h ' , ' d j a n g o . c o n t r i b . c o n t e n t t y p e s ' , ' d j a n g o . c o n t r i b . s e s s i o n s ' , ' d j a n g o . c o n t r i b . s i t e s ' , ' d j a n g o . c o n t r i b . m e s s a g e s ' , ' d j a n g o . c o n t r i b . s t a t i c f i l e s ' , # E o n o s s o n o v o a p p t a m b é m ! ' c a r d a p i o ' , ) ( . . . )
49. MÁGICA DO SQL p y t h o n m a n a g e . p y s q l c a r d a p i o B E G I N ; C R E A T E T A B L E " c a r d a p i o _ p r o d u c t " ( " i d " s e r i a l N O T N U L L P R I M A R Y K E Y , " n a m e " v a r c h a r ( 1 0 0 ) N O T N U L L , " p r i c e " n u m e r i c ( 6 , 2 ) N O T N U L L , " d e s c r i p t i o n " t e x t N O T N U L L , " f e a t u r e d " b o o l e a n N O T N U L L ) ; C O M M I T ;
50. OUTROS COMANDOS DE BANCO DE DADOS p y t h o n m a n a g e . p y v a l i d a t e p y t h o n m a n a g e . p y s q l c l e a r c a r d a p i o p y t h o n m a n a g e . p y s y n c d b v a l i d a t e : Valida os modelos do projeto. s q l c l e a r : Mostra os comandos DROP TABLE necessários para remover o app do banco de dados. s y n c d b : Cria a estutura do projeto no banco de dados!
51. MAS E AÍ, PRA MANIPULAR OS DADOS? I N S E R T I N T O c a r d a p i o _ p r o d u c t ( n a m e , p r i c e , d e s c r i p t i o n , f e a t u r e d ) V A L U E S ( ' p i z z a ' , ' 2 0 . 0 '
52. #NOT
53. DJANGO DATABASE API Na verdade, você pode usar SQL personalizados. Mas não precisa! Vamos testar no shell do Django: p y t h o n m a n a g e . p y s h e l l f r o m c a r d a p i o . m o d e l s i m p o r t P r o d u c t P r o d u c t . o b j e c t s . a l l ( ) c = P r o d u c t ( n a m e = ' p i z z a ' , p r i c e = 2 0 . 0 , f e a t u r e d = T r u e ) p r i n t ( c . n a m e ) c . s a v e ( ) c . i d P r o d u c t . o b j e c t s . a l l ( )
54. DEIXANDO OS MODELOS MAIS INTUITIVOS Edite o seu m o d e l s . p y : ( . . . ) c l a s s P r o d u c t ( m o d e l s . M o d e l ) : n a m e = m o d e l s . C h a r F i e l d ( m a x _ l e n g t h = 1 0 0 ) p r i c e = m o d e l s . D e c i m a l F i e l d ( m a x _ d i g i t s = 6 , d e c i m a l _ p l a c e s = 2 ) d e s c r i p t i o n = m o d e l s . T e x t F i e l d ( b l a n k = T r u e ) f e a t u r e d = m o d e l s . B o o l e a n F i e l d ( d e f a u l t = F a l s e , b l a n k = T r u e ) d e f _ _ u n i c o d e _ _ ( s e l f ) : r e t u r n s e l f . n a m e No shell do Django, faça: P r o d u c t . o b j e c t s . a l l ( )
55. PODEMOS ALTERAR NOSSO MODELO: m o d e l s . p y i m p o r t d a t e t i m e ( . . . ) c l a s s P r o d u c t ( m o d e l s . M o d e l ) : ( . . . ) p u b _ d a t e = m o d e l s . D a t e T i m e F i e l d ( ' d a t a d e p u b l i c a ç ã o ' ) d e f w a s _ p u b l i s h e d _ r e c e n t l y ( s e l f ) : r e t u r n s e l f . p u b _ d a t e > = t i m e z o n e . n o w ( ) - d a t e t i m e . t i m e d e l t a ( d a y s = 1 ) ( . . . )
56. MAS E O BANCO DE DADOS? Ao alterar nosso modelo, o s y n c d b não atualiza a tabela. Podemos: Recriá-la ou alterá-la manualmente. (lembre do . / m a n a g e . p y s q l c a r d a p i o ) Usar um sistema de migrações, como o South.
57. MAS E O WEBAPP? Calma!
58. DJANGO ADMIN Vamos editar nosso s e t t i n g s . p y : ( . . . ) I N S T A L L E D _ A P P S = ( ' d j a n g o . c o n t r i b . a u t h ' , ' d j a n g o . c o n t r i b . c o n t e n t t y p e s ' , ' d j a n g o . c o n t r i b . s e s s i o n s ' , ' d j a n g o . c o n t r i b . s i t e s ' , ' d j a n g o . c o n t r i b . m e s s a g e s ' , ' d j a n g o . c o n t r i b . s t a t i c f i l e s ' , ' d j a n g o . c o n t r i b . a d m i n ' , ' c a r d a p i o ' , ) ( . . . )
59. E o u r l s . p y : f r o m d j a n g o . c o n f . u r l s i m p o r t p a t t e r n s , i n c l u d e , u r l i m p o r t v i e w s f r o m d j a n g o . c o n t r i b i m p o r t a d m i n a d m i n . a u t o d i s c o v e r ( ) u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . i n d e x , n a m e = ' i n d e x ' ) , u r l ( r ' ^ a d m i n / ' , i n c l u d e ( a d m i n . s i t e . u r l s ) ) , )
60. E no terminal: . / m a n a g e . p y s y n c d b . / m a n a g e . p y r u n s e r v e r 0 . 0 . 0 . 0 : 8 0 8 0 Agora abram o preview e adicionem / a d m i n à URL :-)
62. E EM PT-BR? Editem o s e t t i n g s . p y : ( . . . ) T I M E _ Z O N E = ' A m e r i c a / S a o _ P a u l o ' L A N G U A G E _ C O D E = ' p t - b r ' ( . . . )
63. MAS E O APP CARDÁPIO? Crie um arquivo a d m i n . p y dentro do app: f r o m d j a n g o . c o n t r i b i m p o r t a d m i n f r o m c a r d a p i o . m o d e l s i m p o r t P r o d u c t a d m i n . s i t e . r e g i s t e r ( P r o d u c t ) . / m a n a g e . p y r u n s e r v e r
64. VAMOS DEIXAR O / A D M I N MAIS LEGÍVEL? m o d e l s . p y # c o d i n g = U T F - 8 ( . . . ) c l a s s P r o d u c t ( m o d e l s . M o d e l ) : n a m e = m o d e l s . C h a r F i e l d ( ' n o m e ' , m a x _ l e n g t h = 1 0 0 ) p r i c e = m o d e l s . D e c i m a l F i e l d ( ' p r e ç o ' , m a x _ d i g i t s = 6 , d e c i m a l _ p l a c e s = 2 ) d e s c r i p t i o n = m o d e l s . T e x t F i e l d ( ' d e s c r i ç ã o ' , b l a n k = T r u e ) f e a t u r e d = m o d e l s . B o o l e a n F i e l d ( ' d e s t a q u e ' , d e f a u l t = F a l s e , b l a n k = T r u e ) p u b _ d a t e = m o d e l s . D a t e T i m e F i e l d ( ' d a t a d e p u b l i c a ç ã o ' , a u t o _ n o w _ a d d = T r u e ) c l a s s M e t a : v e r b o s e _ n a m e = ' P r o d u t o ' v e r b o s e _ n a m e _ p l u r a l = ' P r o d u t o s ' o r d e r i n g = [ ' n a m e ' ] ( . . . )
66. PENSEM NA QUANTIDADE DE CÓDIGO QUE VOCÊS NÃO ESCREVERAM: SELECT, INSERT, UPDATE, DELETE Validação Autenticação URLs amigáveis E o Admin pode ser personalizado!
67. ORGANIZANDO OS CAMPOS EXIBIDOS NO FORMULÁRIO Edite o a d m i n . p y : ( . . . ) c l a s s P r o d u c t A d m i n ( a d m i n . M o d e l A d m i n ) : f i e l d s = [ ' f e a t u r e d ' , ' n a m e ' , ' p r i c e ' ] a d m i n . s i t e . r e g i s t e r ( P r o d u c t , P r o d u c t A d m i n )
68. ORGANIZANDO OS CAMPOS EM PAINÉIS ( . . . ) c l a s s P r o d u c t A d m i n ( a d m i n . M o d e l A d m i n ) : f i e l d s e t s = [ ( N o n e , { ' f i e l d s ' : [ ' n a m e ' , ' f e a t u r e d ' ] } ) , ( ' D e t a l h e s ' , { ' f i e l d s ' : [ ' p r i c e ' , ' d e s c r i p t i o n ' ] } ) ] ( . . . )
69. ADICIONANDO MAIS MODELOS Edite o m o d e l s . p y : ( . . . ) c l a s s C a t e g o r y ( m o d e l s . M o d e l ) : n a m e = m o d e l s . C h a r F i e l d ( v e r b o s e _ n a m e = ' N o m e ' , m a x _ l e n g t h = 1 0 0 , h e l p _ t e x t = ' O n o m e d a c a t e g o r i a ' ) c r e a t e d _ o n = m o d e l s . D a t e T i m e F i e l d ( a u t o _ n o w _ a d d = T r u e , v e r b o s e _ n a m e = ' C r i a d o e m ' ) u p d a t e d _ o n = m o d e l s . D a t e T i m e F i e l d ( a u t o _ n o w = T r u e , v e r b o s e _ n a m e = ' A t u a l i z a d o e m ' ) d e f _ _ u n i c o d e _ _ ( s e l f ) : r e t u r n s e l f . n a m e c l a s s M e t a : v e r b o s e _ n a m e = ' C a t e g o r i a ' v e r b o s e _ n a m e _ p l u r a l = ' C a t e g o r i a s ' o r d e r i n g = [ ' n a m e ' ] c l a s s P r o d u c t ( m o d e l s . M o d e l ) : c a t e g o r y = m o d e l s . F o r e i g n K e y ( C a t e g o r y ) ( . . . )
70. E o a d m i n . p y : f r o m d j a n g o . c o n t r i b i m p o r t a d m i n f r o m c a r d a p i o . m o d e l s i m p o r t P r o d u c t , C a t e g o r y c l a s s P r o d u c t A d m i n ( a d m i n . M o d e l A d m i n ) : f i e l d s e t s = [ ( N o n e , { ' f i e l d s ' : [ ' c a t e g o r y ' , ' n a m e ' , ' f e a t u r e d ' ] } ) , ( ' D e t a l h e s ' , { ' f i e l d s ' : [ ' p r i c e ' , ' d e s c r i p t i o n ' ] } ) ] a d m i n . s i t e . r e g i s t e r ( P r o d u c t , P r o d u c t A d m i n ) a d m i n . s i t e . r e g i s t e r ( C a t e g o r y )
71. ATUALIZE TUDO! p s q l - c " d r o p d a t a b a s e g d g _ p i z z a ; " p s q l - c " c r e a t e d a t a b a s e g d g _ p i z z a ; " . / m a n a g e . p y s y n c d b . / m a n a g e . p y r u n s e r v e r E abra o Admin :-)
72. ADICIONANDO PRODUTOS E CATEGORIAS Edite o a d m i n . p y : ( . . . ) c l a s s P r o d u c t s I n l i n e ( a d m i n . S t a c k e d I n l i n e ) : m o d e l = P r o d u c t e x t r a = 2 c l a s s C a t e g o r y A d m i n ( a d m i n . M o d e l A d m i n ) : i n l i n e s = [ P r o d u c t s I n l i n e ] ( . . . ) a d m i n . s i t e . r e g i s t e r ( P r o d u c t , P r o d u c t A d m i n ) a d m i n . s i t e . r e g i s t e r ( C a t e g o r y , C a t e g o r y A d m i n )
75. ORDENANDO E FILTRANDO NO ADMIN Edite o a d m i n . p y : ( . . . ) c l a s s P r o d u c t A d m i n ( a d m i n . M o d e l A d m i n ) : l i s t _ d i s p l a y = ( ' n a m e ' , ' c a t e g o r y ' , ' p r i c e ' , ' f e a t u r e d ' ) l i s t _ f i l t e r = [ ' p u b _ d a t e ' ] s e a r c h _ f i e l d s = [ ' n a m e ' , ' d e s c r i p t i o n ' ] ( . . . ) E o m o d e l s . p y ( . . . ) c l a s s P r o d u c t ( m o d e l s . M o d e l ) : c a t e g o r y = m o d e l s . F o r e i g n K e y ( C a t e g o r y , v e r b o s e _ n a m e = ' C a t e g o r i a ' ) ( . . . ) d e f w a s _ p u b l i s h e d _ r e c e n t l y ( s e l f ) : r e t u r n s e l f . p u b _ d a t e > = t i m e z o n e . n o w ( ) - d a t e t i m e . t i m e d e l t a ( d a y s = 1 ) w a s _ p u b l i s h e d _ r e c e n t l y . a d m i n _ o r d e r _ f i e l d = ' p u b _ d a t e ' w a s _ p u b l i s h e d _ r e c e n t l y . b o o l e a n = T r u e w a s _ p u b l i s h e d _ r e c e n t l y . s h o r t _ d e s c r i p t i o n = ' P u b l i c a d o r e c e n t e m e n t e ? ' ( . . . )
77. VIEWS Uma view é um tipo de página em seu projeto, que corresponde a uma função de sua aplicação. Cada página ou conteúdo no Django é servido como uma view. Cada view corresponde a uma função/método. O Django escolhe através da URL Conf. Nós já temos uma view!
78. ESCREVENDO VIEWS Lembrem do g d g _ p i z z a \ v i e w s . p y . f r o m d j a n g o . h t t p i m p o r t H t t p R e s p o n s e d e f i n d e x ( r e q u e s t ) : r e t u r n H t t p R e s p o n s e ( " H e l l o , w o r l d . Y o u ' r e a t t h e i n d e x . " ) E do u r l s . p y : f r o m d j a n g o . c o n f . u r l s i m p o r t p a t t e r n s , i n c l u d e , u r l i m p o r t v i e w s f r o m d j a n g o . c o n t r i b i m p o r t a d m i n a d m i n . a u t o d i s c o v e r ( ) u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . i n d e x , n a m e = ' i n d e x ' ) , u r l ( r ' ^ a d m i n / ' , i n c l u d e ( a d m i n . s i t e . u r l s ) ) , )
79. CRIANDO UMA VIEW DE UM APP Dentro de c a r d a p i o , edite v i e w s . p y : # e n c o d i n g = u t f - 8 f r o m d j a n g o . h t t p i m p o r t H t t p R e s p o n s e d e f c a r d a p i o _ i n d e x ( r e q u e s t ) : r e t u r n H t t p R e s p o n s e ( " O l á ! B e m v i n d o a o c a r d á p i o . " ) E crie u r l s . p y f r o m d j a n g o . c o n f . u r l s i m p o r t p a t t e r n s , u r l f r o m p o l l s i m p o r t v i e w s u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . c a r d a p i o _ i n d e x , n a m e = ' c a r d a p i o _ i n d e x ' ) )
80. INCLUINDO URLS DE APPS Edite o g d g _ p i z z a \ u r l s . p y : ( . . . ) u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . i n d e x , n a m e = ' i n d e x ' ) , u r l ( r ' ^ c a r d a p i o / ' , i n c l u d e ( ' c a r d a p i o . u r l s ' ) ) , u r l ( r ' ^ a d m i n / ' , i n c l u d e ( a d m i n . s i t e . u r l s ) ) , ) Agora você pode acessar a URL / c a r d a p i o e quaisquer outras que adicionemos ao módulo c a r d a p i o !
81. ESCREVENDO MAIS VIEWS: Adicione mais algumas linhas no c a r d a p i o / v i e w s . p y : ( . . . ) d e f d e t a i l ( r e q u e s t , c a t e g o r y _ i d ) : r e t u r n H t t p R e s p o n s e ( u " V o c ê e s t á v e n d o d e t a l h e s d a c a t e g o r i a % s . " \ % c a t e g o r y _ i d ) d e f p r o d u c t s ( r e q u e s t , c a t e g o r y _ i d ) : r e t u r n H t t p R e s p o n s e ( u " V o c ê e s t á v e n d o a l i s t a d e p r o d u t o s d a c a t e g o r i a % s . " \ % c a t e g o r y _ i d ) E o c a r d a p i o / u r l s . p y : ( . . . ) u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . c a r d a p i o _ i n d e x , n a m e = ' c a r d a p i o _ i n d e x ' ) , u r l ( r ' ^ ( ? P < c a t e g o r y _ i d > \ d + ) / $ ' , v i e w s . d e t a i l , n a m e = ' d e t a i l ' ) , u r l ( r ' ^ ( ? P < c a t e g o r y _ i d > \ d + ) / p r o d u c t s / $ ' , v i e w s . p r o d u c t s , n a m e = ' p r o d u c t s ' ) , )
82. VIEWS ÚTEIS! v i e w s . p y : d e f c a r d a p i o _ i n d e x ( r e q u e s t ) : # p e g a o s ú l t i m o s 5 r e g i s t r o s d e C a t e g o r i a , o r d e n a d o s p o r ' c r e a t e d _ o n ' l a t e s t _ c a t e g o r y _ l i s t = C a t e g o r y . o b j e c t s . o r d e r _ b y ( ' - c r e a t e d _ o n ' ) [ : 5 ] # j u n t a t o d o s o s r e s u l t a d o s d a l i s t a c o m ' , ' e n t r e e l e s o u t p u t = ' , ' . j o i n ( [ c . n a m e f o r c i n l a t e s t _ c a t e g o r y _ l i s t ] ) r e t u r n H t t p R e s p o n s e ( o u t p u t ) E acessem / c a r d a p i o .
83. Design misturado com código Difícil manutenção
84. TEMPLATES Reusabilidade de layout Personalização de apps Facilita a geração de HTMLs
85. CRIANDO TEMPLATES Dentro de c a r d a p i o , crie a pasta t e m p l a t e s . Por padrão, o Django procura por templates em vários locais. Esse é um deles! Crie o arquivo i n d e x . h t m l : { % i f l a t e s t _ c a t e g o r y _ l i s t % } < u l > { % f o r c a t e g o r y i n l a t e s t _ c a t e g o r y _ l i s t % } < l i > < a h r e f = " / c a r d a p i o / { { c a t e g o r y . i d } } / " > { { c a t e g o r y . n a m e } } < / a > < / l i > { % e n d f o r % } < / u l > { % e l s e % } < p > N e n h u m a c a t e g o r i a d i s p o n í v e l . < / p > { % e n d i f % }
86. USANDO TEMPLATES NAS VIEWS Edite o seu v i e w s . p y : f r o m d j a n g o . t e m p l a t e i m p o r t R e q u e s t C o n t e x t , l o a d e r ( . . . ) d e f c a r d a p i o _ i n d e x ( r e q u e s t ) : t e m p l a t e = l o a d e r . g e t _ t e m p l a t e ( ' c a r d a p i o / i n d e x . h t m l ' ) l a t e s t _ c a t e g o r y _ l i s t = C a t e g o r y . o b j e c t s . o r d e r _ b y ( ' - c r e a t e d _ o n ' ) [ : 5 ] c o n t e x t = R e q u e s t C o n t e x t ( r e q u e s t , { ' l a t e s t _ c a t e g o r y _ l i s t ' : l a t e s t _ c a t e g o r y _ l i s t , } ) r e t u r n H t t p R e s p o n s e ( t e m p l a t e . r e n d e r ( c o n t e x t ) )
87. Linguagem simplificada Existem algumas formas de controle: i f , f o r c o u n t e r s i n c l u d e s Fácil adaptação de layouts existentes
88. ATALHO: R E N D E R ( ) É muito comum usar H t t p R e s p o n s e , l o a d e r , R e q u e s t C o n t e x t . Então o Django oferece um atalho: v i e w s . p y : ( . . . ) f r o m d j a n g o . s h o r t c u t s i m p o r t r e n d e r d e f c a r d a p i o _ i n d e x ( r e q u e s t ) : l a t e s t _ c a t e g o r y _ l i s t = C a t e g o r y . o b j e c t s . o r d e r _ b y ( ' - c r e a t e d _ o n ' ) [ : 5 ] c o n t e x t = { ' l a t e s t _ c a t e g o r y _ l i s t ' : l a t e s t _ c a t e g o r y _ l i s t } r e t u r n r e n d e r ( r e q u e s t , ' c a r d a p i o / i n d e x . h t m l ' , c o n t e x t ) ( . . . )
89. LANÇANDO UM ERRO: 404 v i e w s . p y : d e f d e t a i l ( r e q u e s t , c a t e g o r y _ i d ) : t r y : c a t e g o r y = C a t e g o r y . o b j e c t s . g e t ( p k = c a t e g o r y _ i d ) e x c e p t C a t e g o r y . D o e s N o t E x i s t : r a i s e H t t p 4 0 4 r e t u r n r e n d e r ( r e q u e s t , ' c a r d a p i o / d e t a i l . h t m l ' , { ' c a t e g o r y ' : c a t e g o r y } ) Por enquanto, crie t e m p l a t e s \ d e t a i l . h t m l apenas com: { { c a t e g o r y } }
90. Válido: Inválido:
91. ATALHO: G E T _ O B J E C T _ O R _ 4 0 4 ( ) Também é bem comum tentar pegar um objeto no banco de dados e lançar um erro caso não o encontre. Então temos mais um atalho do Django! Reescrevendo v i e w s . p y : ( . . . ) f r o m d j a n g o . s h o r t c u t s i m p o r t r e n d e r , g e t _ o b j e c t _ o r _ 4 0 4 ( . . . ) d e f d e t a i l ( r e q u e s t , c a t e g o r y _ i d ) : c a t e g o r y = g e t _ o b j e c t _ o r _ 4 0 4 ( C a t e g o r y , p k = c a t e g o r y _ i d ) r e t u r n r e n d e r ( r e q u e s t , ' c a r d a p i o / d e t a i l . h t m l ' , { ' c a t e g o r y ' : c a t e g o r y } ) ( . . . )
92. Reescrevendo o template d e t a i l . h t m l : < h 1 > { { c a t e g o r y . n a m e } } < / h 1 > < u l > { % f o r p i n c a t e g o r y . p r o d u c t _ s e t . a l l % } < l i > { { p . n a m e } } < / l i > { % e n d f o r % } < / u l >
93. ORGANIZANDO Edite g d g _ p i z z a \ u r l s . p y : u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ ' , i n c l u d e ( ' c a r d a p i o . u r l s ' ) ) , u r l ( r ' ^ a d m i n / ' , i n c l u d e ( a d m i n . s i t e . u r l s ) ) , ) Remova o g d g _ p i z z a \ v i e w s . p y . Edite c a r d a p i o \ u r l s . p y : f r o m d j a n g o . c o n f . u r l s i m p o r t p a t t e r n s , u r l f r o m c a r d a p i o i m p o r t v i e w s u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . c a r d a p i o _ i n d e x , n a m e = ' c a r d a p i o _ i n d e x ' ) , u r l ( r ' ^ ( ? P < c a t e g o r y _ i d > \ d + ) / $ ' , v i e w s . d e t a i l , n a m e = ' d e t a i l ' ) , )
94. Aproveite e veja seu c a r d a p i o \ v i e w s . p y : # ! / u s r / b i n / p y t h o n # c o d i n g : U T F - 8 # C r e a t e y o u r v i e w s h e r e . f r o m c a r d a p i o . m o d e l s i m p o r t C a t e g o r y f r o m d j a n g o . h t t p i m p o r t H t t p R e s p o n s e f r o m d j a n g o . s h o r t c u t s i m p o r t r e n d e r , g e t _ o b j e c t _ o r _ 4 0 4 d e f c a r d a p i o _ i n d e x ( r e q u e s t ) : l a t e s t _ c a t e g o r y _ l i s t = C a t e g o r y . o b j e c t s . o r d e r _ b y ( ' - c r e a t e d _ o n ' ) [ : 5 ] c o n t e x t = { ' l a t e s t _ c a t e g o r y _ l i s t ' : l a t e s t _ c a t e g o r y _ l i s t } r e t u r n r e n d e r ( r e q u e s t , ' c a r d a p i o / i n d e x . h t m l ' , c o n t e x t ) d e f d e t a i l ( r e q u e s t , c a t e g o r y _ i d ) : c a t e g o r y = g e t _ o b j e c t _ o r _ 4 0 4 ( C a t e g o r y , p k = c a t e g o r y _ i d ) r e t u r n r e n d e r ( r e q u e s t , ' c a r d a p i o / d e t a i l . h t m l ' , { ' c a t e g o r y ' : c a t e g o r y } )
95. REMOVENDO URLS FIXAS NO CÓDIGO Essa linha no i n d e x . h t m l fere a filosofia de que template e views devem ser desacoplados: < l i > < a h r e f = " / c a r d a p i o / { { c a t e g o r y . i d } } / " > { { c a t e g o r y . n a m e } } < / a > < / l i > Podemos mudar para: < l i > < a h r e f = " { % u r l ' d e t a i l ' c a t e g o r y . i d % } " > { { c a t e g o r y . n a m e } } < / a > < / l i > Pois nomeamos a URL em u r l s . p y como 'detail': u r l ( r ' ^ ( ? P < c a t e g o r y _ i d > \ d + ) / $ ' , v i e w s . d e t a i l , n a m e = ' d e t a i l ' ) ,
96. EVITANDO CONFLITOS COM NAMESPACES Edite o g d g _ p i z z a \ u r l s . p y : ( . . . ) u r l ( r ' ^ ' , i n c l u d e ( ' c a r d a p i o . u r l s ' , n a m e s p a c e = ' c a r d a p i o ' ) ) , ( . . . ) E edite o i n d e x . h t m l : < l i > < a h r e f = " { % u r l ' c a r d a p i o : d e t a i l ' c a t e g o r y . i d % } " > { { c a t e g o r y . n a m e } } < / a > < / l i >
97. APRIMORANDO Layout Templates Javascript CSS Responsividade
98. ARQUIVOS ESTÁTICOS Em s e t t i n g s . p y já temos a configuração de arquivos estáticos: S T A T I C _ U R L = ' / s t a t i c / ' Então, vamos usá-lo! Crie uma pasta s t a t i c dentro do app g d g _ p i z z a .
99. BOOTSTRAP Podemos alterar o nosso layout para usar o . Bootstrap Ele é um framework de front-end bastante popular, capaz de criar páginas responsivas e pensadas para mobile. Acesse o e baixe o arquivo compactado. site
100. BOOTSTRAP Dentro do arquivo, você encontrará a versão compilada: bootstrap-x.y.z-dist css: Arquivos CSS e CSS minimizados fonts: Fontes utilizadas por padrão js: Arquivos Javascript
101. PÁGINA HTML COM BOOTSTRAP Precisamos de alguns detalhes: No head: < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " > < l i n k h r e f = " c s s / b o o t s t r a p . m i n . c s s " r e l = " s t y l e s h e e t " > No body: < s c r i p t s r c = " h t t p s : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 1 1 . 0 / j q u e r y . m i n . j s " > < s c r i p t s r c = " j s / b o o t s t r a p . m i n . j s " > Lembrem de fechar as tags s c r i p t .
102. BOOTSTRAP + DJANGO Vamos adaptar nosso template! Primeiro, copie as pastas do Bootstrap para s t a t i c . Agora, vamos criar b a s e . h t m l na nossa pasta de templates. Dêem uma , fornecido pelo Bootstrap. olhada neste template
103. Copie e cole o código do template no b a s e . h t m l e depois edite: ( . . . ) < t i t l e > { % b l o c k t i t l e % } J u m b o t r o n T e m p l a t e f o r B o o t s t r a p { % e n d b l o c k % } < / t i t l e > < l i n k h r e f = " { % s t a t i c " c s s / b o o t s t r a p . m i n . c s s " % } " r e l = " s t y l e s h e e t " > ( . . . ) < d i v c l a s s = " c o n t a i n e r " > { % b l o c k c o n t e n t % } ( . . . ) { % e n d b l o c k % } < h r > < f o o t e r > < p > & c o p y ; C o m p a n y 2 0 1 4 < / p > < / f o o t e r > ( . . . ) < s c r i p t s r c = " { % s t a t i c " j s / b o o t s t r a p . m i n . j s " % } " > < / s c r i p t > ( . . . )
104. HERANÇA DE TEMPLATES Vamos usar nosso novo template nos outros! i n d e x . h t m l { % e x t e n d s " c a r d a p i o / b a s e . h t m l " % } { % b l o c k c o n t e n t % } { % i f l a t e s t _ c a t e g o r y _ l i s t % } < u l > { % f o r c a t e g o r y i n l a t e s t _ c a t e g o r y _ l i s t % } < l i > < a h r e f = " { % u r l ' c a r d a p i o : d e t a i l ' c a t e g o r y . i d % } " > { { c a t e g o r y . n a m e } } < / a > { % e n d f o r % } < / u l > { % e l s e % } < p > N e n h u m a c a t e g o r i a d i s p o n í v e l . < / p > { % e n d i f % } { % e n d b l o c k % }
105. d e t a i l . h t m l { % e x t e n d s " c a r d a p i o / b a s e . h t m l " % } { % b l o c k c o n t e n t % } < h 1 > { { c a t e g o r y . n a m e } } < / h 1 > < u l > { % f o r p i n c a t e g o r y . p r o d u c t _ s e t . a l l % } < l i > { { p . n a m e } } < / l i > { % e n d f o r % } < / u l > { % e n d b l o c k % } Agora rode a aplicação e veja a diferença!
106. VAMOS MELHORAR! Edite o b a s e . h t m l : ( . . . ) < d i v c l a s s = " j u m b o t r o n " > < d i v c l a s s = " c o n t a i n e r " > < h 1 > { % b l o c k j u m b o % } { % e n d b l o c k % } < / h 1 > { % b l o c k b e l o w _ j u m b o % } { % e n d b l o c k % } < / d i v > < / d i v > ( . . . )
107. E o d e t a i l . h t m l { % e x t e n d s " c a r d a p i o / b a s e . h t m l " % } { % b l o c k j u m b o % } { { c a t e g o r y . n a m e } } { % e n d b l o c k % } { % b l o c k b e l o w _ j u m b o % } < a h r e f = " { % u r l ' c a r d a p i o : c a r d a p i o _ i n d e x ' % } " > V o l t a r < / a > { % e n d b l o c k % } { % b l o c k c o n t e n t % } < u l > { % f o r p i n c a t e g o r y . p r o d u c t _ s e t . a l l % } < l i > { { p . n a m e } } < / l i > { % e n d f o r % } < / u l > { % e n d b l o c k % }
108. Antes de rodar, altere também o v i e w s . p y : ( . . . ) d e f c a r d a p i o _ i n d e x ( r e q u e s t ) : l a t e s t _ c a t e g o r y _ l i s t = C a t e g o r y . o b j e c t s . o r d e r _ b y ( ' n a m e ' ) ( . . . ) E r u n s e r v e r !
109. E A RESPONSIVIDADE? Edite o i n d e x . h t m l : { % e x t e n d s " c a r d a p i o / b a s e . h t m l " % } { % b l o c k j u m b o % } G D G P i z z a ! { % e n d b l o c k % } { % b l o c k b e l o w _ j u m b o % } < p > E s c o l h a u m a c a t e g o r i a < / p > { % e n d b l o c k % } { % b l o c k c o n t e n t % } < d i v c l a s s = " r o w " > { % i f l a t e s t _ c a t e g o r y _ l i s t % } { % f o r c a t e g o r y i n l a t e s t _ c a t e g o r y _ l i s t % } < d i v c l a s s = " c o l - m d - 4 " > < h 2 > < a h r e f = " { % u r l ' c a r d a p i o : d e t a i l ' c a t e g o r y . i d % } " > { { c a t e g o r y . n a m e } } < / d i v > { % e n d f o r % } { % e l s e % } < d i v c l a s s = " c o l - m d - 4 " > < p > N e n h u m a c a t e g o r i a d i s p o n í v e l . < / p > < / d i v > { % e n d i f % } < / d i v > { % e n d b l o c k % } Teste!
110. Vamos seguir a mesma filosofia com o d e t a i l . h t m l : { % e x t e n d s " c a r d a p i o / b a s e . h t m l " % } { % b l o c k j u m b o % } { { c a t e g o r y . n a m e } } { % e n d b l o c k % } { % b l o c k b e l o w _ j u m b o % } < a h r e f = " { % u r l ' c a r d a p i o : c a r d a p i o _ i n d e x ' % } " > V o l t a r < / a > { % e n d b l o c k % } { % b l o c k c o n t e n t % } < d i v c l a s s = " r o w " > { % f o r p i n c a t e g o r y . p r o d u c t _ s e t . a l l % } < d i v c l a s s = " c o l - m d - 4 " > < h 2 > { { p . n a m e } } < / h 2 > < / d i v > { % e n d f o r % } < / d i v > { % e n d b l o c k % } Experimente colocar imagens depois :-)
111. ADICIONANDO UM FORM Vamos criar o template a d d . h t m l : { % e x t e n d s " c a r d a p i o / b a s e . h t m l " % } { % b l o c k j u m b o % } A d i c i o n a c a t e g o r i a { % e n d b l o c k % } { % b l o c k c o n t e n t % } { % i f e r r o r _ m e s s a g e % } < p > < s t r o n g > { { e r r o r _ m e s s a g e } } < / s t r o n g > < / p > { % e n d i f % } < f o r m r o l e = " f o r m " a c t i o n = " { % u r l ' c a r d a p i o : a d d _ c a t e g o r y ' % } " m e t h o d = " p o s t " > { % c s r f _ t o k e n % } < d i v c l a s s = " f o r m - g r o u p " > < l a b e l f o r = " c a t e g o r y " > N o m e < / l a b e l > < i n p u t t y p e = " t e x t " n a m e = " c a t e g o r y " i d = " c a t e g o r y " v a l u e = " " c l a s s = " f o r m - c o n t r o l " / > < / d i v > < i n p u t t y p e = " s u b m i t " v a l u e = " A d i c i o n a " c l a s s = " b t n b t n - d e f a u l t " / > < / f o r m > { % e n d b l o c k % }
112. E edite o u r l s . p y : ( . . . ) u r l p a t t e r n s = p a t t e r n s ( ' ' , u r l ( r ' ^ $ ' , v i e w s . c a r d a p i o _ i n d e x , n a m e = ' c a r d a p i o _ i n d e x ' ) , u r l ( r ' ^ ( ? P < c a t e g o r y _ i d > \ d + ) / $ ' , v i e w s . d e t a i l , n a m e = ' d e t a i l ' ) , u r l ( r ' ^ a d d / $ ' , v i e w s . a d d , n a m e = ' a d d ' ) , u r l ( r ' ^ a d d _ c a t e g o r y / $ ' , v i e w s . a d d _ c a t e g o r y , n a m e = ' a d d _ c a t e g o r y ' ) ) E o v i e w s . p y : ( . . . ) d e f a d d ( r e q u e s t ) : r e t u r n r e n d e r ( r e q u e s t , ' c a r d a p i o / a d d . h t m l ' ) d e f a d d _ c a t e g o r y ( r e q u e s t ) : c = C a t e g o r y ( ) t r y : c . n a m e = r e q u e s t . P O S T [ ' c a t e g o r y ' ] c . s a v e ( ) e x c e p t : r e t u r n r e n d e r ( r e q u e s t , ' c a r d a p i o / a d d . h t m l ' , { ' e r r o r _ m e s s a g e ' : ' A l g o e r r a d o : - ( ' r e t u r n H t t p R e s p o n s e R e d i r e c t ( r e v e r s e ( ' c a r d a p i o : c a r d a p i o _ i n d e x ' ) )
113. QUER MAIS? Sugestões para estudos: Views genéricas Django Forms Autenticação Personalização do Admin Template do Admin Apps de terceiros Testes automatizados South
114. PUBLICANDO Aplicações Django podem ser publicadas em: Seu próprio servidor Provedores Heroku Amazon AWS Google App Engine
115. PUBLICANDO NO HEROKU Faça sua conta gratuita!
116. CRIE UM APP! Enquanto cria um app no Heroku, vamos adaptar nosso projeto: Crie o arquivo P r o c f i l e na raiz do repositório: w e b : g u n i c o r n g d g _ p i z z a . w s g i Crie o arquivo r e q u i r e m e n t s . t x t : D j a n g o = = 1 . 6 d j - d a t a b a s e - u r l = = 0 . 2 . 2 d j - s t a t i c = = 0 . 0 . 5 g u n i c o r n = = 1 8 . 0 p s y c o p g 2 = = 2 . 5 . 1 s t a t i c = = 0 . 4 w s g i r e f = = 0 . 1 . 2
117. Edite as configurações de banco de dados no s e t t i n g s . p y : ( . . . ) i m p o r t d j _ d a t a b a s e _ u r l D A T A B A S E S = { } D A T A B A S E S [ ' d e f a u l t ' ] = d j _ d a t a b a s e _ u r l . c o n f i g ( ) ( . . . ) Edite w s g i . p y : i m p o r t o s o s . e n v i r o n . s e t d e f a u l t ( " D J A N G O _ S E T T I N G S _ M O D U L E " , " g d g _ p i z z a . s e t t i n g s " ) f r o m d j a n g o . c o r e . w s g i i m p o r t g e t _ w s g i _ a p p l i c a t i o n f r o m d j _ s t a t i c i m p o r t C l i n g a p p l i c a t i o n = C l i n g ( g e t _ w s g i _ a p p l i c a t i o n ( ) )
118. Adiciona sua chave SSH ao Heroku. c a t ~ / . s s h / i d _ r s a . p u b
119. O Heroku, por padrão, pede que sua aplicação esteja na pasta raiz do repositório. Mova tudo dentro da pasta do projeto para a raiz. E depois faça: g i t r e m o t e a d d h e r o k u E N D E R E C O _ D O _ S E U _ R E P O g i t p u s h h e r o k u m a s t e r
120. VIRTUALENV É uma forma de isolar o ambiente de desenvolvimento Python. Demonstração :-)
121. Variável de ambiente para o banco de dados! e x p o r t D A T A B A S E _ U R L = p o s t g r e s : / / a c t i o n @ 0 . 0 . 0 . 0 / g d g _ p i z z a
122. DÚVIDAS?
123. BRINDE!
124. ATÉ MAIS E OBRIGADO PELOS PEIXES!
125. This presentation was created with the HTML Presentation Framework . reveal.js