Skip to content

Commit cb55964

Browse files
pablo-schpablo-sch
committed
the readme is written in German and in English
1 parent a9f4440 commit cb55964

File tree

4 files changed

+408
-91
lines changed

4 files changed

+408
-91
lines changed

‎docs/README.de.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# Frontend-Entwicklungsprojekt mit JavaScript - Abgabe
2+
3+
## Wähle deine Sprache
4+
5+
- 🇪🇸 [Spanisch](README.es.md)
6+
- 🇺🇸 [Englisch](README.md)
7+
8+
## Erlernte Kenntnisse
9+
10+
- Grundlegende Funktionsweise eines Browsers.
11+
- Browser Object Model (BOM):
12+
- Navigation
13+
- Location
14+
- Window
15+
- Document Object Model (DOM), seine Knoten und Elemente.
16+
- Knoten auswählen.
17+
- Erstellen und Entfernen von DOM-Elementen.
18+
- Manipulation von DOM-Attributen sowie deren Stilen und CSS-Klassen.
19+
- DOM-Ereignisbehandlung.
20+
- Standardverhalten in HTML-Komponenten.
21+
- Event Bubbling & Capturing.
22+
- Promises und deren Zustände: *pending*, *fulfilled* und *rejected*.
23+
- HTTP-Anfragen mit `fetch`.
24+
- `localStorage` und `sessionStorage`.
25+
- Lokale Datenspeicherung in HTML5: Cookies, Storage und IndexedDB.
26+
27+
## Projektbeschreibung
28+
29+
Um das in den virtuellen Kursen erlernte Wissen zu üben und zu demonstrieren, besteht dieses Projekt darin, eine Webanwendung zu entwickeln, die Wallapop ähnlich ist. Die Verwendung von JavaScript-Bibliotheken oder -Frameworks ist nicht gestattet, externe CSS-Utilities können jedoch verwendet werden.
30+
Zusätzlich muss eine `db.json`-Datei für das Backend mit den Beispiel-Daten bereitgestellt werden, die für die Korrektur der Aufgabe erforderlich sind.
31+
32+
### 1. Anzeigenliste
33+
34+
- Jede Anzeige sollte ihr Bild (falls vorhanden), den Namen, die Beschreibung, den Preis und die Angabe, ob es sich um einen Kauf oder Verkauf handelt, anzeigen.
35+
- Die Anzeigen müssen über ein Endpoint abgerufen werden.
36+
- Der Listenscreen muss alle Zustände der Benutzeroberfläche verwalten:
37+
38+
- **Leer** (keine Anzeigen).
39+
- **Fehler** (beim Laden der Anzeigen).
40+
- **Laden** (während die Anzeigen geladen werden).
41+
- **Erfolg** (wenn die Anzeigen erfolgreich abgerufen wurden).
42+
43+
- Durch Klicken auf eine Anzeige sollte der Benutzer zum Detailbildschirm dieser Anzeige weitergeleitet werden.
44+
- Wenn der Benutzer angemeldet ist, sollte eine Schaltfläche angezeigt werden, um zum Bildschirm zur Erstellung von Anzeigen zu gelangen.
45+
46+
### 2. Anzeigendetail
47+
48+
- Es sollte das Bild (falls vorhanden), den Namen, die Beschreibung, den Preis und die Angabe, ob es sich um einen Kauf oder Verkauf handelt, anzeigen.
49+
- Es sollte alle Zustände der Benutzeroberfläche verwalten:
50+
51+
- **Leer** (die Anzeige existiert nicht).
52+
- **Fehler** (beim Laden der Anzeigedaten).
53+
- **Laden** (während die Daten geladen werden).
54+
- **Erfolg** (wenn die Daten erfolgreich abgerufen wurden).
55+
56+
- Wenn der Benutzer authentifiziert ist und die Anzeige ihm gehört, sollte eine Schaltfläche zum Löschen der Anzeige angezeigt werden (mit Bestätigung).
57+
58+
### 3. Erstellung einer Anzeige
59+
60+
- Es sollte ein Formular mit den folgenden Feldern enthalten:
61+
- **Foto** (optional).
62+
- **Name** (erforderlich).
63+
- **Beschreibung** (erforderlich).
64+
- **Preis** (erforderlich).
65+
- **Kauf/Verkauf** (erforderlich).
66+
67+
- Beim Absenden des Formulars sollte eine Anfrage an das Backend gesendet werden, um die Anzeige zu speichern.
68+
- Die Benutzeroberfläche muss folgende Zustände verwalten:
69+
70+
- **Fehler** (beim Speichern der Anzeige).
71+
- **Laden** (während die Anzeige gespeichert wird).
72+
- **Erfolg** (wenn die Anzeige erfolgreich gespeichert wurde).
73+
74+
- Dieser Bildschirm kann nur aufgerufen werden, wenn der Benutzer angemeldet ist. Andernfalls wird der Benutzer zum Listenbildschirm weitergeleitet und erhält eine Nachricht mit dem Grund.
75+
76+
### 4. Login
77+
78+
- Es sollte ein Formular mit den Feldern Benutzername und Passwort angezeigt werden.
79+
- Nach dem Absenden des Formulars sollte der Benutzer gegen das Backend authentifiziert werden, und ein JWT-Token sollte abgerufen werden.
80+
- Die Zustände: Laden, Fehler und Erfolg müssen verwaltet werden.
81+
82+
### 5. Registrierung
83+
84+
- Ähnlich zum Login-Bildschirm.
85+
- Der Benutzer sollte im Backend registriert werden.
86+
- Die Zustände: Laden, Fehler und Erfolg müssen verwaltet werden.
87+
88+
## Optional
89+
90+
- Pagination der Anzeigen in der Liste (die API gibt standardmäßig nur 10 zurück).
91+
- Suchfunktion für Anzeigen.
92+
- Bearbeitung von Anzeigen (nur wenn der Benutzer der Eigentümer ist).
93+
- Filterung nach Tags (Statische Tags).
94+
- Dynamische Tags ermöglichen.
95+
96+
## REST API für das Projekt
97+
98+
Um eine Datenbank zu emulieren, wird **sparrest.js** verwendet, eine REST API, die von Dozent Alberto Casero (KeepCoding) erstellt wurde und auf `json-server` basiert.
99+
100+
### Repository klonen
101+
102+
```bash
103+
git clone https://github.com/kasappeal/sparrest.js.git
104+
```
105+
106+
Dies startet den Server und aktiviert die REST API, sodass Sie mit der simulierten Datenbank interagieren können.
107+
108+
## Verwendete Technologien
109+
110+
- **HTML**: Zur Strukturierung des Inhalts und zum Erstellen des Seitenlayouts.
111+
- **CSS**: Für das Design und die visuelle Gestaltung der Seite, um eine attraktive und konsistente Benutzererfahrung zu gewährleisten.
112+
113+
## Installations- und Nutzungshinweise
114+
115+
### Softwareanforderungen
116+
117+
- **Visual Studio** (Getestet mit Version 1.99.0)
118+
- **Live Server** (Visual Studio Addon, optional)
119+
120+
### Beschreibung der Programme
121+
122+
- **Visual Studio**: Integrierte Entwicklungsumgebung (IDE), die benötigt wird, um das Projekt auszuführen. Stellen Sie sicher, dass Sie Version 1.99.0 verwenden, um Kompatibilitätsprobleme zu vermeiden.
123+
- **Live Server**: Visual Studio-Erweiterung, die es ermöglicht, HTML-Dateien lokal in einem Browser anzuzeigen und Änderungen in Echtzeit anzuzeigen.
124+
125+
### Schritte zur Verwendung dieses Projekts
126+
127+
1. Laden Sie die komprimierte Datei des Projekts von GitHub auf Ihren Computer herunter oder klonen Sie sie über SourceTree.
128+
129+
2. Sobald das Projekt heruntergeladen oder geklont wurde, fügen Sie es zu Ihrem Arbeitsbereich in Visual Studio Code hinzu.
130+
131+
3. Nachdem Sie Sparrest heruntergeladen haben, aktualisieren Sie die Abhängigkeiten. Um die getestete Datenbank in dieses Projekt zu integrieren, kopieren Sie die `db.json`-Datei aus diesem Projekt und ersetzen Sie die Datei, die von Sparrest nach der Initialisierung generiert wird.
132+
133+
Um die Datenbank zu starten, führen Sie einfach den folgenden Befehl im Sparrest-Verzeichnis aus:
134+
135+
```bash
136+
npm start
137+
```
138+
139+
### Hinweise
140+
141+
- Die `db.json`-Datei enthält drei Konten und 14 Beiträge. Dies sind die Anmeldeinformationen für jedes Konto, um sich im Projekt anzumelden und die bereits erstellten Beiträge zu bearbeiten:
142+
143+
- [pablsch.it@gmail.com](mailto:pablsch.it@gmail.com) / pwd: 123456
144+
- [Pedro.it@gmail.com](mailto:Pedro.it@gmail.com) / pwd: 123456
145+
- [jose.JJ@gmail.com](mailto:jose.JJ@gmail.com) / pwd: 123456
146+
147+
## Keine Beiträge oder Lizenzen
148+
149+
Dieses Projekt hat derzeit keine externen Beiträge oder eine Lizenz.
150+
151+
## Projektvorschau
152+
153+
...

