HACKATHON CAMPTI
Aplicaciones web con Python y Django
Abril 2018
Sesión I – Objetivo del Hackathon
Al finalizar el hackathon, el participante reconocerá y aplicará
las técnicas y procedimientos básicos para crear un proyecto
web con Python y el Framework Django.
Sesión I - Temario
ORDEN DEL DIA ETAPA 1
1.- def bienvenida(): 5.- def modelando_Bdatos():
Presentación del equipo Identificación de tablas
diseño Relacional en Navicat
2.- def discutir_el_problema_a_resolver():
Lectura del problema y análisis 6.- def creando_el_proyecto() :
configurando environment virtual
adquiriendo paquetes
3.- def configurando_entorno_de_trabajo(): desplegando el proyecto
Instalar python 3.x configurando bdatos mysql
Instalar xammp, wamp, mamp instalando sección admin
Instalar ide pycharm
7.- def creando_mtv_noticias():
4.- class Break(models.Model): creando models noticias
comer_pizza_y_botanas = true creando templates noticias
creando views noticias
Sesión I - Temario
ORDEN DEL DIA ETAPA 2
8.- def reto():
Explicación del reto
9.- def realizar_el_reto():
Programan el reto
10.- def presentación_de_reto():
Exponen el reto por parejas
Sesión I – Presentación
EQUIPO ORGANIZADOR
Dra. Teresa de Jesús Javier Baeza
Análisis del problema
MA. José Juan Ulín Ricardez
Modelado de datos
MIS. José Ángel Jesús Magaña
Programacion del framework
MTC. José Manuel Gómez Zea
Programación del framework
Sesión I – Presentación
EQUIPO ORGANIZADOR
Mtro. Miguel Martínez
Análisis del reto
MTI. José Javier Torres Hernández
Programación de framework
Sesión I – Presentación
Comencemos……..
Sesión I – Presentación
def discutir_el_problema_a_resolver():
Lectura del problema y análisis
PROCESO DE DESARROLLO
INICIO
Entender el problema y
Crear el proyecto
modelarlo Desplegar en el
navegador
Instalar y configurar
Configurar el Entorno roles y permisos
Modelar la Base de Crear models-templates- FIN
Datos views
Sesión I – Presentación
def discutir_el_problema_a_resolver():
Lectura del problema y análisis
La cámara nacional de la industria de la transformación (CANACINTRA), requiere
un sistema de noticias (BLOG), para publicar notas sobre los eventos realizados y
próximos a realizar.
El administrador del sistema podrá realizar las siguientes acciones:
• Iniciar sesión y cerrar sesión
• Crear, Actualizar y eliminar publicaciones.
• Publicar noticias.
• Aprobar y eliminar comentarios
Sesión I – Presentación
def discutir_el_problema_a_resolver():
Lectura del problema y análisis
Todos los demás usuarios son usuarios generales que pueden realizar las siguientes acciones:
• Leer publicaciones.
• Crear comentarios de las publicaciones
• La página principal del sistema debe mostrar una lista de las publicaciones más
recientes.
• En la página principal solo deben mostrarse 10 publicaciones y para acceder las
demás en pestañas de otras páginas
• El sistema debe mostrar una noticia junto con sus comentarios aprobados.
Sesión I – Presentación
def discutir_el_problema_a_resolver():
Lectura del problema y análisis
OBJETOS IDENTIFICADOS EN EL ANALISIS
Noticias
blog
Comentarios Usuarios
Sesión I – Presentación
Configurando el entorno ……..
Sesión I – Presentación
def configurando_entorno_de_trabajo():
Instalar python 3.x
Sesión I – Presentación
def configurando_entorno_de_trabajo():
Instalar mysql- xampp, wamp, mamp
Sesión I – Presentación
def configurando_entorno_de_trabajo():
Instalar IDE-pycharm, sublime text, visual studio code
Sesión I – Configuración del entorno
Cargar los plugins de sublime para django (menú-view-show-console)
Buscar código de configuración desde google escriba
install plugins in sublime text.
Pegar el código en la consola y dar enter.
Sesión I – Configuración del entorno
Buscar los plugins desde la paleta de comandos (menú-tools-command palette.)
Escribir install package y
Dar enter
Sesión I – Configuración del entorno
Instalar todos los plugins siguientes
• Anaconda
• SidebarEnhancements
• Alignment
• Colorpicker
• GitGutter
• FTPSync
• Djaneiro
• requirementstxt
• SublimeLinter
• AdvancedNewFile
• Emmet
• Markdown Preview
Pizzas is time...
Sesión I – Presentación
Modelando la base de datos ……..
Sesión I – Presentación
def modelando_Bdatos():
Lectura del problema y análisis
OBJETOS IDENTIFICADOS EN EL ANALISIS
Noticias
blog
Comentarios Usuarios
Sesión I – Presentación
def modelando_Bdatos():
Lectura del problema y análisis
OBJETOS IDENTIFICADOS EN EL ANÁLISIS
NOTICIAS COMENTARIOS
USUARIO
not_id int autoincrement com_id int autoincrement
usu_id int autoincrement
not_title varchar 200 com_fk_noticia int
usu_username varchar 200
not_body longtext com_title varchar 200
Usu_password char(20)
not_created_at datetime com_body text
not_created_at datetime
not_fk_user int com_created_at datetime
com_fk_user int
Sesión I – Configuración del entorno
Creando el proyecto ……..
Sesión I – Configuración del entorno
Revisar la versión de python instalada
Revisar la versión de pip
Instalar el ambiente virtualenvwrapper
Sesión I – Configuración del entorno
Crear carpeta para proyectos
Crear el ambiente virtual para proyectos
Activar un virtualenv Python con virtualenvwrapper
Sesión I – Configuración del entorno
Instalar django framework
Sesión I – Configuración del entorno
Creando el proyecto
Ingresamos a la carpeta del
proyecto
Sesión I – Programación del proyecto
Abriendo el proyecto en nuestro editor de código
Sesión I – Programación del proyecto
Ejecutando el servidor web
Sesión I – Programación del proyecto
http://localhost:8000
Sesión I – Programación del proyecto
Actualizar paquetes o migraciones faltantes
Detener el servicio web con control + c
Instalar la librería mysqlclient
Sesión I – Programación del proyecto
Configurar la conexión de base de datos en django
archivo settings.py
Sesión I – Programación del proyecto
Realizamos la migración de los aplicaciones declaradas en settings.py
Sesión I – Programación del proyecto
Observamos las tablas creadas en la base de datos
Sesión I – Programación del proyecto
Ejecutamos el servidor de pruebas
Sesión I – Programación del proyecto
http://localhost:8000/admin
Sesión I – Programación del proyecto
Crear un usuario para administrar la consola
Sesión I – Programación del proyecto
Entrar a la sección de administración con usuario y contraseña
Sesión I – Programación del proyecto
Crear la app de noticias
Registrar la APP noticias en la configuración settings.py
Sesión I – Programación del proyecto
Agregar el route url de la nueva APP NOTICIAS
Sesión I – Programación del proyecto
Crear archivo url.py dentro de la APP noticias
Sesión I – Programación del proyecto
Crear el controlador en el archivo views.py
Sesión I – Programación del proyecto
http://localhost:8000/noticias/
Sesión I – Programación del proyecto
Diseñar los templates
Modificamos el archivo views.py y redirigimos el controlador al template noticias/index.html
Sesión I – Programación del proyecto
Creamos la carpeta templates y dentro la carpeta noticias y dentro el archivo index.html
Sesión I – Programación del proyecto
Diseñamos un layout.html en nuestros templates
Sesión I – Programación del proyecto
Enlazar nuestra página con el marco css materialize http://materializecss.com/
Copiamos el link css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
Sesión I – Programación del proyecto
Pegamos el link en nuestro archivo layout.html en la sección de head
Sesión I – Programación del proyecto
Agregamos la sección de header al cuerpo y la llamada de bloques de codigo
Sesión I – Programación del proyecto
Modificamos y llamamos el layout en el template index.html
Sesión I – Programación del proyecto
Creamos el modelo de la clase Noticias de acuerdo a la tabla
Sesión I – Programación del proyecto
Generamos la migración al archivo 0001_initial.py
Sesión I – Programación del proyecto
Observamos el archivo 0001_initial.py de la estructura de la base de datos
Sesión I – Programación del proyecto
Migramos la primera tabla
Sesión I – Programación del proyecto
Observamos que fue creada nuestra base de datos
Sesión I – Programación del proyecto
Agregamos vinculo a la sección administrativa en el archivo admin.py
Sesión I – Programación del proyecto
Accedemos a la sección de administración http://localhost:8000/admin
Sesión I – Programación del proyecto
Agregamos dos noticias a nuestro base de datos desde el administrador
Sesión I – Programación del proyecto
Cambiamos el nombre de la columna de los registros que se muestran
Sesión I – Programación del proyecto
Reiniciamos el servidor web y volvemos a iniciarlo y observamos
Sesión I – Programación del proyecto
Hacemos que la raíz del sitio inicie el template index de noticias agregamos la ruta en el
archivo urls.py del proyecto
Sesión I – Programación del proyecto
http://localhost:8000
Sesión I – Programación del proyecto
Consultamos todas las noticias de 10 en 10 y pasamos el arreglo a el template
Sesión I – Programación del proyecto
Modificamos la vista para mostrar todos los registros obtenidos mediante un ciclo for each
En el archivo index.html
Sesión I – Programación del proyecto
http://localhost:8000
Sesión I – Programación del proyecto
Agregamos vínculos a las noticias para que visualice el contenido de la misma agregando
el a href
Sesión I – Programación del proyecto
Damos clic en el hipervínculo y observamos que nos envia al template detalles no. 1
Sesión I – Programación del proyecto
Diseñamos la vista y el template de el detalle de la noticia dentro del archivo view.py
Sesión I – Programación del proyecto
Creamos el template detalles.html dentro de templates/noticias
Sesión I – Programación del proyecto
Agregamos el route en el archivo de urls.py
Sesión I – Programación del proyecto
Damos clic en el hipervínculo
Pagina
principal de
noticias
Detalle de la
noticia
HACKATHON CAMPTI
Aplicaciones web con Python y Django
Abril 2018
