Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eduardoprofe666/tarea-2-js

📚 Proyecto de la Tarea 2 de Optativa I de JavaScript sobre la gestión de una librería usando el framework progresivo Vue.js para el frontend y JavaScript para el backend
https://github.com/eduardoprofe666/tarea-2-js

books github-pages javascript vuejs

Last synced: 5 days ago
JSON representation

📚 Proyecto de la Tarea 2 de Optativa I de JavaScript sobre la gestión de una librería usando el framework progresivo Vue.js para el frontend y JavaScript para el backend

Host: GitHub
URL: https://github.com/eduardoprofe666/tarea-2-js
Owner: EduardoProfe666
License: mit
Created: 2023-10-13T19:59:13.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-12-10T17:57:35.000Z (about 1 year ago)
Last Synced: 2024-11-18T23:56:32.222Z (2 months ago)
Topics: books, github-pages, javascript, vuejs
Language: JavaScript
Homepage: https://eduardoprofe666.github.io/Tarea-2-JS/
Size: 6.21 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Tarea 2 de Optativa I JavaScript

![Javascript](https://img.shields.io/badge/-JavaScript-35495E?style=for-the-badge&logo=javascript)

![Vue](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)

![Static Badge](https://img.shields.io/badge/MIT-e63caa?style=for-the-badge&label=License&labelColor=35495E)

## 📚 Enunciado 1 Gestor de Libros:

Crea una clase "Libro" que tenga propiedades como "título", "autor" y "año de publicación".

Luego, implementa funciones que permitan agregar, editar y eliminar libros en una lista de

libros. Además, desarrolla otra función que permita buscar libros por autor.

## 📙 Descripción del proyecto

### 🤔 Consideraciones Generales

Al libro se le agregaron otros atributos a parte de los básicos dados en la problemática: Publicador, Contenido, Cover (ruta) y Thumbnail (ruta).

Se desarrolló una interfaz de usuario usando el framework progresivo [Vue.js](https://es.vuejs.org/).

Para iniciar el proyecto se usó el comando:

```sh

npm create vue@latest

```




Para instalar las dependencias necesarias se empleó el comando:

```sh

npm install

```




Para ejecutar e ir probando la visual del proyecto se usó el comando:

```sh

npm run dev

```




Para construir la aplicación se usó el comando:

```sh

npm run build

```

Los archivos resultantes del anterior comando fueron usados para desplegar el proyecto con [Github Pages](https://pages.github.com/).

### 🏛️ Estructura del proyecto:

Se utilizó la siguiente estructura:

```bash

.

├── .vscode/

├── node_modules/

├── public/

|   ├── backgrounds/

|   ├── covers/

|   ├── icons/

|   └── thumbnails/

├── src/

|   ├── assets/

|   |   ├── main.css

|   |   └── modal.css

|   ├── code/

|   |   ├── biblioteca.js

|   |   ├── controller.js

|   |   ├── inicializacion.js

|   |   ├── libro.js

|   |   ├── pruebas.js

|   |   ├── useEventEmitter.js

|   |   └── utilidades.js

|   ├── components/

|   |   ├── VAniadirLibro.vue

|   |   ├── VBarraNavegacion.vue

|   |   ├── VCarta.vue

|   |   ├── VEstanteria.vue

|   |   ├── VEliminarLibro.vue

|   |   ├── VLibro.vue

|   |   └── VModificarLibro.vue

|   ├── App.vue

|   └── main.js

├── .eslintrc.js

├── .gitignore

├── .prettierrc.json

├── index.html

├── LICENSE

├── package-lock.json

├── package.json

├── README.md

└── vite.config.js

```

Donde:

| **Fichero o carpeta** | **Descripción** |

| :-------------------- | :-------------- |

| `.vscode/` | Directorio que contiene archivos de configuración del editor **Visual Studio Code**  |

| `node_modules` | Directorio que contiene los paquetes o dependencias instaladas mediante `npm` |

| | |

| `public/` | Directorio que contiene los ficheros estáticos del proyecto (imágenes) |

| `public/backgrounds/` | Directorio que contiene las imágenes de fondo |

| `public/covers/` | Directorio que contiene las imágenes de las carátulas de los libros |

| `public/icons/` | Directorio que contiene los iconos usados |

| `public/thumbnails/` | Directorio que contiene los thumbnails de las imágenes usadas |

| | |

| `src/` | Directorio donde se almacena el código fuente del proyecto |

| `src/assets` | Directorio de archivos estáticos privados usados en el proyecto |

| `src/assets/main.css` | Fichero de estilos `css` principal del proyecto |

| `src/assets/modal.css` | Fichero de estilos `css` para los ficheros modales |

| `src/code/` | Directorio que contiene la lógica del proyecto, es decir, los archivos `.js` |

| `src/code/biblioteca.js` | Fichero `.js` que contiene la lógica de la biblioteca (listado de libros) y la única instancia de la misma en la aplicación |

| `src/code/controller.js` | Fichero `.js` que contiene métodos para vincular la lógica con la interfaz |

| `src/code/inicializacion.js` | Fichero `.js` que permite inicializar la aplicación con datos de prueba |

| `src/code/libro.js` | Fichero `.js` que contiene la lógica de los libros |

| `src/code/pruebas.js` | Fichero `.js` que contiene pruebas por consola de la lógica implementada |

| `src/code/useEventEmitter.js` | Fichero `.js` que contiene los métodos para agregar y consumir eventos. |

| `src/code/utilidades.js` | Fichero `.js` que contiene las funciones auxiliares implementadas |

| | |

| `src/components/` | Directorio que contiene los componentes `.vue` del proyecto |

| `src/components/VAniadirLibro.vue` | Fichero `.vue` con la interfaz de la funcionalidad **Añadir Libro** |

| `src/components/VBarraNavegacion.vue` | Fichero `.vue` con la interfaz de la funcionalidad **Barra de Navegación**, incluyendo la **Barra de Búsqueda** |

| `src/components/VCarta.vue` | Fichero `.vue` de la interfaz de la información del libro |

| `src/components/VEliminarLibro.vue` | Fichero `.vue` de la funcionalidad de **Eliminar Libro** |

| `src/components/VEstanteria.vue` | Fichero `.vue` del listado de libros |

| `src/components/VLibro.vue` | Fichero `.vue` de cada libro del listado de libros |

| `src/components/VModificarLibro.vue` | Fichero `.vue` de la interfaz de **Editar Libro** |

| | |

| `src/App.vue` | Fichero principal de `Vue` de la aplicación desarrollada |

| `src/main.js` | Fichero principal que carga `Vue` y el proyecto |

| `.eslintrc.js` | Fichero de configuración del _linter_ de **Javascript** `ESLint` |

| `.gitignore` | Fichero que indica los archivos que `Git` debe ignorar al hacer el versionado |

| `.prettierrc.json` | Fichero de configuración del formateador de código `Prettier` |

| `index.html` | Fichero `HTML` principal de la aplicación |

| `LICENSE` | Manifiesto de la licencia utilizada (**MIT**) |

| `package-lock.json` | Fichero histórico de versionado de apoyo para `package.json` |

| `package.json` | Fichero de configuración del proyecto, usando `npm` |

| `README.md` | Fichero `Markdown` donde se documenta el proyecto |

| `vite.config.js` | Fichero de configuración de `Vite`, automatizador de aplicaciones web **Javascript** |

## 🚀 Despliegue en Github Pages:

El proyecto fue desplegado con éxito en Github Pages. Se puede acceder a dicho despliegue a través del [siguiente enlace](https://eduardoprofe666.github.io/Tarea-2-JS/)

## 📸 Capturas de pantalla

### Pantalla Principal

![inicio](/assets/inicio.png)

### Buscador

![buscador](/assets/buscador.png)

### Carta de Libro

![carta](/assets/carta.png)

### Añadir Libro

![añadir](/assets/annadir.png)

### Modificar Libro

![modificar](/assets/modificar.png)

### Eliminar Libro

![eliminar](/assets/eliminar.png)

## 👥 Miembros del equipo

    

        

            
_{Lilian Rosa Rojas Rodríguez}
 

            
_{Ernesto Alejandro Carralero Conde}
 

            
_{Jesús Manuel Castellanos Reynaldo}
 

        

        

            
_{Alejandro Estrada Suarez}
 

            
_{Fabio Ford Campbell}
 

            
_{Eduardo Alejandro González Martell}