Project2: Flack
Objetivos
- Aprender a usar JavaScript para ejecutar código del lado del servidor.
- Familiarizarse con la creación de interfaces de usuario web.
- Adquirir experiencia con Socket.IO para comunicarse entre clientes y servidores.
Resumen
En este proyecto, crearás un servicio de mensajería en línea utilizando Flask, de manera similar a Slack. Los usuarios serán capaces de registrarse en tu sitio con un nombre para mostrar, crear canales (o sea, salas de chat) para comunicarse, así como ver y unirse a canales existentes. Una vez que un canal es seleccionado, los usuarios serán capaces de enviar y recibir mensajes entre sí en tiempo real. Finalmente, ¡le darás el toque personal que gustes a tu aplicación de chat!
Logros
- Completa los pasos de Nombre Visual, Creación de Canal y Lista de Canales.
- Completa los pasos de Vista de Mensajes y Envío de Mensajes.
- Completa los pasos de Recordar el Canal y Toque Personal.
Empezando
Python y Flask
Como con el Proyecto 1, asegúrate que tengas una copia de Python versión 3.6 o superior.(Nosotros te recomendamos 3.9) instalada en tu computadora.
También necesitarás instalar
pip
. Si descargaste Python del sitio web de Python, es probable que ya tengas pip
instalado
(puedes comprobarlo ejecutando pip en una terminal). Si no lo tienes instalado, ¡asegúrate de instalarlo antes de continuar! Para ejecutar esta aplicación Flask:
- Descarga el código de distribución de project2 desde https://cdn.cs50.net/web/2020/x/projects/2/project2.zip y extraelo.
- En una terminal, navega a tu directorio de
project2
. - Ejecuta
pip3 install -r requirements.txt
en tu terminal para asegurarte de que todos los paquetes de Python necesarios (Flask y Flask-SocketIO, por ejemplo) están instalados. - Configura la variable de ambiente
FLASK_APP
para que seaapplication.py
. En Mac o Linux, el comando para hacer esto esexport FLASK_APP=application.py
. En Windows, el comando esset FLASK_APP=application.py
. - Ejecuta
flask run
para iniciar tu aplicación Flask. - !Si navegas a la URL proporcionada por
flask
, deberías ver el texto "Project 2: TODO"!
Requerimientos
¡Bien, es momento de crear tu aplicación web! Estos son los requerimientos:
- Nombre Visual: Cuando un usuario visita tu aplicación web por primera vez, se le debe pedir que ingrese un nombre que eventualmente será asociado a cada mensaje que el usuario envíe. Si un usuario cierra la página y regresa a tu aplicación más tarde, el nombre aún se debe recordar.
- Creación de Canal: Cualquier usuario debe ser capaz de crear un canal nuevo, siempre que su nombre no entre en conflicto con el nombre de un canal existente.
- Lista de Canales: Los usuarios deben ser capaces de ver una lista de todos los canales actuales, y al seleccionar uno se debe permitir al usuario ver el canal. Dejamos que seas tú quien decida cómo mostrar esa lista.
- Vista de Mensajes: Una vez que se selecciona un canal, el usuario debe ver cualquier mensaje que ya haya sido enviado en ese canal, hasta un máximo de 100 mensajes. Tu aplicación debe almacenar solamente los 100 mensajes más recientes por cada canal en la memoria del lado del servidor.
- Envío de Mensajes: Una vez en un canal, los usuarios deben ser capaces de enviar mensajes de texto a otros en el canal. Cuando un usuario envía un mensaje, su nombre visible y la marca de tiempo del mensaje deben estar asociados con el mensaje. Todos los usuarios en el canal deben ver el nuevo mensaje (con el nombre visible y la marca de tiempo) aparecer en su página del canal. El envío y recepción de mensajes NO debería requerir volver a cargar la página.
- Recordar el Canal: Si un usuario está en una página de canal, cierra la ventana del navegador, y regresa a tu aplicación web, tu aplicación debería recordar en qué canal estaba el usuario anteriormente y llevarlo de vuelta a ese canal
- Toque Personal: ¡Agrega al menos una característica adicional a tu aplicación de chat! Siéntete libre de ser creativo, pero si estás buscando ideas, las posibilidades incluyen: eliminación de mensajes propios, envío de archivos como mensajes, o envío de mensajes privados entre dos usuarios.
- En
README.md
, incluye una breve reseña describiendo tu proyecto, qué contiene cada archivo, y (opcionalmente) cualquier otra información adicional que el staff deba saber sobre tu proyecto. También, incluye una descripción de tu toque personal y lo qué elegiste agregar al proyecto. - Si has agregado paquetes de Python que deban ser instalados para ejecutar tu aplicación web, asegúrate de agregarlos a
requirements.txt.
!Más allá de estos requerimientos, el diseño, aspecto, y la sensación del sitio web dependen de ti! ¡También puedes agregar características adicionales a tu sitio web, siempre que cumplas con los requerimientos establecidos en la especificación anterior!
Pistas
- No deberías necesitar una base de datos para esta asignación. Sin embargo, no dudes en almacenar cualquier información que necesites en la memoria de tu aplicación Flask, usando una o más variables globales definidas en application.py.
- Posiblemente encontrarás que el almacenamiento local es útil para almacenar información del lado del cliente que se guardará en las sesiones del navegador.
¿Cómo enviarlo?
Paso 2 de 2
Completar el siguiente formulario a más tardar el día sabado 30 de octubre de 2021 a las 00:00.
Registro de cambios
- 08/02/2021
- Version Inicial
- Traducción