sábado, 24 de octubre de 2020

Guía de iniciación al desarrollo full stack (parte 2/Backend)

 En Backend, hoy en día, tenemos los servidores de aplicaciones que reciben todas las peticiones desde el lado cliente (frontend), realizan las gestiones oportunas, hacen las consultas a las BBDD y devuelven la información al cliene, por ponerlo de manera muy simple. Para conseguir desarrollar las aplicaciones que hacen todo lo anterior podemos utilizar lenguajes de programación como Java, C# y Phyton. Me encanta C#, pero me he especializado en Java, así que explicaré la parte de Backend utilizando este lenguaje. Eso sí, aviso que el mundo de Java es infinito y no termina nunca. Siempre aparecen nuevos frameworks que aprender, nuevas formas de trabajar, nuevas tecnologías, etc. Por ejemplo, pongamos que queréis dedicaros a esto (en la parte de Backend) y decidís empezar con Java. Esto sería lo que tendríais que aprender:

-Java SE. Esto es el lenguaje Java puro y duro. Aquí aprendes a programar de forma estructurada y orientada a objetos: sentencias de control, objetos, herencia, polimorfismo, colecciones, genéricos, programación funcional, etc. No os asustéis por estos términos, ya que los iréis aprendiendo uno por uno y con muchos ejercicios.

Nota: ya hace un tiempo que las aplicaciones de escritorio no se llevan mucho, así que si tenéis prisa por aprender podéis saltar la parte de interfaces gráficas: AWT, Swing, Java FX. Personalmente, creo que se debe aprender todo y creando estas aplicaciones se aprende sobre el patrón MVC, pero esto también se enseña en Java EE.

-Java EE. Aquí es cuando aplicas lo aprendido con Java SE para empezar a programar aplicaciones web. Básicamente, esto es lo más importante. Lo anterior es como un entremés para poder empezar esto (como decía, es muy denso). Aquí aprenderéis a trabajar con tecnologías como JDBC, JSP (Java server pages) y Servlets, patrón de diseño MVC, EJB, JPA (Java persistence api), Java Server Faces, patrón de diseño DAO, Web Services, etc.

-Frameworks. Los frameworks externos a Java implican nuevas formas de trabajo y facilitan de una manera enorme el trabajo a la hora de programar. Algunos de estos frameworks son Spring, Struts, Hibernate, Vaadin, etc.

Ahora mismo, el mejor tutorial que puedo recomendaros que toque todo esto es

Universidad Java de Udemy

https://www.udemy.com/course/universidad-java-especialista-en-java-desde-cero-a-master/

Lo he cursado entero y es uno de los mejores. Si bien es cierto que el profesor respondía a todo al principio, a partir de un momento dejó de hacerlo. De todos modos, los compañeros también ayudan y no paran de añadir contenido, así que está muy bien. Además, incluye HTML5, CSS, Bootstrap, Angular, etc. Siempre se puede adquirir de oferta por 10-12€ y es una de las mejores inversiones.

Otros de los cursos que merecen la pena, y mucho, son los de píldoras informáticas:

Java SE

https://www.pildorasinformaticas.es/course-cat/java_se/

Java EE

https://www.pildorasinformaticas.es/course-cat/java-ee/

Curso Spring

https://www.pildorasinformaticas.es/course/curso-spring/

Consejos: en la mayoría de ofertas de trabajo piden haber trabajado con JSP o Spring. Lógicamente, si trabajas con JSP debes haber trabajado con Servlets. Si has aprendido a trabajar con Servlets no te costará nada aprender Spring MVC. Llegados a este punto, es importante que aclare qué es Spring. Es un framework enorme con una cantidad de características abrumadora:

-Spring Boot, Spring MVC, Spring Cloud, Spring Security, Spring Batch, etc.

Lleva un tiempo aprender a usarlo, pero es muy importante hacerlo. Hoy en día no paran de pedir programadores java con conocimientos en Microservicios, contenedores y Amazon Web Services. Todo esto se trabaja con Spring. Por suerte, si has estudiado Java con los VT que he aconsejado antes, verás que Spring reduce el esfuerzo del programador al mínimo. El framework lo hace casi todo él solito. La verdad es que es algo increíble.

