Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Aprende a realizar una aplicación con Django y el Mundial de Brasil 2014

Jesús Lucas
  • Escrito por Jesús Lucas el 11 de Junio de 2014
  • 2 min de lectura | Backend
Aprende a realizar una aplicación con Django y el Mundial de Brasil 2014

Te estarás preguntando "¿Qué es eso de programar Django con el mundial de Brasil? ", bien, en este artículo os voy a mostrar cómo realizar una aplicación en Django 1.7 básica . La aplicación va a ser muy sencilla para iniciarnos en el desarrollo de aplicaciones web con Django. La aplicación consistirá en usar el Administrador de Django para guardar los partidos del mundial 2014 y posteriormente mostrarlos en la página de inicio ordenados por fecha . Obtendremos algo así: django-mundia-brasil

Para la realización y el seguimiento de este tutorial debes haber leído el artículo:  " Cómo comenzar tu primer proyecto Django 1.7 en Linux " , donde expliqué como instalar Django 1.7 en un entorno virtual.

1. Creación del Virtualevn y el Proyecto

El primer paso será crearnos un entorno virtual con virtualenv para nuestro proyecto. Para crear un nuevo entorno virtual ejecutamos el siguiente comando:

$ virtualenv mundial-brasil-env
Ahora debemos activar nuestro entorno virtual, instalar Django y crear nuestro proyecto: "mundial_brasil":

$ cd mundial-brasil-env
$ source bin/activate
(mundial-brasil-env)$
(mundial-brasil-env)$ pip install https://www.djangoproject.com/download/1.7.b4/tarball/
(mundial-brasil-env)$ django-admin startproject mundial_brasil
(mundial-brasil-env)$ cd mundial_brasil
(mundial-brasil-env)$ ls
manage.py  mundial_brasil

2. Aplicaciones Django de nuestro proyecto

El primer paso al realizar una aplicación Django suele ser pensar en las Urls, los Modelos y como separar nuestro proyecto Django en Aplicaciones . En nuestro caso solo vamos a tener una Url: http://127.0.0.1:8000/ , que mostrará la lista de partidos ordenados por fecha del más reciente al más lejano en el tiempo. Vamos a tener 2 aplicaciones: equipos y partidos . La aplicación " equipos " se encargará de manejar los equipos y los grupos del mundial. La aplicación " partidos "  se encargará de la lógica relacionada con los partidos de fútbol de mundial.   Para crear las aplicaciones usaremos el comando django-admin desde el directorio de nuestro proyecto.

(mundial-brasil-env)$ django-admin startapp equipos

(mundial-brasil-env)$ django-admin startapp partidos
(mundial-brasil-env)$ ls
equipos  manage.py  mundial_brasil  partidos


Una vez creadas las aplicaciones debemos añadirlas a las INSTALLED_APPS en nuestro archivo settings.py dentro de la carpeta mundial_brasil .

settings.py

# Application definition
INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'equipos',
    'partidos',
)


Cada aplicación va a tener sus propios modelos y vistas.  A continuación vamos a crear los modelos que va a tener cada una de nuestras dos aplicaciones.

3. Modelos

La aplicación " equipos " contiene 2 modelos: Grupo y Equipo GRUPO Se corresponde con el Grupo al que pertenece un equipo de fútbol en el mundial. Atributos:
  • letra: Es un texto de una longitud de 1 carácter que representa la letra identificativa del grupo. Es único, no puede haber dos grupos con la misma letra y Obligatorio.
EQUIPO Este modelo es el más importante de nuestra aplicación, ya que se refiere al equipo de fútbol. Atributos:
  • nombre: El nombre del equipo. Es un texto de poca longitud. Obligatorio
  • grupo: Es la clave ajena ( Foreign Key ) que indica a que grupo pertenece el equipo. Es obligatorio.
  • codigo_pais_bandera:  Es un texto de muy poca longitud en el que guardamos el código del país para usarlo posteriormente a la hora de mostrar la bandera del pais. Ejemplo: España -> "es", Chile -> "cl"
from django.db import models


class Grupo(models.Model):
	letra = models.CharField(max_length=1, unique=True)

	def __str__(self):
		return "Grupo " + self.letra

	def __unicode__(self):
		return "Grupo " + self.letra


