Project 2 Flack

Web Programming with Python and JavaScript

Este proyecto consiste en una aplicación en donde los usuarios pueden conectarse a salas, crear salas y mandar mensajes en tiempo real.

Puedes ver el Deploy aquí

Tecnologías que se usaron:

1. Python: Se uso en la creacion de los eventos del servidor con flask socket io.

2. HTML: Se utilizó para la creación de nuestras plantillas (templates) que se muestran en la vista del cliente.

3. JavaScript: Se utilizó para la integracion de socket io cliente con flask socket io servidor y algunas funcionalidades extras.

¿Comó Funciona?

Funciona de la siguiente manera:

Inicio de sesion

Los usuarios podran acceder a la aplicacion de chat por medio de un inicio de sesion que se registrara con un nombre de usuario.

Creacion de salas

Los usuarios podran crear salas de chat por medio de un modal.

Envio de mensajes

El usuario podra enviar mensajes por medio de un chat general y dentro de las salas especificas.

Toque personal

El toque personal que decidi agregar lo siguiente:

1. Un selector de emojis, que permite seleccionar el emoji y enviarlo por medio del mensaje.
2. Buscador de salas, para poder buscar las salas dentro de la lista de salas.
3. Mostrar los usuarios activos y los que enviaron mensajes de cada sala.

Instalación:

• Para poder ejecutar la aplicación deberá tener un IDE instalado, le recomiendo que use Visual Studio Code ya que en este se creó la aplicación. Puede descargarlo aquí: VS Code. Posteriormente, deberá clonar o descargar nuestro repositorio. Puede hacerlo con este comando:

Git Clone https://github.com/Orrv2904/cs50w-project2

• Una vez descargado, podrás acceder a él por medio del CMD de Windows o si prefieres, puedes usar MINGW64 de Git y luego ejecutar el comando Code . para abrirlo en VS Code.

• Ahora deberá instalar las dependencias de nuestro programa. Para ello, deberá abrir una terminal dentro de VS Code. Puede abrirla desde el menú superior seleccionando "Terminal" y luego "New Terminal", o presionando la combinación de teclas Ctrl + Shift + si estás en Windows o Linux, o Cmd + Shift + si estás en Mac.

• Dentro de esta terminal, deberás instalar pip si aún no lo tienes instalado. Para hacerlo, ejecuta el siguiente comando: pip install pip. Normalmente, pip viene instalado con Python. Si aún no tienes instalado Python, puedes aprender cómo hacerlo leyendo aqui.

• Luego, deberás crear un Entorno Virtual haciendo uso del siguiente comando: python -m venv env. Para activarlo, ejecuta este otro comando: .\env\Scripts\activate.

• Ahora deberás instalar nuestras dependencias que se encuentran en nuestro archivo requirements.txt. Para ello, ejecuta pip install -r .\requirements.txt y espera a que se termine de instalar todo.

• Posteriormente, deberás crear un archivo llamado .env donde contendrá todas las variables de entorno que usará nuestra aplicación. Puedes crearlo manualmente o también puedes ejecutar este comando: touch .env. Dentro de este archivo, deberás escribir las variables que están en .env.templates, que son las siguientes:

export FLASK_APP=application.py
export FLASK_DEBUG=1

Ejecución:

Para ejecutar la aplicación, deberás ejecutar el siguiente comando:

• Flask Run el cual te abrirá la aplicación en un puerto de tu computadora, por lo general es el 5000. Puedes acceder a él mediante tu navegador web escribiendo la siguiente dirección http://localhost:5000/