Para trabajar con bases de datos se suele utilizar JPA (oficial de Java) o Hibernate (muy parecido a JPA). Una vez aprendes el primero no es nada difícil hacerse con el segundo. Hay muchas más ofertas de trabajo pidiendo Hibernate, pero siempre encuentras alguna con JPA. Ambos utilizan una API llamada Criteria para las búsquedas de datos complejas (por ejemplo, peticiones con muchos campos: nombre, apellido, año, curso, dirección, etc. o búsquedas de datos con muchos filtros).

En resumen, aprendes Java SE para poder aprender Java EE, pero esto no es suficiente así que aprendes Spring e Hibernate (que resulta más fácil porque ya sabes lo anterior). Como decía, infinito xD.

En microservicios aprenderás a implementar todo lo aprendido anteriormente, pero dividiendo la aplicación en partes pequeñas (microservicios) y distribuyendo éstas en distintos servidores. Aquí es cuando entran los contenedores (docker, kubernetes).

Amazon web services no deja de ser más de lo mismo, sólo que en lugar de tener tú las máquinas en la oficina, es Amazon quien las hospeda. Por explicarlo de forma muy simple, Amazon web services te permite crear copias de máquinas con el software necesario de forma muy rápida y cómoda. En nuestro caso instalaríamos servidores de aplicaciones o de bases de datos en cada máquina. Cada servidor tendría un parte pequeña (microservicio) que se comunica con las otras. Cada microservicio puede acceder a la base de datos que quiera (una puede utilizar MySQL, otra MongoDB, PostgreSQL, etc). Del mismo modo, cada microservicio puede estar programado en Java, C#, Phyton, etc. y se comunican entre sí utilizando tecnologías estándar (como se ha usado siempre XML o JSON).

Si te gusta programar el mundo de Java es maravilloso, pero llegar a aprenderlo casi todo (fijaros que no he profundizado en el framework Struts o Vaadin) lleva mucho tiempo y picar código continuamente.

Guía de iniciación al desarrollo full stack (parte 1/Frontend)

 Si quieres aprender a programar o a hacer páginas/aplicaciones web tienes que meditar qué es lo que quieres hacer y cuál es tu nivel actual. Si no sabes nada de nada te recomiendo empezar por la parte Frontend (también conocida como lado cliente o lo que ves en el navegador web). Si ya tienes más experiencia y/o tienes claro que lo que te gusta es picar código tal vez debas plantearte el lado Backend (también conocido como lado servidor). Éste es mucho más complejo y, según el lenguaje que escojas, puede llegar a ser infinito (como es el caso de Java). Por suerte, siempre puedes especializarte un poco y saltarte algunas cosillas. Por ejemplo, si lo que quieres es dedicarte a las aplicaciones web puedes saltarte tecnologías como AWT (que ya no enseña nadie), Swing y Java FX que sirven para el desarrollo de interfaces gráficas en aplicaciones de escritorio.

 Voy a estructurar este post en varias categorías. En cada una publicaré video tutoriales (VT) que creo que son los más indicados para empezar (así me ahorro ser yo quien enseñe xD).

 Hay que tener en cuenta que todo lo relacionado con la informática es muy autodidacta. Aunque aquí se posteen VT para empezar hay que moverse y buscarse la vida para encontrar libros y más VT que expliquen nuevo contenido, nuevas tecnologías, etc. Cada X tiempo está saliendo algo nuevo que aunque no es obligatorio aprender si es muy inteligente saber de qué va y qué es lo que hace.

 Para finalizar, si no sabes programar, pero quieres hacer páginas web y deseas aprender con una curva de aprendizaje muy sencilla, empieza por Frontend.

 Si tienes claro que picar código es lo tuyo o es lo que te va, tira directamente a por la parte de Backend y que dios te asista xD.

 Las siguientes categorías son bases de datos (BBDD) y desarrollo de aplicaciones móviles (concretamente, Android). Las BBDD se utilizan en casi todos los desarrollos ya que es donde se almacenan los datos con los que se trabaja, así que hay que conocerlas mínimamente. La sección de Android la dejo por vicio, más que nada, pero debes conocer lenguajes como Kotlin o Java para poder trabajar en ello.