class Equipo(models.Model):
	nombre = models.CharField(max_length=100)
	grupo = models.ForeignKey(Grupo, related_name='equipos')
	codigo_pais_bandera = models.CharField(max_length=4, default='')

	def __str__(self):
		return self.nombre

	def __unicode__(self):
		return self.nombre

Vamos ahora con los modelos de la aplicación " partidos " . En nuestra aplicación al ser muy básica de iniciación solo vamos a tener el modelo: Partido PARTIDO Este modelo será el encargado de representar los partidos del mundial. Atributos:

  • local: Es la clave ajena ( Foreign Key) del Equipo que juega como local. Obligatorio.
  • visitante: Es la clave ajena ( Foreign Key) del Equipo que juega como visitante. Obligatorio.
  • fecha: Es un campo de tipo Fecha y Hora que indica cuando se jugará el partido. Obligatorio.


from django.db import models
from equipos.models import Equipo


class Partido(models.Model):
	local = models.ForeignKey(Equipo, related_name='partidos_de_local')
	visitante = models.ForeignKey(Equipo, related_name='partidos_de_visitante')
	fecha = models.DateTimeField()

	def __str__(self):
		return unicode(self.local) + ' vs ' + unicode(self.visitante) +  ' ' + str(self.fecha)

	def __unicode__(self):
		return unicode(self.local) + ' vs ' + unicode(self.visitante) +  ' ' + str(self.fecha)


Ahora debemos aplicar los cambios a nuestra base de datos ( Crear las tablas ) . Usamos el comando makemigrations para crear los archivos de migración:

$ python manage.py makemigrations


Ahora aplicamos los cambios con:

$ python manage.py migrate


4. Activación de los modelos en la Administración de Django

Una vez tenemos los modelos creados en nuestra base de datos, vamos a activarlos en el administrador de Django ( 127.0.0.1:8000/admin ) para poder tener una interfaz donde añadir, borrar y editar registros de nuestros modelos . Activación de los modelos de la aplicación " equipos ": Dentro de la carpeta de nuestra aplicación " equipos " tenemos un archivos llamado admin.py , si no lo tenemos lo creamos y lo dejamos así:

from django.contrib import admin
from .models import Equipo, Grupo

admin.site.register(Equipo)
admin.site.register(Grupo)


Lo que hacemos es importar los modelos y registrarlos en el admin de Django. El archivo admin.py de la aplicación " partidos " deberá ser:

from django.contrib import admin
from .models import Partido


admin.site.register(Partido)


Ahora podremos entrar a http://127.0.0.1:8000/admin (recuerda tener corriendo el servidor Http de desarrollo de Django con python manage.py runserver ) y crear los grupos, algunos equipos y partidos :).

Grupos y Equipos:

django-1.7-admin


Partidos :

django-1.7-admin-2


5. Urls.

Nuestra aplicación solo va tener una ruta , además de las del admin de Django.
  • 127.0.0.1:8000/   : En esta Url veremos la lista de partidos ordenados por fecha . El nombre de esta url será " ver_partidos " y estará enlazada con la vista " ver_partidos " que crearemos a continuación en nuestra aplicación partidos.
Editamos el archivo urls.py de nuestra aplicación, dentro de la carpeta de settings de nuestro proyecto " mundial_brasil ". Y añadimos la ruta que te he explicado anteriormente.


from django.conf.urls import patterns, include, url
from django.contrib import admin

urlpatterns = patterns('',
    # Va a la vista que muestra los partidos ordenados por fecha.
    url(r'^$', 'partidos.views.ver_partidos', name='ver_partidos'),
    # Rutas del administrador de Django
    url(r'^admin/', include(admin.site.urls)),
)


En el siguiente punto vamos a crear la vista " ver_partidos ", dentro de nuestra aplicación " partidos ".


6. Views.

Una vez ya tenemos definida nuestra ruta, tenemos que crear la vista que hemos indicado ' partidos.views.ver_partidos '. Es decir, dentro de la aplicación " partidos ", en el módulo ( fichero .py ) views.py debe existir la definición de la vista o funcion " ver_partidos ". Esta vista solo recibirá la petición, sacará de la base de datos todos los partidos ordenados por fecha y renderizará un template HTML que mostraremos al usuario con los partidos. Aquí tienes el archivo " views.py de la aplicación " partidos ".


from django.shortcuts import render
from partidos.models import Partido


