Workshop Django Framework - 30/10/2018
- 2. ALISSON JHONATTAN JACKSON EDUARDO JEAN RAFAEL LUCIANA LEONARDO THEODÓSIO CAIO 22 Nós somos a EPiC! Escola Piloto de Computação Universidade Federal de São Carlos
- 3. Pré-requisitos e ferramentas ▰ 1. Conhecimento básico na linguagem Python ▰ 2. Conhecimento básico em HTML ▰ 3. Conhecimento básico em padrões de projeto MVC ▰ 4. Python 3.6+ ▰ 5. IDE PyCharm ou algum editor de texto (sublime, atom...) ▰ 6. Terminal ou CMD 33
- 4. Overview ▰ 1. O que é MVC? ▰ 2. O que é Desenvolvimento Web ? ▰ 3. Ambientes Virtuais ▰ 4. Estrutura de projetos Django ▰ 5. Executando 44 ▰ 6. Rotas e URLs ▰ 7. Views ▰ 8. Templates ▰ 9. Models ▰ 10. Template Tags
- 5. Bônus ▰ 1. Herança de HTMLs ▰ 2. URLs dinâmicas ▰ 3. Arquivos estáticos (img, css, js) 55
- 6. O que é MVC? MVC e outros padrões de projeto 6 1
- 7. Padrões de projeto ▰ Organização de projetos maiores, com muitos arquivos ▰ Organizar de acordo com o papel daquele arquivo ▰ MVC, MVP, MVVM, MVW... ▰ Qual é o “melhor”? ▰ Django implementa (e cobra) corretamente o MVC 77
- 8. Padrão MVC 88 Model ❏ Modelos de dados ❏ Banco de dados View ❏ Parte visual ❏ Interfaces para o usuário Controller ❏ Parte lógica ❏ Processamento ❏ Comunicação com BD
- 9. O que é desenvolvimento Web? Back-end, Front-end, Frameworks, e outros termos esquisitos 9 2
- 10. Desenvolvimento Web 1010 Front-end ❏ Parte da “frente” ❏ Parte visual ❏ UI/UX Back-end ❏ Parte de “trás” ❏ Parte lógica ❏ UI/UX
- 11. Ambientes virtuais Por que não no python? 11 3
- 12. Ambientes virtuais ▰ Temporário ▰ Interessante apenas ao projeto ▰ Compartilhável 1212
- 13. 1313 $ mkdir projeto_django $ cd projeto_django $ python –m venv myvenv (Windows | Linux?) $ pip install virtualenv (Linux) $ virtualenv -p python3 myvenv $ myvenvScriptsactivate (Windows) $ source myvenvbinactivate (Linux) (myvenv) $ pip install django (myvenv) $ pip freeze (myvenv) $ dir Por fim: (myvenv) $ pip freeze > requirements.txt Preparando o local Cria a pasta do projeto Entra na pasta do projeto Cria um ambiente virtual (windows) Cria um ambiente virtual (linux) Ativa o ambiente virtual Instala o django Verifica o que foi instalado Lista tudo da pasta atual Imprime tudo que foi instalado e já salva em um arquivo
- 14. Estruturas de projetos Django “Bem começado, metade feito” - Aristóteles 14 4
- 15. 1515 $ django-admin startproject projeto $ dir $ cd projeto Preparando o projeto Cria um projeto Django Lista tudo da pasta atual Entra na pasta do projeto
- 17. 1717 $ django-admin startproject projeto $ dir $ cd projeto Executando o projeto $ python manage.py migrate $ python manage.py runserver <porta> ANTES: AGORA: “Cria” o banco Executa no servidor
- 18. 1818 Criando uma aplicação $ python manage.py startapp sistema ▰ Aplicações são módulos do projeto ▰ Dividir o contexto de cada parte do projeto Adicionar a aplicação em INSTALLED_APPS no arquivo “projeto/projeto/settings.py” Cria uma nova aplicação
- 19. Rotas e URLs Criação de novas páginas 19 6
- 20. Rotas e URLs ▰ URL = “Rota do navegador” ▰ Rota = “URL do projeto” 2020 ▰ Definir novas páginas ▰ Definir links entre páginas ▰ Organizar o projeto de acordo com suas funcionalidades ▰ Separar as URLs dentro do contexto correto
- 21. 2121 Criando uma nova Rota Criar arquivo “projeto/sistema/urls.py” dentro da nova aplicação Direcionar as rotas para o arquivo urls.py correto
- 22. 2222 Criando uma nova Rota Definir a nova rota no arquivo “projeto/sistema/urls.py” Definir a nova view no arquivo “projeto/sistema/views.py” Criar o novo template na pasta templates Etapas da criação de uma nova tela:
- 23. 2323 Criando uma nova Rota Django e a confusão com MVC: MVC Função Arquivo correspondente Model Representação dos dados models.py View Parte visual nome_da_tela.html Controller Parte lógica views.py ▰ “models.py” possui as classes (tabelas) do banco ▰ “views.py” possui as funções e lógica da aplicação ▰ A pasta “templates” possui arquivos html, um para cada página, cada arquivo html desempenha o papel de view
- 25. 2525 Criando uma nova view Criar o novo template na pasta templates Etapas da criação de uma nova tela: Definir a nova rota no arquivo “projeto/sistema/urls.py” Definir a nova view no arquivo “projeto/sistema/views.py”
- 26. Templates Hora de ver os resultados 26 8
- 27. 2727 Criando um novo template Criar o novo template na pasta templates Etapas da criação de uma nova tela: Criar a pasta “projeto/sistema/templates” Baixar o arquivo do template >> https://goo.gl/MxXbNb Colocar dentro da pasta templates $ python manage.py runserver Definir a nova rota no arquivo “projeto/sistema/urls.py” Definir a nova view no arquivo “projeto/sistema/views.py”
- 28. 2828 Criando um novo template Head:
- 29. 2929 Criando um novo template Body:
- 30. 3030 Criando um novo template
- 31. Models Integrando o banco de dados 31 9
- 32. Models ▰ Modelos representam nossos dados ▰ No Django uma classe equivale a uma tabela ▰ Não se usa SQL diretamente ▰ Usaremos SQLite como o banco de dados ▰ Trabalharemos com migrações 3232
- 33. Models 3333 Criar o novo modelo em “projeto/sistema/models.py” Adicionar o novo modelo em “projeto/sistema/admin.py”
- 34. Models ▰ Acabamos de alterar o estado do banco de dados ▰ Precisamos dizer pro Django que uma nova versão do banco está disponível 3434 $ python manage.py makemigrations sistema $ python manage.py migrate Cria uma nova migração Implanta essa migração
- 35. Django Admin 3535 $ python manage.py createsuperuser - Nome: nome qualquer - Email: email qualquer - Senha: senha qualquer
- 36. Django Admin 3636 $ python manage.py runserver No fim da URL digite “/admin” Faça o login com os seus dados
- 37. Django Admin 3737 Cadastre manualmente 3 alunos
- 38. Template Tags Representando suas variáveis no template 38 10
- 39. Template Tags ▰ Comunicação Python <-> HTML ▰ Existem diversas funcionalidades para template tags ▰ Lógica no HTML (if-else, for, while...) ▰ Acessar parâmetros passados ▰ Acessar arquivos estáticos (img, css, js) ▰ Acessar URLs 3939
- 40. 4040 Trabalhando com template tags Primeiro vamos alterar a nossa view e fazer ela acessar o banco de alunos A variável alunos agora possui todos os alunos da tabela Alunos A função render agora devolve os alunos como um parâmetro OBS: o terceiro parâmetro é um dicionário, funciona como um vetor de pares ‘chave’:valor
- 41. 4141 Trabalhando com template tags Agora vamos criar uma tabela no nosso template para representar os alunos OBS: insira o código dentro da div da main, logo após o </p> Atualize a página para testar
- 42. 4242 Trabalhando com template tags Agora queremos acessar estes alunos diretamente no HTML e, para cada aluno criar uma linha dinamicamente com seus dados
- 43. 4343 Trabalhando com template tags Por fim, queremos criar linhas nessa tabela acessando diretamente os campos de cada aluno
- 44. 4444 Trabalhando com template tags Atualizando a página:
- 45. Herança de HTMLs Projete uma vez, e reutilize 45 1 Bônus
- 46. 4646 Herdando HTMLs ▰ Django utiliza blocos de HTML ▰ Blocos podem ser substituídos por outros blocos de mesmo nome ▰ Basta dizermos que em determinada página o “bloco X” corresponde a um novo conteúdo ▰ Assim reutilizamos aquilo que for interessante, apenas mudando trechos
- 47. 4747 Herdando HTMLs Primeiro vamos transformar nossa main em um bloco usando template tags Em seguida vamos criar uma nova página, repetindo todo aquele procedimento ▰ Criar rota ▰ Criar view ▰ Criar template
- 48. 4848 Herdando HTMLs urls.py views.py Agora vamos imaginar nosso novo template HTML. Precisamos digitar todo o código do zero?
- 49. 4949 Herdando HTMLs Não! Precisamos apenas indicar que estamos herdando (estendendo) um html existente. Apenas substituindo um bloco existente por um novo com o mesmo nome adicionar.html Baixar o arquivo da tela de adicionar >> https://goo.gl/MxXbNb
- 50. 5050 Herdando HTMLs Ao recarregar a página:
- 51. 5151 Herdando HTMLs Um último detalhe, alterando o arquivo home.html Vamos adicionar um link para a nova página usando as template tags Assim não precisaremos ficar digitando urls toda hora
- 52. URLs Dinâmicas One template to rule them all 52 2 Bônus
- 53. 5353 URLs Dinâmicas ▰ Imagine que você adicionou 100 alunos ▰ Como fazer uma página para editar/apagar alunos? ▰ Uma página para cada? ▰ E se o usuário criar mais alunos?
- 54. 5454 URLs Dinâmicas Queremos poder utilizar algo do tipo: http://localhost:8000/aluno/1/delete http://localhost:8000/aluno/2/delete http://localhost:8000/aluno/3/delete http://localhost:8000/aluno/4/delete . . . http://localhost:8000/aluno/(ID)/delete Da mesma maneira, queremos um template inteligente o bastante para saber lidar com diversas requisições
- 55. 5555 URLs Dinâmicas Começaremos pela URL inteligente Aqui queremos dizer que “id” será dinâmico, e será do tipo inteiro r
- 56. 5656 URLs Dinâmicas Agora precisamos acessar esse parâmetro e apagar o aluno do banco Neste caso não precisaremos de um template, já que estamos redirecionando automaticamente Agora precisamos apenas achar um jeito de criar um jeito de ligar cada aluno com um caminho para removê-lo
- 57. 5757 URLs Dinâmicas Podemos usar a própria lógica da tabela dinâmica. Que já passava aluno por aluno E apenas criar links <a> para acessar a URL de remoção Adicionar um novo <th>
- 58. 5858 URLs Dinâmicas Recarregando a página:
- 59. 5959 Exercício Implemente um mecanismo para indicar que um aluno trancou
- 60. 6060 Exercício Implemente um mecanismo para editar um aluno existente
- 61. 6161 Exercício Implemente um mecanismo para editar um aluno existente
- 63. 6363 Respostas urls.py home.html Baixar o arquivo do da tela de editar >> https://goo.gl/MxXbNb
- 64. Arquivos estáticos Trabalhando com CSS, JS, imagens localmente 64 3 Bônus
- 65. 6565 Trabalhando com arquivos estáticos Primeiro vamos criar as devidas pastas e arquivos Dentro da pasta da nossa aplicação, criaremos a pasta “projeto/sistema/static”. Dentro da pasta static criaremos pastas para separar melhor nossos arquivos Dentro da pasta css criaremos o arquivo “style.css”, para conseguirmos enxergar mudanças
- 66. 6666 Trabalhando com arquivos estáticos Agora vamos importar nosso novo arquivo no template Primeiro vamos dizer ao Django que queremos usar arquivos estáticos dentro deste HTML Depois vamos importar nosso próprio CSS. Lembre-se de importar após importar o Bootstrap Por fim, no arquivo settings.py, criar os seguintes campos
- 67. 6767 Trabalhando com arquivos estáticos Ao recarregar a página:
- 68. 6868 Escola Piloto de Computação OBRIGADO! epic- ufscar.org epic.ufscar@gmail.com fb.com/epicufscar
- 69. Referências 6969 ▰ Documentação Django: https://docs.djangoproject.com/pt-br/2.1/ ▰ Projeto no Github: https://github.com/epicufscar/workshop-django ▰ Documentação Bootstrap: https://getbootstrap.com/ Outras Referências & Cursos online: ▰ Tutorial Djangogirls https://tutorial.djangogirls.org/pt/django/ ▰ Curso Alura Django https://cursos.alura.com.br/course/introducao-ao-django ▰ Curso Udemy Django http://bit.do/django-udemy ▰