‎docs/README.es.md‎

Lines changed: 102 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,106 @@
1-
# Entrega Proyecto de Desarrollo Frontend con JavaScript
1+
# Entrega del Proyecto de Desarrollo Frontend con JavaScript
22

3-
## Selecciona tu Lenguaje
3+
## Selecciona tu idioma
44

55
- 🇺🇸 [Inglés](README.md)
66
- 🇩🇪 [Alemán](README.de.md)
77

8-
## Conocimientos Trabajados
8+
## Conocimientos trabajados
99

10-
- Funcionamiento básico de un Navegador.
11-
- Browser Object Model (BOM).
12-
- Navigation.
13-
- Location.
14-
- Window.
10+
- Funcionamiento básico de un navegador.
11+
- Browser Object Model (BOM):
12+
- Navigation
13+
- Location
14+
- Window
1515
- Document Object Model (DOM), sus nodos y elementos.
16-
- Seleccionar nodos.
17-
- Crear y eliminar elementos del nodo.
18-
- Manipulanr atributos del nodo más sus estilos y clases CSS.
19-
- Manejar eventos del DOM.
20-
- Comportamiento por defecto en los componentes del HTML.
16+
- Selección de nodos.
17+
- Creación y eliminación de elementos del DOM.
18+
- Manipulación de atributos del DOM, así como de sus estilos y clases CSS.
19+
- Manejo de eventos del DOM.
20+
- Comportamientos por defecto en los componentes HTML.
2121
- Event Bubbling & Capturing.
22-
- Promesas y sus estados: pending, fulfilled y rejected.
23-
- Peticiones HTTP con fetch.
24-
- LocalStorage & sessionStorage.
25-
- Almacenamiento local de datos de HTML5: cookies, storage y indexed DB.
26-
27-
## Descripción del Proyecto
28-
29-
Con el fin de ejercitar y demostrar los conocimientos adquiridos en clases virtuales este proyecto consiste en desarrollar una aplicación web similar a Wallapop. No se tiene permitido utilizar librerías o frameworks de JavaScript. En cambio, sí está permitido utilizar utilidades de CSS externas.
30-
Además, se debe proporcionar un archivo db.json para el backend con los datos de ejemplo para la corrección de la práctica.
31-
32-
1. Listado de anuncios.
33-
- Cada anuncio debe mostrar su imagen (si tiene), nombre, descripción, precio y si es compra o venta. Los anuncios publicados deben obtenerse a través de un endpoint, mencionado más adelante.
34-
- La pantalla de listado de los anuncios deberá gestionar todos los estados de interfaz correctamente:
35-
- **Vacío** (no hay anuncios).
36-
- **Error** (cuando se produce un error al cargar los anuncios).
37-
- **Carga** (mientras se cargan los anuncios desde el backend).
38-
- **Éxito** (cuando se han recuperado los anuncios y están listos para ser mostrados).
39-
- Al pulsar sobre un anuncio, iremos a la pantalla de detalle de anuncio.
40-
- Si el usuario ha hecho login, hay que mostrar al usuario un botón que le permita acceder a la pantalla de creación de un anuncio.
41-
42-
2. Detalle de anuncio.
43-
- La página de detalle de anuncio deberá mostrar foto (si tiene), nombre, descripción, precio y si es compra o venta.
44-
- En este detalle de anuncio se deberá gestionar todos los estados de interfaz correctamente:
45-
- **Vacío** (no existe el anuncio).
46-
- **Error** (cuando se produce un error al cargar la información del anuncio).
47-
- **Carga** (mientras se cargan la información del anuncio desde el backend).
48-
- **Éxito** (cuando se ha recuperado la información del anuncio y está listo para ser mostrado).
49-
- Si el usuario está autenticado y el anuncio le pertenece, deberá además mostrar un botón que permita eliminar el anuncio (aunque antes de eliminarlo, deberá confirmar con el usuario si realmente quiere eliminar o no el anuncio).
50-
51-
3. Creación de un anuncio.
52-
53-
- En la página para crear un anuncio se deberá mostrar al usuario un formulario con los siguientes campos:
54-
- **Foto** (opcional): permitirá subir una foto del producto.
55-
- **Nombre** (obligatorio): nombre del producto.
56-
- **Descripción** (obligatorio): descripción del producto.
57-
- **Precio** (obligatorio): precio del producto.
58-
- **Compra/venta** (obligatorio): indica si el anuncio se trata de una compra o una venta.
59-
- Cuando el usuario envíe el formulario, deberá enviar al backend una petición para guardar el anuncio.
60-
- Se deberá gestionar todos los estados de interfaz correctamente:
61-
- **Error** (cuando se produce un error al guardar la información del anuncio).
62-
- **Carga** (mientras se guarda la información del anuncio en el backend).
63-
- **Éxito** (cuando se han guardado correctamente la información del anuncio).
64-
- A esta pantalla sólo podremos acceder si estamos logados. En caso contrario, habrá que redireccionar al usuario a la página de listado de anuncios, informándole del motivo.
65-
66-
4. Login.
67-
68-
- La página de login deberá mostrar un formulario solicitando el nombre de usuario y contraseña.
69-
- Cuando el usuario envíe el formulario, deberá autenticar al usuario contra el backend para obtener un token JWT que será utilizado en las siguientes comunicaciones con el backend para autenticar al usuario.
70-
- Se deberá gestionar todos los estados de interfaz correctamente: carga, error y éxito.
71-
72-
5. Registro.
73-
74-
- Muy parecida a la de login. Deberá mostrar un formulario solicitando el nombre de usuario y contraseña.
75-
- Cuando el usuario envíe el formulario, deberá registrar al usuario en el backend.
76-
- Se deberá gestionar todos los estados de interfaz correctamente: carga, error y éxito.
77-
78-
### Opcional
79-
80-
- Gestionar la paginación de anuncios en el listado, ya que por defecto la API sólo devuelve 10 elementos.
81-
- Implementar un buscador de anuncios en el listado.
82-
- Permitir editar un anuncio, sólo si el usuario autenticado es el propietario del anuncio.
83-
- Permitir el filtrado de anuncios usando tags. Por lo que en el formulario de anuncio deberán poder incluirse tags de los mismos. Estos tags inicialmente pueden ser estáticos (siempre los mismos).
84-
- Unido al anterior, hacer que los tags sean dinámicos.
85-
86-
### API REST de Apoyo Para la Práctica y como utilizarla
87-
88-
Para emular una base de datos en esta práctica, utilizaremos **sparrest.js** como API REST de apoyo (creado por el docente de KeepCoding, Alberto Casero). Sparrest está basado en **json-server** y proporciona una API REST completa para simular un backend real y se adapta perfectamente a las necesidades de esta práctica.
89-
90-
Enlace al API REST
22+
- Promesas y sus estados: *pending*, *fulfilled* y *rejected*.
23+
- Peticiones HTTP con `fetch`.
24+
- `localStorage` y `sessionStorage`.
25+
- Almacenamiento local de datos en HTML5: cookies, storage e IndexedDB.
9126