Cosas por saber antes de empezar:

-En cada video tutorial utilizarán un editor de código o entorno de desarrollo distinto. Mi consejo es que aprendéis a usar el de cada VT. No hace falta convertirse en experto, pero es muy buena idea conocer varios. En el lado Frontend, seguramente, acabaréis trabajando con visual Studio Code, pero si utilizan Brackets o Sublime no dudéis en aprender cómo funcionan.

-Es importante tener localizados los mejores portales de VT para no dejar de aprender constantemente. Los principales son:

Udemy:

https://www.udemy.com/

 El principal portal de enseñanza. Tiene cursos en muchos idiomas y aplicaciones para smartphones. Es muy completo en todo lo referente a lecciones, vídeos, seguimiento, comentarios, etc. La primera vez que lo vi me pareció genial.

 IMPORTANTE: Udemy está realizando descuentos cada semana de forma constante. Si veis un VT que os interesa, pero supera los 15 €, ponedlo en la lista de deseos y entrad a la web cada día. En algún momento estará de oferta y lo podréis comprar sin dejaros un sueldo.

Domestika:

https://www.domestika.org/

Parecido a udemy

Itoo:

https://itoo.dev/

Es muy parecido a Udemy. De hecho, diría que algunos de los docentes que publicaban sus cursos ahí han creado esta plataforma.

Openwebinars:

https://openwebinars.net/

Portal de cursos con tarifa plana.

Platzi:

https://platzi.com/

Portal de cursos con tarifa plana.

Píldoras informáticas:

https://www.pildorasinformaticas.es/

Gratuito y de lo mejor del mercado español.

Otros:

https://megacursos.com/

Este me gusta porque tiene cursos gigantescos donde lo tocan todo. En el de Java incluso te enseñan a programar un juego, cosa que no he visto en otro.

https://es.coursera.org/

https://escuela.it/

 

Y una vez hecho la introducción... ¡Empecemos!


Frontend

 

 En pleno 2020 hay mucha tecnología en el lado cliente, así que hay que aprender bastante cosilla, pero es sencillo y todo muy visual, así que se aprende muy deprisa. El orden de aprendizaje debería ser el siguiente:

 

HTML (versión 5)

 

 Lo primero que hay que aprender (y lo más fácil). En una página web, HTML sería todo el texto e imágenes que ves.

 

Tutoriales recomendados

 

Aprende a crear webs desde cero con HTML Y CSS de Guillermo Rincón

Os lo dejo subido en Mega

https://mega.nz/file/pUkBiSgJ#fjTdYk3SzfZaEE4-aXBnTdE1mJgLJejt2p4jOBYqenY

 Este VT es bastante básico. Muy bueno para los que empiezan sin tener ni idea, aunque se queda un poco corto; así que habrá que seguir con VT más avanzados. Es buena idea combinar este VT con la web Lista con los elementos de HTML5 (la URL está más abajo) para consultar todos los elementos HTML disponibles, sus diferentes atributos y los posibles valores de estos.

Curso de HTML 5 de Píldoras informáticas

https://www.pildorasinformaticas.es/course/html-5/

También tiene canal en Youtube:

https://www.youtube.com/channel/UCdulIs-x_xrRd1ezwJZR9ww

 Este señor es de lo mejorcito que encontraréis en internet. Explica de fábula. Como podréis comprobar tiene una cantidad de cursos elevada y muchos los usaré aquí.

 

Páginas web de consulta recomendadas

 

Lista con los elementos de HTML5

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

Tutorial HTML

https://www.w3schools.com/html/default.asp

 Con los dos cursos/videotutoriales que os he puesto y las dos páginas web de consulta tenéis de sobras para aprender HTML5, así que podemos pasar al siguiente tema.

 

CSS (versión 3)

 

 Es lo segundo que hay que aprender. En una página web, el CSS (hojas de estilo en cascada) es lo que organiza y da forma al HTML (texto e imágenes). Lo que hace que quede bonito. El cambio entre no usar CSS y sí hacerlo es muy bestia, así que hay que aprenderlo xD.

Curso CSS Avanzado desde 0 de Píldoras informáticas

