Skip to content

Latest commit

 

History

History

Postwork

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Readme.md
Readme.md
 
 

Readme.md

Fullstack con Python > Backend con Python > Sesión 08 > Postwork

Aplicar los conceptos de la clase a un Proyecto

OBJETIVOS

  • Crear un entorno virtual para el tú proyecto
  • Instalar Django
  • Aplicar los conceptos de rutas, vistas y plantillas creando una aplicación web para tú proyecto
  • Poder mostrar cuando menos la página de inicio de tú proyecto usando Django.

REQUISITOS

  1. Constar con la carpeta del repo actualizada.
  2. Usar la carpeta de trabajo Clase-08/Postwork/Proyecto/.
  3. Activar el entorno virtual para tú proyecto.
  4. Página de inicio maquetada del tú proyecto en la carpeta Clase-08/Postwork/public_html/.

DESARROLLO

  1. Crear un entorno virtual para tú proyecto usando el comando:

    Clase-08/Postwork $ conda create --name ??? python=3.7

    Dejar activo el entorno ??? para continuar:

    Clase-08/Postwork $ conda activate ???
[...]

(???) Clase-08/Postwork $

  2. Crear el tú proyecto con Django y nos cambiamos a la carpeta del proyecto:

    (???) Postwork $ django-admin startproject ???

(???) Postwork $ tree ???
???
├── ???
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

(???) Postwork $ cd ???

(???) Postwork/??? $

  3. Crear la aplicación mi_app con el comando:

    (???) Postwork/??? $ python manage.py ???

(???) Postwork/??? $ tree
.
├── ???
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── mi_app
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── manage.py

  4. Ejecutar el proyecto ??? con:

    (???) Postwork/??? $ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

June 19, 2019 - 10:38:22
Django version 2.2.2, using settings '???.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

    Nota: Como el servidor bloquea la terminal, vamos a dejar esta terminal aquí y para los siguiente comandos abrir otra terminal, activar el entorno virtual ??? y cambiarse a la carpeta de trabajo Clase-08/Postwork/???/.

  5. Agrega la aplicación mi_app a la configuración en el archivo ???/???/settings.py:

    # Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mi_app',
]

  6. Mapear la url / con las rutas generales del proyecto ??? hacia las rutas de la aplicación mi_app

    url / -> ???/???/urls.py -> ???/mi_app/urls.py

    En el archivo ???/???/urls.py agregar lo siguiente:

    from django.contrib import admin
from django.urls import path, include  # modificada

urlpatterns = [
    ???
    path('admin/', admin.site.urls),
]

    En la vetana donde se está ejecutando el proyecto ??? se puede observar el siguiente mensaje de error:

    (???) Postwork/??? $ python manage.py runserver
[...]
File "<frozen importlib._bootstrap>", line 965, in _find_and_load_unlocked
ModuleNotFoundError: No module named 'mi_app.urls'

    Lo que indica que nos falta crear el archivo urls.py dentro de la carpeta ???/mi_app/

  7. Mapear la url / con las rutas de la aplicación mi_app

    url / -> ???/mi_app/urls.py -> ???/mi_app/views.py

    Crear el archivo ???/mi_app/urls.py con el siguiente contenido:

    from django.urls import path
from . import views

urlpatterns = [
    ???,
]

    Reiniciar Django para observar el resultado:

    [...]
File "/home/rctorr/repos/Curso-Python-Expert/Clase-08/Postwork/???/mi_app/urls.py", line 5, in <module>
  path('', views.index, name='index'),
AttributeError: module 'mi_app.views' has no attribute 'index'

    Lo que indica que en el archivo mi_app/views.py no existe una función llamada index, así que toca agregar dicha función.

  8. Agregar la función/vista index al archivo ???/mi_app/views.py con el siguiente contenido:

    from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def index(request):
    """ Vista para atender la petición de la url / """
    ???

    Nota: Si la aplicación Django no está iniciada, iniciarla en este momento y abrir la siguiente url en el navegador

    http://127.0.0.1:8000

    El resultado que deberías de observar es una página con un mensaje

  9. Haciendo uso de las plantillas de Django integrar la página de inicio maquetada que se encuentra en public_html/index.html.

    Crear las carpetas ???/mi_app/templates/mi_app:

    (???) Postwork/??? $ mkdir mi_app/templates
(???) Postwork/??? $ mkdir mi_app/templates/mi_app

    Copiar el archivo public_html/index.html dentro de la carpeta ???/mi_app/templates/mi_app/:

    (???) Postwork/??? $ cp ../public_html/index.html mi_app/templates/mi_app/

(???) Postwork/??? $ tree mi_app/templates/
mi_app/templates/
└── mi_app
    └── index.html

    Modificar la función index() en el archivo mi_app/views.py para hacer uso de las plantillas (templates)

    from django.shortcuts import render

# Create your views here.
def index(request):
    """ Vista para atender la petición de la url / """
    return render(request, "mi_app/index.html")

    Por omisión, Django busca los archivos html en la carpeta proyecto/aplicacion/templates/aplicacion/

    El resultado en el navegador ya debería de mostrarse tú página de inicio, pero sin estilos e imágenes

  10. Agregando acceso a los archivos estáticos (ruta y vista)

    Crear la carpeta ???/mi_app/static/mi_app/:

    (???) Postwork/??? $ mkdir mi_app/static
(???) Postwork/??? $ mkdir mi_app/static/mi_app

    Copiar las carpetas de los archivos estáticos (css, fonts, images, js, etc.):

    (???) Postwork/??? $ cp -a ../public_html/css mi_app/static/mi_app/

(???) Postwork/??? $ cp -a ../public_html/fonts mi_app/static/mi_app/

(???) Postwork/??? $ cp -a ../public_html/images mi_app/static/mi_app/

(???) Postwork/??? $ cp -a ../public_html/js mi_app/static/mi_app/

Clase-08/Postwork/??? $ tree -d 1 mi_app/static/mi_app/
mi_app/static/mi_app/
├── css
├── fonts
│   ├── bootstrap
│   ├── icomoon
│   └── themify-icons
├── images
└── js

    Finalmente hay que modificar la ruta en el archivo index.html para que usen el sistema de Django

    Todas las url relativas o absolutas ahora tienen que ser absolutas e iniciar con /static/mi_app/, unos ejemplos se muestra a continuación:

    <!-- Animate.css -->
<link rel="stylesheet" href="/static/mi_app/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="/static/mi_app/css/icomoon.css">

    Remplazar todas las coincidencias.

    Actualizar el navegador y entonces se debería de ver la página mostrada al inicio

    Si no funciona:

    • Recargar la página forzado actualizar el cache del navegador con Control+Shift+R.
    • En la ventana donde se está ejecutando el proyecto, deternlo y volver a iniciarlo.
    • Usar una ventana de incógnito.
    • Pedir ayuda a un experto (que no vas a encontrar en clase!)

    Si si funciona entonces:

    • Misión cumplida!