92-
```bash
93-
git clone https://github.com/kasappeal/sparrest.js.git
94-
```
27+
## Descripción del proyecto
28+
29+
Con el fin de ejercitar y demostrar los conocimientos adquiridos en clases virtuales, este proyecto consiste en desarrollar una aplicación web similar a Wallapop. No se permite utilizar librerías o frameworks de JavaScript, aunque sí se pueden usar utilidades de CSS externas.
30+
Además, se debe proporcionar un archivo `db.json` para el backend con los datos de ejemplo necesarios para la corrección de la práctica.
31+
32+
### 1. Listado de anuncios
33+
34+
- Cada anuncio debe mostrar su imagen (si tiene), nombre, descripción, precio y si es de compra o venta.
35+
- Los anuncios deben obtenerse a través de un endpoint.
36+
- La pantalla de listado debe gestionar todos los estados de la interfaz:
37+
38+
- **Vacío** (no hay anuncios).
39+
- **Error** (al cargar los anuncios).
40+
- **Carga** (mientras se cargan los anuncios).
41+
- **Éxito** (cuando los anuncios se han recuperado correctamente).
42+
43+
- Al pulsar sobre un anuncio, se debe acceder a su pantalla de detalle.
44+
- Si el usuario ha iniciado sesión, debe mostrarse un botón para acceder a la pantalla de creación de anuncios.
45+
46+
### 2. Detalle de anuncio
47+
48+
- Debe mostrar imagen (si tiene), nombre, descripción, precio y si es de compra o venta.
49+
- Debe gestionar todos los estados de la interfaz:
50+
51+
- **Vacío** (no existe el anuncio).
52+
- **Error** (al cargar la información del anuncio).
53+
- **Carga** (mientras se carga la información).
54+
- **Éxito** (cuando se ha recuperado la información correctamente).
55+
56+
- Si el usuario está autenticado y el anuncio le pertenece, debe mostrarse un botón para eliminarlo (previa confirmación).
57+
58+
### 3. Creación de un anuncio
59+
60+
- Debe incluir un formulario con los siguientes campos:
61+
- **Foto** (opcional).
62+
- **Nombre** (obligatorio).
63+
- **Descripción** (obligatorio).
64+
- **Precio** (obligatorio).
65+
- **Compra/Venta** (obligatorio).
66+
67+
- Al enviar el formulario, se debe hacer una petición al backend para guardar el anuncio.
68+
- Se deben gestionar los estados de la interfaz:
69+
70+
- **Error** (al guardar el anuncio).
71+
- **Carga** (durante el guardado).
72+
- **Éxito** (cuando se guarda correctamente).
73+
74+
- Solo se puede acceder a esta pantalla si el usuario está logueado. En caso contrario, se redirige al listado e informa del motivo.
9575