https://www.pildorasinformaticas.es/course/css-avanzado-desde-0/

 Dentro de CSS podéis encontrar SASS y LESS, entre otros. Son ampliaciones de CSS que incluyen nuevas características. De todos modos, esto es mejor que sólo lo miréis si lo necesitáis o decidís tomaros en serio el desarrollo frontend.

 

Ahora que ya sabéis cómo funciona HTML y CSS os dejo aquí unos tutoriales que tocan ambas tecnologías.

HTML5 y CSS3 de Global Mentoring

https://mega.nz/file/oJciHBrC#D1gk65qJhADmineOkFWO8Q2iRxVdf1b9j9NFTtKdXmc

Diseño Web Responsive con HTML5 y CSS3 (2014)

https://mega.nz/file/MQEkVZjY#LxfCjVv19j_G8igzNVxRem_Noi6xXDtunaA1aE4W4FY

Desarrollo web rápido HTML5, CSS3 y Bootstrap 3 (2015) [Udemy]

https://mega.nz/file/MFckFZ6L#Or668m0kE6aUYrouWNnEKO2-O84lRm6whZ35cApq2qQ


Librerías HTML

 

Bootstrap

 

 Una buena idea es coger el trabajo hecho por otros y reutilizarlo. En este caso, Twitter nos permite usar sus librerías Bootstrap para que podamos aplicar todo tipo de botones y demás a nuestra página web. Aquí os dejo su web https://getbootstrap.com/ . Es muy de usar: vas a la sección de la página web de dónde quieres coger algo. Por ejemplo, unos botones para tu web: https://getbootstrap.com/docs/4.5/components/buttons/ . Ellos te muestran los distintos botones con sus diferentes estilos y, además, cuelgan el código que debes copiar y pegar en tu web. Y ya está. Así de fácil. Lo único que debes hacer es incluir una línea al principio con un link a su librería. Todo esto viene explicado en los VTs correspondientes. Dejo subido a la cuenta de MEGA el VT 

Bootstrap 4, El Curso Completo Practico Desde Cero (2017)

https://mega.nz/file/QINWzZCY#94JmDgHhcOlTdxjIUoAyrHtz9aFzMj2ObCMSusD6DRI

 

JavaScript

 

 Llegados a este punto es cuando empezáis a aprender a programar. Aquí trabajaréis con funciones y objetos, aunque de una manera más sencilla que con lenguajes como Java o C#. Javascript va muy bien para que el usuario pueda interactuar con la página web que le muestra el navegador. Hoy en día es imprescindible saber trabajar con este lenguaje, pero ya veréis que es muy divertido y ameno. En seguida se ven los cambios y se pueden hacer muchas virguerías (juegos, páginas web muy llamativas, etc). Además, también podéis usarlo para trabajar en el lado servidor.

Curso JavaScript desde 0 de Píldoras informáticas

https://www.pildorasinformaticas.es/course/javascript-desde-0/

 

Librerías Javascript

 

jQuery

 

jQuery es un conjunto de funciones ya escritas en Javascript. Lo que tiene de bueno es que puedes usarlas sin tener que escribirlas tú u ofrecerte algunas en las que ni siquiera habías pensado. No es obligatorio aprenderlo ya que todo está escrito con Javascript, pero sería muy burro no hacerlo. Encontraréis mucho material de en YouTube y portales de enseñanza, pero dejo en la cuenta de MEGA 

Curso de JavaScript y jQuery (2017) 

https://mega.nz/file/NdEUgD5D#pvRcmfjdIipYza8D9CjEyA7yiLG6zJrWyO_GaAAX8mQ

El curso de Javascript de Píldoras informáticas también tiene una sección de jQuery. Además, dejo la web con la documentación oficial para su consulta https://jquery.com/

Backbone es otra librería de javascript.

 

