orrv2904 / cs50w-project1

Web application to search a book using GoogleBooks API

Project 1 Books

Web Programming with Python and JavaScript

If you are English speaking, you can read the same readme but in English

Este proyecto consiste en una aplicación en donde los usuarios pueden registrar sus cuentas e iniciar sesión en el sitio. De igual forma, podrán buscar un libro ya sea por el número ISBN del libro, el título del libro o el autor del libro. Cada libro tendrá su apartado de envío y muestra de reseñas.

Puedes ver el Deploy aquí

Tabla de Contenido

1. Tecnologías que se usaron
2. ¿Como Funciona?
3. Instalacion
4. Ejecucion

Tecnologías que se usaron:

1. Python: Se utilizó para la creación de las tablas por medio de modelos haciendo uso de ORM, de igual forma para importar toda la información de los libros contenida en un CSV.

2. Flask: Se utilizó para la creación de toda la aplicación, para ser más específicos en la creación de las rutas y funcionalidades de la aplicación.

3. PostgreSQL: Se utilizó para almacenar toda la información recibida de nuestra aplicación.

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

5. SASS: Se utilizó para mejorar la eficiencia en la escritura de los estilos CSS.

6. JavaScript: Se utilizó para mejorar la apariencia de las vistas y darle algunas funcionalidades extras.

¿Comó Funciona?

Funciona de la siguiente manera:

Creación de cuenta e Inicio de Sesión

Para crear la cuenta el usuario solamente deberá ingresar los datos que se le solicitan, que son Nombre de Usuario, Correo Electrónico Vigente y Contraseña, en donde una vez creada su cuenta, se le redirigirá a la misma vista para que inicie sesión con la cuenta que acaba de crear.

Búsqueda

Una vez que el usuario haya iniciado sesión en el sitio, la aplicación lo redirigirá a un buscador en donde podrá buscar un libro por medio del ISBN, Autor o Título, en donde la aplicación le devolverá una lista de todos los libros que se encuentran en nuestra base de datos y retornará una plantilla que contendrá la información de los libros que coincidan con el parámetro de búsqueda ingresado por el usuario.

Reseña

Cuando el usuario haya hecho la búsqueda del libro del cual desea saber la información, podrá hacer clic en cada libro por medio de un botón o ya sea por la imagen o el título, en donde este lo redirigirá a otra vista en la cual podrá ver las reseñas de los usuarios antiguos y el mismo podrá agregar su propia reseña del libro, NOTA: El usuario solo podrá agregar una reseña por cada libro ya que el registro se hará por el ISBN.

Acceso al API

Si el usuario desea conocer los detalles de un libro solo deberá agregar la siguiente ruta a la URL del navegador:

/api/#ISBN

En donde esta le devolverá información del ISBN al cual está haciendo la búsqueda, mostrándole algo similar a esto:

{
    "title": "Memory",
    "author": "Doug Lloyd",
    "year": 2015,
    "isbn": "1632168146",
    "review_count": 28,
    "average_score": 5.0
 }

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-project1.git

• 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:

DATABASE_URL=
FLASK_DEBUG=
FLASK_APP= 

NOTA: Antes de cada variable, deberás anteponer export. Esto es para indicar que la variable de entorno especificada será exportada a cualquier proceso secundario lanzado desde la terminal actual. En la variable DATABASE_URL= deberás igresar la URL de tu base de datos PostgreSQL creada en RailWay o en Render. Si quieres saber más acerca de esto puedes leer más aquí RailWay y Render.

Ahora deberás obtener la cadena de conexión otorgada por Railway o Render. Para ello, deberás crear tu cuenta y crear la base de datos como se mencionó anteriormente.

• Railway tiene una sección llamada Connect en la cual deberás estar en la base de datos que deseas utilizar. Deberás seleccionar esta opción:

• En Render, deberás seleccionar la cadena de conexión externa.

Una vez obtenida esta cadena de conexión, deberás pegarla en la variable DATABASE_URL=, obteniendo un resultado similar a este:export DATABASE_URL=postgresql://postgres:PASSSWORD@HOST:PORT/USER.

• Y en FLASK_DEBUG= y FLASK_APP= deberás de agregar esto: FLASK_DEBUG=1 FLASK_APP=application.py

• Para terminar en esta sección deberás de crear las tablas e ingresar los datos a la base de datos, para ello deberás ejecutar los siguientes comandos en la terminal:

     python -m create_tables
  

  Y

     python -m import
  

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/