96-
Una vez descargado el proyecto, deberás actualizar las dependencias. Después, reemplaza el archivo db.json generado con el archivo correspondiente del mismo nombre del proyecto, lo que permitirá cargar la base de datos. Para iniciar la base de datos, simplemente ejecuta el comando:
76+
### 4. Login
77+
78+
- Debe mostrar un formulario con nombre de usuario y contraseña.
79+
- Al enviar el formulario, se debe autenticar al usuario contra el backend y obtener un token JWT.
80+
- Se deben gestionar los estados: carga, error y éxito.
81+
82+
### 5. Registro
83+
84+
- Similar a la pantalla de login.
85+
- Debe registrar al usuario en el backend.
86+
- Se deben gestionar los estados: carga, error y éxito.
87+
88+
## Opcional
89+
90+
- Paginación de anuncios en el listado (la API devuelve solo 10 por defecto).
91+
- Buscador de anuncios.
92+
- Edición de anuncios (solo si el usuario es propietario).
93+
- Filtrado por etiquetas (tags) estáticas.
94+
- Hacer que los tags sean dinámicos.
95+
96+
## API REST de apoyo para la práctica
97+
98+
Para emular una base de datos se utilizará **sparrest.js**, un API REST creada por el docente Alberto Casero (KeepCoding), basada en `json-server`.
99+
100+
### Clonación del repositorio
97101

98102
```bash
99-
npm start
103+
git clone https://github.com/kasappeal/sparrest.js.git
100104
```
101105

102106
Esto levantará el servidor y pondrá en funcionamiento el API REST para que puedas interactuar con la base de datos simulada.
@@ -120,15 +124,22 @@ Esto levantará el servidor y pondrá en funcionamiento el API REST para que pue
120124

121125
### Pasos Para Utilizar Este Proyecto
122126

123-
1. Descargue el comprimido del proyecto desde GitHub a su ordenador.
127+
1. Descargue el archivo comprimido del proyecto desde GitHub a su ordenador o clónelo mediante SourceTree.
128+
129+
2. Una vez descargado o clonado el proyecto, agréguele a su espacio de trabajo en Visual Studio Code.
130+
131+
3. Una vez descargado Sparrest, actualice sus dependencias. Luego, para incorporar la base de datos probada en este proyecto, copie el archivo *db.json* del proyecto y reemplácelo por el que se genera en Sparrest una vez inicializado.
124132

125-
2. Una vez descargado el comprimido, abra el proyecto en Visual Studio agregando el directorio del proyecto a su espacio de trabajo.
133+
Para iniciar la base de datos, simplemente ejecute el siguiente comando dentro del directorio de Sparrest:
134+
135+
```bash
136+
npm start
137+
```
126138

127139
### Notas
128140

129-
- Asegúrate de tener correctamente instalados todos los programas necesarios antes de proceder con la ejecución del proyecto.
141+
- El archivo `db.json` contiene tres cuentas y 14 publicaciones. Estas son las credenciales de cada cuenta para iniciar sesión en el proyecto y editar las publicaciones ya creadas:
130142

131-
- En el archivo db.json se posee tres cuentas y 14 posts. Estas son las credenciales de cada cuenta para por iniciar sesión en el proyecto y editar los posts ya creados:
132143
- [pablsch.it@gmail.com](mailto:pablsch.it@gmail.com) / pwd: 123456
133144
- [Pedro.it@gmail.com](mailto:Pedro.it@gmail.com) / pwd: 123456
134145
- [jose.JJ@gmail.com](mailto:jose.JJ@gmail.com) / pwd: 123456

0 commit comments

Comments
 (0)