Frameworks

 

 Con todo lo anterior ya estáis más que preparados para hacer páginas web fabulosas, pero ahora se han puesto de moda los frameworks como Angular, React, Vue, etc. Debo reconocer que cuando probé el primero aluciné. Lo que hace Angular es dividir la web en distintas zonas (igual que cuando la desarrollas con html donde tienes el banner, el menú de navegación, el cuerpo, el pie de página, etc.) y trabajas cada zona por separado. Lógicamente, la cosa da mucho más de sí, pero es para que os hagáis una idea de que estos frameworks cambian un poco el paradigma, pero son fantásticos. Si has decidido meterte en el mundo del Frontend no dudes, bajo ningún concepto, en aprender uno y mi consejo es que empieces por Angular.

 Es importante no confundir AngularJS (la primera versión del framework que salió y que se trabajaba con Javascript) y Angular (framework posterior que trabaja con Typescript y que va por su versión 10). Tira por éste último y, aunque utilice el lenguaje Typescript, lo que hace el framework es traducir todo a Javascript para el navegador. Es decir, que puedes trabajar también con JS, pero TS es mejor.

El tutorial de Angular más reciente del que dispongo es de la versión 4/5, así que para la versión 10 deberéis buscar en Udemy y demás portales de enseñanza.

Curso esencial de Angular 4 (2017)

https://mega.nz/file/cd8XQQpC#l8_qDs8S4fJI8VGR0CjoEaO3s1XuC7KsngpeFUWkN2Q

Curso de Angular 5. Desde cero hasta profesional  (2018)

https://mega.nz/file/RI8FnAoT#Bch9DsNoJA6k0YdM4hNLULT4FZ6QZ9cE0IEGUdB6l3Y

 

Y hasta aquí la parte de Frontend. 



viernes, 23 de octubre de 2020

Dr Slump Memory Game

 Hoy traigo un jueguico hecho con Javascript. Es muy simple, pero le he dado un punto friki. Es el típico juego donde debes ir descartando parejas de cartas. Si no encuentras dos iguales vuelve a ponerse el reverso. Aquí una imagen del juego al empezar:




Al hacer clic en una carta, ésta se gira y deja al descubierto la figura que hay debajo:

Ahora sólo hay que hacer clic en otra y si coinciden desaparecen del tablero. Si no se vuelve a poner el reverso.





Aplicación web con Java Server Faces, JPA y MySQL

 Para ir poniendo en práctica lo aprendido últimamente he creado esta aplicación que utiliza las siguientes tecnologías:

-MySql.

-Java:

    -JPA (Entity classes).

    -EJB.

    -Java Server Faces (ManagedBeans).

    -Primefaces.

Al final he dejado un frontend simple. Cuando haces clic en un botón te lleva a la página correspondiente. En un primero momento, al hacer clic en dicho botón, aparecían dos nuevos que permitían consultar el listado correspondiente (comics, música, películas, series y videojuegos) y agregar un producto nuevo a la BBDD, pero al final decidí que era mejor una única página para cada tipo de producto y que desde ella se realicen todas las operaciones.



Dejo aquí cómo se vería el listado de comics y, luego, como se agregaría un nuevo:


Para la tabla utilizo una dataTable de Primefaces. Te permite filtrar por cada campo sin necesidad de que tengas que hacer nada. También permite editar cada registro. Si se hace clic en el botón "Agregar" aparece una ventana modal como ésta:


La creación de la tabla, ventana modal, etc. es de una facilidad pasmosa. Todo lo hace el framework. 
El resto de secciones son iguales. He priorizado la funcionalidad antes que la estética.

Problemas encontrados:

1) A partir de cierto momento, los estilos de dataTable desaparecieron. Todavía no sé por qué. Después de mucho investigar decidí empezar el proyecto de nuevo y sucedió lo mismo: al principio todo va bien y, a partir de un punto, se va todo al cuerno. Lo único que he conseguido es volver a un punto del proyecto cuando los estilos aún funcionaban, sacarlos del navegador e implementarlos con un fichero CSS externo.

2) Tuve un problema con los nombres de los campos en las tablas película y seriesTv. Tenían un campo llamado "dual" con un valor booleano, pero parece que entraba en conflicto con JPA o MySQL (sinceramente, aún no sé con cual) por considerarlo una palabra clave (la variable utilizada en las Entity class tenía el mismo nombre: dual). Después de averiguar que ese era el problema lo cambié por "Idiomas" de tipo String (y así aprovecho y pongo todas las pistas de audio). Aún utilizando la anotación @Column(name="dual") seguía pasando.