def ver_partidos(request):
	partidos = Partido.objects.all().order_by('fecha')
	return render(request,'partidos/ver_partidos.html',{ 'partidos':partidos })


Como puedes observar, lo que hacemos es consultar todos los partidos ordenados por fecha y luego renderizar el template ' partidos/ver_partidos.html ' y pasándole como contexto los ''partidos' que hemos recuperado. Pasamos ahora a crear nuestra plantilla o template.


7. Template

En el anterior punto vimos que renderizabamos un template: ' partidos/ver_partidos.html ' . Django por defecto buscará este template usando los dos loaders de búsqueda de templates que trae activados por defecto. django.template.loaders.filesystem.Loader : Buscará el template en los directorios especificados en TEMPLATE_DIRS. django.template.loaders.app_directories.Loader :  Buscará el template en un subdirectorio "templates" dentro de la carpeta de cada aplicación. Este será el que se aplique en nuestro caso. Crearemos el directorio " templates " dentro de la aplicación " partidos ",  dentro del directorio " templates " creamos uno más llamado " partidos " , y finalmente el archivo " ver_partidos.html " dentro del último directorio creado.   A continuación te indico el HTML básico para mostrar los partidos: " ver_partidos.html " - Modo básico:



Partidos del Mundial de Brasil 2014
  
{% for partido in partidos %}


<h3><img src="http://flagpedia.net/data/flags/normal/{{ partido.local.codigo_pais_bandera }}.png" alt="" width="25px;"> {{ partido.local }} - {{ partido.visitante }} <img src="http://flagpedia.net/data/flags/normal/{{ partido.visitante.codigo_pais_bandera }}.png" alt="" width="25px;"></h3>
{{ partido.fecha }} {% endfor %}
  
Si ahora visitamos la ruta 127.0.0.1:8000 podremos ver algo así:


ver_partidos_html-basico

Como puedes observar para mostrar la bandera de cada país nos servimos de una web externa, no es lo más recomendable, pero por efectos prácticos y de simplicidad lo he realizado así. Mediante el código del país ("es", "us", etc.) podemos mostrar la bandera del país alojada en http://flagpedia.net. Además si añadimos un poco de Twitter Bootstrap y algunos retoques podemos obtener algo así: "ver_partidos.html" - Con Twitter Bootstrap:


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="OpenWebinars.net">

    <title>Partidos del Mundial de Brasil 2014</title>

    <!-- Bootstrap core CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
    <div class="container">
        <h1>
          <img src="http://3.bp.blogspot.com/-E_FuHCg3o1k/UqQwq9sqtAI/AAAAAAAADFk/HAOEraQPVJA/s1600/brasil_2014.png" width="200px">
          Partidos del Mundial de Brasil 2014
        </h1>
        {% for partido in partidos %}
          {% cycle '<div class="row">' '' '' %}
          <div class="col-md-4">
            <h3><img width="65px" src="http://flagpedia.net/data/flags/normal/{{ partido.local.codigo_pais_bandera }}.png"> {{ partido.local }} - {{ partido.visitante }} <img width="65px" src="http://flagpedia.net/data/flags/normal/{{ partido.visitante.codigo_pais_bandera }}.png"></h3>
            <p><span class="label label-primary">{{ partido.fecha }}</span></p>
          </div>
          {% cycle '' '' '</div>' %}
        {% endfor %}

      <hr>

      <footer>
        <p>© OpenWebinars.net 2014</p>
      </footer>
    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  
</body>
</html>
  


Se verá algo así:

ver_partidos_html-retoques

Listo!! Ya tenemos nuestra aplicación básica de Django finalizada :D. Ahora te indicaré algunos comentarios finales. Puedes ver el código del proyecto en Github y hacer fork para añadirle tus propias funcionalidades: Proximamente...



8. Comentarios finales.

Como has podido ver el desarrollo en Django es muy ágil, pero en este artículo hemos dejado muchas cosas importantes sin explicar: Formularios, Ajax, Class Base Views, Edición del Administrador, otros paquetes, autenticación y registro de usuarios, URLs complejas, servir archivos estáticos ( javascript, css, imágenes ) con Django y mucho más. Si quieres aprender todo esto de la mano de un contribuidor oficial en el desarrollo de Django no olvides apuntarte a nuestro curso Online de Django. Haz click aquí para registrarte o deja escapar esta oportunidad.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars