notes.qmd

# Notas
## Para jueves
1. Cómo ha evolucionado MVC.
    - Origenes 70-80. 
    - En los 2000 hubo cambios clave: Controlador maneja peticiones HTTP. La vista se genera en servidor y se enviaba HTML/CSS al cliente.
    - Se introducen las capas servicios y repos.
    - Separación de Frontend/Backend en los 2010.
    - Actualidad: Microservicios. 

2. Qué es DB, JPA y MVC.
    - **Data Base:** Consiste en una tabla o serie de tablas (formadas por filas y columnas) donde se guardaran información de todo tipo. Estas tablas son accesibles por medio de peticiones llamadas Queries.
    - **JPA:** Es un asistente que te ayuda a trabajar con las bases de datos sin escribir tantas queries manualmente. Tiene como unas plantillas básicas para trabajar con SQL.
    - **MVC:** Es un patrón de diseño que funciona con 3 partes. Modelo (guarda y gestiona info), Vista (Es lo que ve el usuario), Controlador (Recibe las acciones del usario, las envía y actualiza la vista.)

3. Al realizar un test creando un objeto en la DB, por qué después no aparece ese objeto en la DB cuando la abro?
    - Spring boot, por defecto, utiliza una estrategia que no persiste los datos en la DB. Esto hace que los datos sólo existen mientras se hace el test al usar una DB en memoria.
    - Se puede forzar a que los guarde.
    - @Transactional: Spring Boot hace rollback automático al realizar una prueba con esta anotación.
    - @Commit: Si realizo test con esta anotación, se guardarán.
    - Algunas configs permiten ejecutar tests en entornos aislados (Docker), lo que hace que no se reflejen en la base de datos.

---

- Mock-server.md en rama master.
- Git Workktree

## Pasos proyecto React:
- Postman
- Instalar Jest
- Controlar componentes
- Iniciar con Vite
- Axios
- Instalar: Material UI todas las herramientas
- useState / useEffect: Hooks
- Deploy


## Notas PRA01-React
- En app.jsx añadir la componente user.
- Usar Filter para dificultad (Esta en React.dev).
- En el último commit de `frontend-react` está el `axios` desacoplado. REVISAR

- Qué es un wrapper, collection y container??
- ResponseEntity y Optional.
- List, Hashmaps, Treeset, Queue, vector. 
- Postman ver vídeo picnic.

- Servlet. Picnic
- ID compuestas. Picnic
- JPQL: Lenguaje SQL de JPA para queries en oneliner.

---

## Semana 6
- [ ] Ventajas e inconvenientes de hacer scroll position con useEffect o useState.

- Continuar práctica Spring Boot con el UML de `pronunciationApp-v0.2-model-1.png`.

- Deep Seek en local

---

## Semana 7
- [Expose local server](https://github.com/AlberteMB/pronunciationApp/blob/master/management/Testing%20and%20Mocking/expose-local-server/expose-local-server.md).`bore, ngrok, localhost.run`- 

- [x] Clases anónimas.
- [x] Clases anidadas.

- Pronunciation, Word, StageWord, Stage, GameProgress

---

## Semana 8
- En React, diferencia entre pasar e invocar o llamar.
- En React pasamos funciones y no las invocamos.
- Spring Boot: En las relaciones en @OneToMany, @ManyToOne y @ManyToMany, en la base de datos no se guardan los array. 
- No los veremos si no usamos otro tipo de de anotación. 

---

## Semana 9
- [x] Definición de `Imperativa` y `declarativa` en React.

- [ ] **List fundamental 25 keywords:**
    - Mindset (5)
    - Communication (5)
    - Collaboration (5)
    - Execution (5)
    - Order (5)

- [ ] Accordion. Props, Children.    

- [ ] Respuesta `Undefined` del server al client.
- [ ] Providers y consumers.
- [x] POJO, Bean, Entity.
- [x] Set en lugar de List para Enum. En `Set` cada valor en él es único. No se repiten nunca.

- [x] Patrones de diseño Singleton y Factory: PICNIC
- [ ] Gestión del state en blockchain.
- [ ] API: WEB3.js, ethers.js.

---

## Semana 10
- [x] 4 Tipos de queries: 
    1. Derivadas (subject + predicate).
    2. Named queries.
    3. @Query (JPQL).
    4. Native (Directamente SQL).

- [ ] FTP en web.

- [x] Film Advisor
        1. UML sencillo.
        2. Arquitectura con Hilla. Revisar endpoints.
        3. Mockup: Main y User
        4. DB: Tipo, estructura y volumen que maneje.
        5. RestTemplate: Manejo de datos de API de Java.

- [x] `Cascade`: Como borrar un borrow sin borrar el user y el book asociado.

---

## Semana 12
- [x] Java Mission Control (JMC): Para revisar el consumo del programa de Java.
- [x] Hibernate y Tomcat.
- [x] async y await.

- [x] CORS (Cross-Origin Resource Sharing): Mecanismo de seguridad implementado en los navegadores web que permite a un servidor restringir cómo se puede solicitar resursos desde un dominio diferente al suyo.
- [ ] Isomorphic: Client/Server (browser, node.js).
- [x] Axios.
- [x] Props SX: Style Extended. Es una super Prop que permite aplciar estilos directamente a los componentes utulizando un objeto de estilo. 

- [ ] Explicación recibir el evento. Desestructurar, etc.
```js 
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
    };
```  
---

## Semana 13

### Projects en los que trabajaremos

- **userBorrowBookBack**: Backend for React. (.jar)
- **userBorrowBookPagination**: Only for pagination.
- **BooksPageable**: Example pagination with Thymeleaf.
- **userBorrowBookFilter**: Just for filter. 

### Deploy
#### Spring Boot
- [ ] **AWS**: Elastic BeanStalk. Creamos .jar (Hard)
- [ ] Local jar --> S3 --> Elastic Beanstalk (Jar + enviroment + deploy)
- [ ] **Railway**: Creamos .jar (Medium)

#### React
- [ ] GH--> AWS: Amplify
- [ ] GH--> Netlify (Easy)

---

## Semana 14
- [ ] Buscar: Amazon Bedrock Deepseek

- [ ] useLayoutEffect
- [ ] useContext  
- [ ] useLocation
- [ ] Revisar estructura de service en userBorrowBooksFront.
- [ ] Select

- [ ] @PathVariable vs @QParam (o @QueryParam. no estoy seguro).
- [ ] @RequestParam
- [ ] Filter en Java. Specification.
- [ ] Select en React.   

- **Specification**: Para crear predicados de las queries **dinámicas**.
1. Which Params
2. Related entities. Create JOIN objects.
3. Query: Builder.
4. Arrow function: (root, query, criteriaBuilder) -> (predicate)
5. Body method: create ALL Predicates.

- [ ] Builder para crear objetos. Por qué usarlo.

---

## Semana 15

### Desacoplando usando useContext
1. Create JS.
2. Create jsx component hooks.
    - Create context.
    - usecontext
    -apiService -> Provider
3. Import to the component     

bookService (s)
bookServiceContext (c)
useBookService (h)
bookserviceProvider (p)    

### Views with filter in userBorrowBooksFront
1. Filter + nada.
2. Filter + error
3. Filter + loading
4. Filter + FilteredBorrows

**Render**
<>
{ Error }
{ Loading }
{ Filtered.map() }
</>

---

## Semana 16

- DAX : Redis de Dynamo DB.

---

## Semana 18

- Iterator??
- Cuándo usar forEach y cuándo Iterator???
- Method reference: Ejemplo: (movie::add)
- Clase anónima en lugar de arrow function???

---

## Semana 19

- B-Tree

- Para la semana:
    - Data flow
    - Code
    - GUI AWS

- Vocabulario básico    
    - Diferencia entre User pool y Identiti Pool. (Nos limitamos a User Pool)

- Arquitecturas de Cognito: Acces backend resources with user pool tokens.

---

## Semana 20

### Keywords

- **Mappear:** Convierte o transforma cada elemento de una colección con otro valor, creando una nueva estructura a partir de la original. *Más atención en la estructura. Importancia al tipo de objeto*

- **Parsear:** Analizar info de una cadena de datos convirtiendo a una estructura más manejable. Cambiar de formato o tipo. *Más atención en el contenido. Imporntacia al tipo de dato.*

- **Iterar:** Repetir una acción o conjunto de instrucciones.

- **Encriptar:** Transformar en formato cifrado.

- **Codificar:** Traducir info o instrucciones.

- **Validar/Verificar:** Comprobar que los datos cumplen cierto criterio.

*En relación a las keywords anteriores, qué papel tiene Axios?*

- **AXIOS:** Serialización. 

- **Serializar/Deserializar:** 

- **Empaquetar:** 

---

### URI/URL
- **URI:** Identifyer. parte de la URL
- **URL:** Locator. Dónde encontramos algo. *Protocolos + Host + Path ...*

---

## Semana 22

- Next.js
    0. Fullstack JavaScript --> Node.js
    1. Flexible & Adaptable ('use client', 'use server')
    2. SSK vs CSK
    3. Router

- 5 puntos que resuelve React en App web?
    - APIs
    - BL
    - Render
    - Data model
    - Navigation