Iniciando com Django Rest Framework e AngularJS

djangorestframework_angularjs

Neste tutorial vamos criar um aplicativo simples com AngularJS que vai consumir um Web Service criado com Django Rest Framework.

Para economizar tempo, você pode fazer o download do projeto completo aqui: https://bitbucket.org/mateuspadua/djangorestframework-angularjs/src e assim acompanhar a explicação abaixo:

Para iniciar este tutorial vamos criar nosso ambiente virtual utilizando o virtualenvwrapper.
Instalar virtualenvwrapper no Ubuntu.
Instalar virtualenvwrapper no Windows.

 

Agora vamos criar nossa app:

Edite o arquivo comentarios/models.py. Assim temos uma classe para representar cada comentário no banco de dados.

No nosso arquivo settings.py adicione a app rest_framework e nossa app comentarios para INSTALLED_APPS

Para configurar nosso banco de dados adicione as linhas abaixo no arquivo settings.py. Obs: Para este tutorial vamos usar o sqlite3 apenas para fins de aprendizagem.

Vamos criar o banco e suas tabelas digitando na console o comando abaixo:

Crie um arquivo com o nome de urls.py(comentarios/urls.py) dentro da app comentarios, com o conteúdo abaixo:

Com isso precisamos atualizar nosso arquivo urls.py que está dentro da pasta core. Seu conteúdo ficará assim:

Dentro da app comentarios crie um arquivo chamado serializers.py com o conteúdo abaixo:

a classe CometarioSerializer é responsável por representar a formatação dos nossos dados, ou seja como ele será construído para ser enviado como resposta quando requisitado. Nesta caso aqui, cada item de uma lista JSON terá três propriedades, um id, um titulo e o comentario

Vamos editar agora o arquivo views.py dentro da app comentários

Esta parte é muito importante, vamos falar um pouco sobre os verbos HTTP:

Crédito para o site http://www.caelum.com.br/apostila-vraptor-hibernate/rest/#11-3-o-triangulo-do-rest de onde retirei a explicação dos verbos abaixo. Os quatro primeiros são os mais utilizados:

  • GET - recupera informações sobre o recurso identificado pela URI. Ex: listar produtos, visualizar o produto 45. Uma requisição GET não deve modificar nenhum recurso do seu sistema, ou seja, não deve ter nenhum efeito colateral, você apenas recupera informações do sistema.
  • POST - adiciona informações usando o recurso da URI passada. Ex: adicionar um produto. Pode adicionar informações a um recurso ou criar um novo recurso.
  • PUT - adiciona (ou modifica) um recurso na URI passada. Ex: atualizar um produto. A diferença fundamental entre um PUT e um POST é que no POST a URI significa o lugar que vai tratar a informação, e no PUT significa o lugar em que a informação será armazenada.
  • DELETE - remove o recurso representado pela URI passada. Ex: remover um produto.
  • HEAD, OPTIONS e TRACE - recuperam metadados da URI passada. Respectivamente o Header, quais métodos são possíveis e informações de debug.

Em cada requisição HTTP um desses verbos é enviado. Você pode conferir isso utilizando o Firebug do Firefox ou Ferramentas do desenvolvedor do Chrome, como mostrado aqui:method restfull

Toda URL em um serviço RESTFULL deve conter apenas substantivos e nunca verbos, isso porque o verbo será representando pelo verbo HTTP enviado, por exemplo:

A URL meusite/clientes/adicionar não é legal, pois além de representar o recurso (/clientes) ela também representa a ação com o verbo /adicionar.

Portanto para ser uma URL válida, esta deveria conter apenas meusite/clientes. E ao chamar esta URL passaríamos o verbo POST e isso indicaria que estamos adicionando alguma informação ao nosso sistema.

Agora repare que a classe ComentarioList implementa dois métodos:

Isso é exatamente o que parece, :). O método get serve para listar os comentários e o post para adicionar comentários. Obs: se você tentar fazer uma requisição AJAX para a View ComentariosList com a url 127.0.0.1:8000/comentarios com o verbo DELETE por exemplo, isto não será permitido pois o método DELETE não foi implementado nesta View.

Encontrei também um slide muito interessante sobre o assunto neste link, http://pt.slideshare.net/santosluis87/rest-the-right-way

Agora podemos testar nossa API rodando:

 

E digite no seu browser: http://127.0.0.1:8000/comentarios/

Finalmente vamos utilizar o AngularJS, para isso, crie uma uma pasta chamada templates no root do projeto e crie um arquivo chamado comentarios.html dentro dela e cole o conteúdo abaixo:

Crie também um arquivo com o nome de core.js dentro de core/static/js. Obs: repare que as pastas static e js não existem, portanto as crie antes. Cole então o conteúdo abaixo no arquivo core.js:

Aqui iniciamos nossa APP com AngularJS, repare nas funções:

  1. getComentarios que utiliza o método GET para recuparar os comentários
  2. removerComentario que utiliza o método DELETE para apagar um comentário
  3. updateComentarios que utiliza o método POST para adicionar um comentário

Para ter algum estilo no nosso tutorial crie um arquivo com  o nome de common.css dentro de core/static/css. Obs: repare que a pasta css não existe, portanto crie-a antes. Cole então o conteúdo abaixo no arquivo common.css:

No arquivo settings.py cole o conteúdo abaixo no início deste arquivo:

Inicie o server novamente caso não esteja iniciado:

E então digite em seu browser 127.0.0.1:8000

Com isso é só testar nossa aplicação e bons estudos.

Você pode fazer o download do projeto completo aqui: https://bitbucket.org/mateuspadua/djangorestframework-angularjs/src

Mais sobre AngularJS:
http://javascriptbrasil.com/2013/10/23/aprenda-angularjs-com-estes-5-exemplos-praticos/
http://tableless.com.br/criando-uma-aplicacao-simples-com-angularjs/
http://pt.wikipedia.org/wiki/AngularJS
http://pt.slideshare.net/WilsonMendes/angularjs-um-framework-para-facilitar-sua-vida

Tutorial oficial do Django Rest Framewrok:
http://www.django-rest-framework.org/#tutorial

Alguns links interessantes sobre REST:
http://blog.tucaz.net/2009/11/22/verbos-http-get-e-post-voce-sabe-mesmo-a-diferenca/
http://pt.wikipedia.org/wiki/REST
http://www.infoq.com/br/news/2009/08/CRUDREST

  • Leonardo Nascimento Cintra

    boa!