FINAL PROJECT CS50 WEB NEXT CODER

Proyecto final de programación web CS50: Next Coder

El video del proyecto es: https://youtu.be/ythhec-bdqa

Idea principal

Creé una aplicación web colaborativa para aprender a codificar. Todos pueden crear una charla (que básicamente son solo clases) y todos pueden inscribirse en esas clases. Los componentes principales son:

• Página de inicio
• Iniciar sesión/sesión/registro
• Página de conversaciones en la que se enumeran todas las diferentes charlas o clases y dónde puede filtrar las conversaciones por diferentes criterios
• Una página individual para cada charla con toda su información y un botón para inscribirse
• Una página en la que puede acceder a todas las conversaciones en las que está inscrito
• Una página para crear nuevas charlas

Distinción y complejidad

La página no es similar a nada que ya hemos creado. No es una aplicación de redes sociales ni un comercio electrónico. Tampoco es similar a los proyectos de otros años.

En términos de complejidad, utilicé Django con más de un modelo (explicado a continuación) y varios archivos JavaScript al interfaz. Además, toda la aplicación web responde a los diferentes tamaños de pantalla (principalmente teléfonos y computadoras móviles).

Archiva información

• En Views.py existe todo el código de backend. Las funciones principales son:

  • Clase Newtalkform con todos los campos para crear una nueva charla
  • SearchTalkform de clase para filtrar conversaciones
  • Iniciar sesión, inicio de sesión y registrar funciones copiadas del Proyecto 4
  • New_talk para guardar una nueva charla e información relacionada le gustan las etiquetas
  • Etiquetas para recuperar etiquetas existentes y agregar otras nuevas
  • Etiquetas de filtro: para devolver una lista de conversaciones basadas en los filtros que el usuario seleccionó
  • Get_by_title: devuelve las conversaciones en las que las palabras aparecen en el título, descripción o etiquetas
  • Hable para recuperar información sobre una charla específica
  • Inscribir: para inscribir una charla
  • Get_enrolled_talks: para recuperar las conversaciones en las que está inscrito

• Modelos.py. Los diferentes modelos son:

  • Un modelo de usuarios
  • Un modelo para etiquetas
  • Un modelo habla con todos los diferentes detalles sobre una charla (y un serializador)

• Talks.js: para filtrar las conversaciones, mostrar las charlas y autocompletar cuando busca una charla

• New_talk.js: para la segunda parte de crear una nueva charla que es agregar etiquetas. Carga y muestra etiquetas, guarda nuevas etiquetas y agrega las etiquetas seleccionadas a la nueva charla

• Mytalks.js: Para obtener las charlas en las que estás inscrito y mostrarlas en el DOM

• Plantillas para todas las diferentes páginas HTML explicadas anteriormente (8 en total, incluido un archivo de diseño)

• Un archivo CSS con todo el CSS utilizado en la aplicación web. Se utilizan técnicas como Flexbox y Grid

• Otros archivos menos importantes como URL, administrador, configuración, imágenes estáticas ...

Cómo ejecutar la aplicación

• Instale las dependencias del proyecto ejecutando los requisitos de PIP instalación -r.txt
• Haga y aplique migraciones ejecutando Python Manage.py Makemigrations y Python Manage.py migra.